Learn how to use Emmet to write HTML code faster in VS Code docs.emmet.io/... #shorts #html #programming Collect all the VS Code speed tips here • 25 VS Code Productivit...
That's why I know just code regardless of whether it's best practice or not, then refactor and optimise later. If you're fairly new like me, then it's the best way to go. Eventually, you'll start to make the right decision from the get go.
just continuing the flame ... HTML stands for "HT Markup Language". Markup Language is a way of annotating. You most probably mean marking up HTML, or are you programming a engine which is parsing HTML?
- Asks if HTML is a programming language - Receive a lot of "NO HTML IS NOT A PROGRAMMING LANGUAGE YOU DEGENERATE" - Still calls HTML a programming language - Refuses to elaborate
If we start including declarative programming as “programming” then I guess Microsoft Word saving to XML is an IDE, as is anything that saves to SVG, so Adobe a pretty great for programming in.
jokes and plugin development aside, you can get some real programming done with Word's VB editor and adobe's Dreamweaver (js) and Animate (actionscript) ;)
You include libraries with functions that are often used declarativley . HTML is not a programming language because it is not Turing complete and neither is saving to xml in word
Also sometimes we might want to have numbered ids in successive lines for example if we are building a grid system so instead of doing #something_1 + tab #something_1 + tab ... n times, you can do #something_${}*n -> n is number this will generate numbers from 1 to any number successively. Kind of doing a for loop from i = 1 to n times :)
I love HTML because I can almost understand it 😂 I’m not a coder, but my brother taught me some things about HTML when we were growing up and I’ve worked on a lot of WordPress sites, so I can kinda see how a webpage works from reading the HTML file, and that’s fun
Started to use Emmet a couple of years ago and it is a productivity booster. In docs page there is a cheatsheet for the one's that can't remember the commands, which are a lot.
I have learnt a lot of new things that I have never worked with from your videos, like AWS, nginx, kubernetes, graphQL(and other dbs), typescript to name a few. One thing that I don't understand is how they work together. I would really love to see a video where you design a mock system using all of these (and possibly more) and explain each of their roles and why you chose it (kinda like your reverse-cloud migration video using raspberry pi). Whenever I think of a software architecture I think of them as several layers that interact with each other. However, I am unable to assign which layer what belongs to by watching a stand alone tutorial about a single tool. Btw, I am a college senior pursuing CS major and I love your content. Thanks for all the awesome contents.
I think he made a video about that but kind of sarcastic but still provided useful information in the end. Search "over engineering of tech stack" in his channel.
@@immortaldev1489 I could argue that markdown languages (which include markdown and HTML) are also programming languages as well, since they are programming the text's formatting, but that's a tough path to die on.
I was thinking about this the other day when I had to create an unordered list with 14 li's AND I COULDN'T FIGURE OUT KEYWORDS TO FIND THE SHORTCUTS, THANK YOU FOR THIS VIDEO!
When I first started coding, I had to learn all of this shortcuts just to feel comfortable typing. To be honest HTML its easy but having to type all this opening and closing tags its a pain in the butt
This genuinely seems like way more work than just typing it out and using copilot for the repetitive stuff / closers. Though this video was a tad before Copilot was as powerful as it is now.
I like this because right now im ising microsoft paint to draw my code and then i have another paint file for what its supposed to look like. This is a little bit faster
If only i had ideas pop in my head fast enough to use these tools.
Relatable 😂
69 likes nice
He has a video for that too.
you have to be llike me
hard code the whole feature till it works
than after that editing it while crying and regretting my decisions
That's why I know just code regardless of whether it's best practice or not, then refactor and optimise later. If you're fairly new like me, then it's the best way to go. Eventually, you'll start to make the right decision from the get go.
“Don’t touch the mouse yet” vim users: What the hell is a mouse
Vim users with a tiling WM
@@arjdroid Thats me lol
"oh i dont have any mice"
XD LOL
lol
Fireship: Makes poll asking if HTML is a programming language which received 85% votes as NO.
Also Fireship: Uploads video about HTML Programming.
You missed the !programming hint ;)
Programming isn't necessarily tied with a programming language
@@alexismandelias it actually is, and even if it wasnt html is still a programming language
@@lightdropp it's a markup language
@@borgir6368 what does that mean?
There were so many good comments under that VS Code Tips video, that you could probably make 10+ shorts out of them.
so pro
Link to video please? Edit- ua-cam.com/video/ifTF3ags0XI/v-deo.html
Yeah
Or 1 full length video ;)
@@EnglishRain you're a cool guy. Thanks.
Instructions unclear, accidentally made an ai in HTML
lmaooooo
How the heck can one make ai using html
@@MaleRover-001 it's a joke based on the video
God.💀
Considering html isn't Turing complete, you literally have the power of a god
I hope the short videos reward financially just like other channels' long videos
They don't. Ad revenue is terrible on shorts. Best way to support is with Fireship PRO or github sponsorship.
@@Fireship or being featured on Mr. BEAST. Just Saying 😉
@@Fireship you can set up channel membership or patreon, i am sure many will support your content
@@Fireship This vid was cool ngl
yes yes right man!!
god i love programming in HTML
Hello world program in HTML (complete source code example):
Hello world
@@lapissea1190 other programming languages are bloat
!programming
thanks to the plugins
just continuing the flame ... HTML stands for "HT Markup Language". Markup Language is a way of annotating. You most probably mean marking up HTML, or are you programming a engine which is parsing HTML?
- Asks if HTML is a programming language
- Receive a lot of "NO HTML IS NOT A PROGRAMMING LANGUAGE YOU DEGENERATE"
- Still calls HTML a programming language
- Refuses to elaborate
Chad.jpg
Sigma_male_grindset. mp3
It’s a markup language that forms the layout of web pages. There are some programming functions in HTML like JSTL and XSLT
@@Chado111 what about HTMLx? Is that a programming language?
Gigachad
Jeff: Age of Mythology Zeus on the thumbnail.
Me: I see you're a man of culture as well
I sunk so many hours in this game I'm even scared to think about it
this.
Prostagma?
@@nikolacukic5351 Vulome. Etimos. Prostagma.
so pro
Man, your videos are so dense and packed with info that I need to pause every few seconds to grasp what's happening.
I use Emmet a lot. With lots of this shortcuts. It's great for HTML templates. Also Emmet works with Pug and in jsx.
This is one of those things that are amazing for demonstrating possibilities - and everyone gets hooked - but nobody ever uses
Ummmmm look up usage stats.
@@flannelbeard4621 usage or installation? How can you tell who's actually using it?
@@dexter-wy5bo emmet?? i use it literally every time i do a web project and i don't even do web development everyday
Emmet is super useful. Unfortunately the VS Code implementation is buggy at best and doesn't always provide the same output across different machines.
@@nilpo is it good on vs code now?
In Next Video, Giving EMMET to AI and use Voice command to make Web Applications.
THE END.
Some people said AI can't replace our job, but I can see the end of my career is just around the corner...
@@kyo4156 it can't.. it can assist u. And what he said also comes under this assist category
"Gimme Facebook frontend and backend GO"
@@ZAKINGOFDESPAIR 🤔make sense
@@mikul3122 Also in brainfuck language pls
0:23 onwards is mind-blowing!
UA-cam really gotta add the playlist buttons for shorts
like the video then it goes into a liked video playlist
not sure when but they added that feature now
Balance outward/inward is great. I've tried it as soon as I read that comment and I love it.
"HTML is my favorite language for programming website documents." Ya don't say? 😂
100 seconds of Figma
100 seconds of Gatsby
Pleaseeeeeee 🙏🏻🥺
100 seconds of ligma
@@lapissea1190 100 seconds of my balls
@@bringbackwindowsphone Niiice
100 seconds of pumping
figma ballz amarite
That wrapping part is going to save me some time, didn't knew that yet
congratulations for 700k subscribers !!! you deserve more !
Balance outward + wrap would be an amazing tool to have in all languages
If we start including declarative programming as “programming” then I guess Microsoft Word saving to XML is an IDE, as is anything that saves to SVG, so Adobe a pretty great for programming in.
jokes and plugin development aside, you can get some real programming done with Word's VB editor and adobe's Dreamweaver (js) and Animate (actionscript) ;)
You include libraries with functions that are often used declarativley . HTML is not a programming language because it is not Turing complete and neither is saving to xml in word
It was a joke
This is why CS degrees have a class on theory of computation, so they don't need to use quotes when calling something "programming"
Based
That's the most amazing thing I've seen this week. More pls🙏🏾
*uses VSCode command to “Go to line 10”*
VIM users: “Look what they need to match a fraction of our power.”
Also sometimes we might want to have numbered ids in successive lines for example if we are building a grid system
so instead of doing
#something_1 + tab
#something_1 + tab
... n times,
you can do
#something_${}*n -> n is number
this will generate numbers from 1 to any number successively.
Kind of doing a for loop from i = 1 to n times
:)
Useful when need different ids and you can specify content as well,
div#myid${Content}*3
Content
Content
Content
or just do this
div*3
HORY SHET!
Same thing goes for:
Lorem*5
Thanks for the useful advice.
dude you're a genius
kept laughing for 5 seconds after the video
yes im a bit drunk but still dank stuff keep it up man
I love HTML because I can almost understand it 😂 I’m not a coder, but my brother taught me some things about HTML when we were growing up and I’ve worked on a lot of WordPress sites, so I can kinda see how a webpage works from reading the HTML file, and that’s fun
These shorts are nothing short of awesome!
Emmet is so good, he physically became He-Man
Shit this is amazing. I just didn't know how easy those snippets were. Totally caught me off guard
Started to use Emmet a couple of years ago and it is a productivity booster. In docs page there is a cheatsheet for the one's that can't remember the commands, which are a lot.
I love it so much that you actually put a ! before "programming" lol
i can safely say this video opened my eyes and will probably change my entire life
Thanks for the feature, Jeff!
Such efficiency
I HTML in Google Docs when I'm bored but this works too
This is best addition to work with CSS framework
!PROGRAMMING
For those who don’t understand !true = false.
@@bakane6030 yes
Ctrl+Enter for a new line broke my tiny 20 iq head HOLY SHIT
One of the first rules they’ve teached me at the bootcamp: read the fucking manual
@@LoSpotItaliano I mean I would, but it's so much more fun going blindly in and discovering tricks like this lol
Ctrl enter deletes word backward. Ctrl space is new line below, ctrl shift space is new line above. Tf.
Thank you!!! I have been looking for something similar to this
The moment I realised that my hours of practicing finally payed off, because I knew all of the shown shortcuts to write the html quickly
700k Subs
Let's Gooo Fireship!!
it's like cheat code activate in gta 5
I really like that when he said programming he added !
Now THIS is good content. Those last two tips are going to awesome!
I've become just as fast with basic closing tag completion, line copying and home+end keys. I usually only create the document structure once
I have learnt a lot of new things that I have never worked with from your videos, like AWS, nginx, kubernetes, graphQL(and other dbs), typescript to name a few. One thing that I don't understand is how they work together. I would really love to see a video where you design a mock system using all of these (and possibly more) and explain each of their roles and why you chose it (kinda like your reverse-cloud migration video using raspberry pi).
Whenever I think of a software architecture I think of them as several layers that interact with each other. However, I am unable to assign which layer what belongs to by watching a stand alone tutorial about a single tool.
Btw, I am a college senior pursuing CS major and I love your content. Thanks for all the awesome contents.
I think he made a video about that but kind of sarcastic but still provided useful information in the end. Search "over engineering of tech stack" in his channel.
Ooosh, that last tip is so helpful
I have saved that vscode tips video to check the comments when I need some tip
🙄->😲->🤯
Ah, yes, HTML and CSS are my favorite !programming languages
saved for a little . or else........
In the old days, we would have said “¬programming”.
@@lawrencedoliveiro9104 true
CONTROL G!!
I've been looking for it for ages!
ctrl+enter was best part of the video for me.
now what if i told you emmet is also available as a vim plugin?
what if I told you vim is also available as a vs code plugin
@@detectiveoftheeast8378 ah yes, catCTRL-r"
At 0:21 is where my eyes were last seen to be normal size. After that, O-O
Saw some video with this kind of method and I can't find it on google, thank you my guy now I can sleep.
Excellent outro. Really sums up the feeling.
I'm gonna commit a war crime if someone calls HTML a programming language again
😂😂😂
I mean... what does the L in HTML stand for then 🧐
@@Runeite51 what does the M stand for?
@@immortaldev1489 I could argue that markdown languages (which include markdown and HTML) are also programming languages as well, since they are programming the text's formatting, but that's a tough path to die on.
@@nnillat *markup languages
Markdown is a play on markup
Great Video 👍
And you are my favorite programming youtuber
This will fricking boost up my production now
🔥
ok fine, but now you finished the entire website in 59 seconds are made redundant 😂
Programmers are supposed to make themselves redundant :)
Congratulations on 700k!
I was thinking about this the other day when I had to create an unordered list with 14 li's AND I COULDN'T FIGURE OUT KEYWORDS TO FIND THE SHORTCUTS, THANK YOU FOR THIS VIDEO!
Finally emmet is getting recognition been using it for 3 months now
I have been using it for more than 3 years 😅, i was so surprised when I had first figured it out.
@@abhishekpratap05 yeah they're kinda slow on the uptick here lol
You can press shift + alt + f to format the code 😉
Thank God I installed vscode last week
I'll do it the old fashioned way.. by the time I'm done creating that list the old way, I'll still be thinking about what I want next.
I've gotta learn this ASAP
omg in love with this short
Ayeee emmet finally getting some shine 😭
Emmet is chef's kiss 👌
You forgot to wrap article in a section component so that you can set padding on main and max-width on section
Someone at my first job showed me this and its a lifesaver
One more reason why I love the atom editor already preinstalled with this
Every part of this is so accurate
EMMET IS THERE FOR SUBLIME TEXT & I LOVE IT!!!
hell yeah jeff we love you man
I never realized how powerful this tool is
I realized I learned how to use this randomly after I noticed the patterns
When I first started coding, I had to learn all of this shortcuts just to feel comfortable typing. To be honest HTML its easy but having to type all this opening and closing tags its a pain in the butt
Productivity just went through the roof
I like how he put "!" before programming which means "not", A nice detail there.
More like this please
ctrl + p -> ":" will also go to the specific line, default VSC feature.
I had no idea about wrapping inside a tag
This genuinely seems like way more work than just typing it out and using copilot for the repetitive stuff / closers. Though this video was a tad before Copilot was as powerful as it is now.
Balance outward command . Thanks for new trick
Emmet was a game changer
Videos about Golang would be pretty cool
That was absolutely sick. Gonna try this today.
Wrap abbreviation is a cool feature, btw congrats for 700k subs!
you should probably setup a binding for wrap with abbreviation
I like this because right now im ising microsoft paint to draw my code and then i have another paint file for what its supposed to look like. This is a little bit faster
Ctrl + Enter and Ctrl + Shift + Enter is awesome tricks
Man this is all super useful stuff that I’ll hopefully never use because I won’t ever be writing that much HTML
Really appreciated the info with humor!!!
It's so cute seeing what Vscode users think is "powerful" as an Emacs user.
you can use 'go to matching pair' as same you are using wrap with Abbreviation
Holy fuck. Thanks for balance outward.