I always use the 'border' trick too! Just a heads up tho: "border" adds to the element width and height, if you need to keep the element size you should use "outline".
That's a handy tip, especially for people like me who think CSS was a mistake, and avoid it like the plague. (Web standards in general just feel extremely overcomplicated with too many bad corner cases)
solve_for_margin_top and solve_for_margin_bottom functions both set the height instead of the accordingly named variable. also the rules starting from 4(?) aren't else if's any more.
I really appreciate you doing what you do. Not only creating an OS from scratch, but also recording yourself and sharing the process. There's not many videos of people actually coding / writing commits. Thank you.
I discovered this channel a few months ago and seeing how fast ladybird is improving give me hope for a better future! Plus it using a freshly new custom rendering engine will allow it to emulate all the weird quirks of chrome (that were made to make websites incompatible with other rendering engine and therefore slowly kill competition) so that all website specifically made for chrome would work great ! Thank you Andreas ! Ladybird may be our path to salvation from Google monopoly.
@@awesomekling Unfortunately it seems like it requires separate HTML and CSS files. A possible workaround could to be make a shell script which moves the content of tags into a separate file (or to use an existing utility to do that, if one exists)
The easy way would be to set the value you need to solve to 0, as subtracting 0 is a no-op. Also makes the two margins with halved value easy: set both to 0, solve(), left = value / 2; right = value / 2.
Your solve_fox_x helpers can be improved by subtracting everything ahead of time, into something like "available space", then adding back the one value you want to solve for.
@@abhijeetviswa right. So it doesn’t make sense to say Sum all the elements: x(unknown) + y + z = w And subtract out the one you don’t want to use: w - x(unknown) Because we can’t do w - an unknown. Our entire goal is to find the unknown
This would seem like a nice situation in which to try "delta debugging", basically like git bisect but trying to reduce a bug reproducing sample input to the minimum size rather than searching for a commit.
meh, not _dirty_ , just _long-hand_ , and most of those calculation components are static at the time used, you should not need to calculate them each time. nice, thanks for the extended explanations, they will come in useful in the future, and I think achieved the initial target (where people were looking for example CSS stuff)
Vertical margins are calculated against the containing block's width? While I'm sure there's some reason for that, that sounds like the kind of mistake you make after 1 too many beers while you're coding.
It has been a while since I watched your video last time and I'm kind of confused now because the browser has its own window and it looks like you're using a linux distro. Or is this SerenityOS (Which would be still surprising since you run Firefox and CLion flawlessly). Or, maybe the browser is now a standalone application.
In your solve_for_margin_x lambdas, I think you meant to assign to those values, not to height!
Over an hour of Andreas Kling Goodness. Thank you very much! I hope you're having a great week, I haven't been stopping by the office hours in a bit.
I always use the 'border' trick too! Just a heads up tho: "border" adds to the element width and height, if you need to keep the element size you should use "outline".
That's a handy tip, especially for people like me who think CSS was a mistake, and avoid it like the plague. (Web standards in general just feel extremely overcomplicated with too many bad corner cases)
LibWeb doesn't render outlines yet, so we're stuck with borders until someone implements it
solve_for_margin_top and solve_for_margin_bottom functions both set the height instead of the accordingly named variable. also the rules starting from 4(?) aren't else if's any more.
Yeah, caught the typos after finishing the recording. :^)
Fixed here: github.com/SerenityOS/serenity/commit/0e295f727a2da39af1e296b987a7c949c3d5d024
I really appreciate you doing what you do. Not only creating an OS from scratch, but also recording yourself and sharing the process. There's not many videos of people actually coding / writing commits. Thank you.
I discovered this channel a few months ago and seeing how fast ladybird is improving give me hope for a better future! Plus it using a freshly new custom rendering engine will allow it to emulate all the weird quirks of chrome (that were made to make websites incompatible with other rendering engine and therefore slowly kill competition) so that all website specifically made for chrome would work great !
Thank you Andreas ! Ladybird may be our path to salvation from Google monopoly.
to aid with reducing the test page, you can try using PurgeCSS which can automatically detect and eliminate unused CSS
Interesting! Does it work on HTML files with inline style sheets or does it require separate HTML and CSS files?
@@awesomekling Unfortunately it seems like it requires separate HTML and CSS files.
A possible workaround could to be make a shell script which moves the content of tags into a separate file (or to use an existing utility to do that, if one exists)
I love watching you dive through a call stack to find the offending function, only to find a FIXME. It's like finding a needle in a haystack!
The easy way would be to set the value you need to solve to 0, as subtracting 0 is a no-op. Also makes the two margins with halved value easy: set both to 0, solve(), left = value / 2; right = value / 2.
It's interesting how much goes into calculating an elements height. I don't think I've ever thought about it when setting margins.
Your solve_fox_x helpers can be improved by subtracting everything ahead of time, into something like "available space", then adding back the one value you want to solve for.
sum all of the elements, then for each, subtract out the one that you don't want to use.
But we don’t know the one we don’t want to use because that’s what we’re trying to solve for
@@lebster_ that's why you subtract it out, doesn't matter what value it was because it gets taken away
@@chyza2012 but we can’t subtract it because we don’t know what it is
x + y + z = w
You know y, z, w
So you do w - y - z = w - (y + z)
This is Andreas is doing in the code.
@@abhijeetviswa right. So it doesn’t make sense to say
Sum all the elements: x(unknown) + y + z = w
And subtract out the one you don’t want to use: w - x(unknown)
Because we can’t do w - an unknown. Our entire goal is to find the unknown
Very nice as usual!!! Now ladybird is one step close to full spec 🥳🥳
This would seem like a nice situation in which to try "delta debugging", basically like git bisect but trying to reduce a bug reproducing sample input to the minimum size rather than searching for a commit.
I feel like it might be worth adding a command for doing a clean layout dump without the useless whitespace.
Whitespace can still affect layout though, so simply hiding it could make dumps very confusing.
meh, not _dirty_ , just _long-hand_ , and most of those calculation components are static at the time used, you should not need to calculate them each time.
nice, thanks for the extended explanations, they will come in useful in the future, and I think achieved the initial target (where people were looking for example CSS stuff)
.video {
like: auto;
}
Funnily enough there's actually a browser extension that does this.
Vertical margins are calculated against the containing block's width? While I'm sure there's some reason for that, that sounds like the kind of mistake you make after 1 too many beers while you're coding.
Use the goto, Luke.
It has been a while since I watched your video last time and I'm kind of confused now because the browser has its own window and it looks like you're using a linux distro. Or is this SerenityOS (Which would be still surprising since you run Firefox and CLion flawlessly).
Or, maybe the browser is now a standalone application.
Ladybird is a standalone browser based on (and sharing most code with) the SerenityOS browser. :)
WooHoo!