8 ms·

Introduction to Web Development (2018)

227 points by henning 7y ago

mattgerstman 7y ago
I wish all courses were this thorough! Thanks Mr Holt!
rob_b 7y ago
“vi Oh boy. Here we go. Type vi index.html. This going to open vim which is an editor that's all in the command line.” Not to sound pedantic, but vi is not vim. While vim was designed as vi-improved, instructing users of vi to use vim direction is not going to be a complete match and may cause confusion for those not familiar with it.
- jachee 7y ago
  On any given *nix system that's current today, `vi` is a symlink to `vim`. You can check yourself with `ls -l $(which vi)` in bash.
  - jen20 7y ago
    However, some modern vims check which incantation they were started with and modify their behaviour accordingly (e.g. nocompatible vs not).
  - deckard1 7y ago
    That's not remotely true. Even archlinux links to ex. Type vim if you mean vim. Even if vi is aliased to vim, it's possible you'll end up in ex compatible mode anyway.
  - deleted 7y ago
    [deleted]
  - rob_b 7y ago
    That is not always the case. Clearly, you’ve never encountered “vim: command not found” but found vi to work without a problem.
    - jachee 7y ago
      Not in at least ten years. Except for on BusyBox systems.
      - deleted 7y ago
        [deleted]
      - tstrimple 7y ago
        That's the default behavior on Raspbian as well.
  - jachee 7y ago
    Allow me to show my work (within the confines of HN's mostlyuseless formatting system): Raspbian: [jachee@mmmmpi:~] [23:10:54] ▷ ls -l $(which vi) lrwxrwxrwx 1 root root 20 Sep 3 2016 /usr/bin/vi -> /etc/alternatives/vi [jachee@mmmmpi:~] [23:11:11] ▷ ls -l /etc/alternatives/vi lrwxrwxrwx 1 root root 18 Sep 9 2016 /etc/alternatives/vi -> /usr/bin/vim.basic CentOS: [jachee@jachee:~] [00:12:29] > ls -l $(which vi) ls: cannot access alias: No such file or directory ls: cannot access vi='vim': No such file or directory -rwxr-xr-x. 1 root root 2294208 Oct 30 2018 /usr/bin/vim [jachee@jachee:~] [00:12:53] 2 > which vi alias vi='vim' /usr/bin/vim Homebrew: [jachee@gyrate:~] [00:14:15] ▷ ls -l $(which vi) lrwxr-xr-x 1 jachee admin 29 Aug 6 11:14 /usr/local/bin/vi -> ../Cellar/vim/8.1.1800/bin/vi [jachee@gyrate:~] [00:14:28] ▷ ls -l /usr/local/Cellar/vim/8.1.1800/bin/vi lrwxr-xr-x 1 jachee staff 3 Aug 3 12:17 /usr/local/Cellar/vim/8.1.1800/bin/vi -> vim No-Homebrew Catalina: [jacobachee@jachee-mbp15:~] [00:17:24] ► ls -l $(which vi) lrwxr-xr-x 1 root wheel 3 Nov 19 11:46 /usr/bin/vi -> vim Edit - for an actually-readable version of the above, see https://gist.github.com/jachee/eaa8610312ebd7723fc76e8d71da714a https://gist.github.com/jachee/eaa8610312ebd7723fc76e8d71da7...
filmgirlcw 7y ago
Hail Holy! Inside-jokes from the group chat aside, this is very good content. Holy's videos on Frontend Masters[1] are excellent as well. [1]: https://frontendmasters.com/teachers/brian-holt/ https://frontendmasters.com/teachers/brian-holt/
aquilaFiera 7y ago
Hey friends! This is Brian Holt, the author of course. Finding this on the front page of HN is an unexpected delight. Just wanted to let you all know that the accompanying videos for this are free too[1] (you just have to create an account.) [1]: https://frontendmasters.com/courses/web-development-v2/ https://frontendmasters.com/courses/web-development-v2/
- leetbulb 7y ago
  Thanks, I just forwarded all of this over to a family member who is currently trying to learn web development!
- burke_holland 7y ago
  I’m your biggest fan!
  - filmgirlcw 7y ago
    Suck up. :D
    - filmgirlcw 7y ago
      I got downvoted for this. Burke is my worker... Holy is too.
- Pxtl 7y ago
  The placepuppy images on basic-html are dead, I think.
- TadeUX 7y ago
  I am currently trying to improve my web development skills and this is helping a lot. Thanks
deleted 7y ago
[deleted]
duxup 7y ago
As a noob I've really enjoyed Frontend Masters courses. Brian's courses are great, and it sounds cliche but the JavaScript the hard parts by Will Sentence really changed how I think about how JavaScript actually works.
keithnz 7y ago
Very minor quibble in the final thoughts... "Google everything. Then Google it again when you forget it" Maybe a nice opportunity to break people out of the google bubble and give other search engine options
- rob_b 7y ago
  I would say it’s a better opportunity to encourage users to use the corresponding language documentation to help ensure more accurate understanding.
  - bananamerica 7y ago
    On the other hand, Google frequently leads to relevant official documentation.
- bananamerica 7y ago
  Excluding privacy, political and philosophical concerns, why should I not use Google? It’s vastly superior to the alternatives.
  - sergiosgc 7y ago
    Not vastly superior, no. I use duck duck go, and nowadays I seldom use the google !bang to supplement a search; when I do Google is usually just as incapable of providing an answer.
chrisweekly 7y ago
Some of the opinions reflected in the linked materials are presented as if they were obvious best practices, statements like "never do X". While it may be initially helpful to beginners for someone to provide guidance in such absolute terms, it can also lead to adoption of cargo-cult approaches and impede deeper understanding and growth. The linked materials are also problematic in their one-sided and outdated perspective on "separation of concerns", claiming CSS belongs exclusively in external stylesheets. Which ignores completely the emergence and widespread adoption of modern component-based architecture. Not just in frameworks like React and Vue, but also standards like Web Components. Maybe an unfair criticism given it's "introductory"... but I'd urge anyone who seeks a better grasp of the power of CSS to look instead to the axioms and layout examples on https://every-layout.dev https://every-layout.dev for its much more rigorous, up-to-date, "first-principles"-based, expert treatment of this thorny subject.
- temporallobe 7y ago
  On a related note, CSS is indeed harder than most think. That being said, I’ve been using CSS going on 20 years now and have seen a lot trends cone and go. One current trend is that there seems to be a lot of unnecessary complexity. SCSS, for example, is indeed powerful, but most sites and web apps I’ve worked on don’t need it and could basically have the entire component-based layout structure rewritten with a single, efficient, well-organized standard CSS file that doesn’t need to be built from 30-odd separate SCSS files. The same goes for so-called transpiled Javascript “languages” such as Coffeescript and Typescript. These, for the most part, add unnecessary layers of abstraction and complexity, making it far more difficult to debug. By using these abstractions, we developers are also doing ourselves a big disfavor because we are often not learning the underlying technology that the browser actually understands. Of course I get that there are domain-specific problems that these tools are trying to solve, but they are often inappropriately employed simply because they’re trendy. With some apps I’ve worked on, it’s anbalagous to using a farm tractor when all you really needed was a lawnmower.
  - tomnipotent 7y ago
    > a single, efficient, well-organized standard CSS I still haven't seen a single, efficient, well-organized standard CSS file in 20 years, so I think I'll stick to the well-proven SCSS/SASS build pipelines that add considerably more upside than downside. If you're a paid professional, there's no excuse to be doing things the "old way" in 2019.
artyomavanesov 7y ago
The ROI of learning web development has never been higher. With modern-day frameworks and tools like Firebase anyone with knowledge of javascript can build apps. Exciting times.
- bigmit37 7y ago
  Do you mind giving examples of what type of sites apps have gotten easy to build? Something like Stackoverflow easy to build these days? What about marketplaces? I’m still intimidated by webpages when I “Inspect” them with browser tools. CSS especially looks a mess to me and it puts me off from learning web development.
  - overcast 7y ago
    It is a mess, but that's usually because those easy to use frameworks make them a mess. Big site inevitably are going to be filled with a lot of JS that for things you're not going to implement anyhow. Start small, build upon previous knowledge, incrementally.
mesaframe 7y ago
I have gone past the introduction a long time ago. Currently, I am trying very hard to find a book/video which teaches how to create UI in CSS.
- enhdless 7y ago
  Any user interface is simply a combination of smaller components. For example, using your basic HTML/CSS skills, you can create a button. Then, create an input field. Then, put those together in a div and use a few lines of flexbox layout css to arrange the two pieces. Maybe you want something below it, which responds to what you input? Create another div below this input/button div, and then put this whole thing in another div to contain it all. Try thinking of user interfaces in terms of rows and columns. More complex user interfaces are simply rows of columns of rows of columns! Start with small, basic pieces and put them together.
  - mesaframe 7y ago
    I'm talking about best practices. I can always create a div hell but I believe there is an art in creating proper UI using HTML/CSS.
r3dpony 7y ago
Wow, it does help a loot!
zyl1n 7y ago
I did a quick glance but didn't find a section covering basics of HTTP... maybe there should be one before AJAX or node.js sections

227 points by henning 7y ago

I wish all courses were this thorough! Thanks Mr Holt!

“vi Oh boy. Here we go. Type vi index.html. This going to open vim which is an editor that's all in the command line.” Not to sound pedantic, but vi is not vim. While vim was designed as vi-improved, instructing users of vi to use vim direction is not going to be a complete match and may cause confusion for those not familiar with it.

jachee 7y ago
On any given *nix system that's current today, `vi` is a symlink to `vim`. You can check yourself with `ls -l $(which vi)` in bash.
- jen20 7y ago
  However, some modern vims check which incantation they were started with and modify their behaviour accordingly (e.g. nocompatible vs not).
- deckard1 7y ago
  That's not remotely true. Even archlinux links to ex. Type vim if you mean vim. Even if vi is aliased to vim, it's possible you'll end up in ex compatible mode anyway.
- deleted 7y ago
  [deleted]
- rob_b 7y ago
  That is not always the case. Clearly, you’ve never encountered “vim: command not found” but found vi to work without a problem.
  - jachee 7y ago
    Not in at least ten years. Except for on BusyBox systems.
    - deleted 7y ago
      [deleted]
    - tstrimple 7y ago
      That's the default behavior on Raspbian as well.
- jachee 7y ago
  Allow me to show my work (within the confines of HN's mostlyuseless formatting system): Raspbian: [jachee@mmmmpi:~] [23:10:54] ▷ ls -l $(which vi) lrwxrwxrwx 1 root root 20 Sep 3 2016 /usr/bin/vi -> /etc/alternatives/vi [jachee@mmmmpi:~] [23:11:11] ▷ ls -l /etc/alternatives/vi lrwxrwxrwx 1 root root 18 Sep 9 2016 /etc/alternatives/vi -> /usr/bin/vim.basic CentOS: [jachee@jachee:~] [00:12:29] > ls -l $(which vi) ls: cannot access alias: No such file or directory ls: cannot access vi='vim': No such file or directory -rwxr-xr-x. 1 root root 2294208 Oct 30 2018 /usr/bin/vim [jachee@jachee:~] [00:12:53] 2 > which vi alias vi='vim' /usr/bin/vim Homebrew: [jachee@gyrate:~] [00:14:15] ▷ ls -l $(which vi) lrwxr-xr-x 1 jachee admin 29 Aug 6 11:14 /usr/local/bin/vi -> ../Cellar/vim/8.1.1800/bin/vi [jachee@gyrate:~] [00:14:28] ▷ ls -l /usr/local/Cellar/vim/8.1.1800/bin/vi lrwxr-xr-x 1 jachee staff 3 Aug 3 12:17 /usr/local/Cellar/vim/8.1.1800/bin/vi -> vim No-Homebrew Catalina: [jacobachee@jachee-mbp15:~] [00:17:24] ► ls -l $(which vi) lrwxr-xr-x 1 root wheel 3 Nov 19 11:46 /usr/bin/vi -> vim Edit - for an actually-readable version of the above, see https://gist.github.com/jachee/eaa8610312ebd7723fc76e8d71da714a https://gist.github.com/jachee/eaa8610312ebd7723fc76e8d71da7...

filmgirlcw 7y ago

Hail Holy! Inside-jokes from the group chat aside, this is very good content. Holy's videos on Frontend Masters[1] are excellent as well. [1]: https://frontendmasters.com/teachers/brian-holt/ https://frontendmasters.com/teachers/brian-holt/

aquilaFiera 7y ago

Hey friends! This is Brian Holt, the author of course. Finding this on the front page of HN is an unexpected delight. Just wanted to let you all know that the accompanying videos for this are free too[1] (you just have to create an account.) [1]: https://frontendmasters.com/courses/web-development-v2/ https://frontendmasters.com/courses/web-development-v2/

leetbulb 7y ago
Thanks, I just forwarded all of this over to a family member who is currently trying to learn web development!
burke_holland 7y ago
I’m your biggest fan!
- filmgirlcw 7y ago
  Suck up. :D
  - filmgirlcw 7y ago
    I got downvoted for this. Burke is my worker... Holy is too.
Pxtl 7y ago
The placepuppy images on basic-html are dead, I think.
TadeUX 7y ago
I am currently trying to improve my web development skills and this is helping a lot. Thanks

deleted 7y ago

[deleted]

duxup 7y ago

As a noob I've really enjoyed Frontend Masters courses. Brian's courses are great, and it sounds cliche but the JavaScript the hard parts by Will Sentence really changed how I think about how JavaScript actually works.

keithnz 7y ago

Very minor quibble in the final thoughts... "Google everything. Then Google it again when you forget it" Maybe a nice opportunity to break people out of the google bubble and give other search engine options

rob_b 7y ago
I would say it’s a better opportunity to encourage users to use the corresponding language documentation to help ensure more accurate understanding.
- bananamerica 7y ago
  On the other hand, Google frequently leads to relevant official documentation.
bananamerica 7y ago
Excluding privacy, political and philosophical concerns, why should I not use Google? It’s vastly superior to the alternatives.
- sergiosgc 7y ago
  Not vastly superior, no. I use duck duck go, and nowadays I seldom use the google !bang to supplement a search; when I do Google is usually just as incapable of providing an answer.

chrisweekly 7y ago

Some of the opinions reflected in the linked materials are presented as if they were obvious best practices, statements like "never do X". While it may be initially helpful to beginners for someone to provide guidance in such absolute terms, it can also lead to adoption of cargo-cult approaches and impede deeper understanding and growth. The linked materials are also problematic in their one-sided and outdated perspective on "separation of concerns", claiming CSS belongs exclusively in external stylesheets. Which ignores completely the emergence and widespread adoption of modern component-based architecture. Not just in frameworks like React and Vue, but also standards like Web Components. Maybe an unfair criticism given it's "introductory"... but I'd urge anyone who seeks a better grasp of the power of CSS to look instead to the axioms and layout examples on https://every-layout.dev https://every-layout.dev for its much more rigorous, up-to-date, "first-principles"-based, expert treatment of this thorny subject.

temporallobe 7y ago
On a related note, CSS is indeed harder than most think. That being said, I’ve been using CSS going on 20 years now and have seen a lot trends cone and go. One current trend is that there seems to be a lot of unnecessary complexity. SCSS, for example, is indeed powerful, but most sites and web apps I’ve worked on don’t need it and could basically have the entire component-based layout structure rewritten with a single, efficient, well-organized standard CSS file that doesn’t need to be built from 30-odd separate SCSS files. The same goes for so-called transpiled Javascript “languages” such as Coffeescript and Typescript. These, for the most part, add unnecessary layers of abstraction and complexity, making it far more difficult to debug. By using these abstractions, we developers are also doing ourselves a big disfavor because we are often not learning the underlying technology that the browser actually understands. Of course I get that there are domain-specific problems that these tools are trying to solve, but they are often inappropriately employed simply because they’re trendy. With some apps I’ve worked on, it’s anbalagous to using a farm tractor when all you really needed was a lawnmower.
- tomnipotent 7y ago
  > a single, efficient, well-organized standard CSS I still haven't seen a single, efficient, well-organized standard CSS file in 20 years, so I think I'll stick to the well-proven SCSS/SASS build pipelines that add considerably more upside than downside. If you're a paid professional, there's no excuse to be doing things the "old way" in 2019.

artyomavanesov 7y ago

The ROI of learning web development has never been higher. With modern-day frameworks and tools like Firebase anyone with knowledge of javascript can build apps. Exciting times.

bigmit37 7y ago
Do you mind giving examples of what type of sites apps have gotten easy to build? Something like Stackoverflow easy to build these days? What about marketplaces? I’m still intimidated by webpages when I “Inspect” them with browser tools. CSS especially looks a mess to me and it puts me off from learning web development.
- overcast 7y ago
  It is a mess, but that's usually because those easy to use frameworks make them a mess. Big site inevitably are going to be filled with a lot of JS that for things you're not going to implement anyhow. Start small, build upon previous knowledge, incrementally.

mesaframe 7y ago

I have gone past the introduction a long time ago. Currently, I am trying very hard to find a book/video which teaches how to create UI in CSS.

enhdless 7y ago
Any user interface is simply a combination of smaller components. For example, using your basic HTML/CSS skills, you can create a button. Then, create an input field. Then, put those together in a div and use a few lines of flexbox layout css to arrange the two pieces. Maybe you want something below it, which responds to what you input? Create another div below this input/button div, and then put this whole thing in another div to contain it all. Try thinking of user interfaces in terms of rows and columns. More complex user interfaces are simply rows of columns of rows of columns! Start with small, basic pieces and put them together.
- mesaframe 7y ago
  I'm talking about best practices. I can always create a div hell but I believe there is an art in creating proper UI using HTML/CSS.

r3dpony 7y ago

Wow, it does help a loot!

zyl1n 7y ago

I did a quick glance but didn't find a section covering basics of HTTP... maybe there should be one before AJAX or node.js sections