From c99a1a887336a5b09ed9e68dbae4b6393fe428d8 Mon Sep 17 00:00:00 2001 From: alinkedd Date: Thu, 15 Aug 2024 21:49:30 +0200 Subject: [PATCH 1/3] Add original css2024 file --- css2024.yml | 580 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 580 insertions(+) create mode 100644 css2024.yml diff --git a/css2024.yml b/css2024.yml new file mode 100644 index 0000000..bafe385 --- /dev/null +++ b/css2024.yml @@ -0,0 +1,580 @@ +locale: ua-UA +translations: + ########################################################################### + # General + ########################################################################### + + - key: general.results.description + t: The 2024 edition of the annual survey about the latest trends in the CSS ecosystem. + + - key: general.css2024.survey_intro + t: | + + It's amazing to witness the speed at which CSS keeps evolving. While the past decade has been all about building a solid foundation for layout (Flexbox, Grid) and syntax (variables) the future promises to be about going much further than most of us ever dreamed of. + + Want to calculate a square root or cosine in your CSS? Use that to build scroll-triggered animations? And maybe scope all of it down so it doesn't have any unwanted effects? Now you can do all that, and much more! + + Which is why this survey is more important than ever, not just as a way to keep track of your own progress; but also as a tool to let browser vendors know what we all think about this new direction. + + So once again, please join me for this year's State of CSS! + + - key: features.features_intro_css2024 + t: | + Welcome to the survey! This first part is all about sharing your experience with various CSS features: + + + - **Never heard of it**: it's your first time seeing this – or you've heard of it but have no idea what it does. + + - **Heard of it**: you've read or learned about this, but haven't actually used it yet. + + - **Used it**: you've used this at least once, even if it was just to play around. + + + By the way, if you want to tell us more about any of your choices, just click that little "comment" icon! + + ########################################################################### + # Introduction + ########################################################################### + + - key: introduction.css2024 + t: | + CSS is going through a period of unprecedented progress. Between `:has()`, container queries, subgrid, and many more, new features are making their way to browsers seemingly every month. + + The consequence of all this growth is that things can get a bit overwhelming. Thankfully this year we had [Chen Hui Jing](https://chenhuijing.com/) to help design the survey and guide us through the CSS jungle. + + And speaking of the survey, did you know browser vendors use its data as part of the [Interop](https://web.dev/interop-2023/) initiative to help prioritize which features to work on next? + + Finally, we are introducing a new feature this year: the ability to **customize charts** with your own data filters. We're excited to see what kind of new insights you'll come up with! + + – 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.css2024 + t: | + This year's survey reached **9,190** developers throughout the world. + + - key: sections.features.description.css2024 + t: | + CSS has been on a roll lately, and many of the new features introduced are + slowly but surely being adopted by the developer community. + + - key: sections.css_frameworks.description.css2024 + t: | + Once again, Tailwind CSS stands apart as the one major UI framework that developers are happy to keep using; while Open Props is generating a small but passionate following. + + - key: sections.css_in_js.description.css2024 + t: | + After some initial growth, it seems like the CSS-in-JS sector has plateaued, and + the fact that native CSS itself is adopting many of its main advantages is probably a big contributing factor. + + - key: sections.other_tools.description.css2024 + t: | + 30 years after the invention of the browser, we're still seeing innovation in that space with new entrants like Brave and Arc; or specialized tools like Polypane gaining marketshare. + + - key: sections.usage.description.css2024 + t: | + No matter how you use CSS, the data shows that making sure your code works across all browsers is still a concern, especially for newer features such as `:has()`. + + - key: sections.resources.description.css2024 + t: | + Between blogs, YouTube channels, and podcasts, the CSS community is more vibrant than ever. + + ########################################################################### + # Charts + ########################################################################### + + - key: options.features_categories.layout + aliasFor: sections.layout.title + - key: options.features_categories.shapes_graphics + aliasFor: sections.shapes_graphics.title + - key: options.features_categories.interactions + aliasFor: sections.interactions.title + - key: options.features_categories.typography + aliasFor: sections.typography.title + - key: options.features_categories.accessibility + aliasFor: sections.accessibility.title + - key: options.features_categories.other_features + aliasFor: sections.other_features.title + - key: options.features_categories.colors + aliasFor: sections.colors.title + - key: options.features_categories.selectors + aliasFor: sections.selectors.title + + - key: user_info.country_low_vs_high_income.description.css2024 + t: > + Splitting respondents between low-income and high-income brackets gives + us two very different lists of countries. + + - key: user_info.higher_education_degree_by_gender.description.css2024 + t: > + Women representation was higher than expected among respondents + with a higher-education diploma in areas unrelated to CSS, potentially + indicating a lot of career changes. + + - key: user_info.source_by_gender.description.css2024 + t: > + Although the low total counts make it hard to draw any conclusions, + the proportion of women was highest among respondents + who came across the survey from their workplace or through word-of-mouth, + especially compared to social networks such as Twitter or YouTube. + + - key: user_info.source_by_race_ethnicity.description.css2024 + t: > + Again keeping in mind the low sample size, when considering race and ethnicity, + YouTube stands out as one of the most diverse source of traffic to the survey. + + - key: user_info.average_income_by_company_size.description.css2024 + t: > + We find the highest-paid respondents working for large companies, although + it's notable that solo workers show a slight income advantage over small companies. + + - key: user_info.yearly_salary_usa_vs_the_world.description.css2024 + t: > + When comparing U.S. incomes against the rest of the world, it becomes clear that U.S. + developers are over-represented in the higher income brackets. + + ########################################################################### + # Awards + ########################################################################### + + - key: award.feature_adoption_delta_award.comment + t: | + The `gap` property for Flexbox is such a useful addition that it's not surprising + it would see a **{value}** progression in 2023 + + # - key: award.tool_usage_delta_award.comment + # t: No other tool comes even close to Tailwind CSS's dramatic **{value}** progression over the last year. + + - key: award.most_commented_feature_award.comment + t: With **{value}** comments, no other feature even came close to generating as much feedback as Subgrid. + + - key: award.tool_satisfaction_award.comment + t: | + Out of all the CSS-in-JS solutions, Open Props is the only one that maintained a + sky-high **{value}** retention ratio. + + # - key: award.tool_interest_award.comment + # t: With a **{value}** ratio, CSS Modules again generated the most interest among CSS developers this year. + + - key: award.most_write_ins_award.comment + t: | + With **{value}** mentions, Panda was the tool most mentioned in freeform questions by far. + + ########################################################################### + # Conclusion + ########################################################################### + + - key: conclusion.css2024 + t: | + As usage of newer CSS features has been trending upwards, usage of CSS frameworks has been on a downward slope. + + This could be an indication that folks are starting to get used to the idea that you don’t necessarily have to wait to use newer CSS features, because browsers will catch up a lot quicker than before. + + With high awareness of native CSS features like nesting and `:has()` (which can act like a parent selector, but is much more than that!), it seems like we are on the brink of widespread adoption. + + Out of all these features, I did have a personal favourite for this year, and that is `text-wrap: balance`. It provides a one-line fix for a request that I’ve constantly gotten over my entire web development career: “can we adjust that headline so the last word isn’t an orphan?” + + It was also interesting that so many developers felt that animating to auto and masonry layout were missing CSS features. It's true it's always been tricky for browsers to determine element dimensions (especially height) when they're not explicitly declared. + + But as [Lea Verou](https://lea.verou.me/) mentioned last year, with initiatives such as [Interop](https://wpt.fyi/interop-2023) bringing browsers together, features thought previously impossible can now potentially become reality! + + - key: conclusion.css2024.bio + t: Developer Experience Engineer @ Interledger Foundation + + ########################################################################### + # Picks + ########################################################################### + + - key: picks.my_pick + t: "My 2023 Pick: " + - key: picks.intro + t: We asked members of the CSS community to share their “pick of the year” + + # - key: picks.david_east.name + # t: CSS Subgrid + # - key: picks.david_east.bio + # t: Advocate for building on the web + # - key: picks.david_east.description + # t: | + # CSS Subgrid allows child elements to inherit their parents grid properties. + # Soon, it will be much easier to lay elements out to the same grid + # lines across the entire page. + + # - key: picks.bramus_van_damme.name + # t: The `:has()` Selector + # - key: picks.bramus_van_damme.bio + # t: Chrome Developer Relations Engineer at Google + # - key: picks.bramus_van_damme.description + # t: | + # You might know this one as the so-called “parent selector” but that name does it + # no justice as it only covers a small part of what it can do. + # This selector has essentially changed the way I write my CSS. + + - key: picks.kevin_j_powell.name + t: Ahmad Shadeed + - key: picks.kevin_j_powell.bio + t: CSS Evangelist + - key: picks.kevin_j_powell.description + t: | + Ahmad's blog is a source of knowledge and inspiration, with in-depth explorations of topics, including great visuals and use cases. + + # - key: picks.samuel_kraft.name + # t: The `:has()` Selector + # - key: picks.samuel_kraft.bio + # t: Design Engineer + # - key: picks.samuel_kraft.description + # t: | + # The new :has() selector is super powerful and unlocks new styling possibilities. + # This great article from Jen Simmons breaks it down with explanations and practical examples. + + - key: picks.josh_comeau.name + t: CSS Podcast + - key: picks.josh_comeau.bio + t: Instructor, CSS for JavaScript Developers + - key: picks.josh_comeau.description + t: | + This podcast is a delightful tour of a bunch of + important and modern CSS features. + It's hosted by Una Kravets and Adam Argyle, two absolutely wonderful people. + + - key: picks.adam_argyle.name + t: Zag.js + - key: picks.adam_argyle.bio + t: Google Chrome Developer Relations + - key: picks.adam_argyle.description + t: | + The talented folks at ChakraUI are building some next-gen components and ideas, + can't wait to see what else they come up with. + + # - key: picks.eric_w_bailey.name + # t: “Style with Stateful, Semantic Selectors” by Ben Myers + # - key: picks.eric_w_bailey.bio + # t: Accessibility advocate and CSS nerd + # - key: picks.eric_w_bailey.description + # t: | + # Ben demonstrates how utilizing ARIA + # attribute selectors can simply and powerfully tie appearance to state. + + # - key: picks.michelle_barker.name + # t: Interop 2022 + # - key: picks.michelle_barker.bio + # t: Writer and creator of front-end blog CSS { In Real Life } + # - key: picks.michelle_barker.description + # t: | + # Interop is a collaboration between all of the major browser vendors, + # agreeing 15 key areas of focus for implementation — + # including game-changing new CSS features like container queries, + # cascade layers and color functions. + + - key: picks.jhey_tompkins.name + t: | + The `:has()` Selector + - key: picks.jhey_tompkins.bio + t: CEO of Fancy CSS + - key: picks.jhey_tompkins.description + t: | + `:has()` is the magic that you can use to combine other APIs like container queries, anchor positioning, etc. together. I'm excited to see how the community finds new and innovative ways to use it. + + # - key: picks.gift_egwuenu.name + # t: Learn CSS + # - key: picks.gift_egwuenu.bio + # t: Developer Advocate at Cloudflare + # - key: picks.gift_egwuenu.description + # t: | + # My recommended resource for anyone looking to learn CSS from the ground up, + # I also use it as a reference everytime I need to look up any CSS property. + + - key: picks.ahmad_shadeed.name + t: Scroll-Driven Animations + - key: picks.ahmad_shadeed.bio + t: Design Engineer and Writer at [ishadeed.com](https://ishadeed.com/) + - key: picks.ahmad_shadeed.description + t: | + If I went back 2 years, I'd never have imagined CSS + having scroll-driven animations. Yet, here we are! + + # - key: picks.georgedoescode.name + # t: + # - key: picks.georgedoescode.bio + # t: + # - key: picks.georgedoescode.description + # t: | + + # - key: picks.jen_simmons.name + # t: The `:has()` Selector + # - key: picks.jen_simmons.bio + # t: Web technologies evangelist at Apple + # - key: picks.jen_simmons.description + # t: | + # For two decades, “parent selector” was a top requested feature for CSS. + # Then in 2022, in a total surprise, the :has() pseudo-class arrived to solve this and far more. + + - key: picks.sara_soueidan.name + t: | + `color-contrast()` + - key: picks.sara_soueidan.bio + t: Inclusive design engineer and educator + - key: picks.sara_soueidan.description + t: | + My vote goes to color-contrast() because I think it deserves more spotlight. + It’s one of the few features that makes it _easier_ for us (developers) + to design for our users. Cross-browser support can’t come soon enough. + + - key: picks.adam_wathan.name + t: Lightning CSS + - key: picks.adam_wathan.bio + t: Creator of Tailwind CSS + - key: picks.adam_wathan.description + t: | + An extremely fast, all-in-one CSS processing tool that handles things like vendor prefixes, minification, and modern feature transpilation, all while being an amazing platform for other developers to build CSS tools on top of. + + # - key: picks.christianoliff.bio + # t: Front-end developer for Trimble MAPS + # - key: picks.christianoliff.description + # t: | + # One thing I've really started using and appreciating this year though is Purge CSS- an awesome tool for removing unused CSS. It can greatly reduce the size of your CSS, and its fast and easy to use. + + - key: picks.kilian_valkhof.name + t: Devtoolstips + - key: picks.kilian_valkhof.bio + t: Creator of Polypane, the browser for developers. + - key: picks.kilian_valkhof.description + t: | + The devtools in all browsers are super powerful. These bite-sized tips + help you get the most out of them regardless of which browser you use. + + - key: picks.ahmad_awais.name + t: | + `text-wrap: balance` + - key: picks.ahmad_awais.bio + t: VP DevRel & Google Developers Advisory Board founding member + - key: picks.ahmad_awais.description + t: | + Headlines should dazzle and read like a breeze, even if screens play hard to predict. + I've battled those annoying solo words at line's end (hello, widow words!), + but guess what? Enter text-wrap: balance – one-liner-fix wizardry that's pure magic! + + # - 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. + + ########################################################################### + # Quiz + ########################################################################### + + - key: quiz.quiz_dave_shea + t: "Question 01" + - key: quiz.quiz_dave_shea.question + t: > + In May 2003, Dave Shea launched a site that showcased CSS's flexibility and adaptability. What was that site's name? + - key: options.quiz_dave_shea.css_playground + t: CSS Playground + - key: options.quiz_dave_shea.style_jungle + t: Style Jungle + - key: options.quiz_dave_shea.css_zen_garden + t: CSS Zen Garden + - key: quiz.quiz_dave_shea.answer + t: > + [CSS Zen Garden](https://www.csszengarden.com/) made a big impression by demonstrating what was possible when you kept markup and styling separate. + - key: quiz.quiz_dave_shea.description + aliasFor: quiz.quiz_dave_shea.question + + - key: quiz.quiz_css_spec + t: "Question 02" + - key: quiz.quiz_css_spec.question + t: > + Which of these organizations maintains the CSS specification? + - key: options.quiz_css_spec.w3c + t: W3C + - key: options.quiz_css_spec.w3schools + t: W3Schools + - key: options.quiz_css_spec.mdn + t: MDN + - key: quiz.quiz_css_spec.answer + t: > + The W3C's [CSS Working Group](https://www.w3.org/groups/wg/css) maintains the CSS spec, which is then implemented by browser vendors. + - key: quiz.quiz_css_spec.description + aliasFor: quiz.quiz_css_spec.question + + ########################################################################### + # Sponsors + ########################################################################### + + - key: sponsors.frontendmasters.description + t: Advance your skills with in-depth, modern front-end engineering courses. + - key: sponsors.polypane.description + t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. + - key: sponsors.nijibox.description + t: UX and Product Development consulting in the heart of Tokyo. + - key: sponsors.renderatl.description + t: The largest tech conference with a dedicated Design & CSS track. + - key: sponsors.google_chrome.description + t: Thanks to the Google Chrome team for supporting our work. + + ########################################################################### + # FAQ/About + ########################################################################### + + - key: faq.how_long_will_survey_take_css2024 + t: How long will answering the survey take? + - key: faq.how_long_will_survey_take_css2024.description + t: > + Depending on how many questions you answer (all questions can be skipped), + filling out the survey should take around 15-20 minutes. + + - key: faq.learn_more_css2024 + t: Where can I learn more? + - key: faq.learn_more_css2024.description + t: You can learn more about this survey in [our announcement post](https://dev.to/sachagreif/the-2024-state-of-css-survey-is-now-open-1bjj). + + - key: faq.survey_design_css2024 + t: How was this survey designed? + - key: faq.survey_design_css2024.description + t: > + This survey was designed as the results of an [open design process](https://github.com/Devographics/surveys/issues/245) involving browser vendors and the web development community. + + - key: faq.results_released_css2024 + t: When will the results be released? + - key: faq.results_released_css2024.description + t: The survey will run from August 17 to September 7, 2024, and the survey results will be released shortly after. + + - key: about.content + t: > + The 2023 State of CSS survey ran from June 15 to July 15 2023, and collected 9,108 responses. The survey is run by [Devographics](https://www.devographics.com/), with help from a team of open-source contributors and consultants. + + + The State of CSS 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. + + + Additionally, survey data is also used by browser vendors to prioritize features and inform initiatives such as [Interop 2023](https://web.dev/interop-2023/). + + + ### Survey Design + + This year, survey design was lead by [Chen Hui Jing](https://chenhuijing.com/) thanks to a funding grant from the Google Chrome team. 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. + + ### Project Funding + + Funding from this project comes from a variety of sources: + + - **T-shirt sales**. + + - **Sponsored Links**: the links to recommended resources at the bottom of each page are provided by our partner [Frontend Masters](https://frontendmasters.com/). + + - **Sponsored Charts**: starting last year, anybody can now also choose to directly sponsor a chart for $10 or more, and get their Twitter avatar displayed next to it. + + - **Google**: this year, the [Google Chrome](https://www.google.com/chrome/) team set aside a budget to hire Lea to help design the survey, as well as funded me directly to help support my work. + + - **Nijibox**: Japan-based [Nijibox](https://nijibox.jp/) has also graciously accepted to sponsor my efforts to help make these yearly surveys more sustainable. + + + ### Technical Overview + + You can find a more in-depth technical overview of how the surveys are run [here](https://dev.to/sachagreif/how-the-devographics-surveys-are-run-2023-edition-1p6a). Our code is [open-source](https://github.com/Devographics/Monorepo/). + + ### Feedback + + + - [Report a technical issue](https://github.com/Devographics/Monorepo/issues) + + - [Make a suggestion for next year](https://github.com/Devographics/surveys/issues/193) + + - [Other non-technical issues](https://github.com/Devographics/surveys/issues) + + - [Join our Discord](https://discord.gg/tuWRUWVyJs) From 3cbc6538754fc577a786e4fef419702cb7b32b29 Mon Sep 17 00:00:00 2001 From: alinkedd Date: Thu, 15 Aug 2024 21:58:19 +0200 Subject: [PATCH 2/3] Add translations --- TRANSLATION.md | 1 + css2024.yml | 70 +++++++++++++++++++++++++------------------------- 2 files changed, 36 insertions(+), 35 deletions(-) diff --git a/TRANSLATION.md b/TRANSLATION.md index ddc7a18..1862bf3 100644 --- a/TRANSLATION.md +++ b/TRANSLATION.md @@ -62,6 +62,7 @@ |How was this survey designed?|Як було розроблено це опитування?| |How will this data be used?|Як ці дані будуть використані?| |What are the survey's goals?|Яка мета цього опитування?| +|When will the results be released?|Коли будуть опубліковані результати?| |Where can I learn more?|Де я можу дізнатися більше?| |Who should take this survey?|Хто може взяти участь у цьому опитуванні?| diff --git a/css2024.yml b/css2024.yml index bafe385..379dded 100644 --- a/css2024.yml +++ b/css2024.yml @@ -5,32 +5,32 @@ translations: ########################################################################### - key: general.results.description - t: The 2024 edition of the annual survey about the latest trends in the CSS ecosystem. + t: Щорічне опитування про останні тенденції в екосистемі CSS за 2024 рік. - key: general.css2024.survey_intro t: | - It's amazing to witness the speed at which CSS keeps evolving. While the past decade has been all about building a solid foundation for layout (Flexbox, Grid) and syntax (variables) the future promises to be about going much further than most of us ever dreamed of. + Дивовижно спостерігати за швидкістю, з якою CSS продовжує розвиватися. Незважаючи на те, що останнє десятиліття було присвячене створенню міцного фундаменту для компонування (флексбокс, сітка) і синтаксису (змінні), майбутнє обіцяє піти набагато далі, ніж більшість із нас коли-небудь мріяла. - Want to calculate a square root or cosine in your CSS? Use that to build scroll-triggered animations? And maybe scope all of it down so it doesn't have any unwanted effects? Now you can do all that, and much more! + Хочете обчислити квадратний корінь або косинус у своєму CSS? Використовувати це для створення анімації, що запускається гортанням? І, можливо, помістити все це в окрему область видимості, щоб не було небажаних ефектів? Тепер ви можете все це та більше! - Which is why this survey is more important than ever, not just as a way to keep track of your own progress; but also as a tool to let browser vendors know what we all think about this new direction. + Ось чому це опитування важливіше, ніж будь-коли — не лише як спосіб стежити за власним прогресом, а й як інструмент, щоб розповісти постачальникам браузерів, що ми всі думаємо про цей новий напрям. - So once again, please join me for this year's State of CSS! + Тож ще раз, будь ласка, приєднуйтеся до цьогорічного "Стану CSS"! - key: features.features_intro_css2024 t: | - Welcome to the survey! This first part is all about sharing your experience with various CSS features: + Ласкаво просимо до опитування! Ця перша частина присвячена тому, щоб поділитися своїм досвідом використання різноманітних функцій CSS: - - **Never heard of it**: it's your first time seeing this – or you've heard of it but have no idea what it does. + - **Вперше чую**: ви це бачите вперше — або чули, але не знаєте, як це працює. - - **Heard of it**: you've read or learned about this, but haven't actually used it yet. + - **Чув(-ла) про це**: ви читали або знаєте про це, але насправді ще не користувалися. - - **Used it**: you've used this at least once, even if it was just to play around. + - **Використовував(-ла)**: ви використовували це принаймні один раз, навіть якщо лише гралися. - By the way, if you want to tell us more about any of your choices, just click that little "comment" icon! + До речі, якщо ви бажаєте розповісти нам більше про будь-який із ваших виборів, просто натисніть на маленьку іконку "коментар"! ########################################################################### # Introduction @@ -53,38 +53,38 @@ translations: ########################################################################### - key: sections.tshirt.title - t: T-shirt + t: Футболка - key: sections.tshirt.description t: | - ## Support the Survey With the State of CSS T-Shirt + ## Підтримайте опитування за допомогою футболки "Стан JS" - 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. + Погана якість відео, громіздкі касети та необхідність перемотування назад — здається, ніхто не сумує за чимось з епохи VHS. Але нам *все-таки* не вистачає одного — дивовижних зображень 90-х, які раніше прикрашали порожні VHS-касети. - 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! + І тепер завдяки талановитому Christopher Kirk-Nielsen ви можете насолоджуватися добірним ретро, водночас відзначаючи свою любов до CSS! - key: tshirt.about - t: About the T-shirt + t: Про футболку - 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. + Ми використовуємо високоякісну, надм'яку футболку приталеного крою із тканини з трьох типів волокна (tri-blend), надруковану нашими партнерами з Cotton Bureau. - key: tshirt.getit - t: Get It + t: Отримати - key: tshirt.price - t: USD $29 + shipping + t: USD $32 + доставляння - key: tshirt.designer.heading - t: About the Designer + t: Про дизайнера - 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)! + Chris родом із Франції, але тепер проживає у Сполучених Штатах; він не лише чудовий розробник клієнтської частини, а й талановитий ілюстратор, який спеціалізується на зображеннях у стилі ретро. Ми радимо вам переглянути [інші дизайни його футболок](https://chriskirknielsen.com/designs)! ########################################################################### # Sections Introductions @@ -227,9 +227,9 @@ translations: ########################################################################### - key: picks.my_pick - t: "My 2023 Pick: " + t: "Мій вибір 2024: " - key: picks.intro - t: We asked members of the CSS community to share their “pick of the year” + t: Ми покликали спільноту CSS поділитися своїм "вибором року" # - key: picks.david_east.name # t: CSS Subgrid @@ -447,7 +447,7 @@ translations: ########################################################################### - key: quiz.quiz_dave_shea - t: "Question 01" + t: "Питання 01" - key: quiz.quiz_dave_shea.question t: > In May 2003, Dave Shea launched a site that showcased CSS's flexibility and adaptability. What was that site's name? @@ -464,7 +464,7 @@ translations: aliasFor: quiz.quiz_dave_shea.question - key: quiz.quiz_css_spec - t: "Question 02" + t: "Питання 02" - key: quiz.quiz_css_spec.question t: > Which of these organizations maintains the CSS specification? @@ -485,7 +485,7 @@ translations: ########################################################################### - key: sponsors.frontendmasters.description - t: Advance your skills with in-depth, modern front-end engineering courses. + t: Вдосконалюйте свої навички за допомогою поглиблених сучасних курсів про інженерію клієнтської частини. - key: sponsors.polypane.description t: The browser for ambitious devs. Build responsive, accessible and fast websites with ease. - key: sponsors.nijibox.description @@ -493,34 +493,34 @@ translations: - key: sponsors.renderatl.description t: The largest tech conference with a dedicated Design & CSS track. - key: sponsors.google_chrome.description - t: Thanks to the Google Chrome team for supporting our work. + t: Дякуємо команді Google Chrome за підтримку нашої роботи. ########################################################################### # FAQ/About ########################################################################### - key: faq.how_long_will_survey_take_css2024 - t: How long will answering the survey take? + t: Скільки часу займе опитування? - key: faq.how_long_will_survey_take_css2024.description t: > - Depending on how many questions you answer (all questions can be skipped), - filling out the survey should take around 15-20 minutes. + Залежно від того, на скільки питань ви відповісте (всі питання не обов'язкові), + заповнення анкети займе орієнтовно 15-20 хвилин. - key: faq.learn_more_css2024 - t: Where can I learn more? + t: Де я можу дізнатися більше? - key: faq.learn_more_css2024.description - t: You can learn more about this survey in [our announcement post](https://dev.to/sachagreif/the-2024-state-of-css-survey-is-now-open-1bjj). + t: Ви можете дізнатися більше про це опитування у [нашому анонсі](https://dev.to/sachagreif/the-2024-state-of-css-survey-is-now-open-4o5h). - key: faq.survey_design_css2024 - t: How was this survey designed? + t: Як було розроблено це опитування? - key: faq.survey_design_css2024.description t: > - This survey was designed as the results of an [open design process](https://github.com/Devographics/surveys/issues/245) involving browser vendors and the web development community. + Опитування було розроблено унаслідок [відкритого процесу розробки](https://github.com/Devographics/surveys/issues/245) із залученням постачальників браузерів і спільноти веброзробки. - key: faq.results_released_css2024 - t: When will the results be released? + t: Коли будуть опубліковані результати? - key: faq.results_released_css2024.description - t: The survey will run from August 17 to September 7, 2024, and the survey results will be released shortly after. + t: Опитування триватиме із 17 серпня до 7 вересня 2024 року, і його результати будуть опубліковані незабаром після завершення. - key: about.content t: > From ef5b57512b28531302795910f45aa83acce56ecf Mon Sep 17 00:00:00 2001 From: alinkedd Date: Fri, 23 Aug 2024 10:35:30 +0200 Subject: [PATCH 3/3] Reorder translators --- config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/config.yml b/config.yml index c7c8a2b..6b5de31 100644 --- a/config.yml +++ b/config.yml @@ -1,3 +1,3 @@ id: ua-UA label: Українська -translators: ["shramkoweb", "lutsykvad", "alinkedd"] +translators: ["alinkedd", "shramkoweb", "lutsykvad"]