Skip to Main Content

Javascript

Posts regarding Javascript/jQuery

Say Hello to Avataaars.js: Lightweight, Dependency-Free Avatars for the Modern Web 🚀

Posted on by gschoppe

Are you tired of importing heavy React libraries, pulling in massive node modules, or hitting API rate limits just to render a simple, beautiful user avatar?

Meet Avataaars.js! A lightweight, zero-dependency, and fully customizable avatar generator implemented entirely as native HTML Custom Elements (Web Components).

Designed using modern, vanilla JavaScript and ES modules, Avataaars.js runs natively in the browser. It gives you rich customization, smooth built-in animations, serialization, and dynamic chunk loading out of the box—with a minified entry point of only ~31 KB!

Avataaars.js is built using the wonderful Avataaars sketch library by Pablo Stanley.

Let’s take a look at what makes it so special.

(more…)

jQuery.smartCrop – Enabling Truly Responsive, Client-Side Image Processing (Proof of Concept)

Posted on by gschoppe

Demo: http://gschoppe.com/projects/jQuery.smartCrop/
GitHub: http://github.com/gschoppe/jQuery.smartCrop

Let’s face it, responsive images are a real pain in the neck.

As a web designer, I want complete control over picture dimensions at any size; but i am constantly compromising designs to deal with the constraints of user-provided images.  These constraints are well known to any designer: (more…)

jSlabify – jQuery Plugin for Simple & Powerful Slabbed Typography

Posted on by gschoppe

slabify

I ran across Brian McAllister’s slabtext jQuery plugin, and was immediately taken by the concept of algorithmically slabbing text. That, of course, led me to Erik Loyer’s slabtype algorithm. After taking a close look at the algorithm, It seemed a bit complicated to me. The algorithm first creates an optimal slab, based on the width of the box and the font-size of the container, then resizes the result to match the height of the container. The end result has the potential to create very sub-optimal slabs, when height is a factor.

I redesigned the slabbing algorithm, at the cost of a few CPU cycles, to produce a much more optimized slab, when the container height is known. Rather than basing the slabbing algorithm on font-size and a magic ratio, jSlabify bases its slabs on comparing proportions. It renders the text as a single line, and captures the dimensions and the area, in characters, of the resulting box. Then, it calculates the height, in characters (read: row count), necessary to contain the same area (read: number of characters) in a box proportional to the container. The relevant formula is:

eqn

CHECK IT OUT NOW

Demo | Live Demo | Download