En el #CSS lo primero que hacemos es agregar width y height al 100% al <body> y <html> para que nuestro layout ocupe toda la página. Y bordes a los elementos hijos.

[3/13]

Read 13 tweets

IFMinds

@IFMindsHQ

🧵

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

Josiah Winslow

@WinslowJosiah

@AnagramPost

I'm a web developer, and a lover of anagrams.

Here's how I create animated #anagrams for the @AnagramPost. (LONG THREAD 🧵)

#webdev #html #css #javascript #php #thread

https://twitter.com/WinslowJosiah/status/1595880729052938241

In November 2022, I made a Python program to animate anagrams of tweets as an experiment.

It wasn't very easy to use or maintain, though. It's over 1,000 lines, ~160 of which are to work around Pygame being unable to wrap text or render emojis in color.

https://twitter.com/WinslowJosiah/status/1595880729052938241

Sometime later, I decided to try refactoring it to make it less of a headache.

But partway through, I thought to myself, "Wait, why am I trying to recreate a web layout in Pygame? I should just...do it on the web!"

So I did.

Read 30 tweets

MarcoBrunoD3v 🇧🇷 🇸🇪

@marcobrunodev

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

🎅 Jorge Baumann.js

@baumannzone

🔥 ¿Sabías que #HTML tiene una etiqueta especial llamada `template`?

Te sonará si has trabajado con #vuejs. Pero no te preocupes si no la conoces, te lo explico aquÍ abajo.

[ HILO ] ⇣

La etiqueta `template` de #HTML te permite tener contenido oculto en tu documento HTML. Es como una guarida secreta* para tu contenido.

⚠️ *¹ No lo uses para como sistema seguro para ocultar contenido.

Y... ¿para qué? Tal vez te sirva para mejorar el #rendimiento de tu #web.
El contenido de la etiqueta no se añade a la página hasta que tú se lo indiques. (Sí, con #JavaScript)

Read 12 tweets

Ángel Cano Ydáñez

@equisele

Aquí te dejo unos cuantos ejemplos de maquetación #HTML y #CSS con diferentes frameworks o sin ellos con la ayuda del polifacético #ChatGPT …👇

1/ Maquetación de una página "acerca de" genérica con #Bootstrap5 con varios párrafos y una imagen.

2/ Maquetación de una Home generalista para una Startup con #tailwindcss. Algunas pequeñas correcciones ¡y voilá! Obviamente, se trata de un comienzo. Sigamos adelante…

Read 9 tweets

nsi.xyz

@nsi_xyz

Une IA peut-elle vous aider à créer un site web primitif ?
Peut-elle répondre à vos questions sur le HTML / CSS ?
#OpenAI #GPT3 #HTML #CSS et évidemment spé #NSI 1/n

Une IA va répondre à mes questions sur HTML / CSS
Tu connais le #CSS et le #HTML ?
A quoi sert le #javascript ?
Et on peut créer un site web ensemble ?
#OpenAI #GTP3 2/n

Une IA va répondre à mes questions sur HTML / CSS
Comment dois je faire pour créer un site web ?
Et on le trouvera facilement sur Google ?
#OpenAI #GTP3 3/n

Read 16 tweets

Erick Wendel

@erickwendel_

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

@nodejs

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

@nodejs

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

Freddy Montes

@fmontes

🙃 ¿Te quedas pegado cuando intentas hacer un proyecto de #programacion?

😉 Te explico un método para salir de esa pega y evitar la frustración.

🧵 THREAD

🧠 Cuando no puedes arrancar es porque estás viendo la aplicación como una sola tarea gigante y tu cerebro está tratando de resolverla, pero en realidad lo que debes hacer es resolver muchas tareas pequeñas.

➡️ Vamos con un ejemplo.

🤑 Desarrollemos un #app para calcular propinas.

Ok, pero ¿Por dónde comienzo?

☝🏽 Lo primero yo recomiendo es hacer un pequeño dibujo de como se va a ver con anotaciones de como va a funcionar.

Read 18 tweets

El Bit Nómada

@bitnomada

ROADMAP para ser BACKEND Developer

¿Queréis un roadmap con RECURSOS GRATUITOS para ser un gran desarrollador BACKEND?

Os dejo 7 recursos totalmente GRATIS para aprender las BASES que cualquier desarrollador BACKEND debe conocer

🧵👇

#backend #code #coding #programming #coding

1️⃣Aprende las BASES DE INTERNET

Antes de empezar a programar, entiende qué es Internet, qué es el protocolo HTTP y cómo funciona un navegador

Aquí tenéis un artículo muy interesante

vox.com/2014/6/16/1807…

@freeCodeCamp

2️⃣Frontend básico (HTML y CSS)

⚠️Opcional pero RECOMENDABLE⚠️

Aunque quieras ser desarrollador backend, es importante que conozcas las bases del frontend, es decir: #HTML y #CSS

Tienes el curso de @freeCodeCamp para aprender HTML, CSS y Responsive Web

freecodecamp.org/learn/2022/res…

Read 10 tweets

Freddy Montes

@fmontes

Hay 5 herramientas que yo uso en todos mis proyectos #web.

1. Iconfinder
2. Un generador de #css gradientes
3. Descargar y usar Google Fonts como Web Fonts
4. Y un lorem ipsum para imágenes
5. La mejor documentación

Acá el thread 🧵

#codenewbie #100daysofcode #webdeveloper

Para descargar iconos uso iconfinder.com puedes descargarte los iconos en #svg o png hasta 512px y hay muchos iconos gratuitos de calidad. 1/5

Nunca me he aprendido la sintaxis de #css gradients así que esta herramienta me permite generar el código con una interfaz bien bonita: cssgradient.io 2/5

Read 7 tweets

Freddy Montes

@fmontes

🌅 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

Csaba Kissi

@csaba_kissi

6 Youtube HTML and CSS courses for beginners

Thread 🧵👇

1. HTML Tutorial for Beginners: HTML Crash Course

Learn HTML using this beginner's HTML tutorial to pursue a career in web development.

You will learn all you require to get started in this HTML lesson.

⏰ Length: 1:09:33

2. Learn HTML – Full Tutorial for Beginners (2022)

Over 4 hours of HTML!

This comprehensive introductory lesson will teach you the fundamentals of web programming.

HTML5 is taught in this course.

⏰ Length: 4:07:29

Read 11 tweets

███.dissent.is/████████████

@sms2sms

https://twitter.com/sms2sms/status/1571505547077107712

#WilliamJames
#LudwigWittgenstein
#AlfredKorzybski
#PaulWatzlawick
#SilviaStaubBernasconi
#NiklasLuhmann
#DirkBaecker

what was #CAPUTALISM?
#COMMONISM is the new #NextSociety

🍄👾🚀MYZELT EUCH
dissent.is/WorldSociety reloaded

#Xerocracy is Anarchy by Design

https://twitter.com/sms2sms/status/1571505547077107712

bin noch immer am rumfragen für die produktion von einem one-pager ;-)

@wikidata

für das #wp #wordpress-plugin zur integration von @wikidata habe ich auch keine freunde gefunden. nicht ein mal gegen angebot von geld ;-)

Read 27 tweets

Freddy Montes

@fmontes

🤖 ¿La inteligencia artificial te reemplazará?

¡NO! Por ahora vino a hacerte tu trabajo de #developer y #UIDesigner más fácil.

✅ 7 utilidades de inteligencia artificial para #WebDevelopers

❤️ Ayudame con un RT

🧵 HILO

@GitHub

1️⃣ Copilot creado por @GitHub es un "autocompletado" de código que utiliza AI para ofrecerte sugerencias a tu código, pero completa una función completa solo con el nombre, por ejemplo.

Está en beta privada, anótate en la lista: copilot.github.com

@github

@github @tabnine parecido a Github Copilot, pero se puede usar en cualquier editor de código y no está en beta cerrada.

Tiene una versión paga y una gratis y promete ser mejor que Copilot.

tabnine.com

Read 7 tweets

Freddy Montes

@fmontes

🌅 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

Freddy Montes

@fmontes

🚨 NUNCA digas "NO" cuando en una entrevista te pregunten:

¿Tienes preguntas?
➡️ No es una inocente pregunta, es para probar si tienes interés.

💬 Algunas ideas de preguntas, HILO 🧵

#devjobs #codenewbie #100daysofcode

¿Cuántos son en el equipo?
¿Cuál es el tech stack?
¿Usan agile, waterfall, otro?
¿Qué control de versiones?
¿Tienen unit e integration tests?
¿Cómo se componen los equipo?
¿Qué sistema de tracking usan?
¿Qué herramientas de comunicación?
¿La mayoría usa mac o windows?

@kamihack

- ¿Cómo evitan el burnout de los empleados?
- ¿Cómo miden el éxito de una persona en esta posición en sus primeros meses?
- ¿Cuánto tiempo pasa desde que aprueba un feature hasta que ese código llega a producción?
- ¿Podría nombrar tres metas del equipo en 2022?

Por @kamihack

Read 6 tweets

Freddy Montes

@fmontes

🌅 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

Freddy Montes

@fmontes

¿Pesadillas con los memory leaks en #JavaScript?

Hay dos causas comunes:

1. Event listeners
2. Elementos eliminado del DOM, pero referenciados.

Te dejo dos videos que explican como usar el browser para detectarnos y arreglarlos.

🧵

@MicrosoftEdge

El primero de @MicrosoftEdge tiene una herramienta para ver los Detached Elements del DOM

LINK:

En la última versión de Edge ya viene sin flag.

@googlechrome

El siguiente el de @googlechrome y explican como utilizar los Heap Snapshots en la pestaña de Chrome para detectar memory leaks.

Read 4 tweets

Luciano Mammino 🧡 Node.js

@loige

"Yo, why are #JavaScript and its ecosystem so messy?!" 😡

Well, I am glad you asked... Let me tell you a story! 🤓

🧵👇

@BrendanEich

For starting... #JavaScript was not designed to be the language that it is today!

JS was created in 1995 by @BrendanEich for Netscape, a web browser that was trying to come up with a language to make the web more interactive

@BrendanEich

@BrendanEich #JS wasn't related w/ #Java, so why did they call it Java-Script?! Duh! 😳

Java was trendy! it was possible to build interactive sites by embedding Java apps in pages (applets). So it was mostly a #mktg move: "JS: the lightweight Java alternative" or something like that I guess

Read 40 tweets

Discover and read the best of Twitter Threads about #HTML

Most recents (24)

Related hashtags

Discover and read the best of Twitter Threads about #HTML

Most recents (24)

Related hashtags

Did Thread Reader help you today?