I am quite keen on Vue, but not getting much exposire, so getting an introduction to Nuxt I gathered would be quite interesting and I was not really in the mood for coding, but not in the mood for flow TV either.
The stream was absolutely awesome. Nuxt is really cool and it reminded me that I really, really need to do some more Vue.
As I wrote in the introduction, Maya Shavin works as a senior frontend developer with Cloudinary and media serving service. Jason and Maya implemented a basic Nuxt application (they only had 90-minutes) rendering images served by from Jasons account with Cloudinary using different features offered by Cloudinary.
I was not satisfied with the handling of the chosen background image, taking into consideration the responsiveness (or lack thereof) I think is required and my lacking skills in this particular area.
When Maya went over the different features of Cloudinary, it struck me, this this could be quite useful in my case.
I decided to start with some alterations to the CSS, but I expected things would go faster if I had a locally running instance of my website.
Luckily this is quite easy with GitHub Pages, which is using static sites based on Jekyll.
I added a
Gemfile to my repository installed and got it running. Please see one of my earlier blog posts for more elaborate details.
With the CSS changes in place, I got to the picture. I started by uploading. "Sorry". A free high resolution image by the photographer: Tim Mossholder from Unsplash. The background image and I manually manipulated in different graphics programs to get the expression and integration I wanted.
I opened it in a browser window and stated applying different Cloudinary features on the original image to resemble, what I had previous done by hand.
This process is so easy and you can see the result straight away,
The final URL ended looking like this:
Now lets walk through the different parts of the Cloudinary features used.
g_center: the original image is huge, so I started by defining
center, meaning the images would gravitate towards the center of the image when rendered (ref: documentation)
c_fill: this was used in combination with automatic cropping, as suggested in the documentation (ref: documentation)
q_auto:low: I set the quality to
low, reducing the size. The original is very high quality, way beyond what I need (ref: documentation). The original image is: 4.880.246 bytes (4,9 MB on disk), with the dimensions: 7200 × 4800. The image served by Cloudinary to a regular browser with the specified parameters applied is: 20.626 bytes (25 KB on disk), with the dimensions 768 × 512.
e_blur:200: finnally I applied a blur effect, so the image would step more in the background compared to the other elements on the page, (ref: documentation)
The URL was placed in the CSS and replaced the the reference to an image included with the respository.
I iteratively tested rendering of the locally running website in several browser windows at the same time, emulating different devices and finally, just to be sure, on my smart phone and I must say I am quite satisfied.
The final product can been be visited at jonasbn.github.io/perl-date-holidays.
I was very impressed with Cloudinary and was very entertained and inspired by Jason's stream and it will not be the last episodde I watch.