Executando verificação de segurança...
47

Vamos tornar a web responsiva com apenas uma linha de instalação? Estou em busca de contribuidores!

Essa semana publiquei um pacote no NPM (em versão beta) que tem a missão descrita no título: tornar projetos responsivos com apenas uma linha de código!

Apresento para vocês o pacote responsive-app [beta]

Foram alguns anos experimentando e desenvolvedo essa técnica, que hoje consiste em:

  1. Definir a font-size da tag html dinâmicamente (com um script), levando em consideração:
    1.1 Resolução da tela
    1.2 Tamanho da fonte do navegador (acessibilidade web)
  2. Pré-processar definição em pixels, transformado-as em rem
  3. Centralizar elementos em telas mobile (funcionalidade experimental)

O resultado disso é que as proporções entre os elementos e de tamanhos são mantidas através de todas as resoluções de tela:

Responsive App Demo

Com apenas uma linha de instalação (exemplo utilizando Rollup):

import responsive from 'rollup-plugin-responsive-app'

export default {
  ...
  plugins: [
    ...,
    // Last plugin on the list
    responsive()
  ],
};

O grande objetivo aqui é que desenvolvedores (tanto FE quanto BE) economizem tempo ao criar um novo projeto e não precisar lidar com a responsividade, confiando que a interface estará apresentável em todas as resolução de tela. Parace ótimo, não é?

Então após lançar essa versão beta, estou buscando apoio e contribuidores. Inicialmente a ideia é testar esse pacote em diferentes contextos, projetos e frameworks (React, Angular, Vue...) para que o processo seja o mais abrangente possível.

Quem topa esse desafio?

Carregando publicação patrocinada...
5

Muito bom! Esse exemplo é perfeito para demonstrar o que seu projeto faz. É realmente cabuloso ter que ajustar o tamanho da fonte pra cada tamanho de tela (e as vezes nem fica proporcional).

Torço muito para que o projeto continue. Parabéns!

3

Foi de vivências cabulosas assim que eu comecei a desenvolver essa técnica! Kkkk
Estou bem empolgado com o pacote, pode causar um impacto bem positivo. Agradeço pelo apoio!

2
0
2

O legal seria por uma linha no head do html de qualquer site :)
O número de usuários de pacotes npm pode parecr grande, mas é minimo perto dos que não usam :)

1
1

Pense em algo como o bootstrap
Vc coloca 1 linha de CSS e pronto!

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head> 

Esse código mexe com o CSS todo de uma página!
Então seu projeto de tornar tudo responsivo seria massa se pudesse ser instalado assim tbm!

Meu site ta todo ruim, preciso de algo simples e rapido pra arrumar!
Boto seu link(pode ser CSS e JS 2 links não fazem mal kkkk) na head e magicamente as coisas acontecem :)

1

Entendi, como uma versão compacta da solução pode funcionar.

O desafio de aplicar o pacote todo dessa forma é a parte do pré processamento, que acontece somente durante o desenvolvimento e empacotamento do projeto. Se essas transformações fossem ocorrer em tempo de execução do sistema no browser, poderiamos ter problemas de performance e uma UI mutante (elementos iriam se transformar sozinhos sem interação do usuário).

De qualquer forma gostei da sugestão, seria bem prático mesmo! Quem sabe surjam ideias em como aplicar isso nos próximos passos. Obrigado

Vou conferir esse exemplo que você compartilhou como inspiração em como chegar nesse resultado

1

Então o problema esta na

parte do pré processamento

A forma de pensar sobre a solução do problema pode mudar!

Mas é só ideia! :)
Sorte

1
1
1

Amigo, mesmo sem te conhecer, sei que és!

No caso eu quero ter os insights XD

Vou apenas te fazer umas perguntas sobre como tu lida com o responsivo de uma aplicação hoje em dia, sem certo e errado, nisso já me ajudaria bastante. Pode ser?

2

Old school tudo que faço é com frameworks css(como bootstrap) ou não mão!

Só posso falar dos meus projetos!

Algo imporante, a maior parte dos projetos são legados!
Então algo simples como um link ajudaria muito esses projetos!

Ou seja, o mais simples possivel, em termos de mercado mundial.
Coisas como react, vue e etc são porcentagens minimas!
JQuery esta em 90% dos sites, react não ta nem em 5%.

Todo esse hype faz parecer que esses frameworks são gigantes e dominam tudo.
Mas não! A realidade é MPA simples :)

1
1

Uma vez que ele publicou no npm ele pode (como você sugeriu) usar o JS Delivr para fazer o pós carregamento:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.cjs.js">
</script>

Só com duas ressalvas, é antes do </body> e não depois do head e ele vai precisar pelomenos do browserify para gerar um index.cjs.js ou similar compatível com front

2
1

quero entender se sua sugestão contempla o pre processamento para disponibilizar essa opção

Sim, contempla, use o browserify, ele gera um arquivo .js que funciona direto no client (navegador) então qualquer um vai poder utilizar em qualquer framework

2

Cara, que ideia TOP, pra eu q sou pessimo no front, iria ser como uma luva kkkkk.

Meus parabens pelo o projeto, não sei como posso ajudar, mas seria legal se a comunidade pudesse abraçar este projeto.

1

Valeuu! Eu confesso que estou surpreso com a quantidade de desenvolvedores backend ou que simplesmente não tem tanta afinidade com o frontend felizes com a proposta do projeto.

De momento a principal ajuda que busco é a galera testando e me passando feedbacks, funcionando ou não em seus projetos, seja pelo Github, LinkedIn...ou conforme for melhor.

2

Legal cara! Me parece que eu ainda terei que pensar no comportamento mobile do site (diferença entre tela horizontal grande e vertical pequena), mas a diferença entre resoluções dpi,esse tipo de coisa ele ajusta pra que a experiência seja sempre parecida... Do tipo se eu abrir um site pensado pra FHD em 8k o layout ficaria parecido. Isso mesmo?

1

Então, temos a funcionalidade de auto ajuste para mobiles (experimental)...mas em casos mais complexos com certeza ainda será necessário regras manuais.

Sobre 8k, qual seria a resolução de tela em largura x altura? A ideia é que o layout fique parecido sim! Ainda não testei nesse cenário. A proposta do beta e justamente ampliar ao máximo a abrangência de contextos por testar refinar a solução.

Para qualquer um dos casos (mobile ou 8k) que tu testar e encontrar problemas, pode abrir uma issue no GitHub ou conectar comigo no LinkedIn que já vai me ajudar bastante a entender esses contextos diferentes.

1
1

Top demais, é bom ter uma parada mais simples de usar para implementar esse tipo de coisa, parabéns arthur, depois vou tentar ajudar de alguma forma!

1

Maravilha Vitor! Só agradeço.
Quando for criar um projetinho novo, mesmo que de estudo ou prototipagem, instale o pacote e depois me conta se funcionou no teu layout!

1
0
1

Muito interessante, mas chega tarde. Hoje em dia o conceito simples de responsividade nao é mais útil por si só quando falamos em eficiência frente aos indexadores. Todos os projetos de alto desempenho que fazemos seguem regras de mobile first, separando claramente o que é do que em cada dispositivo.

1
1
-1
2

Não tenho certeza o que você coloca como "só isso", mas a ideia do beta é testar o pacote em diversos contextos para melhorar a abrangência, vamos incrementando conforme diferentes casos surgirem!

Se tiver algum projeto onde o responsivo ainda não é coberto pela solução do pacote, fico feliz em revisar com você para entender o que ainda deve ser melhorado.