css2021.yml

locale: nb-NO
translations:
    ###########################################################################
    # Introduction
    ###########################################################################

    - key: general.results.description
      t: The 2021 edition of the annual survey about the latest trends in the CSS ecosystem.

    - key: introduction.css2021
      t: |

          <span class="first-letter">D</span>o 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!*

          <span class="conclusion__byline">– Sacha Greif</span>

    ###########################################################################
    # Tshirt
    ###########################################################################

    - key: sections.tshirt.title
      t: T-skjorte

    - key: sections.tshirt.description
      t: |
          ## Support the Survey With the State of CSS T-skjorte

          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: Om t-skjorten

    - key: tshirt.description
      t: |
          Vi bruker en høykvalitets og supermyk t-skjorte med en slim fit, med print fra vår parner, Cotton Bureau.

    - key: tshirt.getit
      t: Kjøp den

    - key: tshirt.price
      t: USD $29 + frakt

    - key: tshirt.designer.heading
      t: Om designeren

    - key: tshirt.designer.name
      t: Christopher Kirk-Nielsen

    - key: tshirt.designer.bio
      t: |
          Opprinnelig fra Frankrike, men nå basert i USA, er Chris ikke bare en fantastisk front-end utvikler, men også en talentfull illustratør som spesialiserer seg på det retrovisuelle. Vi oppfordrer deg også til å sjekke ut hans [andre t-skjortedesign](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: |
          Hvis du er interessert i å lære mer, har vi [skrevet et blogginnlegg](https://dev.to/sachagreif/is-our-survey-biased-against-women-49oj) som tar for seg kjønnsfordelingen og dynamikken mellom de i undersøkelsen.

    - key: blocks.css_missing_features.note
      t: |
          You can explore the full dataset of answers to this question in [this side project](https://whatsmissingfromcss.com/).

    - key: blocks.source.note
      t: >

          This chart aggregates a mix of referrers, URL parameters, and svar i fritekst-format. 

          - 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}** 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: Many questions also accepted write-in answers, and with **{value}** mentions PhpStorm was the most popular item overall.

    ###########################################################################
    # Conclusion
    ###########################################################################

    - key: conclusion.css2021
      t: |
          <span class="first-line">The way you write CSS is about to change forever</span>

          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.css2021.bio
      t: Web developer and creator of Polypane

    ###########################################################################
    # Picks
    ###########################################################################

    - key: picks.my_pick
      t: "My 2021 Pick: "
    - key: picks.intro
      t: Vi spurte medlemmer fra CSS-samfunnet om å dele sine "årets valg"

    - key: picks.george_francis.name
      t: The CSS Paint API
    - key: picks.george_francis.bio
      t: Developer, writer, and generative artist.
    - key: picks.george_francis.description
      t: |
          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.cassidy_williams.name
      t: Lynn Fisher
    - key: picks.cassidy_williams.bio
      t: Developer advocate, educator, and startup advisor.
    - key: picks.cassidy_williams.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.josh_comeau.name
      t: Amelia Wattenberger
    - key: picks.josh_comeau.bio
      t: Software developer and creator of [CSS for JavaScript Developers](https://css-for-js.dev/).
    - key: picks.josh_comeau.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.kevin_j_powell.name
      t: Stephanie Eckles
    - key: picks.kevin_j_powell.bio
      t: CSS Evangelist
    - key: picks.kevin_j_powell.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.manuel_matuzovic.name
      t: aspect-ratio
    - key: picks.manuel_matuzovic.bio
      t: Front-end developer from Vienna, and creator of [htmhell.dev](https://htmhell.dev).
    - key: picks.manuel_matuzovic.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.gift_egwuenu.name
      t: Kevin Powell
    - key: picks.gift_egwuenu.bio
      t: Frontend Developer and Content Creator
    - key: picks.gift_egwuenu.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.eric_w_bailey.name
      t: Miriam Suzanne
    - key: picks.eric_w_bailey.bio
      t: Inclusive Design and \#a11y advocate.
    - key: picks.eric_w_bailey.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.samuel_kraft.name
      t: Vanilla Extract
    - key: picks.samuel_kraft.bio
      t: Frontend & design
    - key: picks.samuel_kraft.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.sacha_greif.name
      t: Open Props
    - key: picks.sacha_greif.bio
      t: State of JS and State of CSS creator
    - key: picks.sacha_greif.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 Egendefinert Properties (CSS variables).

    - key: picks.ahmad_shadeed.name
      t: Container Queries
    - key: picks.ahmad_shadeed.bio
      t: Author of [Debugging CSS](https://debuggingcss.com/), Writing at [ishadeed.com](http://ishadeed.com)
    - key: picks.ahmad_shadeed.description
      t: |
          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.adam_argyle.name
      t: CSS Noise
    - key: picks.adam_argyle.bio
      t: CSS at Google
    - key: picks.adam_argyle.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.stephanie_walter.name
      t: Miriam Suzanne
    - key: picks.stephanie_walter.bio
      t: UX Researcher and CSS lover
    - key: picks.stephanie_walter.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.michelle_barker.name
      t: “Building a Color Scheme” by Adam Argyle
    - key: picks.michelle_barker.bio
      t: Senior Front End Developer
    - key: picks.michelle_barker.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.kilian_valkhof.name
      t: prefers-reduced-data
    - key: picks.kilian_valkhof.bio
      t: Web developer and creator of Polypane
    - key: picks.kilian_valkhof.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: sponsors.frontendmasters.description
      t: Utvikle ferdighetene dine med dyptgående, moderne kurs innen front-end.
    - key: sponsors.polypane.description
      t: Nettleseren for ambisiøse utviklere. Bygg responsive, tilgjengelige og raske nettsider med letthet.
    - key: sponsors.google_chrome.description
      t: Takk til Google Chrome teamet for støtten til vårt arbeid.

    ###########################################################################
    # FAQ/About
    ###########################################################################

    - key: about.content
      t: >
          2021 State of CSS-undersøkelsen ble gjennomført fra 5. oktober til 2. november 2021, og samlet inn 8714 svar. Undersøkelsen drives av meg, [Sacha Greif](https://sachagreif.com/), med hjelp fra et team av bidragsytere og konsulenter innen åpen kildekode.

          Årets logo og t-skjorte ble designet og animert av [Christopher Kirk-Nielsen](http://chriskirknielsen.com/).

          ### Mål med undersøkelsen

          Denne undersøkelsen, sammen med [State of JavaScript](https://stateofjs.com/)-undersøkelsen, ble laget for å identifisere kommende trender i webutviklingsøkosystemet for å hjelpe utviklere med å ta teknologiske valg.

          Som sådan er disse undersøkelsene fokusert på å forutse hva som kommer de neste årene, i stedet for å analysere hva som er populært nå. Derfor er ikke alltid de funksjonene eller teknologiene som er mest utbredt i dag inkludert.

          ### Undersøkelsesdesign

          Undersøkelsen ble delvis utformet basert på fjorårets undersøkelse, med en åpen tilbakemeldingsperiode der undersøkelsesoppsettet ble diskutert [på GitHub](https://github.com/StateOfJS/StateOfCSS-2020/issues/8).

          Alle spørsmål i undersøkelsen var valgfrie.

          ### Målgruppe for undersøkelsen

          Undersøkelsen var åpent tilgjengelig på nettet, og deltakerne ble ikke filtrert eller valgt på noen måte. Respondentene var primært en blanding av deltakere fra tidligere undersøkelser (varslet gjennom en dedikert e-postliste) og trafikk fra sosiale medier.

          ### Representativitet og inkludering

          Selv om vi mener det er viktig å gi en stemme til alle samfunn, er realiteten at en åpen undersøkelse som denne alltid vil ha utfordringer med å representere alle på riktig måte, spesielt når den gjennomføres via systemer som allerede har sine egne innebygde skjevheter.

          For å motvirke dette implementerer vi tre ulike strategier:

          - **Oppsøkende arbeid**: I år tok vi kontakt med 23 organisasjoner som representerer BIPOC- og LHBTQ-utviklere i håp om å samarbeide. Selv om svært få svarte, vil vi fortsette å lete etter måter å nå utover vårt nåværende publikum.

          - **Dataanalyse**: Gjennom funksjoner som fasetter og varianter prøver vi alltid å gjøre det lettere å fremheve stemmene til enhver demografisk gruppe, uansett hvor marginalisert den måtte være i våre data.

          - **Barrieresenking**: Hvis undersøkelsen er for lang, utilgjengelig, treg å laste, eller kun på engelsk, kan dette påføre en "innsatsavgift" som ekskluderer deler av samfunnet som ikke har råd til å betale den. Å løse disse problemene kan senke terskelen for deltakelse og samtidig gjøre publikum vårt mer mangfoldig.

          ### Finansiering av prosjektet

          Finansiering av dette prosjektet kommer fra ulike kilder:

          - **T-skjortesalg**.

          - **Sponsede lenker**: lenkene til anbefalte ressurser nederst på hver side er levert av vår partner [Frontend Masters](https://frontendmasters.com/).

          - **Annen finansiering**: i år satte [Google Chrome](https://www.google.com/chrome/)-teamet av et lite budsjett for å hjelpe til med å ansette en [tilgjengelighetskonsulent](https://fossheim.io/) for å jobbe med undersøkelsen.

          Til tross for disse finansieringskildene er undersøkelsene stort sett selvfinansierte, og enhver form for bidrag eller sponsing vil bli verdsatt. Jeg vil spesielt gjerne jobbe tettere med flere nettleserleverandører, siden de spiller en så sentral rolle i webøkosystemet.

          ### Teknisk oversikt

          Du finner en mer detaljert teknisk oversikt over hvordan undersøkelsene gjennomføres [her](https://dev.to/sachagreif/how-the-state-of-js-css-surveys-are-run-4lnb).

          - **Datainnsamling**: tilpasset [Vulcan.js](http://vulcanjs.org/)-app.

          - **Datainnsamling/prosessering**: MongoDB og MongoDB-aggregasjoner.

          - **Data-API**: Node.js GraphQL API.

          - **Resultatside**: [Gatsby](https://www.gatsbyjs.com/) React-app.

          - **Datavisualiseringer**: [Nivo](https://nivo.rocks/) React dataviz-bibliotek.

          - **Typografi**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) og [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue).