Intro

I’ve been blogging passively since 2012, I’ve started in my home language, which is Lithuanian and the blog site was focused on photos and travel only, I did not even bother to write much. I liked coding, UI and producing quality photo content, but writing texts – not much really. The year counter was going plus one and another, when I finally realised it is 2017. At that point I thought that my technological knowledge and views were far ahead from what I’ve demoed within my old blog so I decided it was time to build something new, completely different. Last year was the time when I’ve created my own React application on the top of WordPress JSON API. After couple of years of encouragement from colleagues and friends in UK, when the clock was counting last hours of 2017 – I’ve also launched this blog you’re now reading in English.

Blog app requirements

As I’m web developer since my school days, it wasn’t hard to create a front-end application to consume the API. However I had some of my own preferences and ideas for my photo centric blog which required custom implementations as well as backwards compatibility with my previously built PHP/WP based legacy blog. My requirements were:

  • maintain the same backend based on WP and PHP
  • stay with the same hosting to avoid extra expenses – that was the main limitation forcing me to stick to PHP for backend
  • rebuild my photo gallery plugin so it became small API of it’s own (using same photo files and database)
  • improve image size handling efficiency when loading page (get rid of 3rd party resize script “resizer”)
  • build as many things as possible by myself, instead of using ready-made modal windows etc.

So after these base requirements above the final my personal blog app is expected to be:

  • Front-end React application
  • Custom gallery solution
    • Admin gallery management app based on React too
    • Front-end app fetching gallery info via API
  • Photo resize and watermarking on demand
    • .htaccess based solution to check for cached photo and rebuild if not present
    • my own resize and watermarking script
  • Google maps API use to display picture geo locations on the map
  • Able to be indexed by Google to some extent.

Challenges I faced

When URL is open on React app you don’t know what should you fetch first, the category, the post or something else. Solution: first fetch category index, that is what the menu consists of, and then if the current url is not a category – fetch post with the second request.

Another challenge was adaptive gallery thumbnails layout. I had to collect each image dimensions on image load, as the image dimensions are not stored on the database, then recalculate each picture aspect ratio against the row aspect ratio and make the adjustments to make the layout nice.

Third challenge was and still is SEO. This is not isomorphic application so I call it hybrid application as some things are still rendered via PHP and WordPress. When “noscript” tag contains all the content and all page urls are provided in Sitemap XML Google Webmaster Tools still suggest that my content is not visible to robots. So there is something to spend extra efforts as I move further with the project.

Last challenge was optimising blog browsing experience by caching content which was already loaded. Also do not re-load the content when user navigates back to home page, so there is no need to load more content again to get to the same home page location you have clicked before. Same applies to posts which were loaded while fetching recent posts for homepage – once it’s fetched, you don’t have delay when going into post page. Content appears seamlessly.

Things to improve

  1. Gallery API is not yet very sophisticated, an endpoint for fetching multiple galleries or first image of each gallery could be implemented to optimise home page and category pages performance.
  2. More photo info from EXIF data could be stored in DB, so such info like aperture, shutter speed and focal length could be nicely displayed in modal window along with a picture.
  3.  Gallery layout calculation could be more efficient by storing and getting image dimensions from the database. This would allow calculate layout before images are loaded.
  4. SEO friendliness and page readability for robots could be improved by rendering page replica via PHP. Which is completely inelegant, however given the current hosting limitation would mean getting things done.

Additional APIs used

Apart from the npm libraries used in React application, I have implemented the following scripts onto this web application:

  • Google Maps – for placing photo locations points on the map
  • Google Analytics – for finding out what pages are moor frequently visited and how people prefer using modal window: keyboard or mouse navigation.
  • Facebook – basic possibility to like and share my content

[gist]https://gist.github.com/g86/c614439eed50d7e2957fc3a81647a388.js[/gist]

More technical approach to challenges and solutions can be expected in the second post about how I built my ImpressionsFlow Blog as a single page React application on the top of WordPress.