Removing some unwanted rectangles on HEY.com

[@FredClausen]

WHF! I’ve said it in at least one of your recent videos but thank you for posting these videos. I am a self-taught developer, and just work on projects for fun, and it is always so cool to see a professional doing things I can only dream of doing. I imagine these videos cut in to your ability to do more programming, so I’m appreciative of what you show us. Thanks Andreas.

[@Entarra]

Couldn't agree more, they're suoer cozy to watch and inspire me to fiddle with my own projects

[@lunarscapes6016]

Love seeing your workflow, and I love how well you specifically call attention to it. Most channels would probably cut the part where you’re just deleting lines in the html file or wouldn’t say how they got the html file in the first place.

[@awesomekling]

Haha yeah, the workflow can get pretty messy sometimes, but it's important to explain what's happening instead of just skipping to the happy ending like you say :D

[@ninadsachania3652]

AK has really stepped up his video production game. :^)

[@awesomekling]

Glad to hear that! I wanted to improve my video quality so I took a course from Aaron Francis at screencasting.com/ -- it was super helpful. Totally recommend it for anyone making videos of themselves at the computer!

[@spicybaguette7706]

The irony of using nested CSS and -webkit prefixds at the same time :^). Reminds me of how tons of websites ship with es5 polyfills and simultaneously use es6+ syntax. It will never not be funny to me. This is the reason I have an immense respect for what you are doing, the amount of quirks and legacy stuff on the web is dazzling!

[@kostyafarber8716]

Another awesome video! I would have never thought to use that extension or reduce the html in that way. Sessions like these are like the pair programming sessions where you leave it learning something new. 🎉

[@jakedublya]

Thanks for taking the time to record these Andreas, for a super nerd it's really entertaining.

[@apoc_dev]

For your file reduction you should setup the ability for ladybug to watch the file and refresh on file change. Would save you a ton of time. Would also be cool if you had a tool that let you select a node and extract its dom tree and css that effects that tree to a html file without needing to manually edit.

[@relakin]

Sweet, missed this type of video! Still waiting on an hour long video, haha.

[@arjix8738]

great content as always! the WPT tests look like a great way for newcomers to fix issues!

[@ignatloskutov2792]

The reduction part can probably be automated with some automatic DOM/CSS tree transforms and checking if the rendered page looks the same, makes sense if you do that pretty often...

[@TBasianeyes]

these are so helpful for getting started in the Ladybird codebase

[@TobyAsE120]

whk! Good to see another video!

[@glenfordwilliams5716]

Well hello friends🎉

[@brambasieldev]

Hello, Andreas! What mac do you use in these videos?

[@awesomekling]

It's a 14" MacBook Pro (M3 Pro) from Nov 2023 :)

[@DivjotSingh]

Cool trick of elimination/but narrowing. I'll try to remember this whenever I feel I can represent the problem as one file and then delete until the bug disappears. It is probably unique to HTML and rendering, but it still seems like a cool trick.😊

[@tRaigeki]

Fun video, nice work!

[@MarekFajkus]

if you just define absolute position the element should be rendered where it would normally be with static position. But it is absolute so it doesn't take any space. Only when you specify top, right, bottom, left then you move the absolute element accordingly to align it with its absolute/relative ancestor.

[@awesomekling]

Yes indeed!

[@MarekFajkus]

@@awesomekling I hope the fix for that behaviour will be simple. It sounds like it might be but I don't know how your codebase works. In any case thanks for working on new engine. It's really important work.

[@Doeschi]

„We dont support webkit appearance…we may not even support appearance“ is great

[@kreuner11]

it does actually support webkit appearance, he found the bug later

[@Koutsie]

Can't wait to see you delete irrelevant parts of the pagw with Ladybird dev tools haha

[@sql64]

imbox

[@awesomekling]

imbox-sizing: border-imbox;

[@sql64]

​@@awesomeklingthought it was a typo turns out its an actual thing

[@RubenKelevra]

Guess you could write a script which tries to remove one line at a time and does a visual comparison of the website after rendering. Guess that would be helpful if you removed a couple of elements and want to boil down the CSS code. It would also automate the removal of non-linked images

[@rallokkcaz]

16:00 You deleted the parent div previously that had the relative position to keep this structured correctly.

[@zedi8888]

my favorite asmrtist

[@fredleckie5880]

Woo-hoo!

[@roshanrchandar9410]

Hey

[@getpunned]

Well hey friends

[@R.Daneel]

I doubt your workflow is the same while recording, but might I suggest finding a good window-tiler that you like? It would have saved you sooo many clicks and messing in this particular case!

[@StevenHokins]

It is his workflow and its working for him, so keep your suggestion for yourself please

[@Archimedes.5000]

@@StevenHokinsyou are making 0 sense

[@StevenHokins]

@@Archimedes.5000 why, if Andreas would love to hear any viewers suggestion on window manager etc. he would ask in video

[@japroz]

10s ago 💀

[@Midnightfalk]

I'm always a bit sad when I see macOS users manually drag/resize their application windows. Consider using rectangle app and get to know the shortcuts to position your windows in a grid :^) Instant productivity boost!

[@chillwat]

Using vim to appease DHH :^)

[@GeofferyFisherman]

video starts at 15:05

[@Archimedes.5000]

lol