Code is (geek) love!
My name is Joni Halabi and I am a web developer in Washington DC. I create websites for large and small organizations, specializing in WordPress themes and plugins, as well as Javascript applications.
Sites.
Georgetown University Medical Center (2018)
WordPress, ReactJS, Sass, HTML
I currently work full-time for Georgetown University as a Senior Javascript front-end developer in our University Information Services department. I worked with a team of developers, designers, and product managers to create a flexible and responsive themes for the University's school websites.
This site is part of a larger WordPress installation that includes individual sites and sites on a multi-site network. We are in the process of migrating our sites from Drupal and refactored that old theme to work with WordPress 5. I led the development of a series of custom core editor blocks, using ReactJS and the Gutenberg API, to meet our specific content needs. These blocks includes card decks, expandable content, custom list formats, and dynamic news blocks.
Board Game Innovation (May 2017)
WordPress, WooCommerce, HTML 5, CSS, Bootstrap 4 (alpha), jQuery
BGI reached out to me in early 2017 to redesign and replatform their website. I created a new site design based on their logo and existing style guide standards. I also helped them evaluate several ecommerce platforms, including Shopify and WooCommerce, to determine which platform would best fit their needs.
I implemented the design in WordPress with WooCommerce. The site also includes custom functionality, including integration with Braintree for payment processing, integration with Stamps.com to provide shipping options, and support for international pricing and checkout.
Whitehaven Code Playground @ Georgetown (2016)
Jekyll, jQuery, HTML 5, CSS, Bootstrap 4 (alpha)
This site is also part of my work at Georgetown University. I created this site as part of our documentation efforts to encourage Drupal content editors be familiar with Bootstrap code supported in our website themes.
Users can insert commonly used code blocks and immediately see what they will look like in our Drupal 7 theme. (The theme's stylesheet is included on this page.) Users are also encouraged to play around with the code to update classes and add their own HTML as part of their training on the theme and Bootstrap.
SemanticClarity (February 2016)
Drupal 7, Sass, CSS, HTML 5
SemanticClarity reached out to me in late 2015 about relaunching their website in parallel with an initiative to refocus their business strategy.
I worked with them to create a new design based on their current branding and develop a flexible, responsive Drupal theme based on that design. The new site was on the Acquia platform. This site launced in early 2016, but the company no longer has a website, so this work is no longer available.
Chicago Community Trust (May 2015)
Wordpress, Javascript, SASS, CSS, HTML 5
I led the development of this project while working at AMS. Our team of developers collaborated with the designer, managers, and content editors during the course of the project. The site won the 2015 OMMA award for website excellence in the charity/non-profit space.
Macy's Internal Application (2014)
Backbone.js, Marionette, jQuery, Jasmine, CSS
At Optaros, I was the lead front-end developer on a team that re-platformed the UI of Macy's internal product management application as a Backbone application, using Marionette, Require, Jasmine, jQuery, and a custom light-weight CSS grid framework. We are created a library of core UI components to be used by us throughout this application, as well as by other Macy's teams.
My primary function on this team was to create component designs for each section of the application in development. These component designs included the Backbone model structure, necessary REST calls for a given section, and payloads for those REST calls.
Talks.
See What I Mean?: Data Visualization in WordPress
Data visualizations are graphical representations of large and small datasets. Usually, they are charts or graphs that make patterns in these datasets easier to understand. This developer-focused talk demonstrates how to use Google Sheets and SVGs to create a custom Gutenberg block that will display data in a responsive and accessible way.
This talk was given at The Javascript for WordPress Conference 2020 (July 2020). A lightning talk version was also given at WPCampus Online 2020 (July 2020)
Customizing Gutenberg: Lessons Learned at Georgetown
The new Gutenberg editor comes with so many great content blocks. However, what if your editors have special use cases for their content that cannot be easily created with Gutenberg’s out-of-the-box blocks? At Georgetown, we have created a series of custom Gutenberg blocks in an effort to address our editors’ unique content needs.
This talk was given at WPCampus Online 2019 (January 2019).
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 (April 2017) and ConvergeSE (June 2017). A shorter version of this talk was given at edUi (September 2017).
Accessible Development Class
In addition to my Accessible Development conference talk, I have also lead a class for fellow Georgetown staff members about how to develop web sites in an accessible manner.
Design Tools
Slide deck from my mini class for new web developers on different design tools.
Introduction to SVG
Notes and example code for my introductory lecture about creating and using SVGs.
Introduction to Ember
Notes and example code for my introductory lecture about using Ember.js.
CSS Navigation
Video lecture tutorial on how to create a multi-level website navigation with only HTML and CSS.
WordPress Plugins.
Besan Block Plugin
WordPress plugin that adds a post editor block to create charts from Google sheets.
Color Palette Plugin
WordPress plugin that adds a Color Palette block to the post editor.
Gutenberg Autocomplete Component
The existing OOTB Autocomplete component in the Gutenberg API is broken. This is a simple substitute.
ThreePM Block Controller
This WordPress plugin provides site administrators with the ability to turn on and off specific post editor (Gutenberg) content blocks.
Tools and Projects.
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.
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-Only Menu
This simple navigation menu demonstrates how to create a main navigation menu with drop down sub-menus using just CSS.
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.
Mimeocode
A node module to copy boilerplate code for new projects, cloned from other personal Github repos.
Peace
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.
Prototype Helper
A utility site that lists and loads all of my favorite prototyping tools.
Text Area Limit using YUI
This text area limit widget was developed as a proof of concept for implementing a character limit inside a text area.
const thatDevGirl = {
- name:
- 'Joni Halabi',
- description:
- 'Senior web developer and instructor',
- location:
- 'Washington DC',
- twitter:
- '@jonihalabi',
- status:
- 'Hunkering down with my very active and curious toddler. OK for chatting.'
};
Send me something geeky!