Categories
CSS HTML JavaScript Tools & Generators

Setting Up A TailwindCSS Project

To Install Tailwind:Open your project in Visual Studio Code. Go to Terminal > New Terminal Type npm install -D tailwindcss To Initialize your project, type Then create two folders inside your project. Name them build and src In the SRC folder, make a file called input.css In the BUILD folder, make a file called index.html In tailwind.config.js, edit […]

Categories
Tools & Generators

Useful Tools 2020

Omatsuri: tons of useful utilities like CSS triangle generator, gradient generator, color shades generator, svg compressor, fake data generator, symbols collection, css cursors, javascript event keycode values, pokemon ipsum, etc. Tiny-Helpers.dev: massive collection of single purpose online tools for devs. CSS Shadows Generator: like using Illustrator, but for box-shadows Cubic-Bezier.com: for custom css animation or […]

Categories
Tools & Generators

Introduction to Regular Expressions

This video does a great job explaining introductory regular expressions: Character Meaning Example * Match zero, one or more of the previous Ah* matches “Ahhhhh” or “A“ ? Match zero or one of the previous Ah? matches “Al” or “Ah“ + Match one or more of the previous Ah+ matches “Ah” or “Ahhh” but not […]

Categories
Tools & Generators

Making Emmet Work in PHP

If you’re in a PHP file, the Emmet shortcuts don’t initially work. To make them work, however, we just need to edit an Atom configuration file. Open the command palette: command-shift-p. Type in the following to search for the file: keymap.cson Press Return when that result shows up. After the commented out section, paste the […]

Categories
Tools & Generators

Build Tools: npm and gulp.js 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 or application). 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 […]

Categories
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 […]

Categories
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). That will bring up a contextual […]

Categories
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, […]

Categories
CSS HTML Tools & Generators

Chrome Developer Tools Exercise: LangaraPRM.com

This exercise is meant to help you familiarize yourself with the Chrome Developer Tools by examining and modifying the code that makes up any webpage. The Developer Tools allow us to do things like the following: see what html goes into any element in the page examine the nesting of html elements see what css […]

Categories
Tools & Generators

Online Color Pickers

Adobe Color CC. Create, save, download or browse palettes. Material Palette: Pick two colors. App generates palette. Coolors: Similar to Adobe Color. Coleure: Some useful comparison features.