Discover and read the best of Twitter Threads about #Frontend

Most recents (24)

CSS ecosystem can be confusing.

I've created a mind map to try to make sense of some of it.

What are your favourite tools to style your apps?

#frontend #css #webdevelopment
Naming patterns:

- BEM: reusable components and code sharing
- OOCSS: promotes code reuse and modular design
- Suit CSS: structured class names and meaningful hyphens
Utility based:

- Tailwind: utility-first CSS framework
- Daisy UI: customizable and themeable Tailwind extension
- Flowbite: faster website development with Tailwind components
- Atomizer: unopinionated CSS utility library
Read 9 tweets
¿Quieres introducirte en la #programacion 💻 y en la #IA con cursos GRATIS de #Google? ¡En este HILO 🧵te dejaré 5⃣ recursos 🔝 para que puedas introducirte de forma gratuita en estos ámbitos la #IngenieriaInformatica! 🔥🔥🔥⬇️⬇️⬇️
learndigital.withgoogle.com/activate/cours… Con este curso de 1⃣h, puedes familiarizarte con los principios básicos de la #programacion. Más que recomendable. #tecnologia #it #software
learndigital.withgoogle.com/activate/cours… En este curso de 4⃣0⃣h aprenderás las bases del #desarrolloweb moderno, es decir, #HTML y #CSS. La base para ser programador #frontend 💻
Read 8 tweets
¿Eres junior y te dan miedo las entrevistas técnicas? 😅🤔 Te voy a dejar 5⃣ recursos 🔝 totalmente GRATUITOS para que mejores muchísimo haciendo entrevistas técnicas y puedas conseguir ese trabajo que tanto quieres. 🧵HILO ⬇️⬇️⬇️ #informatica #tecnologia #programacion #it
En primer lugar, si estás buscando tu #primerempleo, este vídeo de @AlgoritmoSalvaj te servirá como base para NO cometer los 5⃣ errores más comunes que cometen los devs junior cuando lo buscan. ❌ ¡NO los cometas! #informatica #tecnologia #programacion
Para continuar, en este vídeo @victorobs aborda preguntas que son típicas de entrevistas y test para #programadores #junior. ¡Échales un vistazo y prepara tus próximas entrevistas! 💪😎 #informatica #tecnologia #programacion
Read 7 tweets
🧵

1/ Get rid of complex, traditional backend servers while building your #websites.

According to @HTTPArchive, now more than 1% of ALL websites are based on the Jamstack architectural approach

👇

(image by C. Fayock)

#webapp #coding #developer #innovation
2/ Whether you are an experienced or a novice web developer, your main, urgent goal is to avoid:

🐢Slow loading times

🔒Security vulnerabilities

📈Scaling issues

😵Headaches

#webdev
3/ The Jamstack is a way of building web applications that utilizes modern tools and technologies based on #JavaScript, #APIs, and Markdown (J.A.M. stack), in order to decouple the #frontend from the #backend
Read 14 tweets
Arquitetura de pastas para projetos #React

Minha base são as arquiteturas: #ITCSS e #RSCSS.

Visão geral do projeto e na thread mostro como organizo a pasta 📂𝙨𝙧𝙘

📂.𝚐𝚒𝚝𝚑𝚞𝚋
📂.𝚟𝚜𝚌𝚘𝚍𝚎
📂𝚊𝚙𝚒
📂𝚙𝚞𝚋𝚕𝚒𝚌
📂𝙨𝙧𝙘📌
∟📂🧵

📌Onde está
🧵Próximo passo
📂𝙨𝙧𝙘📌
∟📂𝚊𝚜𝚜𝚎𝚝𝚜🧵
∟📂𝙶𝚕𝚘𝚋𝚊𝚕𝚂𝚝𝚢𝚕𝚎𝚜
∟📂𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜
∟📂𝚕𝚊𝚢𝚘𝚞𝚝𝚜
∟📂𝚙𝚊𝚐𝚎𝚜
∟📂𝚜𝚎𝚛𝚟𝚒𝚌𝚎𝚜
∟📄𝚖𝚊𝚒𝚗.𝚓𝚜𝚡
∟📄𝚛𝚘𝚞𝚝𝚎𝚛.𝚓𝚜𝚡
📂𝙨𝙧𝙘
∟📂𝚊𝚜𝚜𝚎𝚝𝚜📌
∟📂𝚏𝚘𝚗𝚝𝚜
∟📂𝚒𝚖𝚊𝚐𝚎𝚜
∟📂𝚒𝚌𝚘𝚗𝚜
∟📂𝙶𝚕𝚘𝚋𝚊𝚕𝚂𝚝𝚢𝚕𝚎𝚜🧵
∟📂𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜
∟📂𝚕𝚊𝚢𝚘𝚞𝚝𝚜
∟📂𝚙𝚊𝚐𝚎𝚜
∟📂𝚜𝚎𝚛𝚟𝚒𝚌𝚎𝚜
∟📄𝚖𝚊𝚒𝚗.𝚓𝚜𝚡
∟📄𝚛𝚘𝚞𝚝𝚎𝚛.𝚓𝚜𝚡
Read 17 tweets
Ya sabes que #Git 🧡 es básico para trabajar como #programador. ¡En este HILO 🧵te dejo 5⃣ cursos GRATIS para que aprendas esta herramienta de #controldeversiones DESDE CERO! ⬇️⬇️⬇️ #informatica #programacion #backend #frontend
Aquí, en sólo 1⃣h, con @_nasch_ , todo lo básico que necesitas para empezar con #Git 🧡: comandos básicos, configuración, ramas... MUY 🔝🔝🔝#informatica #programacion #backend #frontend #controldeversiones
¿Qué quieres un curso más amplio de #Git 🧡? ¡Aquí en 5⃣h @jonmircha te da muy buenas bases de esta herramienta de #controldeversiones! ¡Más que recomendable! #informatica #programacion #backend #frontend
Read 7 tweets
E hoje é dia de exterminar mais uma confusão frequente: Você é back ou frontend? Eu sou Dev JavaScript 🤯🤩

🧵/1

#nodejs #javascript #webinar #tutorial #devlife #100daysofcode #frontend #html Image
Hoje, dia 22/11 às 19hrs vou fazer uma super live lá no canal para contar sobre lições importantes do @nodejs que você pode também usar no navegador (ou em qualquer outro lugar que roda JS)

/2
Eu recebo frequentemente dúvidas sobre alguns conteúdos do meu canal e treinamentos, algo como "ah, mas sou frontend, seu conteúdo de @nodejs é para backend"

A verdade, é a JS é uma só, tudo que tem na JS do navegador, tem no JavaScript do Node.js, #Bun e @deno_land

/3
Read 6 tweets
L'USDT ne publie pas de preuves de ses réserves 😨
L'USDC de votre adresse peut être bloqué à tout moment 🔒
DAI est composé à 80% d'USDC 🤮

Comment retrouver un réel contrôle sur son argent et assainir l'écosystème ? 🤔

Découvrons le stablecoin le plus résilient du marché 👇🧵 Image
Si vous préférez une version Blog, ce thread est déjà disponible sur mon medium 👇
cesarioo.medium.com/le-lusd-mod%C3…
[0 - 5] Introduction

Le concept de #blockchain décrit par Satoshi Nakamoto dans le #whitepaper du #Bitcoin montre la décentralisation comme un tiers de confiance afin de ne plus se reposer sur des plateformes aux agissements opaques 💭 Image
Read 43 tweets
¿Quieres practicar haciendo proyectos con #React 💙 y no tienes ni idea de qué hacer? ¡En este HILO 🧵te dejo 5⃣ proyectos 🔝 con React para crecer como #programador! #informatica #frontend #javascript #typescript
Este vídeo de 5⃣h aprox. de @vidamrr es 🔝. 5⃣ proyectos para aprender desde un nivel más básico: lista de tareas, widget de clima 🌥️, selector de emojis... #informatica #frontend #javascript #typescript
Aquí @vidamrr nos trae 5⃣ proyectos de #React 💙 más avanzados: un acortador de URLs, un clon de TikTok, componentes estilo Notion... #informatica #frontend #javascript #typescript
Read 10 tweets
Hoy en un nuevo episodio de Twitter es mi #StackOverflow, os traigo una duda de #Angular ❤️, que entre que soy junior y hace 🔟 meses que no lo toco aprox. lo tengo un poco oxidado. Dejo la duda por aquí, os cuento mis sospechas y a ver cómo lo resolvemos. #typescript #it
Aquí tenemos el menú que estoy intentando implementar. Este sería el HTML del componente public header. Teóricamente debería funcionar. #angular #programacion #typescript
Aquí tenemos el módulo de Layout, que creo que es por dónde puede estar el problema, pero no acabo de identificarlo. #angular #programacion #typescript #frontend
Read 8 tweets
GitHub is a gold mine of resources for all kinds of developers.

Here are 10 GitHub repositories to help you become a better front-end developer.

Thread 🧵👇
{1} Front-End-Checklist

🗂 The perfect Front-End Checklist for modern websites and meticulous developers

🔗 github.com/thedaviddias/f…
{2} Frontend-dev-bookmarks

A manually curated collection of resources for frontend web developers.

🔗 github.com/dypsilon/front…
Read 14 tweets
🌅 Buenos días 🌅

¿Buscando proyectos para practicar o para portafolio?

🧵 Te dejo 3 que me gustan por acá

#frontend #webdev
Desarrollar una pagina de producto para crowfunding y aprende:

1️⃣ Responsive design
2️⃣ Transiciones en hover states
3️⃣ Layouts con #CSS

frontendmentor.io/challenges/cro…
🏠 Room homepage

El layout de este está retador, pero te queda un proyecto interesante para mostrar en tu portafolio.

frontendmentor.io/challenges/roo…
Read 5 tweets
Au 3 Novembre 2022, 13% de la capitalisation du marché #crypto est constituée de #stablecoins 🏦

Combien connaissent leur fonctionnement 🤔

À la fin de ce #thread, vous comprendrez le mécanisme derrière les plus grands stablecoins et leurs désavantages pour mieux s’en protéger.
[0 - XX] Ce thread vous apprends

• Le mécanisme derrière ce modèle économique 💰
• Son utilité 🤔
• Une présentation des différentes alternatives: $USDC, $DAI et $LUSD 👍

En 5 minutes.
[1 - XX] Retrouvez ce thread en format blog sur mon medium 👇
cesarioo.medium.com/les-stablecoin…
Read 45 tweets
#RxJS 🐉es una librería básica para trabajar con #Angular ❤️. ¿Quieres aprender a trabajar con esta librería GRATIS y DESDE CERO? ¡Adentro HILO 🧵! ⬇️⬇️⬇️ #frontend #programacion #software
En menos de 1⃣ hora, @domini_code nos hace una magnífica introducción a los conceptos básicos de #RxJS, a través de ejemplos prácticos. MUY recomendable. #frontend #angular #programacion #typescript #software
Este vídeo de Laith Academy da una introducción a esta librería, abordando los conceptos más básicos de una forma muy masticadita. 1⃣h para meter los pies en el barro de #RxJS de forma apropiada. #frontend #angular #programacion #typescript #software
Read 9 tweets
Bienvenidos a mi twitter profesional. Aquí encontrarás contenido relacionado con #programacion 💻y #psicologia 🧠. ¡Sígueme para no perderte nada de este contenido! Aquí te dejo todos los hilos que he ido haciendo, con muchísimo contenido útil y gratis. Hope it helps 😉⬇️⬇️⬇️ #it
Read 22 tweets
Te dejo un HILO 🧵con los 5⃣ mejores recursos para #aprender #Angular ❤️ desde cero (Y GRATIS). ¡Sigue leyendo! #informatica #frontend #typescript
Aquí tienes un tutorial de casi 5⃣ horas de @domini_code dónde aprenderás desde los conceptos básicos de #Angular ❤️ hasta crear una aplicación sencilla para ponerlos en práctica #informatica #frontend #typescript #javascript
Si buscas algo más avanzado, aquí tienes un curso de 1⃣7⃣h de @freeCodeCamp dónde vas a ver desde lo más básico (introducción a #TypeScript 💙, introducción a #Angular ❤️) hasta conceptos más avanzados como Routing Avanzado, Formularios Reactivos...
Read 9 tweets
Ok, let's try something different. Useful technical/business thread for #web #makers from me.

🔌 How to build @atlassian Jira App (in #React) and business around it and why you should actually think of it!

Thread: 🧵
@Atlassian 2/12 We started @testomatio (test management system for #qa) as a classical #SaaS app but at some point, we built a Jira plugin as a complimentary interface.

The feedback from clients surprised us. Some clients preferred to use @testomatio only via Jira plugin

Why? 👇
3/12 Jira is still the source of truth for many companies in the world. And if you want to win small & big you should adjust to business needs. And business works primarily on Jira.

One unobvious conclusion:

Business doesn't want to have another app or even leave Jira
Read 13 tweets
🌅 Buenos días 🌅

¿Buscando proyectos para practicar o para portafolio?

🧵 Te dejo 3 que me gustan por acá

#frontend #webdev
Desarrollar una pagina de producto para crowfunding y aprende:

1️⃣ Responsive design
2️⃣ Transiciones en hover states
3️⃣ Layouts con #CSS

frontendmentor.io/challenges/cro…
🏠 Room homepage

El layout de este está retador, pero te queda un proyecto interesante para mostrar en tu portafolio.

frontendmentor.io/challenges/roo…
Read 5 tweets
🌅 Buenos días 🌅

🌟 Aprender #frontend. El path más perfecto jamás creado (es broma ¿o no?)

1. #HTML y #CSS
2. Proyecto
3. Proyecto
4. Proyecto
5. #JavaScript y proyecto
6. Proyecto
7. #React y proyecto
8. Y más proyec...

Te dejo 4 sitios donde encontrar proyectos 🧵
Resuelve los desafíos de #HTML, #CSS y #JavaScript del mundo real mientras trabajas con #disenosui profesionales.

frontendmentor.io/challenges
Mejora tus conocimientos de #HTML y #CSS practicando con plantillas de diseño reales. Y ofrecen un canal de Slack para preguntas y dudas.

codewell.cc/challenges
Read 6 tweets
5 recursos GRATUITOS para APRENDER JAVASCRIPT

¿Quieres aprender a programar desde 0 con uno de los lenguajes más usados del momento?

Os dejo 5 cursos totalmente GRATIS para aprender a programar con JAVASCRIPT

🧵👇

#backend #frontend #javascript #code #programming #coding
1⃣ Curso de JavaScript para Principiantes de @FaztTech

Muy buen curso donde aprenderás qué es JavaScript, qué podemos hacer con él, las herramientas necesarias y las bases de la programación. Todo eso en 2 horas de contenido gratuito 📽️

2⃣ Curso de JavaScript completo desde CERO

Si prefieres el contenido del crack de @carlosazaustre, tiene en su canal de Youtube un curso muy completo de JavaScript donde tienes una síntexis muy buena de las bases de JavaScript 👌

Read 8 tweets
✅ ¿Quieres practicar #frontend sin quedarte pegado?

✨ Te preparé un ejercicio para hoy ✨

👉🏽 AQUÍ EL CÓDIGO: codepen.io/fmontes/pen/QW…

🧵 Thread con tareas y pasos a realizar para completarlo.

❤️ RT please
La aplicación es un #webapp para crear de facturas que les permite a los usuarios crear facturas agregando y/o eliminando ítems.

Los ítems consisten en

- Descripción
- Precio

La aplicación debe calcular el total a medida que se van agregando o ítems.
Analicemos el diseño.

Es una sola pantalla con dos estados:

🪫 Sin ítems:
1. Formulario: descripción, precio y botón
2. Mensaje de "no hay ítems"

🔋 Con ítems:
1. Formulario: descripción, precio y botón
2. Líneas de la factura con botón para eliminar
Read 17 tweets
Advanced Frontend Development skills to learn in 2022🔥🚀‼️

#techtwitter #webdeveloper #FrontEnd #FrontEndDeveloper

>>> A Thread 🧵👇
1. Advanced Data visualization

Data visualization is the presentation of data through graphs, pictures, and other visual mediums.
It allows decision makers to see analytics and comprehend complex concepts.

Learn to design advanced data visualization with D3.js library.
2. Drag & Drop

Drag and Drop(DnD) allows us to make element on our page draggable & movable.

Use REACT-DND library to build complex drag & drop interfaces.
Read 12 tweets
Hace 20 años cuando empece a programar me inventaba mis propios proyectos para practicar y mejorar.

✨ Tú no tienes que hacer eso ✨

Te dejo 10 #sitiosweb para practicar y mejorar tus skills como programador.

❤️ ¿Me ayudas con un RT?
Empecemos con el más conocido, HackerRank.

No solo tiene ejercicios de algoritmos, sino también una sección para prepararte para una entrevista.

Además, tener un buen puntaje en HR te puede sumar puntos cuando estés buscando empleo.

hackerrank.com
Code Wars tiene "kata" que son pequeños ejercicios de código para afianzar tus conocimientos.

Soporta desde #JavaScript hasta #Ruby o #Go o #PHP, lo que quieras.

Los ejercicios comienzan fácil, pero se van poniendo más complicados.

codewars.com
Read 12 tweets
💪🏽 ¿Quieres practicar o mejorar tu portafolio y no tienes ideas de proyecto?

😉 I GOT YOU

✨ 3 ideas de #webapps para practicar #frontend (incluye wireframes)

❤️ Ayudame con un RT

🧵 HILO
Un slider de productos responsive usando solo #CSS sin JavaScript.

1. Debe ajustarse a todos los tamaños de pantalla
2. Swap event para hacer el slide
3. Snap al borde de cada item

Hint: "css scroll snap"
#app para monitorear el precio de crypto (sí que hace falta 😢)

1. Un campo para buscar tokens
2. Agregar a la lista
3. Boton para eliminar

- API de precios: coinmarketcap.com/api/
- Backend: localstorage for v1 y un BaaS para v2
Read 5 tweets

Related hashtags

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3.00/month or $30.00/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!