10 ms·

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 JavaScr

by k__ 6y ago

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 assume every one learned like them, by trying stuff out all of the time, until they got something working. Then they iterate from project to project, until they sorted out the bad ideas and kept the good ones. With that approach, learning CSS would probably have taken me 10 times as long. Sure this doesn't teach you everything or makes you a pro in a week, but I always have the feeling people just cobble around for too long and should instead take at least a few days for a more structured learning approach. What I didn't learn about CSS in a basic course and what cost me multiple weeks to fix, was `pointer-events: none`. Keep this in mind when your clicks stop working after you pulled some new CSS ;)

theelous3 6y ago
Cobbler here, currently cobbling a frontend (am a backend dev by trade). The issue for me is the format these courses and resources take. CSS is the most jam packed with non-intuitive technology I've met. How many dozens of pages or segments of video would I have to go through in a course to learn what the author in OP summarised in two or three sentences? Any time I've considered the structured approach for something like CSS, the material drones on and on with technically correct explanations and example code, but somehow against the odds, almost nothing of substance. Worse yet are the top google result reference resources. Look no further than the top result for "css grid" if you're in the mood to claw your brain from its stem, and flush it down the toilet. Link: https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/ Behold, 8 zillion words and symbols across 7 trillion seemingly randomly organised boxes full of both all of the information, and simultaneously none of the information, about css grids. Which brings me to where I am now, cobbling. It's more effective for me to cobble, than to spend an entire day figuring out css grids "the right way". If the going gets tough I'll just use some grid tool, or look up some sandbox examples, and be on my way. If there was more material like the OP, and someone organised it well, well, I'd actually get around to learning it rather than cobbling. It's the best bit of writing I've ever seen on CSS. This is shocking. Not that there is anything wrong with the writing, but it's very, very simple. What on earth have all of the other CSS wizards with basic writing skills been doing? Confusing the issue, that's what. Which leads me to a sort of meta frustration with learning CSS. I know it's not hard, I know that if someone just wrote about it even half decently it would take only a moment to digest each concept, but watching learner-disconnected authors create resources I can tell have lost sight of what it's like to learn, turns me off.
- k__ 6y ago
  Yes, web technology is overloaded, because of the history, backwards compatible stuff etc. pp.
- cosmodisk 6y ago
  Couldn't agree more. I had less issues learning multiple programming languages,some challenging concepts around them and yet when it comes to CSS, most resources aren't very useful. You do something and it doesn't work. You check documentation and it show exactly the same thing that does work. 5 hours later it turns out it was some overriding property+ browser incompatibility+ weird undocumented exception. Very few books do deliver on their promise either. I don't know,maybe it's just me but the whole ecosystem is a bit weird.
  - hutzlibu 6y ago
    " but the whole ecosystem is a bit weird." It absolutely is. The web was meant for static documents and some link magic. Now allmost every complex programm can run in the browser with web technologies. And in the time between you had lots of powerful organisations with their own agenda, as well as millions of single developers with a agenda and a loud voice. How could a sane, clear spec be made, under these circumstances? Besides, it would be very hard, to make a clean spec that satisfies the needs of the whole population. So by now I say, all in all, it works pretty good.
    - Silhouette 6y ago
      How could a sane, clear spec be made, under these circumstances? Serious answer: By respecting and supporting the organisation that had for a long time codified realistic web standards reasonably well. When the Web was younger, you could (and many of us did) learn all you needed to know about things like HTML and CSS by reading the documentation produced by the W3C. In many cases, the official recommendations themselves (the documents that were informally called "web standards") were very readable and short enough for normal developers to go through the whole thing.
im3w1l 6y ago
I'm kinda curious how the long term viability of these strategies look. Intuitively I think that reading the docs will become less and less viable as there are more and more available technologies and they become more and more featured. But I'm not fully convinced. Maybe it can keep working by only teaching the most important subset.
- theelous3 6y ago
  Learning by course is generally good (rust book!), but "overlearning" certainly exists in all technologies. I've been hanging out in freenode's ##learnpython for years helping noobs, and I can't count how many times I've met the scenario of a new programmer working their way methodically and studiously through a 2k page book, stuck on page 1643, because they haven't actually grasped concepts from page 20. They'll be all kinds of worried about how to correctly use slots and metaclasses, when they can't write even basic functions. CSS suffers massively from this info overload. What I tell every new programmer who will listen, is that they should first grasp the absolute basic building blocks, and then learn to read the docs. That's really all you need. Unless the particular language or technology their are using sucks, you can essentially compose anything from the basics. Once you've done that, the sortcuts and sugar you learn naturally actually make sense, rather than appear before you as spooky magic boxes and incantations. My ideal CSS course would just be the absolute basics of syntax and concepts, a primer on understanding and incorporating information from the docs, and then an index of well organised resources, such as the OP's. This way, it's impossible to overload, and I'm left in a state where I can expand at my own personal rate. Anything that tries to set the pace for you is going to be suboptimal for 99% of readers. Furthermore, anything that flows easily and without extremely explicit DO NOT PASS GO UNTIL YOU ARE EXCELLENT AT THE LAST CHAPTER, will lead to overload. You can't overload if you don't provide the information one can overload with. Simply ending your course after the basics and docs, absolutely guarantees against this problem. "Leave the learner in a known good state", would be my rule of thumb.
- anongraddebt 6y ago
  There is a learning method that hasn't been mentioned in this thread. Namely, a middle ground between pure cobbling and pure theory. In addition, you have to find a method that is optimal to you. For myself, that's a feedback loop where bugs during cobbling naturally present themselves as theory questions needing an answer, rather than practical questions needing a solution. It is rare to find documentation of such high quality that grasping the fundamental abstraction does not require theory-attentive debugging.
vivekseth 6y ago
100% agree. I found this to be a good guide: https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS After spending a few hours reading up on topics I thought would be relevant, I find that I am significantly more productive with CSS. Instead of trying to find answers on google, I find that I’m better equipped to build things and diagnose issues on my own.
wilsmex 6y ago
I built my first site in the 90's too (before CSS)! I've been in higher education lately, but have a YouTube channel with mostly CSS related content (both beginner & advanced). Check that out if you're interested in some great starter learning content for CSS and you prefer video format: https://www.youtube.com/followandrew https://www.youtube.com/followandrew
nwallin 6y ago
> I always have the feeling people just cobble around for too long and should instead take at least a few days for a more structured learning approach. There are two kinds of documentation: there's a list of all the individual things you can do, and there's a "The fundamental abstraction is this". The second is rare, and rarely done correctly, and much more important. A lot of people assume that X is like Y, but with Z, and they know Y, so they just need to learn about Z. A lot of time that isn't true, the fundamentals are different. The natural way do perform W in Y might be profoundly wrong in X. Examples: * git is like subversion, but distributed. * C++ is like C, but with classes. * C++ is like Java, but you have to remember to delete stuff. I love git. I love C++. I think these things are the bee's knees. They're so simple and elegant. But I totally understand how people think they're arcane eldritch horrors when you're holding the sword by the pointy end.
- commandlinefan 6y ago
  > there's a "The fundamental abstraction is this" In most cases, I'd settle for "what problem this is trying to solve" (although this is obvious for CSS, it isn't nearly as obvious for things like React and Vue).
  - afarrell 6y ago
    The problem here is that really understanding "what problem this is trying to solve" often requires a passing familiarity with cognitive science. How many people here could explain the link between Working Memory and React.js?
    - abhishekjha 6y ago
      New to JS world. Would love to know a brief explanation.
- tiglionabbit 6y ago
  Exactly. Another fundamental abstraction they should have mentioned in the article is [the surprising way z-index actually works](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...), especially being aware of the existence of [stacking contexts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...).
jrumbut 6y ago
Once I got the basic concepts of CSS I came to realize that of the trio of HTML, CSS, and JS (and SVG for that matter), CSS is the one you really miss when you have to make something using another system. The amount of suffering I've endured in Latex, PDF, different native layout systems, or even React Native's slightly restricted version of CSS that would have been resolved by a stylesheet is immense.
nharmonia 6y ago
I have tried both approaches a fair amount, and realized that every time I try the cobbler approach I end up getting blocked on some major thing and thus having to rewrite everything because of some basic things that could have been avoided. I feel like it's getting both better and worse now with docs getting better in general(no of times I end up on stackoverflow has gone down significantly), however a lot of times I end up on medium posts with a list of steps and absolutely zero reason why. Whenever I try cobbling from those articles, I end up very frustrated
thiht 6y ago
I completely relate. Other things I learnt "formally": - regexps (this is a big one, being able to write a complex regexp without thinking about it is amazing) - Git - basic JS when it was mainly used to add snow on your page Taking the time to properly learn things is extremely valuable.
kccqzy 6y ago
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.
- commandlinefan 6y ago
  > A good book One under-appreciated value that actual books have over online documentation is that you know immediately what order you're supposed to read them in.
jamaicahest 6y ago
After spending years learning on the job, I started reading the documentation books cover to cover, and I have never looked back. Colleagues are often amazed at my "deep knowledge" of the technologies I use, however I mostly know what is written in the manual. It baffles me that people can't be bothered to read the documentation and at the same time complain that "X is too hard! Let's use Y instead!"
- dogfoods 6y ago
  There's a reason RTFM was so prevalent, and we need to make it so, again.
- russellendicott 6y ago
  Same here. I tried finding a book about deb and rpm packaging the other day and couldn't find one. Left me feeling anxious.
ivanhoe 6y ago
For me personally, documentation was just a step one, helping me to discover that some feature exists, what options are, etc. - and then "cobbling around", as you said, was the very important 2nd step where I'd really understand how something works and what's the best way to apply it in real life. Everyone learns differently, I guess...
sgt-serverless 6y ago
> It always helped me to do an absolute basic concepts course on a new technology I learn. Totally agree. I remember reading a CSS book on kindle in Aruba many years back. I find I really need to deep dive into something to understand it. Because at that point, I was like, I can code in everything, I really need to understand what the heck this CSS is doing. Thank goodness for flex box now, saves so much manually work. I code a lot in Vue with Vuetify, so <v-layout row wrap><v-flex shrink>this</v-flex><v-flex grow>that</v-flex></v-layout> is magical.

by k__ 6y ago

theelous3 6y ago

Cobbler here, currently cobbling a frontend (am a backend dev by trade). The issue for me is the format these courses and resources take. CSS is the most jam packed with non-intuitive technology I've met. How many dozens of pages or segments of video would I have to go through in a course to learn what the author in OP summarised in two or three sentences? Any time I've considered the structured approach for something like CSS, the material drones on and on with technically correct explanations and example code, but somehow against the odds, almost nothing of substance. Worse yet are the top google result reference resources. Look no further than the top result for "css grid" if you're in the mood to claw your brain from its stem, and flush it down the toilet. Link: https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/ Behold, 8 zillion words and symbols across 7 trillion seemingly randomly organised boxes full of both all of the information, and simultaneously none of the information, about css grids. Which brings me to where I am now, cobbling. It's more effective for me to cobble, than to spend an entire day figuring out css grids "the right way". If the going gets tough I'll just use some grid tool, or look up some sandbox examples, and be on my way. If there was more material like the OP, and someone organised it well, well, I'd actually get around to learning it rather than cobbling. It's the best bit of writing I've ever seen on CSS. This is shocking. Not that there is anything wrong with the writing, but it's very, very simple. What on earth have all of the other CSS wizards with basic writing skills been doing? Confusing the issue, that's what. Which leads me to a sort of meta frustration with learning CSS. I know it's not hard, I know that if someone just wrote about it even half decently it would take only a moment to digest each concept, but watching learner-disconnected authors create resources I can tell have lost sight of what it's like to learn, turns me off.

k__ 6y ago
Yes, web technology is overloaded, because of the history, backwards compatible stuff etc. pp.
cosmodisk 6y ago
Couldn't agree more. I had less issues learning multiple programming languages,some challenging concepts around them and yet when it comes to CSS, most resources aren't very useful. You do something and it doesn't work. You check documentation and it show exactly the same thing that does work. 5 hours later it turns out it was some overriding property+ browser incompatibility+ weird undocumented exception. Very few books do deliver on their promise either. I don't know,maybe it's just me but the whole ecosystem is a bit weird.
- hutzlibu 6y ago
  " but the whole ecosystem is a bit weird." It absolutely is. The web was meant for static documents and some link magic. Now allmost every complex programm can run in the browser with web technologies. And in the time between you had lots of powerful organisations with their own agenda, as well as millions of single developers with a agenda and a loud voice. How could a sane, clear spec be made, under these circumstances? Besides, it would be very hard, to make a clean spec that satisfies the needs of the whole population. So by now I say, all in all, it works pretty good.
  - Silhouette 6y ago
    How could a sane, clear spec be made, under these circumstances? Serious answer: By respecting and supporting the organisation that had for a long time codified realistic web standards reasonably well. When the Web was younger, you could (and many of us did) learn all you needed to know about things like HTML and CSS by reading the documentation produced by the W3C. In many cases, the official recommendations themselves (the documents that were informally called "web standards") were very readable and short enough for normal developers to go through the whole thing.

im3w1l 6y ago

I'm kinda curious how the long term viability of these strategies look. Intuitively I think that reading the docs will become less and less viable as there are more and more available technologies and they become more and more featured. But I'm not fully convinced. Maybe it can keep working by only teaching the most important subset.

theelous3 6y ago
Learning by course is generally good (rust book!), but "overlearning" certainly exists in all technologies. I've been hanging out in freenode's ##learnpython for years helping noobs, and I can't count how many times I've met the scenario of a new programmer working their way methodically and studiously through a 2k page book, stuck on page 1643, because they haven't actually grasped concepts from page 20. They'll be all kinds of worried about how to correctly use slots and metaclasses, when they can't write even basic functions. CSS suffers massively from this info overload. What I tell every new programmer who will listen, is that they should first grasp the absolute basic building blocks, and then learn to read the docs. That's really all you need. Unless the particular language or technology their are using sucks, you can essentially compose anything from the basics. Once you've done that, the sortcuts and sugar you learn naturally actually make sense, rather than appear before you as spooky magic boxes and incantations. My ideal CSS course would just be the absolute basics of syntax and concepts, a primer on understanding and incorporating information from the docs, and then an index of well organised resources, such as the OP's. This way, it's impossible to overload, and I'm left in a state where I can expand at my own personal rate. Anything that tries to set the pace for you is going to be suboptimal for 99% of readers. Furthermore, anything that flows easily and without extremely explicit DO NOT PASS GO UNTIL YOU ARE EXCELLENT AT THE LAST CHAPTER, will lead to overload. You can't overload if you don't provide the information one can overload with. Simply ending your course after the basics and docs, absolutely guarantees against this problem. "Leave the learner in a known good state", would be my rule of thumb.
anongraddebt 6y ago
There is a learning method that hasn't been mentioned in this thread. Namely, a middle ground between pure cobbling and pure theory. In addition, you have to find a method that is optimal to you. For myself, that's a feedback loop where bugs during cobbling naturally present themselves as theory questions needing an answer, rather than practical questions needing a solution. It is rare to find documentation of such high quality that grasping the fundamental abstraction does not require theory-attentive debugging.

vivekseth 6y ago

100% agree. I found this to be a good guide: https://developer.mozilla.org/en-US/docs/Web/CSS https://developer.mozilla.org/en-US/docs/Web/CSS After spending a few hours reading up on topics I thought would be relevant, I find that I am significantly more productive with CSS. Instead of trying to find answers on google, I find that I’m better equipped to build things and diagnose issues on my own.

wilsmex 6y ago

I built my first site in the 90's too (before CSS)! I've been in higher education lately, but have a YouTube channel with mostly CSS related content (both beginner & advanced). Check that out if you're interested in some great starter learning content for CSS and you prefer video format: https://www.youtube.com/followandrew https://www.youtube.com/followandrew

nwallin 6y ago

> I always have the feeling people just cobble around for too long and should instead take at least a few days for a more structured learning approach. There are two kinds of documentation: there's a list of all the individual things you can do, and there's a "The fundamental abstraction is this". The second is rare, and rarely done correctly, and much more important. A lot of people assume that X is like Y, but with Z, and they know Y, so they just need to learn about Z. A lot of time that isn't true, the fundamentals are different. The natural way do perform W in Y might be profoundly wrong in X. Examples: * git is like subversion, but distributed. * C++ is like C, but with classes. * C++ is like Java, but you have to remember to delete stuff. I love git. I love C++. I think these things are the bee's knees. They're so simple and elegant. But I totally understand how people think they're arcane eldritch horrors when you're holding the sword by the pointy end.

commandlinefan 6y ago
> there's a "The fundamental abstraction is this" In most cases, I'd settle for "what problem this is trying to solve" (although this is obvious for CSS, it isn't nearly as obvious for things like React and Vue).
- afarrell 6y ago
  The problem here is that really understanding "what problem this is trying to solve" often requires a passing familiarity with cognitive science. How many people here could explain the link between Working Memory and React.js?
  - abhishekjha 6y ago
    New to JS world. Would love to know a brief explanation.
tiglionabbit 6y ago
Exactly. Another fundamental abstraction they should have mentioned in the article is [the surprising way z-index actually works](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...), especially being aware of the existence of [stacking contexts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positio...).

jrumbut 6y ago

Once I got the basic concepts of CSS I came to realize that of the trio of HTML, CSS, and JS (and SVG for that matter), CSS is the one you really miss when you have to make something using another system. The amount of suffering I've endured in Latex, PDF, different native layout systems, or even React Native's slightly restricted version of CSS that would have been resolved by a stylesheet is immense.

nharmonia 6y ago

I have tried both approaches a fair amount, and realized that every time I try the cobbler approach I end up getting blocked on some major thing and thus having to rewrite everything because of some basic things that could have been avoided. I feel like it's getting both better and worse now with docs getting better in general(no of times I end up on stackoverflow has gone down significantly), however a lot of times I end up on medium posts with a list of steps and absolutely zero reason why. Whenever I try cobbling from those articles, I end up very frustrated

thiht 6y ago

I completely relate. Other things I learnt "formally": - regexps (this is a big one, being able to write a complex regexp without thinking about it is amazing) - Git - basic JS when it was mainly used to add snow on your page Taking the time to properly learn things is extremely valuable.

kccqzy 6y ago

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.

commandlinefan 6y ago
> A good book One under-appreciated value that actual books have over online documentation is that you know immediately what order you're supposed to read them in.

jamaicahest 6y ago

After spending years learning on the job, I started reading the documentation books cover to cover, and I have never looked back. Colleagues are often amazed at my "deep knowledge" of the technologies I use, however I mostly know what is written in the manual. It baffles me that people can't be bothered to read the documentation and at the same time complain that "X is too hard! Let's use Y instead!"

dogfoods 6y ago
There's a reason RTFM was so prevalent, and we need to make it so, again.
russellendicott 6y ago
Same here. I tried finding a book about deb and rpm packaging the other day and couldn't find one. Left me feeling anxious.

ivanhoe 6y ago

For me personally, documentation was just a step one, helping me to discover that some feature exists, what options are, etc. - and then "cobbling around", as you said, was the very important 2nd step where I'd really understand how something works and what's the best way to apply it in real life. Everyone learns differently, I guess...

sgt-serverless 6y ago

> It always helped me to do an absolute basic concepts course on a new technology I learn. Totally agree. I remember reading a CSS book on kindle in Aruba many years back. I find I really need to deep dive into something to understand it. Because at that point, I was like, I can code in everything, I really need to understand what the heck this CSS is doing. Thank goodness for flex box now, saves so much manually work. I code a lot in Vue with Vuetify, so <v-layout row wrap><v-flex shrink>this</v-flex><v-flex grow>that</v-flex></v-layout> is magical.