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

My First CSS

engineering.kablamo.com.au

Post reply on HN
Print view View original

31–40 of 107 posts

Re: My First CSS

#31

Post by pramodbiligiri »

FindMySocks wrote: post #8
hmwhy wrote: post #6

Based on the way the article is written, I assume that software engineering was not new to the author when he first started writing CSS. It seems strange to me to write an article like this because it's just an indication that the author chose to dive in without understanding the fundamentals first. I'm honestly just trying to understand how articles like this get promoted to the front page of Hacker News more and mo…

The question then comes, where would one go to learn the fundamentals-and what are they now? Being someone who was ahead of the game in css 15 years ago, but not having touched it since - where would one go to understand the new fundamentals and options available?

This is a great recent book from an experienced practitioner - https://learningwebdesign.com/

Her explanation of positioning, responsive design and the links to other resources she provides inside are all good.

Re: My First CSS

#32

Post by itsArtur »

kilodeca wrote: post #15

> CSS can be hard to grasp when you're starting out. It can seem like magic wizardry and you can very easily find yourself playing whack-a-mole adjusting one property only to have something else break. Only if you learned from the wrong source.

Do you mind sharing the good source?

Re: My First CSS

#33

Post by sodimel »

> A key way I think about building visual UI components is that basically everything can be broken down into a bunch of rectangles on a page.

I created this tiny script[1] in order to be able to view all the rectangles that makes a website, a little while ago. Here's a demo[2].

[1]: https://gist.github.com/corentinbettiol/85a8938175f89a15ac35...

[2]: https://up.l3m.in/file/1597168094-tilt.webm

Re: My First CSS

#34

Post by ofrzeta »

brundolf wrote: post #5

These are good concrete concepts to use as a foundation. I would add a general principle that I think is really important: let the layout engine do as much work for you as possible. Which is to say, tell it as little as possible. If you want that to be narrower, you probably don't want to set it to a narrower `width`, you want to step back and understand where its current width is coming from, and determine how that…

That's good advice. It's also a kind of zen-like approach (forgive me if I am not referring to it by the book). In the past I used to fight CSS by setting all kinds of attributes until it looked half-decent. Now I feel much better by cutting back and lettings the layout engine do its work as you said. Turns out to work better on mobile, too. (Ok let's forget about the dirty media query hacks to shift the last pixels. Move them to a dirty.css and enjoy your other clean stylesheets).

Re: My First CSS

#35

Post by ojkelly »

kilodeca wrote: post #15

> CSS can be hard to grasp when you're starting out. It can seem like magic wizardry and you can very easily find yourself playing whack-a-mole adjusting one property only to have something else break. Only if you learned from the wrong source.

like w3schools back in the days before MDN and YouTube existed.

Re: My First CSS

#36

Post by lelanthran »

Brajeshwar wrote: post #20

I tend to believe that someone who can do magic CSS is about the ability to weave it with Mathematics and patterns. Other than that, the way you use CSS as it evolves become more and more syntactic sugar. Once you are comfortable with CSS, try to dig a tad deeper into design philosophies and patterns. Work with established designers who understand that spacing is not just margins/padding of a designated number but a…

> Advance topics to research and have pace with CSS are vertical rhythm for spacings, modular scaling for typography, and the Cicada Principle, etc.

Do you have some links? Because the first DDG result for all those concepts together is your comment on this page.

Re: My First CSS

#37

Post by KronisLV »

dmz73 wrote: post #30
greggman3 wrote: post #24

For me those rules are not the fundamentals. There's more you need to know to actually get CSS to work (and I still usually have to guess and google and try random things to get it to work because my knowledge is lacking) In particular trying to get content of some flexbox to fill the space provided by the flexbox itself, especially in a single non-scrolling app like page where you're trying to constrain everything t…

I think there is a very easy fix to most HTML/CSS problems when building GUI on the web - use HTML5 canvas. HTML is not a good match for GUI and CSS is not a good match for...anything. HTML5 canvas brings you to where Windows/X was 25 years ago so instead of trying to build GUI using TUI, just use the damn GUI already. Sure, the whole lot of tooling is missing but some copy/paste/fix from either Windows or X should p…

That's not really a fix, though. Flutter is trying to use this approach and if you go to their demo sites you will notice things feeling slightly off: https://gallery.flutter.dev

Some of the notable drawbacks:

  - you can no longer select text on the page, anywhere
  - right click doesn't work like you'd expect it to, either, since you're looking at a canvas
  - currently the download sizes are absurdly large, since you need to pack a large amount of functionality in .js/.wasm (over 10 MB, actually)
  - for simpler pages, the performance overhead will be very noticeable, just try zooming in or out in those pages (i got
I'd say that most GUIs should be simple enough to work well with DOM, instead of throwing away decades of progress while chasing niche goals. HTML and CSS are great for displaying all sorts of documents and personally i think that the web should not stray too far from that - utilitarian interfaces that are simple and easy to understand, rather than sci-fi ones like portrayed here: https://www.saji8k.com/kit-fui/movie/

Re: My First CSS

#38

Post by ojkelly »

itsArtur wrote: post #32
kilodeca wrote: post #15

> CSS can be hard to grasp when you're starting out. It can seem like magic wizardry and you can very easily find yourself playing whack-a-mole adjusting one property only to have something else break. Only if you learned from the wrong source.

Do you mind sharing the good source?

MDN is the best reference to keep on hand to check how something works. https://developer.mozilla.org/en-US/docs/Web/CSS

and web.dev has a pretty decent walk through for learning css https://web.dev/learn/css/

Re: My First CSS

#39

Post by qwertox »

> box-sizing: border-box

I feel ashamed not knowing about this option. content-box has caused me so many troubles over and over again, and I didn't know it had such an easy solution.

Re: My First CSS

#40

Post by MonaroVXR »

Brajeshwar wrote: post #20

I tend to believe that someone who can do magic CSS is about the ability to weave it with Mathematics and patterns. Other than that, the way you use CSS as it evolves become more and more syntactic sugar. Once you are comfortable with CSS, try to dig a tad deeper into design philosophies and patterns. Work with established designers who understand that spacing is not just margins/padding of a designated number but a…

I want to see it, I'm just curious.
Post reply on HN