Adobe Analytics Serialize Event With Variable Value
Monday, May 2nd, 2016
NOTE: This post assumes you know a lil somethin’ somethin’ about Adobe Analytics, formally known as Omniture.
Recently I had the need to serialize an event with the value of a DTM Data Layer. Doing an internet search did not bring up anything nor was Adobe Analytics Methods of Event Serialization documentation helpful. Serializing an event is pretty straight forward.
Here’s the syntax for serializing an event:
s.events="[event]:[serial number]"
If you need to serialize an event with the value of a variable, here’s the code for that:
var myVariable = digitalData.someInfo.somethingSpecific; s.linkTrackEvents='event1'; s.events='event1:'+myVariable;
Posted in Analytics, Code, Development | No Comments »
Media Queries For HTML Elements
Thursday, July 17th, 2014
Problem
Recently, I needed to reuse some markup for a component. The markup to be reused was to be put inside a modular, HTML component in a side panel of our application. Alternatively, it was the main content on another page. The problem is that the component needed to respond to the width of the side panel, which only took up 2 columns of an 8 column grid. So, basically I needed that media query to display the “mobile view” inside that 2 column panel. The CSS styles for the mobile view cannot be rendered unless the media queries conditions were met. I used the same markup for the side panel, but without the media queries firing off, the layout was not stacking the way I needed it to (figure 1). My first thought was to have 2 separate HTML snippets, but that’s not practicing modular design, so I started looking for a solution.
figure 1
Posted in Code, Design, Development, Mobile, Web Design | No Comments »
Creating Custom Icon Fonts
Wednesday, July 31st, 2013
Benefits of Icon Fonts
I’ve always been obsessed with icons and hieroglyphs, so as a web developer, I got all excited with the sudden popularity of icon fonts. Using icon fonts, as a replacement for images, has many benefits. The most important, in my opinion, is performance. Because icon fonts are vector and are contained in a single file, they perform better then, say, using a sprite as an image container. Although, both a sprite and a font file make a single HTTP request, the icon font file is usually a lot smaller.
Another important benefit of using icon fonts is optimization for high-resolution screens. The media query is a wonderful thing, but if it can be avoided for swapping images for high-resolution screens, it’s a quick win – one file for all screens and device types! Because icon fonts are vector, they will scale without loss of quality and again, when you compare file size and the single HTTP request, it’s a no-brainer.
With icon fonts, it’s also super easy to change color and size using CSS. As browser support for CSS3 becomes more advanced, you will be able to do all kinds of other cool stuff, like apply gradients, drop shadows and background textures.
Getting Started
There are a few icon font generators out there, but I’m using Icomoon because you can import your own vectors, import other icon font packs, only include the icons you need, use the Private Use Area feature, etc. The best part about Icomoon is that it’s 100% free and open!
The first thing you’ll want to do is go to http://icomoon.io/app/. When you first enter the app, you will see icons galore! If the icons that are needed are on the screen, you can simply click to highlight the icons you want. You must make sure that the Select tool is selected, but I’m pretty sure it is by default. There are two other tools available. The second tool is the Delete feature. When selected, it removes the icon from the icon library that displays on your screen. The third tool, is the Edit tool. When selected, simply click on an icon to edit. You will see a pop-up window (figure 1) with the icon you selected and a few features including Rotate, Flip, Scale and Move. You can also download that icon as an SVG. This is helpful if you want to take it into Illustrator and make changes to the icon that wouldn’t be able to made inside of Icomoon.
Tags: CSS, design, fonts, HTML, icons
Posted in Code, Design, Development, Mobile | No Comments »
Artifact Conference 2013
Monday, June 17th, 2013
Last month I was fortunate enough to attended the inaugural Artifact Conference in Austin, Texas. Artifact is “a two-day, single-track conference for DESIGNERS adapting to the challenge of designing for a MULTI-DEVICE world”. That description was exactly what I was looking for while preparing myself to dive into the world of Responsive Web Design.
It all started with Jennifer Robbins having an idea for a pow-wow to discuss a new workflow for a multi-device web, since our old processes and workflows are no longer cutting it. She tweeted about it and Christopher Schmitt from Environment for Humans obliged within two minutes. Thank you both!
@jenville I’m in!
— Christopher Schmitt (@teleject) August 29, 2012
Tags: conference, Future Friendly, Responsive Web Design
Posted in Design, Development, Mobile, Travel | No Comments »
Considering Browser Reflow
Friday, April 5th, 2013
Back in February I attended the HTML5 Denver Users Group presentation – Making Your UI Scream (Not Your Users) by Wesley Hales. From the title of the presentation you can probably guess that his talk was about website performance. Most of what he had to say about performance, I’ve heard before, but one of the things that Wesley brought up was reflow. I’ve built plenty of websites and performance is always at the top of my list, but I never looked too much into reflow. This was my biggest takeaway from Wesley. Now that performance for mobile websites is a huge consideration, I’ve been interested in other micro-optimizations. Maybe another reason that I haven’t taken reflow into consideration before is because I follow one of Wesley’s rules: Don’t let micro-optimizations weigh you down. Finish the project first.
More On Reflow
Reflow is the process in which the browser calculates the positions and geometries of all the elements in the DOM tree for visual presentation. Reflow is a user-blocking browser operation that can effect the UX, and in this day-and-age of immediate gratification, performance is a very important UX consideration. One of the most powerful things about jQuery is it’s ability to easily manipulate the DOM with methods like .show(), .hide() and .attr(), but in order to minimize reflow you should avoid touching the DOM as much as possible.
Tags: CSS, JavaScript, Performance
Posted in Code, Development, jQuery, Mobile | 1 Comment »
Mobile App Training By Apigee
Sunday, March 31st, 2013
Last Friday I attended a free mobile app training session with Apigee. We used jQuery Mobile combined with PhoneGap to produce a rich native mobile application. The training session was led up by Tim Anglade, Head of Developer Programs & Evangelism at Apigee. Tim has an impressive resume and is completely comfortable speaking in front of a crowd.
jQuery Mobile
The first half of the morning was spent introducing jQuery Mobile followed up by a crash-course in using the mobile web UI framework. Tim also introduced a drag-and-drop WYSIWYG called Codiqa to keep things moving for those unfamiliar with jQuery Mobile. Codiqa is great because you can use it as a prototyping tool and share designs with clients and/or collaborators. Having used jQuery Mobile since it’s first alpha release, I chose to open up TextMate and go to town.
Tags: BaaS, HTML5, Mobile
Posted in Code, Design, Development, jQuery, Mobile | No Comments »
301 Redirect Entire Directory
Thursday, January 24th, 2013
Last nite I was up super late moving my blog from /blog/wordpress/ to root/. It was quite the process, but I survived. One of my main worries is that Google has indexed all of my posts and some have been bookmarked by visitors. Instead of those users and Google indexed links being SOL, I needed a way to redirect all users using the old links to the new directory, the root/. Instead of doing a 301 Redirect on each post, I came up with the the following solution.
Add this snippet to your .htaccess file:
RewriteEngine On RewriteBase / RewriteRule ^blog/wordpress/(.*)$ /$1 [R=301,L]
At a high level, when a URL entering my blog contains /blog/wordpress/, it get’s redirected to root/. The $1 takes everything that was after /blog/wordpress/ and adds it to the end of the new URL (root/).
For example:
http://www.interactivebynature.net/blog/wordpress/2011.09.21.breaking-development-in-nashville now becomes http://www.interactivebynature.net/2011.09.21.breaking-development-in-nashville.
You can test it out here:
http://www.interactivebynature.net/blog/wordpress/2011.09.21.breaking-development-in-nashville
How do you handle directory redirects? Let me know in the comments!
Posted in Code, Development | No Comments »
DenverJS
Monday, January 7th, 2013
This month I attended a new meetup called DenverJS that focuses on, you probably guessed it, JavaScript. Being a client-side programmer in Denver, I’m really excited about this one! In this post, I want to briefly review the 2013 kickoff session at Galvanize.
What about DenverJS?
Straight from their meetup profile:
Focused on developing the Javascript community along the Front Range! We welcome any and all interested in Javascript and related technologies. We will be weighted towards node.js and server-side topics to balance out the already awesome Denver HTML5 group.
Tags: Devner, HTML5, JavaScript
Posted in Code, Development, Miscellaneous | No Comments »
AJAX without jQuery
Wednesday, December 12th, 2012
I like to post about problems that I solve so that I can refer back to if I ever encounter the same problem in the future. This time I needed to make an AJAX request without using jQuery. I’ll be honest… I’ve ALWAYS used jQuery for AJAX. Why wouldn’t you? It’s so easy, plus if you’re already using jQuery, it’s more efficient. I didn’t know where to start, but after some research, I came up with the following:
$('#container').on('tap', '#element', function(event) {
//GET URL FROM TAPPED ELEMENT
var requestURL = $(this).attr('href');
var xmlhttp = null;
if (window.XMLHttpRequest) {
//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
xmlhttp.open('GET',requestURL,true);
//XMLHttpRequest - I GUARANTEE IT!
xmlhttp.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById('container').innerHTML=xmlhttp.responseText;
}
}
//PREVENT DEFAULT BUTTON BEHAVIOR
event.preventDefault();
});
As you can probably see, I AM indeed using jQuery for the tap event and URL gathering. The jQuery version that this post references is v1.7.1. using the .on() method; the rest is old school javascript. Let’s break it down!
Posted in Code, Development, jQuery, Mobile | No Comments »
Future of Web Design NYC 2012
Wednesday, November 28th, 2012
Last month I attended Future of Web Design NYC. The conference topics included everything from The Future of UX and The Future of CSS3 Layout to Typography Best Practices and Culture as a Factor in Digital Design. Some of the speakers were well known, such as Karen McGrane and Chris Coyier, while others were what they were calling “Rising Stars”. Each Rising Star Session that I attended was more than what I would expect from a so-called amateur speaker.
Rising Star – Senongo Akpem
One of the highlights of the conference was visiting with Denise Jacobs. This woman is amazing and has great stories to tell. We ended up talking for about an hour and a half, but it felt like 30 minutes. I saw her speak in San Francisco in 2009 and have been following her ever since, so it was a real treat to visit with her one-on-one.
Posted in Code, Design, Development, Travel | No Comments »