linkedIn badge github badge twitter badge my blog
profile picture

Hi there, world.

My name is Aim Diab and I'm a Full-Stack Web Developer with 10+ years in Websites, Tech and Online Media. This is my portfolio. Contact info and resume here.

Projects

...and what I learned from them.



Occam's Antibot, An anti spam solution

screenshot image of the occam's antibot widget

Overview

Features

Occam's Antibot consists of 4 simple modules of code.

Occam's Antibot, much like the scientific principle it is named after (see Occam's razor), focusses on the simplest effective solution possible. Answering a single question that a human could easily answer in the context of your form. Conversly, a bot or script could not easily answer the question because the question is both based on a split context by virtue of a helper image, as well as specific to your implementation, i.e. every implementation will be different, and therefore spam bots roaming the internet cannot crack all of them when they've cracked one.

The codebase is open-source and available on GitHub here: https://github.com/AimDiab/occams-antibot

Technologies

PHP, Javascript, HTML5, CSS3

Accomplishments

Occam's Antibot is a simple extension of an age-old anti spam technique of having a human answerable question in your form and evaluating the submission for the single correct answer on the server side. I've done this time and time again in my career as a freelance developer and it worked flawlessly to keep the bots out until recently. With the boom of availability in AI and machine learning algorithms, simple questions that humans could answer based on text alone are no longer as ironclad. In order to stump the smarter bots we need to use a somewhat abstract image in conjunction with the question. Neither can give away the answer alone, but together it is clear to the human end user what the answer to the question is.

But it doesn't end there, the real majesty of this solution is in the core design element of diversification. Every developer's implementation should vary and be specific to their user demographics. For example, I made a website for a comic book review website and the question I used was "Who is Batman's sidekick?". A question that the customers of that website could no doubt answer in their sleep, but no bot had been trained to answer a question like that back in 2012.

By diversifying the implementations of the antibot security widget across every single implementation and website, we immediately address the problem that comes with popularity. The more popular your antibot solution, the more likely it will catch the attention of a bad actor and they will train their bot to bypass it. Normally this would mean that one or more bots can now bypass the antibot security across any website on the internet that uses it. However, in this case due to every implementation having a different and unique solution, the bot has only been trained to bypass one implementation and not the antibot security system itself.

Furthermore, if a bot does bypass your implementation and you are getting regular spam, all you have to do is change your question and picture. It just takes a bit of creativity and brainstorming on you and your company's part to come up with another straightforward question that your customers will have no problem answering. The bad actor would have to manually train the bot again which would likely not be worth their time unless they are specifically bent on targetting your website.


ALTR-IMG - An HTML Post-Processor

screenshot image of the alter image application

Overview

Features

A simple user interface that allows the upload of a file for processing. The tool runs on the client side in JavaScript, and therefore does not require an internet connection or server.

The front-end displays a preview of the processed file and the option to download it in the original format with the original tab formatting intact.

The codebase is open-source and available on GitHub here: https://github.com/AimDiab/altr-img

I wrote this in JavaScript so that I can port it to node CLI. It will intelligently detect template files and iterate over them for full code coverage with one straight-forward user command.

Technologies

JavaScript, HTML5, CSS3

Accomplishments

This is my first open-source project. I came up with the idea for this project because I write a lot of HTML and always find it laborious to add alt text attributes to image tags, yet I understand how important they are to web accessibility. For visually impaired users who access the web through screen readers, the alt text is the only context for your images and what they contain. So I wanted to make it easier for developers to ensure that their web pages are accessible. It also helps search engine ranking of your images, which in turn drives traffic towards your website. It’s a win-win situation.


Metamorphosis Tattoo Studio Website

screenshot image

Overview

Features

JavaScript-based, client-side mode toggle for the 2 datasets that use the same markup with different stylesheets to create a unique experience for each location.

screenshot image

I configured a mail server on an Ubuntu LAMP stack for this project. It handles SMTP for the contact form.

screenshot image

Google Maps API integration for location pins in the directions section.

screenshot image

A Mobile and touch-screen friendly image carousel for photos. This one is powered by Ken Wheeler’s Slick JS.

screenshot image

Technologies

HTML5, CSS3, PHP, Javascript, JQuery

Accomplishments

Various API integrations and well-crafted responsive design make this project a powerful example of my work as well as a successful extension of a local business’ online presence. We have seen a great deal of traffic and use of the website for booking appointments following the launch.


3dquik - WebGL, in-browser 3D Model Viewer

screenshot image screenshot image

Overview

Features

Simple mouse-based controls: rotation with left click, zoom with the scroll-wheel and panning with the right click.

screenshot image

Simple file loading using HTTP GET methods and paths relative to the root folder of the application.

screenshot image

Color customization for the shader and/or wireframe color.

screenshot image

Polygon face and vertex counts are displayed in the overhead UI.

screenshot image

This application can runs client-side and requires no installation or web server. By design, it can be embedded into a web page with little effort.

Technologies

WebGL, CSS3

Accomplishments

This was my Senior Innovation Project for my Bachelor’s degree program. Similar to a master student’s thesis. I identified a problem that I was passionate about solving: There was no way to view 3d models on the web without downloading them and having software installed that can open it. I was following the development and adoption of WebGL and I was confident that we could put together a browser-based 3d model viewer using that technology that has all the features you need to properly view a 3d model without requiring any downloads or plugins. The project was an overwhelming success. A San Francisco based startup called Sketchfab took the same idea and ran with it, creating a great platform. This confirmed that I was able to identify a problem worth solving.


Half-Empty Studios CMS and Online Store

screenshot image

Overview

Code Example

See the Pen Half Empty Studios Static Website Design by Aim Diab (@AimDiab) on CodePen.

Please change the zoom on this Codepen to 0.5x for the best view of the full design.

Features

Easy to use and conveniently located front-end content management tools such as create, edit, and delete.

screenshot image

Here's an example of how I achieved front-end editing in my CMS.

PHP:

An html-enabled post editor which I later extended into a WYSIWYG editor with my own tag parsing functions.

screenshot image

Here's the some code examples of my WYSIWYG editor and tag parsing function.

See the Pen A simple WYSIWYG I made by Aim Diab (@AimDiab) on CodePen.

PHP:

An online store running on Zencart with a custom template styled to match the rest of the website.

screenshot image

Technologies

HTML5, CSS3, PHP, MySQL, Javascript, JQuery, Zencart

Accomplishments

I was invited to apply for an internship at the alumni-owned game development company, Half Empty Studios, while I was a Junior in University. A friend had gave me a good referral for my web development expertise and they were looking for someone to build their website. I completed the project in 1 month and went on to design the user interface for the game: Chemical Cubes. (Android/iOS; 2013)


Aliens & Turrets AR App Landing Page

Overview

Features

Here's an example of how I accomplished the background animation:

See the Pen CSS Flying Space Background by Aim Diab (@AimDiab) on CodePen.

A creative Sci-Fi themed "computer console" design with a scrolling space background. A slick multi-page design with social media and app store/google play download links. The design is responsive and everything scales down to mobile screens. Using media queries, the appropriate resolution background image is selected and loaded to keep the animation smooth and the load time low.

screenshot image

The news page populates with the most recent posts from the company WordPress site that are tagged with the "Aliens & Turrets" tag. I query the database using PHP and MySQL and fetch the post titles, descriptions, date and post body for use on this page.

screenshot image

Technologies

HTML5, CSS3, PHP, MySQL

Accomplishments

Created a website that really pops and stands out from most static app landing pages with impressive but lightweight CSS-driven animation. Leveraged WordPress data externally to populate the news feed with relevant updates. Reached over 1000 pageviews with a clickthrough rate of 64% to the app store pages.


HuntAR Wordpress Site

screenshot image

Overview

Features

A navigation bar complete with JQuery-based smooth scrolling to the different sections of the single page design. screenshot image A fresh and unique design with an appealing use of negative space. screenshot image A responsive image carousel/slider displaying several app screenshots. screenshot image A clean and concise footer section with contact and social media links. screenshot image You can view the full design here.

Technologies

WordPress, HTML5, CSS3, Javascript, JQuery

Accomplishments

My C.E.O. wanted to use WordPress so that non-tech savvy members of the team and advertising partners could create and modify content. He was using a publicly available theme purchased from ThemeForest. I was able to convince him to allow me to design and develop a custom WordPress theme for the website so we could meet his requirements while also having an original design that could be shaped to better serve and represent the company.


Online Medical Records CMS

screenshot image

Overview

Features

A secure login system with database-logged sessions in addition to cookies.

screenshot image

Here's a code example of how I accomplished the login system.

PHP:

Appointment scheduling tools.

screenshot image

An appointment calendar with a ready-to-print quick reference table.

screenshot image

Patient medical history records.

screenshot image

A robust search algorithm with auto-complete.

screenshot image screenshot image

Doctor's visit (encounter) forms and records.

screenshot image

Technologies

HTML, CSS, Javascript, JQuery, JQueryUI, PHP, MySQL

Accomplishments

I developed an entire CMS in one month and gained valuable experience in complex database architecture, PCI compliance and SSL. This was my biggest contract when I was freelancing part-time as a junior in high school.


SylfeDreams Online Community

screenshot image

Overview

Features

Every user had a personal character called an avatar which they could customize with different clothes and hairstyles. We used Javascript to layer different .PNG files on top of each other while editing, and PHP to merge all the images upon clicking save into a single .PNG file.

Incentivized posting created user-generated content and fostered a community of active users. By posting, users would earn virtual currency which they could use to purchase items for their character or gift to other users.

screenshot image

Shops where you could spend the virtual currency (called "Sylver") on items for your character. Every user also had the ability to create their own personal shop to resell items they no longer wanted.

screenshot image

PHP-driven luck-based games for some extra entertainment.

screenshot image screenshot image

Customization and personalization are key features that attract users to join and participate in the forums.

Technologies

HTML, CSS, Javascript, phpBB, PHP, MySQL

Accomplishments

This was the first website I created when I was 14 years old. I learned how to work with other people's code from creating mods and custom templates for phpBB. I learned how to run a community, how to market a product and grow the userbase. I learned PHP and MySQL, site hosting and migration, and database management practices. I would later leverage these back-end skills with my HTML and CSS knowledge to become a freelance web developer.


connect with me

linkedIn badge github badge twitter badge my blog

or email me instead

finale

Thanks for checking out my work, I really appreciate it. :)