Multiple 4K Monitors for Efficient Multitasking and Increased Work Productivity

As a web developer, I absolutely need multiple windows open – maybe more than for people in other professions. Due to the pandemic, like many people, I had to create a home office. I could have used the unused loft upstairs but I didn’t know I’d still be working from home after 2 years and I like being close to the kitchen so I converted the dining table into my work desk. Since I had some old monitors lying around, I used them to have multiple windows open. I thought we’d all just work from home for a month or two max so it didn’t seem worth it to spend money on fancy monitors.

April 2020

As the pandemic progressed, I got a work allowance to buy office equipment for work from home (WFH). I badly needed an ergonomic and comfy work chair. I also got an ultrawide monitor to have even more screen real estate.

This photo does not show the upgraded chair.

I thought about using my 65″ inch LG OLED TV as a monitor but the screen was WAY TOO BIG!

I then read an article about people using 43″ and 50″ TVs with a low input delay as their work monitor and how happy they’ve been. I got the Samsung 50″ ‘The Frame” TV at a 50% open-box discount at BestBuy. As much as it was nice reading code on it, anything on the left and right was uncomfortable to read.

I could have tried the 43″ model of the same TV but it cost more than I wanted to spend. Plus, I wanted more windows open at the same time. Fortunately, BestBuy had some open-box 32″ Samsung UJ59 4K monitors. Regular price: $340. Sale Price: $300. Open box price: $250 and $195 (both looked brand new even though they were open box items). After being tired of a messy dining room / office where I could see the back of my monitors, I decided to rearrange the dining room and get a more suitable desk.

I know what you’re thinking. Why is the laptop halfway off the desk. Since with two 4K monitors, I didn’t think I needed the laptop screen but, how can I resist an extra screen? I’ll get a drawer unit the same height as the desk, put it on the left side of the desk, and put the laptop on it. More importantly: why in the world didn’t I buy two 4K monitors before? This setup makes working so much better I regret not doing this sooner. Now, this setup works for me but you may need to adjust some settings to better suit yours.

Setting up the monitors

Before you go out and buy a bunch of 4K monitors, make sure you laptop / computer supports them. I have a MacBook Pro (2019) and according to Apple, I can run multiple 4K monitors.

My particular Samsung UJ59 monitors don’t have USB-C input – only HDMI – so I have to use a USB-C to HDMI adapter.

Monitor Layout

On MacOS, I chose to have my laptop screen be my main display and my 32″ monitors both be extended displays. You can then drag the squares representing screens to match your physical layout so that when you drag your mouse (I use a trackpad) off the edge of a screen/monitor, the pointer seamlessly appears on the adjacent screen, as you’d expect.

Monitor Resolution

4K screens/TV support a native resolution of 3840 x 2160 pixels. But, you may find that reading code or blog posts difficult when the font is too small. There are two things you can do to address this:

Scale down the resolution

You can have your monitor show a picture at a lower than 4K resolution such that everything appears bigger.

I set my laptop as the main display with a default resolution
The first 4K monitor is set as “Extended display” with a default (4K) resolution
The 2nd 4K monitor is also set as “Extended display” with a default resolution. When I click the “Scaled” option, you can see the default resolution is 3840 x 2160, which is 4K.

Below are lower scaling options.

The scaling option right below 4K is 3360 x 1890 px.
The lowest scaling option is 1920 x 1080 px.

Increase the font size of some or all browser tabs / apps

If you’re in 4K mode and you feel the font is a bit too small to read, you can increase the font size of just that window or browser tab. I use VisualStudio Code as my code editor and I find that increasing the font size makes for a much more pleasant coding experience. Plus, since I have laid out my screen such that VS Code takes up the full height of the screen, I can still see a ton of code without having to scroll a lot.

Conclusion

One survey indicated that slightly more people preferred a single 4K TV as their monitor than people who prefer multiple 4K monitors. This all boils down to your use case. If you don’t need a million windows open like I do, then a single 43″ 4K TV may be better for you (don’t get a 50″ TV – it’s too big if you are sitting 2-3′ from the screen). Otherwise, multiple 4K monitors is definitely the way to go (with some custom setting adjustments to suit your viewing comfort).

Update

The desk in the picture above was from IKEA. It was too wobbly so I replaced it with this Husky one from Home Depot. The side drawer unit is from IKEA.

Generate a Static Website with 11ty (Eleventy)

This post will describe how to create a simple website with the NodeJS-based static site generator (SSG), 11ty (Eleventy). According to this article. 11ty is the 3rd fastest SSG.

I’ve tried Hugo. It’s definitely fast and easy to install. But, I found that it wasn’t flexible in how it could be used and not as intuitive as Jekyll and 11ty. I’ve also tried Jekyll. It was a bit tricky to install on Windows. It would sometimes get stuck or not detect file changes and therefore not build and reload them in the browser. LiveReload didn’t work, for me at least. 11ty was super easy to install, as you’ll see below. The build time definitely goes up with the number of pages. It’s super flexible and customizable and intuitive to use. And, it supports a bunch of templating engines like HandlebarsJS, Liquid, Nunjucks, EJS, and even plain JavaScript.

Here’s a step-by-step guide to getting started with 11ty to build a simple website from scratch. This tutorial was done on Windows.

Install the latest version of Node JS

https://nodejs.org/

Verify Node JS installation

If you’re on Windows, open the Command Prompt and run node -v to check the version of Node installed.

Optionally, install the latest version of PowerShell

If you’re on Windows, you can use the default command prompt. Or, you can use PowerShell. If you don’t have the latest version of PowerShell, you can download it from here.

Instead of the default command prompt (cmd.exe), I’m going to use PowerShell. Open PowerShell and run node -v to check your version of Node installed. If PowerShell doesn’t find Node, then check that Node is in your path.

Open System Properties

Click Environment Variables

Under System variables, click Path.

If there is no path to the nodejs folder, add it as the last item. 

If it exists but comes before the PowerShell path, then move it down below the PowerShell path.

Close and reopen PowerShell and rerun node -v.

Create website folder

mkdir eleventy-poc
cd eleventy-poc

Create a package.json

npm init -y

Install eleventy and save it in package.json

npm install --save-dev @11ty/eleventy

Run eleventy (verify if runs)

npx @11ty/eleventy

Install HTML 5 boilerplate

Go to https://html5boilerplate.com/ and download the latest version.

Extract and copy all files to the website folder (eleventy-poc) EXCEPT for package.json and package-lock.json. You don’t want to overwrite the 11ty dependencies that were already saved there.

Create an _includes and _layouts folder

Add the following code to 

  • Specify folders that will be copied to the build output folder
  • Specify which folders contain include and layout files

Include files are reusable code snippets like components, e.g. header, footer, etc.

Layout files are files that determine a page’s layout. Layout files can wrap other layout files.

module.exports = function(eleventyConfig) {
    // Output directory: _site
 
    // Copy `css/` to `_site/css`, etc
    eleventyConfig.addPassthroughCopy("css");
    eleventyConfig.addPassthroughCopy("img");
    eleventyConfig.addPassthroughCopy("js");
 
    return {
        dir: {
        // ⚠️ These values are both relative to your input directory.
        includes: "_includes",
        layouts: "_layouts"
        }
    }
};

Update links

The doc folder contains instructions on how to use HTML5 Boilerplate. You may delete it if you want. If you keep it, update the links (search and replace) TOC.md to /doc/TOC/ so that when the markdown files are built as HTML files, the TOC links will work.

Also, in TOC.md, let’s do the same with the local links, e.g. 

  • “usage.md” becomes “/doc/usage/” 
  • “faq.md” becomes “/doc/faq/”
  • etc

Re-run Eleventy when you save 

npx @11ty/eleventy --serve

This runs a local web server and loads BrowserSync to auto-reload the browser when you save. 

Notice in the output below that a _site folder was created containing 10 HTML files that were built and 14 files were copied. The files that were copied were from the css, js, and img folders as specified in the config file.

The output folder structure looks like this

We can browse to http://localhost:8080/ and see the home page. If we go to http://localhost:8080/doc/TOC/, we’ll see the HMTL5 Boilerplate documentation in HTML format (converted from Markdown).

Create a default layout

At this point, we have our boilerplate home page (index.html) file.

Let’s create a header, footer, and sidebar containing nav links, and a main content area, like most websites have.

<header>
    <p class="logo">ABC Company</p>
</header>
  <div class="content-wrapper">
    <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/about/">About</a></li>
        </ul>
    </nav>
    <main>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, velit provident sed cum repellendus repudiandae ut mollitia animi. Voluptates expedita corporis pariatur sed quam. Ducimus fugiat quos eum aut eaque?</p>
    </main>
</div>
<footer>
    Copyright 2022
</footer>

I’ll also add some basic CSS to main.css to style the page.

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
header,
footer {
    padding: 1em;
    background-color: #70a9dc;
}
.logo {
  font-size: 2em;
}
.content-wrapper {
  display: flex;
  min-height: 50vh;
}
main {
  padding: 1em;
}
nav {
  background-color: #efefef;
  padding-right: 3em;
}

Now, 11ty (BrowserSync) will auto-reload the page and we’ll see

Let’s create a layout from this index.html page.

  • Copy index.html to _layouts/default.njk (this will be a Nunjucks template)

In _layouts/default.njk

  • Prefix all relative paths with “/”, e.g.
    • css/normalize.css becomes /css/normalize.css
    • js/main.js becomes /js/main.js
  • Copy the <head> code block to _includes/head.html
  • Copy the <header> code block to _includes/header.html
  • Copy the <nav> code block to _includes/nav.html
  • Copy the <footer> code block to _includes/footer.html
  • Copy all of the <script> tags to _includes/scripts.html
  • Replace the <head> code block with {% include "head.html" %} to include the head code
  • Replace the <header> code block with {% include "header.html" %} to include the header code
  • Replace the <nav> code block with {% include "nav.html" %} to include the nav code
  • Replace the <footer> code block with {% include "footer.html" %} to include the footer code
  • Replace the <script> code with {% include "script.html" %} to include the scripts
  • Replace the lorem ipsum text with {{ content | safe }}. This content variable will be replaced with content from pages that use this template, like the home page.

This is how the files should look.

The contents of default.njk should look like this.

<!doctype html>
<html class="no-js" lang="">

{% include "head.html" %}

<body>
  {% include "header.html" %}
  <div class="content-wrapper">
    {% include "nav.html" %}
    <main>
        {{ content | safe }}
    </main>
  </div>
  {% include "footer.html" %}
  {% include "scripts.html" %}
</body>

</html>

Replace the contents of index.html with the following.

---
layout: default.njk
---
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis, voluptates distinctio fuga culpa praesentium quis repellat, mollitia vel repudiandae suscipit officiis tempora atque ratione quidem quo facere reiciendis, iste sit!</p>

The first section between the triple dashes is the front matter. Here, we tell 11ty to use the default.njk layout for this page. 

The content after the front matter will go where the content variable
{{ content | safe }} is in the layout.

If we look at the home page in a browser, we’ll see that it looks exactly the same as before, except we’ve templatized the home page using a layout and include files. 

Create another page

Let’s create an About page. We have 2 ways to do this:

Method 1: 

Create a file at /about.html.

11ty will convert this to a page at /about/index.html.

Note that any file that is named other than index.html will have a folder created with the same name as the file, e.g. abc.html becomes /abc/index.html.

Method 2: 

Create a file at /about/index.html.

The content of each file can be

---
layout: default.njk
Title: About
---
<h1>{{ title }} </h1>
<p>This is the about page.</p>

In this case, we added a front matter variable called title and output it using curly bracket notation. 11ty is processing these files as Liquid files using the Liquid templating engine.

If we go to http://localhost:8080/about/, we see:

You can also rename about.html to about.njk to use the Nunjucks templating engine. 11ty will process the file according, as you can see in the console.

11ty supports many templating languages including HTML, Markdown, JavaScript, Nunjucks, Liquid, Handlebars, Moustache, EJS (Embedded JavaScript), HAML, Pug, and custom.

Note: You can only choose one method above. If you do both, you’ll get a conflict error, understandably.

Add files for git to ignore

There are some files/folders we don’t want git to track. The HTML5 boilerplate already includes a .gitignore file. Edit it and add “_site” to the list like this. We don’t want to commit the built files to git. Files will be built during deployment.

# Include your project-specific ignores in this file
# Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
# Useful .gitignore templates: https://github.com/github/gitignore
node_modules
dist
.cache
_site

Add the local repo to GitHub

We’ll follow these instructions on how to add our local repo to GitHub.

Create a new repository on GitHub.com. To avoid errors, do not initialize the new repository with README, license, or gitignore files. You can add these files after your project has been pushed to GitHub.

Initialize the local directory as a git repo. Run git init -b main in our project folder. This will create a hidden .git folder.

Add the files in your new local repository. This stages them for the first commit.

git add .

Commit the files that you’ve staged in your local repository.

git commit -m "First commit"

At the top of your repository on GitHub.com’s Quick Setup page, click to copy the remote repository URL.

In the Command prompt, add the URL for the remote repository where your local repository will be pushed.

$ git remote add origin  <REMOTE_URL> 
# Sets the new remote
$ git remote -v
# Verifies the new remote URL

Push the changes in your local repository to GitHub.com.

git push origin main

Go to your repo on GitHub and see your files there.

https://github.com/javanigus/eleventy-basic-site

Host site on Netlify

Now, let’s host our site for free on Netlify. Create a Netlify account and add a new site by importing an existing project.

Connect Netlify to GitHub and choose a repo. If you don’t see your repo, configure Netlify to be able to access some or all repos in your GitHub account.

Netlify will analyze your site and suggest default build settings. As you can see below, Netlify correctly detected that my site was built using 11ty so it populated the “Build command” and “Publish directory” using the default Eleventy values.

Click “Deploy site’ and wait a minute or two for your site to be deployed. Netlify will clone the repo, install any dependencies as listed in the package-lock.json file, run the Eleventy build command, and host the built files. You will then see how long it took to build the entire site and be provided a free Netlify URL where you can view the live site. In this case, the entire build took 37s.

The free Netlify URL generated is https://enchanting-malabi-4c2a4e.netlify.app/

Going to that URL, we see the same site as we saw on our local dev machine.

Set Up a Jamstack Develop, Build, and Release System Using GitHub, Hugo, and Netlify

Jamstack is the new standard architecture for the web. Using Git workflows and modern build tools, pre-rendered content is served to a CDN and made dynamic through APIs and serverless functions. Technologies in the stack include JavaScript frameworks, Static Site Generators, Headless CMSs, and CDNs.

Traditional Web (left) vs Jamstack (right)

Jamstack benefits

Jamstack offers many benefits over traditional web stack.

  • Security
    Published text files are HTML, CSS and JavaScript only. No server-side scripts like PHP
  • Scalability
    As website traffic grows, scaling is much easier when your website amounts to a bunch of static HTML files that can be served from a CDN.
  • Performance
    Static HTML files don’t require server-side processing. Files can be served from a CDN.
  • Maintainability
    It’s much easier to maintain a simple server that hosts static files rather than application and database servers. The heavy lifting of building the static files is done before deployment resulting in stable production files.
  • Portability
    Since Jamstack sites are pre-generated, the production files are simple static files which can be hosted anywhere on any simple host.
  • Developer experience
    Jamstack sites are built on widely available tools and conventions making it easier for developers to learn and develop.

Learn more

Jamstack is a term that was coined by two developers who pioneered the architecture while working at Netlify. This post will explain how to set up a web development, build and release system using the following components

  • Hugo (static site generator)
  • GitHub (version control)
  • Netlify (CI/CD + serverless web hosting)
  • Netlify CMS (content management system)
  • imageKit.io (image optimization and CDN)

Web development workflow

Let’s say you have a website at example.com. This workflow will depend on having a GitHub repo with 2 branches (main and develop) and 2 sites hosted on Netlify, one for production (www.example.com) and one for staging (staging.example.com). The staging site will have site-wide password protection using an option in Netlify.

The workflow using this setup is very common:

  1. Edit web page files locally, e.g. using VisualStudio Code
  2. Commit and push changes to develop branch in private GitHub repo
  3. Any commit to the develop branch in GitHub auto-triggers a build to generate and deploy static files to a staging site in Netlify (staging.example.com)
  4. Preview changes in a password-protected, external staging URL
  5. Merge and push changes from develop branch to main branch. This will auto-trigger a build to generate and deploy static files to a production site in Netlify
  6. View published changes in production (www.example.com)

Note

  • If you need to make an edit, you can make it directly in GitHub as well.
  • If you’d like to provide a CMS for your pages (usually for non-technical people), you can use Netlify CMS.

Create GitHub repository and branches

Let’s first create a GitHub repo. We’ll call it example.com and make it private since we don’t want competitors seeing our potentially confidential information. Within this repo, we’ll have 2 branches.

  • main (for www.example.com / production)
  • develop (for staging.example.com / development)

GitHub’s default branch is called main so we’ll use that name for the production branch.

Install Hugo

Since I’m writing this post on a Windows 11 laptop, I will follow the instructions here. For other OSs, follow the instructions here.

  1. Create some folders (C:\Hugo\Sites and C:\Hugo\bin)
  2. Download the Windows executable from the Hugo Releases page (in my case, I’ll go with the extended version to make sure I have all the features I may need – hugo_extended_0.97.3_Windows-64bit.zip)
  3. Extract the executable to C:\Hugo\bin. You will end up with 3 files like this.
  1. Add the executable to the PATH
    1. open Windows PowerShell
    2. change to the C:\Hugo\bin folder
    3. append C:\Hugo\bin to the existing PATH by entering
      $Env:PATH += ";C:\Hugo\bin"
  1. Verify the update by outputting the PATH value using the command
    Write-Output $Env:PATH
  1. Verify the executable by running the command hugo help. You should see output like below.

Create a new site

Now that Hugo is installed, we can use it to create a new site. Run the following commands.

cd C:\Hugo\Sites
hugo new site example.com

You should then see output indicating a new site was created.

In the Hugo/Sites folder, you should see files and folders as shown below.

Here’s what the folders are for.

├── archetypes (templates for different content types)
├── config.toml (top level configuration file)
├── content (this is where content goes in HTML or markdown format)
├── data (for local and remote dynamic content, e.g. JSON data)
├── layouts (layouts for pages (list pages, home page) and partials, etc)
├── static (images, CSS, JavaScript, etc)
└── themes (for themes)

Install a theme

Now, you can browse themes, install one and make customizations to it. In my case, I will create a theme from scratch.

Create a new theme

Run the command hugo new theme exampleTheme to create a theme called “exampleTheme”.

C:\Hugo\Sites\example.com> hugo new theme exampleTheme
Creating theme at C:\Hugo\Sites\example.com\themes\exampleTheme
C:\Hugo\Sites\example.com>

This will create an exampleTheme subfolder in the themes folder. The folder structure should look like this:

.
├── archetypes
│   └── default.md
├── config.toml
├── content
├── data
├── layouts
├── resources
│   └── _gen
│       ├── assets
│       └── images
├── static
└── themes
    └── exampleTheme
        ├── LICENSE
        ├── archetypes
        │   └── default.md
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   │   ├── baseof.html
        │   │   ├── list.html (for the list page / index of blog posts)
        │   │   └── single.html
        │   ├── index.html (home page)
        │   └── partials
        │       ├── footer.html
        │       ├── head.html
        │       └── header.html
        ├── static
        │   ├── css
        │   └── js
        └── theme.toml

Note the following files:

  • themes/exampleTheme/layouts/index.html
    this is the home page layout
  • themes/exampleTheme/layouts/single.html
    this is the layout for a single page type, e.g. blog post
  • themes/exampleTheme/layouts/list.html
    this is the layout for a list of page types, e.g. blog posts

When you start development, you want to run hugo server to have Hugo detect file changes and reload your local browser for you. In the output below, we see that the local server is at http://localhost:1313. If I go to that URL, I will see a blank screen since I haven’t created any web pages yet.

Notice also in the output that there are some warnings because we’re missing some files. They will be fixed.

Edit config file

I’m using VisualStudio Code to edit files. First, I’ll update the config.toml file by changing the base URL and title. In order to use the new theme we created, we need to reference it in the config file by adding theme = 'exampleTheme' to it.

Most websites have a main menu for navigating from one page to another. The menu links are common to all pages. Let’s define them in the config file by adding the following to it.

[menu]
  [[menu.main]]
    name = "Home"
    url = "/"
    weight = 1
  [[menu.main]]
    name = "Posts"
    url = "/posts/"
    weight = 2
  [[menu.main]]
    name = "Tags"
    url = "/tags/"
    weight = 3

Layouts & partials

If you open the theme’s layouts folder, you’ll see some default layouts and some partials layouts. The base layout (baseof.html) is the parent-most layout. As you can see in the screenshot below, the base layout has

  • some partials
  • a main block

The list (list.html) and single (single.html) layouts will use the base (baseof.html) layout. The contents of the list and single layouts will go in the main block of the base layout.

The base layout includes partials for the

  • head section (head.html)
  • header section (header.html)
  • footer section (footer.html)

of every page. Partials are like include files. They are small, context-aware components that can be used economically to keep your templating DRY. These are standard sections of most websites which is why they’ve been auto-generated. If you don’t want to use a particular section, you can remove it from the base layout or leave it as is as those partial files are empty by default.

Now, let’s fill out the layouts and partials.

head.html partial

Open example.com/themes/exampleTheme/layouts/partials/head.html in a text editor. This will be the place for metadata like the document title, character set, styles, scripts, and other meta information. Paste the following

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.css">
    {{ $title := print .Site.Title " | " .Title }}
    {{ if .IsHome }}{{ $title = .Site.Title }}{{ end }}
    <title>{{ $title }}</title>
</head>

There are two CSS files. We can create an empty style.css file and put it at example.com/themes/exampleTheme/static/css.

For the page title, we will show the site title (taken from config.toml) if we are on the home page, otherwise, we’ll show the site title followed by the page title of the page we’re on.

header.html partial

Normally in a website’s header you will find navigation links. Open example.com/themes/exampleTheme/layouts/partials/header.html  and paste the following

<div id="nav-border" class="container">
    <nav id="nav" class="nav justify-content-center">
        {{ range .Site.Menus.main }}
        <a class="nav-link" href="{{ .URL }}">
        {{ $text := print .Name | safeHTML }}
        {{ $text }}
        </a>
        {{ end }}
    </nav>
</div>

Note how the navigation link names and URLs are coming from the config.toml file we updated earlier. The keyword range causes the template to loop over the items in .Site.Menus.main array. Alternatively, you could just hardcode the nav links directly in the header.html file.

footer.html partial

For the footer, let’s just add a basic copyright disclaimer.

<p class="footer text-center">Copyright (c) {{ now.Format "2006"}} Example.com</p>

The current year will be displayed automatically. If you are wondering why “2006”, you can find out more about it here.

script.html partial

Most websites have some JavaScript. The Hugo auto-generated partial files didn’t include a script partial for JavaScript that should be loaded on all pages. Let’s create one at example.com/themes/exampleTheme/layouts/partials/script.html and paste the following code. Later on, we can add other scripts like jQuery to it.

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" integrity="sha256-0rguYS0qgS6L4qVzANq4kjxPLtvnp5nn2nB5G1lWRv4=" crossorigin="anonymous"></script>
<script src="script.js"></script>

Like style.css, we’ll also need to add a script.js file and put it at example.com/themes/exampleTheme/static/js.

metadata.html partial

Let’s create one more partial to display metadata about each post, e.g. date and tags. Each blog post will have front matter containing key-value pairs specific to each post, e.g.

---
author: "John Doe"
title: "My First Post"
date: "2006-02-01"
tags: ["foo", "bar"]
---

The keys can be referenced as variables in our new partial. Create a new file example.com/themes/exampleTheme/layouts/partials/metadata.html and paste the following code.

{{ $dateTime := .PublishDate.Format "2006-01-02" }}
{{ $dateFormat := .Site.Params.dateFormat | default "Jan 2, 2006" }}

<time datetime="{{ $dateTime }}">{{ .PublishDate.Format $dateFormat }}</time>
{{ with .Params.tags }}
    {{ range . }}
        {{ $href := print (absURL "tags/") (urlize .) }}
        <a class="btn btn-sm btn-outline-dark tag-btn" href="{{ $href }}">{{ . }}</a>
    {{ end }}
{{ end }}

baseof.html layout

As mentioned earlier, the base layout was auto-generated by Hugo. But, since we created a script.html partial for JavaScript files and code that needs to load on all pages, let’s add that partial to the base layout. Open  example.com/themes/exampleTheme/layouts/_default/baseof.html and add script.html after footer.html so that JavaScript does not block page rendering.

<!DOCTYPE html>
<html>
    {{- partial "head.html" . -}}
    <body>
        {{- partial "header.html" . -}}
        <div id="content">
        {{- block "main" . }}{{- end }}
        </div>
        {{- partial "footer.html" . -}}
        {{- partial "script.html" . -}}
    </body>
</html>

list.html layout

This layout will be used to display a list of blog posts. As explained earlier, the content in this file will define the main block of the baseof.html layout. We’ll create a simple layout for listing blog posts. Open example.com/themes/exampleTheme/layouts/_default/list.html and paste the following code.

{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ range .Pages.ByPublishDate.Reverse }}
<p>
    <h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
    {{ partial "metadata.html" . }}
    <a class="summary" href="{{ .RelPermalink }}">
        <p>{{ .Summary }}</p>
    </a>
</p>
{{ end }}
{{ end }}

Note how this layout contains a reference to {{ define "main" }} because we are defining the main block of the base layout. We’re referencing .Summary because we only want to show a summary of each blog post.

single.html layout

This layout will be used to display a single page or blog post. As explained earlier, the content in this file will define the main block of the baseof.html layout. We’ll create a simple single-post layout. Open example/themes/exampleTheme/layouts/_default/single.html and copy and paste the code below.

{{ define "main" }}
<h1>{{ .Title }}</h1>
{{ partial "metadata.html" . }}
<br><br>
{{ .Content }}
{{ end }}

Notice how we are including the metadata.html partial in this layout. Unlike in the list partial, which references the Summary variable, this single partial references the Content variable because we want to show the entire blog post content.

Home page layout

The home page layout is at example.com/themes/exampleTheme/layouts/index.html. Since we’re loading Bootstrap CSS, we can use the Jumbotron component to render a hero section. Paste the following.

{{ define "main" }}
<div id="home-jumbotron" class="jumbotron text-center">
  <h1 class="title">{{ .Site.Title }}</h1>
</div>
{{ end }}

404 layout

Hugo auto-generated an empty 404.html layout in our theme. Since Hugo comes with a default 404, we can delete this one or customize it, if we want.

Write your first blog post

In a terminal, run this command hugo new posts/my-first-post.md.

When you do that, Hugo creates a file with some default front matter.

The template for creating new page types is in the archetypes folder. By default, there’s only one called default.md. It’s a markdown file.

Open the newly created content file at example.com/content/posts/my-first-post.md and add some tags to the front matter followed by some content in either Markdown or HTML. Hugo automatically takes the first 70 words of your content as its summary and stores it into the .Summary variable. Instead, you can manually define where the summary ends with a <!--more--> divider. Alternatively, you can add a summary to the front matter if you don’t want your summary to be the beginning of your post.

---
title: "My First Post"
date: 2020-01-26T23:11:13Z
draft: true
tags: ["foo", "bar"]
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. A erat nam at lectus urna duis. 

Sed velit dignissim sodales ut eu sem. Lectus urna duis convallis convallis 
tellus. Diam sit amet nisl suscipit adipiscing bibendum est. Sed felis eget 
velit aliquet sagittis id consectetur. Vulputate dignissim suspendisse in est ante in nibh mauris cursus. Morbi quis commodo odio aenean. Mollis nunc sed id semper risus in hendrerit gravida rutrum.

<!--more-->

Ac ut consequat semper viverra nam. Hac habitasse platea dictumst vestibulum 
rhoncus. Amet porttitor eget dolor morbi non. Justo eget magna fermentum 
iaculis eu non. Id eu nisl nunc mi ipsum faucibus vitae aliquet nec. Aliquam 
id diam maecenas ultricies. Non sodales neque sodales ut etiam. Amet massa 
vitae tortor condimentum lacinia quis. Erat imperdiet sed euismod nisi porta. 

Nisl suscipit adipiscing bibendum est ultricies integer quis auctor. Viverra 
suspendisse potenti nullam ac. Tincidunt id aliquet risus feugiat in. Varius 
quam quisque id diam vel. Egestas erat imperdiet sed euismod nisi. celerisque felis imperdiet proin fermentum leo vel orci porta non. Ut faucibus pulvinar elementum integer. Fermentum odio eu feugiat pretium nibh ipsum consequat nisl.

Viewing the site

Open a terminal and run the following from the root folder of your site

hugo server -D

The -D flag means to include content marked as draft. Alternative, you can change draft: true to draft: false in the front matter. When I ran that command, I got an error in the terminal.

Since I knew Hugo would serve the site at http://localhost:1313, I went there to see what Hugo would show in this case. Fortunately, Hugo also shows a descriptive error in the browser as well.

Apparently, I added a reference to the script.html partial but I forgot to create the partial. After creating the partial, I reran hugo server -D and I get the following output showing no errors.

The output says that the web server is at http://localhost:1313. Navigating there shows the site as shown below.

This is the home page
This is the list view (there’s only one post right now)
This is the single blog post detail view

Auto-Publish a Static Website Using GitHub and Netlify

Let’s say you want to build a simple, static website with the following requirements.

  • You want to keep track of changes to each file using version control.
  • You don’t want to spend a lot of money.
  • You want a simple setup, intuitive interface, and automatic publishing of changes.
  • You want SSL encryption with a certificate that automatically renews.
  • You want your own custom domain.
  • You don’t want to manage servers and you want to focus on your content.

You can accomplish this in many ways. But, I think the easiest way is to use GitHub and Netlify.

GitHub

GitHub, Inc. is a provider of Internet hosting for software development and version control using Git. It offers the distributed version control and source code management functionality of Git, plus its own features.

Netlify

Netlify is a San Francisco-based cloud computing company that offers hosting and serverless backend services for web applications and static websites.

This post will show you how easy it is to set up a simple website using GitHub and Netlify.

1. Create a free GitHub and Netlify account

This step is self-explanatory. If you create a GitHub account first, you can then log in to Netlify using your GitHub account, which saves time.

2. Create a repository in GitHub

I created a private repository (repo) called “documentation” to create a hypothetical website containing product documentation. When I created the repo, I opted to automatically create a README.md file to explain what the repo is about. At this point, there’s only one file in the repo.

3. Create a new project in Netlify

When you create a new project, you have a few options. In this case, we’ll choose “Import from Git”,

4. Choose Git provider

Since we’re using GitHub, choose GitHub.

5. Connect Netlify to GitHub

In order to auto-publish from GitHub to Netlify, you need to connect the two.

6. Choose repositories

You may choose to connect Netlify to all of your GitHub repositories or just some. In this example, I just want Netlify connected to the one “documentation” repo I just created.

7. Choose a branch to deploy

In this example, I only have one default branch called “main” in the “documentation” repo. Since I just need to transfer static files in GitHub to Netlify, there is nothing to build.


8. Deploy site

Once you click the “Deploy Site” button, Netlify will take all existing files in your GitHub repo and host them. You can see the status of the deployment in the “Site overview” tab along with the default URL. Notice that in steps 2 and 3 of the screenshot below, you can set up a custom domain and secure your site automatically with a Let’s Encrypt certificate.

9. See the deployed site

If you go to the auto-generated URL, you’ll see a Page Not Found error. That’s because we only have a README.md file in the repo.

10. Create an index.html file

Let’s create a home page for our new website. In GitHub, create a new file with filename “index.html” and add some HTML to it.

Commit the new file. For simplicity, I will leave the default values and click “Commit new file”.

You will then see that you have two files in the repo.

11. View deployment status

When you committed the file in GitHub, that automatically triggered a deployment to Netlify. In Netlify, click the “Deploys” tab to check the status of the deployment. In the screenshot below, we see that the status is “Published”.

12. View the deployed change

Going to the auto-generated URL in Netlify, we see that our new home page has been published.

13. Handling Large Media (Images, PDFs, etc)

If you have large, non-text media such as images and PDFs, to avoid bloating your repo, you can use Git LFS. Clicking on the “Large Media” tab gives you more information about that. Personally, for images, I prefer to use ImageKit.io. Alternatives are Cloudinary and Uploadcare.

14. Analytics

You can install Google Analytics on your website and/or you can get analytics from Netlify for $9 per month. Clicking on the “Analytics” tab provides more information.

Redirects

If you need to create redirects, you can use a simple redirect file.

Or, you can create advanced redirects in the Netlify configuration file.

Learn more about redirects.

Access Control

If you want a staging environment where certain people can preview changes before you push them to production, one way to do this is by

  1. creating a “develop” branch in your GitHub repo
  2. connecting Netflify to that branch
  3. enabling site-wide password protection in Netlify (password protection is a paid feature) on the site sourced from that branch.

Though Netlify supports basic authentication, it is not the most secure method of protecting a site. Instead, you can use Netlify’s site-wide protection which uses JWT secret.

Learn more

Various Ways of Working With Lots of Text and Files

Table of contents

  • Find and replace text in a single text file
  • Find and replace text in multiple files
  • Sort a list of text
  • Get unique / remove duplicate lines in a list of text
  • Select a column of text
  • Find text in a single file and copy all matches to the clipboard
  • Add text to the beginning of each line of text
  • Copy differences (diff) between two files
  • Rename multiple filenames in multiple folders

The instructions below use Visual Studio Code unless stated otherwise.

Find and replace text in a single text file

  1. Open the text file in Visual Studio Code
  2. Click Edit > Find or Edit > Replace
  3. Enter your search term and replace term
  4. Use optional options like
    • case senstive match
    • match whole word
    • regular expression
    • preserve case
    • replace first match
    • replace all matches at once
    • find in selection

Find and replace text in multiple files

  1. In Visual Studio Code, right click on a folder and click “Find in Folder…”
  1. Enter your search term and replace term
  2. Use optional options like
    1. case senstive match
    2. match whole word
    3. regular expression
    4. preserve case
  3. In the search results, you will see a preview of the text change.

If you click on a preview in search results, you can can the a side-by-side view of the change in each file.

Sort a list of text

  1. Select all the text to sort
  2. Right click on the selection and click “Sort lines”

Get unique / remove duplicate lines in a list of text

  1. Select the list of text
  2. Click View > Command Paletter
  3. Click one of the unique sort options

Select a column of text

  1. Put the cursor at one corner of the column of text you want to select
  2. On Windows, click and hold “Shift” + “Alt” keys and drag the cursor to the opposite corner of the column of text you want to select
  1. You can then start typing to replace the text or copy the text to the clipboard

Find text in a single file and copy all matches to the clipboard

  1. Open the text in Visual Studio Code
  2. Click Edit > Find
  3. Enter a search term
  4. Click Selection > Select All Occurrences
    All matches will be highlighted. Notice the different highlight color in the two screenshots below.
  1. Right click on the highlighted text and click “Copy”
  1. You could then paste the copied text in a new file

Add text to the beginning of each line of text

  1. Click Edit > Replace
  2. Use the following regex search

Copy differences (diff) between two files

Let’s say you have two files and you want to get only the differences between the two. Visual Studio Code will show you a diff between two files as follows:

  1. Open both files
  2. Select both files in the OPEN EDITORS section
  3. Right click and click “Compare Selected”

You will then see a nice diff between the two files.

But, you won’t be able to copy only the changed lines or export the diff. On Windows, you can use a tool called DiffMerge by SourceGear. If you open both files, you’ll see a similar view.

You can then click Export > File Diffs > Traditional > In Text > To Clipboard to copy the diff to your clipboard.

You can then paste the diff in a text editor like Visual Studio Code and extract only the text you are interested in.

Rename multiple filenames in multiple folders

Let’s say you have many files and you want to rename the filenames all at once. For this, I find it easy to use a tool like Rename Expert. For example, in the screenshot below, I did the following:

  1. Added all files the filenames of which I want to rename
  2. Under “Actions”, chose the actions I want done. In this case, I did 2 actions:
    1. Replace (to replace the first character of each filename with an underscore)
    2. Edit file extension (to change the file extension from php to jpg)
  3. Previewed the changes and resolve any conflicts
  4. Clicked the Apply button to run the batch renaming of files.

Buddy: Easy, Fast CI/CD

Whenever you make a change to a website, you need to deploy your changes to a production server. This can be as simple as uploading some files and as complex as having a multi-step process involving version control, building code, running custom scripts, checking links, image optimization, and then rsync-ing files to multiple production servers. To manage the build and deployment process, developers often use continuous integration (CI) and either continuous delivery or continuous deployment (CD). CI/CD bridges the gaps between development and operation activities and teams by enforcing automation in building, testing and deployment of applications. 

I’ve used Travis CI and attempted to use CircleCI but both seemed more complicated than I would like them to be. I then came across Buddy which got a lot of good reviews and looked super simple to set up. For me personally, I just wanted a simple way to commit changes to this blog’s custom WordPress theme in GitHub and have the changes SFTP’d to the production server. Though you can do that using GitHub Actions, it looked like more work and didn’t come with useful reporting and notifications like what you get with Buddy. Below is how I set up Buddy to detect whenever I commit or push to GitHub and then SFTP the changes to a server.

1. Sign up for Buddy

Buddy requires that you sign up using a work email address or to log in using your GitHub account. I wasn’t using this for work so I just logged in using my existing GitHub account.

2. Create a project

Click the “Create a new project” button. Since I logged in using my GitHub account, Buddy instantly showed me my GitHub repos. Click on a repo for this project you are working on. In my case, I chose “my-blog”.

3. Add a new pipeline

Click to add a new pipeline. You will be asked for a number of things including:

  • Name – I just called the pipeline “Commit / Push to GitHub Then SFTP to abdullahyahya.com”
  • Trigger Mode – I chose “On push” because I want to trigger the pipeline whenever I commit or push to GitHub.
  • Branch or Tag That Triggers the Pipeline – I chose “Single branch” and “main” since, well, I only have one branch (main) and no tags.
  • Target Website URL – I entered my blog’s website URL
  • Trigger Condition – there are a few options here but I chose to have the pipeline be triggered only if there were changes in the repository since last execution which is probably what most people want.
  • Set currently deployed revision on the remotes – Since I already had commits in GitHub that were in sync what production, I chose the most recently commit revision to avoid unnecessarily deploying everything from scratch.
  • Other – there are other options but I just left them at their defaults

4. Add an action

On the next step, you need to choose an action that will take place in the pipeline (when there is a change committed / pushed to GitHub). Since I just want to SFTP the changes, I chose the SFTP action. Browse all Buddy actions.

5. Set up action

Now, you need to set up your chosen action. In this case, I need to set up my source and destination file paths and SFTP login credentials.

If you click the Action tab / button, you can name your action and temporarily disable the action, among other things.

Test your action by clicking the “Test action” link. In my case, Buddy connecting to the production server of SFTP, created a test directory, deleted the test directory, testing uploading a file, and deleted the test file.

If your test fails, e.g. you get the following error, then you may need to whitelist Buddy’s IP addresses.

6. List all pipelines

When you are done, you will see your new pipeline listed along with any other pipelines you have. You can manually run the pipeline also.

7. Do a real test

To do a real test of my pipeline, I added a comment to a file directly in GitHub and committed it. Seconds later, I saw the commit message show up in Buddy. I then verified that the comment was actually added to the file on the production server.

8. Add more actions to the pipeline

If you click the Actions button / tab, you’ll see all actions in the pipeline. You can add more actions that run in certain situations. In this example, I added an action to send myself an email if the pipeline fails. You can also add actions that rsync files to a server, optimize images, perform link checking, run a custom shell script, and much more.

9. Done

So that’s it. Super easy. Intuitive. Fast. I like it!

Easily Draw Curves in Photoshop

Here’s an easy way to draw a custom curve in Photoshop.

1. Click the Curvature Pen Tool

2. Click where you want inflection points

3. Drag an inflection point if you need to adjust the shape of the curve

4. Right-click on the curve click “Stroke Path”

5. Choose a tool, e.g. Brush

6. Click OK and see your curve drawn using the existing brush settings

Make a Video Tour Using Google Earth Pro

I just came back from Istanbul and wanted to make a video using my new Insta360 ONE X2 360 degree camera. To make viewers feel like they’re joining me on the trip, I wanted to include video clips showing movement from one place to another. This was easy to do using Google Earth Pro on desktop. Here’s are some examples.

In the video below, there are 4 “places”

  • San Francisco (zoomed in)
  • San Francisco (zoomed out to space)
  • Istanbul (zoomed out to space)
  • Istanbul (zoomed in)

Here’s how to make the video.

Add “Places”

To add a place, you can search for the place using the Search field. Then, zoom in or out to your desired elevation. When you like the view of the place, click the “Add Placemark” button to add a yellow pin to the place. If you want the place label to appear in the map, check the checkbox beside the place name.

If you right click on a place under “My Places” and click on “Properties”, you can rename the place, change the camera elevation (range), etc.

Record a Tour

When you’re doing adding places, click the Record a Tour button in the toolbar.

This will open a record.

Click on the first place (San Francisco) and then click the red Record button. Then, click on each place in the order you want them to appear in the video. Google Earth 3D will animate from one place to another as you are recording in real time. When you are done, click the Record button again to stop recording. You’ll then see a video player control bar.

Click the Play button to play the video. If you are happy with it, click the floppy disk (seriously, Google?) button to save the video. It will add a video item to the list of places.

Export the Video

To export the video, click Tools > Movie Maker. If it is grayed out, close the video player control bar.

Specify a file path and name, choose video parameters (e.g. 1080p), and an output file type (e.g. H.264), and then click the “Create Movie” button.

Convert Video

The video will be exported but you may not be able to open it in certain applications like Corel VideoStudio even though it opens in VLC. To fix this, install Handbrake and convert the video to MP4 format.

Other Examples

You can make videos from other angles and elevations as well. For example, if you hold the Shift key and drag, you can rotate your view. Then, add a place marker at the view you want to save. Google Earth Pro will animation smoothly from each place marker. For example, here’s a video going from the Sulemaniye mosque to the Grand Bazaar.

Content Delivery Network (CDN) For Optimizing, Managing, Editing, and Hosting Images

Using a content delivery network (CDN) to host website assets such as images is a well-known best practice. But, most CDNs just host these files and serve them from their nearest edge location. Developers still need to crop, resize, and optimize images. Then you have non-technical people, e.g. some blog authors or PR people, who innocently upload an image to a site like WordPress and scale it down in size (width / height) without realizing that the image size is still huge in file size! Fortunately, there are image-specific CDNs that will host and optimize images for you. Below are some features of imagekit.io. I chose this image CDN because I like it so far and it’s free for up to 20 GB of bandwidth per month.

Note: web.dev, which is a Google Developers site, also encourages the use of an image CDN to host images.

Automatic Image Optimization & Fast (< 50 ms) Display Time

Let’s say you have a very large image that is > 1 MB in size. This, of course, is way too large to serve as is. If you don’t know how to optimize images or just don’t feel like doing it, that’s fine because imagekit.io will do it for you. To test this, I uploaded a 1.7 MB, 1800x1232px PNG image of some grass with a transparent background to my “Media Library” in imagekit.io. The library shows a thumbnail of the image, the file size and dimensions. Hovering over the image lets you copy the image URL.

Below is the imagekit-optimized image embedded in this web page.

In Google Chrome, the Network tab of the Inspector reveals that the delivered image was

  • resized from 1800 px wide to 660 px wide
  • converted from PNG to webp
  • optimized from 1.7 MB down to 74.5 kB

I didn’t even have to open Photoshop, ImageOptim or some other image editor / optimizer!

This feature would definitely improve your website’s Lighthouse and PageSpeed scores.

Now, you might be wondering about image optimization processing time since images are optimized on demand. According to imagekit.io, images are displayed is less than 50 milliseconds globally and they have 6 processing regions backed by AWS CloudFront CDN. As you can see in the screenshot above, the Time column shows a delivery time of 40 ms.

Note: When I embedded the image in this WordPress page, WordPress copied the image and hosted it itself so the URL changed from

https://ik.imagekit.io/dumani/grass__zn7kxsnl4g.png?updatedAt=1632793760489

to

https://i0.wp.com/ik.imagekit.io/dumani/grass__zn7kxsnl4g.png?w=660&ssl=1

Deliver compressed images in the right format

This feature lets you deliver the smallest file based on the image content & device with optimal format selection. For example, the image above was uploaded to imagekit.io as a PNG but when I loaded it in this page in Google Chrome, imagekit.io detected that I was using Chrome and delivered a webp-formatted image. If I were using Safari, the delivered image would not be in webp format since Safari doesn’t support webp.

If an image has transparency, then imagekit.io will only convert it to a format that supports transparency, i.e. png, webp, avif. If a PNG image does not contain any transparency, then it becomes a candidate for a JPEG. If a PNG file without transparency is smaller in file size than a JPG, then imagekit.io will still deliver a PNG. Learn more

No need to move images

If you have a ton of website images on your web server, AWS S3 or elsewhere, there’s no need to move the images to imagekit.io. You can specify the existing location of the images as an origin in imagekit.io. Learn more

URL-based Image Transformations

This feature allows you to edit an image just by changing the URL a bit. For example, the following URLs are to the same source image but the delivered image sizes or compression quality are different.

Change image width

  • “tr” means “transform”
  • “w-200” means “width = 200px”

Change image width for high dpr (retina) devices

The dpr is useful for devices like the iPhone or high-end Android devices. A dpr value of 2 is the equivalent of a 2x image (retina). In the examples below, since the dpr is set to 2, then the output image width is actually 2x (twice) the width specified in the URL.

“dpr-2” means “device pixel ratio = 2”

Change image compression quality

You can also change the image quality by simply changing the q value. This is a handy feature for people who have a picky Director of Brand and Creative who often complains that images are blurry or pixelated. Instead of resaving the image at a higher quality and republishing the image, you can just change a parameter in the image URL.

“q-90” means “quality = 90%”

There are many more transformations including width, height, aspect ratio, crop, quality, format, blue, grayscale, progressive image, trim edges, border, rotate, radius, etc. Learn more

Digital Asset Management

With imagekit.io, you get a Media Library where you can upload, organize and distribute image assets. You can create folders and even paste an image to upload it rather than browser for it. You can easily upload entire folders as well. Right-clicking on an image thumbnails shows many image options.

You can easily browse images as well.

Copy ready-to-use URLs

If you need to share an image with someone, e.g. by email, chat, etc, or of you need to insert an image in a blog post or a landing page, you can easily get an optimized image URL. Just upload (or paste) an image into imagekit.io, then click on the image thumbnail to get the optimized image URL.

Search for images

Easily find an image by keyword and many other filters.

Performance Monitoring

You can add URLS that you want imagekit.io to monitor for performance. ImageKit.io will crawl all images at the URL and determine if any images could be optimized and how much savings could be achieved. For example, in the screenshot below the home page of pepperfry.com could save 1.2 MB. If you click the Fix it link, you will see a detailed report of which images could be optimized and in what way.

Real-time Character Animation Lip and Facial Gesture Sync

If you want to create a video of an animated character that moves its head and lips as you move your head and speak, you can do so easily using Adobe Character Animator. Here’s how.

For this example, I’m using a character / puppet called Roger from AnimationGuides.com.

1. Import the puppet

In Adobe Character Animator, click File > Import and select the puppet file.

2. Import a green screen

Since we’ll want to overlay the exported character animation on other elements in a video editing program, we’ll want to add a green screen so we can key it out. Create a solid green image (RGB = 0,255,0) the size of the scene, e.g. 1920 x 1080. Then, import it and drag the imported item to the lowest layer it the Timeline panel.

3. Enable Puppet Track Behaviors

We can tell Adobe Character Animator which parts of our face and body to track as we move and talk in the camera. Click on the puppet layer to reveal the Puppet Track Behaviors panel.

The red button indicates that the particular item will be tracked when you move in front of the camera. For example, the Face item, when expanded, will show a red dot by “Camera Input” meaning if move your face in front of the camera, your facial gestures will be tracked and the puppet’s face will move accordingly.

For the lip sync item, the red dot is by “Audio Input” so if you speak, the microphone will capture your voice and convert it into lip movements on your puppet.

Body tracking is currently available in beta.

https://pages.adobe.com/character/en/body-tracker

4. Enable camera and microphone

For Adobe Character Animator to track your head and lip movements, you need to enable your camera and microphone. You’ll see a circle where your face should be centered in your resting position. Once centered, click the “Set Rest Pose”. You’ll then see a bunch of red dots on your face indicating points where Adobe Character Animator will track your facial gestures.

5. Start recording

Click the red record button. A 3 second countdown timer will begin. Start talking naturally and when you are done, click the red button again to stop recording.

You’ll then see some layers added to the timeline including your voice audio layer.

If some of the layers are longer than the audio layer, e.g. the puppet, Visemes and green screen layers in the screenshot above, trim the scene so the duration of the scene is the duration of the audio. Drag the right end of the gray Work Area bar to the right end of the audio track. Then, right click on that bar and click on “Trim Scene to Work Area”.

Now, your scene duration will just be the duration of the Work Area, in this case 5:20.

6. Preview and export the result

Click the play button to preview the recording. If you are happy with it. you can export it by clicking File > Export > Video via Adobe Media Encoder. This will open Adobe Media Encoder. In the Queue panel, choose a format (h.264) and preset (Match Source – High bitrate or YouTube 1080p Full HD). Then, click the green play button to start encoding.

You will see the encoding progress in the Encoding panel. You’ll also see the video duration as 5:21 seconds as that is the length of the scene in this example.