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

71–80 of 340 posts

Re: Things I wish I’d known about CSS

#71

Post by umaar »

techbubble wrote: post #59

This 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…

I learnt CSS in a similar way. I'd take Photoshop designs and try to recreate them in vanilla HTML + CSS:

https://jsfiddle.net/umaar/YNA5V/

https://jsfiddle.net/umaar/fu4TT/

I'd even make 3d graphics of things like the HTML5 logo: https://i.imgur.com/kuEYpSV.png

I posted this all to a community called "Forrst" (think of it like twitter, but curated for developers and designers).

I spent time giving feedback on other peoples work, I tried to ask insightful questions https://twitter.com/umaar/status/823915022917271552 to have an open discussion, I spent hours replying to comments every few days.

Then one day, Forrst got acquired by Zurb https://zurb.com/blog/zurb-acquires-forrst and later on it got shut down, and with that, I lost access to huge amounts of my work which I hadn't stored anywhere else (some stuff has been archived online, but not everything).

When it comes to web development tips, I now self-host on my own website and it's a really good feeling knowing that it'll be preserved: https://umaar.com/dev-tips/

Re: Things I wish I’d known about CSS

#72

Post by PetahNZ »

miiiiiike wrote: post #65
jb1991 wrote: post #31

Yikes. 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…

But when was this? CSS grid has only really been viable for a few years in terms of significant browser support.

Re: Things I wish I’d known about CSS

#73

Post by mkayokay »

gorgoiler wrote: post #63

It 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.

I have been using Python with Jinja2 templates and Weasyprint[1] for PDF creation for a side project of mine. The libary does have its css limitations but the PDFs it produces look good enough for me.

[1] https://weasyprint.org/

Re: Things I wish I’d known about CSS

#75

Post by miiiiiike »

PetahNZ wrote: post #72
miiiiiike wrote: post #65

Earlier quoted context omitted.

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…

But when was this? CSS grid has only really been viable for a few years in terms of significant browser support.

Last year. Around November and 91% unprefixed usage (https://caniuse.com/#search=display%3Agrid)

Re: Things I wish I’d known about CSS

#76

Post by techbubble »

peruvian wrote: post #62
techbubble wrote: post #59

This 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.

I agree with that 100% — if it isn't fun, it's work. And if you build enough knowledge about how CSS works in general, when it comes to implementing specific layout or responsive design techniques you have a good understanding of the basics to build upon.

Re: Things I wish I’d known about CSS

#77

Post by miiiiiike »

nefitty wrote: post #70
miiiiiike wrote: post #65

Earlier quoted context omitted.

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.

Thanks. If you'd like some more book and video suggestions I sent this to a friend back when she was looking to get into front-end development a few months ago:

Here are some book and video links (with Amazon affiliate tags snuck in). I've read all of these books cover-to-cover save for the RxJS one. They approach front-end as a set of technologies that should be understood and mastered rather than the "CsS hAckS to GET YoU pAiD!" style of most web tutorials.

Not sure where to point you with React but if you decide to use Angular or Vue I have some suggestions.

CSS/Sass:

"CSS: The Definitive Guide": https://www.amazon.com/CSS-Definitive-Guide-Visual-Presentat...

"Pragmatic Guide to Sass 3: Tame the Modern Style Sheet": https://www.amazon.com/Pragmatic-Guide-Sass-Modern-Style/dp/...

This Sass book has the best structure of any introductory tech book I've ever read.

"TypeScript":

Mastering TypeScript 3: https://www.amazon.com/Mastering-TypeScript-enterprise-ready...

"Programming TypeScript": https://www.amazon.com/Programming-TypeScript-Making-JavaScr...

RxJS: Reactive programming the most significant development in UI technology in 20 years. Once you get the hang of it managing asynchronous events (user generated, network generated, time based, etc) become a breeze.

"Build Reactive Websites with RxJS: Master Observables and Wrangle Events": https://www.amazon.com/Build-Reactive-Websites-RxJS-Observab...

RxMarbles - Interactive RxJS visulizations: https://rxmarbles.com/

Angular:

"Angular Development with TypeScript": https://www.amazon.com/Angular-Development-Typescript-Yakov-...

"Architecting Angular Applications with Redux, RxJS, and NgRx: Learn to build Redux style high-performing applications with Angular 6": https://www.amazon.com/Architecting-Angular-Applications-Red...

Videos:

I watched most of the Layout Land videos when I was getting a grip on the state of CSS. Jen Simmons is a developer advocate at Mozilla and has the best overviews I've seen.

Basics of CSS Grid: The Big Picture: https://www.youtube.com/watch?v=FEnRpy9Xfes

Using Flexbox + CSS Grid Together: Easy Gallery Layout: https://www.youtube.com/watch?v=dQHtT47eH0M

Re: Things I wish I’d known about CSS

#78

Post by techbubble »

umaar wrote: post #71
techbubble wrote: post #59

This 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…

I learnt CSS in a similar way. I'd take Photoshop designs and try to recreate them in vanilla HTML + CSS: https://jsfiddle.net/umaar/YNA5V/ https://jsfiddle.net/umaar/fu4TT/ I'd even make 3d graphics of things like the HTML5 logo: https://i.imgur.com/kuEYpSV.png I posted this all to a community called "Forrst" (think of it like twitter, but curated for developers and designers). I spent time giving feedback on other…

I like what you have done with the site — very simple and easy to check out the tips. I subscribed.

Re: Things I wish I’d known about CSS

#79

Post by jventura »

bbx wrote: post #68
andi999 wrote: post #19

Anybody 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. [1] https://jgthms.com/css-in-44-minutes-ebook/

I'm curious about your book, as it seems small enough for the kind of things I write as well [1]. Can I ask if it earns you enough for anything?

Sorry for coming out of nowhere, but I have lots of small tutorials I could use (I teach in a local college) which I could make small ebooks out of them.. Looking for some side money..

[1] https://github.com/joaoventura/full-speed-python

Post reply on HN