aLittleCode

HTML5, CSS3, jQuery, WordPress, and more

April 10, 2012
by David Cochran
3 Comments

Reposition the Navbar in the Roots Theme for WordPress

In this short video, I’ll walk you through the steps to control positioning of the navbar in the Roots Theme for WordPress.

Covered in this video:

  1. Create a copy of header.php so that you may revert back to the original navbar if desired.
  2. Modify the markup in header.php to remove the class "navbar-fixed-top" and (if desired) wrap the navbar within a div of class "container".
  3. In app.css, adjust the styles for .navbar-inner as needed (such as to remove border-radius).

Relevant Previous Videos

If you’ve missed them, here are video introductions to prior steps, for your convenience. (Pick what’s relevant and helpful!)

Create Dropdown Menu Items

Add your Custom CSS

Don’t miss the full Roots Theme series

This is the first installment of a longer series I’m developing on Roots Theme customization.

Additional topics include:

  • Getting Started
  • Use your custom page template for a static front page
  • More topics in the works …

Check out the full series here.

If you’d like an introduction to Twitter Bootstrap …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.

April 10, 2012
by David Cochran
2 Comments

Create a Custom Homepage with the Roots Theme for WordPress

In previous videos, I have walked through the process of creating a custom page template with a custom loop. In this short video, I’ll walk you through setting a custom page as your site homepage (or front-page).

Covered in this video:

  1. Select a custom page template for a page named “Home.”
  2. In the WordPress admin panel, under Settings > Reading, select this page as the “Static Front Page.”
  3. Remove the template file, front-page.php from the main theme directory, enabling the selected page template to control the page’s markup and layout.

Relevant Previous Videos

If you’ve missed them, here are video introductions to prior steps, for your convenience. (Pick what’s relevant and helpful!)

Create a Custom Page Template

Create a Custom Page Loop

Add your Custom CSS

Don’t miss the full Roots Theme series

This is the first installment of a longer series I’m developing on Roots Theme customization.

Additional topics include:

  • Getting Started
  • Reposition the Navbar
  • More topics in the works …

Check out the full series here.

If you’d like an introduction to Twitter Bootstrap …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.

April 6, 2012
by David Cochran
4 Comments

Roots WordPress Theme Customization: Getting Started

If you’ve not yet seen the excellent Roots Theme for WordPress, take a look. It brings to WordPress theme development the benefits of the HTML5 Boilerplate plus Twitter Bootstrap’s excellent CSS and JavaScript plugins. A WordPress developer’s dream in a tidy package.

This short video series introduces basic steps for installing and customizing the Roots Themes to suit your needs. By basic, I do mean basic. (Advanced users — you’ve been warned. Flee now. I’ll try to cook up something for you later.)

What these videos will cover:

  1. Downloading and installing the Roots Theme (very basic)
  2. Loading dummy content for theme development (from the WordPress theme unit test)
  3. Creating dropdown menu items (requires the creation of custom links)
  4. Creating a custom page template (introduces inc/roots-config.php)
  5. Creating a custom page loop
  6. Customizing the CSS by adding custom styles to app.css (introduces inc/roots-actions.php)

These videos are more-or-less stand-alone. Choose the topic relevant to your needs and jump in.

One more disclaimer: Production quality is a little rough in spots. Rushed to get these out for my university students. My apologies.

1. Download and Install the Roots Theme

2. Need Dummy Content? Here’s How

3. Create Dropdown Menu Items

4. Create a Custom Page Template

5. Create a Custom Page Loop

6. Add your Custom CSS

Don’t miss the full Roots Theme series

This is the first installment of a longer series I’m developing on Roots Theme customization.

Additional topics include:

  • Use your custom page template for a static front page
  • Reposition the Navbar
  • More topics in the works …

If you’d like an introduction to Twitter Bootstrap …

Twitter Bootstrap 101 by David Cochran at webdesign.tutsplus.comAgain this is another basic introduction, but if that’s what you’re after, I’ve got a Twitter Bootstrap video tutorial series underway at Webdesign.tutsplus.com.

April 22, 2012
by David Cochran
0 comments

Fix? MacBook Air USB Ethernet

USB Ethernet Connected

I’ve got a 2010 MacBookAir3,1 — 1.6GHz Core 2 Duo — OS 10.6.8

I’ve had a terrible time getting my USB Ethernet adapter to work. Trouble both at home and at the office. Across 3 different adapters.

I’d get either of these messages:

“Self-assigned IP address”

or

“Ethernet is not connected”

After a couple of months of giving up entirely, I’ve done some research and have found a fix of sorts. Steps I took:

  1. In System Preferences > Networking …
  2. Created a new location, getting off the Automatic location
  3. Clicked the plus in the bottom left to create a USB Ethernet connection
  4. Under that connection, clicked the “Advanced …” button in the lower right
  5. Selected the Ethernet tab (farthest on the right)
  6. Edited the settings under that tab as follows:
    • Configure: changed from Automatically to Manually
    • Speed: 10baseT/UTP
    • Duplex: half-duplex
    • MTU: Standard

I’ll admit I don’t know what these settings do.

But suddenly my USB is recognized and works.

Though none supplied this fix, I gleaned ideas from these comments in Apple support pages, some of which led me in this direction.

Seems utterly strange to me that there are no published fixes rolled into Apple updates.

April 9, 2012
by David Cochran
8 Comments

jQuery Form Validation with Styles from Twitter Bootstrap

jQuery Form Validation ScreenshotThe jQuery Validate plugin by Jörn Zaefferer is a fantastic tool for providing users with immediate feedback while completing a web form. Used by Newsweek and others.

Here I’ve put together a working example, integrated with markup and styles from Twitter Bootstrap’s excellent front-end framework. The demo and sample files include markup, CSS, and JS.

See the Demo

Get the Sample Files

March 9, 2012
by David Cochran
0 comments

Build a Faster HTML5 App with Backbone.js, Zepto.js and Trigger.io

This post from Trigger.io shares a strategy for creating Android and iOS apps from a single HTML5 codebase.

The post walks through:

  • including your JavaScript files
  • using Backbone.js to present a responsive interface
  • using the HTML5 boilerplate to reduce inconsistencies across platforms

Read it here: How to build fast HTML5 mobile apps using backbone.js, zepto.js and trigger.io – Cross Platform Dev Blog

February 6, 2012
by David Cochran
1 Comment

CoffeeScript: A Roundup for Beginners

CoffeeScript Logo

CoffeeScript brings new elegance and efficiency to the writing of JavaScript. It helpfully enforces JavaScript best practices. And it compiles into highly performant JSLint compliant code. The golden rule of CoffeeScript is: “It’s just JavaScript”.

Home Base

CoffeeScript.org

Introductory Overviews

Perspectives on CoffeeScript

CoffeeScript Basics: Introductory Articles and Tuts

CoffeeScripter’s Toolkit

  • js2Coffee.org — quickly convert JavaScript to CoffeeScript, and vice versa
  • CoffeeScript Cookbook — online recipes — “CoffeeScript recipes for the community by the community.”

CoffeeScript Books

What is this list missing?

This is a live list. Please post additional recommendations below!

Related Posts

February 3, 2012
by David Cochran
2 Comments

CoffeeScript Intro Video by Sam Stephenson of 37signals

Sam Stephenson, of 37signals and Prototype.js, gives a 45-minute introductory walk through CoffeeScript, it’s uses and benefits, at the Future of Web Apps London, 2011.

Telling Screenshots from the Presentation

Check out these CoffeeScript / JavaScript side-by-side comparisons. The screenshots are not high resolution, but you can get the idea. When possible, I’ve included where these appeared in the presentation.

CoffeeScript Switch Statement (25:03 – 25:50)

Better JS with CoffeeScript Screenshot

Classes and Inheritance — CoffeeScript (29:34)

Better JS with CoffeeScript Screenshot

Comparable inheritance code in JavaScript!

Better JS with CoffeeScript Screenshot

Comprehensions (27:20 – 27:50)

in CoffeeScript

comparable code in JavaScript
Better JS with CoffeeScript Screenshot

Destructuring: Person, Name Split in CoffeeScript (37:30 – 38:20)

Better JS with CoffeeScript Screenshot

Multiline Strings in CoffeeScript (39:23)

Better JS with CoffeeScript Screenshot

Notes from the Presentation

Random Highlights

  • “The golden rule of CoffeeScript is: ‘It’s just JavaScript.’” (12:57-13:22)
  • “All of the crap” (extraneous braces and semicolons) “just fades away.” (13:30-13:40)
  • “JavaScript gives you so many ways to shoot yourself in the foot, but there is a golden path…. and CoffeeScript forces you to use it.” (13:40-14:50)
  • “I see what I’m actually doing. Code looks clearer.”  (21:00 – 22:44)
  • Compiles to code that is optimized for performance, without reliance upon libraries (27:50-59)
  • “Completely lowers the barrier to writing fast, good code.” (28:00 – 28:16)

How CoffeeScript Enforces JavaScript’s Good Parts

For those familiar with Douglas Crockford’s JavaScript: The Good Parts, Stephenson highlights how CoffeeScript pushes you in that direction:

  1. It’s private by default. Each file compiles into a self-executing closure. No leaking of global variables. (14:50 – 16:00)
  2. No more “var” keyword. Enforces lexical scope. (16:00 – 17:06)
  3. Strict comparisons. No more “==” vs. “===” confusion. CoffeeScript’s “is” keyword is always “===”. (17:07 – 18:05)
  4. Runs anywhere. JSLint compliant. (18:06 – 18:40)

10 Best Features of CoffeeScript

Beginning at 18:40, Stephenson walks through 10 of his favorite features of CoffeeScript, with lots of practical coding examples.

Here is a brief summary of his 10 points:

  1. Functions syntax (18:40 – 20:35) — greatly simplified, with much less typing
  2. Significant white space (20:36 – 22:44) — indentation and line breaks replace braces, semicolons. Stephenson: “I see what I’m actually doing. Code looks clearer.”
  3. Bare objects syntax (22:45 – 24:25) — makes for much greater coding efficiency
  4. Everything’s an expression (24:36 – 25:50) — “Everything has a value.”
  5. Comprehensions (25:51 – 28:19) — each, map, select made simple — and compiles to fast, good code
  6. Classes and Inheritance (28:20 – 31:24) — “CoffeeScript makes it incredibly simple and terse to write classes.”
  7. Bound functions (31:25 – 34:39) — the fat arrow => binds a function definition to its current scope, and can also be used to define instance methods
  8. Conditionals (34:40 – 37:10) — greatly simplifies the writing of conditionals
    • allows you to put a conditional at the end of an expression
    • introduces the “unless” keyword
    • introduces the existential operator : “?” at the end of a line checks to see if a value is undefined or null
    • also the soak operator
  9. Destructuring Assignment (37:11 – 38:06) — a proposal for the next version of JavaScript, already available in CoffeeScript
  10. String Syntax (38:07 – 39:39) –
    • does not require string concatenation
    • enables writing of multi-line strings (with indentation) between triple-quotes

How to Use CoffeeScript

Stephenson ends with a few notes regarding ways to incorporate CoffeeScript into your development workflow. (39:40 – 43:34)

  • CoffeeScript.org includes a tool that shows you exactly how a line of CoffeeScript compiles to JS
  • Compiling via command line
  • Compiling on the fly
  • Rails 3.1 Sprockets — automatically compiles CoffeeScript on the fly
    • 37signals currently uses this to use CoffeeScript everywhere
  • Node.js – Stitch project

Related Posts

January 27, 2012
by David Cochran
0 comments

Comparing Scripts in jQuery and JavaScript: A Comparison by Jeffrey Way

In a recent post, From jQuery to JavaScript: A Reference, Jeffrey Way gives an excellent run-down of how to get scripty things done in three idioms: jQuery, current JavaScript, and legacy JavaScript.

It’s an outstanding read.

Item number one gives a great introduction to JavaScript’s new Selectors API, which approximates jQuery for its ability to query the DOM in CSS-selector style.

So for instance, compare these three ways of doing things:

Selecting Elements

jQuery

$('#container');

JavaScript

var container = document.querySelector('#container');

Legacy JavaScript

var container = document.getElementById('container');

Or consider this:

Add, Remove, and Toggle Classes

jQuery

$('#box').addClass('wrap');
$('#box').removeClass('wrap');
$('#box').toggleClass('wrap');

JavaScript

var container = document.querySelector('#box');
container.classList.add('wrap');
container.classList.remove('wrap');
container.classList.toggle('wrap');

Legacy JavaScript

var box = document.getElementById('box'),
 
    hasClass = function (el, cl) {
        var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
        return !!el.className.match(regex);
    },
 
    addClass = function (el, cl) {
        el.className += ' ' + cl;
    },
 
    removeClass = function (el, cl) {
        var regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
        el.className = el.className.replace(regex, ' ');
    },
 
    toggleClass = function (el, cl) {
        hasClass(el, cl) ? removeClass(el, cl) : addClass(el, cl);
 
    };
 
addClass(box, 'drago');
removeClass(box, 'drago');
toggleClass(box, 'drago'); // if the element does not have a class of 'drago', add one.

Credit: These examples are from the post, From jQuery to JavaScript: A Reference, by Jeffrey Way.

Which is better? — or Which is better When?

As Way points out, the question is not necessarily “Which is better?” but “Which is better when?” JavaScript’s new Selector API goes a long way toward making vanilla JavaScript nearly as easy to work with as jQuery. In cases where we can get things done without loading the jQuery library, our sites will travel lighter and perform a bit snappier.

They take-away: The jQuery library is fantastic when you need it, but in each case, we should pause to ask: “Do I really need jQuery in this case? — Or can I get it done in straight JavaScript?”

Links

Top

Bad Behavior has blocked 1359 access attempts in the last 7 days.