An introduction to the most popular deepfaking tool in open source

Source: Deepfakery

Over the past few years, exciting advancements in the realm of machine learning have given us the terrifying ability to perform photorealistic video manipulation using a technique known as DeepFaking.

The underlying technology responsible for this technique are found in Generative Adversarial Networks (GAN), a new class of machine learning framework pioneered by Ian Goodfellow and his colleagues in 2014. In this method, two neural networks (a generator and discriminator) compete against each other in a minimax game to produce a model capable of generating new data with the same properties of the training set. …

With one year into Expo development, I can confidently say that the platform has held up to its promise of one universal framework to build and deploy apps on iOS, Android, and the web.

But with all shiny new tooling, it has a slight learning curve with some growing pains along the way. This is especially true when coming from web-only development in the React ecosystem. This is the article that I wish was available when I first embarked on my Expo and React-Native journey.

To help you avoid sleepless nights of debugging and architectural regret, I wanted to share…

Forget about third party libraries. Those animated card carousels from streaming apps are actually quite simple to build in React-Native.

With the use of some React Native components and simple animation logic, we can build an experience similar to what you would find on Netflix and Disney+.

Specifically, we will be making use of the following concepts:

  • Horizontal ScrollView
  • The snapToInterval prop
  • Animated interpolation

Follow along with each step below or click here for the finished code example.

Step 1: Creating the horizontal ScrollView with snapToInterval

Despite its initially intimidating appearance, the reduce() method is one of the most powerful tools in a Javascript developer’s arsenal.

The reduce method has a clear goal: simplify the very common use case of iterating over an array and processing that data into something meaningful.

In today’s article, we’ll walk through the basic anatomy of the reduce method and show five examples that will help you become intimately familiar with this great tool.

The basic anatomy of the reduce method

This is a very simple skeleton of a reduce method.

arr.reduce((acc, cur, currentIdx, srcArray) => {}, initialValue)

The first argument is a reducer function that has its…

Debounce behaviour is helpful when we want additional control over when a function is called. When implemented properly, we can call a debounced function any number of times, but it will only be invoked after a specified amount of time has passed from its last call. This is helpful in scenarios such as waiting for the user to finish typing before sending out a network request.

You may encounter difficulties when implementing this with React, as additional re-renders may disrupt timed callback behaviour.

Let’s see what we can do about this 😎

What does not work: using debounce directly…

I can guess why you’re here. You started testing your React components with Jest. Awesome! 😎 But then you started adding async behaviour to your components and now you started seeing these vague “fail” messages:

TypeScript, npm, and semantic-release

I’m a big fan of automating boring tasks. While it’s never been easier to create and share great software, handling the mental load of versioning and deployments can get tedious over time. Removing the subjectivity from this process can help to speed up developer velocity and decrease the potential for human error.

In this guide, we will:

  • 📦 Create a simple TypeScript npm package with Jest tests
  • 🏷️ Explain the concept of semantic versioning
  • 💬 Apply commit message linting for consistency
  • 🤖 Automate releases with GitHub Actions and semantic-release

📦 Creating our basic Typescript package

As someone with a tremendously uncommon name, I often find myself…

Obligatory hook-related stock photo (📷 by Chunlea)

Imagine this familiar scenario: a developer builds a life-changing todo application using React and has decided to leverage hooks to make the sharing of state logic much cleaner. Being a responsible developer with a passion for testing, they bring in jest and react-testing-library to start writing unit and integration tests for their components.

Upon implementing these component tests, a challenge arises:
How does one mock a hook’s value when its state exists outside the scope of a component?

To help solve this, we can leverage jest.mock()

Mocking our hook state with a dynamic variable

Imagine that our component relies on a useAuth() hook to share state about the…

Getting these two to play nicely together was initially a frustrating endeavour. Here’s what eventually worked for me after some google-fu.

For this build I will be using webpack@2.4.1 and font-awesome@4.7.0.

Start by installing all your webpack-related NPM devDependencies.

npm install webpack file-loader css-loader sass-loader node-sass 

Now we’ll bring font-awesome into our dependencies 😎

npm install font-awesome --save

After configuring your webpack.config.js to load Sass (tutorial here), we’ll add a loader to read the icons. We’ll also tell it where to look for the fonts.

webpack.config.jsmodule.exports = {
module: {
rules: [

// other loaders

Chanon Roy

Hello. I write primarily about programming and technology. I’m also fluent in film references.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store