Commit 7b20cd89 authored by Sergio's avatar Sergio

Added styled components article

parent 93ac6fdb
......@@ -17,11 +17,9 @@ import BlogPost from '../components/BlogPost';
// eslint-disable-next-line import/no-unresolved, import/extensions
import { frontMatter as blogPosts } from './blog/**/*.mdx';
/*
* import { frontMatter as styleGuides } from './blog/style-guides-component-libraries-design-systems.mdx';
* import { frontMatter as stripeDesign } from './blog/how-stripe-designs-beautiful-websites.mdx';
* import { frontMatter as monorepo } from './blog/monorepo-lerna-yarn-workspaces.mdx';
*/
import { frontMatter as styleGuides } from './blog/guias-de-estilo-diseño-de-sistemas.mdx';
import { frontMatter as monorepo } from './blog/monorepo-lerna-yarn-workspaces.mdx';
import { frontMatter as styledComponents } from './blog/biblioteca-de-componentes-ui-con-styled-components.mdx';
const url = 'https://sergio.dev/blog';
const title = 'Blog – Sergio Lozano';
......@@ -76,14 +74,14 @@ const Blog = () => {
Blog
</Heading>
<Text mb={2} color={secondaryTextColor[colorMode]}>
Esta es una recopilación personal de los mejores articulos que
Esta es una recopilación personal de los mejores artículos que
encuentro sobre programación. Poco a poco quiero ir ampliando la
colección, personalmente me ayuda a organizarme y recordar mejor
los posts que voy leyendo mes a mes.
</Text>
<Text color={secondaryTextColor[colorMode]}>
{`En total, he recopilado ${blogPosts.length} artículos. Si quieres
buscar alguno puedes utilizar el buscador que se encuentra justo
{`En total, he recopilado ${blogPosts.length} artículos. Si necesitas
buscar alguno, puedes utilizar el buscador que se encuentra justo
debajo.`}
</Text>
<InputGroup my={4} mr={4} w="100%">
......@@ -108,9 +106,9 @@ const Blog = () => {
<Heading letterSpacing="tight" mb={4} size="xl" fontWeight={700}>
Más recientes
</Heading>
{/* <BlogPost {...styleGuides} />
<BlogPost {...stripeDesign} />
<BlogPost {...monorepo} /> */}
<BlogPost {...styleGuides} />
<BlogPost {...styledComponents} />
<BlogPost {...monorepo} />
</Flex>
)}
<Flex
......
......@@ -227,10 +227,10 @@ Para la mayoría de las empresas pequeñas, yo diría que el uso de Monorepo es
He llegado a preferir CSS-in-JS, especialmente [styled-components](https://www.styled-components.com/). Existe una gran variedad de opciones para CSS-in-JS [listado](https://github.com/MicheleBertoli/css-in-js). Las principales razones que nos llevaron a utilizar styled-components para nuestra librería de componentes fueron:
- El parecido de escribir CSS tradicional en comparación a escribir objetos de JavaScript.
- El parecido de escribir CSS tradicional en comparación a escribir objetos de JavaScript
- Soporte para React y React Native
- Pre-marcado automático en los estilos
- Estilos directos que eliminan conflictos de CSS globales.
- Estilos directos que eliminan conflictos de CSS globales
Si tu librería de componentes necesita soporte para exportar HTML/CSS sin procesar, recomiendo seguir utilizando Sass. Un gran ejemplo de esto es [Carbon Design System](https://www.carbondesignsystem.com/components/button/code) de IBM.
![Diseño de Sistemas Botón](/static/images/guias-de-estilo-diseño-de-sistemas/button.png)
......
......@@ -493,5 +493,5 @@ Enhorabuena, ahora tienes un mono repositorio con todas las funciones configurad
## Lecturas adicionales
- [Construyendo una biblioteca de componentes UI con Styled Components](/blog/styled-component-library)
- [Construyendo una biblioteca de componentes con Styled Components](/blog/styled-component-library)
- [Entender el funcionamiento de Yarn Workspaces](https://yarnpkg.com/blog/2017/08/02/introducing-workspaces/)
......@@ -9,9 +9,7 @@ import ProjectCard from '../components/ProjectCard';
import { frontMatter as styleGuides } from './blog/guias-de-estilo-diseño-de-sistemas.mdx';
import { frontMatter as monorepo } from './blog/monorepo-lerna-yarn-workspaces.mdx';
/*
* import { frontMatter as stripeDesign } from './blog/how-stripe-designs-beautiful-websites.mdx';
*/
import { frontMatter as styledComponents } from './blog/biblioteca-de-componentes-ui-con-styled-components.mdx';
const Index = () => {
const { colorMode } = useColorMode();
......@@ -54,10 +52,10 @@ const Index = () => {
mt={8}
>
<Heading letterSpacing="tight" mb={4} size="xl" fontWeight={700}>
Articulos recientes
Artículos recientes
</Heading>
<BlogPost {...styleGuides} />
{/* <BlogPost {...stripeDesign} />*/}
<BlogPost {...styledComponents} />
<BlogPost {...monorepo} />
</Flex>
<Flex
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment