Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Things I wish I’d known about CSS

cssfordesigners.com

Post reply on HN
Print view View original

271–280 of 340 posts

Re: Things I wish I’d known about CSS

#271

Post by balfirevic »

LandR wrote: post #268
balfirevic wrote: post #253

Earlier quoted context omitted.

Did you have a large down payment? That looks like a small monthly cost for such mortgage. Or maybe the interest on such loan in Scotland is very small.

My down payment was £70k, interest rate is 2.14% When I renew at end of year it shoul be around 1.1%

Well damn, I don't think there is anything below 3.00% (3.50% more common) where I live.

That's nominal - 3.5% - 4.0% is the effective interest rate. I don't know much about mortgages, so not sure if I'm missing something. Congrats on your place - it looks great!

Re: Things I wish I’d known about CSS

#272

Post by cookiengineer »

andrewmcwatters wrote: post #270
cookiengineer wrote: post #267

Meanwhile, this is, oh so damn outdated. (I'm not kidding) Most people don't know that the flow model totally changed meanwhile, and something like "display: inline-block" actually means "display: inline flow-root", everything that came after flexbox kind of had an influence to the meanwhile borderline insane display model as a result. Everything related to inset, margin and padding has gotten an overhaul that is rea…

I'm a layout implementor for Planimeter's Grid Engine. Implementing a naive subset of the algorithm for calculating the box sizes in the visual formatting model and calculating layout for normal flow, relative positioning, and absolute positioning is far easier to implement than flexbox.[1] There's nothing insane about this. And you'll learn even more when trying to draw to the screen. Normal flow also doesn't requir…

> Implementing a naive subset of the algorithm

... and suddenly, a wild "overflow" and "text-overflow" appeared.

> Transform order absolutely matters. Any attempts to coerce order into a standardized sequence means developers have to account for this information.

What I meant is that the CSS specification for the new CSS transforms Level 2 has a fixed transformation matrix and order in which the properties are applied - whereas legacy "transform: rotate() scale() translate() ..." did not do this, and therefore was overly complicated.

In the new specification the transform order does not matter, because the order in which "translate: ...", "rotate: ...", "scale: ..." and "offset: ..." are applied is specified and cannot be changed. See [1]

PS: I'm talking about CSS transforms level 2, not level 1. I assume you are talking about level 1. "translate: 13% 37%" is a property whereas "transform: translate(13%, 37%)" was the legacy method.

Personally, I prefer CSS transforms level 2, because they are implementable in an easy manner. Having to write a complex compositor isn't an easy task, especially on mobile.

[1] https://drafts.csswg.org/css-transforms-2/#ctm

Re: Things I wish I’d known about CSS

#273

Post by kccqzy »

k__ wrote: post #126

It always helped me to do an absolute basic concepts course on a new technology I learn. Like, sure I can play around in Photoshop or Eclipse or CSS or JavaScript and find most things. But a good 101 course is worth so much saved time. Most of the stuff in that article was mentioned in a CSS box model course I did 10 years ago. People were always baffled how I learned all this. Well, I read the docs! They always assu…

I totally agree. A good book that introduces CSS in a methodical perspective is a must. I personally cut my teeth on CSS with the book Web Design in a Nutshell, a 2006 book. I remember having written CSS in a haphazard try-and-see fashion before that, which utterly confused me, and then reading an actual book made everything clear. This is an investment worth making. Many years later I'm still almost always "the guy" on my team to go to when there's a weird CSS issue.

Re: Things I wish I’d known about CSS

#274

Post by andrewmcwatters »

cookiengineer wrote: post #272
andrewmcwatters wrote: post #270

Earlier quoted context omitted.

I'm a layout implementor for Planimeter's Grid Engine. Implementing a naive subset of the algorithm for calculating the box sizes in the visual formatting model and calculating layout for normal flow, relative positioning, and absolute positioning is far easier to implement than flexbox.[1] There's nothing insane about this. And you'll learn even more when trying to draw to the screen. Normal flow also doesn't requir…

> Implementing a naive subset of the algorithm ... and suddenly, a wild "overflow" and "text-overflow" appeared. > Transform order absolutely matters. Any attempts to coerce order into a standardized sequence means developers have to account for this information. What I meant is that the CSS specification for the new CSS transforms Level 2 has a fixed transformation matrix and order in which the properties are applie…

Overflow is easy enough to deal with, text-overflow requires more work because it actually requires you have a model that matches the W3C specification understanding of generating boxes, instead of matching elements 1:1 which is what most naive implementations do. The same can be said about the white-space property.

Both are easy to implement; in one version, you parse then push the exact order of the parsed statements to matrix transformations. In level 2, you coerce them into the standardized order.

That being said, if you wanted to do anything based off of developer-specified transforms, you have to use level 1's style of applying the transformations. I would expect that GSAP and other such libraries rely on this behavior. Anyone familiar with shader-based transform code will be thinking in this manner anyway.

I'm not sure why anyone would want to use the level 2 manner of specifying transforms if you know what you're doing, because presumably, you immediately lose the ability to push additional transforms to the transform stack.

Re: Things I wish I’d known about CSS

#275

Post by runarberg »

theelous3 wrote: post #258
runarberg wrote: post #234

Earlier quoted context omitted.

Your evaluation is problematic. I am a front-end dev by trade and I could really easily say similar things about the tech stack you work with daily. If you want a good reference and a learning guide start with this: https://developer.mozilla.org/en-US/docs/Web/CSS it is what us professional use. For us professionals that use CSS in our jobs, that have put the same amount of hours into front end technology as you have…

"here I am, at the end of the maze, telling people at the beginning how straight forward it is" is basically all I'm getting here - and you call my eval problematic. Multiple accounts of people not in your position telling you a problem exists. Ok, great, you worked through it. Doesn't mean it's as good as it should be.

Well you come across as an outsider telling us that the tools that we use—and do a fine job with—are no good, and that our literature sucks.

I am here to argue that this sort of attitude is problematic. If you browse through this thread you will find no shortage of comments describing how absolutely basic this article is (and a little void of insight, and a little out dated), and that there are people in the industry getting six figures while not knowing this stuff. Frankly it is a little insulting. And I think the attitude that you presented above is part of the problem. There definitely exists a lack of respect for the craft of front-end development within our industry. This sort of attitude is not helping.

Re: Things I wish I’d known about CSS

#276

Post by [deleted] »

benhurmarcel wrote: post #130
mroset wrote: post #41

Earlier quoted context omitted.

For context: I'm an American who's currently working as a software engineer in France (for a French company). I agree that engineering salaries are much higher in the US than in Europe and other non-US countries, however it's worth considering that there are additional expenses to hiring in other countries. My french salary is ~30-40% lower than I was making in the US. However, my cost to my employer is nearly as hig…

Here is an official simulator for France: https://mon-entreprise.fr/simulateurs/salaire-brut-net It's not 100% accurate (the exact amounts depend on many variables) but gives a good idea. For example, a cost to the employer of USD 100k (87460€/year) gives a before-taxes salary of USD 70.5k, and a salary after all taxes of USD 47k.

[deleted]

Re: Things I wish I’d known about CSS

#277

Post by icedchai »

chrisweekly wrote: post #49

If you're looking for world-class CSS knowledge, start with https://every-layout.dev ; if you build UI for a living and haven't encountered axiomatic css and layout primitives, they're likely to change your world.

Thanks for the recommendation! I'm mainly a back end developer. I can hack around with CSS, but have never been very good at it.

Re: Things I wish I’d known about CSS

#278

Post by runarberg »

chrismorgan wrote: post #224
leephillips wrote: post #188

I don’t thnk the author’s recommendation to include img { display: block; } in your reset is generally a good idea. It will break some common uses of images, for example to hold bits of math inline with the text when you are not using mathjax. If you want a displayed image, you should wrap it in a tag, which will give you a block element.

If you wrap an image in a figure, but leave the image still inline, you’ll probably get a few pixels of extra space at the bottom of the image due to line-height and vertical-align. People find that really confusing. With how most people use images, I agree that `img { display: block; }` is what you want >99% of the time, and would rather people reverse it for the rare occasion when they want something else. (BTW, do…

Something like this then:

    figure img {
      display: block;
    }

    figure figcaption img {
      display: inline;
    }

Re: Things I wish I’d known about CSS

#279

Post by stimpson_j_cat »

wruza wrote: post #55

Guys we need to talk. Are you capsbold serious? These are things that you learn in a first week of doing web development tutorials. I read this thread and it makes me think that I'm delusional because of a heat wave. Margins collapse? :focus exists? Me not getting a joke? I don't understand.

Yeah I thought this was going to be quirks with CSS Grid or something.

The "CSS Zen Garden" from 1999 gets posted about every 3 months and makes it to the front page...

Re: Things I wish I’d known about CSS

#280

Post by runarberg »

jraph wrote: post #264

An element that has: display: inline-block is inline outside, block inside. That is, the element is inline for the containing block, but its children feel like they are in a block. An inline-block element can be vertically aligned with respect to the baseline: it acts a bit like a character in a paragraph. That's why you can vertically center things using vertical-align:center on an inline-block element. At least, th…

To be even more pedantic: It is inline outside and flow-root inside. From MDN:

> The element generates a block element box that establishes a new block formatting context, defining where the formatting root lies.

https://developer.mozilla.org/en-US/docs/Web/CSS/display-ins...

Post reply on HN