Grunt build error behind proxy

While working on a project, I used the Yeoman webapp generator and selected; Bootstrap Sass, jQuery and Modernizr. Everything has worked well, the ‘grunt serve’ and ‘grunt test’ commands, however when I want to run the ‘grunt build’ command to upload the contents of my ‘dist’ folder to a web server, I get prompted with the following error:

Looking for Modernizr references in dist/styles/main.css >> svg
Downloading source files
A server error occurred attempting to download a file: 
Fatal error: connect ETIMEDOUT

I’m not sure if it’s something to do with my bower components or the proxy that I’m sitting behind?

At the moment, the workaround I’m using is to manually add the scripts (jQuery, Modernizr and Bootstrap) to the scripts folder then to link it to my html files. But surely there is a better way to do this?!

If you’ve worked out a better solution to overcome this issue, please let me know in the comments below.

CSS3 Grayscale Filter

So I stumbled upon a quick video on YouTube on how to use the CSS3 grayscale filter upon hovering on an image.

The results can be seen below:

See the Pen hcBCJ by Adeline (@adelineyaw) on CodePen.

Click on the CSS tab in the Codepen example above to see how this filter effect can be implemented in your CSS.

Unfortunately this effect can’t be seen on Firefox as it’s not supported so please refer to “Can I Use” to find out if your browser supports this CSS3 filter.

“Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.” – Can I Use

“It’s worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6.” – CSS3 Filters

References:

Preprocessing is for Everybody

Preprocessing is for Everybody by Chris Coyier

“You’ve heard about CSS preprocessors. If you have yet to take the dive or have only dipped your toes in, let Chris Coyier (CSS-Tricks, Codepen) convince you that you won’t regret it. Have you met resistance? Let’s try and convince your boss and colleagues. There may be some misconceptions going around that we need to nip in the bud. Then we’ll look at how preprocessors fit into the modern web development workflow, the evolving best practices for using them, and how to squeeze out all the benefit we can get from them.” – An Event Apart Video

Responsive Images

The following video is from the post Responsive Images using <picture> and srcset/sizes – by Matt Steele

Big heavy images are responsible for most of the bloat on a responsive website, but it doesn’t have to be that way. Here’s the latest HTML elements you can use to keep your images small, and your site lean & fast. – Matt Steele

Reference: Srcset and sizes

Features of Compass

“Compass is an open-source CSS Authoring Framework.” – Compass

“Compass can do some really handy tasks like measuring images from the filesystem and writing them into your stylesheets. Asset URL functions are available that make it easy to move assets around in a project or even switch to a content delivery network (CDN) without having to rewrite your stylesheets. Compass can even combine a directory of images into a single sprite image and do the otherwise tedious task of calculating coordinates and writing the spriting CSS for you.” – Sass and Compass in Action (Manning)


Some of the features of Compass I’ll be covering are:

CSS3

From my previous blog post, I used an example of a mixin for a box with a border-radius. This time instead of re-writing the prefixes seen below;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;

We can use the Compass mixin called border-radius.

For example:

Play with this gist on SassMeister.

And we can define the 10px in the parentheses when you include the mixin.

Image Sprites

Instead of having to use your preferred image editor to create your image sprite, Compass can do this for you. Simply throw in your icons into a specific folder and let the Compass Sprite utility, create the sprite and calculate the CSS positions for you. Another feature is that Compass also recognizes the hover state of your image by simply saving your image, eg. facebook_hover.png

The following excerpt is from the Spriting with Compass reference page

Basic Usage

**Note: The use of social is only for this example, “social” represents the folder name that contains your sprites.

The simplest way to use these icon sprites is to let compass give you a class for each sprite:

In your SCSS file, add the following:

@import "compass/utilities/sprites"; 
@import "social/*.png";
@include all-social-sprites;

And you’ll get the following CSS output:

.social-sprite, 
.social-facebook, 
.social-linkedin, 
.social-twitter, 
.social-youtube {
background-image: url('../img/social-sf14878b932.png'); 

// the name of your generated sprite image will be different

background-repeat: no-repeat;
}

.social-facebook {
background-position: 0 0;
}

.social-facebook:hover, .social-facebook.facebook-hover { 
background-position: 0 -80px;
}

.social-linkedin {
background-position: 0 -160px;
}

.social-linkedin:hover, .social-linkedin.linkedin-hover {
background-position: 0 -240px;
}

.social-twitter { 
background-position: 0 -320px;
}

.social-twitter:hover, .social-twitter.twitter-hover {
background-position: 0 -400px;
}

.social-youtube {
background-position: 0 -480px;
}

.social-youtube:hover, .social-youtube.youtube-hover {
background-position: 0 -560px;
}

This results in one single sprite image:

Compass Sprite example

You can now apply the social-your-class-name to your HTML as needed.

As stated earlier, the Sprite utility also recognizes if your icon requires a hover state. So add your hover state icons in the social folder (within your images folder).

Be sure to add in your “config.rb file” the location of your main images (root) folder.

Once you save the changes, the new sprite image will re-generate to include the hover state icons and thus your output CSS will also be updated. It is pretty amazing!

Font Face

The Compass Font Face provides a mixin to support @font-face. See CSS3 spec: @font-face.

This file can be imported using: @import “compass/css3/font-face”

Use the mixin font-face($name, $font-files, $eot, $weight, $style)

Where:

  • $name is required, arbitrary, and what you will use in font stacks.
  • $font-files is required using font-files(‘relative/location’, ‘format’). for best results use this order: woff, opentype/truetype, svg
  • $eot is required by IE, and is a relative location of the eot file.

See the Compass reference page for more details on this mixin and the use of $weight and $style.

For this example, I’m using the font called “TeXGyreHerosCnBold”.

In your SCSS file, add the following:

@include font-face("TeXGyreHerosCnBold", 
font-files(
"texgyreheroscn-bold-webfont.ttf", 
"texgyreheroscn-bold-webfont.eot", 
"texgyreheroscn-bold-webfont.svg", 
"texgyreheroscn-bold-webfont.woff")
);

Then assign your font, eg. h1, h2:

h1, h2 {
font-family: "TeXGyreHerosCnBold", Helvetica, sans-serif;
}

Add your fonts to the fonts folder and define the location of your fonts in the config.rb file, fonts_dir = “fonts”. This is the directory where the font files are kept. Standalone projects will default to “css_dir/fonts”. Rails projects will default to “public/fonts”.

Extending Compass

There are quite a number of Sass and Compass resources but I want to mention, Sache. As the site says “Find the perfect tool for your next Sass or Compass project. Discover Sass & Compass Extensions”. There are plenty of Sass and Compass extensions/plugins listed on the site and I’ll be writing a future blog post about using Susy (a semantic grid framework) as well as Breakpoint Sass (a plugin for media queries).


So hopefully I’ve convinced you to use or at least try out Compass with your next Sass project! If you’re already using Compass, share your experiences in the comments below.

References

Learning Sass

What is Sass?

“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” – Sass

To install Sass, read the official Sass guide or if you’re trying to install Sass at your workplace and have issues due to your network firewall, read my previous blog post.

There are numerous ways to compile Sass. There’s the Command Line/Terminal or GUI’s such as Koala, Scout, Prepos and Codekit. Read the official Sass guide on the best way to compile your Sass to CSS.

I’ll briefly discuss some of the useful features of Sass:


Let’s begin to start using Sass!

Nesting

You can nest CSS rules inside each other instead of repeating selectors in separate declarations.

Play with this gist on SassMeister.

Nesting – Referencing Parent Selectors with &

Sass adds the ability to reference the current parent selector using the ampersand as a special placeholder.

An example of using the ampersand to reference the parent selector for a link and hover:

Play with this gist on SassMeister.

Variables

As described in the Sass Basics website.

“Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the $ symbol to make something a variable. Here’s an example:”

When the Sass is processed, it takes the variables we define for $font-stack and $base and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site.

We could even lighten the color, for example;

Play with this gist on SassMeister.

So the advantage is, if you need to update your brand colour, you just have to adjust the $base variable once in your SCSS file and not have to do a search and replace for all instances of that particular color.

Mixins

Where variables let you define and reuse values throughout the stylesheet, mixins allow you to define and reuse blocks of styles. Instead of typing the same rules multiple times in various declarations, use mixins to define a group of styles just once and refer to it anytime those styles are needed.

In addition, writing CSS3 can be tedious to write as there are many vendor prefixes that exist. So mixins lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

Here’s an example for border-radius.

Play with this gist on SassMeister.

To create a mixin you use the @mixin directive and give it a name. We’re also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

Please note if you are using Compass with Sass, you can easily use Compass’ mixin ‘border-radius’ instead of creating your own. You just have to @import “compass” or @import “compass/css3/border-radius in your Sass file. Read the Compass reference for more information on how to use Compass. I’ll be discussing Compass in a future blog post.

@extend

We can use Sass’s @extend function to “chain together” styles that are shared amongst multiple selectors.

Use @extend when you want to store multiple static properties and pass them to selectors, it lets you share a set of CSS properties from one selector to another.

Play with this gist on SassMeister.

Placeholders

Placeholder are helpful in creating blocks of styles for design patterns that may or may not be used (eg. in frameworks or templates). Placeholders allow you to define “phantom” classes that won’t appear in your outputted CSS. You can reference placeholders using @extend.

For example, lets create a class for a block of styles that define a button.

We’ll use a placeholder selector, which prefixes the class name with a %.

Play with this gist on SassMeister.

We can call this rule set in other classes using @extend.

Partials

“You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.SCSS. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.” – Sass Basics

@import

“Sass extends the CSS @import rule to allow it to import SCSS and Sass files. All imported SCSS and Sass files will be merged together into a single CSS output file. In addition, any variables or mixins defined in imported files can be used in the main file.” – Sass Reference

“Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you’re importing into so you can serve a single CSS file to the web browser.” – Sass Basics

SCSS

// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

/* base.scss */

@import "reset";

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

When you import a file you don’t need to include the file extension .scss. Sass is smart and will figure it out for you. When you generate the CSS you’ll get:

CSS

html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

@extend vs mixins

Where a mixin will write the same rules in each declaration it’s called from, @extend will create multiple, comma-separated selectors for shared styles. It’s good to keep this difference in mind when you’re deciding which to use.


Now to apply all of this in your projects!

Hopefully you’ve got a better understanding of how powerful Sass can be. I’ve only scratched the surface and have used extremely simple examples using the basics of Sass. There are advanced functions on top of what I’ve outlined in this blog post, for example; advanced maths and functions.

If you’re using Sass in your projects, let me know how your progress is going in the comments below.


References

Grunt-Sass vs Grunt-Contrib-Sass

I was interested to find out what the differences were between Grunt-Sass and Grunt-Contrib-Sass.

Following on from my previous blog post on “Using Yeoman in your workflow“, it was brought to my attention during the Yeoman install when the interactive prompt asked if I wanted to use Libsass to compile Sass.

Yeoman generator Libsass prompt

So I recently asked on Twitter and received the following tweets. Thanks to @sindresorhus for the explanation.

So as you can see, both options are available and it’s really up to you if you choose to go with grunt-sass or grunt-contrib-sass.

If you’ve seen advantages from using grunt-sass over grunt-contrib-sass (or vice versa), let me know in the comments below.

Using Yeoman in your workflow

There are tonnes of web development tools to help front-end developers these days that it can start to become overwhelming. I know I was! (Not gonna lie!). So before we begin, I thought I would go through some of the steps of using Yeoman in my web development workflow.

First you’ll need to get a clear picture on what you’d like to achieve and what your end result will be. For me, I wanted to re-design an existing static website to make it responsive (more about RWD on a future blog post).

Now to quickly go through the Yeoman process:

What is Yeoman?

“Yeoman is a robust and opinionated client-side stack, comprising tools and frameworks that can help developers quickly build beautiful web applications. We take care of providing everything needed to get started without any of the normal headaches associated with a manual setup.” – Yeoman

The Yeoman workflow is comprised of three core tools. These tools are:

  • yo – the scaffolding tool from Yeoman
  • bower – the package management tool
  • grunt – the build tool

Follow the ‘Getting started’ instructions provided by Yeoman.

Here’s the gist of what to type in your Terminal / Command Line:

npm install -g yo
npm install -g generator-webapp
mkdir my-test-project
cd my-test-project
yo webapp

You should then see an interactive prompt:

Yeoman generator web app prompt

Once everything has been installed by Yeoman, if you open up your project folder in a text editor (my preference is Sublime Text), you should see a whole bunch of folders and files. Don’t get too overwhelmed, here’s a simple explanation of what each folder contains:

Project folder structure

  • The app folder is where your pure, non-compiled, non-minified source code lives. The files within the app folder is where you do all your development work in. This is where you’ll find all of your HTML, JavaScript and Sass files.
  • The bower components directory includes all of the dependencies for your application, such as jQuery and Modernizr. You can add more Bower packages using the install command:
    bower install  --save-dev
  • The dist folder (or the distributable folder) is the folder to FTP as your clients’ site so it’s what you feed to the server.

    Please note that you won’t see the ‘dist’ folder until after you run ‘grunt build’ (more on this later). It will have it’s own index.html, with references to minified and concatenated dist/scripts and dist/styles, and optimized dist/images.

  • The node_modules folder and package.json file are part of the Grunt build. If you need further explanation, take a look at my previous blog post.
  • The Gruntfile.js has all of the build, server, and test tasks defined. Behind the scenes, grunt build is a task that runs several sub-tasks. There are also plenty of useful plugins (provided by Yeoman) so here’s a brief explanation of some of the ones you probably haven’t heard or used before:
    • clean: – Yeoman stores some stuff in a .tmp folder. That will be wiped out.
    • connect: – Creates a local server, watches for changes to your source files, then triggers a reload in your browser.
    • open: – Opens the server instance, typically localhost:9000 in your browser.
    • copy: – Copies files from .tmp/ and app/ into dist/
    • clean:dist: – Clears out your .tmp/ and dist/ folders
    • usemin: – Updates the references in your HTML with the new files

Just to elaborate on ‘grunt-usemin

The grunt-usemin plugin looks for blocks inside of your app/index.html, like this:

app/index.html

<!-- build:js scripts/main.js -->
<script src="bower_components/jquery/jquery.js"></script>
<script src="scripts/main.js"></script>
<!-- endbuild -->

After your grunt build task completes, you will end up with this:

dist/index.html

<script src="scripts/c155266f.main.js"></script>

It sucked those scripts up, concatenated and minified them into one JS file. Now that’s pretty awesome!

So now that you’ve gained a basic grasp of the your project’s folder structure and files, it’s time to put it all together and finally run the Grunt commands: serve, test and build!

Steps to run Grunt (as written from Yeoman):

Preview an app you have generated

grunt serve

Run the unit tests for an app.

grunt test

Build an optimized, production-ready version of your app.

grunt

And there you have it!

I hope this blog post has somewhat helped you understand how Yeoman can be utilised in your web development workflow to create sites and web apps.

If you’re already using Yeoman, let me know what your experiences are like and if there’s any other useful grunt plugin that I’ve missed or should know about let me know in the comments below.


Sources:

YeoPress Review

YeoPress: A Yeoman Generator for WordPress by Wesley Todd

I won’t go into too much detail to explain what YeoPress does but you can read more about it from the creator himself, Wesley Todd. YeoPress: A Yeoman Generator for WordPress, basically installs WordPress via the Command Line/Terminal. It’s also assuming that you’re working locally (which is a good start for developing WordPress themes). So you still need to create your database and you have to know what your database username and password will be (this is to set up your wp-config.php file) For example: Database Username: root, Database Password: empty). Be sure to check your database privileges for editing access too. The steps described by Wesley are easy to understand and the instructions set up are pretty straightforward.

npm install -g yo generator-wordpress

cd /path/to/wp

yo wordpress

There are even options to initialize in Git and the option to create a submodule folder (to avoid unwanted spammers/hackers messing with your wp-admin files and other important WordPress files). Another added security by obscurity is to set your Database tables prefix from _wp to something else. This too, can be configured in the YeoPress set up.

For more info on YeoPress, check out Wesley’s Github repo.


Update (23 May, 2014): While setting up Yeoman on a project I’m working on, it looks like the Yeoman website has the YeoPress generator as an option when installing. For example; after running the following:

npm install -g yo

Change directory to your project folder:

yo

One of the options is:

Run the WordPress generator (1.4.2)

which is the YeoPress generator.

It’s just another way to use the YeoPress generator via the Yeoman website.


During my experimenting with YeoPress I chose the FoundationPress theme to download. YeoPress asks if you want to install a theme as part of the build as I wanted to use Foundation 5 (CSS Framework). And FoundationPress in my opinion, was as close to using the Foundation CSS Framework in WordPress. The theme was also using Grunt to run tasks such as Concat, Copy, Watch, Sass and Uglify. And Bower was also part of the theme’s build to get the latest version of packages (eg. Modernizr, jQuery, Sizzle and Foundation to name a few).

I will have to write a future blog post on reviewing WordPress starter themes, more so on CSS Frameworks such as Foundation and Bootstrap within WordPress.

If you’d like to share your experiences about your favourite CSS Framework based WordPress theme, let me know in the comments below.

Grunt Boilerplate

What is Grunt? Grunt is a JavaScript Task Runner.

As written on Grunt JS

Why use a task runner?
In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you’ve configured it, a task runner can do most of that mundane work for you—and your team—with basically zero effort.”

Why use Grunt?
The Grunt ecosystem is huge and it’s growing every day. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort. If someone hasn’t already built what you need, authoring and publishing your own Grunt plugin to npm is a breeze.”

So if you’re using my Grunt Boilerplate, it will compile your Sass files to CSS, minify and combine all of the JavaScript files into one file, will “detect errors and potential problems in JavaScript code” using JSHint, will optimize your png and jpg files on the fly and will watch for any modified files that are in the ‘watched’ task.

First you need to install Node JS as Grunt is a npm module that runs off Node JS.

Now to start using Grunt, follow the steps on the ‘Getting started’ page.

In your Terminal / Command Line, type:

(sudo) npm install -g grunt-cli

(Use sudo if you’re on a Mac.)

Once you’ve installed Grunt, I am assuming you’ll be using my ‘Grunt Boilerplate‘ as your project? So therefore we’ll be working on an existing project. So to run Grunt, do the following (as described by Grunt):

In your Terminal / Command Line:

  1. Navigate to your projects’ root directory.
  2. npm install

    – this will install the project dependencies.

  3. grunt

    – to run Grunt

There are two important files when using Grunt and they are:

  1. package.json – This file lists grunt and the Grunt plugins that the project needs as devDependencies.
  2. Gruntfile.js – This file is used to configure, define tasks and load Grunt plugins.

For more information on each Grunt plugin listed (and what they do in this boilerplate), read the following links:

Read more about configuring and creating Grunt tasks.

Tada! you should now be up and running using Grunt!


More about this Grunt Boilerplate

It’s a simplified version of Chris Coyiers’ Grunt Boilerplate based on the CSS Tricks screencast First Moments with Grunt which also accompanies the article written by Chris, Grunt for People Who Think Things Like Grunt are Weird and Hard.


Using this Grunt Boilerplate in Git

Clone the repository (using either HTTPS, SSH or Subversion):

git clone git@github.com:adelineyaw/GruntBoilerplate.git

Run the npm install:

npm install

Run Grunt:

grunt