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.com, thehive.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.
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.
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.
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.
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.
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
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.
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, 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.
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.