Trevor Davis

JavaScript Execution Patterns for Non-Web Apps

Trevor — 2013-05-01T20:52:37+00:00

I finally got back to blogging and wrote an article about JavaScript execution patterns, a topic which I recently presented on at the DC jQuery Meetup.

Who Says the Web is Just for Squares?

Trevor — 2013-01-08T21:43:46+00:00

I had some fun building a crazy diamond responsive grid for a project at work. This article explains how I did it.

World Wildlife Fund

Trevor — 2012-12-20T00:45:41+00:00

I had been itching to finally utilize responsive design on a client project, and the World Wildlife Fund presented that opportunity. The site is built on Ruby on Rails, and my role was to build the site with HTML, CSS, JavaScript, and Ruby on Rails views.

Dumbwaiter Chrome Extension

Trevor — 2012-09-28T19:57:34+00:00

I recently got around to trying out Statamic to create a little recipe manager. Yes, I know there are tons of apps out there that do this type of stuff, but I wanted to really be able to control everything.

I also wanted to figure out some way that my wife could bookmark recipes for us, and I didn’t expect her to login to my Statamic install and go through that whole process of adding a new entry. I wanted her to be able to click a button when she was on a site displaying a recipe that she wanted to bookmark, and an entry would then be created. That led me to create my first Chrome Extension, Dumbwaiter.

The basic idea is that you provide a URL that will be opened in a popup window when you click the exntension. Then you provide some JavaScript to do something on the current page you are on, and then some more JavaScript to do something with that data. So in my case, I grab the URL of the page where the recipe is coming from, grab the name of the recipe, and then whatever text is highlighted on the page. So, the process to add a recipe is to highlight the actual recipe, then click the Dumbwaiter icon, and all the data will be pre-populated into my Statamic new entry form.

Here is some example code that I am using, but the options are limitless: whatever you can do with jQuery, you can do with Dumbwaiter.

Retrieve Data Code

var title = jQuery('meta[property="og:title"]').attr('content');
var source = window.location.href;
var img = jQuery('meta[property="og:image"]').attr('content');
var content = window.getSelection().toString();

if(!title) {
	title = jQuery('title').text();
}

var data = {
	title: title,
	source: source,
	img: img,
	content: content
};

Insert Data Code

function makeSlug(str) { 
	str = str.replace(/^\s+|\s+$/g, ''); // trim
	str = str.toLowerCase();
  
	// remove accents, swap ñ for n, etc
	var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
	var to   = "aaaaeeeeiiiioooouuuunc------";
	for (var i=0, l=from.length ; i < l ; i++) {
		str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
	}
  
	str = str.replace(/[^a-z0-9 -]/g, '') // remove invalid chars
	.replace(/\s+/g, '-') // collapse whitespace and replace by -
	.replace(/-+/g, '-'); // collapse dashes
  
	return str;
};

$('#publish-title').val(data.title).focus();
var slug = makeSlug(data.title);
$('#publish-slug').val(slug);
$('input[name="page[yaml][source]"]').val(data.source);
$('textarea.markItUpEditor').val(data.content);

You can download Dumbwaiter here, and let me know if you guys find any creative uses!

jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point

Trevor — 2012-09-11T17:31:52+00:00

I created a plugin, jQuery Stick ‘em, to allow items to be “sticky” but only within a container.

“Advanced”  Templating with ExpressionEngine

Trevor — 2012-07-29T16:18:03+00:00

I was luckily enough to be asked to speak at the DCEERs Day conference yesterday. I was asked to speak about best templating practices, which ended up being a talk about how I use Stash and how I build custom plugins to streamline templating. It was a great day filled with discussion about ExpressionEngine, and it made me look forward to EECI even more!

Sass & Compass:  Never Write  Regular CSS Again

Trevor — 2012-07-25T02:56:53+00:00

I gave a presentation last week at Refresh DC about Sass & Compass. After being introduced to Sass & Compass about six months ago, I can’t imagine writing regular CSS ever again. I was a little hesitant at first, but now I can’t live without it. I posted my slides online, and here is the git repo with all of the code samples.

A Long Time Coming

Trevor — 2012-07-17T01:42:58+00:00

It’s funny how quickly you come to hate your own site. Almost exactly 2 years ago, I launched a redesigned version of my site. After maybe a year, I hated it. But who has time to redo their own site? Apparently it took me 6 months to find the time to finish mine.

Even within those 6 months, I found things that I had started on the site that I hated. My goals were to simplify things a bit, make it responsive, and play around with Sass and Compass. I also wanted to take some of the focus off of my blog, since I really don’t write too much on it anymore (I write almost all of my articles on the Viget Blogs these days).

Since I’m giving 2 presentations in the next few weeks (Refresh DC & DCEERS), I wanted to get my new site up. So I may have rushed a few things, but I’m pretty happy with it. Let me know if you run into any errors.

AIGA Design Continuum Fund

Trevor — 2012-06-16T19:22:09+00:00

The AIGA Design Continuum Fund is a yearly scholarship awarded to a local design student. We took on this project as pro-bono to support the local design community, and my role was to build the front-end of the site and to integrate into ExpressionEngine.

Carr Workplaces

Trevor — 2012-06-16T19:21:15+00:00

We (Viget) had originally built Carr’s site many years ago. We had the opportunity to redesign it and implement a new CMS. My role in the project was to help a little with building some pieces of the front-end, but my main role was to implement the site in ExpressionEngine, which included custom add-on development.

Viget

Trevor — 2012-06-16T19:20:55+00:00

After four years and a few failed attempts, we finally made it a point to redo the Viget website. Our old design served us well, but it was time to step it up to the next level. I was able to step in and implement the ExpressionEngine piece of the site, which included creating custom add-ons as well.

NMS

Trevor — 2012-06-16T19:19:39+00:00

New Media Strategies partnered with us (Viget) to recreate their web presence. They were looking for something new and different. My role on the project was to build the front-end, which included some light canvas work, and to implement the site into ExpressionEngine, which included custom add-on development.

Ultimat Vodka

Trevor — 2012-06-16T19:18:51+00:00

Ultimat Vodka wanted a different type of experience for their site, so I utilized AJAX to give the site a more streamlined experience. I also had to create an age blocker so that only people 18 years and older were allowed to access the site. My role in the project was to build the front-end and to complete the ExpressionEngine integration.

Rumble Games

Trevor — 2012-06-16T19:18:38+00:00

Rumble is an online gaming company that needed some help from us to build their marketing site. My role was to build the front-end with HTML, CSS, & JS, and then pass the build-out onto another Front-End Developer to finish the ExpressionEngine integration.

Background-clip, Text-shadow, & Gradients; Oh My!

Trevor — 2011-12-29T16:58:30+00:00

I have been able to play around with background-clip, text-shadow, and gradients on a few recent projects, and I wrote up some tricks that I have come across.

Notes From Our Default ExpressionEngine Build

Trevor — 2011-09-28T20:34:12+00:00

I put together some notes about Viget’s default ExpressionEngine build in the hopes that you can find some tips and tricks in all of my nonsense.

Is Ajax ExpressionEngine Plugin

Trevor — 2011-09-06T23:14:25+00:00

For a recent project, I needed to detect whether a request was an AJAX request or not. MX Ajax Detect already existed, but I didn’t like that you needed the extra set of tags.

Usage

{if {exp:is_ajax} == "true"}
	OH YEAAAH
{if:else}
	OH NOOO
{/if}

Download

You can find the plugin on Devot:ee and GitHub.

Team Viget

Trevor — 2011-08-13T20:47:49+00:00

Our existing Team Viget site was out of date and was mainly focused on bringing new designers to Viget, and we decided that it was time to make it reflect all of Viget. My role in the project was to build it with HTML & CSS, and to code the JavaScript interactions. Then, I implemented into ExpressionEngine so others could easily add stories. This site works best in Webkit browsers because we were able to take advantage of a lot of experimental properties.

PUMA

Trevor — 2011-08-04T03:10:47+00:00

After building many smaller sub-sites, we (Viget) were finally able to tackle puma.com itself. This required uniting many of those sub-sites we had already build into new standardized templates that would be uniquely “skinned” for each “category” site. My role included collaborating very closely with UX & Design, HTML, CSS, and JavaScript.

HTML5 Elements: An Irresponsible Choice…Right Now

Trevor — 2011-06-27T18:28:43+00:00

I figured it was time to post about a controversial topic that had come up recently. I just don’t see the value in using most HTML5 elements right now.

A Couple of Presentations

Trevor — 2011-05-06T21:24:47+00:00

I’ve given a couple of presentations recently, so I thought I would share them.

Mee & EE: Sitting In A Tree

An internal presentation given to all of Viget to give an overview of EE and why I love it.

Add Some Awesome-Sauce

A presentation given to Clarksburg High School students with a supporting demo site to introduce them to some HTML5 and CSS3 features.

PUMA Golf

Trevor — 2011-03-09T02:49:43+00:00

To continue our work with PUMA, I built the Golf site. This was similar to some of the other PUMA sites that I have built, except for a few new pieces here and there. My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.

My New Best Friend: CSS Generated Content

Trevor — 2011-03-03T18:18:27+00:00

I’ve started to use generated content more and more these days. Here are a couple of examples from a recent project.

So You Want to Use .htaccess files with MAMP?

Trevor — 2011-02-21T13:55:48+00:00

Well, this was easy in the older version of MAMP that I had. You would just drop them in place, and they worked. I was having a problem with something, so I thought maybe there was an updated version of MAMP that would solve the problem. Sure enough, there was. So I installed it and went along my way. Then, I went back to the local version of my site, and it was completely busted.

I finally tracked it down to .htaccess files being ignored. So I opened up my http.conf file and went down to line 378, and sure enough this is what I saw:

<Directory />
    Options Indexes FollowSymLinks
    AllowOverride None
</Directory>

In the older version of MAMP that I had, the default for this value was All. In order to get .htaccess files working in the new version, I just had to change None to All, restart the server, and everything worked normally. Just thought I would share in case anyone else runs into this problem.

ExpressionEngine Config Variables Plugin

Trevor — 2011-02-16T02:23:29+00:00

As I was in the process of moving this site into Git and having a local version, I have been trying to move as many paths as possible into the config.php. One of them included the cache path for image sizer. Since the local and production paths are different, I wanted some way for them to be dynamic. In my config.php file, I am using $_SERVER['DOCUMENT_ROOT'] to set the base_path. I could have enabled PHP in the template and then use the $_SERVER['DOCUMENT_ROOT'], but that seemed like a silly reason to enable PHP.

So I made a plugin that gives you access to everything in the $config array without having to use PHP.

Usage

{exp:config:vars value="base_path"}

To see all possible values, just pass in “all”:

{exp:config:vars value="all"}

Download

You can download from GitHub or Devot-ee. As always, let me know if you run into any issues.

URL Design

Trevor — 2010-12-30T14:54:23+00:00

Great article about designing URLs. It really is an art and is so easy to do so wrong.

Hon-ee Pot Captcha for ExpressionEngine

Trevor — 2010-12-29T12:30:11+00:00

I have a confession to make: I hate captcha. But on the other hand, spam is one of the most frustrating issues ever. So with that being said, I am a big fan of Honeypot Captcha.

I couldn’t find any ExpressionEngine addons that added honeypot captcha functionality for both the comment form and the Freeform module, so I decided to go ahead and create one.

Basic Functionality

This extension validates the EE comment form and Freeform forms to make sure a field that is hidden with CSS is left empty.

Getting Started

Download Hon-ee Pot Captcha
Unzip the folder and copy the honeepot folder into your /system/expressionengine/third_party/ directory.
Go to Add-ons → Extensions and “Enable extension”.
You can customize the field name for the honey pot field and the message a user receives if the field is filled in by going to the extension settings.

Setup

In the Freeform module, go to Fields → Create a New Field. Now create a field with the field name matching the field name in the Hon-ee Pot Captcha settings. The default is honeepot.

Now in your form, add the honey pot field:

<li class="screen-reader">
  <label for="honeepot">Don't put anything here</label>
  <input type="text" name="honeepot" id="honeepot" />
</li>

In my CSS, I have a class to move things off of the page:

.screen-reader {
  display: block !important;
  left: -9999px !important;
  position: absolute !important;
  top: -9999px !important;
}

You can add the same form field to your comment forms as well.

That is all

Hopefully this addition will help to combat some of the spam contact form submissions and comments (even though they get caught by Low NoSpam). You can download the Hon-ee Pot Captcha extension on Github. Let me know if you run into any issues.

PUMA Clever Little Bag

Trevor — 2010-12-01T02:48:30+00:00

PUMA spent a lot of time and money developing a new shoebox that would reduce its environmental impact. The result was a cool concept of a Clever Little Bag. We built a special page to help introduce the bag to the world. My role in this project was to build-out the site and add in the JavaScript functionality.

The one really fun feature was the slide deck of the “big plans” that can be seen all the way at the end of the page. I also built a cross browser custom file input for users to upload their photos.

Custom File Inputs with a Bit of jQuery

Trevor — 2010-11-23T00:52:06+00:00

I needed to create a custom file input when building Clever Little Bag, so I’ve written a tutorial on the Inspire blog discussing that process.

PUMA Time

Trevor — 2010-10-23T20:16:50+00:00

To continue in our engagement with PUMA, we redesigned and relaunched the PUMA time website. I didn’t even know that PUMA sold watches until we started this site! My role in this project was to build-out the many pages and to implement the JavaScript interactions throughout the site. I also worked with our developers to integrate with our custom Ruby on Rails code.

Trevor Davis

JavaScript Execution Patterns for Non-Web Apps

Who Says the Web is Just for Squares?

World Wildlife Fund

Dumbwaiter Chrome Extension

Retrieve Data Code

Insert Data Code

jQuery Stick ‘em: Make Content Sticky on Scroll, to a Point

“Advanced” Templating with ExpressionEngine

Sass & Compass: Never Write Regular CSS Again

A Long Time Coming

AIGA Design Continuum Fund

Carr Workplaces

Viget

NMS

Ultimat Vodka

Rumble Games

Background-clip, Text-shadow, & Gradients; Oh My!

Notes From Our Default ExpressionEngine Build

Is Ajax ExpressionEngine Plugin

Usage

Download

Team Viget

PUMA

HTML5 Elements: An Irresponsible Choice…Right Now

A Couple of Presentations

Mee & EE: Sitting In A Tree

Add Some Awesome-Sauce

PUMA Golf

My New Best Friend: CSS Generated Content

So You Want to Use .htaccess files with MAMP?

ExpressionEngine Config Variables Plugin

Usage

Download

URL Design

Hon-ee Pot Captcha for ExpressionEngine

Basic Functionality

Getting Started

Setup

That is all

PUMA Clever Little Bag

Custom File Inputs with a Bit of jQuery

PUMA Time

“Advanced”  Templating with ExpressionEngine

Sass & Compass:  Never Write  Regular CSS Again