Curated Top-N List – Faburu.com

Rather than create an entirely new React site here, I would like to present another project entirely written* by yours truly – faburu.com.

The site was created in the style of topix.comthehive.com, and any of a dozen other such sites which just show fairly-random top-x lists and related content.

As a content management system (CMS), it uses another application also written by me, which you can find out more about by scrolling down to the Pinboard section. First, however, I will explain the features of the front-end application.

Well, the app was not entirely written by me. For example, I did not write JavaScript, NodeJS, ReactJS, or the other works of the giants whose shoulders I stand upon. Some accreditation can by found on the resources page.

Performant

This application uses server-side rendering (SSR) as well as three caching methods to deliver a magazine-style React app with a fast perceived-load time.

Faburu.com speed test result
Facebook.com speed test result

Image Pre-loading

Do you despise waiting for images to load? My article viewer makes the obvious assumption that you might want to view the next picture after the current one. Whilst you spend a moment looking at the current picture, the next image in the list is loaded in the background to the DOM.

Smart Categories

There are four buttons on the top of the page which correspond to article categories. However, clicking any category on any card will show all articles in that category. For example, while there is no specific category for signs, visiting faburu.com/signs will return results with that category along with a generic category header.

Image Display Component

Since the dimensions of each image slide vary from one to the next, I designed an adaptive viewer box which displays a blurred and darker background consisting of each image which accommodates any size window width.

Commenting System

Faburu.com uses NodeBB and a loader script to asynchronously load the commenting system only after the client-side JavaScript has loaded.

Demonstration Video

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.

The Ads

I know, no one likes ads. Since getting into web development, I’ve actually disabled  the ad-blocker. Most ads are still annoying, but since I have started designing my own, I have a new appreciation for them.

I have created responsive documents, animations, and dozens of other design projects, but I must admit that creating a fully-responsive and fully-animated HTML document is the most challenging design project I have faced. Animating something for which you don’t know the stage dimensions, aspect ratio, or even whether the stage is portrait or landscape –  truly requires outside-the-box thinking.



CMS/Pinboard – pins.click

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 pins.click is still a work in progress, it demonstrates many of the technologies I’ve learned as a developer.

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.

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.

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, size, or other unreliable tests), 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.

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 eventually lead to a large amount of pins being loaded into the DOM, I have plans to also remove pins which are no longer in the viewport.


My Personal Travel Blog – Bliss.Asia

Though I create most of my SSR (server-side rending) React applications using a tool called Razzle, an interesting technology was emerging called (SSG) static-site generation. Using GatsyGS, I could get very fast web pages from content stored on WordPress, data gathered by GraphQL, and a view created from React.

I later discovered that I could get applications to render almost as fast using SSR and selective caching and without the frustrations of GraphQL, so this is the only SSG project which I developed to maturity.

Soon, I will be moving the site entirely to WordPress simply because it will be easier to both tweak the design and maintain content.

The source code for this project can be found at GitHub.


 Another Demo Site РReact Slider

The site located at slider.computercarl.com has much of the same material presented here, in a different format. That site was programmed entirely in Node and shows some capabilities such at React and Redux, Particle.JS, and an AntD UI switch.