In this tutorial, you’ll learn how to build an AI-powered social media post scheduler using Gemini, Late API, and Next.js.

We’ll use the Gemini API to generate engaging social media content from user prompts, Next.js to handle both the frontend and backend of the application, and Late API to publish and schedule posts across multiple social media platforms from a single platform.

Table of Contents

• Prerequisites

• Setup and Installation

• How to Schedule Social Media Posts with Late

• How to Build the Next.js App Interface

• How to integrate Gemini API for Post Generation

• How to Use Late API in Next.js

• Conclusion

Prerequisites

To fully understand this tutorial, you need to have a basic understanding of React or Next.js.

We will use the following tools:

• Late API: A social media API that lets you create and schedule posts across 13 social media platforms from a single dashboard.

• Next.js: A React framework for building fast, scalable web applications, handling both the frontend and backend.

• Google Gemini API: Provides access to Google’s AI models for generating text and other content based on user prompts.

Setup and Installation

Create a new Next.js project using the following code snippet:

npx create-next-app post-scheduler

Install the project dependencies. We’ll use Day.js to work with JavaScript dates, making it easier to schedule and publish social media posts at the correct time.

npm install @google/genai dayjs utc

Next, add a .env.local file containing your Gemini API key at the root of your Next.js project:

GEMINI_API_KEY=<paste_your API key>

Once everything is set up, your Next.js project is ready. Now, let's start building! 🚀

How to Schedule Social Media Posts with Late

Late is an all-in-one social media scheduling platform that allows you to connect your social media accounts and publish posts across multiple platforms. In this section, you’ll learn how to create and schedule social media posts using the Late dashboard.

To get started, create a Late account and sign in.

Create an API key and add it to the .env.local file within your Next.js project.

LATE_API_KEY=<your_API_key>

Connect your social media accounts to Late so you can manage and publish posts across all platforms.

After connecting your social media accounts via OAuth, you can start writing, posting, and scheduling content directly to your social media platforms.

Late lets you write your post content and attach media files directly from the dashboard.

You can choose when your content should be published: post immediately, schedule for later, add it to a job queue, or save it as a draft.

Once a post is published, you can view its status and preview it directly in the dashboard using the post link.

🎉 Congratulations! You’ve successfully created your first post using the Late dashboard. In the next sections, you’ll learn how to use the Late API to create and schedule posts directly from your applications.

How to Build the Next.js App Interface

In this section, you’ll build the user interface for the application. The app uses a single-page route with conditional rendering to display recent posts, an AI prompt input field, and a form that allows users to create or schedule posts.

Before we proceed, create a types.d.ts file within your Next.js project and copy the following code snippet into the file:

interface Post {
    _id: string;
    content: string;
    scheduledFor: string;
    status: string;
}

interface AIFormProps {
    handleGeneratePost: (e: React.FormEvent<HTMLFormElement>) => void;
    useAI: boolean;
    setUseAI: React.Dispatch<React.SetStateAction<boolean>>;
    prompt: string;
    setPrompt: React.Dispatch<React.SetStateAction<string>>;
    disableBtn: boolean;
}

interface FormProps {
    handlePostSubmit: (e: React.FormEvent<HTMLFormElement>) => void;
    content: string;
    setContent: React.Dispatch<React.SetStateAction<string>>;
    date: string;
    setDate: React.Dispatch<React.SetStateAction<string>>;
    disableBtn: boolean;
    setUseAI: React.Dispatch<React.SetStateAction<boolean>>;
    useAI: boolean;
}

The types.d.ts file defines all the data structures and type declarations used throughout the application.

Copy the following code snippet into the app/page.tsx file:

"use client";
import Nav from "./components/Nav";
import { useState } from "react";
import NewPost from "./components/NewPost";
import PostsQueue from "./components/PostsQueue";

export default function Page() {
    const [showPostQueue, setShowPostQueue] = useState<boolean>(false);
    return (
        <div className='w-full h-screen'>
            <Nav showPostQueue={showPostQueue} setShowPostQueue={setShowPostQueue} />
            {showPostQueue ? <PostsQueue /> : <NewPost />}
        </div>
    );
}

The Page component renders the Nav component and uses conditional rendering to display either the PostsQueue or NewPost component based on the value of the showPostQueue state.

Create a components folder to store the page components used in the application.

cd app
mkdir components && cd components
touch Nav.tsx NewPost.tsx PostElement.tsx PostsQueue.tsx

Add the code snippet below to the Nav.tsx file:

export default function Nav({
    showPostQueue,
    setShowPostQueue,
}: {
    showPostQueue: boolean;
    setShowPostQueue: React.Dispatch<React.SetStateAction<boolean>>;
}) {
    return (
        <nav>
            <h2>Post Scheduler</h2>

            <button onClick={() => setShowPostQueue(!showPostQueue)}>
                {showPostQueue ? "New Post" : "Schedule Queue"}
            </button>
        </nav>
    );
}

Copy the following code snippet into the PostsQueue.tsx file:

"use client";
import { useEffect, useState, useCallback } from "react";
import PostElement from "./PostElement";

export default function PostsQueue() {
    const [posts, setPosts] = useState<Post[]>([]);
    const [loading, setLoading] = useState<boolean>(true);

    return (
        <div className='p-4'>
            <h2 className='text-xl font-bold'>Scheduled Posts</h2>

            {loading ? (
                <p className='text-sm'>Loading scheduled posts...</p>
            ) : (
                <div className='mt-4'>
                    {posts.length > 0 ? (
                        posts.map((post) => <PostElement key={post._id} post={post} />)
                    ) : (
                        <p>No scheduled posts available.</p>
                    )}
                </div>
            )}
        </div>
    );
}

The PostsQueue.tsx component displays a list of previously created posts along with their current status, showing whether each post has been published or scheduled for a later time. While the data is being loaded, it shows a loading message, and once loaded, it renders each post using the PostElement component.

Add the following to the PostElement.tsx component:

export default function PostElement({ post }: { post: Post }) {
    export const formatReadableTime = (isoString: string) => {
        const date = new Date(isoString); // parses UTC automatically
        return date.toLocaleString(undefined, {
            year: "numeric",
            month: "short",
            day: "numeric",
            hour: "2-digit",
            minute: "2-digit",
            second: "2-digit",
            hour12: true, // set to false for 24h format
        });
    };

    return (
        <div className='p-4 border flex items-center justify-between  space-x-4 rounded mb-2 hover:bg-gray-100 cursor-pointer'>
            <div>
                <p className='font-semibold text-sm'>{post.content.slice(0, 100)}</p>
                <p className='text-blue-400 text-xs'>
                    Scheduled for: {formatReadableTime(post.scheduledFor)}
                </p>
            </div>

            <p className='text-sm text-red-500'>{post.status}</p>
        </div>
    );
}

Finally, copy the following code snippet into the NewPost.tsx file:

"use client";
import { useState } from "react";

export default function NewPost() {
 const [disableBtn, setDisableBtn] = useState<boolean>(false);
 const [useAI, setUseAI] = useState<boolean>(false);
 const [content, setContent] = useState<string>("");
 const [prompt, setPrompt] = useState<string>("");
 const [date, setDate] = useState<string>("");

 //👇🏻 generates post content
 const handleGeneratePost = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  setDisableBtn(true);
 };

 //👇🏻 create/schedule post
 const handlePostSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
 };

 return (
  <div className='w-full p-4  h-[90vh] flex flex-col items-center justify-center border-t'>
   <h3 className='text-xl font-bold'>New Post</h3>

   {useAI ? (
    <AIPromptForm
     handleGeneratePost={handleGeneratePost}
     useAI={useAI}
     setUseAI={setUseAI}
     prompt={prompt}
     setPrompt={setPrompt}
     disableBtn={disableBtn}
    />
   ) : (
    <PostForm
     handlePostSubmit={handlePostSubmit}
     content={content}
     setContent={setContent}
     date={date}
     setDate={setDate}
     disableBtn={disableBtn}
     setUseAI={setUseAI}
     useAI={useAI}
    />
   )}
  </div>
 );
}

The NewPost component conditionally renders the AIPromptForm and the PostForm. When a user chooses to generate content using AI, the AIPromptForm component is displayed to collect the prompt. Once the content is generated, the PostForm component is shown, allowing the user to edit, create, or schedule the post.

Add the components below inside the NewPost.tsx file:

export const AIPromptForm = ({
    handleGeneratePost,
    useAI,
    setUseAI,
    prompt,
    setPrompt,
    disableBtn,
}: AIFormProps) => {
    return (
        <form onSubmit={handleGeneratePost}>
            <p onClick={() => setUseAI(!useAI)}>Exit AI </p>
            <textarea
                rows={3}
                required
                value={prompt}
                onChange={(e) => setPrompt(e.target.value)}
                placeholder='Enter prompt...'
            />
            <button type='submit' disabled={disableBtn}>
                {disableBtn ? "Generating..." : "Generate Post with AI"}
            </button>
        </form>
    );
};

// 👇🏻 Post Form component
export const PostForm = ({
    handlePostSubmit,
    content,
    setContent,
    date,
    setDate,
    disableBtn,
    setUseAI,
    useAI,
}: FormProps) => {
    const getNowForDatetimeLocal = () => {
        const now = new Date();
        return new Date(now.getTime() - now.getTimezoneOffset() * 60000)
            .toISOString()
            .slice(0, 16);
    };

    return (
        <form onSubmit={handlePostSubmit}>
            <p onClick={() => setUseAI(!useAI)}>Generate posts with AI </p>
            <textarea
                value={content}
                onChange={(e) => setContent(e.target.value)}
                rows={4}
                placeholder="What's happening?"
                required
                maxLength={280}
            />
            <input
                type='datetime-local'
                min={getNowForDatetimeLocal()}
                value={date}
                onChange={(e) => setDate(e.target.value)}
            />
            <button disabled={disableBtn} type='submit'>
                {disableBtn ? "Posting..." : "Create post"}
            </button>
        </form>
    );
};

Congratulations! You've completed the application interface.

How to integrate Gemini API for Post Generation

Here, you will learn how to generate post content from the user's prompt using the Gemini API.

Before we proceed, make sure you have copied your API key from the Google AI Studio.

Create an api folder inside the Next.js app directory. This folder will contain the API routes used to generate AI content and create or schedule posts using the Late API.

cd app && mkdir api

Next, create a generate folder inside the api directory and add a route.ts file. Copy the following code into the file:

// 👇🏻 In api/generate/route.ts file
import { NextRequest, NextResponse } from "next/server";
import { GoogleGenAI } from "@google/genai";

const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY! });

export async function POST(req: NextRequest) {
    const { prompt } = await req.json();

    try {
        const response = await ai.models.generateContent({
            model: "gemini-3-flash-preview",
            contents: `
    You are a social media post generator, very efficient in generating engaging posts for Twitter (X). Given a topic, generate a creative and engaging post that captures attention and encourages interaction. This posts will always be within the character limit of X (Twitter) which is 280 characters, which includes any hashtags or mentions, spaces, punctuation, and emojis.

    The user will provide a topic or theme, and you will generate a post based on that input.
    Here is the instruction from the user:
    "${prompt}"`,
        });
        if (!response.text) {
            return NextResponse.json(
                {
                    message: "Encountered an error generating the post.",
                    success: false,
                },
                { status: 400 },
            );
        }

        return NextResponse.json(
            { message: response.text, success: true },
            { status: 200 },
        );
    } catch (error) {
        return NextResponse.json(
            { message: "Error generating post.", success: false },
            { status: 500 },
        );
    }
}

The api/generate endpoint accepts the user's prompt and generates post content using the Gemini API.

Now you can send a request to the newly created /api/generate endpoint from the NewPost component. Update the handleGeneratePost function as shown below:

const handleGeneratePost = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setDisableBtn(true);
    const result = await fetch("/api/generate", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ prompt }),
    });

    const data = await result.json();
    if (data.success) {
        setUseAI(false);
        setContent(data.message);
        setPrompt("");
    }
    setDisableBtn(false);
};

The handleGeneratePost function accepts the user's prompt and returns the AI-generated content.

How to Use Late API in Next.js

Late provides API endpoints that let you create, schedule, and manage posts programmatically. This allows you to integrate social media posting directly into your applications or automation workflows.

To get started, copy your Late API key and the account ID of your social media platforms into the .env.local file:

LATE_API_KEY=<Late_API_key>
ACCOUNT_ID=<social_media_acct_id>

# Gemini API key
GEMINI_API_KEY=<gemini_API_key>

Note: In this tutorial, we will be using Twitter (X) as the social media platform for scheduling posts. You can adapt the same workflow to other platforms supported by Late API by updating the platform and accountId values in your API requests.

Create an api/post endpoint to accept post content and schedule or publish posts using the Late API.

cd api
mkdir post && cd post
touch route.ts

Then, add the following POST method to post/route.ts:

import { NextRequest, NextResponse } from "next/server";
import utc from "dayjs/plugin/utc";
import dayjs from "dayjs";

dayjs.extend(utc);

export async function POST(req: NextRequest) {
    const { content, publishAt } = await req.json();

    // Determine if the post should be scheduled or published immediately
    const nowUTC = publishAt ? dayjs(publishAt).utc() : null;
    const publishAtUTC = nowUTC ? nowUTC.format("YYYY-MM-DDTHH:mm") : null;

    try {
        const response = await fetch("https://getlate.dev/api/v1/posts", {
            method: "POST",
            headers: {
                Authorization: `Bearer ${process.env.LATE_API_KEY}`,
                "Content-Type": "application/json",
            },
            body: JSON.stringify({
                content,
                platforms: [
                    {
                        platform: "twitter",
                        accountId: process.env.ACCOUNT_ID!,
                    },
                ],
                publishNow: !publishAt,
                scheduledFor: publishAtUTC,
            }),
        });

        const { post, message } = await response.json();

        if (post?._id) {
            return NextResponse.json({ message, success: true }, { status: 201 });
        }

        return NextResponse.json({ message: "Error occurred", success: false }, { status: 500 });
    } catch (error) {
        return NextResponse.json({ message: "Error scheduling post.", success: false }, { status: 500 });
    }
}

From the code snippet above:

• The api/post endpoint accepts the post’s content and an optional publishAt time.

• If publishAt is null, the post is published immediately. Otherwise, the time is converted to UTC for scheduling.

• It then sends a request to the Late API using your API key and the account ID to create or schedule the post on the selected social media platform.

You can also add a GET method to the /api/post endpoint to retrieve posts that have already been created or scheduled:

export async function GET() {
    try {
        const response = await fetch(
            "https://getlate.dev/api/v1/posts?platform=twitter",
            {
                method: "GET",
                headers: {
                    Authorization: `Bearer ${process.env.LATE_API_KEY}`,
                    "Content-Type": "application/json",
                },
            },
        );

        const { posts } = await response.json();

        return NextResponse.json({ posts }, { status: 200 });
    } catch (error) {
        return NextResponse.json(
            { message: "Error fetching posts.", success: false },
            { status: 500 },
        );
    }
}

Next, update the handlePostSubmit function in NewPost.tsx to send a POST request to /api/post. This will create or schedule the post and notify the user of the result:

const handlePostSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setDisableBtn(true);

    const now = new Date();
    const selected = date ? new Date(date) : null;
    const publishAt = !selected || selected <= now ? null : date;

    const result = await fetch("/api/post", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ content, publishAt }),
    });

    const { message, success } = await result.json();

    if (success) {
        setContent("");
        setDate("");
        alert("Success: " + message);
    } else {
        alert("Error: " + message);
    }

    setDisableBtn(false);
};

Finally, fetch all scheduled or published posts and render them in the PostsQueue component:

const fetchScheduledPosts = useCallback(async () => {
    try {
        const response = await fetch("/api/post", {
            method: "GET",
            headers: { "Content-Type": "application/json" },
        });
        const data = await response.json();
        setPosts(data.posts);
        setLoading(false);
    } catch (error) {
        console.error("Error fetching scheduled posts:", error);
        setLoading(false);
    }
}, []);

useEffect(() => {
    fetchScheduledPosts();
}, [fetchScheduledPosts]);

🎉 Congratulations! You’ve successfully built an AI-powered social media post scheduler using Next.js, Gemini API, and Late API.

The source code for this tutorial is available on GitHub.

Conclusion

In this tutorial, you’ve learnt how to create and schedule social media posts across multiple platforms using a single scheduling platform, Late, and how to generate AI content using the Gemini API.

The Late API is a powerful tool for automating social media tasks, posting at specific intervals, managing multiple accounts, and tracking analytics – all from one platform. By combining it with generative AI models like Gemini and automation tools like n8n or Zapier, you can build automated workflows that keep your audience engaged with minimal effort.

The Gemini API also makes it easy to integrate AI-powered text, images, or code generation directly into your applications, opening up a wide range of creative possibilities.

Thank you for reading! 🎉

Authentication techniques are continually evolving as social media sites continue to grow in popularity. The ability to log into web apps using social network accounts is a helpful advance in this area.

This article discusses how you can enhance the user login process for web applications by employing social media authentication through Firebase. It goes into the benefits, setup methods, and integration approaches while offering helpful guidelines.

Here's what we'll cover:

1. Why Use Social Media Authentication?
2. Prerequisites
3. What is Firebase and Why Use it for Authentication?
4. How to Set Up Firebase for Social Media Authentication
5. How to Set Up Your React App
6. How to Integrate Social Media Authentication in Your App
7. Offering Both Social Media and Email/Password Authentication
8. Conclusion

Why Use Social Media Authentication?

I'm sure you've grown weary of the usual username-password routine when logging into a new platform. It often entails creating a new password on the spot or resorting to insecure password conventions that could grant unauthorized access to your many accounts.

Fortunately, social media authentication offers some advantages:

1. Effortless User Experience: Social media login choices simplify the registration process, making it convenient for users to initiate their app usage.
2. Heightened Security: Social media platforms implement strong security measures that can bolster the safety of your app's users.
3. Elimination of Password Hassles: Through social media authentication, users are relieved from the burden of remembering numerous passwords, reducing the inconvenience of managing credentials.
4. Reduced Account Abandonment: Social media login prompts users to join and interact with your app, minimizing the chances of them leaving the registration process unfinished.
5. Access to Trustworthy User Information: Social media platforms provide substantial user information, which can be harnessed to personalize the experience offered by your app.
6. Streamlined Account Recovery: In instances of forgotten passwords, social media authentication presents a straightforward approach for users to regain entry to their accounts.

In summary, social media authentication offers a convenient and secure method for users to join and use your app. It leads to an improved user experience, and decreased account abandonment, and grants you access to valuable user insights.

Prerequisites

This article is intended for those with a solid grasp of the following concepts:

• HTML, CSS, and JavaScript
• React and React Routing
• Fundamental familiarity with using Firebase

What is Firebase and Why Use it for Authentication?

Firebase serves as a comprehensive platform, providing developers with backend services and tools to create web and mobile applications.

One of its key offerings is an authentication service that streamlines the process of integrating authentication features into apps.

With Firebase, implementing authentication becomes more straightforward, thanks to its provision of pre-built user interface components, developer-friendly APIs, and support for various authentication methods.

How to Set Up Firebase for Social Media Authentication

Step 1: Create a Firebase Project

1. Go to the Firebase Console and sign in with your Google account.
2. Click the "Add Project" button.
3. Enter a name for your project and select a location for your data storage.
4. Click the "Create" button.

Firebase console homepage

Step 2: Register a Web app

This feature enables you to register your web applications to access the features of Firebase via web apps.

1. In the Firebase Console, click the "Web" (</>) icon.
2. Click the "Add App" button.
3. Enter a name for your app and select the "Web" app type.
4. Click the "Register" button.

After you have created a Firebase project and registered a web app, you can start using Firebase for social media authentication.

Step 3: Discover Social Media Sign-In Methods

To do this, once your project is created, you'll need to navigate to the "Authentication" section on the left-hand menu.

Showing the Authentication sidebar

Under the "Sign-in method" tab, you'll find a list of authentication providers from which you can choose one:

Displaying various Authentication methods

Step 4: Configure Social Media Providers

How to configure Google auth:

To configure Google auth, simply add a support email, and you’re all set.

Adding a support mail for google auth

How to configure GitHub auth:

To configure GitHub auth, you'll need a Client ID and Client Secret. To get these, sign in to your GitHub account and go to Settings > Developer settings.

Github settings panel

Then, navigate to OAuth and create a new OAuth application.

Creating a github OAuth application

In order to get the Authorization callback, go back to your Firebase console and copy the URL in the GitHub setup.

GitHub callback URL

Note: To complete this process, you’d need to have your app already hosted or at least a URL to where your app is going to be hosted.

Next, you’ll be routed to a page where your app has been registered and you have your Client ID and Secret.

GitHub Client ID and secret Generated

Copy those details and use them to register GitHub as an auth service on Firebase.

Filling GitHub details on Firebase

How to configure Twitter auth:

Similar to Github, start by logging into your Twitter developer account. If you don’t have one, sign up with the Twitter Developer Portal. It looks something like this:

Twitter Developer Signup

After filling in the details, you’ll be routed to the homepage.

Twitter Dev homepage

Click on your default app, and set up user authentication.

Twitter OAuth app setup

Don’t forget to get the callback URL from Firebase and set the Website URL to the URL where your app is hosted.

After setting it up, navigate to your project’s keys and tokens and generate new ones.

Generating new App Key and Secret

Paste those details back in Firebase to set up Twitter auth.

And with that, your three social media platforms have be set up for authentication.

All Auth's set up

How to Set Up Your React App

Now we need to get your React app set up. You'll start by creating a new React app using Vite.

Create a folder on your computer and open that folder with your preferred IDE. Open that IDE’s terminal and run this command:

npm create vite@latest

When the details load, select React and wait for the installation to complete.

Creating a React App with Vite

You’ll be left with a handful of files and some boilerplate code that you can get rid of.

Next, run npm run dev in the terminal to start a development server on port http://localhost:5173/.

React app running in browser

To use Firebase in your app, you must first define a Firebase config file. This file contains all the necessary data used to identify your Firebase app.

So create a folder in your src directory called firebase. Then nest a config.js file in that folder and paste the config file details from your Firebase console you saved earlier.

Firebase config details

Finally, install Firebase via your terminal to use its services in your app.

npm i firebase

How to Integrate Social Media Authentication in Your App

Considering how large this section would be, it’ll be divided into several sub-sections.

1. Setting up the UI logic for authentication
2. Setting up the Authentication logic
3. Implementing Global Authentication State
4. Creating a custom hook for Social Media Authentication
5. Creating Routes and Implementing Routing
6. Social Media Authentication
7. Route Guarding via the User State
8. Creating a useLogout hook
9. Testing the logout functionality

How to set up the UI logic for authentication

Create a folder (pages) in the src directory that houses the pages you want in your application.

For this implementation, there will be 2 files in the pages folder, Auth.jsx and Home.jsx. These files will act as the pages the user can see either when authenticated or not.

How to set up the authentication logic

Start by importing and initializing Firebase auth, as well as the social media platforms enabled on Firebase in your config.

import {
  getAuth,
  GoogleAuthProvider,
  GithubAuthProvider,
  TwitterAuthProvider,
} from "firebase/auth";

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

const googleProvider = new GoogleAuthProvider();
const githubProvider = new GithubAuthProvider();
const twitterProvider = new TwitterAuthProvider();

Then export these initialized functions to use them in other parts of your application.

export { auth, googleProvider, githubProvider, twitterProvider };

How to implement Global Authentication State

To ensure a consistent authentication state throughout your application, consider using the React Context approach.

Step 1: Create an AuthContext

Start by generating a context folder within your src directory and then create an AuthContext.jsx file within it. In the AuthContext file, import essential hooks from React and Firebase.

import { createContext, useReducer, useEffect, useContext } from "react";
import { auth } from "../firebase/config";

export const AuthContext = createContext();

Step 2: Define a reducer function

Construct a reducer function to manage state changes for authentication-related actions using the following code:

export const authReducer = (state, action) => {
  switch (action.type) {
    // When the action type is "LOGIN", update the state with the new user information
    case "LOGIN":
      return { ...state, user: action.payload };

    // When the action type is "LOGOUT", update the state to remove the user information
    case "LOGOUT":
      return { ...state, user: null };

    // When the action type is "AUTH_IS_READY", update the state with user information and
    // set a state to indicate that the authentication process is complete
    case "AUTH_IS_READY":
      return { user: action.payload, authIsReady: true };

    // For any other action type, return the current state without any changes
    default:
      return state;
  }
};

Step 3: Create AuthContextProvider Component

Create a provider component that wraps your entire App component, using the reducer for authentication state management.

import { useEffect, useReducer } from "react";
import { onAuthStateChanged } from "firebase/auth"; 


// Authentication context provider component
export const AuthContextProvider = ({ children }) => {
  // Initialize authentication state using a reducer
  const [state, dispatch] = useReducer(authReducer, {
    user: null,
    authIsReady: false,
  });

  // Effect to determine initial authentication state and update context
  useEffect(() => {
    // Subscribe to authentication state changes
    const unsub = onAuthStateChanged(auth, (user) => {
      // Dispatch an action to update the state with the user information
      dispatch({ type: "AUTH_IS_READY", payload: user });

      // Unsubscribe to avoid further unnecessary updates
      unsub(); // Unsubscribe once the initial auth state is determined
    });
  }, []);

  // Provide authentication state and dispatch function to children components
  return (
    <AuthContext.Provider value={{ ...state, dispatch }}>
      {children}
    </AuthContext.Provider>
  );
};

Step 4: Implement useAuthContext custom hook

You can simplify access to the authentication context with a custom hook, like this:

import { useContext } from "react";

// Custom hook to access the authentication context
export function useAuthContext() {
  // Get the authentication context from the nearest AuthContextProvider
  const context = useContext(AuthContext);

  // Check if the context was successfully obtained
  if (!context) {
    throw Error("useAuthContext must be used inside an AuthContextProvider");
  }

  // Return the authentication context object for use in components
  return context;
}

How to integrating the AuthContextProvider

Finally, integrate the AuthContextProvider into your main application setup

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { AuthContextProvider } from "./context/AuthContext.jsx";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <AuthContextProvider>
      <App />
    </AuthContextProvider>
  </React.StrictMode>
);

With that, all parts of your app can access the context values from the AuthContext.

How to create a custom hook for Social Media Authentication

Firebase authentication processes are similar in pattern and code structure. So it's a good idea to follow the DRY principle and create a utility hook that performs authentication for all social media platforms. This allows you to reuse the same code for each platform, making your code more efficient and easier to maintain.

Here is the step-by-step process to follow to create a custom hook for social media authentication.

Step 1: Create the custom hook

In your source directory, establish a hooks folder and within it, create a file named useSocialSignup.jsx.

Step 2: Import dependencies

Import the necessary functions from React and Firebase into your useSocialSignup file.

import { useEffect, useState } from "react";
import { signInWithPopup } from "firebase/auth";
import { auth } from "../firebase/config";
import { useAuthContext } from "../context/AuthContext";

Step 3: Define the hook function

Develop the useSocialSignup function, which takes a provider as a parameter and returns an object containing an error state, pending state, and the sign-in function for the social provider.

export const useSocialSignup = (provider) => {
  // State variables to manage sign-up process
  const [error, setError] = useState(null);
  const [isPending, setIsPending] = useState(false);
  const [isCancelled, setIsCancelled] = useState(false);

  // Accessing the authentication context's dispatch function
  const { dispatch } = useAuthContext();

  // Function to initiate the social sign-up process
  const signInWithSocial = async () => {
    setError(null);
    setIsPending(true);

    try {
      const res = await signInWithPopup(auth, provider);

      dispatch({ type: "LOGIN", payload: res.user });

      if (!isCancelled) {
        setIsPending(false);
        setError(null);
      }
    } catch (err) {
      setError(err.message);
      setIsPending(false);
    }
  };

  // Effect hook to set isCancelled to true when component unmounts
  useEffect(() => {
    return () => setIsCancelled(true);
  }, []);

  // Return values and functions for component usage
  return { error, isPending, signInWithSocial };
};

This hook encapsulates the process of signing in with social providers. It manages error, pending, and cancellation states, interacts with Firebase authentication, and utilizes the authentication context to dispatch actions.

How to create routes and implementing routing

To ensure smooth navigation and user experience, setting up routes becomes crucial after implementing authentication logic. These well-organized steps guide you through the process.

Step 1: Install react-router-dom

Install the react-router-dom package, a popular choice for managing routing in React applications.

npm i react-router-dom

Step 2: Import dependencies

In your App.jsx file, import necessary components and functions for routing.

import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import "./App.css";
import Home from "./pages/Home";
import Auth from "./pages/Auth";

Step 3: Define routes

Wrap your application content in a BrowserRouter component and use the Routes component to define your routes. Utilize the Route component to map each route path to its corresponding component.

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/auth" element={<Auth />} />
      </Routes>
    </BrowserRouter>
  );
}

At the moment, you can freely navigate between routes, like so:

Moving between Routes without Auth

Social Media Authentication

To ensure your efforts haven't been in vain, head over to the Auth.jsx to implement authentication.

Step 1: Import dependencies

In your Auth.jsx file, start by importing necessary providers, context, and the custom signup hook.

import {
  googleProvider,
  twitterProvider,
  githubProvider,
} from "../firebase/config";
import { useSocialSignup } from "../hooks/useSocialSignup";
import {useEffect} from ‘react’

import {useAuthContext} from “../context/AuthContext”

Step 2: Create instances of the hook

Create instances of the useSocialSignup custom hook for each authentication provider.

const google = useSocialSignup(googleProvider);
const twitter = useSocialSignup(twitterProvider);
const github = useSocialSignup(githubProvider);

Step 3: Add buttons for social sign-up

Create buttons for each social sign-up option (Google, Twitter, GitHub) and attach onClick event handlers to call the signInWithSocial function from the respective hook.

return (
  <div className="utility__page">
    <h1>Welcome to my Auth Page</h1>

    <button onClick={google.signInWithSocial}>
      <img src={GoogleIcon} alt="" />
      <span>Google</span>
    </button>

    <button onClick={twitter.signInWithSocial}>
      <img src={TwitterIcon} alt="" />
      <span>Twitter</span>
    </button>

    <button onClick={github.signInWithSocial}>
      <img src={GithubIcon} alt="" />
      <span>GitHub</span>
    </button>
  </div>
);

Step 4: Apply styling

You can use the provided CSS below to style your components for a clean and organized appearance.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 62.5%;
  color: #121212;
}

.utility__page {
  display: flex;
  width: 100%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  row-gap: 2rem;
  flex-direction: column;
  background: #e2dbd9;
}

h1 {
  font-size: 5rem;
}

button {
  padding: 1rem 4rem;
  font-size: 2rem;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

button img {
  width: 20px;
  height: 20px;
}

.user {
  font-size: 3rem;
  display: flex;
  align-items: center;
  column-gap: 1rem;
}

.logout {
  background: rgb(208, 84, 84);
  color: #fff;
}

.profile_img {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
}

At the moment, your auth page looks something like this:

Auth page after applying styling

Step 5: Test the authentication

To test authentication, import the user from your AuthContext and log it to the console using a useEffect.

  const { user } = useAuthContext();
  useEffect(() => console.log(user), [user]);

Testing the auth now gives the following:

Authentication confirmed in the console via the user object

As you can see, you’ve successfully logged a user in using Social Media Authentication. Kudos!

To confirm, head over to your Firebase auth page and check for valid users.

Confirming signed up user on Firebase

Feel free to try other login methods as they all work the same.

Route Gaurding via the User State

To prevent unauthorized access, set up route guards that check the user's authentication state in your App.jsx file.

const { user, authIsReady } = useAuthContext();

if (!authIsReady) {
  return null; // Return null while waiting for authIsReady
}

return (
  <BrowserRouter>
    <Routes>
      {user ? (
        <>
          {/* Authenticated routes */}
          <Route path="/" element={<Home />} />
          {/* Route guards */}
          <Route path="*" element={<Navigate to="/" />} />
        </>
      ) : (
        <>
          {/* Authentication routes */}
          <Route path="/auth" element={<Auth />} />
          {/* Route guards */}
          <Route path="*" element={<Navigate to="/auth" />} />
        </>
      )}
    </Routes>
  </BrowserRouter>
);

Routed to home page after adding route guards

As you can see, you’ve been routed to the home page, and even if you attempt to go the auth page, you’d be routed back here.

How to customize the home page

For the home page, fetch the user's details and display them if a user is authenticated.

import { useAuthContext } from "../context/AuthContext";

export default function Home() {
  const { user } = useAuthContext();
  return (
    <div className="utility__page ">
      <h1> Home Page</h1>
      {user && (
        <>
          <div className="user">
            <p> You&apos;re logged in as: </p>

            <span>{user.displayName} </span>
            <img className="profile_img" src={user.photoURL} alt=""/>
          </div>
         </>
      )}
    </div>
  );
}

Home page showing custom user details

And voilà! You’ve been able to fetch some details about that user based on the info on the social media they used to log in.

How to create a useLogout hook

The final step to complete your authentication process is to provide users with the ability to log out of your application. Here's how to create a useLogout hook:

Step 1: Create the hook

Create a new file called useLogout.jsx in your hooks folder. Import the necessary hooks and functions.

import { useEffect, useState } from "react";
import { auth } from "../firebase/config";
import { signOut } from "firebase/auth";
import { useAuthContext } from "../context/AuthContext";

Step 2: Create the hook states

Create states to manage the logout process, including error, pending, and cancellation states.

// Error state for potential errors during logout 
const [error, setError] = useState(null); 
// State to indicate if logout is in progress 
const [isPending, setIsPending] = useState(false); 
// State to track if the operation is cancelled
const [isCancelled, setIsCancelled] = useState(false);

Step 3: Extract the dispatch function from the authentication context

This function will be used to indicate a logout action has been called:

const { dispatch } = useAuthContext();

Step 4: Create the hook logic

Use a try-catch block create the logic of logging a user out:

try { 
// Initiating the logout using Firebase's signOut function 
    await signOut(auth); 
    dispatch({ type: "LOGOUT" }); // Dispatching a LOGOUT action 
// If the operation wasn't cancelled, reset pending state and error 
   if (!isCancelled) { 
       setIsPending(false); // Resetting isPending after the asynchronous call completes 
       setError(null); // Clearing any error that might have occurred 
     } 
   } catch (err) { 
      // Handling logout error 
     if (!isCancelled) { 
        console.log(err.message); // Logging the error message
        setError(err.message); // Setting the error state in case of an error 
        setIsPending(false); // Resetting pending state if an error occurs 
   } 
}

Step 5: How to handle unmounting

In the case where the component is unmounted (the page closes or there’s a route change), you’ll want to handle that occurrence to prevent errors.

// Effect hook to set isCancelled to true when component unmounts
   useEffect(() => { 
       return () => setIsCancelled(true); // The cleanup function runs when the component unmounts }, []);

Step 5: Exporting values

Return the relevant values and functions for other components to use.

 return { logout, error, isPending };

For ease of accesibility, here’s the full useLogout hook.

// Importing necessary hooks and functions
import { useEffect, useState } from "react";
import { auth } from "../firebase/config"; // Importing Firebase auth instance
import { signOut } from "firebase/auth"; // Importing signOut function from Firebase
import { useAuthContext } from "../context/AuthContext"; // Importing the custom hook to access the authentication context

// Custom hook for handling user logout
export const useLogout = () => {
  // State variables to manage logout process
  const [error, setError] = useState(null); // Error state for potential errors during logout
  const [isPending, setIsPending] = useState(false); // State to indicate if logout is in progress
  const [isCancelled, setIsCancelled] = useState(false); // State to track if the operation is cancelled
  const { dispatch } = useAuthContext(); // Accessing the authentication context's dispatch function

  // Function to initiate the logout process
  const logout = async () => {
    setError(null); // Clearing any previous errors
    setIsPending(true); // Indicating that the logout process is in progress

    try {
      // Initiating the logout using Firebase's signOut function
      await signOut(auth);
      dispatch({ type: "LOGOUT" }); // Dispatching a LOGOUT action

      // If the operation wasn't cancelled, reset pending state and error
      if (!isCancelled) {
        setIsPending(false); // Resetting isPending after the asynchronous call completes
        setError(null); // Clearing any error that might have occurred
      }
    } catch (err) {
      // Handling logout error
      if (!isCancelled) {
        console.log(err.message); // Logging the error message
        setError(err.message); // Setting the error state in case of an error
        setIsPending(false); // Resetting pending state if an error occurs
      }
    }
  };

  // Effect hook to set isCancelled to true when component unmounts
  useEffect(() => {
    return () => setIsCancelled(true); // The cleanup function runs when the component unmounts
  }, []);

  // Returning the relevant values and functions for component usage
  return { logout, error, isPending };
};

How to test the logout functionality

In your Home.jsx component, import the useLogout hook and extract the logout function. Attach the logout function to a button's onClick event to enable users to log out.

import { useLogout } from "../hooks/useLogout";

export default function Home() {
  const { user } = useAuthContext();
  const { logout } = useLogout(); //logout function extracted

  return (
    <div className="utility__page ">
      <h1> Home Page</h1>
      {user && (
        <>
          <div className="user">
            <p> You&apos;re logged in as: </p>
            <span>{user.displayName} </span>
            <img className="profile_img" src={user.photoURL} alt="" />
          </div>
           //logout function used
          <button className="logout" onClick={logout}>
             Log out
          </button>
        </>
      )}
    </div>
  );
}

At the moment, your home page looks like this;

Home page before logging the user out

Click on the button and log out the user.

Testing the log in and log out functionality

With that, your authentication process is completely set up, congrats!

Striking the Right Balance: Offering Both Social Media and Email/Password Authentication

User authentication is a key part of the user experience on any web app. Social media authentication can offer a streamlined experience and enhanced security, but it's important to strike a balance by also offering the option for email/password authentication. This ensures inclusivity, caters to various user preferences, and addresses privacy concerns.

By offering both options, you create a versatile and user-centric authentication process that contributes to a positive user experience.

An example of an ideal authentication page can be seen below.

Standard Auth Page

Guidelines for Building Auth Pages

It is important to apply some basics best practices when building authentication pages, such as:

1. Showing all the possible ways a user can get authenticated in a clear and concise manner.
2. Using authentic company icons to build trust. You can find free company SVGs on sites like Font Awesome, Google icons, and so on.
3. Use intuitive icons to label inputs such as envelope for mail and padlock for password.
4. Address privacy concerns by clearly communicating how user data will be used and protected during the authentication process.

For ease of accessibility, here’s a link to the repo.

Conclusion

In conclusion, using social media login with Firebase is a smart strategy. It brings together user-friendliness, safety, and privacy.

By offering various ways to log in, websites can accommodate different user choices, be more inclusive, and adapt to new trends.

Balancing authentication options like this makes users happy and builds trust. This is important for creating modern websites and ensuring smooth, user-focused logins.

Contact Information

Want to connect or contact me? Feel free to hit me up on the following:

• Twitter / X : @jajadavid8
• LinkedIn: David Jaja
• Email: Jajadavidjid@gmail.com

In this article, we will explore the famous (or infamous) sphere of social media, why it is critical to both you and hackers, and how you can avoid having your social media accounts attacked.

Disclaimer: Hacking is a tool with the potential for both good and bad. Under no circumstances should the knowledge in this article be used for any harmful or illegal purposes. Doing so could lead to a long time in a jail cell 💀.

And with that, let’s jump in 🙃.

What We’ll Cover

1. Overview of Social Media Platforms

2. Attack Techniques

3. Defense Tips

Overview of Social Media Platforms

Media is Everything ¦ Credit: Anledry Cobos

Meta (formerly Facebook) remains one of the biggest companies on the planet.

Starting off in 2004, it redefined the way we interact with, share, and engage with the world around us. With roughly 2.98 billion monthly active users, Facebook has become an integral part of modern society, bridging gaps and fostering virtual communities.

The platform was among the pioneers of the social media craze which introduced the world to more apps such Instagram, Snapchat, Reddit, WhatsApp, YouTube, TikTok, Telegram and most notoriously, Twitter 🐦. Each and every single one of these apps have a different feel and taste to them with one underlying purpose: Connections.

Connections to people, places and products have been the centre of it all. These platforms allow you to interact with friends, as well as strangers. They also help you see the world around you in ways no one thought was possible many years ago. And if you’re a business person or content creator like I am, it allows you to show people what you have to offer.

If an attacker compromises your credentials, they have access to your connections. They could use your data to impersonate you, post illegal and harmful things, damage your reputation, spread malware, and social engineer your friends and followers on the platform in order to steal money and compromise their accounts.

According to Gitnux, there are about 1.4 billion attacks on social media platforms monthly – quite a lot isn’t it?

Giga Chad ¦ Credit: The Hacker Community

Many companies take the cybersecurity of their infrastructure quite seriously (most times anyway 😶). But as a consumer, you are your own last line of defense or your own greatest vulnerability.

In this article, we will take a look at some ways attackers can convert your ‘connections’ into profit and how you can defend against them. Now let’s find out how hackers can compromise your account.

Social Media Account Attack Techniques

A ‘Like’ signboard on 1 Hacker Way ¦ Credit: [Greg Bulla](https://unsplash.com/@gregbulla?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText" rel="noopener noreferrer)

Physical Access

This may seem obvious, but people still make this mistake a lot. An attacker could install scripts or software that would let them get the passwords of your social media accounts if they have your phone or laptop in their hand.

Software like those from Passrevelator make it easy to get passwords and other credentials from devices on different platforms.

Phishing links, emails, and sites

Phishing is a cyberattack in which the attacker tricks the victim into giving sensitive or critical information through fraudulent websites, forms, links or other means.

It’s pretty easy for anyone to make a Facebook clone with React Native. Tools like Zphisher and PyPhisher make it even easier for an attacker by setting up a phishing page and creating links to it, too.

As you can see, PyPhisher comes with a wide array of options for some major mayhem.

The Phyphisher Interface ¦ Credit: Mercury

More seasoned criminals can send links in spoofed emails to make them look like they are from official organisations and can register lookalike domains to trick users.

Password Spraying and Bruteforcing

Passwords are a big security concern, and for good reason. They are often repetitive and easy to guess. Spraying is the process of trying out common passwords while Bruteforcing is the process of trying out all possible combinations to gain access.

Attackers can get the passwords they use in password spraying from common wordlists. Wordlists are a list of passwords usually gotten from data breaches. The larger the wordlist, the higher the chances of compromising any account.

Below is a screenshot of the infamous rockyou.txt wordlist from the RockYou hack of 2009.

The rockyou.txt wordlist ¦ Credit Mercury

Bruteforcing, on the other hand, involves the attacker generating a custom wordlist alongside usernames or emails on different platforms. This is more effective if the attacker has a specified target.

As you can see, attackers can use a tool known as crunch to generate a wordlist, and it has a lot of options.

Crunch in action ¦ Mercury

If an attacker uses these techniques on a login page, this has great potential to be an entry point, especially if the site has poor security.

Keyloggers

A Keylogger is a piece of riskware that keeps track of what a person types on their device. Think of it like your keyboard having a memory card and sending what it stores to an attacker.

Note that keyloggers aren’t inherently bad, as they can also be used for organisational monitoring and parental control. But an attacker does not have authorization to monitor your keystrokes, which makes its use illegitimate.

An attacker could install a keylogger and monitor the victim's keystrokes. All they have to do is wait and read the logs for a peculiar sequence, usually one with an email, followed by a string of characters before the ‘return’ keystroke.

It would usually look something like this:

A slightly modified Keylogger log ¦ Credit: Mercury

Usually, the entire log will be monochrome but for this example I made a few modifications. The red highlight indicates an email account, which is what an attacker would be looking for. Close behind is the password in blue.

Network Sniffing

Also known as packet sniffing, this is the practice of intercepting and analysing network packets in order to find out what kind of information is shared within the network.

If connections are not properly encrypted, an attacker could easily obtain sensitive information about the sites visited and the messages and passwords that are sent and inputted in them, respectively. WireShark is one of the most common tools for this kind of attack.

The Wireshark Interface ¦ Credit: Mercury

Data Breaches

Data breaches are unintentional leaks of sensitive or confidential information. These are usually more devastating to users than organisations and could have far-reaching consequences.

Passwords and login credentials from data leaks can be sold and purchased on the dark web. They are then used to gain unauthorised access to the account and the rest is history.

How to Defend Against Social Media Attacks

A Neon Instagram Heart ¦ Credit: [Prateek Katyal](https://www.pexels.com/@prateekkatyal/" rel="noopener noreferrer)

As you can see, there are many ways to obtain Social Media account credentials. Below are some ways to ensure you are not a victim.

Check the URL

Always double check any links sent to you via messaging platforms or email. This is a simple but very effective measure against phishing links and sites, as the likelihood of clicking on the wrong link is much lower.

For example, www.facebook.com and www.facebok.com are not the same. As you can observe in the screenshots below, the former is legitimate while an antivirus warns me that the later is a phishing site.

facebook.com ¦ Credit: Mercury

facebok.com ¦ Credit: Mercury

Use strong passwords/passphrases

Make sure you use strong passwords and don’t use similar passwords for different accounts (not even variants 👀). You can also use passphrases rather than passwords as they are easier to remember but harder to guess or bruteforce.

An example of a password is 'dictionary'. An example of a passphrase is 'mydictionaryisthelargest'. The password is weak and could be guessed or found easily in a wordlist. The passphrase isn't the strongest but it is quite lengthy and would be almost impossible to find in a wordlist or to be guessed.

Use Antivirus Software and Firewalls

An Antivirus is a software solution that protects systems against both internal and external threats based on the vendor. A Firewall, on the other hand, protects systems against external threats based on your preferences and settings.

The use of one or both of these products can go a long way in protecting both individuals and organisations from information stealing malware.

VPNs

A Virtual Private Network is a secure network connection that connects you to the internet privately and anonymously. This is done by encrypting the connection and routing it through remote servers.

VPNs are a great option to avoid packet sniffers because packets analysed are encrypted. This means it’s going to be quite difficult for an attacker to get passwords from technical gibberish.

Tracking Breaches

Tracking breaches can be done at an individual or enterprise level. It’s effectiveness, however, usually depends on how much you are willing to pay for it.

Individuals can use sites like haveibeenpwned.com to check if their data has been compromised in any breaches and Enterprises can setup security units with the role of constantly monitoring the Internet for breaches related to them.

Conclusion

Social Media in Scrabble ¦ Credit: [Visual Tag Mx](https://www.pexels.com/@visual-tag-mx-1321732/" rel="noopener noreferrer)

Getting credentials is pretty easy with some determination and a touch of mischievousness. But companies have gotten better at defense in recent years and attackers have had to get more creative.

As an individual, you are your last and dare I say best line of defense. Ensure your shields are always up in the online jungle. Stay safe and Happy Hacking 🙃.

Acknowledgements

Thanks to Anuoluwapo Victor, Chinaza Nwukwa, Holumidey Mercy, Favour Ojo, Georgina Awani, and my family for the inspiration, support and knowledge used to put this together. You’re the best.

Resources

1. Social Media Attack Statistics

2. GUI tools for physical access hacking

In this article, you will learn how freeCodeCamp set up our own Mastodon instance - and how you can too.

What is Mastodon?

Imagine if there were multiple different websites for Twitter. On each of those websites, you could create an account (create one on all of them, if you were feeling ambitious).

You could then use your account to follow any of your friends on any of the other websites. You could repost their content to your account, and see activity from all of your followed accounts on a single timeline.

While Mastodon is by far the most popular platform to use, there are also other options such as Misskey, Pleroma, and their various forks.

Some of these platforms will be able to federate with each other, with cross-platform capabilities, while others will not.

Getting Started with Mastadon

There are a couple of things you will need to get started with the process we followed for freeCodeCamp:

• A DigitalOcean account
• A DNS provider (we use Cloudflare).

Begin by logging in to DigitalOcean and creating a new droplet. In the image options, select the marketplace tab. Then, search for the Mastodon image - this will handle a good portion of the setup for you.

Configure the rest of the droplet settings to your own needs - for the size, we began with the $12 option with the plan to scale up as necessary.

Once the droplet has finished provisioning, copy the IP address. Set up an A record for your domain or subdomain to point to your droplet - do this BEFORE you SSH into the droplet.

Once your DNS is ready, SSH into the droplet as the root user.

How to Set Up Your Mastadon Instance

When you first SSH into the server, the automatic setup tool will run.

Follow the prompts:

• For Domain name, enter the new domain/subdomain record you just set up.
• The tool will ask if you want to store user-uploaded files on the cloud. If you do, you'll need to provide credentials for a storage provider such as Amazon S3.
• Mastodon requires an SMTP server for email notifications and the registration flow. You can either spin up your own, or provide credentials for a service like SendGrid.
• The SMTP flow will prompt you to send a test email. This is highly recommended, as this will confirm your SMTP settings are correct. If they are not, the setup wizard will prompt you to re-enter them.

You will next create a Mastodon account to serve as the administrator. This can be your personal account, or it can be a shared account among your team.

Finally, you'll be prompted to enter your email for LetsEncrypt certificate renewal notifications.

After a few minutes, your instance should be up and running.

How to Configure Your Mastadon Instance

Visiting your new domain/subdomain should display the Mastodon landing page.

Sign in using the admin credentials you generated earlier. Then, select Preferences on the right sidebar, followed by Administration -> Site Settings on the left.

Here you can configure the basic information related to your instance, and upload your branding assets.

These will be displayed on your instance's /about page, shown to users when they register/login (and available in the footer).

When you are ready to start accepting user sign-ups, change the Registration mode setting to either Anyone can sign up or Approval required for sign up.

How to Manage Users

Under the Moderation -> Accounts tab in the settings, you can see registered and pending users.

If you click on a username, you will be taken to the user management view.

From this screen, you can manage their permission level (that is, grant moderation or admin status), check IP information, and block email domains.

Your moderation team can also leave private notes (only visible to the team) on a user account, to help keep a history of any moderation concerns.

Conclusion

Now that your instance is up and running, feel free to poke around the settings and interaction options. For more information on the various options, check out the official documentation.

You can find the freeCodeCamp core team and volunteer moderators on our private instance, where you can follow us from the instance you just created.

Enjoy your new platform, and happy coding!

Cover image from Mastodon's branding update page.

In this article, I will walk you through the three ways to unblock someone on Instagram using the mobile app for iPhone and Android.

How to unblock someone on Instagram through settings

The first way you can unblock something is through the settings tab. Here are the steps you'll need to follow:

1. Login to the Instagram app.
2. Click on the profile icon located at the bottom right hand side.

3. Click on the hamburger menu at the top right hand corner.

4. Click on Settings from the dropdown list of options.

5. Click on Privacy.

6. Scroll down and click on Blocked Accounts.

7. Click on Unblock next to the profile.

8. Click the red Unblock text to confirm.

If you are successful, then you should see this message:

How to unblock someone on Instagram through Direct Message

If you have corresponded with someone over Direct Message, you can unblock them there.

1. Click on the message icon located at the top right hand corner of your screen.

2. Click on the profile you want to unblock.

3. Click on Unblock located at the bottom of the message thread.

4. Click on the red Unblock text to confirm.

How to unblock someone on Instagram through their profile

1. Go the profile of the person you blocked.
2. Click on the Unblock button in their profile.

4. Click on the red Unblock text to confirm.

Alternative option

1. On their profile, you can click on the three dots located at the top right hand corner. On Android, the three dots might be vertical.

2. Click on Unblock.

3. Click on the red Unblock text to confirm.

Those are three ways you can unblock someone on Instagram.

When you post on your own site and syndicate elsewhere (POSSE), Webmention lets you enable rich interactions on your syndicated posts. This article will walk you through the simplest way to turn your social media interactions into Webmentions and display them on your Gatsby.js site.

This tutorial will implement Webmentions on an already existing site, so you should have at least some basic knowledge of React and Gatsby.

Getting Started

To help you better understand how Webmentions work, check out the image below:

Different stages of Webmention process

Let's break down this these three stages and learn how to implement them.

How to Send Webmentions

A Webmention Sender is an implementation that send's Webmentions. Bridgy is a good example of a sender.

Bridgy is an open source tool that pulls your social media interactions from popular social sites and blog engines like Twitter, Facebook, Instagram, and Medium and magically turns them into Webmentions.

Bridgy turning social interactions to Webmentions

To use Bridgy, your domain needs to support the indieAuth Login process.

In your layout.js component (or from whatever component you are managing your <head> with React Helmet), add the following code to link to your social profiles:

import { Helmet } from "react-helmet"
// other imports

export default function Layout({ children}) {

  return (
    <div className="wrapper">
      <Helmet>

        <link rel="me" href="https://twitter.com/sprucekhalifa" />
        <link rel="me" href="https://github.com/iamspruce" />

      </Helmet>
...
    </div>
  )
}

On each of the social services you just linked to, make sure your profile has a link leading back to your homepage like you can see below:

Adding a link back to you homepage on Twitter

That's it! You are done with the IndieAuth login Process. Now head over to Bridgy and sign in with Twitter (if you used Twitter for your IndieAuth process).

From now on Bridgy will periodically analyze your tweets (I promise it doesn't do anything with your data). For each tweet that has a link to your site, it will get all the replies, likes, retweets, and so on and send them as Webmentions.

How to Receive Webmentions

A Webmention receiver is an implementation that receives Webmentions to one or more target URLs.

This implementation can be a script executed on your server, but in the case of GatsbyJs which has no server we'll rely on a third party tool called webmention.io created by Aaron Parecki.

This Tool receives your Webmentions and stores and organizes them. It also provides an API that you can use to easily grab your Webmentions and display them on your site.

To use webmention.io make sure you followed the IndieAuth Login process in the "How to Send Webmentions" section. Then go to webmention.io and sign in with your domain name.

Once you have signed up, add the following to the <head> of your site (and just replace username with the username you got when you logged in):

import { Helmet } from "react-helmet"
// other imports

export default function Layout({ children}) {

  return (
    <div className="wrapper">
      <Helmet>
        ...
        <link rel="webmention" href="https://webmention.io/username/webmention" />
        <link rel="pingback" href="https://webmention.io/username/xmlrpc" />

      </Helmet>
...
    </div>
  )
}

When you start getting Webmentions from your target URLs, you should see them in your dashboard like this:

webmention.io dashboard

You can easily monitor your Webmentions in your dashboard.

How to Pull Webmentions Data to Your Website

This is the fun part where you'll pull your Webmentions data from the Webmention.io API. To do this, I created a Gatsby plugin called [gatsby-source-webmentions](https://www.npmjs.com/package/gatsby-source-webmentions)

NOTE: there's another plugin called [gatsby-plugin-webmentions](https://github.com/ChristopherBiscardi/gatsby-plugin-webmention) which pulls in Webmentions data from webmention.io API and makes them available in Graphql.

Spruce, if there's already a Gatsby plugin why create another one?

I created this plugin for two reasons:

1. First because I can, and why not.

2. Second, for image optimization – this plugin lets you use the gatsby-image plugin to optimize the images returned by the API.

How to Install the Plugin

To install the plugin, open your system terminal or the VS Code integrated terminal and run the following:

npm install gatsby-source-webmentions

Next you'll need to add the plugin to your gatsby-config.js plugins array:

   { 
      resolve: "gatsby-source-webmentions",
      options: {
        DOMAIN: "example.com", // without https and any slashes
        TOKEN: process.env.WEBMENTIONS_TOKEN, // token from webmention.io
        perPage: 100, // optional
      },

The plugin takes a few options:

1. DOMAIN: the domain name you used to sign in to webmention.io

2. TOKEN: the token you got from your webmention.io dashboard

3. perPage: the number of Webmentions you want to fetch per page (this is completely optional)

To avoid pushing your secret token to GitHub add it as an environmental variable.

How to Display Webmentions on the Client Side

If you're dynamically creating your pages with the createPage Node API there's a high chance that you passed the slug variable to all your site pages. If you are unsure or you named it something else just check your site gatsby-node.js file.

Using Create pages to generate a slug for site pages

In your src/templates/blog.js or wherever your page templates are, you'll query Webmentions only if the wm_slug matches the page slug.

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
import Comment from "./Comment"


export const query = graphql`
  query($slug: String!) {
    allWebmention(filter: { wm_slug: { eq: $slug } }) {
        totalCount
        edges {
          node {
            id
            published
            publishedFormated: published(formatString: "MMM Do, YYYY")
            author {
                name
                photo
                url
            }
            url
            wm_id
            content {
              html
            }
          }
        }
      }
    }
`

export default function BlogPost({ data, location }) {
...
  const mentions = data.allWebmention

  return (
    <>
      <Layout>
      ...
      // display mentions in a react component
      </Layout>
    </>
  )
}

wm_slug is a node I created to grab the slug from the wm_target.

Now you can map over all the Webmentions for that target slug and display them in a React Component:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"
import Comment from "./Comment"


export const query = graphql`
  query($slug: String!) {
    allWebmention(filter: { wm_slug: { eq: $slug } }) {
    // graphql queries
      }
    }
`

export default function BlogPost({ data }) {
...
  const mentions = data.allWebmention

  return (
    <>
      <Layout>
      ...
          <ol className="webmentions__list">
      {mentions.edges.map(edge => (
        <Comment
          key={edge.node.wm_id}
          imageUrl={edge.node.author.photo}
          authorUrl={edge.node.author.url}
          authorName={edge.node.author.name}
          dtPublished={edge.node.published}
          dtPublishedFormated={edge.node.publishedFormated}
          content={edge.node.content && edge.node.content.html}
          url={edge.node.url}
        />
      ))}
      </ol>
      </Layout>
    </>
  )
}

How to Group the Webmentions by Type

Although this is completely optional, it is a good idea to group your Webmentions by type:

1. "in_reply_to" – for replies

2. "like_of" – for likes

3. "retweet_of" – for retweets, etc.

...

export const query = graphql`
  query($slug: String!) {
    allWebmention(filter: { wm_slug: { eq: $slug } }) {
      likes: group(field: like_of) {
        totalCount
        edges {
          node {
             // node queries
          }
        }
      }

      replies: group(field: in_reply_to) {
        totalCount
        edges {
          node {
            // node queries
        }
      }
    }
}
...

How to Optimize the Webmentions Author Images

I mentioned earlier that the gatsby-source-plugin allows us to optimize the images returned from the Webmentions query.

To be able to optimize the images you must have [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/), gatsby-plugin-sharp, gatsby-transformer-sharp and gatsby-source-filesystem installed:

export const query = graphql`
  query($slug: String!) {
    allWebmention(filter: { wm_slug: { eq: $slug } }) {
      likes: group(field: like_of) {
        totalCount
        edges {
          node {
            // other node queries
            author {
                photoSharp {
                  childImageSharp {
                    gatsbyImageData(
                      width: 38
                      placeholder: BLURRED
                      formats: [AUTO, WEBP, AVIF]
                )
              }
             }
            }
          }
        }
      }
    }
`

For other optimizations and image processing, refer to the gatsby-plugin-image reference guide.

How to Add Custom Pagination

You can paginate your Webmentions with one of the many Gatsby pagination plugins. But all I wanted was a simple "Load More" button, and thankfully smarter people like Eric Howey have already thought about this.

The code below is from the article Load more button and infinite scroll in Gatsby (although I made a few adjustments to it):

import React, { useState, useEffect } from "react"
import { graphql } from "gatsby"
import Button from "./Button"
import Comment from "./Comment"

export const query = graphql`
  query($slug: String!) {
    allWebmention(filter: { wm_slug: { eq: $slug } }) {
        totalCount
        edges {
          node {
          // node queries
         }
        }
       }
      }

export default function BlogPost({ data }) {
...
  const replies = data.allWebmention

  const [state, setState] = useState({
    list: [...replies.slice(0, 5)],
    Load_more: false,
    has_more: replies.length > 5,
  })
  const handleState = () => {
    state.Load_more = true
  }
  //handle loading more mentions
  useEffect(() => {
    if (state.Load_more && state.has_more) {
      const currentLength = state.list.length
      const is_more = currentLength < replies.length
      const new_list = is_more
        ? replies.slice(currentLength, currentLength + 5)
        : []
      setState.list = [...state.list, ...new_list]
      setState.Load_more = false
    }
  }, [state.Load_more, state.has_more, replies, state.list])

  useEffect(() => {
    const is_more = state.list.length < replies.length
    setState.has_more = is_more

  }, [state.list,replies.length])
  return (
    <div className="webmentions-wrapper">
      {replies.length > 0 ? (
        <>
    <h4>Comments <span className="webmentions-counter">{replies[0].totalCount}</span> </h4>
    <ol className="webmentions__list">
      {state.list.edges.map(edge => (
        <Comment
          key={edge.node.wm_id}
          imageUrl={edge.node.authorImg}
          authorUrl={edge.node.authorUrl}
          authorName={edge.node.authorName}
          dtPublished={edge.node.published}
          dtPublishedFormated={edge.node.publishedFormated}
          content={edge.node.content && edge.node.content.html}
          url={edge.node.url}
        />
      ))}
      </ol>
      <div className="webmentions-load text-center">
      {state.has_more ? (
          <Button
            event={handleState}
            name="Load More"
            label="Load More Webmentions"
            btnSize="small"
            btnType="primary"
          />
      ) : (
        <p>No More Mentions...</p>
      )}
    </div>
        </>
      ) : (
        <p>No Webmentions found</p>
      )}
    </div>
  )
}

Continuous Deployment with Webmentions

As you might have noticed, your Webmentions data are pulled at build time. This means that users won't see new Webmentions unless your site has been built.

I host my site in Gatsby Cloud and to avoid crawling out of bed at midnight to build my site. It provides us with a WEBHOOK that can trigger a build for your site even while you are sleeping.

If you are using Gatsby cloud, go to your dashboard and copy the Webhook:

Webhooks from Gatsby Cloud dashboard

Once you have copied the Webhook, head over to your webmention.io dashboard, click on Web hooks, and paste the copied Webhook into the form:

webmention.io web hooks

That's it – you are done. Now any time you get a new Webmention the Web hook will build your site automatically.

Wrapping Up

In this tutorial we learned how to implement Webmentions on your Gatsby site. If you have any questions or you found this tutorial useful, please feel free to connect with me on Twitter @sprucekhalifa. Thank you.

Happy Coding!

At first, I assumed Jeff Atwood’s 2012 article had spontaneously reappeared on Reddit. But no — this was a brand new Tech Crunch article of the same name, which echoed Atwood’s assertion that encouraging everyone to learn programming is like encouraging everyone to learn plumbing.

Here’s why programming — unlike plumbing — is an important skill that everyone should learn: programming is how humans talk to machines.

John McCarthy, the computer scientist who invented the Lisp language and coined the term “Artificial Intelligence”

“Everyone needs computer programming. It will be the way we speak to the servants.” — John McCarthy

People have been managing other people for thousands of years.

The ancient Romans built their empire on the backs of defeated soldiers. The British built their empire by imposing their will on the residents of dozens of colonies. And the US became the economic force it is today thanks in part to cheap immigrant labor during the industrial revolution.

But here in the 21st century, we no longer get work done by managing people who tend grain fields, import spices from Asian colonies, or install railroads across the Rocky Mountains.

Now we get work done by managing machines.

Learn to Code – Because the Nature of Work has Fundamentally Changed

Today, it is no longer humans who do most of the work — it’s machines.

Think about it — every day, humans make 3.5 billion Google searches. It’s machines that carry out that work — not humans.

Think about how many man-hours it would take for humans to conduct even a single Google search manually. Can you imagine a bunch of PhD’s phoning each other around the clock deliberating about which documents they should recommend to whom? This work is only even remotely practical if it’s done by machines.

Trip Advisor helps you decide where to go for vacation. Expedia helps you book the right flight to get there. Google Maps directs you to the airport. All of these services are within the reach of average consumers thanks to the hard work of machines.

But machines are only able to do all this work because humans tell them exactly what to do. And the only way for humans to do this is by writing software.

That’s right — computers are not nearly as smart as humans. For computers to succeed at the jobs we’ve assigned them, they need us humans to give them extremely clear instructions.

That means coding.

Coding isn’t Some Niche Skill. It really is “the new literacy.”

It’s the essential 21st century skill that every ambitious person needs to learn if they want to succeed.

Don’t believe me? Just look at the legal profession. Software is turning it inside out, and causing mass unemployment for the lawyers who can’t code.

The same is increasingly true for managers, marketers, accountants, doctors, and pretty much every white-collar job in between.

And that’s to say nothing of the 3 million Americans whose jobs primarily involve driving a car, and billions of people world-wide who do other repetitive tasks that will soon be handled more inexpensively and effectively by machines.

I’m hopeful that these displaced workers will be able to retrain for new jobs through inexpensive education programs like Starbuck’s partnership with Arizona State University — where all of its employees get a free college education (hopefully picking up relevant new skills like software development) — or government-sponsored equivalents.

At the very least, they’ll have access to a free math and computer science education through initiatives like EdX, and a free programming education through Free Code Camp.

Program or be Programmed

We have a concept in software development called “the technology steamroller”.

Stewart Brand, founder of the Whole Earth Catalog and the Long Now Foundation

“Once a new technology rolls over you, if you’re not part of the steamroller, you’re part of the road.” — Stewart Brand

You can’t stop technology. You can only adapt to it.

Once a history-shaping new technology comes out of the genie bottle, you can’t put it back. This was true for airplanes, antibiotics, and nuclear warheads. And it’s true for microprocessors, the internet, and machine learning.

Those who adapt to these permanent waves of changes flourish. Those who shrug them off — or fail to even realize they exist — asymptotically approach irrelevance.

Coding is the new literacy. Like reading was in the 12th century, writing was in the 16th century, arithmetic was in the 18th century, and driving a car was in the 20th century.

And just like how not everyone who learns to write will go on to become a professional writer — nor everyone who learns arithmetic will go on to become a professional mathematician — not everyone who learns to code will go on to become a software developer. But all people who learn these things will be immensely better off as a result of their efforts.

Think of your ability to read the labels on your prescription drugs, or your ability to count the money that a banker hands you when you make a withdrawal. There’s something equally important that you can do if you can code: take tedious parts of your daily life and automate them.

And some people take this basic skill much further, as a way to amass great personal wealth, or to make the world a better place.

Ships are meant for sailing

Rear Admiral Grace Hopper invented the first compiler and pioneered high-level programming languages.

A ship in port is safe, but that is not what ships are for. Sail out to sea and do new things. — Grace Hopper

Computers, at their core, are number crunching machines.

Human brains, at their core, are learning machines.

It may seem like you’ll never be able to code. It may seem like you’re just not wired for it.

And there will probably be a parade of people behind you who’ve tried to learn to code, given up, and are eager to commiserate with you.

And these people will read articles like the Tech Crunch article, and share them on Facebook — like 14,000 people did yesterday — further discouraging the millions of people around the world who are working hard to achieve this new literacy.

But coding detractors are probably incorrect about their inability to learn coding. There’s a growing sentiment among educators and cognitive scientists that any able-minded person can learn to code — just like you can learn to read, write, do arithmetic, or drive a car.

Sure, people with dyslexia have a harder time reading, people with dyscalculia have a harder time doing math, and both have a harder time programming. But even these are limitations that can be overcome, and programmers overcome limitations every day.

So heed Grace Hopper’s advice. Sail out to sea and learn new things. Put that learning machine in your head to use.

Learn to code. Learn to talk to machines. And flourish.

Here is what this will look like to someone who clicks the link on a laptop or desktop computer:

YouTube will show a Confirm channel subscription message.

And don't worry – if someone is already a subscriber to your channel when they click this link, they will just see your channel like normal, without the subscription confirmation message.

The Two Methods of Getting People to Subscribe to Your YouTube Channel Directly

There are two main methods you can use to accomplish this goal of getting people to subscribe to your channel directly:

1. A YouTube Subscribe link you can use anywhere – including social media sites and messaging tools.
2. A YouTube Subscribe button you can use anywhere where you can embed JavaScript, such as your personal website.

How to Make Your Own YouTube Subscribe Link

YouTube has a feature where you can just add the ?sub_confirmation=1 parameter to your YouTube channel URL.

Again, this is perfect for linking to your YouTube channel from social media or another place where you don't have the ability to insert code for a proper subscribe button.

There are two types of channels on YouTube:

1. Channel Channels
2. Users Channels

In practice, there is no major difference between these types of channels. They each just use a slightly different URL structure.

How to Create a Subscribe Link if Your YouTube Channel is Classified as a Channel

You can tell your channel uses the "channel" structure by visiting your channel and seeing whether it has the word "channel" in the address bar.

Here's an example:

https://www.youtube.com/channel/freecodecamp

See the word "channel" here? So in this case, you can use this structure for your link:

https://www.youtube.com/channel/<YOUR CHANNEL ID>?sub_confirmation=1

You would just replace the <YOUR CHANNEL ID> in this URL with your channel's ID, which you can find by going to your YouTube channel.

It will either be a custom name (in this case, freecodecamp) or it will be a string of base-64 characters like this: UC0syIz79dzjMXIf5VdJ65EA

Once you add your channel ID to that link, you'll be good to go. The people who click that link will not only be taken to your channel, but they'll also see the subscription confirmation prompt.

How to Create a Subscribe Link if Your YouTube Channel is Classified as a User

Some older channels are still set up as users rather than channels. You can tell your channel uses the "user" structure by visiting your channel and seeing whether it has the word "user" in the address bar.

Here's an example:

https://www.youtube.com/user/thenewboston

This channel is set up as a user.

In this case, you would use this structure:

https://www.youtube.com/user/<YOUR CHANNEL ID>?sub_confirmation=1

You would just replace the <YOUR CHANNEL ID> in this URL with your channel's ID. It will either be a custom name (in this case, thenewboston) or it will be a string of base-64 characters like this: UC0syIz79dzjMXIf5VdJ65EA

Once you add your channel ID to that link, you'll be good to go.

How to Make Your Own YouTube Subscribe Button

All right – here is the fun part. YouTube gives you a way to embed subscribe buttons directly into your website.

Here is what one of these buttons looks like:

_This is a static image that leads to a subscribe prompt._

And here's the embed-able HTML code you would add to your blog. Note that this code will import Google's platform.js JavaScript library in order to dynamically show the button and your current subscriber count.

<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="<YOUR CHANNEL ID>" data-layout="full" data-theme="dark" data-count="default"></div>

You can embed this code. Be sure to replace <YOUR CHANNEL ID> with the channel ID you see when you visit your page.

If you have a custom YouTube channel URL like https://www.youtube.com/freecodecamp you may be able to use that as your channel ID, but I find it more reliable to use the full channel 24-character ID.

How to Customize Your YouTube Subscribe Button

There are two other ways you can customize your subscribe button.

How to Show Your Channel Name and Logo in your Subscribe Button

You can change data-layout to be either default or full (which will show your channel name and icon).

Here is what this looks like when you set data-layout="default":

_This is a static image that would lead to a subscribe prompt._

And here's what this looks like when you set data-layout="full":

_This is a static image that leads to a subscribe prompt._

You can also set the theme to dark with data-theme="dark".

And you can hide your subscriber count completely with data-count="hidden". If you only have a handful of subscribers, you may want to hide this for a few months while you build up a thousand subscribers or more, to avoid "negative social proof".

Why I Recommend YouTube Subscribe Links Instead of YouTube Subscribe Buttons

There are several reasons why I recommend using the link approach instead of these dynamic buttons.

1. Ad blockers, firewalls, and browser plugins may block the button from rendering correctly or from working correctly. This button does involve pulling a JavaScript file from Google's CDNs, which means it won't render in China, for example, where Google is currently blocked.
2. It is hard to control the styling of these buttons, and they may end up looking bad on a mobile device.
3. These buttons may lead to accessibility issues. The link, on the other hand, is just a link, and is easy for people to use in screen readers or other assistive tools.

But Google does support these YouTube subscription buttons as well, so it's up to you whether you want to use them.

A YouTube Subscribe Button Customization Tool

Google has an official tool for customizing these YouTube subscribe buttons. You can access it here. Note that you will still need to have access to the HTML of the page you want to embed these buttons into.

Thanks for reading this guide, and I hope it has helped you understand how these YouTube subscribe links and buttons work, and how you can use them to get more people to subscribe to your channel.

If you want more tips on being a successful YouTube creator in general, you can learn from our nonprofit's 5+ years of experimentation that has helped us become the largest programming channel on YouTube.

Here's our free YouTube handbook, which also includes a 1 hour video course. We designed it with software-focused creators in mind, but many of the techniques can be applied to other subject domains. I hope it's helpful for you.

Cheers.

– Quincy

Most jobs have repetitive tasks that you can automate, which frees up some of your valuable time. This makes automation a key skill to acquire.

A small group of skilled automation engineers and domain experts may be able to automate many of the most tedious tasks of entire teams.

In this article, we'll explore the basics of workflow automation using Python – a powerful and easy to learn programming language. We will use Python to write an easy and helpful little automation script that will clean up a given folder and put each file into its according folder.

Our goal won't be to write perfect code or create ideal architectures in the beginning.
We also won't build anything "illegal". Instead we'll look at how to create a script that automatically cleans up a given folder and all of its files.

Table of contents

1. Areas of Automation and Where to Start
   • Simple Automation
   • Public API Automation
   • API Reverse Engineering
2. Ethical Considerations of Automation
3. Creating a Directory Clean-Up Script
4. A Complete Guide to Bot Creation and Automating Your Everyday Work

Areas of Automation and Where to Start

Let's start with defining what kind of automations there are.

The art of automation applies to most sectors. For starters, it helps with tasks like extracting email addresses from a bunch of documents so you can do an email blast. Or more complex approaches like optimizing workflows and processes inside of large corporations.

Of course, going from small personal scripts to large automation infrastructure that replaces actual people involves a process of learning and improving. So let's see where you can start your journey.

Simple Automations

Simple automations allow for a quick and straightforward entry point. This can cover small independent processes like project clean-ups and re-structuring of files inside of directories, or parts of a workflow like automatically resizing already saved files.

Public API Automations

Public API automations are the most common form of automation since we can access most functionality using HTTP requests to APIs nowadays. For example, if you want to automate the watering of your self-made smart garden at home.

To do that, you want to check the weather of the current day to see whether you need to water or if there is rain incoming.

API Reverse Engineering

API reverse engineering-based automation is more common in actual bots and the "Bot Imposter" section of the chart in the "Ethical Considerations" section below.

By reverse-engineering an API, we understand the user flow of applications. One example could be the login into an online browser game.

By understanding the login and authentication process, we can duplicate that behaviour with our own script. Then we can create our own interface to work with the application even though they don't provide it themselves.

Whatever approach you're aiming at, always consider whether it's legal or not.

You don't want to get yourself into trouble, do you? ?

Ethical Considerations

Some guy on GitHub once contacted me and told me this:

“Likes and engagement are digital currency and you are devaluing them.”

This stuck with me and made me question the tool I've built for exactly that purpose.

The fact that these interactions and the engagement can be automated and “faked” more and more leads to a distorted and broken social media system.

People who produce valuable and good content are invisible to other users and advertisement companies if they don’t use bots and other engagement systems.

A friend of mine came up with the following association with Dante’s “Nine Circles of Hell” where with each step closer to becoming a social influencer you get less and less aware of how broken this whole system actually is.

I want to share this with you here since I think it's an extremely accurate representation of what I witnessed while actively working with Influencers with InstaPy.

Level 1: Limbo - If you don’t bot at all
Level 2: Flirtation - When you manually like and follow as many people as you can to get them to follow you back / like your posts
Level 3: Conspiracy - when you join a Telegram group to like and comment on 10 photos so the next 10 people will like and comment on your photo
Level 4: Infidelity - When you use a low-cost Virtual Assistant to like and follow on your behalf
Level 5: Lust - When you use a bot to give likes, and don’t receive any likes back in return (but you don’t pay for it - for example, a Chrome extension)
Level 6: Promiscuity - When you use a bot to Give 50+ likes to Get 50+ likes, but you don’t pay for it - for example, a Chrome extension
Level 7: Avarice or Extreme Greed - When you use a bot to Like / Follow / Comment on between 200–700 photos, ignoring the chance of getting banned
Level 8: Prostitution - When you pay an unknown 3rd party service to engage in automated reciprocal likes / follows for you, but they use your account to like / follow back
Level 9: Fraud / Heresy - When you buy followers and likes and try to sell yourself to brands as an influencer

The level of botting on social media is so prevalent that if you don’t bot, you will be stuck in Level 1, Limbo, with no follower growth and low engagement relative to your peers.

In economic theory, this is known as a prisoner's dilemma and zero-sum game. If I don’t bot and you bot, you win. If you don’t bot and I bot, I win. If no one bots, everyone wins. But since there is no incentive for everyone not to bot, everyone bots, so no one wins.

Be aware of this and never forget the implications this whole tooling has on social media.

Source: SignalSciences.com

We want to avoid dealing with ethical implications and still work on an automation project here. This is why we will create a simple directory clean-up script that helps you organise your messy folders.

Creating a Directory Clean-Up Script

We now want to look at a quite simple script. It automatically cleans up a given directory by moving those files into according folders based on the file extension.

So all we want to do is this:

Setting up the Argument Parser

Since we are working with operating system functionality like moving files, we need to import the os library. In addition to that, we want to give the user some control over what folder is cleaned up. We will use the argparse library for this.

import os
import argparse

After importing the two libraries, let's first set up the argument parser. Make sure to give a description and a help text to each added argument to give valuable help to the user when they type --help.

Our argument will be named --path. The double dashes in front of the name tell the library that this is an optional argument. By default we want to use the current directory, so set the default value to be ".".

parser = argparse.ArgumentParser(
    description="Clean up directory and put files into according folders."
)

parser.add_argument(
    "--path",
    type=str,
    default=".",
    help="Directory path of the to be cleaned directory",
)

# parse the arguments given by the user and extract the path
args = parser.parse_args()
path = args.path

print(f"Cleaning up directory {path}")

This already finishes the argument parsing section – it's quite simple and readable, right?

Let's execute our script and check for errors.

python directory_clean.py --path ./test 

=> Cleaning up directory ./test

Once executed, we can see the directory name being printed to the console, perfect.
Let's now use the os library to get the files of the given path.

Getting a list of files from the folder

By using the os.listdir(path) method and providing it a valid path, we get a list of all the files and folders inside of that directory.

After listing all elements in the folder, we want to differentiate between files and folders since we don't want to clean up the folders, only the files.

In this case, we use a Python list comprehension to iterate through all the elements and put them into the new lists if they meet the given requirement of being a file or folder.

# get all files from given directory
dir_content = os.listdir(path)

# create a relative path from the path to the file and the document name
path_dir_content = [os.path.join(path, doc) for doc in dir_content]

# filter our directory content into a documents and folders list
docs = [doc for doc in path_dir_content if os.path.isfile(doc)]
folders = [folder for folder in path_dir_content if os.path.isdir(folder)]

# counter to keep track of amount of moved files 
# and list of already created folders to avoid multiple creations
moved = 0
created_folders = []

print(f"Cleaning up {len(docs)} of {len(dir_content)} elements.")

As always, let's make sure that our users get feedback. So add a print statement that gives the user an indication about how many files will be moved.

python directory_clean.py --path ./test 

=> Cleaning up directory ./test
=> Cleaning up 60 of 60 elements.

After re-executing the python script, we can now see that the /test folder I created contains 60 files that will be moved.

Creating a folder for every file extension

The next and more important step now is to create the folder for each of the file extensions. We want to do this by going through all of our filtered files and if they have an extension for which there is no folder already, create one.

The os library helps us with more nice functionality like the splitting of the filetype and path of a given document, extracting the path itself and name of the document.

# go through all files and move them into according folders
for doc in docs:
    # separte name from file extension
    full_doc_path, filetype = os.path.splitext(doc)
    doc_path = os.path.dirname(full_doc_path)
    doc_name = os.path.basename(full_doc_path)

    print(filetype)
    print(full_doc_path)
    print(doc_path)
    print(doc_name)

    break

The break statement at the end of the code above makes sure that our terminal does not get spammed if our directory contains dozens of files.

Once we've set this up, let's execute our script to see an output similar to this:

python directory_clean.py --path ./test 

=> ...
=> .pdf
=> ./test/test17
=> ./test
=> test17

We can now see that the implementation above splits off the filetype and then extracts the parts from the full path.

Since we have the filetype now, we can check if a folder with the name of this type already exists.

Before we do that, we want to make sure to skip a few files. If we use the current directory "." as the path, we need to avoid moving the python script itself. A simple if condition takes care of that.

In addition to that, we don't want to move Hidden Files, so let's also include all files that start with a dot. The .DS_Store file on macOS is an example of a hidden file.

    # skip this file when it is in the directory
    if doc_name == "directory_clean" or doc_name.startswith('.'):
        continue

    # get the subfolder name and create folder if not exist
    subfolder_path = os.path.join(path, filetype[1:].lower())

    if subfolder_path not in folders:
        # create the folder

Once we've taken care of the python script and hidden files, we can now move on to creating the folders on the system.

In addition to our check, if the folder already was there when we read the content of the directory, in the beginning, we need a way to track the folders we've already created. That was the reason we declared the created_folders = [] list. It will serve as the memory to track the names of folders.

To create a new folder, the os library provides a method called os.mkdir(folder_path) that takes a path and creates a folder with the given name there.

This method may throw an exception, telling us that the folder already exists. So let's also make sure to catch that error.

if subfolder_path not in folders and subfolder_path not in created_folders:
        try:
            os.mkdir(subfolder_path)
            created_folders.append(subfolder_path)
            print(f"Folder {subfolder_path} created.")
        except FileExistsError as err:
            print(f"Folder already exists at {subfolder_path}... {err}")

After setting up the folder creation, let's re-execute our script.

python directory_clean.py --path ./test 

=> ...
=> Folder ./test/pdf created.

On the first run of execution, we can see a list of logs telling us that the folders with the given types of file extensions have been created.

Moving each file into the right subfolder

The last step now is to actually move the files into their new parent folders.

An important thing to understand when working with os operations is that sometimes operations can not be undone. This is, for example, the case with deletion. So it makes sense to first only log out the behavior our script would achieve if we execute it.

This is why the os.rename(...) method has been commented here.

# get the new folder path and move the file
    new_doc_path = os.path.join(subfolder_path, doc_name) + filetype
    # os.rename(doc, new_doc_path)
    moved += 1

    print(f"Moved file {doc} to {new_doc_path}")

After executing our script and seeing the correct logging, we can now remove the comment hash before our os.rename() method and give it a final go.

# get the new folder path and move the file
    new_doc_path = os.path.join(subfolder_path, doc_name) + filetype
    os.rename(doc, new_doc_path)
    moved += 1

    print(f"Moved file {doc} to {new_doc_path}")

print(f"Renamed {moved} of {len(docs)} files.")

python directory_clean.py --path ./test 

=> ...
=> Moved file ./test/test17.pdf to ./test/pdf/test17.pdf
=> ...
=> Renamed 60 of 60 files.

This final execution will now move all the files into their appropriate folders and our directory will be nicely cleaned up without the need for manual actions.

In the next step, we could now use the script we created above and, for example, schedule it to execute every Monday to clean up our Downloads folder for more structure.

That is exactly what we are creating as a follow-up inside of our Bot Creation and Workflow Automation Udemy course.

A Complete Guide to Bot Creation and Automating Your Everyday Work

Felix and I built an online video course to teach you how to create your own bots based on what we've learned building InstaPy and his Travian-Bot. In fact, he was even forced to take down since it was too effective.

Join right in and start learning.

If you have any questions or feedback, feel free to reach out to us on Twitter or directly in the discussion section of the course ?

• What is Open Graph?
• Why do I need it?
• What happens if I don’t have it?
• Starting with the basics of open graph
• Website open graph type
• Some other open graph tags that are worth adding
• Twitter and other social media networks using open graph
• Images in open graph
• Testing your open graph tags
• Can I get an example?

What is Open Graph?

Open Graph is an internet protocol that was originally created by Facebook to standardize the use of metadata within a webpage to represent the content of a page.

Within it, you can provide details as simple as the title of a page or as specific as the duration of a video. These pieces all fit together to form a representation of each individual page of the internet.

Why do I need it?

Content on the internet is typically created with at least one goal in mind -- to share it with others. This might not necessarily matter if you’re just sending it to one friend, but if you want to share it or want it to be shared on any social network or app that utilizes rich previews, you’ll want that preview to be as effective as possible.

This will help encourage people to check out your content and inevitably click through to your content.

What happens if I don’t have it?

Most social networks by default will try to make their best effort in creating a preview of your content. This more often than not doesn’t go so well.

Take for instance my website colbyfayock.com.

Example of a simple Twitter Card

It correctly grabs the title of my page and the description, but it's not the most enticing looking tweet in a feed.

Contrast that to the preview of a single post and we see a different story.

Example of a Twitter Card with a large image

So what happens if you don’t have open graph tags? Nothing bad will happen, but you won’t be taking advantage of some of the features that help make your content stand out next to the loads of other content getting posted on the internet.

Starting with the basics of open graph

The four basic open graph tags that are required for each page are og:title, og:type, og:image, and og:url. These tags should be unique for each page you serve, meaning your homepage’s tags should all be different from your blog post article’s page.

Anatomy of a Twitter Card using Open Graph tags

While it should be pretty straightforward, here’s a breakdown of what each of the tags mean:

• og:title: The title of your page. This is typically the same as your webpage's <title> tag unless you’d like to present it differently.
• og:type: The “type” of website you have. I’ll explain more in the next section, though a generic “type” is “website”.
• og:image: This should be a link to an image that you’d like to represent your content. It should be a high resolution image that the social networks will use in their feeds.
• og:url: This should be the URL of the current page.

When placing a tag on your website, you should place it in the <head> along with any other metadata. The tag used will be a <meta> tag and should look like this pattern:

<meta property=“[NAME]” content=“[VALUE]” />

So if I were to create a set four basic open graph tags for my website, colbyfayock.com, it might look like:

<meta property="og:title" content="Colby Fayock - A UX Designer &amp; Front-end Developer Blog" />
<meta property="og:type" content="website" />
<meta property="og:image" content="/static/website-social-card-44070c4a901df708aa1563ac4bbe595a.jpg" />
<meta property="og:url" content="https://www.colbyfayock.com" />

Website open graph type

The open graph protocol has a few variations of the “type” of website it supports. This includes types like website, article, or video.

When setting up your open graph tags, you’ll want to have an idea of which type will make more sense for your website. If your page is focused on a single video, it probably makes sense to use the type “video”. If it’s a general website with no specific vertical, you would probably just want to use the type “website”.

Similar to the others, this is unique for each page. So if your homepage is "website,” you could always have another page of type “video”.

So if I were to create an open graph type for my website, it might look like the following on my homepage:

<!-- colbyfayock.com -->
<meta property=“og:type” content=“profile” />

When navigating to a blog post, it would look like:

<!-- https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/ -->
<meta property=“og:type” content=“article” />

You can find the most common open graph website types on the open graph webpage: https://ogp.me/#types

Some other open graph tags that are worth adding

Though you’ll generally be okay with the basics, here are a few more that would be worth adding:

• og:description: A description of your page. Similarly to og:title, this may be the same as your website’s <meta type=“description”> tag, unless you’d like to present it differently.
• og:locale: If you want to localize your tags, it would probably make sense to include locale. The format is language_TERRITORY, where the default is en_US.
• og:site_name: The name of the overall website your content is on. If you're on a blog post page, you might have a title using that blog post’s title, where the site_name would be the name of your blog.
• og:video: Have a video that supports your content? Here’s a chance to include it. Add a link to your video using this tag.

These tags will be added in the same pattern as before:

<meta property=“[NAME]” content=“[VALUE]” />

Twitter and other social media networks using open graph

Most of the social networks adhere to the basics of open graph standards, but a few of them also include their own extension to help customize the look and feel within their ecosystem.

Twitter for instance, allows you to specify twitter:card, which is the type of “card” you can use when they show your website. At this time, their card types include:

• summary
• summary_large_image
• app
• player

This will help you choose how your links are used in their feed. If you choose summary_large_image for instance, Twitter will show your links with big high resolution images as long as you’re providing it in the in the og:image tag.

Here are some quick references to the documentation of how to use open graph tags with some of the social media sites:

• Twitter: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
• Facebook: https://developers.facebook.com/docs/sharing/webmasters/
• Pinterest: https://developers.pinterest.com/docs/rich-pins/overview/?
• LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Images in open graph

While adding your image as og:image should often be enough, sometimes it can be challenging to get your image to show up correctly. If you seem to be running into trouble, the open graph standard includes a few image tags such as og:image:url vs og:image:secure_url as well as the og:image:width and og:image:height.

Try to make sure you’re following all of the notes and examples in the open graph documentation. Additionally, some of the social networks have image requirements. Twitter for instance requires a ratio of 2:1 with a minimum size of 300x157 and a maximum size of 4096x4096 that’s under 5MB and of JPG, PNG, WEBP or GIF format.

If you’re stuck, test your tags using the social media network’s tools to see if you can find the issue.

Testing your open graph tags

Luckily, our favorite social networks also provide tools to help us debug our tags. Once you make sure that your tags are actually showing up in the source code of your website, you’ll be able to preview how your website will look in the feed.

• Twitter: https://cards-dev.twitter.com/validator
• Facebook: https://developers.facebook.com/tools/debug/
• Pinterest: https://developers.pinterest.com/tools/url-debugger/

Digging further into open graph tags

While most of these should cover a basic website, there are a few more tags that might help you and your business’s discoverability throughout social networks.

If you’re interested in diving in more, the documentation does a great job at providing a list of all of the available tags for you to use.

https://ogp.me/

Can I get an example?

If you’re simply looking for an example to get started, here’s what you should end up with when setting up your tags for a blog post:

<meta property="og:site_name" content="Colby Fayock" />
<meta property=“og:title” content=“Anyone Can Map! Inspiration and an introduction to the world of mapping - Colby Fayock" />
<meta property="og:description" content="Chef Gusteau was a visionary who created food experiences for the world to enjoy. How can we take his lessons and apply them to the world of…" />
<meta property="og:url" content="https://www.colbyfayock.com/2020/03/anyone-can-map-inspiration-and-an-introduction-to-the-world-of-mapping/" />
<meta property="og:type" content="article" />
<meta property="article:publisher" content="https://www.colbyfayock.com" />
<meta property="article:section" content="Coding" />
<meta property="article:tag" content="Coding" />
<meta property="og:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:secure_url" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="640" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:image" content="https://res.cloudinary.com/fay/image/upload/w_1280,h_640,c_fill,q_auto,f_auto/w_860,c_fit,co_rgb:232129,g_west,x_80,y_-60,l_text:Source%20Sans%20Pro_70_line_spacing_-10_semibold:Anyone%20Can%20Map!%20Inspiration%20and%20an%20introduction%20to%20the%20world%20of%20mapping/blog-social-card-1.1" />
<meta property="twitter:site" content="@colbyfayock" />

Looking for other ways to optimize and analyze your content?

• How to Add a Social Media Image to Your Github Project Repository
• How to Make Sense of Google Analytics and the Traffic to Your Website
• How to set up and track YouTube Channel performance with Google Analytics

Want to skip ahead of the “what” and “why”? Jump to the “how”!

Impact of images in social media

Any social media feed is a flurry of content that can be difficult to completely digest. As you swipe or scroll through the feeds, you’ll be met with some text-based content and a ton of media.

Twitter feeds with media on TweetDeck

And this is for a good reason! As you scan the example above, what stands out? Not the Dust Particle retweet from CodePen on the left, but the AWS in the middle, dog nose in the top left, and Al Pacino in the top right among the other large media posts.

Images, gifs, and videos are a good way to provide eye-catching content. As a bonus, they typically take up much more space in the feed, making it even more likely you’ll get a chance to see it.

The bare minimum on Github

When sharing your Github projects to social media, the default option is pretty bland. Take this tweet as an example:

Github gives us a simple social media card that’s comprised of our Github avatar, the path of our project, and the short description from the top of the page.

Now it’s great they even show a card to begin with and to be fair, what would they show? But this tweet is going to get skipped pretty easily in people’s feeds between big, shiny images.

Github social media images

Luckily, Github provides us with a nice and easy way to add an image to each repo that can help the content we share work for itself a little more.

With a little creative work, we can upload an image that will that will take advantage of the space on people’s feeds and get your work the attention it deserves.

Example of a social image using Canva

Before we dive in, it should be noted that you must have the appropriate access to be able to modify the settings of the repository in order to change the image. If you created the repo, chances are you have this access.

Finding or creating an image

Before we upload an image, we need an image in the first place. You can go one of two routes: finding an image or creating a new one.

If you want to go the simple route, you can look around for free to use images that are pretty easy to find on the web. A favorite of mine is Unsplash, as you’ll typically find high quality images, but there are a ton of others you can find with a simple search. However, adding photos is usually better served for blog posts and content-based posts.

The better route is to create your own. The advantage of creating an image is you can customize it with large text to catch some extra attention in the feed.

There are a ton of free tools that are available that allow you to create an image starting with a social media specific template, so you don’t need to spend the money on Photoshop to get there.

The only requirement for your image is that its size must be at least 640×320px. If possible, strive for at least 1280×640px to make sure the image is showing at a high resolution in feeds.

Adding an image to your Github repo

Once we have our image, we’re just left with adding the image to our repo, which is arguably the simpler part.

First, navigate to the Settings of your Repo using the tab navigation towards the top of the page. As a reminder, you need to be able to modify the settings to change the image.

Github Settings page

Next, scroll down to the Social Preview section, where if you don't currently have an image set, you’ll find a big empty rectangle with an edit button in the bottom left corner.

Upload social image on Github

Click the Edit button, select Upload an image, then find your image on your computer and select the file.

Once selected, your image file will be uploaded to Github and set as your social image!

Social preview on Github

Previewing your new image

When you’re done uploading your image, you can make your way to your favorite social platform and give it a try. Posting to Twitter for example will now show a nice big image instead of your small Github avatar!

As you can see, this tweet is maximizing the space available and getting the point across about what the project is about.

A few tips when creating images

Large, simple text

It can be easy to get caught up in over-designing a graphic or not paying enough attention to the font size. Make sure you use big letters with a font that’s easy to read, so when someone scrolls past your post, they can understand it and not just skip it.

Add a logo

Do you have a logo for your project? Or is it a plugin for a specific tool? Try adding a logo to immediately give context about what the project is about!

Maximize resolution

No one likes looking at poor quality images. Take advantage of all of those precious pixels and upload an image that will translate to high quality in a feed. Github particularly recommends an image size of at least 1280×640px.

Have any other tricks to maximize sharing on social?

Share your favorite tips with me on Twitter!

Tired of wasting your time on various unproductive websites? Why not make a script which would help you limit the time you spend on these websites?

Does this sound familiar…?

Just another day, scrolling through my Social Media feed and watching memes. I found that it had been been 4 hours since I’d been sitting at the same position and “Doing Nothing”. I hated it! I had to do something about it. It came into my mind, why not make some script which would help me limit the amount of time I spend on these websites?

_Stop scrolling through your feed, and do something xD (source: [https://www.writerswrite.com/writingmemes/](https://www.writerswrite.com/writingmemes/" rel="noopener" target="blank" title="))

How about making a script which would block all these websites? The script allows you to use them only at some specific given hours of a day. Sounds legit! Let’s do it. :-)

Yes, I know there are many easy methods to block any website. Just download some Chrome plugin, or rather any software which would do this for us. Well yeah, quite easy! But come on, we are developers, we don’t do these things! When we need something, we develop scripts for it rather than using some random trick to do the work…right?!

If you want to download the script directly, you can do so from here.

Let’s Get Started!

Unlike my other tutorial articles, you won’t need any directory structure or a dev environment set up for this project. All you need is NodeJS installed on your system and a good text editor. You can make this script using any language of your choice which supports file handling. I chose JavaScript because I love it!

_I ❤️ JavaScript! (source: [https://brendaneich.com/2015/06/from-asm-js-to-webassembly/](https://brendaneich.com/2015/06/from-asm-js-to-webassembly/" rel="noopener" target="blank" title="))

The Background Idea

The idea behind this blocker we are going to make is very simple. There is a file named hosts. We can add the URL of any website and the URL of a website to which we want to redirect the former website to. Something like this:

127.0.0.1    www.facebook.com

Now, whenever we try to open Facebook, it will be redirected to 127.0.0.1 (localhost) automatically. This will indirectly block the website.

The hosts file which I am talking about is present in C:\Windows\System32\drivers\etc\hosts if you use Windows. If you are a Mac or Linux user, the location of that file is: /etc/hosts.

Let’s Modify The File…

Before starting the code, let’s try to modify the file and see if it works. Please note that only the user with administrator rights can modify this file. If you are on Windows you can right click on that file and open as administrator. If you are using Linux, you can use the sudo command. I am using nano to open the file, you can use any other editor of your choice.

sudo nano /etc/hosts

After you type this command, it will ask you to enter your password. You can enter it and open your file. Let’s try it out :)

Alright, so we appended our “to be blocked” website in the hosts file, now let’s check it out whether it worked or not. To check it, go to any web browser, and go to that website.

Yippee! It worked :3

Now that we’ve checked that our concept is correct, let’s code the blocker.

1. Setting up the variables

As I said earlier, there is no need of huge directory structuring or setting up of a dev environment. All you need to do is make a JavaScript file (say, blocker.js) and start coding.

First of all, we need to import fs (file system) Node module through which we will be making changes to our hosts file. You can read the complete documentation of fs here.

const fs = require('fs');

Now, we will need to initialize 3 variables:

1. filePath — To store the path of hosts file
2. redirectPath — For the redirection path (here, localhost)
3. websites — Array of websites to be blocked

Also, we will be making a variable named delay. This variable will store the value of time duration (in milliseconds) after which our script will repeat itself. Basically the idea is to keep the script running all the time to check whether it is the time to block/unblock the websites. To keep it running we will be using setInterval() method in JavaScript. We can also use while (true) {} to make an infinite loop.

Right now we are keeping the time after which the function repeats itself constant (say, 10 seconds). But, this script can be made smarter by setting the value of delay equal to the time difference between current time and time at which the state of script (block/unblock) has to be changed. Doing this is much more easier than what it feels like — so I want you (the reader) to do it yourself, and drop me a mail, I would love to hear from you ?

const filePath = "/etc/hosts";const redirectPath = "127.0.0.1";let websites = [ "www.someRandomWebsite.com","anotherWebsite.com" ];let delay = 10000;

Note* If you are a Windows user, store this in the filePath variable: C:\Windows\System32\drivers\etc\hosts

2. The blocker function

We will now make a blocker function. We call it from the setInterval method to keep it running after every given time interval.

let blocker = () => {    ....    ....};

Now we will fill the code inside our blocker function.

Inside blocker: Getting current time

First of all we need to get the current time, and then check whether it is the time to block the website or unblock it.

let date = new date();let hours = date.getHours();if(hours >= 14 && hours < 18) {    console.log('Time to block websites');    ....    ....} else {    console.log('Time to unblock websites');    ....    ....}

Inside blocker: Inside If — The If condition is true

Now we need to read the hosts file and convert the fetched data to string (the readFile() function will return the buffer data which needs to be converted into string).

After reading the file, we need to check whether the each website and redirect path is present in the hosts file or not. If it is present, then we can ignore it. Otherwise, we need to append redirectPath websiteURL to it which will look something like this:

127.0.0.1    www.someRandomWebsite

To implement this, we will use a for loop. The loop will iterate through each URL in the websites array and check whether it exists inside the file. To do this, we will use indexOf() method of strings. If the value is greater than zero, i.e. the given website is present inside the hosts file, we can simply ignore. Otherwise, if the value is not greater than zero, we need to append the redirectPath and website URL (separated by space) to the file.

fs.readFile(filePath, (err, data) => {    fileContents = data.toString();    for(let i=0;i<websites.length;i++) {        let addWebsite = "\n" + redirectPath + " " + websites[i];        if (fileContents.indexOf(addWebsite) < 0) {            console.log('Website not present in hosts file');            fs.appendFile(filePath, addWebsite, (err) => {                if (err)  return console.log(err);                console.log('File Updated Successfully');            });        } else {            console.log('Website is present');        }    }});

Inside blocker: Inside Else — If condition is false

If the condition is false, we need to check whether the websites in the list are there in the hosts file. If they are present we need to delete them.

For deleting, we will use a simple trick. We will read the file line by line. We create an empty string and check whether the current line contains any of the websites present in the list. If yes, we simply ignore it. Otherwise we will add that line to the string we initialized. After checking the last line, we will simply replace the current content of the file by this completeContent string.

The code to do so is very easy. First initialize an empty string (completeContent). Then read the file line by line. Follow the steps given in the code below. Then replace the file’s content by completeContent variable.

// Initialize the empty stringlet completeContent = '';

// Read the file line by linefs.readFileSync(filePath)    .toString()    .split()    .forEach((line) => {        ....        ....        ....        // Do the below given procedure to update completeContent });

// Replace the file contents by `completeContent` variablefs.writeFile(filePath, completeContent, (err) => {    if (err) {        return console.log('Error!', err);    }});

Now that we have access to each line, we can check whether this line contains any website by using a flag and a for loop. We set the flag to 1 (or true) and then run a loop to iterate through the list of websites. If the line contains the current website (we will check it using string.indexOf(substring) method), reset the flag to 0 and break the current loop. Outside the loop we check, if the flag is 1 (or true) we append the current line into the completeContent variable.

Please also note that if the flag is 1, we also check that whether the current line is last line or not. If it is not the last line, we append the current line into the completeContent string along with a "\n" so that the next line will be appended into completeContent from a new line (or with a line break). Follow along the following code inside the forEach() of above code block.

let flag = 1;for (let i=0; i<websites.length; i++) {    if (line.indexOf(websites[i]) >= 0) { // line contains website        flag = 0;        break;    }}

if(flag == 1) {    if (line === '')           completeContent += line;    else         completeContent += line + "\n";}

3. Running the code for the blocker function

Here is the code for the blocker function just in case you were confused with the distributed code in section 2:

Now, for running this function continuously, we can go for while (true) {} as an infinite loop. Inside it we can give some time delay so that it doesn't occupy the processor continuously.

Or, a better option is to use the setInterval() function. This keeps repeating the blocker function after a specific interval of time. But, setInterval() will run for the first time after the specified delay. Therefore we will have to call the blocker function once before the setInterval function.

blocker();setInterval(blocker, delay);

4. All Done! Let’s check our script

Time to run our script. To run the script, open the present working directory in a terminal and type in the following command:

sudo node blocker.js

If you are a Windows user, you can open the command prompt as administrator, go to the project directory, and then run the command:

node blocker.js

Please note that just for checking purposes, I am blocking facebook.com. Here is the test run:

Yuss! We Made It ❤

5. The Final Step...

For Mac and Linux

You can schedule this script to run whenever someone starts the system using crontab. Cron is a time-based job scheduler in Unix-like computer operating systems. You can read more about cron here.

So we will be adding our command through which we run the script (sudo node blocker.js) in the cron table. Doing this is very simple: open the terminal using ctrl+alt+t, then open crontab using sudo crontab -e. This command will open the cron table.

Note that we used sudo crontab, not crontab. This is will enable us to modify the cron table.

Once you have it open, add this line at the end (replace path-to-script with the path of your project directory):

@reboot node /path-to-script/blocker.js

That’s it! Doing this will run your script every time system reboots.

For Windows

The script can be scheduled to run every time the system starts in Windows also. Here is a very good article which tells how to do so.

Where to go from here?

Are you an open source enthusiast? Want to contribute to this project?
I am starting a new Open Source project named “Control-Yourself” which will be a desktop application made using Electron. The features will include:

• taking inputs from users about which times they want to block which websites
• tracking the time a user spends watching social media websites
• a Pomodoro timer
• and a todo list application with daily progress report of productivity.

Check out the repository, and add a comment “interested” on the issue you are interested to work on.

Now, let me give you the complete code with proper comments which will help you understand the code:

Complete Code (blocker.js)

That’s it

Have you found the article helpful?

Subscribe to TheLeanProgrammer to be the first one to get notified from me for future updates.

Feel free to reach out to me anytime if you want to discuss something :D

I would be more than happy if you send your feedback or suggestions, or if you ask questions. Moreover, I love to make new friends — so just drop me a mail.

Thanks a lot for reading till end. You can contact me in case if you need any assistance:
Email: madhavbahl10[at]gmail[dot]com
Web: http://madhavbahl.tech/
Github: https://github.com/MadhavBahlMD
LinkedIn: https://www.linkedin.com/in/madhavbahl/

Choosing a good title for an article is an important step in the writing process. The more interesting the title seems, the higher the chance a reader will interact with the whole thing. Furthermore, showing the user content they prefer (to interact with) increases the user’s satisfaction.

This is how my final project from the Machine Learning Engineer Nanodegree specialization started. I just finished it, and I feel so proud and happy ? that I wanted to share with you some insights I’ve had about the whole flow. Also, I promised Quincy Larson this article when I finished the project.

If you want to see the final technical document click here. If you want the implementation of the code, check it out here or fork my project on GitHub. If you just want an overview using layperson’s terms, this is the right place — continue reading this article.

FreeCodeCamp Medium post on Twitter

Some of the most used platforms to spread ideas nowadays are Twitter and Medium (you are here!). On Twitter, articles are normally posted including external URLs and the title, where users can access the article and demonstrate their satisfaction with a like or a retweet of the original post.

Medium shows the full text with tags (to classify the article) and claps (similar to Twitter’s likes) to show how much the users appreciate the content. A correlation between these two platforms can bring us valuable information.

The project

The problem that I defined was a classification task using supervised learning: Predict the number of likes and retweets an article receives based on the title.

Correlating the number of likes and retweets from Twitter with a Medium article is an attempt to isolate the effect of the number of reached readers and the number of Medium claps. Because the more the article is shared on different platforms, the more readers it will reach and the more Medium claps it will (likely) receive.

Using only the Twitter statistic, we’d expect that the articles reached initially almost the same number of readers (those readers being the followers of the freeCodeCamp account on Twitter). Their performance and interactions, therefore, would be limited to the characteristics of the tweet — for example, the title of the article. And that is exactly what we want to measure.

I chose the freeCodeCamp account for this project because the idea was to limit the scope of the subject of the articles and better predict the response on a specific field. The same title can perform well in one category (e.g. Technology), but not necessarily in a different one (e.g. Culinary). Also, this account posts the title of the original article and the URL on Medium as the tweet content.

How does the data look?

The first step of this project was to get the information from Twitter and Medium and then correlate it. The dataset can be found here and it has 711 data points. This is how the dataset looks like:

Analyzing and learning with the data

After analyzing the dataset and plotting some graphics, I found interesting information about it. For these analyses, the outliers were removed, and I just considered the 25% top performers for each feature (retweet, like, and clap).

So let’s take a look at what the numbers say for freeCodeCamp articles written on Medium and shared on Twitter.

What is a good title length?

Title length performance

Writing titles that have a length greater than 50 and less than 110 characters helps to increase the chances of a successful article.

What is a good number of words in the title?

Number of words performance

The most effective number of words in the title is 9 to 17. To optimize the number of retweets and likes, try something from 9 to 18 words, and for claps from 7 to 17.

Which are the best categories to tag?

Programming, Tech, Technology, JavaScript and Web Development are categories you should consider when tagging your next article. They appear for all the three features as a good indicator.

Which are the best words to use?

In this lexical analysis, you’ll notice that some words get much more attention on the freeCodeCamp community than others. If the intention is to make the articles reach further in numbers, talking about JavaScript, React or CSS will increase how much it’s appreciated. Using the words “learn” or “guide” to describe will also make the probability higher.

Using Machine Learning

OK! After taking a look at the data and extracting some information from it, the goal was to create a Machine Learning model that makes predictions of the number of retweets, likes, and claps based on the title of the article.

Predicting the number of retweets, likes, and claps of an article can be treated as a classification problem, and that is a common task of machine learning (ML). But for this, we need to use the output as discrete values (a range of numbers). The input will be the title of the articles with each word as a token (t1, t2, t3, … tn), the title length, and the number of words in the title.

The ranges for our features are:

• Retweets: 0–10, 10–30, 30+
• Likes: 0–25, 25–60, 60+
• Claps: 0–50, 50–400, 400+

And finally, after preprocessing our dataset and evaluating some models (everything fully described here), we reached the conclusion that the MultinomialNB model performed better for retweets reaching an accuracy of 60.6%. Logistic regression reached 55.3% for likes and 49% for claps.

As an experiment for this article, I ran the prediction of the title of this article and the model predicted that:

It will have 10–30 retweets and 25–60 favorites on Twitter and 400+ claps on Medium.

How is this prediction? ?

Follow me if you want to read more of my articles ? And if you enjoyed this article, be sure to like it give me a lot of claps — it means the world to the writer.

Flávio H. de Freitas is an Entrepreneur, Engineer, Tech lover, Dreamer and Traveler. Has worked as CTO in Brazil, Silicon Valley and Europe.

There are two things every person has in common: knees. Your friends have knees. Your coworkers have knees. So does your Aunt Sally. And your Uncle Aloysius.

You. Me. Left knee. Right knee.

Yet, despite this common bond, people continue to argue, fight and hurt one another. There is conflict everywhere, both online and in the real world. But what if it were possible, after centuries of squabbling, to bring peace and harmony to all mankind through our shared identity. Well, that day has finally come.

Introducing Deez Knees, the first and only social network for sharing photos of knees — only knees.

Why knees?

I created Deez Knees to unify humanity. Some of us are taller than others. Some of us have dark hair and others have light hair. But when it comes to knees, there is little variety. A knee has only two parts: an interior component (the knee bone) and an exterior component (the knee skin). This is true for my knees, your knees, his knees and her knees. By sharing pictures of knees, we remind ourselves that deep down, beneath the knee skin, we are all basically the same.

Deez Knees promotes unity

You know what else Deez Knees promotes? Diversity. “Hey, hold on a second mister,” you might be thinking. “You just said all knees are the same, so how can your amazing new creation promote both unity and diversity?”

That, my friend, is the power of Deez Knees.

Scalable, configurable, technologicable

The core technology behind Deez Knees is a sophisticated knee-recognition algorithm. You can try to post a photo of something else, but it won’t work. Upload a picture of your elbow? No dice. Share a pic of your butt? Try Instagram.

Deez Knees is fully integrateable across all digital platforms — vertical, horizontal and diagonal. The user interface is intuitive, responsive and gratuitive. Your personal information will remain secure. We use triple-bypass, hexagonalical encryption with cross-key hashtags. All data on Deez Knees are stored not only in the cloud, but also in the mist and the yawn.

Do we use blockchain? Yes, indeed — 27 blockchains, to be precise. Users can also select the cryptocurrency of their choice: Bitcoin, CyberDime or WebDough. Our network is lightening fast. Images load quickly thanks to our middle-out compression algorithm, which is based on science and math. Deez Knees is also chocked full of nanotechnology and artificial intelligence.

Digital, Advanced Tech, The Future — Deez Knees

Making the world a better place

Most tech entrepreneurs care only about money and fame. They want to be the next high-profile billionaire, grace the covers of magazines, hobnob with celebrities. Not me. I created Deez Knees for you. For you and your knees.

Will there be advertising on Deez Knees? That goes without saying. Will I give your personal information to marketing companies? Yes, of course, but not for free. Will I sell Deez Knees to Facebook the first chance I get? You betcha.

But don’t let these minor business details distract you. Deez Knees was created for a higher purpose. There is too much bad in the world. Let’s inject a little bit of good. Actually, make that a whole lot of good.

I don’t know about you, but I think this world of ours is worth saving. Enough with the crime and the wars. Enough with the nasty YouTube comments and the silly Twitter beefs. Why so hostile? Friend, you have only one life. One life and two knees. Use them well.

That’s where Deez Knees comes in. Instead of clapping back at that internet troll, share a photo of your knees. You’ll both soon realize you aren’t so different after all. Instead of bashing Republicans, or Democrats or Saskatchewanians, scroll through your Deez Knees feed and reflect on how we are all diverse yet the same, different yet not so different, unequal in some ways yet — really, when you think about it, really think about it— always equal in all the ways that count.

Deez Knees turns nasty into nicety

It’s time, my friend. Time to make this world a better place. Time to bring light into darkness. Time to turn conflict into proflict. All we need is you, me and Deez Knees. We can do it. Two knees at a time.

Five steps to get from idea to polished result

I’ve been working in the open source community for almost 5 years now, building and promoting developer tools including Meteor and Apollo. In that time, I’ve found that blogging is one of the most effective ways to spread ideas.

A blog post doesn’t take as long to prepare as a video or conference talk, but is easy to consume and can reach a ton of people. I’ve also personally gotten a ton of benefit out of writing: it has helped me organize my thoughts, teach people about technologies I love, and get my name out there.

Since publishing my first blog post ever in 2014, I’ve ended up writing 68 posts so far here on Medium, some with over 50k views and 1000 fans, and edited many posts for my friends and coworkers. Over that time, I’ve picked up a few strategies for taking a post from concept to publication.

In this article, we’ll go over five main steps of my process for writing a post:

1. Find a good topic and commit to it
2. Make your goals and audience specific
3. Have a beginning, middle, and end
4. Get feedback and iterate
5. Add finishing touches: packaging, publication, and promotion

Let’s get right into the first step!

1. Find a good topic and commit to it

You can’t get started on a post unless you have something to write about! When I talk to people who want to start blogging, this is often their main blocker.

The simplest strategy is to write about what you know. If you spent many hours learning about something, and you think you could explain it in just a few minutes, you’re going to provide a lot of value to your readers.

Another idea is to write about an area you think is lacking content. For example, right now there aren’t a lot of posts about how to apply to technical conferences, so content about that could fill a gap in the community.

Here are some specific types of posts you could go for. Examples are from the GraphQL-related posts on the Apollo blog:

1. A step-by-step guide to achieving a specific goal: “Building a great scrollable list in React Native with FlatList” or “Simplify your React components with Apollo and Recompose”. These are great for readers that are looking to get in, do a thing, and get out fast.
2. An in-depth survey on a particular topic: “Using nullability in GraphQL” or “Anatomy of a GraphQL query”. These are useful if you’re targeting a more interested audience that wants to grab a cup of coffee and learn a ton.
3. A numbered list of useful facts around a common topic: “4 simple ways to call a GraphQL API” or “5 benefits of static GraphQL queries”. These are a fun, lightweight read since you don’t have to commit to reading the whole thing, and it’s easy to consume the bite-sized pieces.

Now, let me dispel a few common concerns:

1. There is already content out there about this topic. Don’t let that stop you. Even if your idea has been written about before, you can put your own perspective on it, or make it specific to your situation.
2. My idea isn’t interesting enough. A lot of my friends and coworkers don’t end up writing because they are worried their conclusions might be boring or obvious. That’s a normal feeling! If you’re an expert on something, then of course the conclusions you’re writing about will be boring… to you. The key is that people in your audience don’t know that stuff yet.

Having said all that, at the end of the day, it’s hard to predict what topics will make a great post and which ones won’t, and often it’s the execution that makes or breaks a post, not a brilliant topic. My main suggestion would be to try writing about several different things and see what works.

_The lightbulb - a universal symbol for ideas. [James Pond on Unsplash](https://unsplash.com/photos/1qkyck-UL3g" rel="noopener" target="blank" title=")

2. Make your goals and audience specific

Now that you know your topic, you need an audience and goal for your post. Who will be reading it, and what are they going to get out of it?

Your goal needs to be specific so that you can focus all of your energy on one main idea. For this post, the goal couldn’t have just been “write about blogging”. I needed a more specific goal in mind:

• Audience: People who want to start blogging, especially about technical topics, but haven’t done it yet.
• Goal: Give people a concrete set of steps and pointers so they can get started.

Once you have these, keep your post focused by removing anything that doesn’t contribute, and avoid adding extra detail just because it’s related. I’ve found that relatively concise posts with a 5 - 10 minute read time are the most successful.

Knowing the background of your audience will allow you to tailor your writing to their existing knowledge, and can help determine how you should publish and promote your content. For example, I hope to publish this on freeCodeCamp, because a lot of people in my target audience might already read that publication.

3. Have a beginning, middle, and end

It’s disorienting when a post veers off in a direction you weren’t expecting. Plot twists can be a big benefit in fictional short stories, but it’s easier to consume a technical article if you get exactly what you expect. You can keep your readers on track by giving your post a comfortable structure.

Introduction

The first paragraph or two of your post will either convince the reader to stay on or lose their attention. Start off with a little bit of context to help people understand where your post fits into the big picture. Then, tell your audience what they will get out of reading your article. It might be tempting to leave the big reveal for the end, but watch out: if you don’t have a good hook, your readers won’t stick around to find out.

Middle

Now that you’ve told your readers what to expect, give it to them! Feel free to go into as much detail as you need, and leave sign-posts along the way to orient people. Use a lot of headings, numbered lists, and formatting to help people understand where they are, and enable them to skip around to the content they are most interested in.

Conclusion

Don’t just taper off into the void at the end of the article. If your reader has made it all the way there, they really care. Give them a quick summary of what they learned, a pat on the back for reading, and maybe even something to do next if they’re inspired - a call to action.

The format I’m suggesting here isn’t the most creative, and there are certainly other ways of doing it. But a simple structure is the most direct way to communicate with your readers.

_Like road signage, your post’s structure guides people along. [Bart Anestin on Unsplash](https://unsplash.com/photos/bXMbMw560C8" rel="noopener" target="blank" title=")

4. Get feedback and iterate

You won’t know what people are going to get from your writing until they read it. This is where your assumptions about your topic, goals, the details of the post, and the structure are really put to the test. If you want to have a good result, you can’t skip this step.

It might feel like you’re imposing when you ask for feedback, or you might be worried that it will be negative, but people are more willing to help than you expect. It’s much better to find out how your post could be better before you publish it to the world. When I was putting together this post, I got some super valuable feedback that made the content much better and more focused.

What should you ask your reviewers? My main advice is to leave it as open-ended as possible. Try not to explain up front what you meant to achieve. Hand over the draft as-is, and ask your reviewer what they got out of it or what should be changed. When someone on the Internet comes across your article, they won’t have any extra context and it has to stand on its own.

The main thing to validate from the feedback is: will this post achieve the goals you decided on in step 2? Iterate until you’re confident it will.

5. Add finishing touches: packaging, publication, and promotion

Now that you have the idea, the goal, the structure, and some feedback, it’s time to polish everything up and ship it.

Packaging

Come up with a great title and subtitle, and make sure your post has at least one image. This is what people will see when the post is shared on Twitter or Facebook, and it’s your chance to get people interested in reading.

It’s also important that your post looks and feels professional, so that your content can really shine. You should aim to have no spelling errors, grammar mistakes, or weird formatting in your post. If you have a friend that is great at spotting small details, ask them to read it over before publishing.

The freeCodeCamp article about getting published also has some great tips about writing style and formatting. Since you’ve already put so much work into your post, it’s worth it to add that little extra effort to really polish it up and give it a wider reach.

Finally, make sure to credit anyone whose work you referenced, or who helped review and edit your post.

Publication

You’re almost there! Pick where you actually publish the post so that it has the best chance of reaching your audience. Medium is generally a great place for technical content, and makes it easy for people to discover your writing.

For bonus points, try to get your post into a relevant publication that will help share your content - in this case, I’ve selected freeCodeCamp because I think this advice will be relevant to their readers. If you’d like to do the same, here are their directions for submitting your post. Publications in your areas of interest are likely also looking for posts, so don’t be afraid to get in touch!

Promotion

Once you’ve actually published the post, you’re not done! If you want people to see what you’ve written and get value out of it, make sure to share it in the places where your audience is likely to hang out. This might include Facebook groups, Reddit, Hacker News, LinkedIn, or any other platform. Also, make sure to share your creation on your own social media accounts, like Twitter. Your friends will be excited to read, share, and upvote what you’ve written!

And now, you’re done. Go get a coffee or take a walk - taking a blog post from start to finish is no small feat. Read any feedback and replies from the the community so that you can keep improving. And when you have another idea, go do it again!

_Beautiful presentation can enhance an already delicious donut. [Zach Miles on Unsplash](https://unsplash.com/photos/BE9AifuJfD4" rel="noopener" target="blank" title=")

There’s no replacement for practice

We just walked through five of the most important things to do when writing a blog post, from coming up with the idea to publishing. Now that you’ve read it, you try applying this advice and see what works for you.

I’ll leave you with one last bit of advice. The main thing I learned from blogging over the last 3 years is that I absolutely can’t predict what content will take off and what will end up being a total dud. Sometimes, I’ll put several days into a post, polishing every corner, and it won’t go anywhere. On the other hand, “GraphQL vs. REST”, my most-read post ever, was written in a few hours late at night.

So even if your first, or second, or third posts don’t succeed, keep trying new stuff, putting your ideas out there, and improving over time. The world wants to hear what you’ve got to say. Go tell them!

Huge thanks to Anvisha Pai, Angela Zhang, Katie Siegel, and the freeCodeCamp editors for helping review this post.