Font-face Fonts as Symbols Workflow – Free

Adding a custom font to a site as cross compatible way to add scalable graphics alongside type is a great concept. But in the past I’ve struggled to find the right tools for free. Hopefully the following will stay free/available.

Step one:
Type Lite – This allows you to create your symbols/glyphs. Unfortunately it doesn’t allow you to import vectors from anywhere else, such as Illustrator. But I can’t find anything for free that is better. From this you will save out a .TTF

Step two:
Upload your new .TTF to Font Squirrel’s font-face Generator and create kit with optimal settings.

Step three:
Add the example CSS the Font Squirrel gives you to your site and then add your symbols to the site as CSS content (to ensure your markup stays semantic).

h2:after {
	font-family: siteSymbolsRegular;
	content: ">";
	display: inline;
	height: 16px;
	width: 8px;
	overflow: hidden;
	white-space: nowrap;

Converting special characters

This JavaScript library is very useful when you’re trying to display code previews in a page.

Ven Diagram

Saw one, thought I could do better:

Let me know if you think it can be improved.

Non-JQuery script class switcher

Been using the JQuery equivalent for some time. Just had the need to convert it, so thought I’d save it.

It switches a ‘no-script’ class to a ‘script’ class on the HTML element and can be run in the head of the document.

var docElement = document.documentElement;
docElement.className = docElement.className.replace( /\bno-script\b/ , 'script');

JQuery UI Widget Boilerplate

I’m always writing this stuff out again and again so I thought I’d save the most useful stuff for copying and pasting.

The widget

$.widget("ui.aWidgetName", {
    options: {
        requiredOptionOne: null,
        requiredOptionTwo: null,
		optionalOptionOne: null,
        $thisElement: null
    _init: function () {
        var self = this,
            $thisElement = $(self.element); //NOTE: Useful for refining JQuery selectors ie. $(".something", $thisElement)

        if (!!self.options.optionOne && !!self.options.optionTwo) {
            //NOTE: do widgety stuff, but only if required options have been set
        } else {

Accessing an option after init

//NOTE: get
$(".widgetElementSelector").aWidgetName("options", "optionalOptionOne") //NOTE: note the 's' on 'options'
//NOTE: set
$(".widgetElementSelector").aWidgetName("options", "optionalOptionOne", "aValue") 

Custom callbacks

//NOTE: a point where you want to trigger event

//NOTE: when creating a widget
	anEventName: function (event) {
		//NOTE: stuff to do when the event happens

//NOTE: binding after widget init
//NOTE: the concatinated widget/event name is converted to lower case
$(":data(aWidgetName)").bind("awidgetnameaneventname", function () { 
    $(".marketing-video-container object").css({ "width": "0", "height": "0" });

UiDev mode

Nice way to include JavaScript or CSS only for testing or debug purposes. This uses Combres, but you could just use a standard

@Html.Raw(ConfigurationManager.AppSettings["UiDevCodeEnabled"] == "true" ? Url.CombresLink("debugJs") : "")

JQuery filter

Takes a selector or a function to filter your selected elements.

$("*").filter(function() {
    return $(this).css('z-index') > 0 ? true : false;
}).each(function() {
    $(this).css("border", "1px solid red");
    console.log("z-index:" + $(this).css('z-index'));