Hipsters Front End
1.42K members
1 photo
178 links
Download Telegram
to view and join the conversation
Olá pessoas, Mário Souto aqui e na dica de sexta de hoje, to trazendo pra vocês essa lib, o polished: https://polished.js.org/

Ela é super bacana e prove vaaarias estruturas super legais pra converter hexadecimais em rgb, px em em, vale super a pena dar uma olhadinha e ver se resolve algum problema no seu projeto :)
Olá jovem! Aqui é o Gabs Ferreira e venho trazer alguns links legais pra você hoje:

Keyframes, uma ferramenta muito interessante que gera CSS pra você a partir de elementos visuais
https://keyframes.app/v2/

Um componente javascript pra interagir com áudio no navegador
https://github.com/bbc/peaks.js/

15 exemplos legais de efeitos hover no CSS
https://csshint.com/animated-css-hover-effects/

Reveal.js, um framework pra você criar apresentações bonitas
https://github.com/hakimel/reveal.js/

Uma pequena lib js pra você criar e animar anotações em páginas web
https://roughnotation.com/

HtmlX, uma ferramenta que te permite acessar s AJAX, WebSockets e Server Sent Events através de atributos direto no HTML
https://htmx.org/

Ferramenta que te permite usar SQL direto no Typescript de forma type safe
https://github.com/adelsz/pgtyped

Deixe suas páginas com aparência de documentos LaTeX usando o Latex.css
https://latex.now.sh/

Vime, uma lib open source bem útil pra trabalhar com players de vídeo em suas aplicações
https://vime-js.com/
Recentemente eu comecei a explorar mais a MDN (Mozila Developer Network) e descobri que lá eles tem váaaarios tutoriais bacanas de várias coisas que ajudam quem ta começando no desenvolvimento web a fazer mais projetos e conseguir aprimorar seus conhecimentos. Pensando nisso, resolvi compartilhar esse link com vocês hoje:

https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_breakout_game_Phaser
Olá pessoas, Mário Souto aqui e trazendo pra vocês uma dica sensacional que é a série de livros "You don't know JS" https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md gratuitos no github :)
Olá jovem! Aqui é o Gabs Ferreira e venho trazer uns links legais pra você:

Deep Javascript, e-book gratuito sobre JS
https://exploringjs.com/deep-js/

Um lib javascript pra criar interfaces bem interessante e que não usa virtual DOM
https://github.com/ryansolid/solid

Um boilerplate com o mínimo do que você precisa pra começar um projeto com Electron, React, PostCSS e Webpack
https://github.com/alexdevero/electron-react-webpack-boilerplate/

Prerender.js, ferramenta pra carregar páginas rapidamente em qualquer navegador
https://github.com/genderev/prerender.js

Aqui nesse codepen tem um exemplo completo de um site com layout de jornal feito em CSS
https://codepen.io/oliviale/pen/BaoXOOP
Sofrendo pra testar o responsivo dos seus projetos?
https://responsively.app

Da uma olhada nessa app que simula vários tamanhos de device com inspect, sincronização de scroll e várias outras features suuper bacanas!
Já parou pra pensar como o React renderiza as coisas na tela da suas apps? Nesse vídeo vamos fazer do ZERO uma implementação em cima da API do React atual, fazendo toda a parte de renderização e entendendo como o Virtual DOM, JSX entre outras coisas bases para a renderização do React funcionar, ficou curioso? Bora ver!

https://www.youtube.com/watch?v=5MzOCxSWrrc
Já ouviu falar que determinada empresa era melhor pra hospedar seu site pela "velocidade"? Da uma olhada nesse guia comparativo com várias, eu mesmo tinha uma favorita que fui surpreendido aqui de saber que é meio lenda perto de outras :O https://ismyhostfastyet.com/
Já mexeu com as Github Actions e sofreu pra testar? Da uma olhada nesse projeto suuuper massa! Que ajuda a entender o que vai rolar antes de mandar ver no CI:

https://github.com/nektos/act
Sempre quis ter um jeito unificado de pegar fotos de perfis de diferentes redes sociais e ficou na dúvida? Da uma olhada nesse projeto: https://unavatar.now.sh/
Sabia que via Chrome, da pra você debugar seu site nativamente agora como várias pessoas com alguma dificuldade de visão visualizaram seu conteúdo?

https://twitter.com/umaar/status/1281536304707248128?s=09
Olá jovem! Aqui é o Gabs Ferreira e venho trazer uns links legais pra você 🙂

30 exemplos de sites muito legais com scrolling no estilo parallax pra você se inspirar
https://www.awwwards.com/30-great-websites-with-parallax-scrolling.html

Ferramenta pra criar animações e exportar para React, HTML, iOS e mais
https://createwithflow.com/

10 exemplos de layouts bacanas feitos com só uma linha de CSS
https://web.dev/one-line-layouts

Ferramenta simples e muito útil pra criar imagens pra serem usadas em logos
https://squircley.app/

Template pra tabela periódica em HTML
https://websitesetup.org/html5-periodical-table
Pense em um fundador de uma Escola de Tecnologia que fala inglês, alemão, francês, japonês e coreano. Que foi pro mundial de computação pela USP no Japão e Canadá. E que foi em Las Vegas fazer um show de mágica num cassino.
Esse é o Guilherme Silveira 🙂
Estude a aprenda com ele: https://www.youtube.com/watch?v=oTEXzpfEpPY&feature=youtu.be
Olá pessoas, oia eu aqui de novo hehe #diaDeVideo
Se você se tivesse que fazer uma animação que só o motion designer do seu trampo consegue começaria por onde? Hoje vamos conhecer uma lib muito massa do Airbnb chamada "Lottie", ela consegue pegar animações exportadas via after effects e fazer efeitos INCRÍVEIS e super fáceis de controlar e nesse vídeo vamos ver como usá-la com React! 😍

https://www.youtube.com/watch?v=dZH9aDX8T-0