1. 33
  1. 11

    I once helped a good friend of mine with some intro-to-programming homework she was stuck on — building a simple dynamic web page with some JS. It reminded me a little bit of TA-ing CS 10 in college … only the concepts were a hell of a lot more complicated. It was eye-opening.

    I had thought before that in-browser JS was a nice platform to learn on: interactive, visual, high-level. And yeah, it’s nice that learners don’t have to deal with the concept of pointers and the resulting crashes or data corruption. And the results are more rewarding than seeing “HELLO WORLD” printed in a terminal.

    But even a simple script to update a web page when you press a button is sitting on top of a mountain of CS concepts like trees, objects, parsing (i.e. the relation between the HTML markup and the Element objects), events and event handlers… I vividly remember trying to help her understand how the text ”<div>” related to the name HTMLDivElement and how one thing mapped onto another.

    Then a few years later I watched my kid take to programming like a duck to water, by writing simple CLI tools (games mostly) in C. A much grungier language and less sexy results, but on thinking about it I could see why it was a shallower learning curve. Heck, it’s the exact same domain I learned in back in the 1970s, only I was using BASIC.

    1. 2

      It took me years to figure out that the Document Object Model (DOM) is just a tree of objects, and that this tree has document as the root and is built by the page’s HTML and can be manipulated by JavaScript. After that, everything clicked. However, CSS and aligning elements precisely in relation to each other, with support for different screen sizes and browsers, that’s an art I will never master. On a difficulty level, I would place it on par with reverse engineering compiled binaries.

      1. 3

        Assuming you have basic knowledge of CSS (syntax, how selectors and properties work) but don’t know how to do layouts and such, here are a few tips:

        Don’t use a text editor to write your CSS, use your browser’s developer tools. It’s a much better experience. You get live feedback as you change things, some things like colors and (in Chrome) box-shadows and animations have little graphical editors, it’s much easier than trying to write CSS elsewhere. CSS-Tricks and MDN are your friends.

        Flexbox is usually what you want for layouts. CSS-Tricks has a good reference for it, for a long time I needed to check that page every time I was doing CSS. I’ve also heard good things about Flexbox Froggy. CSS grid is nice too, but it’s much more complicated.

        Always add * { box-sizing: border-box; } to your css files, it makes width/height/padding behave more nicely.

    2. 1

      I’m looking forward to the JavaScript tutorial!

      Stories with similar links:

      1. Interneting Is Hard via flyingfisch 5 years ago | 8 points | 3 comments