Resources

Table of Contents

Text Editors

Text editors are very much a matter of taste.

That's fine, because there are numerous text editors suitable for front-end development, both free and paid. A good text editor will:

  1. Have syntax highlighting (color coding).
  2. Help you with tabbing and closing tags.
  3. Support code folding, to collapse and expand sections of code.
  4. Edit multiple lines at once.
  5. Include autocompletion for tag names, attributes and CSS rules.
  6. Offer powerful find and replace functionality, including grep/regex.
  7. Possibly handle FTP as well, so you can sync and upload your files to your server from right inside the program.

Many students (and web developers) use Brackets or Atom, which are feature-full, free, and available on all platforms. Paid programs all have a free trial period though, so try a few once you're comfortable with CSS. Most of the time I personally use BBEdit or Vim, depending on the task.

App Platform Notes
BBEdit mac only Paid with free-for-life partial feature set. Excellent general purpose text editor with a suite of HTML specific features. Powerful find and replace functionality with clear documentation. One of the oldest actively developed mac apps, going back to 1989.
Brackets win/mac Free. Adobe's open source text editor. This is good for beginners and is aimed specifically at working with HTML/CSS. It has some very clever and useful features, but active development has languished since ~2017, and the app can be slow and buggy.
Visual Studio Code win/mac Free. Microsoft's free IDE for development in a multitude of languages. VSCode can be overwhelming at first because it includes many features we don't need for HTML/CSS, but it's incredibly popular among web developers.
Atom win/mac Free. Open source editor from Github. Very popular and more customizable than Brackets (in ways that probably won't matter to beginners). Built on Electron - large, slow, struggles with large files, etc.
Sublime Text win/mac Paid. Free to evaluate but nags to purchase. Highly functional and customizable for advanced users.
Nova mac only Paid, free trial. Thoughtfully crafted editor with lots of features and top-notch FTP functionality for working with remote servers.
Notepad++ win only Free. A very good windows-only option.
UltraEdit win/mac Paid (subscription model). Another good option particularly for windows users.

Finally, a note about Adobe Dreamweaver, which is installed on all of the lab computers as part of the Adobe suite. Dreamweaver is much better in recent versions, but it focuses heavily on templating and tooling that can be confusing for beginners. Avoid using Dreamweaver for this class.

Browser Developer Tools

One of the greatest things about the web is that you can freely poke around at the code for any web page.

All the major browsers nowadays have a sophisticated collection of built in developer tools that are extremely useful. When activated, they usually open as a pane within your browser window, but can easily pop out into their own window if needed.

They make all of a web page's source code easily viewable, and you can even edit and preview certain code changes live in the browser.

Tip: Don't get too far ahead of yourself editing code in the browser. Get in the habit of switching to your text editor and updating your code after every couple of changes. Once you refresh the page in the browser, everything goes back to its original state!

Browser Where to find tools
Firefox Built-in developer tools under Tools > Web Developer > [ Inspector ]
Chrome View > Developer > Developer Tools
Safari First, enable "Show Develop menu in menu bar" from the Advanced tab of Safari's Preferences. You'll then find it under:

Develop > Show Web Inspector.

Remote debugging on iPhones is enabled when the phone is connected to a trusted computer.

MDN has a good instructional article on how to Examine and edit CSS in the Firefox dev tools (the other browsers are similar).

Find and Replace (PRCE/Grep/Regexp)

Regular expressions are an extremely powerful tool for finding and transforming text. Learning regular expressions in depth is definitely beyond the scope of our class, but here are some of the most common and useful character classes. Don't forget to turn on the checkbox for grep/regexp in the find and replace dialog of your text editor.

BBEdit's help manual has an excellent section on regular expressions if you're interested in learning more. It is linked for quick access from the table of contents page under Help > BBEdit Help. In versions >13.0, BBEdit also has a "grep playground" that helps you learn by live preview, and predefined examples.

Pattern Matches
^ Beginning of line
$ End of line
\n Newline
\t Tab character
\d Digit
\w Word character (letter or digit)
. (dot) Any non-whitespace character
* Matches zero or more of the preceding character or character class. For example, \d* matches zero or more digits.
+ Matches one or more of the preceding character or character class. For example, \t+ matches one or more tab characters.

Screenshots

Oftentimes it's useful to take a picture of exactly what's displayed on your screen. Fortunately this is easy to do on both Macs and PCs, via keyboard shortcuts or screen capture applications included with macOS and Windows.

On a mac:

Macs have an app called Screenshot.app. Search using Spotlight or in the Applications > Utilities folder.

Shortcut Type of Screenshot
cmd + shift + 5 Open Screenshot.app
cmd + shift + 3 Whole screen
cmd + shift + 4 Click and drag portion of the screen. While dragging, use shift, option, or spacebar to change the way the selection moves.
cmd + shift + 4, spacebar Choose a window to take a picture of. Hold option while taking the screenshot to capture the window without its shadow.

Screenshots are saved to the desktop. Full Apple help article on screenshots here.

On a PC:

Most PCs running Windows 10 have a tool called the Snip and Sketch. Open the start menu and search.

Shortcut Type of Screenshot
PrtScn "Print Screen" or similar abbreviation, takes a picture of the whole screen and copies to the clipboard. Hint: The New Document dialog in photoshop automatically sizes to the contents of your clipboard.
win + PrtScn Windows 8.1 and 10 only - take a picture of the whole screen, and save automatically to a file. Creates a folder called "Screenshots" in your Pictures folder.
alt + PrtScn Copies a picture of the currently active window to the clipboard.

Full Microsoft help article on screenshots here.

If you need to take a screenshot of an entire web page, Firefox and Chrome dev tools both have options for taking a single screenshot of the entire current page.

Monospace Fonts

Below are a selection of beautiful, modern monospaced fonts for coding and writing. None of these are bitmap fonts, and several have variable font variants.

As always, check the licensing terms before distributing, uploading, or publishing content using these fonts. They are all, however, free to use on your personal computer and text editor of choice.

Open Source

Closed Source

  • Operator - from Hoefler&Co. Beautifully designed typeface for people who write code.
  • SF Mono (Apple) - Installed on macOS systems but only available in Terminal and Xcode by default. You can download and install it "proper" from Apple.

Javascript Plugins and Libraries

There are tons of javascript plugins and libraries to add all sorts of functionality to your web sites. Some have to be paired with jQuery, and some can function on their own. Here are a few useful and popular plugins:

Plugin/Library Is jQuery required? Description
Lightbox Yes Classic image popup effect
Fancybox Yes Lightbox, but different style of animation. A better alternative to Popup js
Swiper No Interactive carousels and slideshows. Highly customizable, highly recommended for this purpose.
Waypoints No Trigger actions based on scroll position
Masonry js (and partner plugin imagesLoaded) No, but jQuery makes it a little easier Masonry layout
scrollTo Yes Animate scrolling the viewport to a specific element or position
Micromodal No Keyboard friendly modal dialogs
FlexSlider Yes jQuery slideshow plugin (but you probably want Swiper)
ScrollTrigger No Same as Waypoints

HTML Entities

How do I put quotes between quotes without closing my quotes?!

HTML code obviously uses a handful of characters that have special meanings. < > for tags, "" for attributes, etc.

But what happens when you want to literally display those characters on your web page, when they would otherwise be interpreted as code? And what about symbols and characters that we don't have keyboard keys for, like accented letters, special currencies, or greek letters?

Every unicode character has a code number, and many of them have an abbreviated name. These are called HTML Entities, or character references. Instead of typing the character that you want directly in your code, you use the named or numbered reference to that symbol.

An ampersand & tells the browser you're entering a character reference, and the reference terminated with a semicolon ;.

For example, this doesn't display the way you probably want in a browser:

<p>Only one of these spaces       will show up.</p>

But this does.

<p>But these spaces &nbsp;&nbsp;&nbsp;&nbsp;will.</p>

Here are the symbols you may need to "escape" when you want them to display rather than be interpreted as code. I threw in a few other common ones as well.

Symbol Name Entity Number
  non-breaking space &nbsp; &#160;
& ampersand &amp; &#38;
< less than &lt; &#60;
> greater than &gt; &#62;
" straight double quote &quot; &#34;
' apostrophe &apos; &#39;
© copyright symbol &copy; &#169;
en dash (you can just type this) &ndash; &#8211;
em dash &mdash; &#8212;
left double quote &ldquo; &#8220;
right double quote &rdquo; &#8221;

Here is a very useful complete character reference from the W3C, and more information on Wikipedia.

Useful Mac Apps

Type App Notes
Application launchers + power tools Alfred Powerful and user friendly application launcher. Spotlight + web search + app integrations in one search bar. Global keyboard shortcuts. Create custom workflows to speed up repetitive tasks.
Quicksilver Very similar feature set to Alfred. Open source. Uses an object -> action -> arguments setup that is less intuitive at the start, but more customizable. This app becomes more useful the further you dig into its extensive settings.
BetterTouchTool Primarily, this is a tool for custom trackpad and mouse gestures, but this app can do so much more. This app has a positively overwhelming set of custom actions, and even bundles window snapping and an iOS remote control for your computer!.
TextExpander Advanced autocomplete and text replacement across your whole mac. Great for situations where you type similar strings of text very often (e.g. email templates).
Menu bar sanity Bartender Organize and hide menu bar icons. Very polished.
Vanilla Same as Bartender, but cheaper simpler.
Backup SuperDuper! Local cloning and bootable backups. Don't let the lack of flashy web site fool you, this app is very much under active development. Simple UI and backups that just work.
Carbon Copy Cloner Local cloning and bootable backups. Similar feature set to SuperDuper!
Backblaze Affordable online backup with unlimited storage. Native mac app is a big plus. 30 day retention policy for deleted files. Does not back up network shares.
Crashplan Affordable online backup with unlimited storage. Allows backup of network shares and can retain deleted files indefinitely. Client app runs on java which is... not ideal.
Window snapping Moom
Magnet
Divvy
Spectacle
BetterSnapTool Highly customizable. All of this app's functionality is included as part of BetterTouchTool.
Hard drive utilities DaisyDisk Beautiful, intuitive visual chart to quickly see what's taking up space on any mounted disk.
Blackmagic Disk Speed Test Test the performance of any mounted disk.
Keyboard shortcuts CheatSheet Hold CMD key for a list of the current app's available keyboard shortcuts.
Activity and battery monitors iStat Menus Customizable menu bar activity monitor. Also includes weather and clock widgets. Integrates closely with Bartender.
coconut Battery iStat has battery statistics, but this app will also show the battery health and status of connected iOS devices.
Calculators Soulver Calculator crossed with a spreadsheet. Hard to explain but very cool.
Spotlight Calculator and unit conversion built in!
Do not disturb Muzzle Automatically turns on do not disturb to silence notifications while screensharing or presenting.
App management AppCleaner For uninstalling apps and scooping up their related files.