Posts with the tag: css

Exploring Tailwind-in-JS: Tailwind CSS on demand

A while ago I was exploring ways to adopt Tailwind CSS to style content that I was not responsible for. A good example of this is content coming from a database. For context, Tailwind CSS builds the styles needed for an application based on the folders and file patterns the developer specifies in their config file during the build. If the markup is dynamically rendered, the build tool doesn’t know what to include in the final bundle.

Using Flexbox and text ellipsis together

Another day I was asked to build a table containing a list of files uploaded by the users. Imagine a table similar to the list of files in Finder:

Creating a website for my Apple Collection

Part of the collection

A while ago I started an Apple Collection. After a few laptops and a few iDevices, I decided that I should start collecting info about my iThings. In the beginning, I created a gist containing model, serial number, how did I get the device, minimum/maximum OS, etc.

The list kept going bigger and bigger and the content started looking messy. The natural way to organize my data would be inside a SQL database, with the information distributed in columns. After organizing the information in tables, I would create a graphQL API (the one cool kids use these days) to give me the data needed to populate my UI – probably written in React, compiled with Babel and packed with webpack.

Para agilizar o desenvolvimento do frontend

Uso o Chrome como browser padrão em minha máquina e algumas extensões interessantes para desenvolvedores.

Personalizando o scrollbar com WebKit

Personalizar barras de rolagem é algo que vem lá dos tempos do IE 5.5. Naquele tempo, personalizavam-se as cores da barra, criando efeitos na maioria da vezes cafonas. Já faz algum tempo que o WebKit suporta scrollbars personalizadas. Você pode personalizar atributos como borda e background, usando até mesmo imagens para criar barras de rolagens bacanas. Esse artigo mostra alguns pseudo-elementos e pseudo-classes para personalizar sua barra.

CSS para alinhamento vertical

O Bruno Fernandes e eu estávamos no MSN ontem discutindo uma forma de fazer alinhamento vertical, para uma imagem da qual não se sabe a altura.

Pseudo-seletores são legais

Todo mundo lembra do pseudo-seletor :hover, quando quer fazer um simples efeito rollover em um link. Well, o que pouco sabe é que existe outros dois seletores muito bacanas: o :after e o :before.

Por que webstandards?

O artigo que vem a seguir foi escrito por mim em fevereiro do ano passado, para o projeto ReclamaSite (que nasceu morto). Naquela época, web2.0 não era capa de revista e muita gente ainda tinha desconfiança das vantagens do Tableless.

Hacks para Internet Explorer

Escrever uma página 100% idêntica para vários browsers pode parecer impossível. Mas não é.
Para contornar isso, hacks são usados, para tentar uma aproximação entre browsers.

CSS: Transparências cross-browser

Existem formas distintas para fazer efeitos de transparência, via CSS. Cada browser reconhece um atributo nas folhas de estilo. Vamos lá então:

O que esperar com o CSS3

Bem, um dia desses, a versão 3 do CSS deve sair. Mesmo ainda que vários browsers não suportam sequer a versão 2, o W3C soltou uma lista de features. O que deveremos ter: