Skip to content
This repository was archived by the owner on Jul 19, 2022. It is now read-only.
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
927 changes: 927 additions & 0 deletions src/translations/es-419.yml

Large diffs are not rendered by default.

15 changes: 15 additions & 0 deletions src/translations/es-419/conclusions/conclusion.md
Original file line number Diff line number Diff line change
@@ -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!

<span class="conclusion__byline">– Sacha and Raphaël</span>
Original file line number Diff line number Diff line change
@@ -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!
8 changes: 8 additions & 0 deletions src/translations/es-419/introductions/awardspage.md
Original file line number Diff line number Diff line change
@@ -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?
11 changes: 11 additions & 0 deletions src/translations/es-419/introductions/css-frameworks.md
Original file line number Diff line number Diff line change
@@ -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…
11 changes: 11 additions & 0 deletions src/translations/es-419/introductions/css-in-js.md
Original file line number Diff line number Diff line change
@@ -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!
13 changes: 13 additions & 0 deletions src/translations/es-419/introductions/demographics.md
Original file line number Diff line number Diff line change
@@ -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!
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/environments.md
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/features.md
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/interactions.md
Original file line number Diff line number Diff line change
@@ -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.
45 changes: 45 additions & 0 deletions src/translations/es-419/introductions/introduction.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
---
type: introduction
page: introduction
locale: es-419
---

<span class="first-letter">I</span>n 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:[email protected])

And now, let's see what CSS has been up to this year!

<span class="conclusion__byline">– Sacha and Raphaël</span>
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/layout.md
Original file line number Diff line number Diff line change
@@ -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!
11 changes: 11 additions & 0 deletions src/translations/es-419/introductions/methodologies.md
Original file line number Diff line number Diff line change
@@ -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!
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/opinions.md
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/other-features.md
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 7 additions & 0 deletions src/translations/es-419/introductions/other-tools.md
Original file line number Diff line number Diff line change
@@ -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.
11 changes: 11 additions & 0 deletions src/translations/es-419/introductions/pre-post-processors.md
Original file line number Diff line number Diff line change
@@ -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.
10 changes: 10 additions & 0 deletions src/translations/es-419/introductions/resourcespage.md
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/shapes-and-graphics.md
Original file line number Diff line number Diff line change
@@ -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.
11 changes: 11 additions & 0 deletions src/translations/es-419/introductions/support.md
Original file line number Diff line number Diff line change
@@ -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
<a href="mailto:[email protected]">get in touch</a>!
11 changes: 11 additions & 0 deletions src/translations/es-419/introductions/technologies.md
Original file line number Diff line number Diff line change
@@ -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.
13 changes: 13 additions & 0 deletions src/translations/es-419/introductions/tshirt.md
Original file line number Diff line number Diff line change
@@ -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!
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/typography.md
Original file line number Diff line number Diff line change
@@ -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.
9 changes: 9 additions & 0 deletions src/translations/es-419/introductions/units-and-selectors.md
Original file line number Diff line number Diff line change
@@ -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.