Front-end Series 3: Templating syntax review

Template syntax families Binding simple values Binding values using Scope Blocks Grammars Parsing Consistency leads to Predictability Comparison of popular templating syntaxes String Insertion Iteration If Templating syntax (and language syntax in general) is very interesting. How a template is written somewhat informs mental-model of how it behaves, and how the data should be structured. The […]

Arabic web design and web fonts

Going a little way towards displaying Arabic is a native way creates a delightful user experience. Arabic Web-fonts, layout, and language CSS help create that experience.

Faded gradient separator bars

Here is a technique for creating both horizontal and vertical separator bars with pure css. See the Pen Sexyline 2 – verticlal by Michael Jasper (@mdjasper) on CodePen Using CSS3 radial gradients positioned off element, just the tip of the gradient is show, giving the line a nice shadowed/faded look:

This technique can be […]

Properly aligning and wrapping image captions

Easily align and wrap captions to images of unknown size with two relatively unknown CSS properties.

Front-end Series: JavaScript debugging tips and tricks

Note: many of these tips are written with Chrome in mind, but are applicable to any modern browser with developer tools. Understand what is happening in your code Set and use Breakpoints Use the Console api De-minify Modify scripts locally Use a Unit-Testing framework 1. Understand what is happening in your code A prerequisite to […]

Front-end Series: Part 1 – Architecture

This is part 1 in the Front-end Series. As a front-end developer at a large organization, I work daily on architecture, performance, automation, localization, and compatibility, and other topics which I will share during this series. Feel free to post topic ideas in the comment section! Large scale web application architecture is much more than a server […]

Software Engineering principles applied to CSS

Some of my thoughts about CSS developent. Think of more? Share in the comments and I’ll add them to this page! Low Coupling The principle of low coupling suggests that distinct parts of an application be as “stand-alone” as possible. To illustrate: A very decoupled program could be available from the command-line first, then a […]

Custom events system in JavaScript – LightEvents.js

Needing an event subscription and publishing system for a HTML5/canvas game I’m creating, I wrote a very light event system. Anything than can call JavaScript (link, button, etc) can raise an event: LightEvents.publishEvent('event name', data); Subscribing to events is equally easy:

Here is the LightEvents object, demo is embedded below

JS Bin

Quick and reliable ad-rotator

In the course of my work, I’ve created and refined a simple ad rotator. It is built in JavaScript, and does not rely on any library, like jQuery, to function.  In my experience, it defeats ad-block, and loads easily on all mobile, tablet, and desktop browsers. The rotator can be included multiple places on one […]

Creating a microformat / richsnippits resume

What are microformats? Microformats are small patterns of HTML to represent commonly published things like people, events, blog posts, reviewsand tags in web pages. Microformats are the quickest & simplest way to provide an API to the information on your website. See what else you can do with microformats. Have you ever searched for a recipe on Google, and wondered how the […]

Horizontal vs. Vertical button groups

Button groups are an important part of user interface design, but choosing their orientation can often be difficult. I’d advocate that horizontal groupings are better in most cases — consider this: Imagine that each element on the page is assigned a “Danger Zone” — and area where within one unit of margin of error,  an […]

Facebook Black Theme (IDE Theme)

Using the Google Chrome plugin Stylish, users can add custom CSS to be applied to any domain. I’ve created a dark CSS theme for Facebook, called FaceBook IDE Within Stylish (found in the Chome menu bar): Write a new style Paste the theme into the box Add the domain “facebook.com” into the “applies to” field […]

Convert <address> tag to Google Maps embed automatically with jQuery

Converting an <address> tag into a Google maps link is something I’ve written about in the past, but user “Moose” was wondering if you can do the same thing, but transform it into an embedded map. Quick answer: Yes! Using jQuery, we search the document for <address> tags,  create some HTML to embed the map […]

JavaScript Constructors

Due to the familiar syntax of JavaScript, it is easy for experienced developers to make blunders without knowing it. One common problem is crafting object constructors. With some simple knowledge and scope checks we can create well formed constructors that function as developers expect.

jQuery List sorting plugin

In the standard course of programming for my job and school, I have occasionally come to the need of a simple function or plugin to numerically sort UL list items.  In the spirit of sharing with the community, here is a jQuery plugin that I wrote to accomplish this. It’s quite simple — just does what it […]

100% height using jQuery

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here http://www.mikedoesweb.com/2016/modern-100-percent-height-css/ I few years ago, I wrote a post about forcing two divs to be equal height — quite a feat if you’ve ever tried!  Since then, a great jQuery […]

Really Simple jQuery Tabs

Bugged by popular jQuery tab content rotators that a bulky, non semantic, to fast/slow, or can’t use custom HTML anywhere you want? Really Simple jQuery Tabs is a jQuery plugin that tries to address each one of those issues. It’s goal is to be as simple and flexible as possible. You can completely rip-out and replace the CSS with your own, changing elements position, styling, etc. It is quite small: at 844 bytes your bandwidth won’t know the difference!

Convert < address > tags into Google Map link using jQuery

Relevant Stack Overflow Question While designing a page template for a University today, I realized that there were many areas of the future pages that would include street addresses: buildings, conferences, offices, ect..  I thought, “Wouldn’t it be nice if these addresses were links to Google Maps?” Then people could easily find directions or set […]

100% Height Div with 2 lines of code

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here http://www.mikedoesweb.com/2016/modern-100-percent-height-css/ EDIT: This post has several code-blocks of JavaScript to keep two divs at an equal height. I recommend the last method, if you are using jQuery — It seems […]