Rinha de Frontend 💅
@rinhafront
Followers
1,486
Following
0
Media
1
Statuses
100
Perfil oficial da 💅 Rinha de Frontend 💅 Evento criado pela comunidade para que devs possam evoluir suas habilidades. Contato & Parceria: rinhafront @gmail .com
Joined October 2023
Don't wanna be here?
Send us removal request.
Explore trending content on Musk Viewer
Voltou
• 315644 Tweets
Durga Mantra For Success
• 118004 Tweets
Brazil
• 105202 Tweets
Meu Twitter
• 88708 Tweets
Domuz
• 85410 Tweets
シロネン
• 71415 Tweets
Köfteci Yusuf
• 69010 Tweets
Voltamos
• 50131 Tweets
Threads
• 47281 Tweets
TAXI
• 35961 Tweets
Marçal
• 34227 Tweets
#JO1ANNX
• 31051 Tweets
Alarmo
• 30762 Tweets
Bluesky
• 29550 Tweets
Switch 2
• 29476 Tweets
Cleverly
• 28638 Tweets
Xandão
• 28409 Tweets
Lili
• 25894 Tweets
目覚まし時計
• 20829 Tweets
推しの子
• 20804 Tweets
Alexandre de Moraes
• 20478 Tweets
ESTAMOS DE VOLTA
• 18898 Tweets
OUR BRAVE GIRL HANNI
• 18896 Tweets
#トト兄弟のおたんじょうび会_2024
• 18289 Tweets
ニンテンドーサウンドクロック
• 17364 Tweets
Corinthians
• 13528 Tweets
John Stewart
• 12416 Tweets
祝27歳
• 11988 Tweets
Oiii
• 11754 Tweets
Aaron Pierre
• 10935 Tweets
Nitish Kumar Reddy
• 10854 Tweets
Lieutenant Dan
• 10842 Tweets
Pinned Tweet
[PERFIL DESATIVADO]
Agradecemos a todos e todas que fizeram parte desse divertido evento online. Agradecemos especialmente a pelo apoio. Parabenizamos as pessoas vencedoras e aproveitamos para deixar aqui nosso anseio: que venham outras rinhas. Abraços!
0
0
11
✨ SAIU A RINHA DE FRONT END ✨
Desafio: Construa uma JSON tree-viewer que rode inteiramente client side e carregue o maior JSON que vc conseguir, dentre os disponibilizados por nós. A SPEC completa do desafio vc acessa no link abaixo. Detalhes na thread
24
98
538
Sabe quem vem aí? 🐓 RINHA DE FRONTEND! 💅
Estamos fechando parcerias para que possamos entregar prêmios para os vencedores
No dia 10 vamos divulgar o desafio da Rinha e abrir oficialmente a temporada de caça a frontenders
Siga esse perfil pra acompanhar os detalhes ;)
14
21
220
É amanhã!!! Amanhã estará oficialmente aberta a RINHA DE FRONTEND.
Divulgaremos após o almoço a especificação com o desafio da Rinha, e a inscrição (tudo super simples, mas divertido). Preparem seus teclados e pincéis de pintar botão
Por enquanto, nosso vídeo de abertura:
11
23
166
Olá Olá
A Rinha tem tomado uma proporção muito bacana na comunidade Front End. Tivemos uma recepção majoritariamente positiva. Gostaríamos de agradecer, vcs são massa! Porém tivemos tb algumas críticas, e nessa thread daremos retorno sobre 5 delas:
5
6
122
Saiu!!! Eis os vencedores da ⚡️ Rinha de Frontend ⚡️ e as menções honrosas. Detalhes na thread.
1. Jônatas Araújo (sem twitter)
2. deyvis0n (pessoa misteriosa sem twitter)
3. Eduardo (
@eu_sou_o_duardo
)
4. Helio Kroger (sem twitter)
5. Vinicius Fonseca (
@distanteagle16
)
4
5
102
Atenção: A rinha de frontend não deve ser levada como parâmetro de competência pra vc. É um desafio que foge aos padrões convencionais de mercado, e com certeza tá fazendo todo mundo aprender (alguns mais, outros menos). Se vc tiver dificuldade, tá safe, a rinha é feita pra isso!
2
3
60
Inclusive, convidamos a todos que dizem que "Frontend é fácil" a participarem da Rinha e demonstrarem a validade dessa tese :D
9
3
62
A gente avisou que era pra estar com a saúde mental em dia antes de entrar na Rinha u.u
2
0
54
Pessoal, está oficialmente encerrada a rinha de front end. Parabéns pra todos e todas que participaram!!!
Um imenso agradecimento a pelo apoio e pela imensa força em todo esse processo.
Vamos analisar as submissões e compartilhar o vencedores em breve!
3
2
51
Essa thread cita todas as pessoas que serão analisadas para a final da rinha. Desse montante selecionaremos os 5 melhores projetos. Se vc foi citado nessa thread, parabens, vc está nas "quartas de finais".
8
4
48
gostaríamos de creditar aqui o pai de todas as rinhas:
@zanfranceschi
que fez acontecer a primeira Rinha (de Backend), dando inicio a essa sequencia de desafios que construiu uma comunidade muito legal e uma prática muito bacana através das Rinhas. tmj zan ^^
0
1
47
entro nas notificações desse perfil e é só barulho de grito, criança chorando, pneu cantando, gente fugindo, chrome travando...
alguém já conseguiu exibir um json inteiro que não seja o small, seja qual for a tecnica de navegação?
9
0
45
alguns numeros da rinha
tivemos ~200 submissões até agora
34 delas marcaram que carregam o giant.json
basicamente 17% dos inscritos na rinha estão carregando o maior JSON de maneira funcional
todo mundo que comenta diz que há alta dificuldade em otimizar a aplicação
1
4
43
olha, se foi só o dropdown, chuto que seja um "details". mas se essa tela inteira é puro html/css e possui um file load client-only como especificado
explica pra gente essa bruxaria pf :D
1
1
42
Status:
Estamos corrigindo os projetos da Rinha. Como são poucas pessoas nessa task (2 rs), nós vamos levar um tempinho. Queremos ter os resultados no dia 20, está bem? Valeu pessoal, até lá :D Estamos considerando uma live pós-anuncio dos/das winners.
1
3
41
Hoje é o ultimo dia da Rinha de Frontend. Foi bom ver vcs sofrendo. Nos próximos dias vamos analisar os projetos e definir quem venceu :D
5
3
40
2. o desafio não é de frontend
é. o desafio é muito de frontend. nele procuramos fugir desse esteriótipo de layout/pinta-botão. um dos maiores desafios que bons frontenders passam é o multi-environment e a escassez de recurso de processamento, dificuldade de acesso, segurança..
1
0
38
Antes de tudo: A rinha é uma brincadeira gratuita. Entretanto, os primeiros 5 lugares receberão prêmios simbólicos. Para detalhes sobre o desafio e implementação, por favor leia a especificação no link, basta clicar em "participe", clonar o repô inicial e começar a codar.
1
0
36
Alguns comentários a respeito da Rinha...
- Correctness e a11y foram os fatores que mais decrementaram notas. Boa parte dos projetos falhava em alguma ação inesperada, e/ou tinha ZERO accessibilidade
+
1
4
36
Esse tweet é pra falar sobre um parceiraço nosso: A CODANTE :D
A Codante foi responsável por construir toda a estrutura da Rinha (em tempo recorde). Eles são brabos. Deixa a gente apresentar a plataforma deles pra vc, que é nacional e open source! Abre a thread pra conhecer 👇
1
4
33
Hoje é o penultimo dia da Rinha de Frontend. De todas as submissões, 10% estão entre os projetos que cumprem o maior requisito de carga. Boa sorte pra todo mundo!
1
3
34
Curiosidade: de todos os projetos enviados para a rinha, ~10% cumpriram o requisito inicial para chegar na final: Carregar - seguindo o layout e de maneira funcional - o giant.json, maior json proposto para o desafio.
0
2
33
5. não sei nem por onde começar, não vou fazer
deixa de ser mole! há toda uma comunidade engajada nesse desafio, super disposta a ajudar. há diversos artigos, posts, videos surgindo sobre diversas tecnicas. há conteudo para diferentes níveis. comece assim que puder e como puder!
0
0
32
3h da manhã e recebo chega uma mensagem no whats rs. 🏆 Temos finalmente o ranking com os 5 ganhadores da Rinha de Front 🏆 e o motivo de terem ganho. Um deles inclusive implementa wasm na solução (será o primeiro? será que não? mistérios). Mais detalhes com o raiar do dia ;D
2
1
31
4. é muito simples de fazer, não vou nem perder tempo
hum... rs... esse desafio engana, viu. participantes podem falar sobre isso com certeza. se vc está pensando assim, tente fazer nem que for o comecinho, sem layout sem nada, só mostrar metade do penultimo maior arquivo rsrs
2
0
29
estamos há 10 dias do final da rinha. toda vez que abrimos as notificações desse perfil é:
alguns poucos aliviados que terminaram, de resto é choro, tiro, porra e bomba... bem como deveria ser :D
2
0
29
1. as outras rinhas foram mais simples
questionaram o fato de termos um sistema, integração com github, forms, profiles, etc. isso acontece pq de cara tivemos o apoio da , que são muito bons em subir essas estruturas muito rápido :) brigado codante!
2
0
25
esse desafio trás o core dos problemas de front em sistemas complexos. claro que vc não verá coisas assim fazendo landings, sites estáticos ou sistemas que são cruds gourmetizados (nada contra, paga nossas contas)...
1
0
25
Resumidamente é criar o seu JSON tree-viewer (client-only) seguindo o layout (que é simples de tudo), e fazer ele carregar o JSON mais parrudo possível da forma mais fluida possível utilizando somente o browser.
1
1
24
preferimos assim para manter a simplicidade de ambos os lados, agilizar nos testes e analise dos participantes, e para manter o debate mais focado em uma vertente (o que tem um lado bom e ruim). no mais: seria legal alguem organizar uma rinha mobile.
1
0
23
mas se vc entrar no mundo dos sistemas modernos que entregam valor com otimização e inovação (netflix, maps, figma, etc), vc chegará em problemas que verá aqui: otimização de recursos, "low-level" frontend e preocupações pra além do seu layout
1
0
23
quer uma treta pra acompanhar? acompanha a rinha de frontend! :D
3
3
22
3. não pode codar mobile nativo
isso foi uma decisão estratégica. mobile liberaria recursos nativos e uma infinidade de memória que deveríamos depois converter em outra infinidade de ambientes de desenvolvimento e emuladores. ou era limitar ou não liberar, preferimos não liberar
1
0
21
Tivemos um número muito pequeno de mulheres participantes da Rinha. Os motivos podem ser muitos, seria interessante as próprias mulheres tomarem parte nisso.
Se vc é mulher e participou da rinha, deixe seu nome/user abaixo pra te darmos o RT de parabéns, representou demais!
2
2
21
Queremos tbm agradecer a Codante por estar apoiando o evento, e por terem sido parceiraços na construção dessa brincadeira. Não deixem de conferir essa plataforma de projetos que é made in brazil, open source, e sensacional!
1
0
21
Alguns trabalhos se destacaram mesmo não recebendo o pódio. Menção honrosa para:
- Gean Kaminski (
@gpkaminski
)
- Bruno Calou (
@brunocalou
)
- Thales (
@mbthales_
)
- Junior Albuquerque (
@jnralb1
)
- Andrew Feitosa (
@andrody
)
- Alessandro Vinicius Siqueira (Sem twitter)
1
2
20
No desafio disponibilizamos o layout no figma e arquivos de teste dos mais variados tamanhos e números de nós. Sugerimos muito que vc comece criando uma solução que carregue os menores antes de partir parar os gigantes :D
1
0
20
Sem olhar na google, sem testar, respondendo da maneira mais rápida: O catch abaixo vai pegar o erro?
try {
setTimeout(() => {
throw new Error('Throw');
}, 1000);
} catch(error) {
console.error('Catch');
} finally {
console.log('Done');
}
Sim
216
Não
477
5
2
20
Sim, vc pode utilizar a stack que vc quiser (desde que client-only). Essas e mais informações como: criterio de aceite, criterio de avaliação e outras cositas mais vc tbm encontra na SPEC nesse link que deixamos aqui.
1
0
17
Qualquer duvida, dificuldade, sugestão ou choro... deixa aqui pra gente na thread.
Boa sorte pintadores e pintadoras de botões!!!
1
0
13
- Ronnie Brito (Sem twitter)
- Toshi Kurauchi (
@toshikurauchi
)
Esses projetos citados com "-" foram muito interessantes seja do aspecto de construção ou usabilidade.
1
0
11
Quais pessoas vocês gostariam de ver dando um workshop sobre algum tema de frontend?
Na plataforma do Codante tem uma parte com workshops de front-end ó: .
Eles estão buscando especialistas para gravar esses workshops. Se tiver sugestões de tema manda tb!
3
1
11
- Boa parte dos projetos não implementou estruturas de decisão para entender se um arquivo é pequeno o bastante pra ser mostrado inteiro, ou grande o bastante pra ser quebrado/virtualizado. A grande maioria foi 8/80: ou virtualiza tudo, ou tenta mostrar o máximo possível.
0
0
12
Todos esses/as mencionados/as enviram projetos que carregam o giant.json. Parabéns pessoal!
2
0
10
- Para performance o que mais pegou foi virtualização: após muito scroll a perfomance vai caindo exponencialmente devido ao acumulo de Nodes do DOM, dai a necessidade de virtualizar ou fazer algum tipo de GC de Nodes. Boa parte dos projetos perderam performance por isso.
1
0
11
- Tab navigation foi disparada a maior pedra no sapato e curiosamente algo extremamente simples de se resolver. A gigantesca maioria dos projetos não era navegável via Tab.
1
0
11
- A ergonomia do projeto tb contou bastante, ex: como navegar do começo ao final de um JSON gigante e voltar? quanto tempo leva? como fica a UX? Em alguns projetos, por mais que o giant.json carregasse bem, isso era quase impossível, por ex.
1
0
10
- Tirando o file size, Vanilla JS não demonstrou tanta diferença de performance e usabilidade em comparação a projetos feitos com frameworks (com exceção dos que implementaram Wasm)
1
0
9
undefined! :D
Comecei a fazer a
@rinhafront
, decidi fazer com JS vanilla msm, vamos ver no que dá.
Considerações até o momento:
- Vou precisar de recursão
- [object Object]
o comecinho foi, agora vem a parte casca grossa de fazer funcionar exibindo as keys: values todos
1
0
6
0
0
7
A rinha se decidiu por pequenos detalhes, e demos o primeiro lugar par ao projeto mais completo como um todo, que foi o que obteve notas altas em basicamente todos os requisitos e se destacou de maneira comparativa. Mas Da lista de todos acima, as diferenças são pequenas.
1
0
8
Haverá uma live em breve comentando cada projeto vencedor e o que os fez estar no pódio da Rinha. Parabéns para todos, foi um evento muito massa!!!
0
0
7
Abaixo segue os links do código e do live dos projetos ganhadores:
1.
Github
Live On
1
0
6
O Codante foi criado esse ano e ainda é uma plataforma nova. Atualmente todos os conteúdos estão disponíveis de forma gratuita no nosso site e no YouTube. Nossa ideia pro futuro é continuar trazendo conteúdos gratuitos e ter um plano "PRO" com acesso a conteúdos mais exclusivos.
0
0
6
A Kleci subiu um PR de warning e um de fix de algumas issues que tinhamos no processo da Rinha. Obrigado Kleci, e parabéns pela participação!
1
0
6
O é uma plataforma open-source que surgiu com a vontade de fugir da ideia de que você precisa pagar um curso caro para aprender ou evoluir na tecnologia.
1
0
6
Quer aprender um framework novo de JS? Tente resolver um Mini Projeto usando essa tecnologia. Quer uma base teórica ou atualização em algum tema? Nós temos Workshops online com profissionais do mercado justamente para isso.
1
0
5
A premissa do Codante é que a melhor forma de evoluir no front-end é praticando e quebrando a cabeça com código. É por essa razão que quisemos apoiar a Rinha de Front-end. É exatamente nisso que acreditamos!
1
0
5
Obs: algumas pessoas que não possuem twitter tb foram selecionadas. Nesse caso entraremos em contato via github caso sejam finalistas.
1
0
4
5.
Github
LiveOn
1
0
3
@GigioJr
o motivo é que não temos recurso para testar. quando chamamos pessoas para ajudarem nos testes (que muitas vezes envolvem VMs complexas e definições de hardware virtualizado pra ficar justo), não apareceu ngm.
1
0
2
4.
Github
LiveOn
1
0
3
🫶
@rinhafront
quando consegui fazer carregar o large.json em 0.5s tava achando muito facil, ate ter que carregar o giant e começar a ter o Código de erro: Out of Memory kkkkkkkkkk, estou ha 2 dias surtando
0
0
1
0
0
2
@mizael_melo
@distanteagle16
no prob, vc não pode usar um lib que resolva o desafio per-si, ou nenhum recurso server side. "the resto" tá tranquilo
1
0
1