close
codedesignresourcescontact
close

- CODE -

Ohh, yyyeah! This is my favorite part. Not just making things look nice, but also making them do things.

While there are many technologies, frameworks, & languages I am proficient with, I will try not to bore you with list and instead demonstrate them cumulatively with examples.
main pane

Pinboard

One of my larger undertakings is a pinboarding app. When I first decided to create this, I didn't fully understand the complex systems required to make such an app.

There are matters such as security, drag-and-drop, masonry layouts, article management, programmatic image manipulation, category management, infinite scrolling, trending, and lazy-loading to name a few.

In other words, I was writing an entire content-management system (CMS).

Though it is still a work in progress, I took a slight detour to build a viewer front-end for the API at faburu.com.

Pin Management

In order to create faburu.com, I needed a fast and reliable way to manage images and articles. Using an article management tab in my pin editor, I can quickly add, remove, and rearrange articles. Without taking copy into consideration, I can easily create a slideshow in just a couple of minutes.

main pane
main pane

Drag and Drop & Downloader

As any app with any image functionality should, my pinboard application accepts drag-and-drop events. At first, I started with several pre-made DND components, but none exactly suited my tastes, so I created my own. The DND component has the ability to accept Internet files and pictures and files dragged in from the Windows File Explorer. If you drop items onto another card, it will add the items to the card collection. If you drag multiple files into the window, a pin will be created with all the files as sub-items.

If DND is not appropriate, you can also paste a URL into the form (launched via an upload indicator) and create a pin using this method.

Fuzzy Searching

For persistent storage, I use Mongo, a powerful NoSQL database. Using a customized text index, one can perform fuzzy searching, for example, finding the word "cow" when the user searched for the term "Cows". The searches are also weighted - giving a higher precedence to terms found in the title, tags, and finally description and other fields.

main pane
main pane

Image Management

When an image is dropped into the application, several things happen behind the scenes.

  • If the image has already been uploaded (determined by taking a hash calculation on the image, not by name), the application will place a reference to the image in the image field.
  • Optionally, any border is removed.
  • For privacy, the EXIF data is stripped (but stored) from the image.
  • The image is reduced to a maximum of 2,000 pixels wide.
  • Image is recognized.

Image Recognition

When receiving a new image, the image is sent to Microsoft via the Image Recognition API for recognition. Microsoft then returns data about the image including a caption, image tags, face locations, and the probability of the image being NSFW. Since all the pin metadata is searched, an pin can later be found even if no title, tags, or description were manually entered.

robot
main pane

Masonry Layout & Infinite Scrolling

It's no surprise that the pinboard application features a masonry layout. Pins are dynamically added as the user scrolls down the pinboard. As this could lead to a large amount of pins being loading into the DOM, I have plans to also remove pins which are no longer in the viewport.


For more information, contact me now.
Perhaps your heroes lie in the likes of Spielberg, Lucas or Scorsese rather than Dickens or Hemingway. In that case, I've made a brief video outlining some of the functionality of the sites I am showcasing.