That Dev Girl Logo

Better Code.
Better Websites.

My name is Joni Halabi and I am a web developer in Washington DC. I create websites and applications for large and small organizations, specializing WordPress, Drupal, and Javascript frameworks.

E-mail me for more info


McCourt School home page

McCourt School of Public Policy @ Georgetown

Drupal 7, Bootstrap 4 (alpha), jQuery, Sass, CSS3, HTML5

View Site
Whitehaven code playground screenshot

Whitehaven Code Playground @ Georgetown

Jekyll, jQuery, HTML, CSS, Bootstrap 4 (alpha)

View Site
SemanticClarity home page


Drupal, Sass, CSS3, HTML5

View Site
Chicago Community Trust home page

Chicago Community Trust

Wordpress, Javascript, SASS, CSS3, HTML5

View Site

Macy's Internal Application

Backbone.js, Marionette, jQuery, Jasmine

Tools and Projects.

AJAX "Load More" Pagination

Add a "load more" button to your archive and search results pages to dynamically load additional posts without pagination or page loads.


Backbone Recursive Navigation

This component is a Backbone.js model and view that can be used to construct an infinitely deep navigation or nested list.


Backgrid Cell Extensions

This library contains a series of Backgrid cell extensions.


Character Counter

Character counter written in jQuery.


Color Sequencing Dialog

This color sequencing widget was developed as a proof of concept to reorder large numbers of content blocks inside a YUI dialog box.


CSS Mega Menu

This simple mega navigation menu is inspired by the many mega menus on retail and other websites.


CSS Menu

This simple navigation menu demonstrates how to create a main navigation menu with drop down sub-menus using just CSS.


CSV to JSON Converter

This script will convert a CSV file to JSON. That's it!


Flickr Place Image

Script that uses the Flickr API to provide placeholder images for web developers and designers.


GitHub to Trello Migration

This page/script allows you to migrate GitHub tickets into Trello.

Live Preview


Facebook profile picture generator app that adds an image of the Earth over your existing profile picture.


Phone Number Conversion

A quick tool to convert plain phone numbers into accessible phone number links.

Live Tool

Pie Frame

A Javascript library that auto-generates responsive D3 charts from Google Sheets. (In progress.)


Static Website Base

My personal standard base code for static websites.


Text Area Limit

This text area limit widget was developed as a proof of concept for implementing a character limit inside a text area.


WooCommerce Tiered Shipping Plugin

This WordPress plugin adds a tiered flat rate shipping option for the WooCommerce plugin.


Word Counter

Simple word counter in jQuery.



Accessible Web Development

We develop websites for everyone to use, so why not make sure that everyone is able to use our sites? We as developers need to plan for accessibility before we write our first line of code.

This talk was given at NoVA CodeCamp in April 2017.

See presentation slides

Introduction to SVG

Notes and example code for my introductory lecture about creating and using SVGs.

See notes on GitHub

Introduction to Ember

Notes and example code for my introductory lecture about using Ember.js.

See notes on GitHub

CSS Navigation

Video lecture tutorial on how to create a multi-level website navigation with only HTMl and CSS.

View on YouTube

var thatDevGirl = {

'Joni Halabi',
'Senior website developer and front-end instructor'
'Washington DC',
'Ready to work on your project!',


Hire me!