- CODE -
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.
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.
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.
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.
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.
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.
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.
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.