Balance Out

The most annoying thing about HTML.... #shorts
Learn to code with VS Code: aka.ms/vscodelive/learn
Download VS Code: aka.ms/vscodelive/download

[@aguynamedandre350]

Bruh. I can’t freaking believe. You just added 7 more years to my lifespan.

[@al-thaidi]

LOL

[@chizuru1999]

Bruh wtf 😂 I am assuming you are a free lancer? Cause no company uses "vscode" for development Lol

[@masamaeda9217]

@@chizuru1999 maybe not super old and bureaucratic companies. But most companies don’t impose an editor for you to use. Especially in web development.

[@MM-vr8rj]

@@chizuru1999 what else lol

[@chizuru1999]

@@masamaeda9217 Whatever sails your boat or videos you watch on KZbin to learn. Reality is often different. 🤷‍♂️

[@jeltehoekstra2952]

There’s also a addon called “rainbow brackets” it gives brackets different colors based on how deep its nested

[@Jakob3xD]

This

[@chevycamaro-rp6tr]

Yay a fellow 🌈 brackets user!

[@nomad4253]

I’ll try it out. Thanks for this. Small visual aids help me out a lot

[@avii___7]

@@jeltehoekstra2952 😂

[@redtaileddolphin1875]

@@sem6045 straight up this comment would be positive somewhere like tumblr. my brain is so tuned to that site I saw gay brackets and was like hell yeah

[@KinSlay1337]

You can also collapse that div from its opening tag and than copy it by highlighting the line and the start of the next line

[@sevtianferdian4214]

Yep, i think it's easier for me

[@DarkKnight-ree]

This

[@xanderhere1633]

That's what I do

[@haixirtcrack3118]

Yes

[@hermit41]

This, i always do this when i work on long long html like this one

[@deltawastaken]

I love you. No more scrolling for hours and putting my thumb to the screen to hold my place in the line!

[@manofvulture]

or you could just use the cursor instead of your thumb

[@deltawastaken]

@@manofvulture I’d accidentally move the cursor when scrolling and have to redo it

[@manofvulture]

@@deltawastaken clumsy fella

[@AkamiChannel]

Idk for html tags but most modern text editors have something for matching the parenthesis or curly bracket. In sublime text I think it's ctrl-m

[@Harmxn]

I just click the tag and follow the striped line down.

[@surya5077]

I wish this was a thing for Reddit. Can’t find who that one guy is replying to

[@ChrisD__]

It isn't, but thread/block/bracket collapsing has been a thing in text editors and Reddit for years to solve this exact problem.

[@tacokoneko]

i use old reddit which highlights it when you click the area to the left of the reply. i have never used new reddit so i dont know what happens there

[@kibe2134]

Same

[@sknfer]

XD

[@alooydaboss9262]

TRUE

[@dopeenough7069]

It's a more simpler way to do that. You can just click any where to opening tag and select it.Closing tag will automatically be marked.

[@adamhassan5528]

exactly was just gonna say that

[@Xd4LEM4ObX]

That's the way i do, but i liked how he put it in a keyboard shortcut, it makes it easier, since i mostly use the keyboard to everything

[@wickedtorpedo75]

it's cool but your way don't work on vs code, in vs code mark disappear while selecting

[@divine203]

The most educative short video I've watched...my life as a developer has become a lot easier 🙏❤️

[@branthebrave]

Jetbrains has this by default, I think it's Ctrl w and Ctrl shift w

[@VladyYakovenko]

Try ~

[@jarretta2656]

Quite literally the most used key on my keyboard

[@branthebrave]

@@leonie9248 They simply haven't tried it 😆. One person I saw said they don't like it because it was "too complicated" or too hard to learn, which just means to me that they are just lazy

[@heylittleguy26]

@@branthebrave I used to be part of the Eclipse cult. As soon as I found IntelliJ, I never looked back..

[@branthebrave]

@@heylittleguy26 Exactly the same here.

[@FlorianEagox]

I usually just collapse the div and select it that way, but this is pretty nifty

[@peteyy_cz]

Wait till he discovers vim.

[@pubgbankclan]

Ha

[@zigabahoric2047]

this

[@mymoomin0952]

More like wait until he discovers the vim-keybinds vscode extension

[@KhalidJ]

@@mymoomin0952 Yeah, this is more likely. But vim (or neovim for me) works much better than any extension

[@ChrisD__]

Vim is very good at robbing me by tricking me into thinking I'll save a lot of time, lol.

[@mayawarrier6564]

Pretty neat! visual studio has something like this (to highlight a scope) but it's more mouse-involved

[@jphearson]

Man, I'm just a beginner in HTML, but y'all doing some jewels in here for vs code. I love it.

[@PaulSebastianM]

Theres also expand selection (to scope). There're similar commands in all IDEs. Mostly called expand something.

[@kristofkallo]

By default, it is Alt + Shift + Right/Left for expand/shrink selection. It is extremely useful especially when you have deep nested stuff. You don't need to put effort into finding precisely the start and end of an expression.

[@whatawordsalad]

Nice, I usually just fold/collape the element I want and select it that way, but this is probably better :)

[@warriorlord4052]

We can use an extension called brackets or something like that to do that too. When you select the div it gets selected in a color and you can check it out at the bottom of the page to see which is the actual div selected.

[@arishkumar]

I also think there is a shortcut "shift+alt+right arrow key" which lets to select items with the same indentation, its hard to explain with text but if you try it out its super useful for any language

[@justadev____7232]

Mind blown!!!!! I was literally doing this the other day and was wondering if there was something like this. Super useful thank you!

[@RedBlueProductions1]

in vim, this can be done with vit visual inside tag

[@zombiekiller7101]

@Maksim Verkhoturov vscode is noice

[@randomsoul294]

Exactly my thoughts during the video

[@duruiz]

and for people that are curious about it, if you are gonna copy the text for example, you don't even need to select it, you can simply yit and you have (y)anked what is (i)inside the (t)ag... yank "is the same" as copy in vim, gonna delete it? delete what is inside the tag (dit) ✨✨✨

[@sukhmandersingh4306]

@@duruiz also cit for changing tag you can also sorround with another tag using vim-surround i have mapped that to ysit. Vim bindings imo are way more intuitive

[@duruiz]

@@sukhmandersingh4306 yep! I've been using nvim/vim for years and I'm always learning some new stuff. recently I've migrated to native lsp and I'm moving my plugins to lua alternative ones, everything is faster :)

[@srijanvarma9406]

That's actually really helpful, you don't usually get this much value from these short content videos

[@steamcode4441]

Wow, this is amazing. There are so many features in VSC that I didn't even know I needed but will definitely help me out

[@isymfs]

Fun fact: I have no idea why anyone would subject themselves to coding, but I appreciate you guys because you make the internet possible.

[@tacokoneko]

we do it because its fun to make the computer do what you want

[@IkeVoodoo]

@@tacokoneko this, and because you can make the craziest stuff you can imagine

[@cinderblocktreehouse]

Yes and yes

[@dipanjanghosal1662]

Well I'm just starting to learn web developement and the prospect of making stuff for the web really seems like something I would enjoy, and I think other people enjoy that too.

[@yourlocalhuman3526]

@@dipanjanghosal1662 how is it going for you? I started in decemeber 2023 because of the exact same reason as you

[@scifregizmoguy]

This already exists in vim. Its three keystrokes: vat

[@timwaite4884]

This

[@redflag6056]

I’m learning html now and I just started learning about div ‘s ,,, I think this is definitely gonna help me out in the future when I get more advanced 💪🏾

[@kurushimee]

There is an extension/built-in feature for colored brackets, so that your dive and shiz will be colored and you can just see what div is it closing by color yea

[@yondonjamtsganzorig7417]

It might be easier on vim. You just have to press 3 key vat Boom and it's selected whole tag. But getting familiar to vim is the real problem at the beginning

[@xanri7673]

Or shift+V and then %, when your cursor is inside the tag.

[@lostguy362]

Use Emacs

[@yondonjamtsganzorig7417]

@@lostguy362 I've tried to use it during my college years, and it was lot harder to learn than VIM :P

[@lostguy362]

@@yondonjamtsganzorig7417 yeah I can understand There is a lot to remember in emacs

[@aidenbagshaw5573]

This is by far the most useful thing I’ve ever had recommended on KZbin. Not that that’s saying much, but still.

[@musikid_official]

As a beginner HTML coder, can say working with layered DIVs is difficult. Genius solution, and I already use VSCode.

[@ichbrauchmehrkaffee5785]

alternatively, there's a small arrow on the left side, where the line-numbers are located, each arrow indicates another indent. You can collaps each arrow, thus collapsing the entire indented section and selecting it, thus selecting everything inside

[@jaiv]

Or just press % in vim...

[@snailed]

vit to select inside of tags

[@chefaku]

Default Keyboard Shortcuts for basic editing: Fold (collapse) all regions | Ctrl+K Ctrl+0 | editor.foldAll Unfold (uncollapse) all regions | Ctrl+K Ctrl+J | editor.unfoldAll

[@David-qz6yj]

I like the standard way of clicking the carrot on the left to collapse parent element and select it afterwards

[@PenguinjitsuX]

Dude you guys have to make a compilation video of every single one of these awesome tips on your channel Or some sort of a cheat sheet that people can use

[@caseymccray3861]

I was looking for this since my entire life. I HAVE FOUND IT. THANK YOU

[@Waltuh7862]

You can also just click or highlight the opening div tag and VS code will highlight the closing one that the tag is attached to after a couple seconds

[@Rodrick.]

I use a rainbow tag extension, it pairs open/close tags with colors

[@lawrencedoliveiro9104]

In Emacs I have custom commands defined to jump between lines with matching indentation. That works independently of the language the code is written in.

[@Gelato__33]

I know nothing of web development, but seeing how many people were genuinely helped by this video is enough to earn my like and sub! 👍

[@krombopuloslincler4849]

If you are using VIM just press "dat"

[@MT-cd7cs]

Amazing. I’ve spent my week doing this on a project to add JS to a SPA! Thank you.

[@marvellousadeogun9110]

There's this arrow on the left just after the numbers, it collapses entire tags. Hides the content and shows only the opening and closing tags. Quick way to get to the end of a div and fantastic if you're sharing your screen but you wanna hide some things.

[@samsonmayeem8409]

Collapsing is also cool. Because having a small screen might disturb vision of highlighted

[@JSCHM]

I think the shortcut is "shift" + "alt" + "arrow left/right" - it is also useful when you want to copy a method/class from a file and don't feel like using the mouse ^^

[@martiananomaly]

You could also just collapse the div completely by hovering on the left of the div near the vertical number line and clicking on the 'v' shaped icon which appears. After that just copy the ... and it'll select everything inside the div element.

[@Artist19]

You can also click on the opening div and closing tag will be highlighted I think this is either a core feature or one of prettier extension.

[@TheRealAnsontp]

Dude, you just saved my marriage- I have been struggling so much trying to work around a large HTML, you don’t know just how much that helped me!

[@GabrielGamesYTG]

I just love that I follow this page and learn this stuff

[@IlyaZub]

Thanks! Btw, Sublime Text since v2 can expand selection to scope by default. And it works for strings, arrays, and objects. Ctrl+Shift+Space, if I remember correctly.

[@abdulqader2467]

you can click next to the line number(where the div starts) and it will minimize the div and you can copy it (it will copy the entire div

[@Xynic48]

I suggest also adding a feature where it highlights the line only instead of selecting if it that isnt a thing already.

[@thewelder3538]

You've got the collapse method, or the PowerTools option which draws vertical lines between the opening and closing brace/div.

[@roxgabrielrox]

you can retract the div section and select it as well

[@akifimran9780]

Working with react native i really needed this thanks.

[@ilmansalt]

Programmers: I hate nesting Meanwhile HTML programmers:

[@jackwright517]

I hold ALT + SHIFT while using left and right to select more or less blocks of code

[@danimunf]

BRO THANK YOU, YOU JUST SAVED MY ENTIRE WEEKEND

[@ocsanik502]

Thank you, You're a life saver. Now I don't have to spend an hour scrolling to move large sections of code for organization.

[@Ivan-dt9mc]

Another way of doing it is to just click on the div and follow the indentation line to the other div

[@ScaredHelmet]

You could also use a proper IDE which includes collapse and expand features.

[@AacidD1]

Before this I used to collapse a tag, select it in collapsed state then expand it

[@victorcallender1311]

You can see the closing tag right there, it's "", but if you are talking about the div tags... well yea. Just do your counting and struggle with your eye muscles. You are correct about that balance thing though.

[@arahd]

This is a cool 👌🏾 function, thanks for highlighting it

[@noahmunz3201]

There are thousands of plugins to actually lightly colorize brackets / different sections of your code so that you can remember which level goes with what. (Even tho it works better with actual programming languages like C or Java)

[@twocsies]

Interesting trick. I usually just use the code folding "-" sign to collapse the div and then copy it from there.

[@mskzzz]

There’s also something called separation of concerns and components which will avoid having that much html in a file for no reason

[@yurisoares2596]

I was suffering this when a section (not SECTION guys) of my website started to have too many items, every time I had to change at least 3 to 4 html files just because of i18n, then again there were times I added more then one item in the section. Then I fliped out and decided to make everything(not EVERYTHING) as Observer Pattern, every item being dinamicaly added from a json with clear pattern, now I just change my JSON. 😬

[@ShiloBuff]

Cool command! But you can also collapse the div and then highlight the 2 collapsed lines.

[@densecop699]

Can u make a video on your vscode extension and configurations

[@bmejia220]

Nice tip! So useful and will save considerable time working in files

[@ChrisD__]

Neat, I've just been using the collapse thingy in the side bar for years.

[@hodev632]

Doesn't work for cut or delete because its only affects first line

[@calebcadainoo]

Amazing 😂 I mostly comment the beginning and the end to help me navigate... This very helpful

[@mushyclicks2028]

In vim its easier. Just go to any opening/closing tag and hit '%'. It will automatically take u to the other end. What more is that this also works for curly braces, double quotes etc. So if you have a function and wants to copy the whole thing, go the opening braces and hit 'v%y'and u r done.

[@mirwaishashimi7151]

Loved the trick and also the satisfying sound of your keyboard 👌🏻😍

[@Tekay37]

You could also bind that to Ctrl+W and Ctrl+Shift+W to get proper IntelliJ keybinds in vscode

[@sid98geek]

I can imagine that fifteen years ago, people who were writing HTML tags on Notepad would rage quit and smash their computers.

[@matthewlui1004]

I just click once, follow the line, then shift click. But this works too.

[@joaovitorpessoa520]

you can install a extension on vscode named "backet select" that does this and more

[@gailius.m]

Eva theme gives you a line that goes from the starter tag to the closing one (upon clicking)

[@sharvenhubbard8030]

I mean there is a line pointing to the closing bracket if you click on a opening one but this is pretty cool tho

[@Bilugagamer]

usually Im closing the tag with the arrow down icon on the left, and selecting the closed tag, but thats much easier

[@4eyedfranc606]

You could just easily click the line number for the div. It'll wrap the div and it's content and you can do whatever you want with it.

[@Kelz_369]

There are collapsible arrows for each block of code on the left side numbered column. I just simply collapse and highlight.

[@raj_drummer]

I use the VIM extension for vscode. So i just need to place the cursor on the main div and type ‘yit’ to copy all the child or ‘vit’ to select them. And if you want to delete them it ‘dit’

[@CryptoWealthyChannel]

what do you press to activate the search bar before typing balance out. Kindly make your toturials more beginner friendly

[@neoxfr9114]

This is so useful, but, why we used so many divs? Section, article, list, etc, there are so many ways to reduce div tags and improve our semantic structure

[@omaewamoushindeiru1108]

that's why I'm using component for group tags

[@zrebec]

WOW. This is Very useful for me. VS Code is a really wizard. And your work as well ❤️

[@LielAlmog]

What is the difference between these and the "ctrl + alt + left / right" shortcut. It basically does the same thing with an extra press and more flexibility as it works with actual code and functions and not only HTML

[@AdamDymitruk]

In intellij and other jerbrains IDEs you can +/- collapse entire areas or expand selection with CTRL-W or contract it with CTRL-SHFT-W

[@WulfgangGott]

damnit I wish I could save these videos into a playlist as a reminder

[@CHRŌMVS]

You can

[@krishcapital6071]

I like keep the cursor on the end of the first open and press ctrl+shift + [ , it collapses the div, much easier to copy that way

[@FadingWerewolfTiger]

I don't even code and I feel relieved

[@blinded6502]

I just put a cursor where one bracket starts, and the scroll until it aligns with where it ends

[@rayt3384]

That’s cool. You could also collapse them which is even better because it brings the closing tag close to the opening tag and you don’t have to scroll. In reality these things get very long vertical wise and when you balance in/out you can’t see where it actually ends because it’s scrolls of the page. So… collapse Ctrl K + Ctrl [ to collapse a node.

[@iRant4u]

Every day I'm reminded that half of my worth as a developer is just VS code

[@SXsoft99]

Have you ever tried collapsing the div and then just selecting from the start line to the end? Other IDEs also have collapse from the end tag but i guess its too much of a feature for VSCode

[@mikoajflorczak4966]

You can also download a template that colour every single pair of divs for different colors

[@_eagleofsuger_4631]

Isn’t there an accordion button right beside the respective branch? This works for functions as well

[@RossWasTaken]

Would it be possible to have it bound to triple clicking on the div? Would be really convenient imo

[@tresvecesno7071]

Interesting! Thanks! I use the "expand selection" and shrink selection to get the same results =D One question, there is a way to select with shortcuts the content inside the tags of HTML/JSX? Thanks!

[@lian1238]

With the vim plugin, you can do dat (delete around tag) or cat or vat.