Posts

Exporting your slides to PDF is the easiest way to record a voiceover when they live in Google Slides, PowerPoint, Keynote, or another presentation tool. Once the slides are a PDF, you can import them into a video tool,

How Mont Combines Slides And Video On One Timeline

Mont puts slides and video on the same timeline. That makes it possible to create a product demo, tutorial, or presentation video without choosing between a slide editor and a video editor. A slide can behave like a clip

Architecture Literacy For Vibe Coders

Architecture is not optional when you are building with AI coding tools. You can get to an MVP with prompts and persistence. Moving past the MVP requires enough architectural literacy to understand what the system is bec

Use Subagents To Keep Long AI Coding Sessions Clean

Long AI coding conversations get worse as they grow. The model has more context to carry, summaries become lossy, and the main thread starts following instructions less precisely. One practical way to slow that decay is

How To Record Your Screen In Mont

Mont can record your screen and camera into separate timeline layers. That matters because a screen recording is perfect on the first take. If the camera and screen are separate layers, you can reposition them, crop them

How To Make Your First Video In Mont

The fastest way to understand Mont is to make one small video from start to export. This post is adapted from a YouTube tutorial about making your first video in Mont. It walks through a simple flow: create a project, ad

How To Record A SaaS Demo Video From Screenshots

A SaaS demo video does not always need a full screen recording. If the goal is to explain a workflow, show a polished product tour, or make a launch video quickly, screenshots can be a better starting point. You can prep

Build It And They Will Not Come: Finding Users For Your SaaS

Building the product is the start of the next problem: finding users. If you are building an app or SaaS and believing that users will appear after launch, you are setting yourself up for a surprise. The market is full o

Localize Your App Without Inventing Translation Keys For Every String

When an app grows past one language, the first instinct is to invent a translation key for every visible string. That sounds organized. It makes the system harder to maintain. This post is adapted from a YouTube video ab

Map Your AI-Generated Codebase Before You Rewrite It

If you are using Claude Code, Cursor, or another AI coding tool to build an app quickly, make a map of the codebase before you start rewriting pieces of it. AI tools can move fast enough that the codebase becomes hard to

Where To Store API Keys: Stop Putting Secrets in .env Files

Do not treat .env files as your long term secret storage. A local .env file can be a convenient development input when it is ignored by Git and only exists on your machine. The mistake is using .env as the place where re

Claude Code Architecture: How to Keep AI-Generated Code Maintainable

Claude Code is fast at producing code, but it is not your architect. That distinction matters. If you let an AI coding tool decide every boundary for you, the first version feels good and the second version feels expensi

Git Staging Area Explained: What git add Really Does

The Git staging area is the place where you prepare the next commit. That is the short version. The more useful version is this: git add does not "save" a file. It takes the current version of a file, or part of a file,

Git Remote Origin, Push, Pull, and Fetch Explained

A Git remote is a named connection to another copy of the repository. Most , that other copy lives on GitHub, GitLab, Bitbucket, or a private server. The default remote name is origin. You use remotes to share commits wi

Resolve Git Merge Conflicts: A Practical Beginner Guide

A Git merge conflict happens when Git cannot safely combine two changes by itself. Most merges are automatic. Conflicts happen when two branches change the same part of the same file, or when one branch changes a file in

Undo Changes in Git: Restore, Revert, Reset, and Clean

Undoing changes in Git depends on where the change lives. Before choosing a command, answer one question: is the change uncommitted, committed locally, or already pushed? That distinction matters because some commands on

Git Log for Beginners: How to Read Commit History

git log shows the commit history of a repository. It answers questions like: What changed recently? Who made a change? Which commit introduced this code? What branch did this work come from? What did a specific commit co

What Is a Git Commit? A Beginner-Friendly Mental Model

A Git commit is a saved snapshot of your project. That is the simplest useful definition. When you run git commit, Git takes the changes you prepared in the staging area and records them as a new point in the project his

Command Line Applications Using React - Snake Game Tutorial

July 24, 2019React

Absolutely CRAZY combo! In this tutorial we'll learn how to build a CLI Snake game using React and Javascript. One of the most powerful features of React is that it supports different renderers. That means you aren't lim

Quokka Clone In 10 Minutes - VSCode Extention Tutorial

July 22, 2019VSCode

In this tutorial, we'll learn how to create a VSCode extension that will communicate with Node Inspector to collect execution data a Quokka.js clone. For those who don't know what Quokka.js is it's a live scratchpad for

5 Git Tools You Must Use Today

July 21, 2019Git

Watch the video on YouTube In this article I'll list 5 git tools that you must use today. Hub Hub is my favourite tool and I use it a lot. If you use GitHub to store your repositories this tool will save you a ton of tim

Render HUGE Lists In React - React Window Tutorial

July 17, 2019React

Watch the video on YouTube This is a tutorial on react window, at the end of the article there is a link to a Github repo with code examples. Rendering lists in React is simple, I would say trivial. You map through an ar

Basic Webpack React Setup

June 22, 2019React

Open the Glitch example create react app is enough to create new React applications, and if you need to have some specific settings you can always eject and alter its webpack configuration. But you need to set up a proje

What Is DOM

June 3, 2019HTML

DOM (Document Object Model) is a programming api for your HTML (or XML) documents. Basically it is an object representing parsed code of your page. It has tree like structure and allows you to traverse, access and modify

Fullstack GraphQL Beginner Tutorial - Instagram Clone

May 20, 2019Graphql

Watch the video on YouTube In this tutorial, we'll build a simple Instagram clone using React and GraphQL. In our version, it will only contain cat pictures. GraphQL allows you to fetch data using Queries and update it u

Automate Git With Hooks And Husky

May 1, 2019Git

Watch the video on YouTube Git provides an interface to run some code as reaction on specific triggers. Those triggers are called githooks (hooks used by git). You can run code on every commit, push, pull or other action

Promises In Javascript

April 14, 2019Javascript

Watch the video on YouTube In Javascript Promises are special sort of objects that serve as a proxy for data that is initially unknown. The concept is not unique for Javascript, similar constructs exist in other language

React PropTypes

April 2, 2019React

Javascrpt is dynamic language, it doesn't have static typechecking. You can't syntactically specify that you function works only with strings, or only with numbers. Same applies to React components. You can pass a prop t

React Context API

March 29, 2019React

In React application data and event handlers are passed down to children components through props. But you need to make some data available on several levels at once. Passing data through props manually can be cumbersome

For Loop In Javascript

March 24, 2019Javascript

Sometimes you need to do some action repeatedly. For example here, for whatever reason I want to output "Hello loops" five times. Loops offer an easy way to do this. There are several different ways to implement loops in

Handling Errors In React

One of the problems you might face when working on your React application is that some error happens in one of your components it breaks the whole app. To solve this problem React has error boundaries . What Is An Error

Controlled And Uncontrolled Forms In React

There are two ways of working with forms in React. Controlled and uncontrolled . Let's see when should you use each of them. Uncontrolled Forms The easiest way to handle forms in react is to use uncontrolled inputs. In u

React Synthetic Events

The events that you get when your event handlers get triggered are actually SyntheticEvents an abstraction around browser events provided by React. It has the same interface as the browser’s native event, including stopP

React Pure Components

By default, a plain React.Component has shouldComponentUpdate set to return true. You can write your own implementation of this method to avoid unnecessady re renders. What Is PureComponent? React provides React.PureComp

React Functional Components

March 10, 2019Programming

The simplest way to define a component in React is to use function. You declare a function that receives props and returns some JSX layout. Here is an example: You can use object destructuring to get specific props: Why

Pure Functions And Side Effects

In computer programming pure function is a function that satisfies two conditions: It is deterministic , which means that for any given input it will always return same output. It has no side effects . Which means it doe

React Lifecycle Methods