5000 Subscribers on YouTube!!!!!

Thank you for your support 🖤

To celebrate this I want to share what I learned about creating tech videos.

It took me 1.5 years to understand the process!

This is not a perfect one but what I use, and it works for me.

/thread how I creat my tutorials, s...
👣Steps:

·Research
·Test
·Steps
·Re-Test
·Record Demo
·Cut Demo
·Article
·Voiceover
·Edit VoiceOver
·Animations/Blur
·Body Render/Check
·Thumbnail/Green Screen
·Record Outro/Intro
·Body+Intro+Outro
·Edit Intro/outro
·Text/Chapters
·Final render/check
·YT stuff
·Promo

Details↓
1. Research

Before creating my video and article, I document my existing videos on the subject: My main sources are:
- @freeCodeCamp
- @traversymedia
- @dailydotdev

Yes, to create a video I document myself to know as much as possible before starting! ImageImageImage
2. Test

Before I start recording the demo, the demo must work!

So I do a test trying to understand the process and simplify it as much as possible.

A lot of errors are usually done here and this process can take hours but also days, depending on the complexity of the video.
3. Write Steps

Usually, I create an article on Hashnode and start writing the steps I took to achieve the goal.

It doesn't have to be perfect right now, it's more of a list for me.

This is an example for an upcoming video/article: Image
4. Re-Test

Based on the steps that I wrote myself, I start from scratch and try to execute the procedure (no recording yet)

This is a very important step because it precedes the actual recording and serves as the basis for when I will record the screen in the next step.
5. Record Demo

Using OBS or @streamlabs I record the demo.

it's not important to make pauses because I can edit them later.

The preparation I do before is to minimize the attempts here.

Sometimes I make it at the first attempt, sometimes it takes 2/3. Image
6. Cut Demo

Using Da Vinci Resolve, I edit the unnecessary parts of the Demo away, and I start explaining aloud what is going on.

This is the preparation for the writing of the article and the preparation for the voiceover.

There is still no audio in the video Image
7. Create the article on @hashnode

I create the article on Hashnode, taking the pictures of the Demo and expanding the steps one by one
8. Voiceover

To record the Voiceover, which is basically me playing the video and explaining what is going on, I use @getaudacity Image
9. Edit VoiceOver

The Hardest Part!

I align the Demo with the voiceover and the final result is pretty clean, but it takes a lot Image
10. Add Animations/Blur

I add animations between scenes and if necessary blur things we don't want to show in the video, such as passwords and private keys. this sometimes takes longer to edit the video itself! Image
11. Body Render

when I quality level I like, I create a video for what I call the "body", which is the central part of the video, basically, the demo+voiceover properly cut

When I reach this moment I am happy because this is the toughest part.
12. Body Check

I check that the video is of good quality and that there are no errors,

in case there are errors:
- I correct them
- I render it again
- I check it again

all the rendered bodies are versioned, so I can check previous versions in case something wrong happens
13. Create Thumbnail + Green Screen

Usually, I create 2 pics:

- the thumbnail for the video and the article cover for @hashnode and @ThePracticalDev

- a Version for the greenscreen

To do that, I use @canva. I have the pro version and it's worth the money. Image
14. Record Outro

I prepare what to say at the end of the video.

Usually, it's just a goodbye but sometimes I try to add something, an expression, or a Call to Action ("write a comment below, what do you think,...") also related to the specific video

and of course I rem to sub!
15. Record Intro

I add a catchy intro.
A Style I like is to use a slightly different version of the thumbnail and explain things just pointing them on my back!

Of course, to do this I use a Green Screen. I have the @elgato one which is a lifesaver. Image
16. Edit Intro

I put both the intro and the outro in Da Vinci Resolve

Usually, I record the outro first because it's easier, but I edit the intro first. I cut the parts I don't like (not too many cuts btw, and in case I record it again) Image
17. Edit Outro

Usually, it's not super hard but it takes a while.

I also add some transitions between the central body and the final part.

The final video is almost ready at this point. Image
18. Add Chapters and note

I add some simple texts.

These will become the chapters on the YouTube Video

I write them down so later I will add them to the youtube video (not necessary if the video is not very long) Image
19. Final Render

I check the video settings and I render the final video.

I usually use the .mp4 extension and HD, sometimes I go for 4k (probably overkill for tutorials) Image
20. Check Final Video 🍿

I grab some popcorns and I check the final version!

I love this part but sometimes it's like..."ahhhh i have to render it again!" Image
21. We are not done yet! (but almost)

I put the video on YouTube and I wait for the HD version to get uploaded.

Then I add:
- Title
- Description
- Tags
- Chapters
- Subtitles
- Add the playlist, set End Screen and Cards for the video ImageImageImageImage
22. Article Review

After this, I create the final version of the article, just reading it again and fixing what I don't like/change

I link the article to the video and the video to the article, and both of them to the Github repository.
23. Prepare the Promo and publish

We are almost there! I prepare the promo for:
- Twitter
- Linkedin
- Instagram
- @ShowwcaseHQ

Then I publish and put the promo out.

Done ✅ ImageImage

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Francesco Ciulla

Francesco Ciulla Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @FrancescoCiull4

17 Nov
Portainer BE version 2.10 is out.

Some massive improvements here📈

☸️Kubernetes support improved by a ton.
↪ Proxy for container environments.
🌓Dark mode is now supported.
💻Kubectl integration.
💾GitOps integration.
🌸UI improvements.
🔐HTTPS support.

/thread @portainerio Portainer in Dark mode
✅Improved UI

The new UI has been redesigned to reduce clutter and be more intuitive, It's now much easier to navigate inside Portainer.

Kubernetes users should feel it very comfortable.
✅Lightweight GitOps integration

Introduced a lightweight GitOps engine: it enables users to employ 'entry level' CD automation' (no expertise needed).

This allows a user to configure the app's updates:
- automatic
- poll-based
- push-based (webhooks)
Read 16 tweets
11 Nov
A thread about Blockchain:

Summary:
· What is a Blockchain
· Blocks
· Resistance to modification
· Secure by design
· Structure
· Verification
· Robust workflow
· Value Exchange protocol
· Layers

/thread · What is a Blockchain · Blocks · Resistance to modificat
· What is a Blockchain

It's a growing list of records (blocks)

The Blocks are linked together using cryptography.

It's described as an immutable data storage:
- trustless
- fully decentralized
- peer-to-peer
- immutable

It's spread over a network of participants (nodes)
· Blocks

They contain:
- a cryptographic hash of the previous one.
- a timestamp + transaction data.

The timestamp proves that the transaction data existed when the block was published in order to get into its hash.

The blocks form a chain (hence the name).
Read 11 tweets
30 Sep
Why Containerization?

This is the question I get more often.

Over the years I have tried to improve this answer as much as possible.

In this thread with Memes, I will do my best.

a /thread (with Memes)
When an application is developed, we have:

- a development environment
- a production environment.

The application is created, improved, new features are added, bugs are corrected.

All of this happens in the development environment.

No memes? wait for it...
We have the usual problems:

- install dependencies
- understand what the problem is
- add a new shiny feature

And we also write a lot of code...

Once the development is done, developers are happy!
Why? because “It works on my machine”.

What's the problem?
Read 18 tweets
28 Sep
I have been interviewed by William Quiviger in the Official Docker Captain Take 5

Article: docker.com/blog/docker-ca…

/thread format⬇️
How/when did you first discover Docker?

It was 2015. I was curious and started researching. I didn’t have any online presence at the time so I was just studying on my own trying to figure out how it worked.
Now I know many Docker Captains, like @BretFisher @mikesir87 , @GianArb!
What is your favorite Docker command?

This is a nice question! I think I will go with “docker compose up –build”, this is exactly what you need to test your command on your development environment.

Another one is docker exec, it’s very handy.
Read 12 tweets
28 Sep
Resources that link Blockchain to Docker🐳
· Create Ethereum Dapp with React + Docker
· Deploying Blockchain Applications with Docker
· Docker usage in Blockchain
· Docker in Blockchain Projects
· Go Ethereum (Go implementation of Ethereum protocol)

Have more? Share it

/thread
Create an Ethereum Dapp with React and Docker

medium.com/hackernoon/cre…
Deploying Blockchain Applications with Docker

Docker provides great support in quickly getting a blockchain node up and running without the need to individually configure each machine separately.

skeps.com/blog/deploying…
Read 7 tweets
28 Sep
Blockchain Blocks

Blockchain blocks hold batches of valid transactions into a Merkle tree.

Basic concepts to study how they work:
· Hash
· Sign
· Genesis Block
· Fork
· Consensus Algorithm
· Peers and the database
· History
· New entries
· Redundant Computation

/thread
Hash

A hash is a math function that converts an input of arbitrary length into an encrypted output of a fixed length.

· Each block includes the cryptographic hash of the previous, linking the two.

·Blocks are hashed and encoded.
Digital signature

A digital signature is an auth mechanism.
It enables the creator of the message to attach a code that acts as a signature.

· The blocks are usually digitally signed.

· This is to assure the integrity and the data
Read 10 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Thank you for your support!

Follow Us on Twitter!

:(