Tools & Generators

Build Tools: Gulp Set Up

The idea behind build tools is to automate as much as possible the mundane and repetitive tasks in the production of software (such as a website).

Such tasks can include things like:

  • compiling SASS or LESS files into CSS on save
  • compressing images
  • reloading pages in browsers on save
  • adding vendor prefixes to CSS
  • linting (code checking) of JS, CSS, HTML, etc
  • minifying and concatenating JS files
  • uploading files to a test server
  • etc

The build tool I am going to focus on in this exercise is called gulp.js.

How to Set up Gulp on Your Own Computer

Gulp is built on Node.js and npm (node package manager), so to make gulp-based workflows on your own computer (ie not a lab one), you need to get both installed on your system.

You can get Node.js here.  Instructions for installing gulp on your own computer are available here.

How to Set up Gulp in a Langara Lab

In the B014 and A247 labs, Node.js is already installed. However, the gulp instructions in the link above will not work, because you do not, as a student, have admin permissions on a lab computer, and npm (node package manager) is installed in an area of the computer you are not allowed to write to.

However, by changing the npm default directory to one that you do have write permissions for, we can make it work.

To do that, follow these steps exactly. The bolded parts are what you will type. DO NOT COPY AND PASTE FROM THIS PAGE (the quotation marks will be wrong).

  1. Open Terminal (command-space, then type terminal)
  2. Make a directory for global installations (the period makes it “invisible”)
    mkdir ~/.npm-global
  3. Configure npm to use the new directory path:
    npm config set prefix ‘~/.npm-global’
  4. Open or create a ~/.profile file:
    nano ~/.profile
  5. Add this line to the .profile file you are editing:
    export PATH=~/.npm-global/bin:$PATH
  6. Exit nano by pressing control-o to save, then command-x to exit
  7. Update your system variables:
    source ~/.profile

source: https://docs.npmjs.com/getting-started/fixing-npm-permissions

 

npmjs Intro to Gulp

The wikipedia page on gulp is nice and concise : https://en.wikipedia.org/wiki/Gulp.js

Smashing Magazine article on Gulp

 

Standard
CSS, HTML, JavaScript, Tools & Generators

ATOM Packages

A lot of good text editors, like Sublime Text and Atom, have the ability to easily install packages that will extend their core functionality.

Sometimes, people will make packages to replicate functionality found in other editors. For example, I am a longtime Sublime Text user. However, since Atom is free, I’ve started using it so students don’t feel compelled to buy Sublime Text. But there are a few features of Sublime that I miss in Atom. Fortunately, a number of packages allow me to add those features.

To install a package in Atom, do the following:

  • Bring up the Command Palette (command-shift-p on Mac, control-shift-p on Windows or Linux)
  • Type install and then select Install Packages And Themes
  • Search for the package you want to install
  • When you find one, press the INSTALL button

Here are some of the packages I always install:

  • Emmet: a brilliant, and essential, HTML/CSS macro utility.
    And here’s the official Emmet documentation and the excellent cheatsheet.
    Emmet practice exercise 1 | answer key | Emmet practice exercise 2
  • Open in Browser / Open in Browsers. There are number of packages that make testing the page in the browser quicker.
  • Col0r-Picker: command-shift-c (mac) or control-alt-c (win/linux) brings up a color picker
  • Atom-Live-Server: for testing dynamically generated pages
  • Atom-Beautify: for tidying up html, css, javascript, php, etc.
  • Auto-Update-Packages: does what you think it would do
  • Wrap in Tag: this replicates Sublime Text’s wrap in tag command. Which is really useful.
  • Linter: linters provide error messages. ( You will need to install language-specific linters in addition to this “base” linter )
  • Linkter-htmlhint: this provides HTML error messages on save (look at the bottom of the editor. Click for error panel.)
  • Linter-CSSLint: this provides CSS error messages on save (look at the bottom of the editor. Click for error panel.)
  • Linter-jshint: for JavaScript hinting on save (look at the bottom of the editor. Click for error panel.)
  • Pigments: A CSS color viewer. It adds a background color to all your color declarations. It even understands SASS variables and color-changing functions.

That’s just a few of the available useful packages.

Note, also, that most packages also have settings that can be configured from the Preferences / Settings menu.

 

Standard
Tools & Generators

Using the iPhone Simulator

To get to the iPhone simulator on your own Mac (sorry, Windows users), you need to install Xcode. If you are in a Langara or Emily Carr lab, it should be there already.

To use the simulator, don’t open Xcode. Instead, navigate to it and then right-click (or control-click).

path to xCode

That will bring up a contextual menu. Choose SHOW PACKAGE CONTENTS.

right-click xCode

 

That will take you inside the app. From there navigate the path shown below.

path to simulator

 

You can open the Simulator from here. Better yet, drag it into your dock so that you don’t have to go through this process again.

Once you have the Simulator running (it takes a short while to start up), you can drag local web pages into it for testing, or you can navigate to them using the Safari URL field.

You can also change phones, tablets, orientations, etc from the HARDWARE menu at the top of your screen.

 

Standard
Tools & Generators

Color Palette Generators & Utilities

A brief, but insightful, intro to color theory. 

Another discussion. 

Coolors.co

An excellent and very intuitive app for generating color schemes, which you can save, download, share, or export in a number of formats including URL, PNG, or SCSS.

Click the spacebar, generate a new theme. Lock colors you want to keep, click the spacebar, and then the unlocked colors regenerate.

The app has a lot of subtle features, including the ability to generate shading, generate palettes from photos, or view your palettes after they’ve been adjusted to simulate eight different kinds of color blindness.

You can also explore palettes made by other members on the site (membership is free, too).

You can even get coolors as an iOS app or an Adobe Creative Cloud add-on.

ColorSupply.com

This is a great application. Like other tools on this list, it gives you palettes generated from your initial choice of color and color scheme, but then arranges them in icons, contrasting rows, gradients, etc.

A really nice related discussion, which great examples, can be found in this PDF file from DesignByNumbers.

Palettr.com

Make palettes from words. Type in a word, then Palettr will search an online database of photos and generate a number of palettes from the photos.

A fascinating utility.

Color.Adobe.com

One of the oldest color generation sites on the Internet. Very large community. Creative Cloud Integration. Similar to coolors.co.

DoneSmart.com Generator

Like a Photoshop color picker that automatically shows the corresponding colors in various color schemes. Basic interface but useful.

Paletton.com

Another long-time site. Very good layout preview feature. You can generate and edit palettes and then then them applied to layouts, artwork, and animations.

Colrd.com

Similar to color.adobe.com, but with the ability to generate larger palettes.

BrandColors.net

Official color codes for the world’s biggest brands.

ColorHexa.com

Input one color and see a range of info: conversions into various color models (rgb, hex, cmyk, lab, etc), some useful preview functions.

 

DinPattern.com

A great source of seamless background patterns

SubtlePatterns.com

And another.

Standard
CSS, HTML, Tools & Generators

Chrome Developer Tools Exercise: Web Site Vandalism

First, open up Google Chrome and install the Full Page Screen Capture extension.

Then go to LangaraPRM.com in Chrome.

Right click (control-click on Mac) in the page and choose Inspect Element.

This will open up the Chrome Developer Tools. Make sure that you are in the Elements section. You can select it using the tabs on the top of the Inspector.

In this exercise, I want you to change the following:

  • every image on the page
  • every headline
  • every story description
  • every author name
  • every section name
  • every word in a menu (leave the social and search icons)

To change the images, you can use any or all of the following Image Placeholder services:

  • placekitten.com
  • placecage.com
  • placezombie.com
  • fillmurray.com
  • placecage.com
  • stevensegallery.com
  • lorempixel.com
  • p-hold.com

For bonus points, figure out how to change a font or two, or a font color, or a background color.

When you are done, take a screenshot using the Full Page Screen Capture extension you installed earlier.

Make sure that I can find your effort at http://mylinux.langara.bc.ca/~your-id/dev-tools-exercise

 

Below is an example of what I’m asking you to do. We start with the original site:

Screen Shot 2016-09-05 at 6.16.38 PM

 

And here’s the new and improved version (work in progress):

 

Screen Shot 2016-09-05 at 6.17.30 PM

 

 

Standard
Tools & Generators

Emmet Lab Exercise

As you work your way through this exercise, it will give you a sense of the power that tools like Emmet can give you.

Emmet is available for most good web text editors—including Sublime Text, Atom, and Brackets.

Using the official Emmet documentation and (especially) cheatsheet, do the following tasks:

  1. Make a list menu with 12 links (“#”), with link text that increments by one with each link. For example link01, link02, link03.
  2. Make a list menu with with 12 links, but “prewired” with spans and classes for Font Awesome.
  3. Make a list menu with with 12 links, but “prewired” with spans and classes for Font Awesome and with the visuallyhidden class.
  4. Make three rows of DIVs with classes of clearfix and row. Each row will have 4 articles inside. Each article will have an h1 with 3 words of lorem ipsum, an h2 with 2 words of lorem ipsum, and a p with 17 words of lorem ipsum.
  5. Make a table with
    – a caption that says “Bus Schedule”
    – one header row with three cells
    – four rows with three cells

 

Standard
Tools & Generators

Emmet Exercise Answer Key

Note: on this web page, some lines in the answers will wrap to the next line. They are still one uninterrupted line of code each, however.

Note, also, that WordPress made smart quotation marks in my code. On other pages on the site, this is fixed by a plugin, but this content was made before I installed that plugin. In other words, these answers will work if you type them out yourself, but will not work if you just copy and paste them from this page into your editor.

1. Make a list menu with 12 links (“#”), with link text that increments with each link. For example: link01, link02, link03.

ANSWER:
ul>(li>a[href=”#”]{link$$})*12

2. Make a list menu with 12 links, but “prewired” with spans and classes for Font Awesome.

ANSWER:
ul>(li>a[href=”#”]>span.fa.fa-+{link$$})*12

3. Make a list menu with with 12 links, but “prewired” with spans and classes for Font Awesome and with the visuallyhidden class.

ANSWER:
ul>(li>a[href=”#”]>span.fa.fa-+span.visuallyhidden>{link$$})*12

4. Make three rows of DIVs with classes of clearfix and row. Each row will have 4 articles inside. Each article will have an h1 with 3 words of lorem ipsum, an h2 with 2 words of lorem ipsum, and a p with 17 words of lorem ipsum.

(div.clearfix.row.row$>(article>h1>lorem3^h2>lorem2^p>lorem17)*3)*4

5. Make a table with:

-a caption that says “Bus Schedule”
-one header row with three cells
-four rows with three cells

ANSWER:
table>caption{Bus Schedule}+(tr>td*3)*4
(header>nav.menu-main>ul>(li>a[href=”#”]{link$$})*12)+((div.clearfix.row.row$>(article>h1>lorem3^h2>lorem2^p>lorem17)*3)*4)+(table>caption{Bus Schedule}+(tr>td*3)*4)

Standard
Tools & Generators, UX

Accessibility Resources

The Veil of Ignorance

To understand why a designer or developer must always consider accessiblity, read this short article. It is brilliant.

A Good Introdution to Accessibility

Invision Guide to Web Accessibility

Contrast Levels

The WCAG 2.0 AA recommendation for minimum contrast between foreground and background colors is 4.5:1.

This contrast ratio analyzer allows you to enter foreground and background colors (name, hex, rgb, rgba, hsl, hsla formats).

It’s a very interesting and easy to use tool.

Other Tools

Statistics

Useful Reading

How ARIA Landmark Roles Aid Accessibility

This is an excellent and concise video showing how ARIA works with Screen Reading software:

Standard
Tools & Generators

Tools

Prototyping

InvisionApp.com

Javascript/jQuery

Live js editor
http://jsbin.com/canvas/latest/edit

Typography

WhatFont: Google Chrome Extension That Identifies Fonts in a Page
https://chrome.google.com/webstore/search/whatfont

Font-Friend: Test WebFonts on Any Page. Bookmarklet.
http://somadesign.ca/projects/fontfriend/

Modular Scale: for type and layout number crunching based on base font and “important number”
http://modularscale.com/

An explanation, or how to, of modular scale in web design.
http://blog.8thlight.com/billy-whited/2011/10/28/r-a-ela-tional-design.html#tips

Copy Paste Character: if you need characters, or their codes
http://copypastecharacter.com/ 

FallBack: A Bookmarklet
http://ffffallback.com/ 

Most Common Fonts By Platform ( + Excellent Unicode Symbol Library )
http://www.codestyle.org/css/font-family/sampler-CombinedResults.shtml 

iOS Fonts: Listing of Fonts on iPhone & iPad
http://iosfonts.com/ 

Note-Taking

Evernote.com

Icons & Info

http://thenounproject.com/ 

 

Standard