From 93f72417430f75afdde0ecc91b397a4d4c7f8742 Mon Sep 17 00:00:00 2001 From: Lucas Ferreyra <55593999+lucferre@users.noreply.github.com> Date: Mon, 24 Feb 2020 10:02:49 +0100 Subject: [PATCH] Initial commit - es-419 language files --- src/translations/es-419.yml | 927 ++++++++++++++++++ .../es-419/conclusions/conclusion.md | 15 + .../animations-and-transforms.md | 9 + .../es-419/introductions/awardspage.md | 8 + .../es-419/introductions/css-frameworks.md | 11 + .../es-419/introductions/css-in-js.md | 11 + .../es-419/introductions/demographics.md | 13 + .../es-419/introductions/environments.md | 9 + .../es-419/introductions/features.md | 9 + .../es-419/introductions/interactions.md | 9 + .../es-419/introductions/introduction.md | 45 + .../es-419/introductions/layout.md | 9 + .../es-419/introductions/methodologies.md | 11 + .../es-419/introductions/opinions.md | 9 + .../es-419/introductions/other-features.md | 9 + .../es-419/introductions/other-tools.md | 7 + .../introductions/pre-post-processors.md | 11 + .../es-419/introductions/resourcespage.md | 10 + .../introductions/shapes-and-graphics.md | 9 + .../es-419/introductions/support.md | 11 + .../es-419/introductions/technologies.md | 11 + .../es-419/introductions/tshirt.md | 13 + .../es-419/introductions/typography.md | 9 + .../introductions/units-and-selectors.md | 9 + 24 files changed, 1194 insertions(+) create mode 100644 src/translations/es-419.yml create mode 100644 src/translations/es-419/conclusions/conclusion.md create mode 100644 src/translations/es-419/introductions/animations-and-transforms.md create mode 100644 src/translations/es-419/introductions/awardspage.md create mode 100644 src/translations/es-419/introductions/css-frameworks.md create mode 100644 src/translations/es-419/introductions/css-in-js.md create mode 100644 src/translations/es-419/introductions/demographics.md create mode 100644 src/translations/es-419/introductions/environments.md create mode 100644 src/translations/es-419/introductions/features.md create mode 100644 src/translations/es-419/introductions/interactions.md create mode 100644 src/translations/es-419/introductions/introduction.md create mode 100644 src/translations/es-419/introductions/layout.md create mode 100644 src/translations/es-419/introductions/methodologies.md create mode 100644 src/translations/es-419/introductions/opinions.md create mode 100644 src/translations/es-419/introductions/other-features.md create mode 100644 src/translations/es-419/introductions/other-tools.md create mode 100644 src/translations/es-419/introductions/pre-post-processors.md create mode 100644 src/translations/es-419/introductions/resourcespage.md create mode 100644 src/translations/es-419/introductions/shapes-and-graphics.md create mode 100644 src/translations/es-419/introductions/support.md create mode 100644 src/translations/es-419/introductions/technologies.md create mode 100644 src/translations/es-419/introductions/tshirt.md create mode 100644 src/translations/es-419/introductions/typography.md create mode 100644 src/translations/es-419/introductions/units-and-selectors.md diff --git a/src/translations/es-419.yml b/src/translations/es-419.yml new file mode 100644 index 0000000..56c204d --- /dev/null +++ b/src/translations/es-419.yml @@ -0,0 +1,927 @@ +locale: es-419 +translations: + + ########################################################################### + # Tshirt + ########################################################################### + + - 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: $${price} + shipping + + ########################################################################### + # Demographics + ########################################################################### + + # salary ranges + - key: salary.none.long + t: I work for free + - key: salary.none.short + t: work for free + - key: salary.none.shorter + t: '0' + - key: salary.0_10.long + t: $0k-$10k + - key: salary.0_10.short + t: $0k-$10k + - key: salary.0_10.shorter + t: 0~10k + - key: salary.10_30.long + t: $10k-$30k + - key: salary.10_30.short + t: $10k-$30k + - key: salary.10_30.shorter + t: 10~30k + - key: salary.30_50.long + t: $30k-$50k + - key: salary.30_50.short + t: $30k-$50k + - key: salary.30_50.shorter + t: 30~50k + - key: salary.50_100.long + t: $50k-$100k + - key: salary.50_100.short + t: $50k-$100k + - key: salary.50_100.shorter + t: 50~100k + - key: salary.100_200.long + t: $100k-$200k + - key: salary.100_200.short + t: $100k-$200k + - key: salary.100_200.shorter + t: 100~200k + - key: salary.200_more.long + t: more than $200k + - key: salary.200_more.short + t: $200k+ + - key: salary.200_more.shorter + t: '>200k' + - key: salary.axis_legend + t: Salary Range (USD) + + # years of experience + - key: years-of-experience.less_than_1.long + t: Less than one year + - key: years-of-experience.less_than_1.short + t: '<1 year' + - key: years-of-experience.less_than_1.shorter + t: '<1' + - key: years-of-experience.1_2.long + t: 1 to 2 years + - key: years-of-experience.1_2.short + t: 1~2 years + - key: years-of-experience.1_2.shorter + t: 1~2 + - key: years-of-experience.2_5.long + t: 2 to 5 years + - key: years-of-experience.2_5.short + t: 2~5 years + - key: years-of-experience.2_5.shorter + t: 2~5 + - key: years-of-experience.5_10.long + t: 5 to 10 years + - key: years-of-experience.5_10.short + t: 5~10 years + - key: years-of-experience.5_10.shorter + t: 5~10 + - key: years-of-experience.10_20.long + t: 10 to 20 years + - key: years-of-experience.10_20.short + t: 10~20 years + - key: years-of-experience.10_20.shorter + t: 10~20 + - key: years-of-experience.more_than_20.long + t: More than 20 years + - key: years-of-experience.more_than_20.short + t: '>20 years' + - key: years-of-experience.more_than_20.shorter + t: '>20' + - key: years-of-experience.axis_legend + t: Years of Experience + + # company size + - key: company-size.1.long + t: One employee + - key: company-size.1.short + t: one + - key: company-size.1_5.long + t: 1 to 5 employees + - key: company-size.1_5.short + t: 1~5 + - key: company-size.5_10.long + t: 5 to 10 employees + - key: company-size.5_10.short + t: 5~10 + - key: company-size.10_20.long + t: 10 to 20 employees + - key: company-size.10_20.short + t: 10~20 + - key: company-size.20_50.long + t: 20 to 50 employees + - key: company-size.20_50.short + t: 20~50 + - key: company-size.50_100.long + t: 50 to 100 employees + - key: company-size.50_100.short + t: 50~100 + - key: company-size.100_1000.long + t: 100 to 1000 employees + - key: company-size.100_1000.short + t: 100~1000 + - key: company-size.more_than_1000.long + t: More than 1000 employees + - key: company-size.more_than_1000.short + t: 1000+ + - key: company-size.axis_legend + t: Number of Employees + + # gender + - key: gender.female + t: Female + - key: gender.male + t: Male + - key: gender.non_binary + t: Non-Binary/Third Gender + - key: gender.prefer_not_to_say + t: Prefer not to say + + # sources + - key: sources.other_unknown + t: Other/Unknown + + # javascript proficiency + - key: block.title.javascript-proficiency + t: JavaScript Proficiency + - key: block.description.javascript-proficiency + t: How proficient are you at JavaScript development? + - key: javascript-proficiency.axis_legend + t: JavaScript Proficiency + - key: javascript-proficiency.none.short + t: None + - key: javascript-proficiency.none.long + t: I am not able to write any JavaScript + - key: javascript-proficiency.short_simple_javascript.short + t: Beginner + - key: javascript-proficiency.short_simple_javascript.long + t: I can write short, simple JavaScript or jQuery statements + - key: javascript-proficiency.existing_codebases_using_modern_frameworks.short + t: Intermediate + - key: javascript-proficiency.existing_codebases_using_modern_frameworks.long + t: I can work on existing front-end codebases using modern frameworks (React, Vue, etc.) + - key: javascript-proficiency.advanced_front_end_patterns.short + t: Advanced + - key: javascript-proficiency.advanced_front_end_patterns.long + t: Can handle advanced front-end patterns (state management, data loading, etc.) + - key: javascript-proficiency.entire_codebases_from_scratch.short + t: Expert + - key: javascript-proficiency.entire_codebases_from_scratch.long + t: Can architecture entire front-end codebases from scratch + + # backend proficiency + - key: block.title.backend-proficiency + t: Back-end Proficiency + - key: block.description.backend-proficiency + t: How proficient are you at back-end development? + - key: backend-proficiency.axis_legend + t: Back-End Proficiency + - key: backend-proficiency.none.short + t: None + - key: backend-proficiency.none.long + t: I am not able to handle any back-end work + - key: backend-proficiency.able_to_setup_cms_or_site_generator.short + t: Beginner + - key: backend-proficiency.able_to_setup_cms_or_site_generator.long + t: I can set up all-in-one CMSs (WordPress, etc.) or static site generators (Jekyll, etc.) + - key: backend-proficiency.able_to_use_existing_frameworks.short + t: Intermediate + - key: backend-proficiency.able_to_use_existing_frameworks.long + t: I can develop apps using pre-existing frameworks (Rails, Laravel, etc.) + - key: backend-proficiency.able_to_setup_from_scratch.short + t: Advanced + - key: backend-proficiency.able_to_setup_from_scratch.long + t: I can set up an entire back-end from scratch (Go, Node, etc.) + + # job title + - key: job-title.front_end_dev.short + t: Front-end Developer + - key: job-title.front_end_dev.long + t: Front-end Developer/Engineer + - key: job-title.full_stack_dev.short + t: Full-stack Developer + - key: job-title.full_stack_dev.long + t: Full-stack Developer/Engineer + - key: job-title.web_designer.short + t: Web Designer + - key: job-title.web_designer.long + t: Web Designer + - key: job-title.ux_designer.short + t: UX Designer + - key: job-title.ux_designer.long + t: UX Designer + - key: job-title.ui_designer.short + t: UI Designer + - key: job-title.ui_designer.long + t: UI Designer + - key: job-title.back_end_dev.short + t: Back-end Developer + - key: job-title.back_end_dev.long + t: Back-end Developer/Engineer + + # other + - key: block.title.participation-by-country + t: Participation by Country + - key: block.description.participation-by-country + t: Which proportion of survey respondents came from each country. + - key: block.title.salary + t: Salary + - key: block.description.salary + t: Yearly salary in USD. + # - key: block.title.salary-per-country + # t: Average Salary per Country + # - key: block.description.salary-per-country + # t: Average Salary per Country. + - key: block.title.years-of-experience + t: Years of Experience + - key: block.description.years-of-experience + t: How long you've been writing CSS. + - key: block.title.company-size + t: Company Size + # - key: block.description.company-size + # t: Company size breakdown. + - key: block.title.gender + t: Gender + - key: block.description.gender + t: Respondents gender. + - key: block.title.source + t: Source + - key: block.description.source + t: > + How participants found out about the survey (aggregation of self-reported answers and + referrer tracking). + + + **State of JS** indicates subscribers from our previous JavaScript surveys, + **Announcement** corresponds to our official announcement post on [FreeCodeCamp](https://www.freecodecamp.org), + and **Word of Mouth** regroups sources such as Slack, friends, co-workers, etc. + + - key: block.description.gender + t: Gender breakdown. + - key: block.title.job-title + t: Job Title + - key: block.description.job-title + t: How do you introduce yourself at parties? + + ########################################################################### + # Features + ########################################################################### + + - key: feature.learn_more + t: Learn More + - key: feature.mdn_link + t: MDN + - key: feature.caniuse_link + t: CanIUse + - key: feature.specification_link + t: W3C Specification + - key: features.usage.used_it + t: Have used it + - key: features.usage.know_it + t: Know about it + - key: features.usage.ratio + t: Usage Ratio + - key: features.usage.know_not_used + t: Know what it is, but haven't used it + - key: features.usage.never_heard_not_sure + t: Never heard of it/Not sure what it is + + - key: block.title.features-overview + t: Usage Overview + - key: block.description.features-overview + 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. + + - key: block.title.features-section-overview + t: Usage Overview + - key: block.description.features-section-overview + t: > + 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. + + - key: block.description.css-exclusions + t: > + An exclusion element is a block-level element which is not a float, and generates an exclusion box. + An exclusion element establishes a new block formatting context (via Chen Hui Jing). + + - key: block.title.features_experience_heatmap + t: Usage by Years Of Experience + - key: block.description.features_experience_heatmap + t: | + The “overall” column shows overall usage for each feature (respondents who selected “have used it”), + while the following columns show the usage ratio for each “years of experience” bracket. + + A brighter pink background indicates + a higher-than-overall-average ratio for a given bracket. + + + ########################################################################### + # Units & Selectors + ########################################################################### + + - key: block.title.units + t: Units + - key: block.title.pseudo-elements + t: Pseudo-Elements + - key: block.title.combinators + t: Combinators + - key: block.title.tree-document-structure + t: Tree & Document Structure + - key: block.title.attributes + t: Attributes + - key: block.title.links-urls + t: Link & URLs + - key: block.title.interaction + t: Interaction + - key: block.title.form-controls + t: Form Controls + + - key: block.description.units + t: Which CSS units do developers use? + - key: block.description.pseudo-elements + t: Which pseudo CSS selectors do developers use? + - key: block.description.combinators + t: Which combinations of CSS selectors do developers use? + - key: block.description.tree-document-structure + t: Which structure related CSS selectors do developers use? + - key: block.description.attributes + t: Which attributes CSS selectors do developers use? + - key: block.description.links-urls + t: Which links & URLs related CSS selectors do developers use? + - key: block.description.interaction + t: Which interaction CSS selectors do developers use? + - key: block.description.form-controls + t: Which form related CSS selectors do developers use? + + ########################################################################### + # Tools & Methodologies + ########################################################################### + + # general + - key: block.title.tools-overview + t: Sentiment Overview + - key: block.description.tools-overview + t: > + Overview of opinions on the tools and methodologies surveyed. Green segments represent positive opinions, + while pink segments correspond to negative sentiment. + + + The diameter of each circle corresponds to the aggregate sum of respondents for all of these four options + (excluding respondents unaware of the technology). + + + Hover on each node to view detailed data along with an overlay representing the total number of survey respondents. + - key: block.tool.links + t: Links + - key: block.tool.github_link + t: GitHub + - key: block.tool.homepage_link + t: Homepage + - key: block.tool.npm_link + t: NPM + + - key: block.title.other-methodologies + t: Other Methodologies + + - key: block.title.tools_experience_heatmap + t: Usage by Years Of Experience + - key: block.description.tools_experience_heatmap + t: | + + The “overall” column shows overall usage for each technology (respondents who selected “would use again” or “would not use again”), + while the following columns show the usage ratio for each “years of experience” bracket. + + A brighter pink background indicates + a higher-than-overall-average ratio for a given bracket. + + - key: block.title.tools_salary_heatmap + t: Usage by Salary Range + - key: block.description.tools_salary_heatmap + t: | + The “overall” column shows overall usage for each technology (respondents who selected “would use again” or “would not use again”), + while the following columns show the usage ratio for each “yearly salary” bracket. + + A brighter pink background indicates + a higher-than-overall-average ratio for a given bracket. + + # rankings/bump chart + - key: block.title.tools-section-overview + t: Rankings + - key: block.description.tools-section-overview + t: > + Awareness, interest, and satisfaction ratio rankings. + Note that these three ratios all correspond to the same point in time. + - key: opinions.legends.awareness_ratio + t: Awareness + - key: opinions.legends.interest_ratio + t: Interest + - key: opinions.legends.satisfaction_ratio + t: Satisfaction + + # quadrant/scatterplot chart + - key: block.title.tools-scatterplot + t: Satisfaction vs Usage + - key: block.description.tools-scatterplot + t: > + This chart shows each technology’s **satisfaction 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. + + - key: quadrants.assess + t: Assess + - key: quadrants.adopt + t: Adopt + - key: quadrants.avoid + t: Avoid + - key: quadrants.analyze + t: Analyze + + # opinions + - key: opinions.legends.never_heard + t: I've never heard of it + - key: opinions.legends_short.never_heard + t: Never heard of it + - key: opinions.legends_extrashort.never_heard + t: Never heard + + - key: opinions.legends.not_interested + t: I've HEARD of it, and am NOT interested + - key: opinions.legends_short.not_interested + t: Heard of it, not interested + - key: opinions.legends_extrashort.not_interested + t: Not interested + + - key: opinions.legends.interested + t: I've HEARD of it, and WOULD like to learn it + - key: opinions.legends_short.interested + t: Heard of it, would like to learn + - key: opinions.legends_extrashort.interested + t: Interested + + - key: opinions.legends.would_use + t: I've USED it before, and WOULD use it again + - key: opinions.legends_short.would_use + t: Used it, would use again + - key: opinions.legends_extrashort.would_use + t: Would use again + + - key: opinions.legends.would_not_use + t: I've USED it before, and would NOT use it again + - key: opinions.legends_short.would_not_use + t: Used it, would not use again + - key: opinions.legends_extrashort.would_not_use + t: Would not use + + - key: opinions.legends.total_respondents + t: Total Respondents + - key: opinions.legends_short.total_respondents + t: Total Respondents + - key: opinions.legends_extrashort.total_respondents + t: Total Respondents + + ########################################################################### + # Other Tools + ########################################################################### + + - key: block.title.text-editors + t: Text Editors + - key: block.description.text-editors + t: Which text editor(s) do you regularly use? + - key: block.title.text-editors-others + t: Other Text Editors + - key: block.description.text-editors-others + t: Other answers (freeform field). + - key: block.title.browsers + t: Browsers + - key: block.description.browsers + t: Which browser(s) do you primarily work in during initial development? + - key: block.title.browsers-others + t: Other Browsers + - key: block.description.browsers-others + t: Other answers (freeform field). + + ########################################################################### + # Environments + ########################################################################### + + # general + - key: block.title.form-factors + t: Form Factors + - key: block.description.form-factors + t: Which form factors do you test on? + + - key: block.title.env-browsers + t: Browsers + - key: block.description.env-browsers + t: Which browsers do you test in? + + # print styles + - key: block.title.print-styles + t: CSS for Print + - key: block.description.print-styles + t: Do you write print styles? + - key: print-styles.axis_legend + t: Periodicity + - key: print-styles.never.short + t: Never + - key: print-styles.never.long + t: I (almost) never write print styles + - key: print-styles.occasionally.short + t: Occasionally + - key: print-styles.occasionally.long + t: I occasionally write print styles + - key: print-styles.often.short + t: Often + - key: print-styles.often.long + t: I write print styles as part of most projects + - key: print-styles.mainly.short + t: Mainly + - key: print-styles.mainly.long + t: I focus mainly on CSS for print + + # email styles + - key: block.title.email-styles + t: CSS for Email Clients + - key: block.description.email-styles + t: Do you write CSS for email clients? + - key: email-styles.axis_legend + t: Periodicity + - key: email-styles.never.short + t: Never + - key: email-styles.never.long + t: I (almost) never write CSS for email clients + - key: email-styles.occasionally.short + t: Occasionally + - key: email-styles.occasionally.long + t: I occasionally write CSS for email clients + - key: email-styles.often.short + t: Often + - key: email-styles.often.long + t: I write CSS for email clients as part of most projects + - key: email-styles.mainly.short + t: Mainly + - key: email-styles.mainly.long + t: I focus mainly on CSS for email clients + + ########################################################################### + # Resources + ########################################################################### + + # blogs & magazines + - key: block.title.blogs-magazines + t: Blogs & Magazines + - key: block.description.blogs-magazines + t: Which CSS-related blogs/magazines/etc. do you read? + - key: block.title.blogs-magazines-others + t: Other Blogs & Magazines + - key: block.description.blogs-magazines-others + t: Other answers (freeform field). + + # sites & courses + - key: block.title.sites-courses + t: Sites & Courses + - key: block.description.sites-courses + t: Which CSS-related sites/courses/etc. do you consult? + - key: block.title.sites-courses-others + t: Other Sites & Courses + - key: block.description.sites-courses-others + t: Other answers (freeform field). + + # podcasts + - key: block.title.podcasts + t: Podcasts + - key: block.description.podcasts + t: Which CSS or programming-related podcasts do you listen to? + - key: block.title.podcasts-others + t: Other Podcasts + - key: block.description.podcasts-others + t: Other answers (freeform field). + + ########################################################################### + # Opinions + ########################################################################### + + - key: block.title.easy-to-learn + t: Learning Curve + - key: block.description.easy-to-learn + t: “CSS is easy to learn” + + - key: block.title.evolving-too-slowly + t: Rate of Change + - key: block.description.evolving-too-slowly + t: “CSS is evolving too slowly” + + - key: block.title.utility-classes + t: Non-Semantic Classes + - key: block.description.utility-classes + t: “Non-semantic classes such as `.center`, `.large-text`, etc. should be avoided.” + + - key: block.title.selector-nesting + t: Selector Nesting + - key: block.description.selector-nesting + t: “Selector nesting such as `.foo .bar ul li {...}` should be avoided.” + + - key: block.title.programming-language + t: Programming Language + - key: block.description.programming-language + t: “CSS is a programming language” + + - key: block.title.enjoy-css + t: Enjoyment + - key: block.description.enjoy-css + t: “I enjoy writing CSS” + + # ? + # CSS is moving in the right direction + + - key: block.title.missing-features + t: Missing Features + - key: block.description.missing-features + t: What do developers feel is currently missing from CSS? + + ########################################################################### + # Awards + ########################################################################### + + - key: awards.runner_ups + t: Runner Ups + - key: award.runner_up + t: '${item.name}: ${item.value}' + + # feature_adoption + - key: award.feature-adoption.title + t: Most Adopted Feature + - key: award.feature-adoption.description + t: | + Awarded to the most adopted CSS feature. + - key: award.feature-adoption.comment + t: | + With **${items[0].value}** users ${items[0].name} + is the most used CSS feature this year. + + # tool_satisfaction + - key: award.tool-satisfaction.title + t: Highest Satisfaction + - key: award.tool-satisfaction.description + t: | + Awarded to the technology with the highest + percentage of satisfied users. + - key: award.tool-satisfaction.comment + t: | + With **${items[0].value}%** of users willing to use it again, + ${items[0].name} proves it’s not kidding around. + + # tool_interest + - key: award.tool-interest.title + t: Highest Interest + - key: award.tool-interest.description + t: | + Awarded to the technology developers + are most interested in learning. + - key: award.tool-interest.comment + t: | + **${items[0].value}%** of developers who have heard + about ${items[0].name} want to learn it. + That’s some serious interest! + + # tool_usage + - key: award.tool-usage.title + t: Most Used Technology + - key: award.tool-usage.description + t: | + Awarded to technology with the largest user base. + - key: award.tool-usage.comment + t: | + With **${items[0].value}** users ${items[0].name} + is the most used technology this year. + + + # resource_usage + - key: award.resource-usage.title + t: Most Used Resource + - key: award.resource-usage.description + t: | + Awarded to the resource with the largest user base. + - key: award.resource-usage.comment + t: | + With **${items[0].value}** users ${items[0].name} + is the most used resource this year. + + # tool_mention + - key: award.tool-mention.title + t: Most Mentioned + - key: award.tool-mention.description + t: | + Awarded to the library mentioned + the most in the “other libraries” answer. + - key: award.tool-mention.comment + t: | + ${items[0].name} collected **${items[0].value}** mentions, + making it the most submitted freeform answer by far. + + ########################################################################### + # Generic + ########################################################################### + + # pages + - key: page.introduction + t: Introduction + - key: page.tshirt + t: T-shirt + - key: page.demographics + t: Demographics + - key: page.features + t: Features + - key: page.layout + t: Layout + - key: page.shapes-and-graphics + t: Shapes & Graphics + - key: page.interactions + t: Interactions + - key: page.typography + t: Typography + - key: page.animations-and-transforms + t: Animations & Transforms + - key: page.other-features + t: Other Features + - key: page.units-and-selectors + t: Units & Selectors + - key: page.technologies + t: Technologies + - key: page.pre-post-processors + t: Pre & Post Processors + - key: page.css-frameworks + t: CSS Frameworks + - key: page.methodologies + t: Methodologies + - key: page.css-in-js + t: CSS-in-JS + - key: page.other-tools + t: Other Tools + - key: page.environments + t: Environments + - key: page.resources + t: Resources + - key: page.opinions + t: Opinions + - key: page.awards + t: Awards + - key: page.conclusion + t: Conclusion + - key: page.support + t: Support Us + + # sharing + - key: share.share + t: Share + - key: share.site.title + t: Discover the StateOf CSS 2019 results + - key: share.site.twitter_text + t: 'Discover the State Of CSS 2019 results ${link} #StateOfCSS' + - key: share.site.subject + t: State Of CSS Survey Results + - key: share.site.body + t: 'Here are some interesting CSS survey results: ${link}' + - key: share.block.twitter_text + t: '#StateOfJS 2019: ${title} ${link}' + - key: share.block.subject + t: State Of CSS Survey Results + - key: share.block.body + t: 'Here are some interesting CSS 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 + + # opinion scale + - key: opinion_scale.0.long + t: Strongly Disagree + - key: opinion_scale.1.long + t: Disagree + - key: opinion_scale.2.long + t: Neutral + - key: opinion_scale.3.long + t: Agree + - key: opinion_scale.4.long + t: Strongly Agree + + # general + - key: general.title + t: State of CSS 2019 + - key: general.description + t: Discover the most popular CSS features & technologies of the year. + - key: general.stay_tuned + t: Stay Tuned + - key: general.leave_your_email + 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: general.your_email + t: Your Email + - key: general.notify_me + t: Notify Me + - key: general.help_us_translate + t: Help translate the survey → + - key: general.not_found + t: > + + ## Error 404 + + Sorry, we couldn't find this page. Please [leave an issue](https://github.com/StateOfJS/state-of-css-2019/issues) if you think something might be broken. + - key: general.back_to_intro + t: Back to introduction + - key: general.close_nav + t: Close navigation menu + - key: general.completion_percentage + t: "Completion Percentage:" + - key: general.previous + t: "Previous:" + - key: general.next + t: "Next:" + - key: general.start + t: Start + + # partners + - key: partners.our_partners + t: Our Partners + - key: partners.become_partner + t: Help sponsor the survey + - key: partners.thanks + t: Thanks to our partners for supporting us! + - key: partners.learn_more + t: Learn more. + - key: block.title.recommended_resources + t: Recommended Resources + + # charts + - key: block.title.usage-ratio + t: Usage Ratio Ranking + - key: block.description.usage-ratio + t: Ranking usage ratios among users who are aware of a technology. + - key: users_percentage + t: Percentage of Users + - key: users_count + t: User Count + - key: satisfaction_percentage + t: Satisfaction Percentage + - key: chart_mode + t: mode + - key: chart_mode.absolute + t: absolute + - key: chart_mode.relative + t: relative + - key: chart_units + t: Units + - key: chart_units.percentage + t: Percents + - key: chart_units.count + t: Count + - key: users + t: users + - key: percent_satisfaction + t: '% satisfaction' + - key: heatmap.average + t: overall + - key: difference_from_average_usage + t: 'Difference from overall usage:' diff --git a/src/translations/es-419/conclusions/conclusion.md b/src/translations/es-419/conclusions/conclusion.md new file mode 100644 index 0000000..0ca32fb --- /dev/null +++ b/src/translations/es-419/conclusions/conclusion.md @@ -0,0 +1,15 @@ +--- +type: conclusion +page: conclusion +locale: es-419 +--- + +If we had to pick one theme for this year's survey, it would be new beginnings. A new survey in a brand new domain for us; new features for CSS; and a newfound respect for CSS's ever-improving capabilities from the community. + +To be fair, CSS has seen its share of doubters as well. The growing importance given to JavaScript over the past few years can sometimes leave some feeling like HTML & CSS are becoming second-tier players, and like their own skills in these fields aren't as valued anymore. + +But the data tells another story. While JavaScript isn't going anywhere, it also seems certain that CSS is not going to be replaced anytime soon. And the more powerful CSS becomes, the more valuable mastering it will be. + +And make no mistake, CSS is definitely evolving. Most of the features covered in the survey are far from mainstream yet, and upcoming features such as subgrids and aspect ratios are also sure to keep us busy. All this to say that we can't wait for the State of CSS 2020! + +– Sacha and Raphaël \ No newline at end of file diff --git a/src/translations/es-419/introductions/animations-and-transforms.md b/src/translations/es-419/introductions/animations-and-transforms.md new file mode 100644 index 0000000..0435fa4 --- /dev/null +++ b/src/translations/es-419/introductions/animations-and-transforms.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: animations-and-transforms +locale: es-419 +--- + +Almost all our respondents have used animations, transitions, and transforms. Which should come at no surprise, as just ten minutes browsing any modern website will show you that the era of static, motionless pages is well and truly over. + +From simple hover effects to more complex typographical or graphical animations, CSS can probably handle whatever you can throw at it! \ No newline at end of file diff --git a/src/translations/es-419/introductions/awardspage.md b/src/translations/es-419/introductions/awardspage.md new file mode 100644 index 0000000..3ed100e --- /dev/null +++ b/src/translations/es-419/introductions/awardspage.md @@ -0,0 +1,8 @@ +--- +type: introduction +page: awardspage +locale: es-419 +# note: naming this file `awards.md` creates conflict with existing `awards.yml` +--- + +Each year, we look across our entire dataset for the projects that really stand out. Before you click and reveal the results, can you try and guess each winner? \ No newline at end of file diff --git a/src/translations/es-419/introductions/css-frameworks.md b/src/translations/es-419/introductions/css-frameworks.md new file mode 100644 index 0000000..0e1b7c3 --- /dev/null +++ b/src/translations/es-419/introductions/css-frameworks.md @@ -0,0 +1,11 @@ +--- +type: introduction +page: css-frameworks +locale: es-419 +--- + +For years the debate has raged on: should you use UI toolkits like Bootstrap, or is that “cheating”? Will all websites end up looking the same? And will designers end up being useless? + +In 2019, it's safe to say the debate has been settled, and the frameworks have won. Bootstrap has kept up with the times and generated a huge ecosystem of various themes and plugins, while Google's Material Design has helped popularized its own specific aesthetic. + +And while the utility-class-focused approach of new frameworks like Tailwind CSS make you question everything you know about writing “proper” semantic CSS, its 81% satisfaction ratio means that it might be time to reconsider our old preconceived notions… \ No newline at end of file diff --git a/src/translations/es-419/introductions/css-in-js.md b/src/translations/es-419/introductions/css-in-js.md new file mode 100644 index 0000000..eb2af48 --- /dev/null +++ b/src/translations/es-419/introductions/css-in-js.md @@ -0,0 +1,11 @@ +--- +type: introduction +page: css-in-js +locale: es-419 +--- + +CSS-in-JS has been one of the biggest developments of the past few years in the CSS world. Just like preprocessors bypassed CSS to introduce their own set of new features over a decade ago, CSS-in-JS libraries piggyback on JavaScript's power to make their own path without waiting for CSS to catch up. + +But while some libraries like Styled Components and Emotion have established themselves as solid options, the overall ecosystem is still very fragmented and in constant movement. So it remains to be seen what place CSS-in-JS will occupy in the overall ecosystem in the long run. + +One thing is sure though: more competition is always good, and if CSS can steal some of its JavaScript cousin's freshest ideas then we'll all be better off for it! \ No newline at end of file diff --git a/src/translations/es-419/introductions/demographics.md b/src/translations/es-419/introductions/demographics.md new file mode 100644 index 0000000..8797cfa --- /dev/null +++ b/src/translations/es-419/introductions/demographics.md @@ -0,0 +1,13 @@ +--- +type: introduction +section: demographics +locale: es-419 +--- + +This first ever State of CSS survey reached 11,307 people in 135 different countries. This obviously only represents a tiny part of the overall CSS developer community, but for a first edition we think it's pretty encouraging. + +And it's fair to assume our survey audience leans a bit towards early adopters and the more cutting-edge part of the community, since they are the ones most likely to hear about a survey in the first place. But we like to think this also means our data is a good preview of where the mainstream side of the ecosystem will be a few years from now. + +It's also worth mentioning that since a sizeable share of survey respondents learned about it through having previously filled out the [State of JS](https://stateofjs.com) survey, our data may also lean toward the “[back of the front-end](http://bradfrost.com/blog/link/how-to-think-like-a-front-end-developer-with-brad-frost/)”, in other words the more JavaScript-oriented part of the front-end world. + +All that being said, we still think there's a lot of very valuable insights in here, and we're very excited to finally be able to share them all with you! diff --git a/src/translations/es-419/introductions/environments.md b/src/translations/es-419/introductions/environments.md new file mode 100644 index 0000000..ddf3ecc --- /dev/null +++ b/src/translations/es-419/introductions/environments.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: environments +locale: es-419 +--- + +One of the things that makes CSS stand out is just how versatile it can be. Not only can it handle multiple browsers, various devices, and different form factors; but it can even control what a printed page looks like! + +Maybe in a distant, dystopian future our email clients will execute JavaScript code – but at least for now, CSS remains the king of multitasking. \ No newline at end of file diff --git a/src/translations/es-419/introductions/features.md b/src/translations/es-419/introductions/features.md new file mode 100644 index 0000000..063e1fa --- /dev/null +++ b/src/translations/es-419/introductions/features.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: features +locale: es-419 +--- + +The story of CSS over the past couple years is one of tremendous flexibility and adaptability. CSS may not be perfect, but it's still managed to negotiate a smooth transition to a multitude of new devices, contexts, interaction modes, and accessibility requirements. + +With features like Grid, we finally have the tools needed to specify complex layouts without requiring hacks and workarounds; while blend modes, masks, and shapes (among others) let us implement designs that are richer and more creative than ever. \ No newline at end of file diff --git a/src/translations/es-419/introductions/interactions.md b/src/translations/es-419/introductions/interactions.md new file mode 100644 index 0000000..8125277 --- /dev/null +++ b/src/translations/es-419/introductions/interactions.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: interactions +locale: es-419 +--- + +JavaScript is a handy instrument, but writing hundreds of lines of code just to emulate something that should be handled by the browser can sometimes feel like trying to swat flies with a sledgehammer. + +Thanfully CSS is catching up, and properties like CSS Scroll Snap give you more control over the browser's behavior, without having to write a single line of JavaScript. \ No newline at end of file diff --git a/src/translations/es-419/introductions/introduction.md b/src/translations/es-419/introductions/introduction.md new file mode 100644 index 0000000..a3872fd --- /dev/null +++ b/src/translations/es-419/introductions/introduction.md @@ -0,0 +1,45 @@ +--- +type: introduction +page: introduction +locale: es-419 +--- + +In the web development family, JavaScript has developed a bit of a reputation as the angry, rebellious teenager going through a new phase every year and telling you you're just too old to understand. CSS on the other hand has always been the studious, well-behaved kid who always stays polite and never makes a rash decision. + +But don't take things for granted: despite being over 20 years old, there's signs that CSS might be going through the same tumultuous teenage years that JavaScript just went through. Flexbox! Grid! CSS-in-JS! In 2019, CSS is finally dyeing its hair pink and getting a tattoo just like it's always secretly wanted. + +Parenting books won't help much with this one, but that's where we come in: we've surveyed over 10,000 developers in this first ever State of CSS survey. So join us to find out which CSS features are used the most, which tools are gaining adoption, and much more. + +### Team + +The State of CSS Survey is created and maintained by: + +- [Sacha Greif](https://twitter.com/sachagreif) (me!): Design, writing, coding +- [Raphaël Benitte](https://twitter.com/benitteraphael): Data analysis, data visualizations + +Be sure to check out my React/GraphQL JavaScript framework, [Vulcan.js](http://vulcanjs.org), as well as Raphaël's React data visualization library [nivo](https://nivo.rocks). + +### Download Our Data (coming soon) + +You can [download the raw JSON data for this survey](https://www.kaggle.com/sachag/state-of-css-2019). Let us know if you end up making your own data visualizations! + +### Completion Percentages + +Because all survey questions could be skipped, some questions ended up with fewer answers than others. So we've added a small pie chart indicator to each question to let you know which proportion of total respondents answered it. + +### Other Links + +- [State of CSS Homepage](https://stateofcss.com) +- [State of JS](https://stateofjs.com) + +### Thanks + +Special thanks to [Florian Rivoal](https://twitter.com/frivoal) for his huge help coming up with survey questions, as well as [David Luhr](https://luhr.co/) for his help with accessibility, and everybody else who took part in this process on GitHub. + +### Credits & Stuff + +The site is set in IBM Plex Mono. Questions? Feedback? [Get in touch!](mailto:hello@stateofcss.com) + +And now, let's see what CSS has been up to this year! + +– Sacha and Raphaël \ No newline at end of file diff --git a/src/translations/es-419/introductions/layout.md b/src/translations/es-419/introductions/layout.md new file mode 100644 index 0000000..8b1d9ed --- /dev/null +++ b/src/translations/es-419/introductions/layout.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: layout +locale: es-419 +--- + +Layout tools are one of the areas that have seen the most changes in recent years. First Flexbox came onto the scene, and then CSS Grid emerged as the most polyvalent and expressive way of handling CSS layouts. + +It may take a little longer to master, which explains why a lot of users haven't actually used it, but it's certainly worth the effort! \ No newline at end of file diff --git a/src/translations/es-419/introductions/methodologies.md b/src/translations/es-419/introductions/methodologies.md new file mode 100644 index 0000000..ef3de4d --- /dev/null +++ b/src/translations/es-419/introductions/methodologies.md @@ -0,0 +1,11 @@ +--- +type: introduction +page: methodologies +locale: es-419 +--- + +CSS stands out among programming languages (if it even is one… but that's a whole other debate!) as one of the few that has given birth to methodologies that aim to codify the “right” way to write it. + +While BEM is ahead of the pack here, Atomic CSS is also starting to gain ground with its completely new utility-class-driven philosophy. + +In the end, we might never find the one true way to write CSS, but that's not going to stop us from looking! \ No newline at end of file diff --git a/src/translations/es-419/introductions/opinions.md b/src/translations/es-419/introductions/opinions.md new file mode 100644 index 0000000..645d1c6 --- /dev/null +++ b/src/translations/es-419/introductions/opinions.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: opinions +locale: es-419 +--- + +Sometimes the best way to take the pulse of a community is to just go ahead and ask. From your opinion about CSS's rate of change, to more thorny questions like whether CSS should be considered a programming language, you finally had a chance to tell us exactly what's on your mind! + +For each of the following statements, we asked you how much you agreed on a 5-point scale. \ No newline at end of file diff --git a/src/translations/es-419/introductions/other-features.md b/src/translations/es-419/introductions/other-features.md new file mode 100644 index 0000000..f8ce15f --- /dev/null +++ b/src/translations/es-419/introductions/other-features.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: other-features +locale: es-419 +--- + +At the end of the day, the bulk of CSS is made up not of sexy, fancy features like Grid or animations; but of small, often niche properties that may at first seem useless, but then end up one day saving you dozens of hours of work. + +CSS variables and support queries fit in that category: they'll take a little while to grow on you, but once you grasp their full potential you'll wonder how you ever managed without them. \ No newline at end of file diff --git a/src/translations/es-419/introductions/other-tools.md b/src/translations/es-419/introductions/other-tools.md new file mode 100644 index 0000000..535fd21 --- /dev/null +++ b/src/translations/es-419/introductions/other-tools.md @@ -0,0 +1,7 @@ +--- +type: introduction +page: other-tools +locale: es-419 +--- + +You always need a text editor to code, but the process of writing CSS also relies on browsers and devtools to a greater extent than probably any other language. \ No newline at end of file diff --git a/src/translations/es-419/introductions/pre-post-processors.md b/src/translations/es-419/introductions/pre-post-processors.md new file mode 100644 index 0000000..bf8ec63 --- /dev/null +++ b/src/translations/es-419/introductions/pre-post-processors.md @@ -0,0 +1,11 @@ +--- +type: introduction +page: pre-post-processors +locale: es-419 +--- + +Pre-processors like Sass and Less were the vanguard of “CSS 2.0”. At a time where the language itself could seem pretty stagnant, they introduced new features like variables and nesting by introducing a compile step to the mix. + +More than a decade later, CSS itself is catching up but the pre-processors are holding strong, with Sass being a mainstay in any front-end stack (although CSS-in-JS is looking to change that – but more on this later). + +And on the “post-processor” side, PostCSS has managed to carve out a niche of its own by being a complementary tool that makes your CSS workflow even better. \ No newline at end of file diff --git a/src/translations/es-419/introductions/resourcespage.md b/src/translations/es-419/introductions/resourcespage.md new file mode 100644 index 0000000..f22cd8a --- /dev/null +++ b/src/translations/es-419/introductions/resourcespage.md @@ -0,0 +1,10 @@ +--- +type: introduction +page: resourcespage +locale: es-419 +# note: naming this file `resources.md` creates conflict with existing `resources.yml` +--- + +There's only so much you can figure out by yourself. At some point you need to put down the keyboard and take a moment to listen to your wise elders – or maybe just ask Google. + +Whatever the case may be, we wanted to know which blogs, magazines, podcasts, and sites you relied on. \ No newline at end of file diff --git a/src/translations/es-419/introductions/shapes-and-graphics.md b/src/translations/es-419/introductions/shapes-and-graphics.md new file mode 100644 index 0000000..c0f23c9 --- /dev/null +++ b/src/translations/es-419/introductions/shapes-and-graphics.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: shapes-and-graphics +locale: es-419 +--- + +For the longest time, creating advanced graphic effects on the web has either required a lot of upfront work in graphics editor apps, or else just plain not been possible. + +But now, with wider support for masking, blend modes, filters, and more, effects that previously seemed impossible are just a couple lines of code away. Best of all: because they're now achievable through pure CSS, you don't have to give up on accessibility and adaptability anymore. \ No newline at end of file diff --git a/src/translations/es-419/introductions/support.md b/src/translations/es-419/introductions/support.md new file mode 100644 index 0000000..a03a680 --- /dev/null +++ b/src/translations/es-419/introductions/support.md @@ -0,0 +1,11 @@ +--- +type: introduction +page: support +locale: es-419 +--- +The State of CSS survey is a volunteer 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! diff --git a/src/translations/es-419/introductions/technologies.md b/src/translations/es-419/introductions/technologies.md new file mode 100644 index 0000000..ccf3821 --- /dev/null +++ b/src/translations/es-419/introductions/technologies.md @@ -0,0 +1,11 @@ +--- +type: introduction +page: technologies +locale: es-419 +--- + +For a long time, writing CSS was straightforward enough: add a `.css` extension to your file, open up a text editor, and start typing. + +But over the years, CSS has developed its own ecosystem of technologies, from preprocessors like Sass and Less to methodologies like BEM and Atomic CSS, to more recent developments like CSS-in-JS. + +These days, front-end mastery involves not only knowing how to write good CSS, but also which of these technologies to use, and when. \ No newline at end of file diff --git a/src/translations/es-419/introductions/tshirt.md b/src/translations/es-419/introductions/tshirt.md new file mode 100644 index 0000000..83fa625 --- /dev/null +++ b/src/translations/es-419/introductions/tshirt.md @@ -0,0 +1,13 @@ +--- +type: introduction +page: tshirt +locale: es-419 +--- + +## Support the survey and look good in the process! + +A quick announcement before the survey results. This year we're trying something new to finance our efforts: we're releasing 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! diff --git a/src/translations/es-419/introductions/typography.md b/src/translations/es-419/introductions/typography.md new file mode 100644 index 0000000..f2b60ec --- /dev/null +++ b/src/translations/es-419/introductions/typography.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: typography +locale: es-419 +--- + +Typography is probably the most important building block of the web, and it's great to see CSS is still improving its already-good support for typograhical features. + +Variable fonts are the hot new thing here, and while we're still waiting for true responsive type, the constant progress on this front is definitely worth keeping an eye on. \ No newline at end of file diff --git a/src/translations/es-419/introductions/units-and-selectors.md b/src/translations/es-419/introductions/units-and-selectors.md new file mode 100644 index 0000000..2481123 --- /dev/null +++ b/src/translations/es-419/introductions/units-and-selectors.md @@ -0,0 +1,9 @@ +--- +type: introduction +page: units-and-selectors +locale: es-419 +--- + +One of the reasons CSS is so tough to master is that even apparently small decisions can sometimes have big consequences. Should you size your fonts in ems or pixels? Which selector should you use? Is there a way to avoid having to use JavaScript to accomplish what you want? + +Having a good grasp of units and selectors makes all these decisions, if not simple, at least a little easier. \ No newline at end of file