Modern 100% height divs

In 2011 I published a popular article, 100% height Divs with 2 lines of code, which showed how to use JavaScript to get around the difficult layout problem of having two elements side-by-side both at 100% height of their container. In 2012, an update was published which showed a similar solution using jQuery. Both of these […]

ES6 Depth-first object (tree) search

A co-worker recently asked about searching for properties in a JavaScript object, where the properties could be located in unspecified locations within the object (not nested though). This was the job for a depth-first tree search! I don’t get to post about more traditional computer science topics very frequently, so I thought I’d share my […]

Microsoft Planner vs Trello

  My organization has early access to Microsoft Planner through our Office365 account, and I’ve been able to evaluate it compared to what we currently use: Trello. Spoiler alert: This post is fairly critical of Planner — in a Planner vs Trello head-to-head, trello wins hands down. 1. Broken Comments The first thing I tried […]

Recursive spiral art with canvas+javascript

Demo (Hide yo kids, hide yo RAM) See the Pen Fractal with inner circles by Michael Jasper (@mdjasper) on CodePen. Explanation The basic gist is that a circle is drawn, then another circle is drawn on top of it at coordinates centered on a point on the prior circle circumference, with the number of degrees and […]

The ultimate beginners guide to web performance and speed

Make your webpage blazingly fast! This beginners guide includes 14 performance tips (from simple to complex) that will help you speed up any site.

Wrapping an element in Vanilla JavaScript

This is more of a snippet for my own memory — but here is a function to wrap an element (or set of elements with any arbitrary text. jQuery’s solution works well, but there’s no need to include such a heavy library for this small requirement. Additionally, there are many (many) solutions on StackOverflow — […]

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.

Javascript Object – Next and Previous Keys

I often need to perform “next” and “previous” operations on standard JavaScript objects or JSON objects. There is no built-in functionality to do this, so here are some helper functions I’ve created to perform these basic operations:

There is a caveat: The EcmaScript specification doesn’t define an order in which keys are returned in […]

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 […]

Creating your own JavaScript Library – part 2 – Event Handling

In Part 1 of Creating your own JavaScript library, we cover the library essentials: library design, creating a solid object constructor, and adding functions by extending the object prototype. This post focuses on extending our basic library with event handling. Out of the box event handling can be accessed  through Javascript and DOM apis, shown […]

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 […]

asp.net – getting user confirmation before a postback

In asp.net web applications, it is common to have dozens — if not hundreds — of user controls that perform postbacks to the server, actions initiated by a user such as a button click. Often before a save, delete, or other critical action is performed, it is desirable to ask the user if they are […]

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 […]

Full-adders, 32-bit adders in JavaScript

Fascinated by a lecture as part of my CS degree pursuits (there is light at the end of the tunnel!), I  decided to build some digital circuitry beginning with logic gates and ending with a full 32-bit adder. LIVE DEMO So here’s my question: I’ve got a 32-bit adder… What now? Beginning with basic AND, and OR functions, (&& […]