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

Learn CSS

web.dev

Post reply on HN
Print view View original

121–130 of 196 posts

Re: Learn CSS

#121

Post by Jemaclus »

macintux wrote: post #117
Jemaclus wrote: post #110

Earlier quoted context omitted.

Just as an FYI, I'm seeing a certificate error when loading web.dev. I'm on latest Chrome Version 90.0.4430.212 (Official Build) (x86_64) on Mac OS Big Sur Screenshot: https://d.pr/i/gvj3fA I've been trying to visit web.dev for days for various reasons, but I just get this and neither Chrome nor Safari will let me visit. But apparently a bunch of you can see the page, so I'm confused as to why I seem to be the only o…

Very odd, I'm on the same release (Catalina) and no difficulties. The certificate is from Google Trust Services, which presumably Chrome should honor. Perhaps you have a proxy causing interference? As the sibling comment notes, looking at the certificate using Advanced may help clarify things. Update: here's the full chain that I see: web.dev, signed by GTS CA 1D2, with a root certificate of GlobalSign Root CA - R2.

This is what I see: https://d.pr/i/8VY9As

As far as I know, I have no proxies to interfere...

Re: Learn CSS

#122

Post by macintux »

Jemaclus wrote: post #121
macintux wrote: post #117

Earlier quoted context omitted.

Very odd, I'm on the same release (Catalina) and no difficulties. The certificate is from Google Trust Services, which presumably Chrome should honor. Perhaps you have a proxy causing interference? As the sibling comment notes, looking at the certificate using Advanced may help clarify things. Update: here's the full chain that I see: web.dev, signed by GTS CA 1D2, with a root certificate of GlobalSign Root CA - R2.

This is what I see: https://d.pr/i/8VY9As As far as I know, I have no proxies to interfere...

Apparently there's still more to see if you dig deeper, but I'm unfamiliar with Chrome's UI for invalid certificates.

If you can open your terminal, this may be easier:

% openssl s_client -connect web.dev:443

It will hang (I guess awaiting more commands) but you can use Control-C to kill the connection.

The gist below has the first several lines showing what you should see.

https://gist.github.com/macintux/68ab1317d4b7677951069baf95c...

Re: Learn CSS

#123

Post by mumblemumble »

astatine wrote: post #86
kaycebasques wrote: post #29

I'm the content lead for web.dev. Just wanted to give a quick shout out to the people who made this happen because it's not clear on the site. I think this is also useful information because you'll see that a lot of CSS experts we're involved in this project. Adam Argyle [1] and Una Kravets [2] created the podcast series. Una mainly drove the overall project to convert the podcasts into this written series. Adam prov…

It is interesting that this uses a podcast + text rather than what would have been a more conventional video based tutorial. The use of a podcast for describing something so fundamentally visual as CSS looks really unusual. I just started going through and came back here to note that it somehow seems to work well!

At first blush, I like it a lot, and am eager to give it a try. I'm busy, and, no matter how much more efficient videos would be in an ideal world, I just don't have a lot of time to sit down and watch them. I also like to get away from the screen and go see what the outside world looks like every so often, y'know?

With a podcast, though, I can listen while I do dishes or whatever, and hopefully that will at least give me enough background information that I can understand the written parts more quickly.

Re: Learn CSS

#124

Post by [deleted] »

nailer wrote: post #78
Oddskar wrote: post #20

Earlier quoted context omitted.

This is like saying an alternative to learning how to cook is to sustain yourself on takeaway. Tailwind might be nice, but most projects will require in-depth knowledge about CSS.

People absolutely do use tailwind as an alternative to understanding CSS. Having seen and worked on projects in tailwind, I feel like that's it's primary purpose. Go on Twitter and look at the Tailwind community - they see CSS as a doomed, awful language and Tailwind as the thing that makes it pleasant. They're not CSS developers. They're people actively trying to avoid being CSS developers.

[deleted]

Re: Learn CSS

#125

Post by Jemaclus »

macintux wrote: post #122
Jemaclus wrote: post #121

Earlier quoted context omitted.

This is what I see: https://d.pr/i/8VY9As As far as I know, I have no proxies to interfere...

Apparently there's still more to see if you dig deeper, but I'm unfamiliar with Chrome's UI for invalid certificates. If you can open your terminal, this may be easier: % openssl s_client -connect web.dev:443 It will hang (I guess awaiting more commands) but you can use Control-C to kill the connection. The gist below has the first several lines showing what you should see. https://gist.github.com/macintux/68ab1317d4…

OK, I think I see what's happening. There's some other software that overrode the *.dev cert. I'll remove that and see if it works. Thanks for your help!

Re: Learn CSS

#126

Post by swiley »

NackerHughes wrote: post #114
swiley wrote: post #30

Earlier quoted context omitted.

One really interesting feature of CSS is that it's a regular language (you can write a regex that matches all valid CSS files.) This is unusual even for many config formats.

I'm glad we sacrificed any concept of hierarchy, scope and structure so that CSS files can be parsed by regex.

It can still refer to hierarchies via selectors. Honestly I think that's a fantastic way to handle it.

Re: Learn CSS

#127

Post by macintux »

Jemaclus wrote: post #125
macintux wrote: post #122

Earlier quoted context omitted.

Apparently there's still more to see if you dig deeper, but I'm unfamiliar with Chrome's UI for invalid certificates. If you can open your terminal, this may be easier: % openssl s_client -connect web.dev:443 It will hang (I guess awaiting more commands) but you can use Control-C to kill the connection. The gist below has the first several lines showing what you should see. https://gist.github.com/macintux/68ab1317d4…

OK, I think I see what's happening. There's some other software that overrode the *.dev cert. I'll remove that and see if it works. Thanks for your help!

Huh, that's...unexpected. My best guess was that somehow the root certificate was missing from your computer's trusted certificate store.

Glad you got it sorted, happy to help.

Re: Learn CSS

#128

Post by baxuz »

umut wrote: post #10

A viable alternative to all this is using tailwind, can't recommend it highly enough. When you pass the initial period where you feel like you're repeating yourself (1h max) it takes the nervousness out of your CSSing, it feels more like coding and less like schmoozing.. Just a happy user

No.

Re: Learn CSS

#129

Post by Ashanmaril »

blacktriangle wrote: post #65
umut wrote: post #10

A viable alternative to all this is using tailwind, can't recommend it highly enough. When you pass the initial period where you feel like you're repeating yourself (1h max) it takes the nervousness out of your CSSing, it feels more like coding and less like schmoozing.. Just a happy user

I know it's been said before, but no Tailwind does not replace CSS. Tailwind replaces having to come up with a new semantic class name every time you need to style an element only to realize the actual semantics you picked were completely wrong. Tailwind is basically a cleaner way to do everything as inline styles.

> Tailwind is basically a cleaner way to do everything as inline styles.

I'd say that's underselling it. For one thing it keeps you within a design system. By default you're given spacing that works in increments of 0.25rem, a handful of colors, etc to work with (which can be replaced/extended) so you have to go out of your way to break the design system that's in place.

Also inline styles don't allow for hover, focus, @media, etc. Which were always a pain in the ass with normal CSS anyway. Using Tailwind was the first time I didn't find writing a responsive UI to be a giant hassle. You just design for mobile and then for anything that needs to change on bigger screens you put a sm: or lg: or whatever breakpoint style and you're done.

Re: Learn CSS

#130

Post by asiachick »

I'm glad someone is working on better CSS tutorials.

The place I have the most trouble is getting content inside a flexbox to fill the box, especially when making a single screen app where I want various "panes" and I want the content inside to fill those panes.

For whatever reason I still haven't completely figured it out and it's always trial and error. Sometimes I need a "min-height: 0" and other times it seems like I need a "height: 100%;" and a maybe a "position: relative;"

I wish (I should probably write this myself), I wish there was a way of specifying the areas and their constraints and then have that translated into the appropriate CSS.

Post reply on HN