Hi, all! I'm author on pitayan.com. It's about front end development.
Link: https://pitayan.com
Things I wish I’d known about CSS
61–70 of 340 posts
Re: Things I wish I’d known about CSS
#62This was a great article and I learned a few new tricks. I learned CSS over the years by gradually solving problems I encountered building apps. Compare this to people learning CSS now as evidenced by the #100DaysOfCode tag on Twitter. The learning technique is comprised primarily of using gradient-heavy, absolutely positioned HTML elements to create a photo-realistic, 3D rendering of objects. The results are pretty…
A lot of people make games or fun projects for #100DaysOfCode when their job might be updating a CRUD MVC app using Y framework. I think as long as it puts them in the "coding" mindset it's worthwhile.
Re: Things I wish I’d known about CSS
#63It feels like HTML and CSS could be useful for print layout, but I’ve rarely seen a high quality PDF renderer.
I know Atom’s markdown preview uses headless chrome under the hood. These are hugely heavyweight tools but the output is very high quality.
Are there any other recommended tools for going an HTML route, for typesetting? I’d much rather design pages that way than use InDesign, PDF scripting, or TeX.
Re: Things I wish I’d known about CSS
#64Guys 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.
I think you may be underestimating the fact that many people have been writing CSS for well over a decade now, and that it has evolved considerably since they first read a web development tutorial. If you've not been paying close attention (or not been able to), there are many things that will have passed you by.
It's a blessing to learn css fresh today, in as much as it's a curse to still have practices from ten years ago still lodged in your memory.
Re: Things I wish I’d known about CSS
#65Yikes. I've been earning 6 figures as of about two years ago doing mostly HTML and CSS UI design for a bank. And I still did not know about many of these! I guess they are things I wish I'd known about CSS! Better late than never I guess.
I've never been happy with a front-end dev that I've paid six-figures to.
I once paid a senior front-end engineer far too much to do a fairly involved layout. Three months, an uncountable number of bugs, and one unusable tangle of Sass later I pulled the plug and swore off ever hiring a "CSS Person" again.
I took the Linus+Git approach and said "I'm not writing another line of Python until I understand CSS." After a few weeks of study (I read CSS: The Definitive Guide cover-to-cover) I was able to implement the layout in, and I'm not exaggerating, two hours. No bugs, responsive, cross browser support, etc. Flat out done.
I went back to the dev and asked why they tried to implement it with over a thousand lines of Sass using Flexbox over a few lines with CSS Grid.
It went like this:
Me: "Hey, why did you choose Flexbox over CSS Grid for feature XYZ?"
Senior Front-End Dev (SFED): "I used a grid. Bootstrap's grid."
Me: "No, CSS Grid"
SFED: "Like the 'display: grid' thing? I don't know how that works."
I've never met a CSS Person who has read a book on CSS. Or one that can do the arithmetic on a simple flex-grow/flex-shrink/flex-basis combo.. Even with a cheat sheet.
I'm a back-end dev, I used to think that CSS was "garbage". After learning the ins and outs I think it's a pretty remarkable set of technologies. A true discipline. But, it's hard to find someone who really understands it because it sits at a weird level in the tech stack. Most developers feel it's beneath them or that they "have the gist of it" and most CSS specialists don't have a firm grip on it or keep up with browser developments.
If you're going to work with, hire, or exist as a "CSS Person" within 6-feet of me I'm going to require you to read "CSS: The Definitive Guide" before I give your laptop charger back to you.
This article is good, but it's barely the bare minimum that you need to know about not knowing CSS.
Six-figures for a "CSS Person" who's read CSS:TDG is completely worth it.
CSS and Sass are both worth mastering.
For CSS read: "CSS: The Definitive Guide" (https://www.amazon.com/CSS-Definitive-Guide-Visual-Presentat...)
For Sass read: "Pragmatic Guide to Sass 3" (https://www.amazon.com/Pragmatic-Guide-Sass-Modern-Style/dp/...)
Re: Things I wish I’d known about CSS
#66If 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.
To save clicks, it's $100, just covers page layouts.
Re: Things I wish I’d known about CSS
#67It’s amazing how software engineers can get things done without actually knowing the tools they are using. CSS is one of these tools that i never bothered to learn properly but instead hack it until it works as expected.
Re: Things I wish I’d known about CSS
#68Anybody knows a good book on CSS for ppl with a solid programming background? Every couple of years I try something and fail. Somehow the tutorial rave about the cascading on and on, and when it comes how to strategically design a good SAP working on different devices the stuff gets mute quickly.
I’ve written a small CSS ebook if that interests you. [1] It teaches you how to build a webpage from scratch.
I’m currently writing my second one, which will be more theoretical and cover things like this blog post actually. I’d be interested to know what kind of problems you’re facing in CSS, so feel free to drop me an email.
Re: Things I wish I’d known about CSS
#69Earlier quoted context omitted.
>What is the benefit of em/rem? They (em*) scale with the element's font size, and if you set an elements font-size itself in em, that will be relative to the parent element's font size. For example: body { font-size: 18px } .something { border: 0.1em solid black; } .something > .inner { font-size: 1.5em } If you change the font-size on body, everything on that page will re-scale seamlessly. This is most useful for t…
The challenge with em units is that if you modify a parent element's size it changes the children as well. In your example, if you put 'font-size: 2.0em' on the .something class then the .inner would end up changing to 3.0em. That's rarely what you actually want to happen (especially in a web app). If you just want to control the overall font scaling of everything on the page using rem is preferable, because then the…
The key is to use rem for font-size and em or unitless for all other properties: padding, border-width, margin, line-height. That way the size of the element is independent of the context.
Re: Things I wish I’d known about CSS
#70Yikes. I've been earning 6 figures as of about two years ago doing mostly HTML and CSS UI design for a bank. And I still did not know about many of these! I guess they are things I wish I'd known about CSS! Better late than never I guess.
I've never been happy with a front-end dev that I've paid six-figures to. I once paid a senior front-end engineer far too much to do a fairly involved layout. Three months, an uncountable number of bugs, and one unusable tangle of Sass later I pulled the plug and swore off ever hiring a "CSS Person" again. I took the Linus+Git approach and said "I'm not writing another line of Python until I understand CSS." After a…
This might be one of the most helpful book recommendations I’ve ever read.