DEV Community: Fabio Franchino

Presenta Lib, js presentation library

Fabio Franchino — Mon, 02 Nov 2020 07:22:29 +0000

Hello there!

I’d like to introduce my very own open-source project, PRESENTA Lib, a javascript library that helps creating expressive web presentations in seconds.

Any feedback are much appreciated

Create a public screenshot service with one click

Fabio Franchino — Wed, 08 Jan 2020 17:27:33 +0000

I wrote a tutorial about creating a service that takes an URL to produce a PNG file from it here

You can skip it completely and deploy with one click (thanks to Heroku) your own service.

Happy screenshotting!

Using Netlify functions to fetch external files

Fabio Franchino — Thu, 13 Jun 2019 06:48:07 +0000

In my recent side project, I had the need to load external files from within the browser, such as an SVG file hosted on a remote server, in order to inject them in the DOM for further manipulation.

It's a nice little UX add-on to avoid the user downloading a particular file and then to upload it on SVGmator. Providing the URL, the software would be able to download and upload behind the scene on behalf of the user.

It's a simple task, but the security model of the browser prevents to fetch, via javascript, external text files that belong to different domains, thus, this simple script is not going to work out of the box:

fetch('https://www.examples.com/myfile.svg')

Welcome Lambda Functions

It these days it's quite common to find services that provide the so-called lambda functions. Briefly, they are (usually Node.js) scripts that can be invoked through an API call, performing a task and returning a result. You don't have to deal with their hosting and other server stuff (indeed they are part of the serverless movement!).

Back to my problem, here the code that accomplishes the mentioned requirement, using Netlify Functions in this case (the Netlify version of the lambda thing).

The browser needs to make a POST request to the lambda, passing a parameter, such as:

const req = await fetch('/.netlify/getsvg', {
   method:'POST',
   body: JSON.stringify({url: 'https://www.examples.com/myfile.svg'})
})
const res = await req.text()

The above code (it's ES6, it needs to be within an async function) will get a raw SVG code that can be eventually injected in the DOM.

The lambda function is a Node.js script that actually fetches the SVG and returns it as raw source:

const axios = require('axios')

exports.handler = async (event, context) => {
   const body = JSON.parse(event.body)

   const res = await axios.get(body.url)

   return {
      statusCode: res.status,
      body: res.data
   }
}

That's approximately all. Please refer to the Netlify documentation about how to use the service.

This article has beed originally published on my blog.

Vue.js dependency dilemma

Fabio Franchino — Thu, 30 May 2019 07:59:01 +0000

During a Vue.js project, I'm asking all the time this question:

Where to insert the Vuex (store) dependency in components?

It's very easy and fast binding a Vuex getter to computed props in components, this way the component in not anymore totally decoupled.

What's your best practice when a little button needs to emit an action to modify a property? You can:

allow the button to commit straight to the store
walk the whole hierarchy component tree in order to reach a root component/view that is enabled to commit the store?

Any hints?

I've launched SVGmator

Fabio Franchino — Fri, 24 May 2019 04:38:31 +0000

A side project and a little tool built in a week.
Here few words about its story.

Develop a JS lib these days

Fabio Franchino — Sat, 13 Apr 2019 16:51:31 +0000

I wrote about my attempt to wrap my head on writing a js lib these days on my blog using Rollup.js and Babel.js of course, making a proof-of-concept in the hope it might be useful to someone.

I'd love to see other attempts from others.

Make a simple client-side search engine in Vue.js with Lunr.js

Fabio Franchino — Tue, 29 Jan 2019 15:25:36 +0000

Hi there, I wrote a little tutorial about the topic the title suggests.

I'm still wondering if a specific part can be improved to avoid possible performance bottleneck on Vue.js.

I'm referring to the last snippet, the implementation related to the integration between the Lunr results and the array needed by Vue.js for list display.
If any Vue.js internal experts out there, maybe might shed some lights.

Thanks