DEV Community: Miki

Netflix cover generator — A NuxtJS project

Miki — Mon, 22 Feb 2021 16:59:26 +0000

The context

For our podcast there was a need to speed up the YouTube cover creation process. The cover must be interesting, containing the right information and in the right format.

In Schrodinger Hat we only have one graphic designer, Francesca. For this reason we always try to overload it with requests, so as to automate the process as much as possible.

Why Netflix Cover Generator?

Well, if you don’t learn from the best who should you learn from?

We really like the covers of the various TV series and movies in the Netflix catalog. The inspiration comes from their platform. The style clearly refers to that of Netflix albeit with a few changes and less details.

We took as a reference the example of the Netflix title, a testing page dedicated to positioning and footprint.

What is the project really about?

The project is a small application that makes a drag-n-drop editor so as to insert images and edit texts and clutter. It’s fully customizable and doesn’t require too many skills to tweak.

The codebase is Nuxt.js (VueJS framework) and KonvaJS, a JS library for HTML5 canvas interpolation.

The repository is available on our Github.

The demo is available on our demo website.

How does it work?

Using Konva.JS we initialize a Canvas containing multiple layers, just like a Photoshop project. Each layer encloses a portion of the rendering:

background and photos
shade
headings and text
additional layer for additional photos / texts

It is thanks to this structure that it is possible to have a game of effects, such as the gradient in Netflix style.

Nuxt handles the KonvaJS API very well and this makes development and implementation of features easy and extremely fast.

The Canvas element also offers a very important property such as pixelRatio.
This property allows us to export and save our work in high resolution for subsequent modifications or to work with particular formats.

In this way the project can solve many problems.
Obviously everything could be improved, starting from the colors that could be selectable and customizable directly during the creation of a “project”.

We decided to leave it like this, as if it were a PoC, precisely because it could have interesting implications and because it is our favorite theme.

How can I get it to work locally?

The project is portable and can be released anywhere. We have chosen Netlify.
Locally it will be enough to clone the repository from the link above, install the npm modules and start the dev server via Nuxt.

In README.md you will find all the instructions :)

Future implications or future implementations?

We currently use it internally for the production of our podcast YouTube covers, but we do not hide that it could become something else in the future.

We would like to create a kind of tool to speed up UI / UX testing by simply having the various components in Vue / React / * JS so as to try to render them on a canvas (a bit like if we were making a microfrontend) and verify that it is all correct in terms of design.

Conclusion

The project was a lot of fun to do. KonvaJS is very intuitive and the API Reference was really useful. Downloading the YouTube cover in high resolution from this tool saved us a lot of time for each uploaded video!

Our YouTube channel is: https://www.youtube.com/channel/UC1QLLgrGrPmlaFhS0orykCA

The podcast is only available in Italian.

A Github Actions to upload automatically your YouTube video to Anchor.fm

Miki — Sun, 30 Aug 2020 15:11:35 +0000

My Workflow

The Github action name is: Upload Episode from YouTube To Anchor.Fm
and it is available in the Github Actions Marketplace!

We already use this action in our project called Schrodinger Hat, that is an italian live show on YouTube and a podcast on every platform (including Anchor.fm).

This action will download a YouTube video, convert it in an audio file, then upload the audio file automatically to your Anchor.fm account, by setting up your Github repository secrets.

The action is built by a Dockerfile over Ubuntu 18.04.
The action is using youtube-dl, for donwloading the YouTube video, and puppeteer for the second stage (uploading to Anchor.fm).

It is very useful in a scenario where you have a YouTube account and also a podcast over Spotify, Anchor.fm, Play Music, iTunes etc.

Also, Anchor.fm, is not providing any APIs to let any developer integrate their platform. I'm guessing that this action will save time.

Submission Category:

DIY Deployments

Yaml File or Link to Code

Schrodinger-Hat / youtube-to-anchorfm

An automation process to convert YouTube video into audio file and uploading it to Anchor.fm podcast

Youtube to Anchor.fm - An automation tool to publish your podcast

This action will upload an audio file from a given youtube video automatically to your Anchor.fm account.

It is very useful in a scenario where you have a YouTube account and also a podcast over Spotify, Anchor.fm, Play Music, iTunes etc.

In our live show (Schrodinger Hat) we had this necessity. So we built it for the open source community.

Every contribution it is appreciated, also a simple feedback.

How it works

The workflow is using youtube-dl library and puppeteer.

The first one is a npm module used for donwloading the video / audio from YouTube, meanwhile Puppeteer will upload the generated file into the Anchor.fm dashboard (by loggin it).

The action will start everytime you push a change on the episode.json file. Into this file you need to specify the youtube id of your video.

The action…

View on GitHub

Additional Resources / Info

In our live show (Schrodinger Hat) we had this necessity. So we built it for the open source community and we use this action on this repo.

Every contribution it is appreciated, also a simple feedback.

Micro Frontends — From the 00s to 20s

Miki — Tue, 03 Mar 2020 09:14:06 +0000

Micro Front-ends do not carry any magic formula, but a lot of method, many concepts and principles that derive a lot from the architecture of the Microservices.

What are Micro Front Ends?

Micro Frontends, if a definition is necessary, should be defined as architectural concepts and principles of an application . An architectural pattern applicable also to the most critical side of a modern application: the frontend side.

A goal that this pattern has, is the division of a large and complex application (with a complex UI) into many small, independent applications, each suitable for carrying out only the intended task.

Each “micro-application” is independent from the other and this allows us to develop, by keeping the main guidelines of the main application, also with different technology or framework.

Obviously, this has its pros and cons, since then it will be necessary to maintain (also in terms of human resources) the various technologies (such as the various javascript frameworks ). This situation depends a lot on the organization of a company and frmo the project choices.

A point to underline is that all these micro-apps will then be “merged” to form the main application without the end user being able to notice. For the user, everything becomes a Single Page Application.

Clearly a SPA can be included within a parent wireframe , to manage any application lifecycle.

When do you need to use the Micro Frontend pattern?

The implementation of Micro Frontends is an important and difficult decision to take, above all because it may be necessary to rethink some parts and concepts of an existing application to get as close as possible to the principles of the Domain Driven Design.

A practical example, to understand how important it is to divide the application into multiple contexts, could be this: let’s imagine that we have an administration application that manages a school.

As simple as it may be, it hides various pitfalls. In fact, there are many actors involved that require various features. Just think at the pages that the application must have: staff profile, student profile, detail of subjects, electronic register, unofficial results, extra school courses and so on.

As can be seen from the list above, each functionality could refer to multiple actors, but the most important thing that is glimpsed is that each page is as if it were an application in itself. Each page, when viewed separately, is complete and this is where the Micro FrontEnd pattern comes in.

So, why use this approach?

There are various aspects why it would be better to use this pattern in certain situations.

On large-scale projects we know all the dead times of an infinite build, or the cost of a deployment , or the inefficiency of some components that sink the whole project or, again, not being able to find a bug that causes a blocking error in the lifecycle of the entire application.

Based on the basic principles of the pattern, such as:

Decentralization
Automation
DDD
Error isolation
Independence
Agile / Lean method

It is easy to see how many everyday situations are resolved.

Each team that deals with an application will have full responsibility and independence of its functionality. You can even use a Continuos Delivery service!

How can I implement the Micro Frontends pattern?

Micro Frontends must first be studied for each use case, this is as fundamental as it is if you wanted to build a microservices architecture .

There are various ways to develop this architecture and it depends on the project needs. Each portion of the application could be included:

directly from the edge , i.e. who serves everything (like a CDN) : Edge Server Side Include
processing the request on the server side, then returning everything already composed: Server Side Include
composing everything on the client side, starting from a configurator: Client Side Include

If you have a CDN, or a managed cloud server, with the chance of using the Edge Server Includes this could really be an advantage, low maintenance cost, and with a crazy fast speed. In the real world, unfortunately, there are not many services that provide this kind of service, not even AWS.

The choice of the implementation method need to be take only after careful analysis.

Conclusion

The advantages of the Micro Frontend architecture are both architectural and resource side, since each dev could change team, change stack , remaining on the same project while still maintaining an efficient entry cost on a new feature.

A tip: if you want to start implementing this pattern you will need to be very open-minded.

In the next article I will analyze some case studies and some implementation. Stay tuned.