diff --git a/af/accounts.yml b/af/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/af/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/af/common.yml b/af/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/af/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/af/homepage.yml b/af/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/af/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/af/how_to_help.yml b/af/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/af/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/af/legacy.yml b/af/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/af/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/af/results.yml b/af/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/af/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/af/state_of_css.yml b/af/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/af/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/af/state_of_css_2020.yml b/af/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/af/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/af/state_of_css_2021_results.yml b/af/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/af/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/af/state_of_css_2021_survey.yml b/af/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/af/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/af/state_of_graphql.yml b/af/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/af/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/af/state_of_graphql_2022.yml b/af/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/af/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/af/state_of_js.yml b/af/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/af/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/af/state_of_js_2020.yml b/af/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/af/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/af/state_of_js_2020_survey.yml b/af/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/af/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/af/state_of_js_2021_results.yml b/af/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/af/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/af/state_of_js_2021_survey.yml b/af/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/af/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/af/surveys.yml b/af/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/af/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/af/yaml-validation.yml b/af/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/af/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/ar/accounts.yml b/ar/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/ar/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/ar/common.yml b/ar/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/ar/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ar/homepage.yml b/ar/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/ar/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/ar/how_to_help.yml b/ar/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/ar/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/ar/legacy.yml b/ar/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/ar/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ar/results.yml b/ar/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/ar/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/ar/state_of_css.yml b/ar/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/ar/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/ar/state_of_css_2020.yml b/ar/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/ar/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/ar/state_of_css_2021_results.yml b/ar/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/ar/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ar/state_of_css_2021_survey.yml b/ar/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/ar/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/ar/state_of_graphql.yml b/ar/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/ar/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/ar/state_of_graphql_2022.yml b/ar/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/ar/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ar/state_of_js.yml b/ar/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/ar/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/ar/state_of_js_2020.yml b/ar/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/ar/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/ar/state_of_js_2020_survey.yml b/ar/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/ar/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/ar/state_of_js_2021_results.yml b/ar/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/ar/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ar/state_of_js_2021_survey.yml b/ar/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/ar/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/ar/surveys.yml b/ar/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/ar/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/ar/yaml-validation.yml b/ar/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/ar/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/ca/accounts.yml b/ca/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/ca/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/ca/common.yml b/ca/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/ca/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ca/homepage.yml b/ca/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/ca/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/ca/how_to_help.yml b/ca/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/ca/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/ca/legacy.yml b/ca/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/ca/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ca/results.yml b/ca/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/ca/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/ca/state_of_css.yml b/ca/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/ca/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/ca/state_of_css_2020.yml b/ca/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/ca/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/ca/state_of_css_2021_results.yml b/ca/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/ca/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ca/state_of_css_2021_survey.yml b/ca/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/ca/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/ca/state_of_graphql.yml b/ca/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/ca/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/ca/state_of_graphql_2022.yml b/ca/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/ca/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ca/state_of_js.yml b/ca/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/ca/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/ca/state_of_js_2020.yml b/ca/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/ca/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/ca/state_of_js_2020_survey.yml b/ca/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/ca/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/ca/state_of_js_2021_results.yml b/ca/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/ca/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ca/state_of_js_2021_survey.yml b/ca/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/ca/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/ca/surveys.yml b/ca/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/ca/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/ca/yaml-validation.yml b/ca/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/ca/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/cs/accounts.yml b/cs/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/cs/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/cs/common.yml b/cs/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/cs/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/cs/homepage.yml b/cs/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/cs/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/cs/how_to_help.yml b/cs/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/cs/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/cs/legacy.yml b/cs/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/cs/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/cs/results.yml b/cs/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/cs/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/cs/state_of_css.yml b/cs/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/cs/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/cs/state_of_css_2020.yml b/cs/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/cs/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/cs/state_of_css_2021_results.yml b/cs/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/cs/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/cs/state_of_css_2021_survey.yml b/cs/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/cs/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/cs/state_of_graphql.yml b/cs/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/cs/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/cs/state_of_graphql_2022.yml b/cs/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/cs/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/cs/state_of_js.yml b/cs/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/cs/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/cs/state_of_js_2020.yml b/cs/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/cs/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/cs/state_of_js_2020_survey.yml b/cs/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/cs/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/cs/state_of_js_2021_results.yml b/cs/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/cs/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/cs/state_of_js_2021_survey.yml b/cs/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/cs/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/cs/surveys.yml b/cs/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/cs/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/cs/yaml-validation.yml b/cs/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/cs/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/da/accounts.yml b/da/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/da/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/da/common.yml b/da/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/da/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/da/homepage.yml b/da/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/da/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/da/how_to_help.yml b/da/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/da/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/da/legacy.yml b/da/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/da/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/da/results.yml b/da/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/da/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/da/state_of_css.yml b/da/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/da/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/da/state_of_css_2020.yml b/da/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/da/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/da/state_of_css_2021_results.yml b/da/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/da/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/da/state_of_css_2021_survey.yml b/da/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/da/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/da/state_of_graphql.yml b/da/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/da/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/da/state_of_graphql_2022.yml b/da/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/da/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/da/state_of_js.yml b/da/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/da/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/da/state_of_js_2020.yml b/da/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/da/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/da/state_of_js_2020_survey.yml b/da/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/da/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/da/state_of_js_2021_results.yml b/da/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/da/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/da/state_of_js_2021_survey.yml b/da/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/da/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/da/surveys.yml b/da/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/da/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/da/yaml-validation.yml b/da/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/da/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/de/accounts.yml b/de/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/de/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/de/common.yml b/de/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/de/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/de/homepage.yml b/de/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/de/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/de/how_to_help.yml b/de/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/de/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/de/legacy.yml b/de/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/de/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/de/results.yml b/de/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/de/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/de/state_of_css.yml b/de/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/de/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/de/state_of_css_2020.yml b/de/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/de/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/de/state_of_css_2021_results.yml b/de/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/de/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/de/state_of_css_2021_survey.yml b/de/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/de/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/de/state_of_graphql.yml b/de/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/de/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/de/state_of_graphql_2022.yml b/de/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/de/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/de/state_of_js.yml b/de/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/de/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/de/state_of_js_2020.yml b/de/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/de/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/de/state_of_js_2020_survey.yml b/de/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/de/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/de/state_of_js_2021_results.yml b/de/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/de/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/de/state_of_js_2021_survey.yml b/de/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/de/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/de/surveys.yml b/de/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/de/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/de/yaml-validation.yml b/de/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/de/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/el/accounts.yml b/el/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/el/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/el/common.yml b/el/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/el/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/el/homepage.yml b/el/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/el/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/el/how_to_help.yml b/el/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/el/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/el/legacy.yml b/el/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/el/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/el/results.yml b/el/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/el/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/el/state_of_css.yml b/el/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/el/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/el/state_of_css_2020.yml b/el/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/el/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/el/state_of_css_2021_results.yml b/el/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/el/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/el/state_of_css_2021_survey.yml b/el/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/el/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/el/state_of_graphql.yml b/el/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/el/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/el/state_of_graphql_2022.yml b/el/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/el/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/el/state_of_js.yml b/el/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/el/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/el/state_of_js_2020.yml b/el/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/el/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/el/state_of_js_2020_survey.yml b/el/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/el/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/el/state_of_js_2021_results.yml b/el/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/el/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/el/state_of_js_2021_survey.yml b/el/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/el/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/el/surveys.yml b/el/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/el/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/el/yaml-validation.yml b/el/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/el/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/en/accounts.yml b/en/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/en/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/en/common.yml b/en/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/en/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/en/homepage.yml b/en/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/en/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/en/how_to_help.yml b/en/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/en/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/en/legacy.yml b/en/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/en/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/en/results.yml b/en/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/en/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/en/state_of_css.yml b/en/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/en/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/en/state_of_css_2020.yml b/en/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/en/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/en/state_of_css_2021_results.yml b/en/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/en/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/en/state_of_css_2021_survey.yml b/en/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/en/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/en/state_of_graphql.yml b/en/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/en/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/en/state_of_graphql_2022.yml b/en/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/en/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/en/state_of_js.yml b/en/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/en/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/en/state_of_js_2020.yml b/en/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/en/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/en/state_of_js_2020_survey.yml b/en/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/en/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/en/state_of_js_2021_results.yml b/en/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/en/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/en/state_of_js_2021_survey.yml b/en/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/en/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/en/surveys.yml b/en/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/en/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/en/yaml-validation.yml b/en/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/en/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/es/accounts.yml b/es/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/es/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/es/common.yml b/es/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/es/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/es/homepage.yml b/es/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/es/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/es/how_to_help.yml b/es/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/es/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/es/legacy.yml b/es/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/es/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/es/results.yml b/es/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/es/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/es/state_of_css.yml b/es/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/es/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/es/state_of_css_2020.yml b/es/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/es/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/es/state_of_css_2021_results.yml b/es/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/es/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/es/state_of_css_2021_survey.yml b/es/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/es/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/es/state_of_graphql.yml b/es/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/es/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/es/state_of_graphql_2022.yml b/es/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/es/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/es/state_of_js.yml b/es/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/es/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/es/state_of_js_2020.yml b/es/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/es/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/es/state_of_js_2020_survey.yml b/es/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/es/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/es/state_of_js_2021_results.yml b/es/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/es/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/es/state_of_js_2021_survey.yml b/es/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/es/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/es/surveys.yml b/es/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/es/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/es/yaml-validation.yml b/es/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/es/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/fi/accounts.yml b/fi/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/fi/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/fi/common.yml b/fi/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/fi/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/fi/homepage.yml b/fi/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/fi/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/fi/how_to_help.yml b/fi/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/fi/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/fi/legacy.yml b/fi/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/fi/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/fi/results.yml b/fi/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/fi/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/fi/state_of_css.yml b/fi/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/fi/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/fi/state_of_css_2020.yml b/fi/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/fi/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/fi/state_of_css_2021_results.yml b/fi/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/fi/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/fi/state_of_css_2021_survey.yml b/fi/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/fi/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/fi/state_of_graphql.yml b/fi/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/fi/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/fi/state_of_graphql_2022.yml b/fi/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/fi/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/fi/state_of_js.yml b/fi/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/fi/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/fi/state_of_js_2020.yml b/fi/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/fi/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/fi/state_of_js_2020_survey.yml b/fi/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/fi/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/fi/state_of_js_2021_results.yml b/fi/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/fi/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/fi/state_of_js_2021_survey.yml b/fi/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/fi/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/fi/surveys.yml b/fi/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/fi/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/fi/yaml-validation.yml b/fi/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/fi/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/fr/accounts.yml b/fr/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/fr/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/fr/common.yml b/fr/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/fr/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/fr/homepage.yml b/fr/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/fr/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/fr/how_to_help.yml b/fr/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/fr/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/fr/legacy.yml b/fr/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/fr/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/fr/results.yml b/fr/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/fr/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/fr/state_of_css.yml b/fr/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/fr/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/fr/state_of_css_2020.yml b/fr/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/fr/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/fr/state_of_css_2021_results.yml b/fr/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/fr/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/fr/state_of_css_2021_survey.yml b/fr/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/fr/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/fr/state_of_graphql.yml b/fr/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/fr/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/fr/state_of_graphql_2022.yml b/fr/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/fr/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/fr/state_of_js.yml b/fr/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/fr/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/fr/state_of_js_2020.yml b/fr/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/fr/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/fr/state_of_js_2020_survey.yml b/fr/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/fr/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/fr/state_of_js_2021_results.yml b/fr/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/fr/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/fr/state_of_js_2021_survey.yml b/fr/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/fr/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/fr/surveys.yml b/fr/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/fr/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/fr/yaml-validation.yml b/fr/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/fr/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/he/accounts.yml b/he/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/he/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/he/common.yml b/he/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/he/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/he/homepage.yml b/he/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/he/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/he/how_to_help.yml b/he/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/he/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/he/legacy.yml b/he/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/he/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/he/results.yml b/he/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/he/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/he/state_of_css.yml b/he/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/he/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/he/state_of_css_2020.yml b/he/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/he/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/he/state_of_css_2021_results.yml b/he/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/he/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/he/state_of_css_2021_survey.yml b/he/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/he/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/he/state_of_graphql.yml b/he/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/he/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/he/state_of_graphql_2022.yml b/he/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/he/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/he/state_of_js.yml b/he/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/he/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/he/state_of_js_2020.yml b/he/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/he/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/he/state_of_js_2020_survey.yml b/he/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/he/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/he/state_of_js_2021_results.yml b/he/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/he/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/he/state_of_js_2021_survey.yml b/he/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/he/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/he/surveys.yml b/he/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/he/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/he/yaml-validation.yml b/he/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/he/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/hu/accounts.yml b/hu/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/hu/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/hu/common.yml b/hu/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/hu/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/hu/homepage.yml b/hu/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/hu/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/hu/how_to_help.yml b/hu/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/hu/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/hu/legacy.yml b/hu/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/hu/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/hu/results.yml b/hu/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/hu/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/hu/state_of_css.yml b/hu/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/hu/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/hu/state_of_css_2020.yml b/hu/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/hu/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/hu/state_of_css_2021_results.yml b/hu/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/hu/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/hu/state_of_css_2021_survey.yml b/hu/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/hu/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/hu/state_of_graphql.yml b/hu/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/hu/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/hu/state_of_graphql_2022.yml b/hu/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/hu/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/hu/state_of_js.yml b/hu/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/hu/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/hu/state_of_js_2020.yml b/hu/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/hu/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/hu/state_of_js_2020_survey.yml b/hu/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/hu/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/hu/state_of_js_2021_results.yml b/hu/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/hu/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/hu/state_of_js_2021_survey.yml b/hu/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/hu/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/hu/surveys.yml b/hu/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/hu/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/hu/yaml-validation.yml b/hu/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/hu/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/it/accounts.yml b/it/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/it/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/it/common.yml b/it/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/it/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/it/homepage.yml b/it/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/it/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/it/how_to_help.yml b/it/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/it/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/it/legacy.yml b/it/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/it/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/it/results.yml b/it/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/it/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/it/state_of_css.yml b/it/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/it/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/it/state_of_css_2020.yml b/it/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/it/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/it/state_of_css_2021_results.yml b/it/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/it/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/it/state_of_css_2021_survey.yml b/it/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/it/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/it/state_of_graphql.yml b/it/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/it/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/it/state_of_graphql_2022.yml b/it/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/it/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/it/state_of_js.yml b/it/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/it/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/it/state_of_js_2020.yml b/it/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/it/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/it/state_of_js_2020_survey.yml b/it/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/it/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/it/state_of_js_2021_results.yml b/it/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/it/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/it/state_of_js_2021_survey.yml b/it/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/it/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/it/surveys.yml b/it/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/it/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/it/yaml-validation.yml b/it/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/it/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/ja/accounts.yml b/ja/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/ja/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/ja/common.yml b/ja/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/ja/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ja/homepage.yml b/ja/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/ja/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/ja/how_to_help.yml b/ja/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/ja/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/ja/legacy.yml b/ja/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/ja/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ja/results.yml b/ja/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/ja/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/ja/state_of_css.yml b/ja/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/ja/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/ja/state_of_css_2020.yml b/ja/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/ja/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/ja/state_of_css_2021_results.yml b/ja/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/ja/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ja/state_of_css_2021_survey.yml b/ja/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/ja/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/ja/state_of_graphql.yml b/ja/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/ja/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/ja/state_of_graphql_2022.yml b/ja/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/ja/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ja/state_of_js.yml b/ja/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/ja/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/ja/state_of_js_2020.yml b/ja/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/ja/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/ja/state_of_js_2020_survey.yml b/ja/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/ja/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/ja/state_of_js_2021_results.yml b/ja/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/ja/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ja/state_of_js_2021_survey.yml b/ja/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/ja/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/ja/surveys.yml b/ja/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/ja/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/ja/yaml-validation.yml b/ja/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/ja/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/ko/accounts.yml b/ko/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/ko/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/ko/common.yml b/ko/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/ko/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ko/homepage.yml b/ko/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/ko/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/ko/how_to_help.yml b/ko/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/ko/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/ko/legacy.yml b/ko/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/ko/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ko/results.yml b/ko/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/ko/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/ko/state_of_css.yml b/ko/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/ko/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/ko/state_of_css_2020.yml b/ko/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/ko/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/ko/state_of_css_2021_results.yml b/ko/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/ko/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ko/state_of_css_2021_survey.yml b/ko/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/ko/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/ko/state_of_graphql.yml b/ko/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/ko/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/ko/state_of_graphql_2022.yml b/ko/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/ko/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ko/state_of_js.yml b/ko/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/ko/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/ko/state_of_js_2020.yml b/ko/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/ko/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/ko/state_of_js_2020_survey.yml b/ko/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/ko/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/ko/state_of_js_2021_results.yml b/ko/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/ko/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ko/state_of_js_2021_survey.yml b/ko/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/ko/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/ko/surveys.yml b/ko/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/ko/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/ko/yaml-validation.yml b/ko/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/ko/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/nl/accounts.yml b/nl/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/nl/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/nl/common.yml b/nl/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/nl/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/nl/homepage.yml b/nl/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/nl/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/nl/how_to_help.yml b/nl/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/nl/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/nl/legacy.yml b/nl/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/nl/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/nl/results.yml b/nl/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/nl/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/nl/state_of_css.yml b/nl/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/nl/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/nl/state_of_css_2020.yml b/nl/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/nl/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/nl/state_of_css_2021_results.yml b/nl/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/nl/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/nl/state_of_css_2021_survey.yml b/nl/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/nl/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/nl/state_of_graphql.yml b/nl/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/nl/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/nl/state_of_graphql_2022.yml b/nl/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/nl/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/nl/state_of_js.yml b/nl/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/nl/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/nl/state_of_js_2020.yml b/nl/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/nl/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/nl/state_of_js_2020_survey.yml b/nl/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/nl/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/nl/state_of_js_2021_results.yml b/nl/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/nl/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/nl/state_of_js_2021_survey.yml b/nl/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/nl/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/nl/surveys.yml b/nl/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/nl/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/nl/yaml-validation.yml b/nl/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/nl/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/no/accounts.yml b/no/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/no/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/no/common.yml b/no/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/no/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/no/homepage.yml b/no/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/no/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/no/how_to_help.yml b/no/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/no/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/no/legacy.yml b/no/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/no/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/no/results.yml b/no/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/no/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/no/state_of_css.yml b/no/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/no/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/no/state_of_css_2020.yml b/no/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/no/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/no/state_of_css_2021_results.yml b/no/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/no/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/no/state_of_css_2021_survey.yml b/no/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/no/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/no/state_of_graphql.yml b/no/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/no/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/no/state_of_graphql_2022.yml b/no/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/no/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/no/state_of_js.yml b/no/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/no/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/no/state_of_js_2020.yml b/no/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/no/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/no/state_of_js_2020_survey.yml b/no/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/no/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/no/state_of_js_2021_results.yml b/no/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/no/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/no/state_of_js_2021_survey.yml b/no/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/no/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/no/surveys.yml b/no/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/no/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/no/yaml-validation.yml b/no/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/no/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/pl/accounts.yml b/pl/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/pl/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/pl/common.yml b/pl/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/pl/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/pl/homepage.yml b/pl/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/pl/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/pl/how_to_help.yml b/pl/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/pl/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/pl/legacy.yml b/pl/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/pl/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/pl/results.yml b/pl/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/pl/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/pl/state_of_css.yml b/pl/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/pl/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/pl/state_of_css_2020.yml b/pl/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/pl/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/pl/state_of_css_2021_results.yml b/pl/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/pl/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/pl/state_of_css_2021_survey.yml b/pl/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/pl/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/pl/state_of_graphql.yml b/pl/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/pl/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/pl/state_of_graphql_2022.yml b/pl/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/pl/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/pl/state_of_js.yml b/pl/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/pl/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/pl/state_of_js_2020.yml b/pl/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/pl/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/pl/state_of_js_2020_survey.yml b/pl/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/pl/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/pl/state_of_js_2021_results.yml b/pl/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/pl/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/pl/state_of_js_2021_survey.yml b/pl/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/pl/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/pl/surveys.yml b/pl/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/pl/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/pl/yaml-validation.yml b/pl/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/pl/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/pt/accounts.yml b/pt/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/pt/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/pt/common.yml b/pt/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/pt/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/pt/homepage.yml b/pt/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/pt/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/pt/how_to_help.yml b/pt/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/pt/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/pt/legacy.yml b/pt/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/pt/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/pt/results.yml b/pt/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/pt/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/pt/state_of_css.yml b/pt/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/pt/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/pt/state_of_css_2020.yml b/pt/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/pt/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/pt/state_of_css_2021_results.yml b/pt/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/pt/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/pt/state_of_css_2021_survey.yml b/pt/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/pt/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/pt/state_of_graphql.yml b/pt/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/pt/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/pt/state_of_graphql_2022.yml b/pt/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/pt/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/pt/state_of_js.yml b/pt/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/pt/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/pt/state_of_js_2020.yml b/pt/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/pt/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/pt/state_of_js_2020_survey.yml b/pt/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/pt/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/pt/state_of_js_2021_results.yml b/pt/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/pt/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/pt/state_of_js_2021_survey.yml b/pt/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/pt/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/pt/surveys.yml b/pt/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/pt/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/pt/yaml-validation.yml b/pt/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/pt/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/ro/accounts.yml b/ro/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/ro/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/ro/common.yml b/ro/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/ro/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ro/homepage.yml b/ro/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/ro/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/ro/how_to_help.yml b/ro/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/ro/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/ro/legacy.yml b/ro/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/ro/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ro/results.yml b/ro/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/ro/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/ro/state_of_css.yml b/ro/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/ro/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/ro/state_of_css_2020.yml b/ro/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/ro/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/ro/state_of_css_2021_results.yml b/ro/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/ro/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ro/state_of_css_2021_survey.yml b/ro/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/ro/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/ro/state_of_graphql.yml b/ro/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/ro/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/ro/state_of_graphql_2022.yml b/ro/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/ro/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ro/state_of_js.yml b/ro/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/ro/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/ro/state_of_js_2020.yml b/ro/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/ro/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/ro/state_of_js_2020_survey.yml b/ro/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/ro/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/ro/state_of_js_2021_results.yml b/ro/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/ro/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ro/state_of_js_2021_survey.yml b/ro/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/ro/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/ro/surveys.yml b/ro/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/ro/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/ro/yaml-validation.yml b/ro/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/ro/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/ru/accounts.yml b/ru/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/ru/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/ru/common.yml b/ru/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/ru/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ru/homepage.yml b/ru/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/ru/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/ru/how_to_help.yml b/ru/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/ru/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/ru/legacy.yml b/ru/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/ru/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/ru/results.yml b/ru/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/ru/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/ru/state_of_css.yml b/ru/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/ru/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/ru/state_of_css_2020.yml b/ru/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/ru/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/ru/state_of_css_2021_results.yml b/ru/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/ru/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ru/state_of_css_2021_survey.yml b/ru/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/ru/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/ru/state_of_graphql.yml b/ru/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/ru/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/ru/state_of_graphql_2022.yml b/ru/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/ru/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ru/state_of_js.yml b/ru/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/ru/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/ru/state_of_js_2020.yml b/ru/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/ru/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/ru/state_of_js_2020_survey.yml b/ru/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/ru/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/ru/state_of_js_2021_results.yml b/ru/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/ru/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/ru/state_of_js_2021_survey.yml b/ru/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/ru/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/ru/surveys.yml b/ru/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/ru/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/ru/yaml-validation.yml b/ru/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/ru/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/sr/accounts.yml b/sr/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/sr/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/sr/common.yml b/sr/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/sr/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/sr/homepage.yml b/sr/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/sr/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/sr/how_to_help.yml b/sr/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/sr/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/sr/legacy.yml b/sr/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/sr/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/sr/results.yml b/sr/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/sr/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/sr/state_of_css.yml b/sr/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/sr/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/sr/state_of_css_2020.yml b/sr/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/sr/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/sr/state_of_css_2021_results.yml b/sr/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/sr/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/sr/state_of_css_2021_survey.yml b/sr/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/sr/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/sr/state_of_graphql.yml b/sr/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/sr/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/sr/state_of_graphql_2022.yml b/sr/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/sr/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/sr/state_of_js.yml b/sr/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/sr/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/sr/state_of_js_2020.yml b/sr/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/sr/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/sr/state_of_js_2020_survey.yml b/sr/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/sr/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/sr/state_of_js_2021_results.yml b/sr/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/sr/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/sr/state_of_js_2021_survey.yml b/sr/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/sr/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/sr/surveys.yml b/sr/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/sr/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/sr/yaml-validation.yml b/sr/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/sr/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/sv/accounts.yml b/sv/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/sv/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/sv/common.yml b/sv/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/sv/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/sv/homepage.yml b/sv/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/sv/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/sv/how_to_help.yml b/sv/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/sv/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/sv/legacy.yml b/sv/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/sv/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/sv/results.yml b/sv/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/sv/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/sv/state_of_css.yml b/sv/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/sv/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/sv/state_of_css_2020.yml b/sv/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/sv/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/sv/state_of_css_2021_results.yml b/sv/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/sv/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/sv/state_of_css_2021_survey.yml b/sv/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/sv/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/sv/state_of_graphql.yml b/sv/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/sv/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/sv/state_of_graphql_2022.yml b/sv/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/sv/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/sv/state_of_js.yml b/sv/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/sv/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/sv/state_of_js_2020.yml b/sv/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/sv/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/sv/state_of_js_2020_survey.yml b/sv/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/sv/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/sv/state_of_js_2021_results.yml b/sv/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/sv/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/sv/state_of_js_2021_survey.yml b/sv/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/sv/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/sv/surveys.yml b/sv/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/sv/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/sv/yaml-validation.yml b/sv/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/sv/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/tr/accounts.yml b/tr/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/tr/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/tr/common.yml b/tr/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/tr/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/tr/homepage.yml b/tr/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/tr/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/tr/how_to_help.yml b/tr/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/tr/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/tr/legacy.yml b/tr/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/tr/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/tr/results.yml b/tr/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/tr/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/tr/state_of_css.yml b/tr/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/tr/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/tr/state_of_css_2020.yml b/tr/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/tr/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/tr/state_of_css_2021_results.yml b/tr/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/tr/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/tr/state_of_css_2021_survey.yml b/tr/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/tr/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/tr/state_of_graphql.yml b/tr/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/tr/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/tr/state_of_graphql_2022.yml b/tr/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/tr/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/tr/state_of_js.yml b/tr/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/tr/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/tr/state_of_js_2020.yml b/tr/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/tr/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/tr/state_of_js_2020_survey.yml b/tr/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/tr/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/tr/state_of_js_2021_results.yml b/tr/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/tr/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/tr/state_of_js_2021_survey.yml b/tr/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/tr/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/tr/surveys.yml b/tr/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/tr/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/tr/yaml-validation.yml b/tr/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/tr/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/uk/accounts.yml b/uk/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/uk/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/uk/common.yml b/uk/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/uk/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/uk/homepage.yml b/uk/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/uk/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/uk/how_to_help.yml b/uk/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/uk/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/uk/legacy.yml b/uk/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/uk/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/uk/results.yml b/uk/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/uk/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/uk/state_of_css.yml b/uk/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/uk/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/uk/state_of_css_2020.yml b/uk/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/uk/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/uk/state_of_css_2021_results.yml b/uk/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/uk/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/uk/state_of_css_2021_survey.yml b/uk/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/uk/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/uk/state_of_graphql.yml b/uk/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/uk/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/uk/state_of_graphql_2022.yml b/uk/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/uk/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/uk/state_of_js.yml b/uk/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/uk/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/uk/state_of_js_2020.yml b/uk/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/uk/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/uk/state_of_js_2020_survey.yml b/uk/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/uk/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/uk/state_of_js_2021_results.yml b/uk/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/uk/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/uk/state_of_js_2021_survey.yml b/uk/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/uk/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/uk/surveys.yml b/uk/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/uk/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/uk/yaml-validation.yml b/uk/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/uk/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/vi/accounts.yml b/vi/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/vi/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/vi/common.yml b/vi/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/vi/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/vi/homepage.yml b/vi/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/vi/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/vi/how_to_help.yml b/vi/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/vi/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/vi/legacy.yml b/vi/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/vi/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/vi/results.yml b/vi/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/vi/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/vi/state_of_css.yml b/vi/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/vi/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/vi/state_of_css_2020.yml b/vi/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/vi/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/vi/state_of_css_2021_results.yml b/vi/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/vi/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/vi/state_of_css_2021_survey.yml b/vi/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/vi/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/vi/state_of_graphql.yml b/vi/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/vi/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/vi/state_of_graphql_2022.yml b/vi/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/vi/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/vi/state_of_js.yml b/vi/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/vi/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/vi/state_of_js_2020.yml b/vi/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/vi/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/vi/state_of_js_2020_survey.yml b/vi/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/vi/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/vi/state_of_js_2021_results.yml b/vi/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/vi/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/vi/state_of_js_2021_survey.yml b/vi/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/vi/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/vi/surveys.yml b/vi/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/vi/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/vi/yaml-validation.yml b/vi/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/vi/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable diff --git a/zh/accounts.yml b/zh/accounts.yml new file mode 100644 index 00000000000..ab7607801e3 --- /dev/null +++ b/zh/accounts.yml @@ -0,0 +1,124 @@ +--- +locale: en-US +translations: + - + key: accounts.error_incorrect_password + t: Incorrect password + - + key: accounts.error_email_required + t: Email required + - + key: accounts.error_email_already_exists + t: Email already exists + - + key: accounts.error_invalid_email + t: Invalid email + - + key: accounts.error_minchar + t: Your password is too short + - + key: accounts.error_unknown + t: Unknown error + - + key: accounts.error_user_not_found + t: User not found + - + key: accounts.error_username_already_exists + t: Username already exists + - + key: accounts.enter_username_or_email + t: Enter username or email + - + key: accounts.error_internal_server_error + t: Internal server error + - + key: accounts.error_token_expired + t: Invalid password reset token + - + key: accounts.username_or_email + t: Username or email + - + key: accounts.enter_username + t: Enter username + - + key: accounts.username + t: Username + - + key: accounts.enter_email + t: Enter email + - + key: accounts.email + t: Email + - + key: accounts.enter_password + t: Enter password + - + key: accounts.password + t: Password + - + key: accounts.choose_password + t: Choose password + - + key: accounts.change_password + t: Change password + - + key: accounts.reset_your_password + t: Reset your password + - + key: accounts.set_password + t: Set password + - + key: accounts.enter_new_password + t: Enter new password + - + key: accounts.new_password + t: New password + - + key: accounts.forgot_password + t: Forgot password + - + key: accounts.sign_up + t: Sign up + - + key: accounts.sign_in + t: Log in + - + key: accounts.switch_to_sign_up + t: Don't have an account ? Sign up + - + key: accounts.switch_to_sign_in + t: Already have an account? Log in + - + key: accounts.sign_out + t: Sign out + - + key: accounts.cancel + t: Cancel + - + key: accounts.info_email_sent + t: Email sent. + - + key: accounts.info_password_changed + t: Password changed. + - + key: accounts.please_pick_password + t: Please pick a new password to continue. + - + key: accounts.please_log_in + t: Please log in or sign up to begin. + - + key: accounts.logged_in_as + t: Logged in as {email} + - + key: accounts.logged_in_as_guest + t: Logged in as Guest + - + key: accounts.questions + t: > + If you have any questions about how we use your data, or would like us to remove your data from our records, please get in touch. + - + key: accounts.token_verified + t: Token verification successful, redirecting… + - + key: accounts.your_surveys + t: Your Surveys diff --git a/zh/common.yml b/zh/common.yml new file mode 100644 index 00000000000..d62c146f1b6 --- /dev/null +++ b/zh/common.yml @@ -0,0 +1,1397 @@ +--- +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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? + - + #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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/zh/homepage.yml b/zh/homepage.yml new file mode 100644 index 00000000000..9ce73f294d6 --- /dev/null +++ b/zh/homepage.yml @@ -0,0 +1,93 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Homepage + ########################################################################### + key: homepage.hand_coded + t: Hand-coded in Japan. + - + key: homepage.leave_issue + t: Leave an issue + - + key: homepage.get_in_touch + t: Get in touch + - + key: homepage.made_by + t: 'The State of CSS is Made by:' + - + key: homepage.previous_years + t: 'Previous Years:' + - + key: homepage.intro + t: > + ## CSS is evolving faster than ever. + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + So after the success of our annual [State Of JavaScript](https://stateofjs.com) survey, we’ve decided to take on the world of styles and selectors to help identify the latest trends… and try to bridge the ever-growing “great front-end divide”! + - + key: homepage.take_survey + t: Take Survey + - + key: homepage.view_results + t: View Results + - + key: share.help_spread + t: Help Spread the Word! + - + key: homepage.other_surveys + t: 'Other Surveys:' + - + 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: Don't Miss the Next Survey + - + key: newsletter.leave_your_email + t: Leave us your email and we’ll let you know when the next survey takes place. + - + 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 → + - + #footer + key: homepage.made_by_devographics + aliasFor: general.made_by_devographics + - + key: homepage.netlify_link + aliasFor: general.netlify_link + - + key: homepage.leave_issue + aliasFor: general.leave_issue + - + key: homepage.join_discord + aliasFor: general.join_discord diff --git a/zh/how_to_help.yml b/zh/how_to_help.yml new file mode 100644 index 00000000000..54321e8f3bf --- /dev/null +++ b/zh/how_to_help.yml @@ -0,0 +1,40 @@ +--- +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. + #### 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! diff --git a/zh/legacy.yml b/zh/legacy.yml new file mode 100644 index 00000000000..93783f54c4f --- /dev/null +++ b/zh/legacy.yml @@ -0,0 +1,1389 @@ +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 + 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.prev_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} #{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: partners.our_partners + t: Our Partners + - + key: partners.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.email_temporary.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: Your 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.email_temporary + t: Do you want to be notified when the survey results are released? + - + key: user_info.email_temporary.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/zh/results.yml b/zh/results.yml new file mode 100644 index 00000000000..83e16febc7e --- /dev/null +++ b/zh/results.yml @@ -0,0 +1,1214 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: results.start + t: Start + - + key: page.previous + t: "Previous:" + - + key: page.next + t: "Next:" + - + key: general.state_of_css_link + t: State of CSS + - + key: general.netlify_link + t: Hosted by Netlify. + - + key: general.completion_percentage + t: "Completion percentage:" + - + key: partners.thanks + t: Thanks to our partners for supporting us! + - + key: partners.learn_more + t: Learn more. + - + key: tabs.all_respondents + t: All Respondents + - + key: tabs.main_answers + t: Main Answers + - + key: tabs.other_answers + t: Other Answers + - + key: tabs.bracket_wins + t: Wins + - + key: tabs.bracket_matchups + t: Matchups + - + key: tabs.chart + t: Chart + - + key: tabs.data + t: Data + - + key: tabs.share + t: Share + - + key: tabs.debug + t: Debug + - + key: tabs.by_country + t: By Country + - + key: tabs.by_experience + t: By Experience + - + key: tabs.by_degree + t: By Degree + - + key: tabs.by_salary + t: By Salary + - + key: tabs.by_gender + t: By Gender + - + ########################################################################### + #Block + ########################################################################### + key: block.data_from + t: foo + - + ########################################################################### + #Options + ########################################################################### + key: options.experience_ranking.satisfaction + t: Satisfaction + - + key: options.experience_ranking.interest + t: Interest + - + key: options.experience_ranking.usage + t: Usage + - + key: options.experience_ranking.awareness + t: Awareness + - + key: options.features_mode.grouped + t: Grouped + - + key: options.features_mode.awareness_rank + t: By Awareness + - + key: options.features_mode.usage_rank + t: By Usage + - + key: options.features_mode.usage_ratio_rank + t: By Usage Ratio + - + key: options.features_simplified.know_it + t: Know about it + - + key: options.features_simplified.used_it + t: Have used it + - + key: options.features_simplified.usage_ratio + t: Usage ratio + - + key: options.quadrant.assess + t: ASSESS + - + key: options.quadrant.assess.long + t: | + ASSESS: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.adopt + t: ADOPT + - + key: options.quadrant.adopt.long + t: | + ADOPT: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.avoid + t: AVOID + - + key: options.quadrant.avoid.long + t: | + AVOID: Low usage, low satisfaction. Technologies probably best avoided currently. + - + key: options.quadrant.analyze + t: ANALYZE + - + key: options.quadrant.analyze.long + t: | + ANALYZE: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: options.quadrant.1 + t: 1 + - + key: options.quadrant.1.long + t: | + 1: Low usage, high satisfaction. Technologies worth keeping an eye on. + - + key: options.quadrant.2 + t: 2 + - + key: options.quadrant.2.long + t: | + 2: High usage, high satisfaction. Safe technologies to adopt. + - + key: options.quadrant.3 + t: 3 + - + key: options.quadrant.3.long + t: | + 3: Low usage, low satisfaction. Technologies that are harder to recommend. + - + key: options.quadrant.4 + t: 4 + - + key: options.quadrant.4.long + t: | + 4: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + key: ranges.selector.years_of_experience + t: Experience + - + key: ranges.selector.yearly_salary + t: Salary + - + key: ranges.selector.company_size + t: Company Size + - + #other learning methods + key: options.first_steps.blogs + t: Blogs + - + key: options.first_steps.forums + t: Forums + - + key: options.first_steps.view_source + t: View Source + - + #other disablities + key: options.disability_status_others.adhd + t: ADHD + - + key: options.disability_status_others.autism + t: Autism + - + key: options.disability_status_others.glasses + t: Glasses + - + key: options.disability_status_others.old + t: Old Age + - + key: options.disability_status_others.back_pain + t: Back Pain + - + key: options.disability_status_others.epilepsy + t: Epilepsy + - + key: options.disability_status_others.aspergers + t: Aspergers + - + key: options.disability_status_others.color_blindness + t: Color Blindness + - + key: options.disability_status_others.anxiety + t: Anxiety + - + key: options.disability_status_others.dyslexia + t: Dyslexia + - + key: options.disability_status_others.diabetes + t: Diabetes + - + key: options.disability_status_others.carpal_tunnel + t: Carpal Tunnel + - + ########################################################################### + #Sections + ########################################################################### + key: sections.introduction.title + t: Introduction + - + key: sections.demographics.title + t: Demographics + - + key: sections.tshirt.title + t: T-shirt + - + key: sections.technologies.title + t: Technologies + - + key: sections.libraries.title + t: Libraries + - + key: sections.conclusion.title + t: Conclusion + - + key: sections.about.title + t: About + - + key: sections.how_to_help.title + t: How to Help + - + key: sections.support.title + t: Support Us + - + key: sections.support.description + t: > + We run this survey as a side project, but in order to make the project sustainable we’re always looking for partners who can help support us, either financially or by helping us spread the word. If you think you could help in any way, please don’t hesitate to [get in touch](mailto:hello@stateofjs.com)! + - + key: sections.awards.title + t: Awards + - + key: sections.awards.description + t: Things that stood out this year. + - + ########################################################################### + #User Info + ########################################################################### + key: user_info.locale + t: Language + - + key: user_info.locale.description + t: What language did respondents select to fill out the survey? + - + key: user_info.locale.note + t: > + This data is collected automatically based on respondent's settings while taking the survey; Languages with fewer than 20 respondents not shown. + - + key: user_info.source + t: Source + - + key: user_info.source.description + t: How did respondents find out about the survey? + - + key: user_info.source.note + t: This data is a mix of self-reported answers, referrer data, and URL tracking data. + - + key: user_info.gender_by_country + t: Gender By Country + - + key: user_info.gender_by_country.description + t: Gender distribution by country with at least 100 respondents, sorted by "mean gender" (each gender key being assigned an integer value in ascending order) descending. + - + key: user_info.years_of_experience_by_salary + t: Years of Experience by Salary Range + - + key: user_info.years_of_experience_by_salary.description + t: Years of experience by salary range. + - + key: user_info.yearly_salary_by_country + t: Salary By Country + - + key: user_info.yearly_salary_by_country.description + t: Yearly salary distribution by country with at least 100 respondents, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_degree + t: Salary By Higher Education Degree + - + key: user_info.yearly_salary_by_degree.description + t: Yearly salary distribution by higher education degree, sorted by mean salary descending. + - + key: user_info.yearly_salary_by_experience + t: Salary By Experience + - + key: user_info.yearly_salary_by_experience.description + t: Yearly salary distribution by experience, sorted by mean salary descending. + - + key: user_info.race_ethnicity_by_years_of_experience + t: Race & Ethnicity by Years of Experience + - + key: user_info.race_ethnicity_by_years_of_experience.description + t: Race & ethnicity distribution by years of experience, sorted by mean experience ascending. + - + key: user_info.higher_education_degree_by_gender + t: Higher Education Degree by Gender + - + key: user_info.higher_education_degree_by_gender.description + t: Higher education degree distribution by gender. + - + ########################################################################### + #Locales + ########################################################################### + key: options.locale.en-US + t: English + - + key: options.locale.ca-ES + t: Catalan + - + key: options.locale.es-ES + t: Spanish + - + key: options.locale.ru-RU + t: Russian + - + key: options.locale.fr-FR + t: French + - + key: options.locale.zh-Hant + t: Chinese (Traditional) + - + key: options.locale.de-DE + t: German + - + key: options.locale.cs-CZ + t: Czech + - + key: options.locale.pt-PT + t: Portuguese + - + key: options.locale.pt-BR + t: Portuguese (Brazil) + - + key: options.locale.it-IT + t: Italian + - + key: options.locale.sv-SE + t: Swedish + - + key: options.locale.tr-TR + t: Turkish + - + key: options.locale.id-ID + t: Indonesian + - + key: options.locale.hi-IN + t: Hindi + - + key: options.locale.zh-Hans + t: Chinese (Simplified) + - + key: options.locale.ja-JP + t: Japanese + - + key: options.locale.ua-UA + t: Ukrainian + - + key: options.locale.pl-PL + t: Polish + - + key: options.locale.fa-IR + t: Farsi + - + key: options.locale.nl-NL + t: Dutch + - + key: options.locale.ko-KR + t: Korean + - + key: options.locale.ro-RO + t: Romanian + - + ########################################################################### + #Features + ########################################################################### + key: features.learn_more + t: Learn More (MDN) + - + key: features.mdn_link + t: MDN + - + key: features.caniuse_link + t: Can I use + - + key: features.specification_link + t: W3C Specification + - + #knowledge score + key: features.knowledge_score + t: Knowledge Score + - + key: features.knowledge_score.description + t: Out of all the features mentioned in the survey, how many did the respondent know about? + - + ########################################################################### + #Tools & Methodologies + ########################################################################### + #general + key: tools.links + t: Links + - + key: tools.github_link + t: GitHub + - + key: tools.github_stars + t: stars + - + key: tools.homepage_link + t: Homepage + - + key: tools.npm_link + t: NPM + - + key: tools.technology + t: Technology + - + ########################################################################### + #Blocks + ########################################################################### + #heatmaps + key: blocks.tools_company_size_heatmap + t: Usage by Company Size + - + key: blocks.tools_company_size_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different company size ranges. + - + key: blocks.tools_yearly_salary_heatmap + t: Usage by Salary Range + - + key: blocks.tools_yearly_salary_heatmap.description + t: | + For each technology, how usage is spread among respondents + who picked different salary ranges. + - + key: blocks.tools_years_of_experience_heatmap + t: Usage by Years Of Experience + - + key: blocks.tools_years_of_experience_heatmap.description + t: | + For each technology, how usage is spread among respondents who picked different experience ranges. + Note that the experience in question here is general experience, not experience with a specific technology. + - + #tool + key: blocks.entity.homepage_link + t: Homepage + - + key: blocks.entity.github_link + t: GitHub + - + #cardinality + key: blocks.all_sections_tools_cardinality_by_user + t: Technology Usage Cardinality + - + key: blocks.all_sections_tools_cardinality_by_user.description + t: > + For each section, which percentage of respondents **use** (defined as having answered “would use again”) one, two, three, etc. technologies. The bottom-most bar represents the sum of all other bars. + - + key: blocks.cardinality.max + t: Most common answer + - + #tools arrows + key: blocks.tools_arrows + t: Changes Over Time + - + key: blocks.tools_arrows.description + t: | + Each line goes from 2016 to 2020. A higher point means a technology has been used by more people, + and a point further to the right means more users want to learn it; or have used it and would use it again. + - + key: blocks.tools_arrows.note + t: | + - Some lines skip years. + - Technologies with only one year of data are not shown. + - Velocity formula = (most recent opinion - oldest opinion) + (most recent usage) - (oldest usage) + - A positive velocity means the usage and/or positive opinions have increased over time. + - + #tools quadrant + key: blocks.tools_quadrant + t: Satisfaction vs Usage + - + key: blocks.tools_quadrant.description + t: | + This chart shows each technology's **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **ASSESS**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **ADOPT**: High usage, high satisfaction. Safe technologies to adopt. + + - **AVOID**: Low usage, low satisfaction. Technologies probably best avoided currently. + + - **ANALYZE**: High usage, low satisfaction. Reassess these technologies if you're currently using them. + - + #category other tools + key: blocks.category_other_tools + t: Other Tools + - + key: blocks.category_other_tools.description + t: Other tools in this category (freeform answers). + - + #tool experience + key: blocks.tool_experience + t: "{name} Experience" + - + key: blocks.tool_experience.description + t: Respondent's experience with {name}. + - + #tool positive/negative split ("marimekko" chart) + key: blocks.tools_experience_marimekko + t: Positive/Negative Split + - + key: blocks.tools_experience_marimekko.description + t: | + This chart splits positive (“want to learn”, “would use again”) vs + negative (“not interested”, “would not use again”) experiences on + both sides of a central axis. + + Bar thickness represents the number of respondents aware of a technology. + - + #tool tier list + key: blocks.tools_tier_list + t: Library Tier List + - + key: blocks.tools_tier_list.description + t: | + This chart ranks libraries based on their satisfaction 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 + t: > + {lowerBound}% - {upperBound}% + - + #tools section streams + key: blocks.tools_section_streams + t: Experience Over Time + - + key: blocks.tools_section_streams.description + t: | + Overview of opinions on the technologies surveyed over time. + - + key: blocks.tools_section_streams.note + t: | + Technologies with only one year of data are not included. + - + #tools section overview + key: blocks.tools_section_overview + t: Category Overview + - + key: blocks.tools_section_overview.description + t: | + Overview of opinions on the technologies surveyed. Darker segments represent positive opinions, + while lighter segments correspond to negative sentiment. + - + #tools experience ranking + key: blocks.tools_experience_ranking + t: Rankings + - + key: blocks.tools_experience_ranking.description + t: Satisfaction, 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**) + - Interest: **want to learn** / (**want to learn** + **not interested**) + - Usage: (**would use again** + **would not use again**) / **total** + - Awareness: (**total** - **never heard**) / **total** + - + #happiness + key: blocks.happiness + t: Overall Happiness + - + key: blocks.happiness.description + t: | + On a scale of one (very unhappy) to five (very happy), how happy are developers + with the current overall state of this category? + - + #newsletter + key: blocks.newsletter.title + t: Stay Tuned + - + key: blocks.newsletter.description + t: | + If you'd like to know when we release additional results or announce next year's edition, + just leave us your email below: + - + key: blocks.newsletter.email + t: Your Email + - + key: blocks.newsletter.submit + t: Notify Me + - + #features_overview + key: blocks.features_overview + t: Usage 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, while + the inner one represents those who have actually used it. + + Hover on each node to view detailed data along with an overlay + representing the total number of survey respondents. + - + #export + key: export.export + t: Export + - + key: export.title + t: Export data for {title} + - + key: export.nocsv + t: Sorry, CSV export is not available for this dataset. + - + key: export.graphql + t: > + You can copy paste this query into our public GraphQL API. + - + key: export.export_json + t: Get JSON Data + - + key: export.export_graphql + t: Get GraphQL Query + - + key: custom_data.heading + t: Custom Chart + - + key: custom_data.custom_data + t: Custom Data + - + key: custom_data.graphql_query + t: GraphQL Query + - + key: custom_data.chart_title + 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 + t: Customize Data + - + key: custom_data.details + t: > + + 1. Copy the contents of the "GraphQL Query" textfield and paste them into the middle panel of the [GraphQL API explorer](https://graphiql.stateofjs.com/). + 2. Modify the query by adding one or more **filters** using the left-hand explorer sidebar. Make sure to keep the overall structure of the data the same. + 3. In the explorer window, click the Play ("Execute Query") button. + 4. Copy the results of the modified query (`{ data: … }` ) into the "Custom Data" textfield above and submit. + - + #Tools usage variations + key: blocks.tools_usage_variations + t: Usage Variations + - + key: blocks.tools_usage_variations.description + t: | + How different factors such as salary range, years of experience + or company size influence usage (participants who answered either + “would use again” or “would not use again”). + + The baseline represents the base usage for each tool and the offsets + correspond to the delta from this baseline in each range. Let's say + tool X has an overall usage of 10% across all respondents (the baseline), + then if the percentage of users having from 1 to 2 years of experience + using this tool is 13% (compared to all users having from 1 to 2 years + of experience), then we have a positive delta of +3%. + - + key: blocks.tools_usage_variations.note + t: | + Please keep in mind that tools having a lower overall usage tends to vary more. + - + #Recommended Resources + key: blocks.recommended_resources + t: Recommended Resources + - + #Brackets + key: tool_evaluation.tool_evaluation_wins + t: Library Evaluation Rankings + - + key: tool_evaluation.tool_evaluation_wins.description + t: Which factors do you prioritize when evaluating a new library? Results are ranked by number of tournament rounds won. + - + key: tool_evaluation.tool_evaluation_matchups + t: Library Evaluation Rankings (Matchups) + - + 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. + - + ########################################################################### + #Charts + ########################################################################### + key: chart_units.respondents + 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" + - + key: chart_units.percentage_survey + t: "% of survey respondents" + - + key: charts.average + t: Average + - + key: charts.mean + t: Mean + - + key: charts.overall + t: Overall + - + key: charts.all_respondents + t: All Respondents + - + key: charts.facet_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 + - + key: charts.axis_legends.backend_proficiency + t: Back-end Proficiency + - + key: charts.axis_legends.css_proficiency + t: CSS Proficiency + - + key: charts.axis_legends.javascript_proficiency + t: JavaScript Proficiency + - + key: charts.axis_legends.users_percentage + t: Percentage of Users + - + key: charts.axis_legends.users_count + t: User Count + - + key: charts.axis_legends.interest_percentage + t: Interest % + - + key: charts.axis_legends.satisfaction_percentage + t: Satisfaction % + - + key: charts.axis_legends.usage_percentage + t: Usage % + - + key: charts.axis_legends.awareness_percentage + t: Awareness % + - + key: charts.axis_legends.happiness + t: Happiness + - + key: charts.axis_legends.knowledge_score + t: Known Features + - + key: charts.axis_legends.frequency + t: Frequency + - + key: charts.axis_legends.age + t: Age + - + key: charts.axis_legends.users_percentage_survey + t: "% of survey respondents" + - + key: charts.axis_legends.users_percentage_question + t: "% of question respondents" + - + key: charts.ranges_multiple_diverging_lines.baseline + t: baseline + - + key: charts.ranges_multiple_diverging_lines.positive_offset + t: positive offset + - + key: charts.ranges_multiple_diverging_lines.negative_offset + t: negative offset + - + key: charts.tools_arrows.negative_opinion + t: Negative opinions + - + key: charts.tools_arrows.positive_opinion + t: Positive opinions + - + key: charts.tools_arrows.have_not_used + t: Have not used + - + key: charts.tools_arrows.have_used + t: Have used + - + key: charts.tools_arrows.x_axis + t: X-axis range + - + key: charts.tools_arrows.y_axis + t: Y-axis range + - + key: charts.tools_arrows.legend + t: Legend + - + key: charts.tools_arrows.velocity + t: Velocity + - + key: charts.tools_arrows.velocity_positive + t: Overall more positive opinions and/or usage over time + - + key: charts.tools_arrows.velocity_negative + t: Overall more negative opinions and/or less usage over time + - + key: charts.tools_arrows.opinions_positive + t: Mostly positive opinions + - + key: charts.tools_arrows.opinions_negative + t: Mostly negative opinions + - + key: charts.tools_arrows.low_usage + t: Low usage + - + key: charts.tools_arrows.high_usage + t: High usage + - + key: charts.tools_arrows.popularity_positive + t: Rising popularity + - + key: charts.tools_arrows.popularity_negative + t: Falling popularity + - + key: charts.no_answer + t: No Answer + - + ########################################################################### + #Sharing + ########################################################################### + key: share.share + t: Share + - + key: share.options + t: Share Options + - + key: share.preview + t: Social media preview + - + key: share.site.title + t: Discover the {siteTitle} results + - + key: share.site.twitter_text + t: "Discover the {siteTitle} results {link} {hashtag}" + - + key: share.site.subject + t: "{siteTitle} Survey Results" + - + key: share.site.body + t: "Here are some interesting survey results: {link}" + - + key: share.block.twitter_text + t: "{hashtag} {year}: {title} {link}" + - + key: share.block.subject + t: "{siteTitle} Survey Results" + - + key: share.block.body + t: "Here are some interesting survey results ({title}): {link}" + - + key: share.twitter + t: Share on Twitter + - + key: share.facebook + t: Share on Facebook + - + key: share.linkedin + t: Share on LinkedIn + - + key: share.email + t: Share by email + - + key: share.image + t: Get image + - + key: share.link + t: Link to section + - + key: share.url + t: Get link + - + key: share.close + t: Close + - + ########################################################################### + #Views + ########################################################################### + key: views.viz + t: Graph + - + key: views.table + t: Table + - + ########################################################################### + #Tables + ########################################################################### + key: table.label + t: Label + - + key: table.item + t: Item + - + key: table.percentage_survey + t: "% of survey respondents" + - + key: table.percentage_question + t: "% of question respondents" + - + key: table.percentage_facet + t: "% of facet respondents" + - + key: table.count + t: Count + - + key: table.year + t: Year + - + key: table.mean + t: Mean + - + key: table.usage + aliasFor: options.features_simplified.used_it + - + key: table.awareness + aliasFor: options.features_simplified.know_it + - + key: table.usage_ratio + aliasFor: options.features_simplified.usage_ratio + - + key: table.usage_count + aliasFor: charts.axis_legends.users_count + - + key: table.satisfaction_percentage + aliasFor: charts.axis_legends.satisfaction_percentage + - + key: table.interest_percentage + aliasFor: charts.axis_legends.interest_percentage + - + key: table.usage_percentage + aliasFor: charts.axis_legends.usage_percentage + - + key: table.awareness_percentage + aliasFor: charts.axis_legends.awareness_percentage + - + key: table.percentages_table + t: Percentages + - + key: table.rankings_table + t: Rankings + - + key: table.satisfaction_rank + t: Satisfaction Rank + - + key: table.interest_rank + t: Interest Rank + - + key: table.usage_rank + t: Usage Rank + - + key: table.awareness_rank + t: Awareness Rank + - + key: table.would_not_use_percentage + t: Would not use % + - + key: table.not_interested_percentage + t: Not interested % + - + key: table.would_use_percentage + t: Would use again % + - + key: table.interested_percentage + t: Interested % + - + ########################################################################### + #Awards + ########################################################################### + key: awards.runner_ups + t: Runner Ups + - + key: award.feature_adoption_award.title + t: Most Used Feature + - + key: award.feature_adoption_award.description + t: Awarded to the most adopted feature. + - + key: award.feature_adoption_delta_award.title + t: Most Adopted Feature + - + key: award.feature_adoption_delta_award.description + t: Awarded to the feature with the largest year-over-year ”have used” progression. + - + key: award.tool_usage_award.title + t: Most Used Technology + - + key: award.tool_usage_award.description + t: Awarded to the technology with the largest user base. + - + key: award.tool_usage_delta_award.title + t: Most Adopted Technology + - + key: award.tool_usage_delta_award.description + t: Awarded to the technology with the largest year-over-year “would use again” progression. + - + key: award.tool_satisfaction_award.title + t: Highest Satisfaction + - + key: award.tool_satisfaction_award.description + t: Awarded to the technology with the highest percentage of satisfied users. + - + key: award.tool_interest_award.title + t: Highest Interest + - + key: award.tool_interest_award.description + t: Awarded to the technology developers are most interested in learning once they are aware of it. + - + key: award.resource_usage_award.title + t: Most Used Resource + - + key: award.resource_usage_award.description + t: Awarded to the resource with the largest user base. + - + key: award.prediction_award.title + t: Prediction Award + - + key: award.prediction_award.description + t: Awarded to an up-and-coming technology that might take over… or not? + - + key: award.most_write_ins_award.title + t: Most Write-Ins + - + key: award.most_write_ins_award.description + t: Awarded to the item with the most write-in answers + - + ########################################################################### + #Hints + ########################################################################### + key: hints.hint_hint + t: > + You'll find little hints like this one throughout the survey results that will point out extra features and details. + - + key: hints.units_switcher_hint + t: > + You can use the segmented control at the bottom of each block to switch between different units to get an alternate view of the same data. + - + key: hints.export_hint + t: > + The Data tab lets you view the raw data for any chart, view it as JSON, or get a GraphQL query you can run against our public API. + - + key: hints.completion_hint + t: > + Since all questions are optional, some of them got fewer responses than others. The completion indicator (◕) tells you exactly how many people answered any given question. + - + key: hints.tool_modal_hint + t: > + You can click on any technology name to get extra details and a more in-depth look at its related data. + - + 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. + - + key: hints.sharing_hint + t: > + Sharing this survey on Twitter, Facebook, or by email is scientifically proven to improve your coding performance by up to 15%. + - + key: hints.tshirt_hint + t: > + Another guaranteed scientific finding: buying our t-shirt will increase your programming skills by over 9000! + - + key: hints.variants_hint + t: > + Some charts feature additional tabs that offer complementary breakdowns of the same data, or related data. Make sure to check them out! + - + key: hints.share_hint + t: > + The Share tab makes it easy to share any chart, or even download it as an image. + - + key: hints.bracket_hint + t: > + 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. + - + ########################################################################### + #Sponsor Chart + ########################################################################### + key: sections.sponsor_finish.title + t: Thanks + - + key: sponsor.sponsor_finish + t: > + Thanks for supporting the survey. Your avatar should appear next to the chart you picked within the next hour or so. If it doesn't, please [get in touch](mailto:chartsponsor@stateofjs.com). + - + key: sponsor.sponsored_by + t: > + **{name}** donated **${amount}** to sponsor this chart + - + key: sponsor.sponsor_button + t: Sponsor This Chart + - + key: sponsor.sponsor_chart.title + t: Sponsor Chart "{title}" + - + key: sponsor.sponsor_chart.description + t: > + Support this survey financially by donating $10 or more, and get your Twitter avatar featured next to a chart! + - + key: sponsor.chart_id + t: 'Chart ID: ' + - + key: sponsor.sponsor_this_chart + t: Sponsor This Chart (${baseAmount}+) + - + key: sponsor.how_it_works.title + t: How It Works + - + key: sponsor.how_it_works.description + t: > + 1. When you **click the "Sponsor This Chart" button**, you will be redirected to our partner [SendOwl](https://www.sendowl.com/)'s checkout page. + + 2. You can then **adjust the amount** you'd like to sponsor the survey for, starting at USD10. + + 3. Once you checkout, you will be able to **provide your Twitter username**. + + 4. You will see a **File Download** page, but you can safely ignore it. + + 5. The site will rebuild in the background and your username and donation will **appear next to the chart within the next hour**. + - + key: sponsor.faq.title + t: F.A.Q. + - + key: sponsor.faq.usage.title + t: What will my donation be used for? + - + key: sponsor.faq.usage.description + 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? + - + key: sponsor.faq.public.description + t: Yes. Your **Twitter username** as well as the **amount you donated** will be displayed publicly next to the chart. + - + #- key: sponsor.faq.donation_public.title + #t: Can I donate on somebody else's behalf? + #- key: sponsor.faq.donation_public.description + #t: You can enter a Twitter username other than your own, but that person will have the right to remove the donation if they request it. + key: sponsor.faq.refund.title + t: What's your refund policy? + - + key: sponsor.faq.refund.description + t: All donations are refundable within a 1-week period, minus transaction fees. + - + key: sponsor.faq.influence.title + t: Do donations influence the survey contents? + - + key: sponsor.faq.influence.description + t: Donations take place once the survey is already published, and donors to not have any influence on the contents of the survey. + - + key: sponsor.faq.feedback.title + t: Where can I leave feedback/ask questions? + - + 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). diff --git a/zh/state_of_css.yml b/zh/state_of_css.yml new file mode 100644 index 00000000000..bde402ac738 --- /dev/null +++ b/zh/state_of_css.yml @@ -0,0 +1,1051 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_css.intro + t: > + CSS is evolving faster than ever. + + Flexbox, Grid, Multi-Column… To say nothing of whole new paradigms like CSS-in-JS. + + So after the success of our annual State Of JavaScript survey, we’ve decided to take on the world of styles and selectors. We're hoping you’ll help us identify the latest trends, and figure out what tools to learn and use next! + - + key: general.state_of_css.description + t: The annual developer survey about the latest trends in CSS + - + ########################################################################### + #Sections + ########################################################################### + key: sections.layout.title + t: Layout + - + key: sections.layout.description + t: How do you position elements on the screen? + - + key: sections.shapes_graphics.title + t: Shapes & Graphics + - + key: sections.shapes_graphics.description + t: Controlling the shape and display of elements. + - + key: sections.interactions.title + t: Interactions + - + key: sections.interactions.description + t: Controlling how the user interacts with the page. + - + key: sections.typography.title + t: Typography + - + key: sections.typography.description + t: Setting and laying out text. + - + key: sections.animations_transforms.title + t: Animations & Transforms + - + key: sections.animations_transforms.description + t: Animating and transforming elements. + - + key: sections.accessibility.title + t: Accessibility + - + key: sections.accessibility.description + t: Accessibility features and techniques. + - + key: sections.media_queries.title + t: Media Queries + - + key: sections.media_queries.description + t: Ways of adapting your site to the user's device or preferences. + - + 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: Other Features + - + key: sections.other_features.description + t: Other CSS features. + - + key: sections.units_selectors.title + t: Units & Selectors + - + key: sections.units_selectors.description + t: Test your knowledge of CSS units and selectors. + - + key: sections.pre_post_processors.title + t: Pre-/Post-processors + - + key: sections.pre_post_processors.description + t: Utilities that augment CSS. + - + key: sections.pre_post_processors_others.title + t: Other Pre-/Post-processors + - + key: sections.css_frameworks.title + t: CSS Frameworks + - + key: sections.css_frameworks.description + t: Libraries that give you pre-made components and styles. + - + key: sections.css_frameworks_others.title + t: Other CSS Frameworks + - + key: sections.css_methodologies.title + t: CSS Methodologies + - + key: sections.css_methodologies.description + t: Codified ways to write cleaner CSS. + - + key: sections.css_methodologies_others.title + t: Other CSS Methodologies. + - + key: sections.css_in_js.title + t: CSS-in-JS + - + key: sections.css_in_js.description + t: Libraries that help integrate CSS into JavaScript code. + - + key: sections.css_in_js_others.title + t: Other CSS-in-JS Libraries. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other CSS tools. + - + key: sections.environments.title + t: Environments + - + key: sections.environments.description + t: Which environments and accessibility concerns do you consider when writing CSS? + - + key: sections.usage_css.title + t: CSS Usage + - + key: sections.usage_css.description + t: How you use CSS. + - + ########################################################################### + #Options + ########################################################################### + #CSS for print + key: options.css_for_print.0 + t: I (almost) never write print styles + - + key: options.css_for_print.0.short + t: Never + - + key: options.css_for_print.1 + t: I occasionally write print styles + - + key: options.css_for_print.1.short + t: Occasionally + - + key: options.css_for_print.2 + t: I write print styles as part of most projects + - + key: options.css_for_print.2.short + t: Often + - + key: options.css_for_print.3 + t: I focus mainly on CSS for print + - + key: options.css_for_print.3.short + t: Mainly + - + #CSS for email + key: options.css_for_email.0 + t: I (almost) never write CSS for email clients + - + key: options.css_for_email.0.short + t: Never + - + key: options.css_for_email.1 + t: I occasionally write CSS for email clients + - + key: options.css_for_email.1.short + t: Occasionally + - + key: options.css_for_email.2 + t: I write CSS for email clients as part of most projects + - + key: options.css_for_email.2.short + t: Often + - + key: options.css_for_email.3 + t: I focus mainly on CSS for email clients + - + key: options.css_for_email.3.short + t: Mainly + - + #what do you use CSS for? + key: options.what_do_you_use_css_for.marketing_sites + t: Marketing sites & landing pages + - + key: options.what_do_you_use_css_for.design_systems + t: Design systems + - + key: options.what_do_you_use_css_for.blogs + t: Blogs or other text-heavy sites + - + key: options.what_do_you_use_css_for.web_apps + t: Web apps + - + key: options.what_do_you_use_css_for.mobile_apps + t: Mobile apps + - + key: options.what_do_you_use_css_for.css_art + t: CSS art & illustrations + - + key: options.what_do_you_use_css_for.emails + t: Emails + - + key: options.what_do_you_use_css_for.printed_documents + t: Printed documents + - + #CSS pain points + key: options.css_pain_points.browser_interoperability + t: Browser Compatibility + - + key: options.css_pain_points.browser_interoperability.description + t: Differences between Chrome, Safari, Firefox, etc. + - + key: options.css_pain_points.interactions + t: Interactions + - + key: options.css_pain_points.interactions.description + t: Responding to user input or other events (scroll, hover, etc.). + - + key: options.css_pain_points.architecture + t: Architecture & Maintenance + - + key: options.css_pain_points.architecture.description + t: File organization, dead code elimination, refactoring, etc. + - + key: options.css_pain_points.layout_positioning + t: Layout & Positioning + - + key: options.css_pain_points.layout_positioning.description + t: Setting up layouts and making sure elements go where you want them to. + - + key: options.css_pain_points.scoping_specificity + t: Scoping & Specificity + - + key: options.css_pain_points.scoping_specificity.description + t: Dealing with the cascade, overriding styles, etc. + - + key: options.css_pain_points.responsive_design + t: Responsive Design + - + key: options.css_pain_points.responsive_design.description + t: Adapting layouts and designs for different form factors. + - + key: options.css_pain_points.form_elements_styling + t: Form Elements Styling + - + key: options.css_pain_points.form_elements_styling.description + t: Customizing how form elements look and behave. + - + key: options.css_pain_points.performance_issues + t: Performance Issues + - + key: options.css_pain_points.performance_issues.description + t: Dealing with scrolling jank, making animations smoother, etc. + - + #CSS missing features (same as features section) + key: options.currently_missing_from_css.nesting + t: Nesting + - + key: options.currently_missing_from_css.nesting.description + t: Being able to nest styles in native CSS. + - + key: options.currently_missing_from_css.parent_selector + t: Parent Selector + - + key: options.currently_missing_from_css.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: options.currently_missing_from_css.browser_support + t: Browser Support + - + key: options.currently_missing_from_css.browser_support.description + t: Better browser support for existing features. + - + key: options.currently_missing_from_css.mixins + t: Mixins + - + key: options.currently_missing_from_css.mixins.description + t: Group and reuse definitions dynamically. + - + key: options.currently_missing_from_css.color_functions + t: Color Functions + - + key: options.currently_missing_from_css.color_functions.description + t: Functions for manipulating color values. + - + key: options.currently_missing_from_css.container_queries + t: Container Queries + - + key: options.currently_missing_from_css.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: options.currently_missing_from_css.scoping + t: Scoping + - + key: options.currently_missing_from_css.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: options.currently_missing_from_css.subgrid + t: Subgrid + - + key: options.currently_missing_from_css.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Features + ########################################################################### + #layout + key: features.grid + t: CSS Grid + - + key: features.subgrid + t: Subgrid + - + key: features.regions + t: CSS Regions + - + key: features.flexbox + t: Flexbox + - + key: features.multi_column + t: CSS Multi-Column + - + key: features.writing_modes + t: CSS Writing Modes + - + key: features.exclusions + t: CSS Exclusions + - + key: features.position_sticky + t: 'position: sticky' + - + key: features.logical_properties + t: Logical Properties + - + 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: Gap property for flexbox + - + key: features.break_rules + t: Break rules + - + key: features.break_rules.description + t: break-inside, break-before, break-after + - + key: features.at_container + t: Container Queries + - + key: features.at_container.description + t: @container query + - + #shapes & graphics + key: features.shapes + t: CSS Shapes + - + key: features.object_fit + t: object-fit + - + key: features.clip_path + t: clip-path + - + key: features.masks + t: CSS Masks + - + key: features.blend_modes + t: Blend Modes + - + key: features.blend_modes.description + t: The mix-blend-mode property + - + key: features.filter_effects + t: CSS Filter Effects + - + key: features.backdrop_filter + t: backdrop-filter + - + key: features.intrinsic_sizing + t: 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 Scroll Snap + - + 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 + - + #typography + key: features.web_fonts + t: Web fonts (@font-face) + - + key: features.variable_fonts + t: Variable fonts + - + key: features.line_breaking + t: Line breaking properties + - + 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: Also includes dir HTML attribute. + - + #animations & transforms + key: features.transitions + t: CSS Transitions + - + key: features.transforms + t: CSS Transforms + - + key: features.animations + t: CSS Animations + - + key: features.perspective + t: perspective + - + #media queries/accessibility + key: features.feature_support_queries + t: Feature Support Queries (@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 Attributes + - + key: features.aria_attributes.description + t: role, aria-label, etc. + - + #other features + key: features.variables + t: CSS Variables (Custom Properties) + - + key: features.containment + t: CSS Containment + - + key: features.will_change + t: will-change + - + key: features.calc + t: calc() + - + key: features.houdini + t: Houdini + - + key: features.comparison_functions + t: CSS Comparison Functions + - + key: features.comparison_functions.description + t: min(), max(), and clamp() + - + key: features.at_property + t: Houdini Custom Properties + - + key: features.at_property.description + t: @property + - + key: features.at_layer + t: @layer + - + key: features.content_visibility + t: content-visibility + - + key: features.marker + t: ::marker pseudo-element + - + #missing features (see also options) + key: features.nesting + t: Nesting + - + key: features.nesting.description + t: Being able to nest styles in native CSS. + - + key: features.parent_selector + t: Parent Selector + - + key: features.parent_selector.description + t: The ability to target a parent element based on its children. + - + key: features.browser_support + t: Browser Support + - + key: features.browser_support.description + t: Better browser support for existing features. + - + key: features.mixins + t: Mixins + - + key: features.mixins.description + t: Group and reuse definitions dynamically. + - + key: features.color_functions + t: Color Functions + - + key: features.color_functions.description + t: Functions for manipulating color values. + - + key: features.container_queries + t: Container Queries + - + key: features.container_queries.description + t: Being able to write styles based on the parent container's dimensions. + - + key: features.scoping + t: Scoping + - + key: features.scoping.description + t: The ability to be more specific about where your styles are applied. + - + key: features.subgrid + t: Subgrid + - + key: features.subgrid.description + t: Nesting deeper-level subgrids into a parent grid. + - + ########################################################################### + #Units & Selectors + ########################################################################### + key: features_others.units + t: Units + - + key: features_others.units.description + t: Which of these CSS units have you used? + - + key: options.units.px + t: px + - + key: options.units.pt + t: pt + - + key: options.units.percent + t: '%' + - + key: options.units.em + t: em + - + key: options.units.rem + t: rem + - + key: options.units.vh_vw + t: vh, vw + - + key: options.units.vmin_vmax + t: vmin, vmax + - + key: options.units.ch + t: ch + - + key: options.units.ex + t: ex + - + key: options.units.mm + t: mm + - + key: options.units.cm + t: cm + - + key: options.units.in + t: in + - + key: features_others.pseudo_elements + t: Pseudo Elements + - + key: features_others.pseudo_elements.description + t: Which of these CSS pseudo-elements have you used? + - + key: options.pseudo_elements.before + t: '::before' + - + key: options.pseudo_elements.after + t: '::after' + - + key: options.pseudo_elements.first_line + t: '::first-line' + - + key: options.pseudo_elements.first_letter + t: '::first-letter' + - + key: options.pseudo_elements.selection + t: '::selection' + - + key: options.pseudo_elements.placeholder + t: '::placeholder' + - + key: options.pseudo_elements.marker + t: '::marker' + - + key: options.pseudo_elements.backdrop + t: '::backdrop' + - + key: features_others.combinators + t: Combinators + - + key: features_others.combinators.description + t: Which of these combinations CSS selectors have you used? + - + key: options.combinators.descendant + t: div span (descendant) + - + key: options.combinators.child + t: div > span (child) + - + key: options.combinators.next_sibling + t: div + div (next sibling) + - + key: options.combinators.subsequent_sibling + t: div ~ div (subsequent sibling) + - + key: features_others.tree_document_structure + t: Tree / Document Structure + - + key: features_others.tree_document_structure.description + t: Which of these structure related CSS selectors have you used? + - + key: options.tree_document_structure.root + t: :root + - + key: options.tree_document_structure.empty + t: :empty + - + key: options.tree_document_structure.not + t: ':not()' + - + key: options.tree_document_structure.nth_child + t: ':nth-child()' + - + key: options.tree_document_structure.nth_last_child + t: ':nth-last-child()' + - + key: options.tree_document_structure.first_child + t: ':first-child' + - + key: options.tree_document_structure.last_child + t: ':last-child' + - + key: options.tree_document_structure.only_child + t: ':only-child' + - + key: options.tree_document_structure.nth_of_type + t: ':nth-of-type()' + - + key: options.tree_document_structure.nth_last_of_type + t: ':nth-last-of-type()' + - + key: options.tree_document_structure.first_of_type + t: ':first-of-type' + - + key: options.tree_document_structure.last_of_type + t: ':last-of-type' + - + key: options.tree_document_structure.only_of_type + t: ':only-of-type' + - + key: options.tree_document_structure.lang + t: ':lang()' + - + key: options.tree_document_structure.is + t: ':is()' + - + key: options.tree_document_structure.where + t: ':where()' + - + key: options.tree_document_structure.has + t: ':has()' + - + key: features_others.attributes + t: Attributes + - + key: features_others.attributes.description + t: Which of these CSS attributes selectors have you used? + - + key: options.attributes.presence + t: div[foo] (Presence) + - + key: options.attributes.equality + t: div[foo="bar"] (Equality) + - + key: options.attributes.starts_with + t: div[foo^="bar"] (Starts with) + - + key: options.attributes.ends_with + t: div[foo$="bar"] (Ends with) + - + key: options.attributes.contains_word + t: div[foo~="bar"] (Contains word) + - + key: options.attributes.contains_substring + t: div[foo*="bar"] (Contains substring) + - + key: features_others.links_urls + t: Links/URLs + - + key: features_others.links_urls.description + t: Which of these links & URLs related CSS selectors have you used? + - + key: options.links_urls.any_link + t: ':any-link' + - + key: options.links_urls.link_visited + t: ':link and :visited' + - + key: options.links_urls.local_link + t: ':local-link' + - + key: options.links_urls.target + t: :target + - + key: features_others.interaction + t: Interaction + - + key: features_others.interaction.description + t: Which of these interaction CSS selectors have you used? + - + key: options.interaction.hover + t: :hover + - + key: options.interaction.active + t: :active + - + key: options.interaction.focus + t: :focus + - + key: options.interaction.focus_within + t: ':focus-within' + - + key: options.interaction.focus_visible + t: ':focus-visible' + - + key: features_others.form_controls + t: Form Controls + - + key: features_others.form_controls.description + t: Which of these form related CSS selectors have you used? + - + key: options.form_controls.enabled_disabled + t: ':enabled and :disabled' + - + key: options.form_controls.read_only_write + t: ':read-only and :read-write' + - + key: options.form_controls.placeholder_shown + t: ':placeholder-shown' + - + key: options.form_controls.default + t: :default + - + key: options.form_controls.checked + t: :checked + - + key: options.form_controls.indeterminate + t: :indeterminate + - + key: options.form_controls.valid_invalid + t: ':valid and :invalid' + - + key: options.form_controls.user_invalid + t: ':user-invalid' + - + key: options.form_controls.in_out_range + t: ':in-range and :out-of-range' + - + key: options.form_controls.required_optional + t: ':required and :optional' + - + ########################################################################### + #Environments + ########################################################################### + key: environments.browsers + t: Browsers + - + key: environments.browsers.description + t: Which browsers do you test in? + - + key: environments.form_factors + t: Testing Environments + - + key: environments.form_factors.description + t: Which form factors or environments do you test on? + - + 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: environments.accessibility_features + t: Accessibility Features + - + key: environments.accessibility_features.description + t: Which accessibility features do you usually implement? + - + key: environments.accessibility_features.others + t: Other Accessibility Features + - + key: environments.accessibility_features.others.description + t: Other accessibility features you usually implement + - + key: environments.css_for_print + t: CSS for Print + - + key: environments.css_for_print.description + t: Do you write print styles? + - + key: environments.css_for_email + t: CSS for Email Clients + - + key: environments.css_for_email.description + t: Do you write CSS for email clients? + - + key: environments.what_do_you_use_css_for + t: What do you mainly use CSS for? + - + key: environments.what_do_you_use_css_for.description + t: What kind of project do you usually use CSS for? + - + key: environments.what_do_you_use_css_for.others + t: Other kinds of projects + - + key: charts.axis_legends.css_for_print + t: Frequency + - + key: charts.axis_legends.css_for_email + t: Frequency + - + key: tools_others.tool_evaluation + t: Library Evaluation + - + key: tools_others.tool_evaluation.description + t: For each matchup, pick the factor you prioritize when evaluating a new library. + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.css_easy_to_learn + t: CSS is easy to learn + - + key: opinions.css_easy_to_learn.title + t: Learning Curve + - + key: opinions.css_evolving_slowly + t: CSS is evolving too slowly + - + key: opinions.css_evolving_slowly.title + t: Rate of Change + - + key: opinions.utility_classes_to_be_avoided + t: Utility (non-semantic) classes (.center, .large-text, etc.) should be avoided + - + key: opinions.utility_classes_to_be_avoided.title + t: Non-Semantic Classes + - + key: opinions.selector_nesting_to_be_avoided + t: Selector nesting (.foo .bar ul li {...}) should be avoided + - + key: opinions.selector_nesting_to_be_avoided.title + t: Selector Nesting + - + key: opinions.css_is_programming_language + t: CSS is a programming language + - + key: opinions.css_is_programming_language.title + t: Programming Language + - + key: opinions.enjoy_writing_css + t: I enjoy writing CSS + - + key: opinions.enjoy_writing_css.title + t: Enjoyment + - + #Browser interoperability question + key: opinions_others.browser_interoperability_features.others + t: Browser Incompatibilities + - + key: opinions_others.browser_interoperability_features.others.description + t: > + Are there any CSS features you have difficulties using because of differences between browsers? + - + #Pain Points + key: opinions.css_pain_points + t: CSS Pain Points + - + key: opinions.css_pain_points.description + t: For each matchup, pick the aspect of CSS you struggle with the most. + - + key: opinions_others.css_pain_points.others + t: Other CSS Pain Points + - + #Missing Features + key: opinions.currently_missing_from_css + t: What do you feel is currently missing from CSS? + - + key: opinions.currently_missing_from_css.description + t: For each matchup, pick the feature you'd most like to be able to use in CSS today. + - + key: opinions_others.currently_missing_from_css.others + t: Other Missing Features + - + #- key: opinions_others.currently_missing_from_css.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 in one word + - + key: opinions.sum_up_one_word_css.description + t: How would you sum up your opinion of CSS in one word? + - + key: happiness.pre_post_processors + t: How happy are you with the state of pre/post-processors? + - + key: happiness.css_in_js + t: How happy are you with the state of CSS-in-JS libraries? + - + key: happiness.css_frameworks + t: How happy are you with the state of CSS frameworks? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_css + t: How happy are you with the general state of CSS? + - + #pain points/currently missing (results) + key: css_pain_points.css_pain_points_wins + t: CSS Pain Points + - + key: css_pain_points.css_pain_points_wins.description + t: Which aspect of CSS do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: css_pain_points.css_pain_points_matchups + t: CSS Pain Points (Matchups) + - + key: css_pain_points.css_pain_points_matchups.description + t: Which aspect of CSS do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_css.currently_missing_from_css_wins + t: Features Missing From CSS + - + key: currently_missing_from_css.currently_missing_from_css_wins.description + t: Which feature would you most like to be able to use in CSS today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_css.currently_missing_from_css_matchups + t: Features Missing From CSS (Matchups) + - + key: currently_missing_from_css.currently_missing_from_css_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. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_css + t: First Steps With CSS + - + key: resources.first_steps_css.description + t: When first starting out, how did you initially learn CSS? diff --git a/zh/state_of_css_2020.yml b/zh/state_of_css_2020.yml new file mode 100644 index 00000000000..6ac5b303b48 --- /dev/null +++ b/zh/state_of_css_2020.yml @@ -0,0 +1,277 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Forget everything you know about CSS. Or at least, be ready to reconsider a lot of it. If like me you've been writing CSS for over a decade, CSS in 2020 looks nothing like what you were used to. + + Instead of breakpoints, we can now leverage CSS Grid to make dynamic, responsive layouts that adapt to any viewport size with fewer lines of code. Instead of relying on global stylesheets, CSS-in-JS lets us colocate our styles with our components to build themeable design systems. + + And most of all, Tailwind CSS has burst onto the scene and, through its use of utility-first CSS, forced us to reconsider the traditional dogma of semantic class names. + + Whether all this change makes you want to write a hyped-up blog post or an angry Twitter rant, we are here to present the data, highlight the trends, and hopefully guide you through another eventful year of CSS! + + ### Team + + The State of CSS Survey is created and maintained by: + + - [Sacha Greif](https://twitter.com/sachagreif): Design, writing, coding + - [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + ### Other Links + + - [State of CSS Homepage](https://stateofcss.com) + - [State of JS](https://stateofjs.com) + + ### Thanks + + Thanks to all the people who helped us design the survey, including [Chen Hui-Jing](http://chenhuijing.com/), [Philip Jägenstedt](https://blog.foolip.org/), [Adam Argyle](https://nerdy.dev/), [Ahmad Shadeed](https://www.ishadeed.com/), [Robert Flack](https://github.com/flackr), [Dominic Nguyen](https://www.chromatic.com/), [Fantasai](http://fantasai.inkedblade.net/), and [Kilian Valkhof](https://kilianvalkhof.com/). + + Additional thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + ### Credits & Stuff + + The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofjs.com) + + And now, let's see what CSS has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + A quick announcement before the survey results. Introducing our very own 🎈🎉👕 State of CSS T-shirt 👕🎉🎈! + + What makes this shirt truly special is that it's the only piece of clothing that also teaches you practical, real-world CSS techniques. + + So whether you're going to a conference, a job interview, or just work, this shirt will demonstrate your CSS mastery like no other garment can! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + The shirt features the State of CSS logo along with snippets of the actual CSS code used to create each shape. Who knows, you might learn a thing or two! + + We use a high-quality, super-soft tri-blend shirt with a slim fit. + This shirt sizes small, so if you prefer a looser fit we recommend ordering one size up from what you usually wear (I'm wearing an M in the photos). + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD $24 + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **11,492** people in **102** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + CSS has seen a surge of new features in recent years, so as you'd expect adoption is + lagging a bit behind as the community takes its time to absorb new properties. + - + key: sections.units_selectors.description + t: | + We're willing to bet you'll find a few things you didn't know about in this section! + - + key: sections.technologies.description + t: | + The CSS ecosystem is going through a renewal of sorts, as older mainstays like Bootstrap + now have to accomodate newer entrants like Tailwind CSS. To say nothing of the whole CSS-in-JS + movement which, while it has yet to cross over to the CSS mainstream, is nonetheless quite dynamic. + - + key: sections.other_tools.description + t: | + No big surprises here, but it's worth highlighting the appearance of development-focused browsers + like Polypane and Sizzy, which go a step further than traditional devtools. + - + key: sections.environments.description + t: | + One of CSS's core strengths is its ability to adapt to different environment, yet for a variety + of reasons media like print and email remain unexplored by a majority of CSS developers. Might they + turn out to be the next frontier of CSS…? + - + key: sections.resources.description + t: | + The “other answers” results in this section highlight the richness and diversity of the CSS community, + and feature many outstanding blogs and podcasts which we are looking forward to officially adding + to the survey next year! + - + key: sections.opinions.description + t: | + These opinions paint a picture of a language getting more mature, but also more complex. And perhaps + –at least while we struggle to keep up with the pace of change– a little less enjoyable? + - + ########################################################################### + #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.currently_missing_from_css.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 2020, this was the year CSS Grid crossed over from new technology to established tool. + - + 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.tool_satisfaction_award.comment + t: PostCSS's **{value}** satisfaction ratio shows that you can't beat doing one thing really, really well. + - + key: award.tool_interest_award.comment + t: With a **{value}** ratio, CSS Modules have generated the most interest among CSS developers this year. + - + key: award.most_write_ins_award.comment + t: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + If a JavaScript developer writes a line of CSS code, are they now a CSS developer? + + This programming *kōan* illustrates a clear trend in the web development world: as more and more CSS developers are tasked with learning JavaScript, so are JavaScript developers starting to realize there might be more to this whole CSS thing than just `font-weight: bold;`. + + So asking about “the State of CSS” is inherently a tricky proposition: depending on who you ask you might get completely different answers! And how do you know which one's right? + + Here's another kōan for you: the right answer is that there *is* no right answer. Each of the many tools, methodologies, frameworks, and libraries featured here has its place in the vast front-end ecosystem. + + Building a complex React app? Styled Components is a great option. Designing a static landing page? You can't go wrong with Sass! And even though Bootstrap has lost some of its original hype factor, you can't beat it when it comes to sheer number of themes and plugins. + + So while we keep an eye on the shiny new toys popping up on GitHub every week, let's not forget the tools, techniques, and most of all people who have carried the CSS torch up to now. We'll need everybody if we're to keep CSS moving forward into 2021 and beyond! + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + - + key: picks.shadeed9.bio + t: Author of debuggingcss.com + - + key: picks.shadeed9.description + t: | + Container queries are a long-time awaited feature for us, + and I’m thrilled that the Chrome team is working on support for it natively! + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + The humble CSS box is more dynamic every year, and for me 2020 was about logical sides, instead of physical sides. Free internationally contextual content flow, spacing and shorthands? pls & ty + - + key: picks.sachagreif.bio + t: Creator of this survey + - + key: picks.sachagreif.description + t: | + With this blog post, Amelia Wattenberger didn't just go the extra mile, she ran a whole marathon! The animations and quiz will ensure you finally understand the CSS cascade. + - + 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.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + `content-visibility` is making a huge difference in the performance of my web apps already, but at the same time I think it should be the job of browsers to optimize this, not devs. + - + key: picks.walterstephanie.bio + t: User Centered Designer & CSS Lover + - + key: picks.walterstephanie.description + t: | + A series of YouTube videos that explain all the new cool CSS features to build modern designs. + - + 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. diff --git a/zh/state_of_css_2021_results.yml b/zh/state_of_css_2021_results.yml new file mode 100644 index 00000000000..3585174fc1b --- /dev/null +++ b/zh/state_of_css_2021_results.yml @@ -0,0 +1,457 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + Do woodworkers have to learn a new, better way to saw a board every couple years? Do painters feel like frauds for still using oil paint? Or is it just us front-end developers who get to experience this constant state of change? + + With container queries and more just around the corner, things are definitely moving fast. And since we need to keep up as well, we took the time to give these survey results a couple new power-ups of their own! + + What this means in practice is that we can now cross-reference two datapoints, such as yearly salaries by experience level; or gender by country. You'll see some of these breakdowns included throughout the results, but we encourage you to explore the data further using [our API](https://api.stateofjs.com/) or by [downloading our data](https://www.kaggle.com/sachag/state-of-css). Let us know if you end up making your own data visualizations! + + And now, let's see what CSS has been up to this year! + + *Note: We've had to push back the 2021 [State of JavaScript](http://stateofjs.com/) survey to January 2022 for lack of time. See you after the holidays!* + + – Sacha Greif + - + ########################################################################### + #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)! + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **8,714** developers throughout the world, 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: | + CSS's dynamism shows no sign of stopping, as developers make an effort to adopt the current + crop of new features while looking forward to even more innovation in the next few years. + - + key: sections.technologies.description + t: | + With nearly 50% of respondents happily using one or more CSS-in-JS library, it's safe to say that + the category has managed to carve out its niche. Maybe the two sides of the front-end world are + not so far apart after all? + - + 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 is fine, but this year we decided to go one step further + and actually feature the people who make up the CSS community themselves! + - + 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 CSS! + - + ########################################################################### + #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.animations_transforms + aliasFor: sections.animations_transforms.title + - + key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - + key: options.features_categories.media_queries + aliasFor: sections.media_queries.title + - + key: options.features_categories.other_features + aliasFor: sections.other_features.title + - + ########################################################################### + #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.currently_missing_from_css.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, CSS comparison functions are becoming a key part of every CSS developer's toolkit. + - + #- 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.tool_satisfaction_award.comment + t: PostCSS takes the top spot once again with a **{value}** satisfaction 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall. + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + The way you write CSS is about to change forever + + For many years now, many innovations in writing styles for the web have happened elsewhere: in preprocessors, JavaScript frameworks, or compilers. To be sure, CSS itself has also received some welcome improvements like [aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) or [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Yet we still reach for libraries and other helpers on a daily basis. + + But there's a change coming. The core CSS language is getting shaken up and renewed, and we're right at the forefront of accelerated evolution. + + [Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries) will bring in an entirely new era of responsive design, and [Cascade Layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) will make our use of frameworks, theming and managing complex codebases significantly easier. + + When we look a little further ahead, we can also see the [@when/else conditional](https://css-tricks.com/proposal-for-css-when/) coming up, which will let us combine media, container and supports queries into a single at-rule. + + And fingers crossed, 2022 is the year we finally see some movement on native CSS nesting. Those of us that work with tools like Sass and PostCSS already couldn't imagine another way of working. + + All of this together means that 2022 is likely to be a year where the way you write CSS is going to fundamentally change. It's an incredibly exciting period, and we look forward to all the amazing implementations in the year to come. + - + key: conclusion.bio + t: Web developer and creator of Polypane + - + ########################################################################### + #Picks + ########################################################################### + 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” + - + key: picks.georgedoescode.name + t: The CSS Paint API + - + key: picks.georgedoescode.bio + t: Developer, writer, and generative artist. + - + key: picks.georgedoescode.description + t: | + The Paint API allows us to create images programmatically, + to use in our CSS. It unlocks a whole world of creativity, + and I am very excited about it! + - + key: picks.cassidoo.name + t: Lynn Fisher + - + key: picks.cassidoo.bio + t: Developer advocate, educator, and startup advisor. + - + key: picks.cassidoo.description + t: | + I'd love to pick Lynn Fisher. She's consistently surprised + and delighted the CSS community with her creative projects and experiments, + and I love how much folks can learn from her! + - + key: picks.joshwcomeau.name + t: Amelia Wattenberger + - + key: picks.joshwcomeau.bio + t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/). + - + key: picks.joshwcomeau.description + t: | + Amelia is creating some of the most amazing + interactive blog posts about CSS and JS. + Check out this post about how percentages work in CSS! + - + key: picks.kevinjpowell.name + t: Stephanie Eckles + - + key: picks.kevinjpowell.bio + t: CSS Evangelist + - + key: picks.kevinjpowell.description + t: | + I'm constantly blown away by Stephanie's continued initiatives + to help share her knowledge of modern CSS techniques, + as well as her contagious enthusiasm for CSS. + - + key: picks.mmatuzo.name + t: aspect-ratio + - + key: picks.mmatuzo.bio + t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev). + - + key: picks.mmatuzo.description + t: | + All major browsers shipped support for aspect-ratio in 2021. + At first I underestimated it, but there are so many + situations where this property comes in handy. + - + key: picks.lauragift_.name + t: Kevin Powell + - + key: picks.lauragift_.bio + t: Frontend Developer and Content Creator + - + key: picks.lauragift_.description + t: | + Kevin creates CSS content on YouTube and I really enjoy watching his videos a lot. + He does a really good job teaching CSS concepts in a way that's easy and fun + to understand. + - + key: picks.ericwbailey.name + t: Miriam Suzanne + - + key: picks.ericwbailey.bio + t: 'Inclusive Design and \#a11y advocate.' + - + key: picks.ericwbailey.description + t: | + CSS is about to go from good to great. + Miriam's work on Container Queries and Cascade Layers is going + to revolutionize how CSS is written. + - + key: picks.samuelkraft.name + t: Vanilla Extract + - + key: picks.samuelkraft.bio + t: Frontend & design + - + key: picks.samuelkraft.description + t: | + Lately I've loved working with Vanilla Extract, it's like CSS Modules but + fully typed with a magical developer experience. + - + key: picks.sachagreif.name + t: Open Props + - + key: picks.sachagreif.bio + t: State of JS and State of CSS creator + - + key: picks.sachagreif.description + t: | + It's really cool to see the feedback loop between new CSS features and new + projects taking advantage of them! And I think Adam Argyle's Open Props + is a great use of Custom Properties (CSS variables). + - + key: picks.shadeed9.name + t: Container Queries + - + key: picks.shadeed9.bio + t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com) + - + key: picks.shadeed9.description + t: | + CSS container queries again! We got the chance to play with them in a browser. + Thanks to Miriam Suzanne for moving this forward! + I can't wait to use them without a flag. + - + #- key: picks.georgedoescode.name + #t: + #- key: picks.georgedoescode.bio + #t: + #- key: picks.georgedoescode.description + #t: | + key: picks.argyleink.name + t: CSS Noise + - + key: picks.argyleink.bio + t: CSS at Google + - + key: picks.argyleink.description + t: | + CSS generated texture and randomness makes for unique and + interesting paint jobs in your design. + Noise tools have made the technique accessible. + - + key: picks.walterstephanie.name + t: Miriam Suzanne + - + key: picks.walterstephanie.bio + t: UX Researcher and CSS lover + - + key: picks.walterstephanie.description + t: | + Miriam is an artist and an activist who creates software and art that celebrate the queer complexity of human experience. She's a CSS expert, and is doing an amazing job on the specifications for CSS Container Queries. + - + key: picks.michebarks.name + t: '“Building a Color Scheme” by Adam Argyle' + - + key: picks.michebarks.bio + t: Senior Front End Developer + - + key: picks.michebarks.description + t: | + I love this article because although custom properties have been around for a while now, it really takes them to a different level and showcases their power. I hope it makes some people think of them in a different way, as more than simple variables. + - + #- 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.kilianvalkhof.name + t: prefers-reduced-data + - + key: picks.kilianvalkhof.bio + t: Web developer and creator of Polypane + - + key: picks.kilianvalkhof.description + t: | + We need more devs to ask browsers about this feature, and to realize how big a difference it can make. With 64% of respondents not knowing it though, we have work to do! + - + #- 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: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of CSS survey ran from October 5 to November 2 2021, and collected 8714 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 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. + ### 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/StateOfJS/StateOfCSS-2020/issues/8). + 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. + ### 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**: this year, we reached out to 23 organizations representing BIPOC and LGBTQ developers in the hopes of partnering up. While very few of them replied, we will keep looking for ways to reach out beyond our current 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**. + - **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**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the survey. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/zh/state_of_css_2021_survey.yml b/zh/state_of_css_2021_survey.yml new file mode 100644 index 00000000000..1c22a120867 --- /dev/null +++ b/zh/state_of_css_2021_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: css +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_css2021 + 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! diff --git a/zh/state_of_graphql.yml b/zh/state_of_graphql.yml new file mode 100644 index 00000000000..f909b809139 --- /dev/null +++ b/zh/state_of_graphql.yml @@ -0,0 +1,626 @@ +--- +locale: en-US +namespace: graphql +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_graphql.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.state_of_graphql.results_intro + t: > + When GraphQL was first introduced it offered a radically new way to build APIs, with more control, more granularity, and more flexibility. + + However, 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. + + Over 2000 developers took the first ever State of GraphQL survey to help us find out if they succeeded. And while this is only a tiny part of the overall GraphQL ecosystem, we + - + key: general.state_of_graphql.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.graphql_api_generators.title + t: API Generators + - + key: sections.graphql_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. + - + ########################################################################### + #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 + t: Industry Sectors + - + key: usage.industry_sector.description + t: Which industry sector(s) are you using GraphQL in? + - + key: usage.industry_sector.others + t: Other Industry Sectors + - + 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.graphql_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 + t: Sites & Courses + - + key: resources.sites_courses.description + t: Which GraphQL-related sites/courses/etc. do you use to learn about GraphQL? + - + #podcasts + key: resources.podcasts.others + t: Podcasts + - + key: resources.podcasts.others.description + t: Which GraphQL-related podcasts do you listen to? + - + #people + key: resources.people.others + t: People + - + key: resources.people.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/zh/state_of_graphql_2022.yml b/zh/state_of_graphql_2022.yml new file mode 100644 index 00000000000..59cdf23826f --- /dev/null +++ b/zh/state_of_graphql_2022.yml @@ -0,0 +1,427 @@ +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: sections.introduction.description + 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.description + t: | + **3,094** respondents took part in this year's survey. + - + key: sections.features.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.description + t: | + The GraphQL ecosystem is surprisingly deep, with many competing libraries helping you set up your API. + - + key: sections.tools_others.description + t: | + Picking the right tools to use in combination with GraphQL can make all the difference. + - + key: sections.usage.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.description + t: | + We're sure you'll discover at least one or two new people, podcasts, or blogs to follow! + - + 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.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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #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.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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/zh/state_of_js.yml b/zh/state_of_js.yml new file mode 100644 index 00000000000..5d8f08df6c6 --- /dev/null +++ b/zh/state_of_js.yml @@ -0,0 +1,592 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.state_of_js.intro + t: > + The JavaScript world could use a bit of classification. + + Since 2016, this survey has collected data from over 20,000 developers each year to identify current and upcoming trends. + + Together, let's find out which libraries developers want to learn next, which have the best satisfaction ratings, and much more. + - + key: general.state_of_js.description + t: The annual developer survey of the JavaScript ecosystem + - + ########################################################################### + #Sections + ########################################################################### + key: sections.syntax.title + t: Syntax + - + key: sections.syntax.description + t: The grammar of JavaScript. + - + key: sections.language.title + t: Language + - + key: sections.language.description + t: The vocabulary of JavaScript. + - + key: sections.data_structures.title + t: Data Structures + - + key: sections.data_structures.description + t: How you store and manipulate data. + - + key: sections.browser_apis.title + t: Browser APIs + - + key: sections.browser_apis.description + t: The features provided by the browser. + - + key: sections.other_features.title + t: Other Features + - + key: sections.other_features.description + t: Other technologies and patterns + - + key: sections.patterns.title + t: Patterns + - + key: sections.patterns.description + t: How you prefer writing code + - + key: sections.javascript_flavors.title + t: JavaScript Flavors + - + key: sections.javascript_flavors.description + t: Languages that compile to JavaScript + - + key: sections.front_end_frameworks.title + t: Front-end Frameworks + - + key: sections.front_end_frameworks.description + t: Front-end frameworks and libraries + - + key: sections.datalayer.title + t: Data Layer + - + key: sections.datalayer.description + t: Loading and managing data in your app + - + key: sections.back_end_frameworks.title + t: Back-end Frameworks + - + key: sections.back_end_frameworks.description + t: JavaScript on the server + - + key: sections.testing.title + t: Testing + - + key: sections.testing.description + t: Tools for testing your code + - + key: sections.mobile_desktop.title + t: Mobile & Desktop + - + key: sections.mobile_desktop.description + t: JavaScript for mobile devices and desktop apps + - + key: sections.build_tools.title + t: Build Tools + - + key: sections.build_tools.description + t: Compiling & bundling code + - + key: sections.monorepo_tools.title + t: Monorepo Tools + - + key: sections.monorepo_tools.description + t: Tools used to manage JavaScript monorepos. + - + key: sections.tools_others.title + t: Other Tools + - + key: sections.tools_others.description + t: Other JavaScript tools + - + 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. + - + ########################################################################### + #Options + ########################################################################### + #JS pain points + #- key: options.js_pain_points.browser_interoperability + #t: Browser Compatibility + #- key: options.js_pain_points.browser_interoperability.description + #t: Differences between Chrome, Safari, Firefox, etc. + #- key: options.js_pain_points.animations + #t: Animations + #- key: options.js_pain_points.animations.description + #t: Managing animations, transitions, etc. using JavaScript. + #- key: options.js_pain_points.form_handling + #t: Form Handling + #- key: options.js_pain_points.form_handling.description + #t: Creating forms, managing their state and errors, and saving their data. + key: options.js_pain_points.state_management + t: State Management + - + key: options.js_pain_points.state_management.description + t: Managing global data state in complex applications. + - + #- key: options.js_pain_points.performance_issues + #t: Performance Issues + #- key: options.js_pain_points.performance_issues.description + #t: Bundle sizes, slow loading, and other performance issues. + key: options.js_pain_points.managing_dependencies + t: Managing Dependencies + - + key: options.js_pain_points.managing_dependencies.description + t: Managing dependencies, package versions and bundle sizes. + - + key: options.js_pain_points.architecture + t: Code Architecture + - + key: options.js_pain_points.architecture.description + t: Organizing and maintaining your codebase. + - + key: options.js_pain_points.finding_packages + t: Finding Packages + - + key: options.js_pain_points.finding_packages.description + t: Finding and evaluating JavaScript packages. + - + key: options.js_pain_points.writing_modules + t: Writing Modules + - + key: options.js_pain_points.writing_modules.description + t: Writing JavaScript modules and publishing them as packages. + - + key: options.js_pain_points.debugging + t: Debugging + - + key: options.js_pain_points.debugging.description + t: Identifying and solving issues with your code. + - + key: options.js_pain_points.async_code + t: Async Code + - + key: options.js_pain_points.async_code.description + t: Handling asynchronous functions. + - + key: options.js_pain_points.modules_management + t: Modules Management + - + key: options.js_pain_points.modules_management.description + t: Writing and importing modules. + - + key: options.js_pain_points.date_management + t: Date Management + - + key: options.js_pain_points.date_management.description + t: Handling and manipulating dates and times. + - + #- key: options.js_pain_points.xxx + #t: + #- key: options.js_pain_points.xxx.description + #t: + #JS missing features + key: options.currently_missing_from_js.static_typing + t: Static Typing + - + key: options.currently_missing_from_js.static_typing.description + t: Native types (similar to what TypeScript offers). + - + key: options.currently_missing_from_js.standard_library + t: Standard Library + - + key: options.currently_missing_from_js.standard_library.description + t: A standard library of common utilities + - + key: options.currently_missing_from_js.pattern_matching + t: Pattern Matching + - + key: options.currently_missing_from_js.pattern_matching.description + t: A new `match` keyword for pattern-matching objects. + - + key: options.currently_missing_from_js.pipe_operator + t: Pipe Operator + - + key: options.currently_missing_from_js.pipe_operator.description + t: A new `|>` operator for passing the result of one function to another. + - + key: options.currently_missing_from_js.decorators + t: Decorators + - + key: options.currently_missing_from_js.decorators.description + t: Decorators used to metaprogram and add functionality to a value. + - + key: options.currently_missing_from_js.immutable_data_structures + t: Immutable Data Structures + - + key: options.currently_missing_from_js.immutable_data_structures.description + t: New deeply immutable data structures such as `Record` and `Tuple`. + - + key: options.currently_missing_from_js.better_date_management + t: Better Date Management + - + key: options.currently_missing_from_js.better_date_management.description + t: A new `Temporal` object for working with dates and times. + - + key: options.currently_missing_from_js.observable + t: Observable + - + key: options.currently_missing_from_js.observable.description + t: A new `Observable`` type used to model push-based data sources. + - + #- key: options.currently_missing_from_js.xxx + #t: + #- key: options.currently_missing_from_js.xxx.description + #t: + ########################################################################### + #Features + ########################################################################### + #syntax + key: features.destructuring + t: Destructuring + - + key: features.destructuring.description + t: 'Example: `const { foo } = bar`' + - + key: features.spread_operator + t: Spread operator + - + key: features.spread_operator.description + t: 'Example: `[...array1, ...array2]`' + - + key: features.arrow_functions + t: Arrow Functions + - + key: features.arrow_functions.description + t: 'Example: `const foo = () => {}`' + - + key: features.nullish_coalescing + t: Nullish Coalescing + - + key: features.nullish_coalescing.description + t: > + Example: `const foo = 0 ?? 42` + - + key: features.optional_chaining + t: Optional Chaining + - + key: features.optional_chaining.description + t: > + Example: `const dogName = adventurer.dog?.name` + - + key: features.private_fields + t: Private Fields + - + key: features.private_fields.description + t: > + Example: `class ClassWithPrivateField { #privateField }` #privateField }` + - + #language + key: features.proxies + t: Proxies + - + key: features.async_await + t: Async/Await + - + key: features.promises + t: Promises + - + key: features.decorators + t: Decorators + - + key: features.decorators.description + t: > + In its simplest form, a decorator is simply a way of wrapping one piece of code with another — literally “decorating” it. + - + key: features.dynamic_import + t: Dynamic Import + - + key: features.dynamic_import.description + t: > + Example: await import('/modules/my-module.js') + - + key: features.promise_all_settled + t: Promise.allSettled() + - + key: features.big_int + t: BigInt + - + key: features.numeric_separators + t: Numeric Separators + - + key: features.string_replace_all + t: String.prototype.replaceAll() + - + key: features.string_match_all + t: String.prototype.matchAll() + - + key: features.logical_assignment + t: Logical Assignment + - + key: features.promise_any + t: Promise.any() + - + key: features.array_at + t: Array.prototype.at() + - + key: features.top_level_await + t: Top-Level Await + - + key: features.intl + t: Intl + - + key: features.custom_elements + t: Custom Elements + - + key: features.shadow_dom + t: Shadow DOM + - + key: features.page_visibility + t: Page Visibility API + - + key: features.broadcast_channel + t: Broadcast Channel API + - + key: features.geolocation + t: Geolocation API + - + key: features.file_system_access + t: File System Access API + - + key: features.web_share + t: Web Share API + - + key: features.webxr + t: WebXR + - + #data structures + key: features.maps + t: Maps + - + key: features.sets + t: Sets + - + key: features.typed_arrays + t: Typed Arrays + - + key: array_prototype_flat + t: Array.prototype.flat + - + #browser apis + key: features.service_workers + t: Service Workers + - + key: features.local_storage + t: LocalStorage + - + key: features.i18n + t: i18n + - + key: features.web_components + t: Web Components + - + key: features.web_audio + t: Web Audio API + - + key: features.webgl + t: WebGL + - + key: features.web_animations + t: Web Animations API + - + key: features.webrtc + t: WebRTC + - + key: features.web_speech + t: Web Speech API + - + key: features.webvr + t: WebVR + - + key: features.websocket + t: Websocket + - + key: features.fetch + t: Fetch API + - + #other features + key: features.pwa + t: Progressive Web Apps (PWA) + - + key: features.wasm + t: WebAssembly (WASM) + - + #patterns + key: patterns.object_oriented_programming + t: Object-Oriented Programming + - + key: features.functional_programming + t: Functional Programming + - + key: features.reactive_programming + t: Reactive Programming + - + #upcoming features + #- key: features.static_typing + #t: Static Typing + #- key: features.standard_library + #t: Standard Library + #- key: features.pattern_matching + #t: Pattern Matching + #- key: features.pipe_operator + #t: Pipe Operator + #- key: features.immutable_data_structures + #t: Immutable Data Structures + ########################################################################### + #Tools + ########################################################################### + key: tools.angular.description + t: > + Note that this question only targets [Angular](https://angular.io/) experience, and specifically does *not* apply to the deprecated [AngularJS](https://angularjs.org/). + - + ########################################################################### + #Other Tools + ########################################################################### + key: tools_others.runtimes + t: JavaScript Runtimes + - + key: tools_others.runtimes.description + t: Which engines/runtimes/execution environments do you regularly use? + - + key: tools_others.runtimes.others + t: Other Runtimes + - + key: tools_others.runtimes.others.description + t: Other answers (freeform field). + - + key: tools_others.package_registries + t: Package Registries + - + key: tools_others.package_registries.description + t: Which package registries do you regularly fetch packages from? + - + key: tools_others.package_registries.others + t: Other Package Registries + - + key: tools_others.package_registries.others.description + t: Other answers (freeform field). + - + key: tools_others.form_factors + aliasFor: environments.form_factors + - + key: tools_others.form_factors.description + aliasFor: environments.form_factors.description + - + ########################################################################### + #Opinions + ########################################################################### + key: opinions.js_moving_in_right_direction + t: JavaScript is moving in the right direction + - + key: opinions.building_js_apps_overly_complex + t: Building JavaScript apps is overly complex right now + - + key: opinions.js_over_used_online + t: JavaScript is over-used online + - + key: opinions.enjoy_building_js_apps + t: I enjoy building JavaScript apps + - + key: opinions.would_like_js_to_be_main_lang + t: I would like JavaScript to be my main programming language + - + key: opinions.js_ecosystem_changing_to_fast + t: The JavaScript ecosystem is changing too fast + - + key: opinions_others.missing_from_js.others + t: What do you feel is currently missing from JavaScript? + - + key: opinions_others.missing_from_js.others.description + t: Features you'd like to see in JavaScript one day. + - + key: happiness.front_end_frameworks + t: How happy are you with the state of front end frameworks? + - + key: happiness.back_end_frameworks + t: How happy are you with the state of back end frameworks? + - + key: happiness.testing + t: How happy are you with the state of testing tools? + - + key: happiness.mobile_desktop + t: How happy are you with the state of mobile & desktop frameworks? + - + key: happiness.build_tools + t: How happy are you with the state of build tools? + - + key: happiness.monorepo_tools + t: How happy are you with the state of monorepo tools? + - + key: happiness.state_of_the_web + t: How happy are you with the general state of web technologies? + - + key: happiness.state_of_js + t: How happy are you with the general state of JavaScript? + - + #Pain Points + key: opinions.js_pain_points + t: JavaScript Pain Points + - + key: opinions.js_pain_points.description + t: For each matchup, pick the aspect of JavaScript you struggle with the most. + - + key: opinions_others.js_pain_points.others + t: Other JavaScript Pain Points + - + #Missing Features + key: opinions.currently_missing_from_js + t: What do you feel is currently missing from JavaScript? + - + key: opinions.currently_missing_from_js.description + t: For each matchup, pick the feature you'd most like to be able to use in JavaScript today. + - + key: opinions_others.currently_missing_from_js.others + t: Other Missing Features + - + #pain points/currently missing (results) + key: js_pain_points.js_pain_points_wins + t: JavaScript Pain Points + - + key: js_pain_points.js_pain_points_wins.description + t: Which aspect of JavaScript do you struggle with the most? Results are ranked by number of tournament rounds won. + - + key: js_pain_points.js_pain_points_matchups + t: JavaScript Pain Points (Matchups) + - + key: js_pain_points.js_pain_points_matchups.description + t: Which aspect of JavaScript do you struggle with the most? Percentage of rounds won by left-hand item against top-side item. + - + key: currently_missing_from_js.currently_missing_from_js_wins + t: Features Missing From JavaScript + - + key: currently_missing_from_js.currently_missing_from_js_wins.description + t: Which feature would you most like to be able to use in JavaScript today? Results are ranked by number of tournament rounds won. + - + key: currently_missing_from_js.currently_missing_from_js_matchups + t: Features Missing From JavaScript (Matchups) + - + key: currently_missing_from_js.currently_missing_from_js_matchups.description + t: Which feature would you most like to be able to use in JavaScript today? Percentage of rounds won by left-hand item against top-side item. + - + ########################################################################### + #Resources + ########################################################################### + key: resources.first_steps_js + t: First Steps With JavaScript + - + key: resources.first_steps_js.description + t: When first starting out, how did you initially learn JavaScript? diff --git a/zh/state_of_js_2020.yml b/zh/state_of_js_2020.yml new file mode 100644 index 00000000000..b5d9d828507 --- /dev/null +++ b/zh/state_of_js_2020.yml @@ -0,0 +1,303 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.results.description + t: The annual survey about the latest trends in the JavaScript ecosystem. + - + ########################################################################### + #Introduction + ########################################################################### + key: sections.introduction.description + t: | + + As crappy as 2020 was, JavaScript as a whole still managed to somehow move forward. As the language itself keeps improving + thanks to new features like Optional Chaining and Nullish Coalescing, TypeScript's widespread adoption is taking things to a whole other level by popularizing static typing. + + And on the framework side, just when we thought things were settling down, Svelte comes in and shakes everything up with a fresh take on the front-end. And even build tools are showing signs of new activity after years of webpack dominance. + + But the difference this time is that the “old” guard –relatively speaking– is not going anywhere. Svelte and Snowpack are great, but so are React and webpack. And sure, they too will eventually fall prey to the Great JavaScript Churn, but not for many, many years. + + So let's enjoy what we have here: a great ecosystem that just keeps getting even better! + + ### Join Our Launch Livestream! + + We'll be doing a [special launch livestream](https://stateofjs.com/2020stream/) in collaboration with the folks at the CodeItLive Twitch channel. Join us along with guests such as Sarah Drasner, Josh W. Comeau, and Kent C. Dodds to discuss this past year's JavaScript trends! + + ### Download Our Data + + You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-js). Let us know if you end up making your own data visualizations! + + ### State of CSS + + If you haven't seen it already, we strongly recommend checking out the [State of CSS 2020 Trend Report](https://2020.stateofcss.com/en-US/report/) to get up to date on the past year's three main CSS trends. + + ### Thanks + + Many thanks to [Alexey Pyltsyn](https://github.com/lex111) for his help with translations. + + Thanks as well to [Amelia Wattenberger](https://wattenberger.com/) for helping us update her original “Changes Over Time” chart from last year. If you want to learn how to build your own amazing data visualizations there's no better way than her [D3 video course](https://www.newline.co/fullstack-d3). + + ### Credits & Stuff + + The State of JavaScript Survey is created and maintained by [Sacha Greif](https://twitter.com/sachagreif) and [Raphaël Benitte](https://twitter.com/benitteraphael). + + Watch [this video overview](https://www.youtube.com/watch?v=o4w1qEnZxbM) to learn more about the technical aspects of the project, from data collection to data visualizations. Questions? Feedback? [Get in touch](mailto:hello@stateofjs.com) or [join our Discord](https://discord.gg/zRDb35jfrt). + + And now, let's see what JavaScript has been up to this year! + + – Sacha and Raphaël + - + ########################################################################### + #Tshirt + ########################################################################### + key: sections.tshirt.title + t: T-shirt + - + key: sections.tshirt.description + t: | + ## Support the survey and look good in the process! + + We've updated last year's very popular 👕 State of JavaScript T-shirt 👕 for + the 2020 JavaScript landscape! + + The shirt features a ”periodic table of JavaScript” that lists the most popular + libraries grouped by category, along with their GitHub stars counts (in thousands). + + This shirt is a great way to familiarize yourself with the JavaScript ecosystem, + and maybe even strike up a conversation with other like-minded + JavaScript developers! + - + key: tshirt.about + t: About the T-shirt + - + key: tshirt.description + t: | + Printing and shipping is handled by [Cotton Bureau](https://cottonbureau.com/people/state-of-js). The design is printed on a premium Next Level black super-soft, tri-blend shirt. + - + key: tshirt.getit + t: Get It + - + key: tshirt.price + t: USD ${price} + shipping + - + ########################################################################### + #Sections Introductions + ########################################################################### + key: sections.user_info.description + t: | + This year's survey reached **23,765** people in **137** countries. For the first time this year, + we were able to translate the survey questions in multiple languages thanks to an awesome team of volunteers. + - + key: sections.features.description + t: | + While most respondents were aware of the majority of JavaScript features + mentioned in the survey, many still have yet to actually use most of them. + - + key: sections.technologies.description + t: | + The typical new JavaScript library shows high satisfaction but low usage, which can sometimes make + selecting the right technology for your needs a bit tricky. This is where looking at + the data can really help point you in the right direction. + - + key: sections.javascript_flavors.description + t: | + The trend of “flavors” of JavaScript that compile down to standard code started all these + years ago with CoffeeScript, but it's now clear that TypeScript is the uncontested leader in + that category. + - + key: sections.front_end_frameworks.description + t: | + As usual React and Vue lead the pack, but Svelte is quickly establishing itself as a very + serious contender for the front-end crown. + - + key: sections.datalayer.description + t: | + While the datalayer space is still in constant movement, one thing seems clear: GraphQL and + its related technologies are here to stay. + - + key: sections.back_end_frameworks.description + t: | + The back-end space is still very fragmented, but Express stands out as the one dominant + tool, while Next.js maintains its high satisfaction ratio. + - + key: sections.testing.description + t: | + The testing ecosystem keeps getting richer, with new entrants Testing Library and Playwright both + scoring high marks on the satisfaction index. + - + key: sections.build_tools.description + t: | + Just when it seemed like webpack's dominance had settled the debate, the build tools scene + has again exploded with new entrants like Snowpack and esbuild, leading us to give it a full + section for the first time since 2017. + - + key: sections.mobile_desktop.description + t: | + JavaScript is not just for the browser, and while Electron and React Native are the two + best-known names in this category, other solutions like Expo and Capacitor are also starting + to make waves. + - + key: sections.other_tools.description + t: | + The diversity and quantity of libraries, utilities, and other tools highlights how vast the JavaScript + ecosystem has become, and for the first time this year we're also tracking JavaScript runtimes + such as Deno and Hermes. + - + key: sections.resources.description + t: | + Many great resources are listed here, and we're sure that you'll find at least a few new + blogs or podcasts to follow! + - + key: sections.opinions.description + t: | + While things are generally looking good in JavaScript land, there does seem to be a bit of a + come-down from the positivity high-point of 2018. Will the trend persist? Tune in next year to find out! + - + ########################################################################### + #Notes + ########################################################################### + 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; also matches `email`, `by email`, etc. + - State of CSS: the [State of CSS](https://stateofcss.com/) mailing list + - Work: matches `work`, `colleagues`, `coworkers`, etc. + - + ########################################################################### + #Awards + ########################################################################### + #- key: award.feature_adoption_delta_award.comment + #t: With a **{value}** progression in 2020, this was the year CSS Grid crossed over from new technology to established tool. + key: award.tool_usage_delta_award.comment + t: TypeScript was already popular, and with a **{value}** growth in usage it looks like it's only going to get more ubiquitous going forward. + - + key: award.tool_satisfaction_award.comment + t: With a sky-high satisfaction rating of **{value}**, Testing Library is 2020's overall most beloved tool. + - + key: award.tool_interest_award.comment + t: GraphQL continues to be the one thing developers want to learn more about with an interest ratio of **{value}**, as soon as they can finally find the time. + - + key: award.most_write_ins_award.comment + t: People are always passionate about text editors, and with **{value}** mentions IntelliJ IDEA wins the award for the most write-in answers. + - + ########################################################################### + #Conclusion + ########################################################################### + key: sections.conclusion.description + t: | + Since ancient times, philosophers have pondered the Paradox of JavaScript: on one hand, you can't wait for exciting new language features and libraries that promise to make your developer experience so much better. + + But at the same time, you crave stability and simplicity so you can finally get things done without having to spend half your time browsing through convoluted GitHub issues threads and outdated Stack Overflow questions. + + So which is it? Do we want the new shiny, or the old reliable? More than ever, 2020 shows that we won't settle for anything less than *both*. The good news is that the JavaScript community has risen up to the challenge, which promises an exciting 2021! + + P.S. if you're still hungry for more JavaScript stats we recommend checking out the yearly [Rising Stars](https://risingstars.js.org/2020/en/) rankings from [Best Of JS](https://bestofjs.org/). + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_2020_pick + t: 'My 2020 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.joshwcomeau.bio + t: Software-engineer-turned-educator + - + key: picks.joshwcomeau.description + t: | + This is a fantastic intro resource for learning about web accessibility! + I picked it because it's our job as JS devs to make sure that the sites + we build are usable by everyone, not just sighted keyboard-and-mouse users. + - + key: picks.swyx.bio + t: Infinite Builder + - + key: picks.swyx.description + t: | + Svelte is the Space Elevator of frontend frameworks. + It helps you ship apps extremely fast. + - + key: picks.kentcdodds.bio + t: Improving the world with quality software + - + key: picks.kentcdodds.description + t: | + Remix is a different approach to React frameworks with an emphasis on progressive + enhancement. It embraces the web platform in a way that no existing frameworks do + and I'm excited by its potential. + - + key: picks.sarah_edo.bio + t: Core Team Vue.js + - + key: picks.sarah_edo.description + t: | + Insomnia is an app that allows you to design, test, and deploy API + Workflows with a clean, simplified UX- it has both REST and GraphQL support, + though clearly the puns are better if you're using REST. + - + key: picks.ladyleet.bio + t: This Dot Labs, GDE, MVP + - + key: picks.ladyleet.description + t: | + RedwoodJS and frameworks like it are starting to change how we think about development. + It’s bringing the ease of Ruby on Rails to the front-end ecosystem. + - + key: picks.midudev.bio + t: Lead Frontend @ Adevinta & Content Creator + - + key: picks.midudev.description + t: | + Working with modules on the JavaScript ecosystem has been messy. + ES2020 came with ES Modules to end that. Even it's stable on Node.js. Yei! + - + key: picks.cassidoo.bio + t: Principal Developer Experience Engineer at Netlify + - + key: picks.cassidoo.description + t: | + Ben is one of the most generous people in the JS community. + He's active in open source (on the Vue core team), + consistently makes useful content for developers to learn, and is very giving with his time. + - + key: picks.lauragift_.bio + t: Frontend Developer @ PassionatePeople + - + key: picks.lauragift_.description + t: | + Josh Comeau has been an inspiration to me, and I can say the JS community in general. + He writes very thoughtful articles on his blog, and they are some of the best I read in + 2020 because they either helped me stay on top of the latest in JavaScript + or helped me learn something new. + - + key: picks.tomdale.bio + t: JavaScript Thinkfluencer + - + key: picks.tomdale.description + t: | + Volta helps manage your entire JavaScript toolchain – think nvm, but it also helps + you and your team stay on the same versions of Node, npm, CLI tools, etc. + I love it because it's so darn nice to use, and is pioneering the use of + Rust to build speedy tools for JS. + - + key: picks.markdalgleish.bio + t: Co-creator of CSS Modules, creator of Playroom + - + key: picks.markdalgleish.description + t: | + Automates npm publishing with the ability to tie Markdown release notes to every change. Changesets has really leveled up the quality of our release notes and version management this year. + - + key: picks.sachagreif.bio + t: Creator of the State of JS survey + - + key: picks.sachagreif.description + t: | + Best Of JS tracks GitHub stats about virtually every major JavaScript project, and it has been an invaluable resource for helping us decide what to include in the survey! diff --git a/zh/state_of_js_2020_survey.yml b/zh/state_of_js_2020_survey.yml new file mode 100644 index 00000000000..59966deb8b7 --- /dev/null +++ b/zh/state_of_js_2020_survey.yml @@ -0,0 +1,13 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2020 + 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. diff --git a/zh/state_of_js_2021_results.yml b/zh/state_of_js_2021_results.yml new file mode 100644 index 00000000000..422a65eab95 --- /dev/null +++ b/zh/state_of_js_2021_results.yml @@ -0,0 +1,433 @@ +--- +locale: en-US +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 + ########################################################################### + key: sections.introduction.description + t: | + + 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-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 + - + ########################################################################### + #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, **16,085** 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 **satisfaction ratio** (or **interest ratio**) over its total **user count**. + It can be divided into four quadrants: + + - **1**: Low usage, high satisfaction. Technologies worth keeping an eye on. + + - **2**: High usage, high satisfaction. Safe technologies to adopt. + + - **3**: Low usage, low satisfaction. Technologies that are harder to recommend currently. + + - **4**: High usage, low satisfaction. 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.currently_missing_from_css.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}** satisfaction 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: sections.conclusion.description + t: | + + JavaScript is in a tremendously better state today compared to 2016. + + Back when the first State of JS survey took place, only 21% of you used TypeScript compared to 69% today. Whereas we used to joke about a new front end framework releasing every day, **React** and **Vue** have now been dominant for 6 years running. And the percentage of people reporting that "JS is moving too fast" is down from 59% to 38%. + + 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. + + 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. + + As the [Third Age of JavaScript](https://www.swyx.io/js-third-age/) enters its third year, the opportunities for aspiring open sourcerors and entrepreneurs continue to unfold, and I'm excited to see what the next couple years bring! + - + key: conclusion.bio + t: Head of DX at Temporal + - + ########################################################################### + #Picks + ########################################################################### + key: picks.my_pick + t: 'My 2021 Pick: ' + - + key: picks.intro + t: We asked members of the JavaScript community to share their “pick of the year” + - + key: picks.lee_robinson.name + t: SvelteKit + - + key: picks.lee_robinson.bio + t: Director of Developer Relations at Vercel + - + key: picks.lee_robinson.description + t: | + SvelteKit is a fresh take on building for the web and has an + incredibly passionate, growing community of supporters. + - + 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.miguel_angel_duran.name + t: Vite + - + key: picks.miguel_angel_duran.bio + t: Front End Dev & Twitch Coding Streamer + - + key: picks.miguel_angel_duran.description + t: | + In addition to esbuild and swc, fantastic tools pushing forward the ecosystem, + I'm enjoying Vite. It has a delightful DX, and it's rich in features. + - + 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_tolinkski.name + t: SvelteKit + - + key: picks.scott_tolinkski.bio + t: Creator of Level-Up Tuts, co-host of Syntax + - + key: picks.scott_tolinkski.description + t: | + Svelte Kit provides the amazing developer experience of Svelte with all + of the modern features of expected from a web platform. + - + key: picks.xxxx.name + t: + - + key: picks.xxxx.bio + t: + - + key: picks.xxxx.description + t: | + + - + ########################################################################### + #Sponsors + ########################################################################### + key: partners.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - + key: partners.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - + key: partners.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + - + ########################################################################### + #FAQ/About + ########################################################################### + key: about.content + t: > + The 2021 State of JS survey ran from January 13 to February 2 **2022**, and collected 16,085 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 designed by [Christopher Kirk-Nielsen](http://chriskirknielsen.com/). + ### Survey Goals + This survey, along with the [State of CSS](https://stateofcss.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. + They should also be taken as a **snapshot of a specific subset of developers**, and are 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/StateOfJS/Monorepo/issues/56). + 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 partner [Frontend Masters](https://frontendmasters.com/). + - **Other Funding**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a small budget to help hire an [accessibility consultant](https://fossheim.io/) to work on the CSS and JS surveys. + + Despite these funding sources, the surveys remains mostly a self-funded project overall and any contribution or sponsorship would be 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-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/zh/state_of_js_2021_survey.yml b/zh/state_of_js_2021_survey.yml new file mode 100644 index 00000000000..74450897fe7 --- /dev/null +++ b/zh/state_of_js_2021_survey.yml @@ -0,0 +1,26 @@ +--- +locale: en-US +namespace: js +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.survey_intro_js2021 + 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! + - + ########################################################################### + #Survey + ########################################################################### + 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! diff --git a/zh/surveys.yml b/zh/surveys.yml new file mode 100644 index 00000000000..8642847436a --- /dev/null +++ b/zh/surveys.yml @@ -0,0 +1,146 @@ +--- +locale: en-US +translations: + - + ########################################################################### + #General + ########################################################################### + key: general.no_preview_surveys + t: No surveys to preview + - + key: general.global_nav + t: Global + - + key: general.survey_status_preview + t: Preview + - + key: general.survey_status_open + t: Open + - + key: general.survey_status_closed + t: Closed + - + ########################################################################### + #Accounts + ########################################################################### + key: accounts.create_account + t: Create an 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.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 + ########################################################################### + key: general.faq + t: FAQ + - + key: faq.create_account + t: Why do I need to create an account? + - + key: faq.create_account.description + t: We ask you to create an account in order to avoid duplicate responses, save your data, and notify you when results are published. + - + key: faq.anonymous_survey + t: Can I take the survey anonymously? + - + key: faq.anonymous_survey.description + t: Yes, you can use a fake (something@example.com) or non-identifying email to take the survey as long as you save it for future access. + - + key: faq.questions_required + t: Is answering every question required? + - + key: faq.questions_required.description + t: No, every question of the survey is optional and can freely be skipped. + - + key: faq.data_published + t: Will my data be made public? + - + key: faq.data_published.description + t: Yes, all data will be released publicly, but only after being purged of any identifying information (emails, usernames, IDs, etc.). + - + key: faq.survey_design + t: How are the surveys designed? + - + key: faq.survey_design.description + t: Surveys are designed based on community feedback, as well as reviewed by experts. You can [learn more here](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb). + - + key: faq.results_released + t: When will the results be released? + - + key: faq.results_released.description + t: Results are generally released a few weeks after the survey closes. + - + key: faq.survey_deadline + t: When will the survey close? + - + key: faq.survey_deadline.description + t: This survey is scheduled to run until {date} + - + key: faq.team + t: Who runs these surveys? + - + key: faq.team.description + t: Surveys are run by [Devographics](http://devographics.com) together with a collective of contributors, translators, and volunteers. + - + ########################################################################### + #Form Controls + ########################################################################### + key: bracket.vs + t: VS + - + key: bracket.start_over + t: Start Over + - + key: bracket.winner + t: > + + Winner: + - + key: bracket.round + t: Round + - + key: bracket.empty_bracket + t: Pending result (complete the previous round first) + - + key: bracket.result + t: Result + - + key: bracket.cancel + t: Cancel + - + ########################################################################### + #Response + ########################################################################### + key: response.completion + t: '{completion}% completed' + - + key: response.details + t: Started on {startedAt}, {completion}% completed. + - + key: response.view_results + t: View Results diff --git a/zh/yaml-validation.yml b/zh/yaml-validation.yml new file mode 100644 index 00000000000..3b976ad39ae --- /dev/null +++ b/zh/yaml-validation.yml @@ -0,0 +1,37 @@ +--- +#This is a basic workflow to help you get started with Actions +name: CI +#Controls when the workflow will run +on: + #Triggers the workflow on push or pull request events but only for the main branch + push: + branches: + - main + pull_request: + branches: + - main + #Allows you to run this workflow manually from the Actions tab + workflow_dispatch: +#A workflow run is made up of one or more jobs that can run sequentially or in parallel +jobs: + #This workflow contains a single job called "validate-yaml" + validate-yaml: + #The type of runner that the job will run on + runs-on: ubuntu-latest + #Steps represent a sequence of tasks that will be executed as part of the job + steps: + - + uses: actions/checkout@v2 + - + name: YAML Lint + uses: ibiqlik/action-yamllint@v3.0.4 + with: + config_data: | + extends: default + rules: + line-length: disable + new-line-at-end-of-file: disable + trailing-spaces: disable + document-start: disable + empty-lines: disable + truthy: disable