Skip to content

Latest commit

 

History

History
202 lines (119 loc) · 7.81 KB

trail-guide-web-development.md

File metadata and controls

202 lines (119 loc) · 7.81 KB
Raw

web-development

Trail guide to learn web-development.

After trailing it (as an housing architect), I'm mapping the best path I know to learn web-development.
It might be useful to others doing this lonely journey.

1. Starting

2. HTML+CSS (graphical user interface for the web browser)

3. Javascript (everywhere)

4. Ruby (server-side)

5. Next?

1. Starting

Choosing languages

After rambling with several languages 1, beyond HTML+CSS, I chose Javascript and Ruby. Resuming:

HTML/CSS (graphical user interface for the web browser)

  • To build a graphical user interface (GUI) for the web browser you must use HTML/CSS directly or indirectly.
  • There are specific toolkits to build GUIs for every system but HTML/CSS is eating their marketshare.

Javascript (everywhere)

  • Pros:

    • you can use it everywhere: front-end (from the classical Jquery and React & derivates to my bets: Vue and Svelte), back-end and even native (using Electron and React native).
    • faster than Ruby due to constant corporation work on browsers' JS engines.

  • Cons:

    • javascript is ugly. Coffeescript makes JS more palatable but it's out of fashion and one more language to learn.
    • everything changes everyday, terrible for noobs as us.
    • slower than native platform languages (Java on Android, Swift on IOS/OSX or .NET on Windows)

Ruby (server-side)

  • Pros:

    • mature.
    • concise and elegant - this is VERY important for someone with my background. (created by a Japanese)
    • great for web dev (Rails, Sinatra, Jekyll, Discourse .. )
    • great glue to automate tasks 2. Even on Sketchup ..

  • Cons:

    • slowish (but there is MRuby and Crystal.
    • dying (or being re-invented?).

Choosing tools

If you're using a Windows PC (like me), get:

  • ConEmu, a nice command line (yes, it's necessary, get used).
  • Sublime Text, a fast text editor (it will be your main tool, the developer's autocad.. ).
    There are several valid options 3 but for now stick with Sublime.

2. HTML+CSS (graphical user interface for the web)

Installing HTML+CSS

  • Good news: every browser has a HTML+CSS engine already installed. Open any HTML+CSS files and they will render on your browser.

Learning HTML+CSS

  • By being interested in web development, you probably know the basics. Just take a look on Flexbox and you're good to go for now.
    As HTML+CSS became more powerful, classic JS libraries like Masonry to improve CSS seem outdated.

3. Javascript (everywhere)

Installing Javascript (front-end Javascript)

  • Good news: every browser has a Javascript engine already installed 4! Just click F12 on most browsers and the REPL will open! Or embed a JS file on a HTML file and it will run also.

Installing Node.js (server-side Javascript)

  • Now install Node JS 4. NPM (Node package manager) will also be installed.
  • On ConEmu type node. You're on Node.js REPL now. To exit, press Ctrl + d.
  • To install a node package, on command line type npm install package-name

Learning Javascript

// On command line navigate to your script's folder. e.g:
> cd desktop/scripts

// Now you can evaluate a JS file directly (you can omit the extension). Just type:
> node expFile

4. Ruby (back-end)

Installing Ruby

  • Now install Ruby.
  • On command line (ConEmu) type irb. You're on Ruby REPL now. To exit, press Ctrl + d.
  • To install a ruby package (gem), on command line type gem install package-name

Learning Ruby

  • Take a look on Ruby (Learn X in Y minutes) to get an overview of the language.
  • Ruby looks good, isn't it? Use this style guide as role model.
  • To easily evaluate scripts, do it inside the same directory you keep them.
# On command line navigate to your script's folder. e.g:
> cd desktop/scripts

# Now you can evaluate a ruby file directly. Just type:
> ruby exp_file.rb

5. Next?

Elm?

  • Pros:

    • concise and elegant - this is VERY important for someone with my background.
    • opinionated. A bunch of decisions were already made for us. Great for noobs ..
    • human readable error messages when something goes wrong!
    • allow you to dream with a better world with no unreadable JS ..

  • Cons:

    • immature AKA breaking changes and few information about it.

Installing Elm

  • Elm code is compiled to JS and Elm itself works as a Node.js package. So first install Node JS (if you didn't do it yet) and then Elm with NPM (Node package manager).
  • On ConEmu type elm repl. You're on Elm REPL now. To exit, press Ctrl + d.

Learning Elm

Notes:
1 - Python, Go, Coffeescript and functional programming stuff (Elixir, Elm, Clojure & Lisps, Haskell, Purescript, OCaml, F#, Scala..). ↩
2 - Like Python. ↩
3 - Specially VScode.. but also emacs and vim.↩
4 - Google Chrome and Node use V8 JS engine. ↩