[HN Gopher] The Front-End Developer's Guide to the Terminal
       ___________________________________________________________________
        
       The Front-End Developer's Guide to the Terminal
        
       Author : creativedg
       Score  : 61 points
       Date   : 2022-04-20 09:30 UTC (2 days ago)
        
 (HTM) web link (www.joshwcomeau.com)
 (TXT) w3m dump (www.joshwcomeau.com)
        
       | jhoechtl wrote:
       | > It takes years of practice to become a terminal guru
       | 
       | And that's where I stopped reading. Point is, you absolutely need
       | not become a terminal guru to use any of these web frameworks.
        
         | kyawzazaw wrote:
         | please continue reading
        
         | samcal wrote:
         | If you finished that paragraph (or even that sentence), you
         | would have found that the author agrees with you!
         | 
         | > It takes years of practice to become a terminal guru, but
         | here's the good news: we can take a shortcut. We don't really
         | need to know 98% of the stuff you can do with a terminal. If we
         | focus on the most-important critical fundamentals, we should be
         | able to become comfortable with the command line in a
         | remarkably short amount of time.
        
         | eatonphil wrote:
         | > Point is, you absolutely need not become a terminal guru to
         | use any of these web frameworks.
         | 
         | He said it was hard to learn everything. He didn't say you have
         | to learn everything.
        
       | wildrhythms wrote:
       | Honest question: Why is web development such a shitshow on
       | Windows that that every single 'tutorial' like this doesn't even
       | attempt to make it work, and instead just immediately directs
       | Windows users to WSL?
        
         | jrm4 wrote:
         | I don't want to pick on the OP, but as perhaps an old timer, it
         | is surprising to me that this isn't obvious.
         | 
         | Linux and free and open software is what gave birth to the web,
         | and so quite naturally working with it evolves better and more
         | naturally there.
         | 
         | Bill Gates and Windows famously absolutely missed the boat on
         | the Internet nearly entirely. And yes, to this day they're
         | still trying to catch up -- this is evident in their extremely
         | late realization that they were never ever going to beat Linux
         | at this. Hence WSL. (the Linux Subsystem for Windows :) )
        
         | digisign wrote:
         | Because the Gates administration produced a primitive command
         | interpreter/environment, that was barely acceptable for the
         | original PC. Then the Ballmer administration blocked console
         | improvements on NT for thirty years. Yes, _thirty._
         | 
         | Meanwhile the internet was born and raised on Unix and had a
         | competent (not perfect) design for terminals and shells.
         | 
         | The Windows terminal folks have done a bang-up job trying to
         | make up the deficit, and mostly succeeded in the last few
         | years. But it takes more than tools, it takes mindshare.
         | 
         | Was never interested in powershell, but there are other
         | alternatives from WSL, like git-bash and the yori shell, both
         | of which I recommend.
        
         | datalopers wrote:
         | Because the node ecosystem foremost built with linux/unix
         | targets in mind? WSL provides that.
        
         | speedgoose wrote:
         | Windows is not great for NodeJs based dev stacks, which are
         | very common for web development these days. Because JavaScript
         | developers tend to write their development tools in JavaScript.
         | 
         | NodeJs is not great on windows because the packages/modules
         | model uses many tiny files and the Windows filesystem, NTFS, is
         | extremely slow for this kind of load. Another problem is
         | compiling C/C++ NodeJS dependencies on windows. It's possible
         | but few people cares about it and it's often a source of
         | issues. And the last issue are the windows specific bugs in
         | various packages.
         | 
         | The community that write the nodejs packages kinda doesn't care
         | about windows, and has no reasons to since WSL.
        
           | qsort wrote:
           | Part of it is Windows being Windows, but part of it is
           | languages/runtimes treating Windows as a second-class
           | platform, which is understandable but a predictable source of
           | problems.
           | 
           | See e.g. Python, which runs just fine everywhere.
        
             | jack_pp wrote:
             | python doesn't have the same packaging shitshow as JS does
             | though
        
         | eatonphil wrote:
         | It's really not! I do development in windows terminal,
         | powershell, ohmyposh and emacs in the terminal.
         | 
         | It took me a bit to get the settings right to mimic zsh/oh my
         | zsh but now it's fine. It's just slower than mac/linux.
        
         | FractalHQ wrote:
         | In my experience, everything on Windows is a shitshow compared
         | to Mac or Linux. So much so that it's genuinely hard for me to
         | believe that people use it on purpose. WSL is great because
         | it's not Windows!
        
       | bern4444 wrote:
       | There's very little in here that is _unique_ to front end
       | developers. This is more of an introduction to the terminal
       | article. You have a web background and so perhaps wanted to frame
       | this with that context but I think this is better off with a
       | title of something more akin to `Introduction to the Terminal`.
       | 
       | The only thing in here related to web is the `npm` command.
       | Everything else, git, terminal tabs, meaning of `$` is generic to
       | any engineer, front end, back end, ML, AI etc.
       | 
       | What's missing that is critical in any Here's How to Use the
       | Terminal article is showing the `man` command. I think showing
       | other popular commands like `mv`, `cp`, `pwd`, and using `ctrl-r`
       | to reverse search should also be included.
       | 
       | I also think Hyper is not a great terminal to start out with. The
       | default terminal that ships on someone's computer is usually the
       | best. If you're going to use any other terminal emulator, I'd say
       | iTerm2 or Alacritty should be suggested.
        
         | andrewmcwatters wrote:
         | POSIX-1.2017, man7, where Ubuntu man pages are online and other
         | distro manual pages, macOS man page differences, understanding
         | shell built-ins vs commands, etc.
         | 
         | Yeah. I don't think I have ever once seen a blog article point
         | to primary sources. MDN, for example for web developers, not a
         | primary source.
         | 
         | Sometimes I wonder if people ever ask themselves how people
         | answering questions on Stack Overflow or people writing Medium
         | articles found out what they're teaching to others.
         | 
         | People are too afraid of reading documentation.
        
           | ezequiel-garzon wrote:
           | _MDN, for example for web developers, not a primary source._
           | 
           | I'm used to visiting the HTML standard, I think it's quite
           | friendly considering how much it has grown... CSS2 was still
           | doable for me, but I find the current mesh of CSS standards
           | completely impenetrable at this point. And with JavaScript
           | plus the DOM... yeah, I'll take MDN as almost primary, an
           | authoritative encyclopedia for web development.
        
           | rmahan wrote:
           | I gave an hour presentation on the basics of CSS to my
           | department as a junior. Other asked how I learned it so
           | quickly and where from.
           | 
           | I just read MDN and W3 for like a month while making slides,
           | then played around for a bit with all I learned on an example
           | app. No one had taken the time to do that before I guess?
        
         | chasil wrote:
         | The author glosses over the differences between bash and zsh
         | (and fails to mention that Apple used to use bash, and switched
         | to zsh).
         | 
         | The author should have stressed that these and many other
         | shells implement the POSIX shell, which is fundamental to them
         | all from a scripting perspective.
         | 
         | https://pubs.opengroup.org/onlinepubs/9699919799/utilities/V...
        
         | kyawzazaw wrote:
         | you are right, but Hyber automatically has a bit of visual
         | enhancements without needing to configure much and I believe
         | that's the angle, the author is trying to bring to front-end
         | developers who work visually a lot.
        
       | KaoruAoiShiho wrote:
       | What the hell, love the left hand ad. Well, until everyone starts
       | doing it.
        
       | cercatrova wrote:
       | God, please don't use Hyper, it's literally a terminal built with
       | Electron, possibly the slowest practical way to implement a
       | terminal.
       | 
       | If you're on macOS or Linux, use the built in terminal. If you're
       | on Windows, use Windows Terminal [0], the new one, not cmd
       | prompt.
       | 
       | [0] https://github.com/microsoft/terminal
        
         | pcthrowaway wrote:
         | God, please don't use the built-in terminal on macOS.
         | 
         | Use iTerm.
        
       | jaunkst wrote:
       | This isn't just a frontend problem. There are quite a few IDE's
       | like IntelliJ Idea that have been the only interface for many
       | developers.
        
       | jack_pp wrote:
       | If you're not using suckless term you're not serious about your
       | job /s
        
       | bitwize wrote:
       | Protip: If I'm reading your blog and an Alegria version of
       | yourself made out of plasticine pops up over the text I'm reading
       | and says "Hi there! Can I share a cool thing I'm working on with
       | you?" in an obnoxious word bubble that also covers the text I'm
       | reading... I'm bound to lose interest in your cool thing. And
       | your blog.
        
       | frau_wacholder wrote:
       | it's pretty crazy that this article only mention hyper or the
       | built in vs code terminal as it's two recommendations, when
       | excellent terminals like alacritty, kitty and terminator exist
       | and aren't written in javascript
        
         | kyawzazaw wrote:
         | it's not a comprehensive or exhaustive list. just a gentle
         | intro
        
         | yewenjie wrote:
         | I have been enjoying Foot Terminal of late - minimal, fast,
         | Wayland-first. Not sure about complete feature-parity, but I
         | personally did not miss any feature of Alacritty.
         | 
         | https://codeberg.org/dnkl/foot
        
           | jhoechtl wrote:
           | Reads very emacsish
        
         | moondev wrote:
         | Probably since those terminals are not cross platform and seems
         | like the guide is written in that context. Alacritty is but not
         | the most user friendly for beginners.
        
       | sgallant wrote:
       | I love seeing posts from Josh on HN. Such high-quality material.
        
       | elipsey wrote:
       | I'm kind of trying to go the other way. I am amazed at how
       | productive great front-end/js-first developers are with even just
       | a browser console --- but I am totally flumoxed by this
       | environment, and have trouble sinking my fingernails into the
       | first ledge on that learning curve.
       | 
       | Is there a "terminal developer's guide to front end"?
        
         | LAC-Tech wrote:
         | Are most frontend developers even able to leverage the browser
         | console?
         | 
         | If you have transpiled react - which needs its own debugger -
         | I'm not sure what interesting things you could do from there.
         | 
         | I don't think it's part of the culture anymore, unless you're
         | doing vanilla JS or jquery. Happy to hear counter example, but
         | I've had to show even node.js backend devs that the node
         | interpreter actually exists.
        
         | wildrhythms wrote:
         | Learn HTML.
         | 
         | Then learn CSS.
         | 
         | Then learn Javascript, and realize that Javascript can be used
         | to write HTML and CSS at runtime. The console is just
         | Javascript in interactive mode.
        
         | unsupp0rted wrote:
         | I use the browser's dev console to try out short JS snippets or
         | for simple on-page scraping. (for longer JS as a scratchpad I
         | use https://runjs.app).
         | 
         | The browser's dev console gives you access to the current
         | page's DOM, plus anything you can do in JS.
         | 
         | So stuff like `document.querySelectorAll(".foo")` works. Also
         | `fetch()` works within the page's context.
         | 
         | Apart from that, what are some other useful things one can do
         | in the dev console?
        
           | elipsey wrote:
           | Thanks, maybe some effortful study of the fundamental
           | properties and manipulation of the DOM would be helpful to
           | me.
           | 
           | >> other useful things one can do in the dev console?
           | 
           | There just seems to be a suprising amount of built in stuff
           | in the browser that does more than rendering text/layout.
           | 
           | I participated in some interesting work at a hackathon a
           | while ago that used a web audio component to signal back and
           | forth between various laptops and phones. It was mostly
           | getting hacked together in the browser dev console.
           | 
           | (I'll come back with some code if I can find it...)
           | 
           | EDIT: OK, here it is: https://github.com/cantino/ultrastound
        
       ___________________________________________________________________
       (page generated 2022-04-22 23:01 UTC)