Forem: sidney

My Best Friend Wants to Learn JavaScript – Here's What I Want Her to Know.

sidney — Thu, 23 Jul 2020 15:07:06 +0000

Cover image: Bubble Bobble

The other day, during a marathon FaceTime call, a good friend of mine offhandedly mentioned that she wanted to learn JavaScript. She has some knowledge of HTML and CSS (plus a dash of Python) but has never approached JS before. Being a beginner myself, I wanted to save her some pain– so I started gathering some links I've found helpful as I've been starting out.

If you're reading this and you're not my friend Lea, that's okay too. Whoever you are, this is a very basic guide to some free resources for starting in JS, compiled by someone who cares you.

What is JavaScript?

In my own words, in simplest terms: JavaScript is a programming language that can make things happen on web pages – without having to refresh the page. It's what lets you add comments that appear instantly, and makes the heart button turn red when you click it. But it's also super flexible, and can be used to build MUCH more complex things. Here are some overviews that say it better than I can:

Here is a description of what JS is on the JS site itself.
Here's a great write-up in the MDN Docs, which will prove to be invaluable throughout your JS experience. It also includes a "Hello World" exercise to get you started. Which brings me to...

Getting Started

Just reading up doesn't give you a gut understanding about how to work with JS. Different people like to approach learning a new programming language in different ways. You may want to start with an online course that walks you through the basics, or you might want to jump in feet-first and Google "How to do this in JS" as you go. Here are some options.

Sunil Sandhu's great plain-English JS Beginner's Guide is a really great primer.
Codecademy has a course on beginning JS.
Learn.co's curriculum on JS/the web and JS/the world are good starting points, and their repository has a ton of JS intro readme resources.
MDN Docs: JavaScript First Steps
javascript.info is pretty verbose, but has EVERYTHING. In fact, you could probably stop reading my post right now and go over there and be better off.
And finally, I highly recommend Dan Abramov and Maggie Appleton's Just JavaScript, which will come to you as a series of gorgeous emails and help you form your mental models of JS.

Okay, but how do I actually... do it?

First, you'll need an environment to program in. JavaScript traditionally works in-browser, so all you really need is a browser and a text editor to get started. JS devs tend to prefer Chrome and Firefox because of their robust developer tools. (here's a guide to the Chrome console, and here's one for Firefox)

In terms of text editors, you've got a lot of choice. It's possible to write JavaScript in something as plain as TextEdit, but specialized apps like Atom or Visual Studio Code are made for writing code and will make things easier. It's totally up to you what text editor you want to use – some are simpler, some more structured. There are tons. Google around!

You can use your browser's console to get familiar with the ins and outs of writing JavaScript. Then, when you want to test out your knowledge on your own web pages, all you have to do is create an HTML file with a <script></script> tag (you can either insert JavaScript right in the file or link an external one, which is just a file with the extension .js). Open up your HTML file in the browser and you can test your code, and/or see all your errors in the console. :)

You can also use online tools like jsfiddle or codepen to play with JavaScript, which might be a good option to get your feet wet with minimal setup.

To run JavaScript on your computer without having to use the browser, you should install node.js and npm. Here's a guide to using it, although I admit I haven't played around much in Node.js yet. Once it's installed, you can type node in your terminal to open up a JS console right on your computer, or run .js files using node filepath.js. Pretty cool!

Slightly more advanced things

Once you're familiar with the basics of JavaScript, here are a few resources I like for more advanced concepts.

Maggie Appleton's site has some wonderful illustrations and explanations about JS concepts.
Similarly, Dan Abramov has recently started whatthefork.is for explaining JS thingies.

That's the end of the links I have for now – I might add more resources for things like working with APIs as we go, or this might become a series, as long as Lea wants to keep hearing from me!

Stay safe.

Make Your Terminal Phenerminal: Customizing Colors and Prompts

sidney — Thu, 02 Jul 2020 17:15:00 +0000

Cover illustration by me, Sidney

When I was a kid, opening up Terminal and playing emacs games or watching telnet star wars felt like the ultimate hacker experience. Now that I use the command line for more mundane tasks like navigating my directories and generating Rails apps, I like the interface to be a little more exciting than the simple black-and-white default.

As a total beginner, I didn't know there was such a thing as a framework like Oh My Zsh, which lets you choose from its vast collection of themes– I didn't even know you could use programs other than Terminal as terminal emulators! Here's how I made my vanilla Zsh Terminal pretty in a very simple way.

Terminal Themes and Colors

If you open up Terminal's Preferences panel, you'll be able to choose from or edit themes, or "profiles."

You could create your own profile from scratch, choosing the ANSI colors by hand, but I wanted my Terminal to take on the color scheme Solarized by Ethan Schoonover. Luckily, you can download a .terminal file from the site that, when opened, creates a new Terminal profile with the Solarized colors.

A whole lot more .terminal files can be found in this repository by lysyi3m– if your computer won't let you open them because they're from an unidentified developer, just right-click and "Open With" Terminal. (Make sure 'display ANSI colors' is checked.)

If you install a Zsh framework like Oh My Zsh, changing themes can be as simple as editing a line in your configuration file.

You know what else is as simple as editing a line in your configuration file?

Putting a Frog in Your Prompt

When I was tipped off that you could customize your command-line prompt, there was one obvious question I had to find out the answer to– "Can I put a frog in it?"

Fortunately, gloriously, the answer is yes (as long as your terminal supports unicode, which it should). And I'm far from the first person to think - of - putting - emojis - in the prompt.

With zsh, you'll want to look for a file in your root directory called zshrc. (It might be a hidden dotfile, which you can show in Finder by doing ⌘ + ⇧ + .) Once inside with the text editor of your choice, your target is the line that contains the default prompt, which in Zsh is something like %m%#.

Looking at a zsh prompt can be intimidating if you don't know how to read it, but all the prompt escapes can be found here in the zsh manual. %m gives the machine's hostname up to the first dot, and %# shows a # only if the shell is running with privileges.

Here's my prompt, step by step:

PS1="%F{green} %2~ 🐸 > %f"

%F{color} starts a color, in my case green to match my frog friend
%2~ shows a ~ at the home directory, or else the last two folders in your path when you're navigating around
🐸 and >, characters on their own, followed by a space
%f ends a color, returning my input to the default blue.

All Together Now

As a final touch, I got rid of that "last login" message by running touch .hushlogin in my root directory. Here's what a new Terminal window looks like, in the Solarized Light profile:

Ahhh.

More Resources

Armin Briegel at scriptingosx.com does a great job explaining how to customize the zsh prompt, and has a whole book on moving to zsh from bash. I highly recommend looking at his posts on minimal Terminal and rotating background colors, if you really want to get fancy.

Laurie's post, below, outlines a way to get a different emoji depending on whether your last command was successful:

Adding an Emoji Status to Terminal (ZSH)

Laurie ・ Aug 21 '19 ・ 2 min read

#linux #productivity #tutorial

And if you're a command-line beginner like me, it's worth it to make use of aliases to supercharge your experience, as my classmate Anmol writes about here: (just put the aliases into your zshrc file instead of bashrc)

How to Save Valuable Time with Bash Aliases | by Anmolpreet Kaur | Medium

Anmolpreet Kaur ・ Jun 16, 2020 ・ 3 min read
Medium

Happy emoji-ing!