4 ms·

The most essential list of resources for Front-End beginners

37 points by daviddiasfront 9y ago

fictionfuture 9y ago
Nice list. I’d also add Node and NPM since you can’t do much front-end without those these days.
- daviddiasfront 9y ago
  Yes, but that list is really for beginners, people that didn't have any experience in programming before. Another list with much more links will be published in the same format soon.
- exodust 9y ago
  "Can't do much without those"... Speak for yourself. Anything in frontend is possible without ever touching Node.
  - nallerooth 9y ago
    It is possible, but it's not the usual work flow for frontend developers (given the huge number of installs of things like react, angular, etc).
    - exodust 9y ago
      Sure, and I'd like to learn it I guess, but I'm too busy looking at interesting stuff in frontend like working with audio and getting webgl things happening. Frontend has diverse meaning these days.
baj 9y ago
Pls
winseybash 9y ago
I'm just disappointed the american flag is used to dictate english articles...
- petercooper 9y ago
  As an Englishman, I think it's probably for the best. No-one would recognize the English flag anyway, and the UK flag looks kinda bleugh at small sizes.
  - Omnius 9y ago
    It just indicates that its English with the proper spelling of words. Color, Grey, Coffee (tea <-- doesn't even look like the correct word).
- daviddiasfront 9y ago
  I'll add the british flag too if that help you to not be disappointed, no issue :)
- trumpownsyou420 9y ago
  we kicked your asses multiple times before and we'll do it again.
petercooper 9y ago
Thanks for linking to our newsletters! Just one note, the internal link at the top goes to anchor "newsletter" but it's missing the "s" for the link to work. I'll do a PR later if you don't catch it.
- daviddiasfront 9y ago
  Your welcome! Don't hesitate to do a PR. Which newsletter are you managing?
  - petercooper 9y ago
    From that list, I edit Frontend Focus and JavaScript Weekly.
    - daviddiasfront 9y ago
      Awesome, I subscribed these newsletters since a long time. Really good job! I'm always recommending these newsletters to my team / students. For people who don't spend a lot of time doing research (some students and professionals I know), it's a great way for them to have a short "overview" of what is happening and which articles are more interesting at the moment. Please keep it up!
sillysaurus3 9y ago
Equally important is a good webdev IDE. I say this as a hardcore vim/emacs user. Try webstorm: brew cask install webstorm Then run `webstorm foo/` to open the webapp located in folder foo. It works with basically every type of webapp in existence. It'll look like this: https://i.imgur.com/z2euynI.png https://i.imgur.com/z2euynI.png Now tap the shift key twice. It'll pop up omni completion. You can type any partial filename, any partial symbol name, etc, and it will take you to it. Note the ten thousand quality of life improvements. Example: when looking at a CSS file, #ff0000 will render with a red background color. (The background color of the text is literally the color that the text represents.) And clicking on it brings up a color swath. Changes appear on your website as quickly as you can type. When you're editing solely HTML and CSS, there's no such thing as a refresh. No need. You just type. Here's an Angular 2 project (https://github.com/preboot/angular-webpack https://github.com/preboot/angular-webpack): https://i.imgur.com/vb4uDMw.png https://i.imgur.com/vb4uDMw.png It's a bit hard to tell, but webstorm has deep awareness of what your code represents. Notice the tags like "description", "moduleDef", "assertion", etc. Those are hints about what each function expects. Want to see documentation? Hover your mouse over any symbol. For example, hovering over "it" gives: https://i.imgur.com/4Xv4BMb.png https://i.imgur.com/4Xv4BMb.png I could go on for days. You may have heard of the Brackets IDE, but in my opinion webstorm completely wipes the floor with them. Live Edit (hot reload) is far better... Actually, rather than list out ten things, I'll just say "everything is far better." Not everything I've demoed here is turned on by default. You should expect to put a day or two of work into configuring your editor. But once you do, you'll be a monster of productivity. Have I mentioned that Webstorm has a Vim plugin? Preferences -> Plugins, "vim", search, install, done.
michaelwu 9y ago
Interesting that there is no mention of eslint. I've always found that the best way to learn a new language is to immediately install the linter and its associated plugin for whatever IDE you're using for instant feedback about potential anti-patterns / dangerous code while you work. Also curious that there's no mention of typescript: a lot of companies have already made the transition because it makes huge projects much easier to manage and read.
- nallerooth 9y ago
  +1 for eslint. When it comes to typescript, however, I believe that it's better to learn pure javascript first. Understanding -why- typescript is useful has a lot of value, and saying that you know typescript without having spent time using javascript would raise all kind of warning flags during an interview (focus on what's cool/trendy over deeper knowledge and a lack of desire to fully understand the environment in which you work, to mention some). Also, a beginner frontend developer who reads a list of HTML tutorials will probably not spend a lot of time in "huge projects" in the beginning of their career.
  - daviddiasfront 9y ago
    @michaelwu, tried to keep it simple for a beginner, and I tried to follow the "web developer roadmap 2017". ESLint and typescript are more for an intermediate IMO, another list will follow this one and will surely mention ESLint and TypeScript.
    - nallerooth 9y ago
      That's understandable, and to some degree a good decision. But then eslint sometimes help you understand why something is broken, which is especially beneficial to beginners. Whether to include eslint or not may be worthy of discussion, but since both options have valid points I'll be happy to leave this discussion as is.
- deleted 9y ago
  [deleted]
deleted 9y ago
[deleted]
daviddiasfront 9y ago
The list was added on Product Hunt . You are welcome to support it! https://www.producthunt.com/posts/front-end-beginners-essentials https://www.producthunt.com/posts/front-end-beginners-essent...

fictionfuture 9y ago

Nice list. I’d also add Node and NPM since you can’t do much front-end without those these days.

daviddiasfront 9y ago
Yes, but that list is really for beginners, people that didn't have any experience in programming before. Another list with much more links will be published in the same format soon.
exodust 9y ago
"Can't do much without those"... Speak for yourself. Anything in frontend is possible without ever touching Node.
- nallerooth 9y ago
  It is possible, but it's not the usual work flow for frontend developers (given the huge number of installs of things like react, angular, etc).
  - exodust 9y ago
    Sure, and I'd like to learn it I guess, but I'm too busy looking at interesting stuff in frontend like working with audio and getting webgl things happening. Frontend has diverse meaning these days.

baj 9y ago

Pls

winseybash 9y ago

I'm just disappointed the american flag is used to dictate english articles...

petercooper 9y ago
As an Englishman, I think it's probably for the best. No-one would recognize the English flag anyway, and the UK flag looks kinda bleugh at small sizes.
- Omnius 9y ago
  It just indicates that its English with the proper spelling of words. Color, Grey, Coffee (tea <-- doesn't even look like the correct word).
daviddiasfront 9y ago
I'll add the british flag too if that help you to not be disappointed, no issue :)
trumpownsyou420 9y ago
we kicked your asses multiple times before and we'll do it again.

petercooper 9y ago

Thanks for linking to our newsletters! Just one note, the internal link at the top goes to anchor "newsletter" but it's missing the "s" for the link to work. I'll do a PR later if you don't catch it.

daviddiasfront 9y ago
Your welcome! Don't hesitate to do a PR. Which newsletter are you managing?
- petercooper 9y ago
  From that list, I edit Frontend Focus and JavaScript Weekly.
  - daviddiasfront 9y ago
    Awesome, I subscribed these newsletters since a long time. Really good job! I'm always recommending these newsletters to my team / students. For people who don't spend a lot of time doing research (some students and professionals I know), it's a great way for them to have a short "overview" of what is happening and which articles are more interesting at the moment. Please keep it up!

sillysaurus3 9y ago

Equally important is a good webdev IDE. I say this as a hardcore vim/emacs user. Try webstorm: brew cask install webstorm Then run `webstorm foo/` to open the webapp located in folder foo. It works with basically every type of webapp in existence. It'll look like this: https://i.imgur.com/z2euynI.png https://i.imgur.com/z2euynI.png Now tap the shift key twice. It'll pop up omni completion. You can type any partial filename, any partial symbol name, etc, and it will take you to it. Note the ten thousand quality of life improvements. Example: when looking at a CSS file, #ff0000 will render with a red background color. (The background color of the text is literally the color that the text represents.) And clicking on it brings up a color swath. Changes appear on your website as quickly as you can type. When you're editing solely HTML and CSS, there's no such thing as a refresh. No need. You just type. Here's an Angular 2 project (https://github.com/preboot/angular-webpack https://github.com/preboot/angular-webpack): https://i.imgur.com/vb4uDMw.png https://i.imgur.com/vb4uDMw.png It's a bit hard to tell, but webstorm has deep awareness of what your code represents. Notice the tags like "description", "moduleDef", "assertion", etc. Those are hints about what each function expects. Want to see documentation? Hover your mouse over any symbol. For example, hovering over "it" gives: https://i.imgur.com/4Xv4BMb.png https://i.imgur.com/4Xv4BMb.png I could go on for days. You may have heard of the Brackets IDE, but in my opinion webstorm completely wipes the floor with them. Live Edit (hot reload) is far better... Actually, rather than list out ten things, I'll just say "everything is far better." Not everything I've demoed here is turned on by default. You should expect to put a day or two of work into configuring your editor. But once you do, you'll be a monster of productivity. Have I mentioned that Webstorm has a Vim plugin? Preferences -> Plugins, "vim", search, install, done.

michaelwu 9y ago

Interesting that there is no mention of eslint. I've always found that the best way to learn a new language is to immediately install the linter and its associated plugin for whatever IDE you're using for instant feedback about potential anti-patterns / dangerous code while you work. Also curious that there's no mention of typescript: a lot of companies have already made the transition because it makes huge projects much easier to manage and read.

nallerooth 9y ago
+1 for eslint. When it comes to typescript, however, I believe that it's better to learn pure javascript first. Understanding -why- typescript is useful has a lot of value, and saying that you know typescript without having spent time using javascript would raise all kind of warning flags during an interview (focus on what's cool/trendy over deeper knowledge and a lack of desire to fully understand the environment in which you work, to mention some). Also, a beginner frontend developer who reads a list of HTML tutorials will probably not spend a lot of time in "huge projects" in the beginning of their career.
- daviddiasfront 9y ago
  @michaelwu, tried to keep it simple for a beginner, and I tried to follow the "web developer roadmap 2017". ESLint and typescript are more for an intermediate IMO, another list will follow this one and will surely mention ESLint and TypeScript.
  - nallerooth 9y ago
    That's understandable, and to some degree a good decision. But then eslint sometimes help you understand why something is broken, which is especially beneficial to beginners. Whether to include eslint or not may be worthy of discussion, but since both options have valid points I'll be happy to leave this discussion as is.
deleted 9y ago
[deleted]

deleted 9y ago

[deleted]

daviddiasfront 9y ago

The list was added on Product Hunt . You are welcome to support it! https://www.producthunt.com/posts/front-end-beginners-essentials https://www.producthunt.com/posts/front-end-beginners-essent...