What is tutorial hell?

Every beginner seeks new skills or answers to their questions through tutorials. That isn't a bad thing, this is great. It shows that you are eager to learn. It only becomes bad when you get stuck in that phase. Imagine you are learning a new technology through a tutorial. You learn the basics, you build a project with the instructor, but now that you are done, instead of applying your newly learned skills, you watch another tutorial.

Are you in tutorial hell?

With every completed tutorial, you get a feeling of accomplishment. And it makes sense, a completed tutorial equals to a step forward. But is it really? It's hard to realize that you are in tutorial hell. Most people realize it only when they get out, but here are some hints that should help you understand if you are stuck in tutorial hell.

Basically, tutorial hell is like a loop. If you can look back on your current and past learnings and recognize this pattern in your learning path, you are or were in tutorial hell:

1. You complete a tutorial and learn a new skill (A).

2. You try building something using your newly acquired skill (A). Suddenly, you realize you are missing another skill (B).

3. You watch another tutorial. This time to learn the new skill (B).

4. You try building something using your newly acquired skill (B)… and so on

How to escape tutorial hell?

As previously mentioned, people often recognize that they are in tutorial hell, only when they already got out. If you were able to recognize it ahead of time, here are some tips on how to get out.

Practice makes the master: build something, whatever you want, anything. If you followed a tutorial on how to design a website, design another website. If you watched a tutorial on how to build a to-do app, build a scheduler. Basically, use your newly acquired skill to refine it by building something similar, but make it a bit more complicated by adding a new feature or upgrading the existing design. So, in the end, you are also learning something new by taking on that challenge.

Use other resources: watching tutorials is great to get started, but to improve or to quickly learn something new, you should look at other resources such as documentation, blogs, or e-books. Often, especially when you're working for a company or a client, you just don't have time to watch tutorials. You need to find an explanation quickly, that's where written resources come into play, better start using those as early as possible.

I was myself in tutorial hell, but I realized it only after I got out. Thankfully, already very early on I started adding new features to the tutorial projects that I have built, so at some point I felt comfortable pursuing an idea that I had for a project without following any videos. I didn't know everything, of course, but I learned how to deal with issues by doing research and reading documentation. If I could do that, you can do it too!

Thanks for reading my article! ♥ If you enjoyed it and want to see more tech-related content from me, follow me on BlueSky and X. To ensure you don't miss any future articles, subscribe to my Hashnode newsletter.

This project was powered by a combination of tools: Lovable (GPT Engineer) allowed me to generate and refine code, Supabase gave this project the backend functionalities it needed to store and manage the images. Where Lovable struggled, I utilized Visual Studio Code and my software engineering skills to fix the issues. Spoiler, I didn’t have to use VSCode that much. I will show you the journey from the first prompt to a functioning application, as well as the challenges and lessons learned when working with such a GPT Engineer like Lovable.

Laying the Groundwork

The Importance of a Solid Plan

When experimenting with Lovable, I’ve found that creating a detailed initial prompt is crucial. Lovable excels when it comes to implementing large and cohesive features, but often struggles with more fine-tuned, piecemeal fixes. Therefore, I would advise planning out your first prompt by for example utilizing ChatGPT to give your prompt a structure and fill any gaps it might have. Once I had my solid plan with key functionalities and some good to have additions for ImageVault, I uploaded it to Lovable. It took some time to process, but the result was mind-blowing, we had a working skeleton application in seconds.

The First Prompt and Loading Screen in Lovable

Getting Started with ImageVault

Lovable provided me with some components such as an upload are for images, basic authentication pages, simple dashboard to display uploaded images. After seeing the initial results, I exported the code to GitHub and decided to review it in VSCode. This allowed me to become more familiar with the generated code, so I would be able to make any adjustments later on and have an overview of what minor or major changes Lovable might make down the line.

An interesting, unexpected touch was Lovable actually giving the tool the name ImageVault itself. I thought the name perfectly captures the concept we are after with this image storage platform, so why not to keep this sense of identity from the start, right.

The Application Skeleton Lovable Created

Integrating Supabase

Connecting Supabase

As the next step, it was a good idea to integrate Supabase to handle backend operation like authentication and image storage. I started by creating a Supabase project and setting up a test user in the Authentication tab. Then, I used Lovable’s built-in “Connect to a project” functionality to seamlessly link Supabase to the application.

Connect Supabase Project

Adding Authentication

With Supabase connected, I added authentication functionality. Even though the process of creating authentication in Supabase is documented in tons of articles and videos, Lovable made it even easier than easy. I simply typed “Add authentication“. First Lovable suggests to you any SQL changes it wants to do, giving you the final decision on any major changes. Secondly it updated the sign-in and sign-up pages with suitable functionalities. After testing the test user’s credentials, I found out that it didn’t miss a single thing in this setup. It worked perfectly. Just wow.

Sign-In Page in ImageVault

Fixing the Image Feed

While the upload functionality worked, the images didn’t display properly in the feed. Initially, I asked Lovable to fetch and display the images, but it struggled to render them correctly. I was about fix this issue manually as I thought it would take less time, but I decided to stick to Lovable and instead try to make more precise prompts. I started giving it code snippets, entering my ideas and thoughts on how to fix it and guiding it towards the solution. After some back and forth we solved the issue and the images were visible, the links were public and copyible and the images can be deleted as well. This iterative process proved the improtance of small and focused prompts when working with Lovable later on.

Enhancing the UI

While testing the UI, I noticed some minor inconsistencies in the padding and margins, especially after adding the input and button for generating images and comparing the image grid to the rest of the UI. It was nothing major what couldn’t be fixed inside of VSCode, I decided not do it for now to show you what you get when working with Lovable in the final demo video later on in the article.

Adding Hugging Face Integration

With the feed functioning, I brought back the image generation feautre from my earlier project, integrating Hugging Face into the app. I had difficulties integrating Edge Functions, after one year my blog post seemed to be a bit outdated, especially when it comes to the new Supabase UI and some functionalities. After struggling for a while, I decided to integrate the generation into the frontend. Basically we generate the image and upload it to the Supabase Storage.

const [prompt, setPrompt] = useState("");
const [isGenerating, setIsGenerating] = useState(false);
const { toast } = useToast();
const queryClient = useQueryClient();

const handleGenerate = async () => {
    if (!prompt.trim()) return;

    try {
      setIsGenerating(true);

      // Get the current user
      const {
        data: { user },
      } = await supabase.auth.getUser();
      if (!user) {
        toast({
          title: "Error",
          description: "You must be logged in to generate images",
          variant: "destructive",
        });
        return;
      }

      // Initialize HuggingFace client
      const hf = new HfInference(import.meta.env.VITE_HUGGINGFACE_ACCESS_TOKEN);

      // Generate image using HuggingFace
      const image = await hf.textToImage({
        inputs: prompt,
        model: "stabilityai/stable-diffusion-2",
        parameters: {
          negative_prompt: "blurry",
        },
      });

      // Convert blob to File for upload
      const imageFile = new File([image], "generated-image.png", {
        type: "image/png",
      });

      // Create a unique filename
      const fileName = `${user.id}/${crypto.randomUUID()}.png`;

      // Upload to Supabase Storage
      const { error: uploadError } = await supabase.storage
        .from("images")
        .upload(fileName, imageFile, {
          contentType: "image/png",
          upsert: false,
        });

      if (uploadError) throw uploadError;

      // Create database entry
      const { error: imageError } = await supabase.from("images").insert({
        storage_path: fileName,
        title: prompt,
        user_id: user.id,
        is_ai_gen: true, // Set the is_ai_gen field to true
      });

      if (imageError) throw imageError;

      // Invalidate and refetch images query
      await queryClient.invalidateQueries({ queryKey: ["images"] });

      toast({
        title: "Success",
        description: "Image generated successfully",
      });
    } catch (error: any) {
      console.error("Generation error:", error);
      toast({
        title: "Error",
        description: error.message || "Failed to generate image",
        variant: "destructive",
      });
    } finally {
      setIsGenerating(false);
    }
  };

Lovable was able to adapt existing tables and components to the new requirements. Even though it has some great features like Edit or Revert, I noticed that I didn’t use them that much. Especially Revert was a bit disappointing because it only reverted the code but the Supabase changes to the tables stayed the same which caused me some headache in the project.

Edit and Revert Functionalities

Finally there were some finishing touches, like creating a landing page, creating a full-view modal and adding a robot icon to AI-generated images, so they can be differentiated from uploaded images. Here I made the mistake of putting all of these things into one prompt thinking these were some smaller changes, so what could go wrong. That’s where the revert function came to be handy. In my attempts of fixing everything what went wrong in image generation and route handling after entering this prompt, I only broke the implementation even more. Luckily after reverting and doing some manuals changes in VSCode I was able to get it back working for the demo. But before the demo…

Landing Page Lovable Created

Challenges and Lessons Learned

Version Restore in Lovable

As already mentioned previously it’s a very very needed functionality in such a GPT Engineer, I don’t know how I could’ve escaped those debugging loops without manually going into the code. One things, it would be nice to have an option to revert Supabase changes as well.

Prompting Tips

Through this process, I learned a few valuable tips for working with Lovable:

• Start with a detailed, well-structued inital prompt

• For subsequent changes, focus on one feature at a time to avoid breaking existing functionality.

Demo

I present to you ImageVault - a comprehensive CMS for uploading, storing and generating AI-powered images. It includes features like user authentication, secure storage, real-time updates, shareable links, all wrapped in an average user-friendly interface. All-in-all I liked working with Lovable and I can see myself using it for quick demos or MVPs for my future projects. I’m very eager to see how it’s going to evolve and if it could replace software engineers in the future, but until then it still has some issues to overcome.

Thanks for reading! ❤️ This article is part of the Content Storm which celebrates Supabase Launch Week 13. If you want to be the first one to see my next article, follow me on Hashnode, BlueSky and X!

Setup

To better differentiate and keep track of our users, let's use Supabase Auth. Luckily, Supabase has a “Next.js x Supabase” template which comes with an email and password authentication out of the box. To install it, run:

npx create-next-app -e with-supabase

Next up, create a new Supabase project and fill out the env.local.example file with the necessary information. Don't forget to rename env.local.example to env.local afterward.

Now let's remove all placeholder components that come with this template. The only thing left in the components directory should be AuthButton.tsx. Of course, you will also need to adjust page.tsx accordingly.

Database

Let's get our database setup. We will create two tables. One table will store our rooms with its specific admin. Another table will store the notes of each room. This means once a room is deleted, we should also delete the notes. Our SQL query will look something like this:

create table
  rooms (
    id uuid primary key default uuid_generate_v4 (),
    user_email text unique
    joined_emails jsonb
  );

-- RLS

create table
  notes (
    id uuid primary key default uuid_generate_v4 (),
    room_id uuid references rooms (id) on delete cascade,
    created_at timestamp with time zone default current_timestamp,
    text text
  );

-- RLS

Once we ran our query, we should activate the Realtime mode for our “notes” table. For that, head to the table and click on “Realtime off”. Once you confirm, it should switch to “Realtime on”. Now we can move on to our code.

Components

Join or Create Room

Let's create a component called JoinOrCreateRoom.tsx. Once our users have signed up and signed in. We will display this component, allowing our users to decide if they want to create a new room or join an existing one to view, add or delete notes. If you joined a room, you can quit the room and join another one. If you created a room, you have to delete your room to join or create another one. For these actions, let's create three functions:

const handleCreateRoom = async () => {
    if (!user) return;
    const userEmail = user.email;
    const { data, error } = await supabase
      .from("rooms")
      .insert({ user_email: userEmail });

    //Check
    if (error) {
      console.log(error);
      return;
    }

    // Get room
    const { data: roomData, error: roomError } = await supabase
      .from("rooms")
      .select()
      .eq("user_email", userEmail)
      .single();
    setRoom(roomData);

    //Check
    if (roomError) {
      console.log(roomError);
      return;
    }
  };

handleCreateRoom adds a new object to our rooms table, including user's email. The id for the room is generated automatically. That's why we need to get that ID and set our room state (using setRoom) to the room.

const [roomId, setRoomId] = useState<string>("");

  const handleJoinRoom = async () => {
    if (!user) return;
    const { data, error } = await supabase
      .from("rooms")
      .select()
      .eq("id", roomId)
      .single();
    if (!data) return;
    setRoom(data);

    //Check
    if (error) {
      console.log(error);
      return;
    }
  };

handleJoinRoom gets the roomId from the input and checks if such room exists. If so, we will set our room state (using setRoom) to the room.

const handleQuitRoom = async () => {
    if (!user) return;
    const userEmail = user.email;
    const { data, error } = await supabase
      .from("rooms")
      .delete()
      .eq("user_email", userEmail);
    setRoom(null);
    setNotes([]);

    //Check
    if (error) {
      console.log(error);
      return;
    }
  };

Finally, handleQuitRoom will delete the room only in that case if the room belongs to the user. In any case, it will always empty our notes and reset the room.

Here's how we will display it:

return (
    <div>
      {user &&
        (!room ? (
          <div>
            <input
              className="input"
              placeholder="Enter RoomID"
              type="text"
              value={roomId}
              onChange={(e) => setRoomId(e.target.value)}
            />
            <button className="btn ml-3" onClick={handleJoinRoom}>
              Join Room
            </button>
            <button className="btn ml-3" onClick={handleCreateRoom}>
              Create Room
            </button>
          </div>
        ) : (
          <div className="flex items-center">
            {room.user_email === user.email ? (
              <button className="btn" onClick={handleQuitRoom}>
                Delete Room
              </button>
            ) : (
              <button className="btn" onClick={handleQuitRoom}>
                Quit Room
              </button>
            )}
            <p className="ml-3">
              RoomID: <span className="ml-3">{room.id}</span>
            </p>
          </div>
        ))}
    </div>
  );

In the end, here are the props we will pass into that component:

type Props = {
  user: User | null;
  room: any | null;
  setRoom: React.Dispatch<React.SetStateAction<any | null>>;
  setNotes: React.Dispatch<React.SetStateAction<Note[]>>;
};

NoteBlock

Not much to say to this component, besides that it's used for displaying and deleting out notes. Here how it looks like:

import { useState } from "react";
import { createClient } from "@/utils/supabase/client";

interface Props {
  id: number;
  text: string;
  className?: string;
}

const NoteBlock: React.FC<Props> = ({ id, text, className }) => {
  const [isDeleting, setIsDeleting] = useState(false);

  const supabase = createClient();

  const handleDelete = async () => {
    try {
      setIsDeleting(true);
      const { error } = await supabase.from("notes").delete().eq("id", id);
      if (error) {
        throw new Error(error.message);
      }
    } catch (error) {
      console.error("Error deleting note:", error);
    } finally {
      setIsDeleting(false);
    }
  };

  return (
    <li
      className={`flex justify-between border border-white px-6 py-3 rounded-lg ${className}`}
    >
      <p className="w-full text-white border-r-2 border-white pr-6 mr-6">
        {text}
      </p>
      <button className="btn" onClick={handleDelete} disabled={isDeleting}>
        Delete
      </button>
    </li>
  );
};

export default NoteBlock;

Page

Finally, let's put our page together.

const [user, setUser] = useState<User | null>(null);
const [room, setRoom] = useState<any | null>(null);
const [notes, setNotes] = useState<Note[]>([]);

const [note, setNote] = useState<string>("");

We will use the following states to track our user, room and notes data. As well, as the input for the note.

We will have two useEffects one will be used to get the room data of the admin if he decides to leave the page. Another one will be used to set up our Realtime connection.

useEffect(() => {
    const getUser = async () => {
      const userData = await supabase.auth.getUser();
      setUser(userData.data.user);
      if (!userData.data.user) return;

      const user = userData.data.user;

      // Get room

      const { data, error } = await supabase
        .from("rooms")
        .select()
        .eq("user_email", user.email)
        .single();
      setRoom(data);
      getNotes();

      //Check
      if (error) {
        console.log(error);
        return;
      }
    };

    getUser();
  }, []);

useEffect(() => {
    if (room) {
      getNotes();
      supabase
        .channel(room.id)
        .on(
          "postgres_changes",
          {
            event: "*",
            schema: "public",
            table: "notes",
          },
          () => {
            getNotes();
          }
        )
        .subscribe();
    }
  }, [room]);

First, we create a channel. As the identifier, we will use the ID of the room. Next, once we get an update in our “notes” table, whether it's INSERT, DELETE or UPDATE (that's why we use *) we will update our notes.

To update our notes, we use getNotes method:

const getNotes = async () => {
    if (!user || !room) return;
    const { data, error } = await supabase
      .from("notes")
      .select()
      .eq("room_id", room.id);
    if (!data) return;
    setNotes(data);

    //Check
    if (error) {
      console.log(error);
      return;
    }
  };

To save a note, we use saveNote method:

const saveNote = () => async () => {
    if (!user || !room) return;
    const { data, error } = await supabase
      .from("notes")
      .insert({ room_id: room.id, text: note });

    //Check
    if (error) {
      console.log(error);
      return;
    }

    setNote("");
    getNotes();
  };

In the end, this is how we display our page:

return (
    <div className="flex-1 w-full flex flex-col gap-20 items-center">
      <nav className="w-full flex justify-center border-b border-b-foreground/10 h-16">
        <div className="w-full max-w-4xl flex justify-between items-center p-3 text-sm">
          <JoinOrCreateRoom
            user={user}
            room={room}
            setRoom={setRoom}
            setNotes={setNotes}
          />
          {supabase && <AuthButton user={user} />}
        </div>
      </nav>

      <div className="animate-in flex-1 flex flex-col gap-20 opacity-0 max-w-4xl px-3">
        <main className="flex-1 flex flex-col gap-6">
          {user && room && (
            <div className="flex flex-col gap-6">
              <div>
                <input
                  className="input mr-3"
                  onChange={(e) => setNote(e.target.value)}
                  value={note}
                  type="text"
                  placeholder="Enter Note"
                />
                <button className="btn" onClick={saveNote()}>
                  Save Note
                </button>
              </div>
              <div className="mt-6">
                <h1 className="text-2xl font-bold">Notes</h1>

                <ul className="flex flex-col gap-2 mt-3">
                  {notes.map((note, index) => (
                    <NoteBlock
                      className="mt-3"
                      key={index}
                      id={note.id}
                      text={note.text}
                    />
                  ))}
                </ul>
              </div>
            </div>
          )}
        </main>
      </div>

      <footer className="w-full border-t border-t-foreground/10 p-8 flex justify-center text-center text-xs">
        <p>
          Powered by{" "}
          <a
            href="https://supabase.com/?utm_source=create-next-app&utm_medium=template&utm_term=nextjs"
            target="_blank"
            className="font-bold hover:underline"
            rel="noreferrer"
          >
            Supabase
          </a>
        </p>
      </footer>
    </div>
  );
}

Demo

We did it! Here is the demo of the final product. Enjoy! ^🎉

Thanks for reading! ❤️ If you want to be the first one to see my next article, follow me on Hashnode and Twitter!

Setup

1) Open your Supabase project dashboard or create a new project.

2) Create a new bucket called images.

3) Create a new database table called image_generation. You can make use of Supabase's integrated AI assistant by passing the prompt: “New table called image generation with id uuid, input text”. This is cool to get the proper SQL structure in place, you will probably need to adjust some labels and attributes, but that's what my SQL query looked like in the end.

create table
  image_generation (
    id uuid primary key default gen_random_uuid (),
    input text,
  );

4) Set up a directory for all of your future edge functions under /supabase

5) Install Supabase CLI if you haven't done it yet

6) Create a new folder under /supabase/huggingface-image-generation

7) Inside that folder, create index.ts (this is where our code is going) and generate TypeScript types from the remote database using the following command (replace your-project-ref with your project reference).

supabase gen types typescript --project-id=your-project-ref --schema=storage,public > ./types.ts

Hugging Face

Sign up on Hugging Face if you haven't done it yet. Generate a new Access Token under Settings/Access Token. Under Edge Function/Manage Secrets on Supabase add a new secret HUGGINGFACE_ACCESS_TOKEN and paste your secret there. As you can see, Supabase has already taken care of other secrets we will need in our application.

Code Breakdown

First, we import all Deno modules we will need in our application, followed up by declaring our hf constant we will use to access Hugging Face models later.

import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
import { HfInference } from 'https://esm.sh/@huggingface/inference@2.3.2'
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.7.1'
import { Database } from './types.ts'

const hf = new HfInference(Deno.env.get('HUGGINGFACE_ACCESS_TOKEN'))

Next, we declare the interface of our webhook payload.

type inputRecord = Database['public']['Tables']['image_generation']['Row']
interface WebhookPayload {
  type: 'INSERT' | 'UPDATE' | 'DELETE'
  table: string
  record: inputRecord
  schema: 'public'
  old_record: null | inputRecord
}

Now let's get the input from our payload and set up the Supabase Client to interact with our database.

serve(async (req) => {
  const payload: WebhookPayload = await req.json()
  const inputRecord = payload.record
  const supabaseAdminClient = createClient<Database>(
    Deno.env.get('SUPABASE_URL') ?? '',
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
  )

/* ... */

Let's generate the image using the model stabilityai/stable-diffusion-2. Feel free to try out other models later on, Hugging Face has a lot of them.

/* ... */

  const imgDesc = await hf.textToImage({
    inputs: inputRecord.input,
    model: 'stabilityai/stable-diffusion-2',
    parameters: {
        negative_prompt: 'blurry',
    }
  })

/* ... */

In the end, we upload the image to Supabase Storage together with inputRecord.id, so we will have a reference to the input. Finally, we return a response. Our code looks in the end like this.

import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
import { HfInference } from 'https://esm.sh/@huggingface/inference@2.3.2'
import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.7.1'
import { Database } from './types.ts'

const hf = new HfInference(Deno.env.get('HUGGINGFACE_ACCESS_TOKEN'))

// Input WebHook

type inputRecord = Database['public']['Tables']['image_generation']['Row']
interface WebhookPayload {
  type: 'INSERT' | 'UPDATE' | 'DELETE'
  table: string
  record: inputRecord
  schema: 'public'
  old_record: null | inputRecord
}

// Start the server

serve(async (req) => {
  const payload: WebhookPayload = await req.json()
  const inputRecord = payload.record
  const supabaseAdminClient = createClient<Database>(
    Deno.env.get('SUPABASE_URL') ?? '',
    Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
  )

  // Generate the image using Hugging Face's API

  const imgDesc = await hf.textToImage({
    inputs: inputRecord.input,
    model: 'stabilityai/stable-diffusion-2',
    parameters: {
        negative_prompt: 'blurry',
    }
  })

  // Upload the image to Supabase Storage

  const {data, error} = await supabaseAdminClient
    .storage
    .from('images')
    .upload(inputRecord.id, imgDesc, {
      cacheControl: '3600',
      upsert: true
    })

  if (error) console.log(error)
  if (data) console.log(data)

  return new Response('ok')
})

Deployment

To see our edge function in action, we have to deploy it to Supabase. For that, we run the following command.

supabase functions deploy huggingface-image-generator

Last but not least, we have to set up the webhook we referenced in our code.

Demo

Now that it's done. Here's the demo of how it works. Sorry for the quality, I recorded it on a toaster.

Thanks for reading! ❤️ This article is part of the AI Content Storm by Supabase. If you want to be the first one to see my next article, follow me on Hashnode and Twitter!

The introduction of self-hosted Deno Functions during the Supabase Launch Week 7 got me thinking of how easy it now became to build that kind of AI application. In this article, we will take a look at how to host your own Edge Functions and build an endpoint to communicate with GPT-3 or GPT-4 using this new Supabase feature and some OpenAI magic.

Setup

1. Sign up for a fly.io account and install flyctl.

    brew install flyctl
   

2. Clone the demo repository to your machine.

    git clone https://github.com/supabase/self-hosted-edge-functions-demo.git
   

3. Sign in to your fly.io account.

    flyctl auth login
   

Functionality

Now we are all set to add functionality to our application. If you have existing Edge Functions, you can drop them into the ./functions folder. If not, no worries, we will go through the process of writing such a function in the next part.

Our function will consist of 3 steps:

1. Receiving a text

2. Prompting it to OpenAI

3. Returning a summary of the text

Let's create a new file ./functions/summarize/index.ts, where we will handle requests to our endpoint. Our endpoint results out of the combination of our project name and this path (in my case https://supa-summarizer-demo.fly.dev/summarize).

interface reqPayload {
  text: string;
  model: "gpt-3.5-turbo" | "gpt-4";
}

First, we declare an interface for our payload, which is the text (text) and the GPT version we want to use (model).

import { OpenAI } from "https://deno.land/x/openai/mod.ts";

/* ... */

const openAI = new OpenAI("OPENAI_API_KEY")

Next, we import the OpenAI library, which makes it much more convenient to interact with the API. As you can see from the import, Supabase Edge Functions utilize Deno which caches packages directly, so you don't need to install huge NPM packages.

import { serve } from "https://deno.land/std@0.131.0/http/server.ts"

/* ... */

serve(
  async (req: Request) => {
    const { text, model }: reqPayload = await req.json();
    const prompt = `Summarize the following text using maximum of 300 characters: ${text}`;

    const response = await openAI.createChatCompletion({
      model,
      messages: [{ role: "user", content: prompt }],
    });

    return new Response(JSON.stringify(response), {
      headers: { "Content-Type": "application/json",
                Connection: "keep-alive" },
    });
  },
  { port: 9005 }
);

Here we are utilizing the serve() function to handle our request. First, we destructure our request to get the text which we pass into our prompt. Then we pass our model and prompt into the createChatCompletion() function from the OpenAI library. Last but not least, we return the response, which will include a summary of our text.

Now the last thing to do is to launch our application. Use the command below in your terminal. You will be asked a bunch of questions, we will answer yes to copying our configuration. We will choose the name of our project, in my case it's supa-summarizer-demo. We don't need any databases for this project, and we want to launch it now.

fly launch

That's it! The application is ready to go. Now let's try it out with Postman.

Summarize

We will be using an excerpt from a New York Times article called “It’s Not the End of Work. It’s the End of Boring Work.” about AI, a very suitable topic for our application. (You can try summarizing this article if you want, haha.)

Despite all the dazzling digital advances, the trillions of dollars spent on computer technology have done almost nothing to make the world a more productive place. The economist Robert Solow, who identified this problem, called it the productivity paradox. In 1987, a decade into the computer revolution, he observed that productivity growth had actually slowed down. You can see the computer age everywhere, he wrote, but in the productivity statistics.

We pass it into our request as text and we select gpt-3.5-turbo as our model because the fragment is very short, otherwise we could have used gpt-4 for better results.

In return, we get the following summary.

The trillions of dollars spent on computer technology have not translated into increased productivity, as noted by economist Robert Solow in 1987. This is known as the productivity paradox, where the computer age is evident everywhere except in productivity statistics.

That's it! Now you can easily use GPT-4 without paying for the ChatGPT Plus subscription instead you pay for what you use. I will leave the app running until the end of April and cap it at $5. Feel free to use it if you want to try it out, but I encourage you to build your own implementation.

If you want to learn more about Supabase Edge Functions, check out this blog post written by Supabase Team.

Thanks for reading! ❤️ This article is part of the Content Storm which celebrates Supabase Launch Week 7. If you want to be the first one to see my next article, follow me on Hashnode and Twitter!

Main Events before 2022

My web development journey started, as for most newcomers into tech, during the first lockdown of 2020. Ah, what a crazy time it was.

“Why not make it even crazier and learn JavaScript, HTML, and CSS?” — I thought

Just kidding, it was the best decision of mine, together with joining the Tech Twitter community at the end of 2020. Not only that, but at the end of January 2021, I decided to start blogging on DevTo and Hashnode to share things that I couldn't express in under 280 characters. At that time, my main goals were:

• Growing my Twitter audience

• Learning and building cool stuff

• Blogging about that cool stuff

So, that was it until the end of 2021 when I started learning Web3, first with help of Buildspace and then LearnWeb3DAO. This leads us to April 2022 when puzzle pieces started to come together.

EthAmsterdam

I found out about EthAmsterdam through one of Francesco Ciulla's tweets.

It looked like an incredible opportunity to challenge my existing web development skills together with my newly acquired Web3 knowledge. So, I applied, and it didn't take long until I got the confirmation that I was accepted to participate in my first-ever hackathon.

Finding a team wasn't difficult. I found out later that these events have a big demand for front-end developers. I teamed up with three guys from Cardiff, two of which were experienced in blockchain development and the other one in the energy sector, while I took the responsibility for building the front-end for our application.

The project that we have been working on is called “Flexergy”. It's about providing electricity to homes in demand of it. Instead of taking the electricity from big whales such as power plants and paying big bucks, the network provider buys the energy from locals with solar panels or batteries. Because the system is completely decentralized, the locals who provide energy can set the price themselves.

In the end, we got third place (tied) in the sponsored challenge by Mina, and we won some prize money from the Filecoin prize pool.

Overall, it was a great experience and I learned a lot more about blockchain development and explored the beautiful city of Amsterdam.

First Tech Job

In June, I started my first part-time tech job as a working student at a legal online service firm called Juris. In the 4 months that I worked there, I experienced hands-on how it is to work at an office and improved both my soft and hard skills. I got very comfortable with React, as before I mostly used Vue for my side projects. Through code reviews and reading code, someone else wrote, my code style drastically improved. Sadly, it didn't last long, as I had to move in October because of my studies.

Return to Blogging

If you scroll through my blog posts, you will see a massive gap between September 2021 and August 2022. This is because I stopped blogging for a while. Why?

At first, it was the beginning of my studies, but after it became more of a writer's block. I couldn't come up with ideas for blog posts I thought were good enough.

Finally, in August, I set a goal for myself to take on writing again in September. I failed... in a good way. I came back to writing already in August because of the Hashnode Writeathon. If you haven't heard about it, it's a challenge to incentivize bloggers on Hashnode to write 4 posts in a month, 1 post per week.

I completed the challenge and as you can see, it helped me overcome my writer's block and that's why I'm still blogging up to date. Even though I haven't won any prizes, I received an opportunity that I will mention later in this article.

First Tech Conference

September was filled with activities. I went to a JavaScript meetup in Luxembourg, traveled to London, visited a few concerts and celebrated my birthday, but visiting my first tech conference in Croatia was a huge highlight.

Although, the arrival was a "rocky road" to say the least. I loved the city of Zadar and the Infobip Shift Conference. I met new people and people who I knew from Twitter, people who got me interested in web development. Not only that, but I listened to talks and stories of other developers. There were also cool stands and giveaways. Overall, it was a blast!

Technical Writing

After participating in the Hashnode Writeathon I got an opportunity from nexten.io to write technical articles all around development for their blog. From there, I also got an opportunity to collaborate with supabase.com during their launch week. This was incredible because I used Supabase before and still use it for all my projects which require some kind of database or authentication. I like writing, and being able to make some additional money from it makes it even more special.

HackaTUM

So, here we are, the last big chapter of 2022.

“It all begins and ends with a hackathon.” — Nobody ever said

This hackathon was organized by my university and as I was new on the campus (I spent last year studying online), I decided it was a great opportunity to meet people and make new friends, maybe even win some prizes.

Do you remember how I said hackathons lack front-end developers and that it's easy to find a team? Well, that was the case again. I joined a team of other three 3rd semester students like myself.

This hackathon was somewhat different from the first one. Just one-fifth of the challenges were based on blockchain. Sponsored challenges were the main challenges, in EthAmsterdam sponsored challenges were more of a side quest.

After visiting a few workshops and discussing what we learned from them, my team and I decided to go with the challenge organized by Solana.

The project that we have been working on is called “Greeft”. We implemented two types of loyalty points into the Solana Pay app, which can redeem gift cards and rewards in our shop. One type of loyalty point is called a “green token”, it is given to the user when purchasing goods & services which are environmentally friendly, e.g. a ticket for the metro. With this token, you can redeem vouchers and gift cards cheaper than with the other type, which is given for all other types of purchases.

We presented our project to the Solana team at the end of the hackathon. We got into the final, where we presented our project in front of all the other participants. And guess what, we WON!

Conclusion

Looking back at 2022, it was an incredible ride. I never thought I could achieve and experience so many things at once. I never thought installing one social media app and one worldwide pandemic could force me to write this blog post and just think to myself “Wow, has this actually happened?”, but it happened, and I'm more than grateful for this.

Of course, I don't know if next year will be that amazing, and I don't have to know that. All I need is to stick to setting and completing my small goals. I just hope that in a year I will be able to look back at all those small goals, see an incredible big picture and think to myself “Wow, has this actually happened?”.

Thanks for reading! ❤️ This blog post is part of Dev Retro 2022. This is my last blog post for this year, so I wish you happy holidays and a happy new year! If you want to be the first one to see my next article, follow me on Hashnode and Twitter!

Mockury is one of my biggest side projects yet, so building a whole backend from scratch would cost a lot of time, which I could invest into other parts of this project. Gladly, Supabase takes care of the Database and Authentication. In this blog post, I will show you exactly what I mean by that and how you can implement them into your project.

Authentication

Mockury is in its early days right now, as it hasn't even “officially” launched yet. This means it doesn't have any pricing plans, which would limit one or another feature where we would need to differentiate users. Although this is planned, there is a use case for authentication that is implemented into Mockury already now. I'm talking about the newsletter.

Using some basic JSX and Tailwind CSS, I designed two forms. One for the new users to sign up and another one for existing users to sign in. Here's how they look.

Next up, I installed the Supabase library and hooked it up to my application. This was very straightforward, as Supabase provides great documentation for a quick start with Next (the JavaScript framework that I'm using). Wait, you are using another framework? Don't worry, Supabase got you covered, whether you are using Angular, React, Vue or Svelte.

In the quick start documentation, Supabase Auth UI is utilized for creating sign-in and sign-up forms. It's quick and easy to implement. It has different themes and supports providers. In my case, I wanted to have a custom design, but if you're looking for a fast setup, you should give it a go.

Even though I'm utilizing a custom form design, it doesn't make things that much more complicated. We will be using three functions from the Supabase library: signInWithPassword(), signUp() and signOut().

Sign up

const [name, setName] = useState<string>("");
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");

const [success, setSuccess] = useState(false);

const supabase = useSupabaseClient();

const signUp = async (e: FormEvent) => {
    e.preventDefault();

    const { data, error } = await supabase.auth.signUp({
      email,
      password,
      options: {
        data: {
          name,
        },
      },
    });

    if (error) {
      console.log(error);
    }

    if (data) {
      setSuccess(true);
    }
};

return (
    {/* ... */}
    <form onSubmit={signUp}>
        <input
            id="name"
            type="text"
            onChange={(e) => setName(e.target.value)}
        />
        <input
            id="email"
            type="email"
            onChange={(e) => setEmail(e.target.value)}
        />
        <input
            id="password"
            type="password"
            onChange={(e) => setPassword(e.target.value)}
        />
        <input type="submit" value="Sign up" />
    </form>
    {/* ... */}
)

First, we initialize three states, which change depending on the user input. After the user submits our form, we execute the signUp() function. The function takes in FormEvent, so we can prevent the default behaviour. Then we fire the supabase.auth.signUp() function, which takes in an email and a password. You can also add optional data, in my case I send the user's name which will be added to the database, more on that later.

The fourth state (success) is then used to display a message asking the user to confirm their email.

Find out more about signUp() 👉 HERE

Sign in

const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");

const supabase = useSupabaseClient();
const router = useRouter();

const signIn = async (e: FormEvent) => {
    e.preventDefault();

    const { data, error } = await supabase.auth.signInWithPassword({
      email,
      password,
    });

    if (error) {
      console.log(error);
    }

    if (data) {
      console.log(data);
      router.push("/studio");
    }
};

return (
    {/* ... */}
    <form onSubmit={signIn}>
        <input
            id="email"
            type="email"
            onChange={(e) => setEmail(e.target.value)}
        />
        <input
            id="password"
            type="password"
            onChange={(e) => setPassword(e.target.value)}
        />
        <input type="submit" value="Sign up" />
    </form>
    {/* ... */}
)

As you probably already noticed, it's almost the same as our sign-up component. The only difference is that we utilize the supabase.auth.signInWithPassword() function. It also redirects the user to another page, once signed in.

Find out more about signInWithPassword() 👉 HERE

Providers

If you want to give your users more freedom on how they can sign in. You can use any providers that Supabase offers. I couldn't even fit all of them into this screenshot, that's how many there are.

As Gmail services are fairly widespread, that's the only provider I'm offering in my application. It's also easy to implement into the code, but needs some setup in advance using Google Cloud Platform and Supabase Dashboard. But don't be afraid, the process is greatly documented.

const supabase = useSupabaseClient();

async function signInWithGoogle() {
    const { error } = await supabase.auth.signInWithOAuth({
      provider: "google",
    });

    if (error) {
      console.log(error);
    }
}

return (
    {/*...*/}
    <button onClick={signInWithGoogle}>
        Google
    </button>
    {/*...*/}
)

When the button is clicked we call signInWithGoogle() which fires supabase.auth.signInWithOAuth where we can specify the provider we want to use, in this case, it's Google.

Find out more about providers 👉 HERE

Sign out

const supabase = useSupabaseClient();

const signOut = async () => {
    const { error } = await supabase.auth.signOut();

    if (error) {
      console.log(error);
    } else {
      router.push("/studio");
    }
};

return (
    <button onClick={signOut}>
        Sign out
    </button>
)

If you thought providers are easy to implement, then signOut() is just kindergarten. It's crazy how easy Supabase makes it to set up authentication that I would spend weeks implementing using Express and Passport.

Find out more about signOut() 👉 HERE

Database

As mentioned earlier, I set up authentication in advance for pricing plans. But we can already now utilize it to keep our users updated on how the development of Mockury is going on. For that, we need to keep track of users who want to receive our newsletter issues.

Even though, you can create tables using Supabase's GUI. It's even better to know some basic PostgreSQL, so you can set up tables faster and utilize RLS (Row Level Security).

My favourite way (and probably the fastest way) to create tables is to utilize quick-start templates offered by Supabase. Choose the template you want to use, modify your query and run your SQL snippet. It's that simple.

As I'm not that good with SQL, I like to duplicate the template. If I do something wrong, I would just switch between them and compare the original with my modified snippet, find the problem and make changes.

For our user database, we will be using the User Management Starter template.

create table users (
  id uuid references auth.users not null primary key,
  email text not null,
  name text not null,
  newsletter boolean default true not null
);

alter table users
  enable row level security;

create policy "Users can view their own info." on users
  for select using (auth.uid() = id);

create policy "Users can insert their own info." on users
  for insert with check (auth.uid() = id);

create policy "Users can update own info." on users
  for update using (auth.uid() = id);

Here's my table. We got the user's identifier, user's email, user's name and if they want to subscribe to the newsletter.

We also have RLS (row-level security) enabled, so each user can only get, set and change their data and stop any possible misbehaviour.

Now we have the table, how do we add the users to our database? Let me introduce you to triggers and functions.

Triggers and functions

Triggers listen for events such as insert, update or delete. Once one of your specified events is triggered, the trigger calls a function.

Functions are SQL snippets that contain assignments, declarations, loops, flows-of-control, etc.

create function public.handle_new_user()
returns trigger as $$
begin
  insert into public.users (id, email, name)
  values (new.id, new.email, new.raw_user_meta_data->>'name');
  return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

First, we create a function that inserts the user data into our user database. Using new.raw_user_meta_data we can access the optional data that we provided during the sign-up, in my case I only wanted the name of the user. By now, you probably noticed that one column is missing: newsletter. This is because when creating the table, we used the default true statement which sets our newsletter value to true automatically as long as no other data is provided. We will allow users to modify it later.

In the end, we create a trigger which calls our newly created function once a new user has been added to the auth.users table, which is provided by default by Supabase.

Manipulating data

Not every user wants to receive the newsletter, and that's fine. We shouldn't force it onto them, so let's provide a checkbox button which will change the value of newsletter.

const [newsletter, setNewsletter] = useState<boolean>(true);

const session = useSession();
const supabase = useSupabaseClient();
const router = useRouter();

useEffect(() => {
    const getData = async () => {
      const { data, error } = await supabase
        .from("users")
        .select()
        .single();

      if (error) {
        console.log(error);
      }
      if (data) {
        setNewsletter(data.newsletter);
      }
    };

    getData().catch(console.error);
}, [supabase]);

const updateNewsletter = async () => {
    const { error } = await supabase
      .from("users")
      .update({ newsletter: !newsletter })
      .eq("id", session?.user?.id);

    if (error) {
      console.log(error);
    }

    setNewsletter(!newsletter);
};

return (
    {/* ... */}
    {newsletter ? (
        <button onClick={updateNewsletter} className="btn">
            Deactivate
        </button>
     ) : (
        <button onClick={updateNewsletter} className="btn highlight">
            Activate
        </button>
     )}
    {/* ... */}
)

When the settings page renders, we fetch the current value of newsletter using supabase.from().select() which decides which checkbox button we should show.

Find out more about select() 👉 HERE

Once the button is pressed, we update our database using supabase.from().update() where we have to provide the user ID due to RLS. We also update the newsletter state on the client side to display the appropriate button.

Find out more about update() 👉 HERE

Now I have a collection of users with their newsletter preferences. Using Supabase's table editor, I can filter users who want to receive my newest newsletter issue, export the data to CSV and send out the issue.

Check out Mockury and sign up for the newsletter to see how it works yourself!

Thanks for reading! ❤️ This article is part of the Content Storm which celebrates SupaLaunchWeek 6. If you want to be the first one to see my next article, follow me on Hashnode and Twitter!

Idea and inspiration

Let's kick off with the origin of the idea, my first thought was:

“What are the greatest CSS art creations that I have seen and how would I make them different (even better if possible)?”

One of these creations that popped into my head was “The Impossible Checkbox” by Jhey Tompkins. I found it fascinating, funny and kind of cute how the bear reached out for the checkbox to turn it off. This reminded me of cat banks.

Cat banks are little boxes which have a button on top of them. The user puts a coin on top of the button, presses it, and a little kitten pops out of the box to steal the coin. This makes storing coins in piggy banks more exciting and cuter.

Of course, I didn't get straight to work. This was my third CSS art project and I wanted it to be different from my last two. I wanted to learn something new from this experience. After thinking about it, I came up with two big points about the “Stealing Coin Cat” that were interesting and new to me: 3D Perspective and Cohesive Animations.

From there I equipped myself with an image of such a cat bank and started working on the art itself.

Box

The box is fully made of trapezoids, besides button, cover shadow or hidden elements. I was thinking pretty long on what to put at the front. I thought about putting fruits, vegetables, logos or whatsoever. In the end, I decided to simply go with “Hashnode”. The most difficult part was probably layering, because of different elements that should be hidden behind each other when animated.

Cat

The cat is made of basic shapes, such as eclipses and triangles. Somehow I completely forgot to add whiskers to the cat, but it still looks decent because I wasn't going for anything hyperrealistic. At first, I didn't add any eye highlights, so the eyes of the kitten looked like void. While I was working on other elements, I constantly looked into those deep eyes and at some point I decided to come back and make it cuter by adding highlights.

Paw and coin

The paw was a challenge on its own. It should be under the cardboard and then go over the cardboard, which would be a complete mess to animate. Except if you break it down into two parts, and that's what I did. The first part stretches up, the second part waits until it's finished, then it stretches down towards the coin. It was quite hard to time it precisely and make it look like the paw is stretching from inside to outside, but I think it turned out pretty well.

The coin (if you haven't noticed) represents the Hashnode logo. It was part of the competition to integrate the Hashnode logo into your art piece. At first, I wanted to put the logo at the front of the box, but at some point I realized that it looks like a coin, so I replaced the golden circle with a golden Hashnode logo.

Animations

I think that's the most keyframes I have ever used. The animations aren't that special, it's only moving, rotating and stretching. As previously said, the timing was the hardest thing to implement, but after multiple tries and fails, at some point it worked fine.

Here's the result, you can check out the final code in this CodePen:

Results

The challenge had tons of interesting submissions and winners were picked randomly. I was lucky enough to win a mug and a t-shirt, which you can see in this picture.

In the end, I learned more about 3D Perspective and Cohesive Animations in CSS, which were my main goals going into this challenge.

Thanks for reading! ❤️ This article is part of the series “Things With CSS”. If you want to be the first one to see my next article, follow me on Hashnode and on Twitter!

In this article, I want to share some ideas on what you could build as your next side project and what technologies you could use. You don't have to build all of them or even any of them. I just want to share some of my recommendations and if I can even slightly inspire your next project, I'm going to consider it a win.

Clone interesting websites

Someone would say cloning is a very uncreative project idea, and I will agree in 9 out of 10 times. That one case when I would disagree is if you gave the cloned website your own twist.

But creativity isn't the thing you necessarily should chase when choosing a project idea. I'm going to mention a couple famous websites. They were built by groups of professionals at large companies. These people aren't rookies, and you could learn a lot from them by just mimicking their work and understanding why and how they used this or that technique.

Netflix (Example)

Netflix's landing page is very straightforward, you have:

• Header: logo, language and sign in button.

• Hero section: showing the catalogue of shows, catchphrase, email input with a call-to-action button

• Features: rows split into an image and description

• FAQ: Expandable drop-downs with question and text

• Footer: Menu, legal and commercial stuff

It's pretty easy to replicate. I did it myself as well, taking some inspiration from other streaming services such as Disney+ and Apple TV+. It was actually my first website made outside a course. So if you want to check it out, I'll leave it here.

If you would like, you could go one step further and build the logged in page. This one could be even easier, as it consists of rows filled with images of shows and movies, with a big banner at the top.

Similarly structured landing pages

Discord

It's the same as the Netflix's landing page, it's just more colourful and has no FAQ section.

Slack

Very similar to Netflix's landing page, but adds some statistics and testimonials after features section.

Some quick ideas for web apps

If you are NOT into cloning websites, here are some ideas for web applications you could create. Let your creativity loose on how to design and build them.

Basic

• To-do List
• Calculator
• Word Counter

Advanced

• Task Management
• Music Player
• Dashboard

Technologies

When it comes only to landing pages like in the first chapter, you could probably go with plain HTML, CSS, and maybe JavaScript if even needed. Otherwise, you can save some time on designs using CSS frameworks.

When it comes to web applications like in the second chapter, you could still build them with plain HTML, CSS, and JavaScript, but you will save time and effort using a JavaScript framework. Of course, only go with the last option if you're familiar with JavaScript.

Every day, there's some new JavaScript framework or CSS framework that is popping up, so you can go with any of them, but here are my suggestion (aka most popular ones).

CSS frameworks

• Bootstrap
• Tailwind CSS
• Materialize CSS
• …

JavaScript frameworks

• React
• Angular
• Vue
• Svelte
• …

Choose any framework (if you need to) and good luck with your next side project! I hope I could give you some inspiration and ideas on what technologies you could use.

Thanks for reading! ❤️ This article is part of the #4articles4weeks challenge. If you want to be the first to see my next article, follow me on Hashnode and on Twitter!

TypeScript? JavaScript on steroids.

TypeScript is a programming language. Its syntax builds on top of JavaScript, by introducing types which are typical for object-oriented programming languages. These types should allow developers to find mistakes before running your code.

JavaScript uses dynamic variables, which can change their type. TypeScript introduces static types, which won't allow variables to change their type during runtime.

JavaScript's in built types are also available in TypeScript, such as number, string, boolean, symbol, null, undefined, object. TypeScript also allows you to create your own types and not only that, it comes with a few more types such as enum, never, tuple, array, union, any, void and never.

All this helps the code to become more structured, as one variable will always correspond to one type. The code becomes more bulletproof, no wrong types can be passed into components or functions, which could also save your app from crashing when a user inputs wrong data.

If you want to find out more about TypeScript, I recommend reading this great blog post by Sergii Kirianov → Don't be afraid of TypeScript

Tech Stack for Reclip

TypeScript

TypeScript was the newest technology in my tech stack that I haven't used before. I took a course beforehand on Scrimba which introduced me to the basics of TypeScript and its syntax. This was enough to get me started with this project and get my hands dirty in the “wilderness” aka building a new project from scratch.

React

React isn't my go-to frontend framework, I love using Vue and Nuxt more. Recently, I got a job where React is the frontend framework of choice, so I decided to use it in this project as well to get better at it. I haven't worked with it a lot before, so I thought this project would be a good opportunity for it.

Tailwind CSS

Something familiar that was in this project for me was Tailwind. It's my go-to CSS framework and I love it. I believe it's even better to use with React than Vue, so I had no intentions of choosing another CSS framework or using only raw CSS.

FFmpeg

FFmpeg enables video & audio record, convert and stream right inside browsers. It's definitely the most important node package I have to work with and understand for this project. It's basically the brain of the editor. I already tried its vanilla version half a year ago. This time I used WebAssembly and JavaScript port to allow editing directly on user's device without any external servers in play.

What is Reclip about?

Reclip is an editor that allows to crop videos from 16:9 ratio (used on YouTube, Twitch) to 9:16 ratio (used on TikTok, YouTube Shorts). This is the main functionality of the first version of the editor. It just crops your video wherever you want it to do so. This is also what most of the other editors already do.

The problem is that so much content just gets thrown away as you crop from horizontal to vertical. The mission of Reclip is to crop the content in a way that the most important stays constantly in the frame. This will be realized using the following features.

For more information or better readability, check out → Reclip

File Uploader (TypeScript Example)

The first thing that you see when opening the Reclip editor is the file uploader, so I wanted to showcase how I used TypeScript to build this component.

type FileUploaderProps = {
    inputVideo: File | null | undefined
    setInputVideo: (video: File | null) => void
}

First, we define types for properties the component will take in. inputVideo is a state that equals undefined in the beginning, but after the user chooses a video can only be null or of type File. setInputVideo is just a setter for our state that takes in exactly the two values I mentioned before.

function FileUploader({ inputVideo, setInputVideo }: FileUploaderProps) {
  const hiddenFileInput = useRef<HTMLInputElement>(null)
  const [fileName, setFileName] = useState<string>('')

  //...
}

export default FileUploader

After declaring the types for our props, our component will only take in these props if its values have the appropriate type.

We also add two hooks:

1. Reference to the hidden file input. I wanted to style the input differently (and overcomplicate things), so we need it. As you can see, type is declared differently in this case compared to our previous snippet. It follows this formula for all types of hooks: hook<type>(default value).

2. State of the file name. Again I wanted to display the name, but because we hide the default file input, it has to be saved separately. In this case, we're using another hook, but the syntax is the same as for our previous reference.

return (
        <div>
            {inputVideo ? (
                <div className="flex items-center px-4 py-2 bg-gray-100 rounded-sm">
                    <button
                        className="button mr-5 rounded-full"
                        onClick={handleClick}
                    >
                        Change
                    </button>
                    <p className="font-bold text-sm overflow-hidden">
                        {fileName}
                    </p>
                </div>
            ) : (
                <div className="flex flex-col">
                    <img
                        className="w-1/2 h-1/2 mx-auto"
                        src="/img/upload-video.svg"
                        alt="Upload video"
                    />
                    <button
                        className="button highlight mt-20"
                        onClick={handleClick}
                    >
                        Choose video
                    </button>
                    <p className="mt-2 text-center text-xs text-gray-600">
                        Supported format <span className="font-bold">MP4</span>{' '}
                        | Max file size <span className="font-bold">50MB</span>
                    </p>
                </div>
            )}

            <input
                type="file"
                className="hidden"
                ref={hiddenFileInput}
                onChange={handleChange}
                accept=".mp4"
            ></input>
        </div>
    )

Now we add some JSX and Tailwind CSS, of course no TypeScript, so no types here.

const handleClick = () => {
    hiddenFileInput?.current?.click()
}

This is fairly interesting, as earlier we declared hiddenFileInput's type as HTMLInputElement. It's an interface that comes from the DOM and can be an HTML input element or null. Because we can't click on a null value, we add optional chaining ?. to check that we're safe to click on it.

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        const fileUploaded = event.target.files?.[0]
        if (fileUploaded !== undefined) {
            if (fileUploaded.size <= 52_428_800) {
                setInputVideo(fileUploaded)
                setFileName(fileUploaded.name)
            } else {
                alert('File size is too big!')
            }
        }
    }

At last, we want to check when a file is selected. We also need to retrieve the data, so we have to pass an event handler as a parameter. There are multiple event handler types available by React, so you need to be careful to select the right one. Don't worry, you'll be notified by your IDE if you use the wrong one. In our case, it's ChangeEvent<HTMLInputElement>.

That's it, our file uploader is ready! I hope you could understand TypeScript better by means of this example.

Thanks for reading! ❤️ This article is part of the #4articles4weeks challenge. If you want to be the first to see my next article, follow me on Hashnode and on Twitter!

Speaking of skills, some people think Googling is cheating, something we were taught in school a lot, when actually it should be seen as a skill. Google is an algorithm that takes in words and gives you the best possible results. So choosing the correct words is the key to getting the correct results and saving you time on solving a problem.

But what will you do if you get stuck and Google can't help you? Let's picture the scenario where you have digested your issue, you looked for a solution on Google / Stack Overflow. You took a walk, you slept on the issue, and nothing has helped you come up with a solution.

Two heads are better than one...

… but more is even better. That's where communities come into play. There's a probability that someone else had the same issue, but came up with a solution by themselves and never documented it online, but they would love to help you.

In this article, I want to mention 3 communities that I heard about or that I'm part of, and how they can help you get “unstuck” in your problem-solving journey.

freeCodeCamp

If you're looking for an amazing non-profit community to learn to code, freeCodeCamp is the way to go. They help tons of people get into coding, offering courses and other learning materials. freeCodeCamp has a forum where you can ask questions if you get stuck, and it's an incredibly open and heart-warming community.

I especially recommend taking a deeper look into it if you're just beginning your programming journey.

Learn more here -> freeCodeCamp

LearnWeb3

I have been interested in Web3 for almost 10 months now, and a lot of what I've learned is due to LearnWeb3. Besides teaching you about web development and blockchain through their website filled with different tracks, they have a strong and active community on Discord.

Not that long ago, I have been working on an app and got stuck, so I turned to the help channel on Discord. It took just a few hours before I connected with Dany Tulumidis who helped me out.

If you're looking to get into Web3, or you're stuck and need a helping hand in that space, LearnWeb3 is the way to go.

Learn more here -> LearnWeb3

Tech Twitter

Even though you won't get much help, posting a tweet describing your issue (without any audience). You can reach out directly to developers on Twitter, and in most cases they are happy to answer and help you out.

Your first message counts, as a simple “Hi!” would probably be just ignored. In your first message, state what your problem is or pose questions you require answers to. Of course, be polite and don't expect people you're reaching out to, to answer quickly.

If you have done everything correctly, developers would be glad to answer your question or guide you to some resources that might be able to help you out.

Thanks for reading! ❤️ This article is part of the #4articles4weeks challenge. If you want to be the first to see my next article, follow me on Hashnode and on Twitter!

Tell me in the comments which communities are you in.

Gamer Kid

Video games accompanied me since I can remember. And when I say “since I can remember”, I mean it. “Finding Nemo”, the video game from 2003, is one of if not the farthest memory I can remember. My 4-year-old-self was happier than ever to get first to the family computer to play some mini-games with his favourite cartoon characters.

Just four years later, I got my Nintendo DS and “Pokémon: Heart Gold” which is still one of my most favourite games, probably because of nostalgia. Staying longer after school and swapping Pokémon from one friend to another? Sign me up!

And when you're passionate about something, it won't take long before you want to find out what's happening behind the scenes…

School Informatics

Besides learning how to turn on the computer and type in Word, let's not talk about this informatics class, I had another informatics class where we made games with different game engines / programming languages, one of them was Scratch.

Scratch is a high-level block-based visual programming language and website aimed primarily at children as an educational tool for programming. – Wikipedia

As someone who gamed a lot, I quickly realized that Scratch is way too limited on what you can create with it. We coded some basic programs in Visual Basic as well, but nothing from that hooked me to pursue programming as a hobby, not even talking about doing it professionally.

First Developer Gig

“Wait… first programming gig? But you didn't even like programming? What has changed in two years?”

One word: Minecraft.

Minecraft is an extraordinary game. Whether you like combat, adventure, building or whatever activity, you can find it in this game. I found… programming.

There are many big public servers where anyone can play mini-games on. These servers and mini-games are maintained by fully fledged teams of builders, supporters, moderators, and developers. I was very intrigued when I discovered an opening for the position of a developer on one of these servers. One of the most important requirements was Java.

I made myself on track learning this programming language. I didn't get the job. Fair to say, I haven't even tried. Instead, I discovered a group of Minecraft YouTubers who took part in an event. This event needed some plugins, so I contacted the organizer and started supplying them with features they wanted for their event. I was paid miserably compared to the work hours and sleepless nights I've been putting in. But I got the feeling of acceptance and my first programming gig, my teenage-self was seeking.

Web Journey

For two years, I've been making games here and there with the Unity engine, but nothing big. Then the famous lockdown happened, which overwhelmed me with spare time. I missed having fun with my classmates, so I decided to build a Discord Bot to play “The Werewolves of Millers Hollow” aka “Mafia” with them. Discord Bots can be coded in Python or JavaScript, the last one sounded very similar to Java. Even though developers often mention how different Java and JavaScript are, I found myself fairly comfortable with this new language.

Afterwards, I found out about HTML, CSS, and even later about frontend frameworks. Then I joined Twitter and Hashnode, so basically without the lockdown, I would've not written this article.

First Developer Job

I got my first developer job not that long ago, June 2022. Even though I received some interview proposals on Twitter, I typically felt underqualified, or I was lacking time because of my studies. It was LinkedIn that got me my first and current job. I work for a legal information service provider as a working student (part-time) which doesn't clash with my studies, so it felt like a perfect fit. I mostly fix bugs in the company's webshop and implement small features using React. My probationary period ends this month, so let's see what the future holds.

Key Takeaways

1. It's rarely love at first sight — it took me some time to fall in love with coding. If it feels hard or boring, try to use another learning method or learn another programming language.

2. Know your worth — I worked sleepless nights for barely any cash. Don't put hours of work into something for someone without getting a proper payout.

3. Apply, apply, apply — I felt underqualified more than I should have. You will never meet all the requirements for a job opening. And that's a good thing, you'll learn something new as you go.

Thanks for reading! ❤️ This article is part of the #4articles4weeks challenge. If you want to be the first to see my next article, follow me on Hashnode and on Twitter!

So a few weeks ago, I finally had time to get into Three.js. But on its own, it looked very complicated. So I checked out Trois.js. It implements Three.js into a more familiar environment of Vue.js. After some experiments, I got into brainstorming ideas. I've never done a form before, so I decided to go with this idea, but using Three.js make it more interesting for people to fill out.

With the goal set, I warmed up to the idea of having a Mystery Box which would have a form element on each side and when you fill out one side it would go to the other, until you've completed it and the box would open revealing something interesting. I had to scrap this idea after understanding that it would be pretty difficult to project a 2D element on a 3D element in the way that would look good. But I decided to stick to this topic and here's what I did.

After using my favourite research buddy Google, I found a Lucky Block model on the internet which I decided to implement beside my form. And let the camera rotate around the z-axis of the block, but to make it more interesting, I added some variables which would multiply its rotating speed by looking at how many form fields were filled out.

<template>
<GltfModel src="../../assets/LuckyBlock.glb" :visible="LBvisible" />
</template>

<script>
data() {
    return {
        t: 0.2
    }
},
props: {
    LBvisible: Boolean,
    speed: Number
},
mounted() {
    setInterval(() => {
        this.t += this.speed * 0.01
    }, 10)
}
</script>

To not waste any time designing a form, as the main target of the project was getting more familiar with Three.js, I found an existing form design on Figma (The Perfect Input Field Kit) which I then implemented into the website.

Afterwards, I assigned an event (keydown for typing inputs and change for selection inputs) to each input element in the form. Like that, I could check if the field was filled or not and speed up the rotation of the block accordingly.

Now the only thing was to add a reward that would appear out of the block. I decided to go with a cake model I found on the web. I added a simple animation which would:

• Shrink the block (aka zoom out the camera)

• Replace the block with the cake

• Enlarge the block (aka zoom in the camera)

Here's how it works:

onSubmit() {
    const zoomOutInterval = setInterval(() => {
            // Enlarge the distance between the object and the camera
            this.radius += 4
    }, 10)

    setTimeout(() => {
        clearInterval(zoomOutInterval)
        // Set the rotation speed of the camera back to normal
        this.speed = 1
        // Hide the Lucky Block
        this.LBvisible = false
        zoomIn()
    }, 1000)

    const zoomIn = () => {
        const zoomInInterval = setInterval(() => {
             // Shrink the distance between the object and the camera
            this.radius -= 4
        }, 9)

        setTimeout(() => {
            clearInterval(zoomInInterval)
            // Correct the distance
            this.radius = 13
        }, 1000)
    }
},

Besides the block, the form disappears as well. Instead, you can see a little message which thanks the user for filling out the form, nothing extraordinary.

I still have some issues with the loading time for my models, which take approximately 2-3 minutes (differentiates upon the internet connection) to load. So besides the link to the website, I'll also leave a little clip which shows all the possible interactions with this website, so you don't have to wait an eternity. 😅

You can check out the website here 👉 Lucky Form

You can check out the code here 👉 Lucky Form (Code)

Finally, I just want to add that I really like this technology and I see myself using it in the future, especially for projects where 3D models are necessary. Although this technology is still fairly new and there are not a lot of good tutorials on the internet, the documentation is clear and helpful.

Thanks for reading! ♥

If you like this article, consider following me on Twitter. I post tips around web development and progress on my projects. If you have any questions, my DMs on Twitter are always open.

So this is “My 100 Days of Code in a Nutshell 🥜”.

From Day 1 to Day 50

The challenge began on December 4th when I started with the course “50ProjectsIn50Days”. This course is made by the people I mentioned above and is oriented to practising the fundamentals of HTML, CSS, and JavaScript. I found this very useful as I was lacking experience, especially in the JavaScript sector. Another beauty of this course was its perfect match to the 100DaysOfCode challenge, as I wouldn't need to plan anything for the first half of my challenge.

So that's what I did. I followed this course and worked every day on a new project. Most of the projects took me about 20-30 minutes to complete. But I didn't stop there…

Another blessing of this course was the creative part. Because the projects are so small, you have enough possibilities and time to customize your projects. I took another 20-30 minutes for customizations. I tried to keep them simple but also useful in the context of the current project. Sometimes it was a design change, other times an additional functionality, I tried everything.

After finishing this course, I was confident enough to try out a framework. I chose Vue.

From Day 51 to Day 61

To be honest, it wasn't my first encounter with Vue. But it was the first time that I was building a fully fledged web application with this framework.

I decided to build a weather application, as I wanted to try to incorporate some kind of Rest API into my app. To make it more interesting and different from other weather applications, I saw out there, I decided to use glassmorphism as the main design theme. I read a lot about it in the past and found some great websites which made it easier to create glass panels with CSS.

I didn't have any big problems building it and in just 10 days of code I finished it.

If you want to find out more about glassmorphism and why you should use it, check out my blog post 👉 Glassmorphism - what's so interesting about it?

From Day 62 to Day 68

The next project I wanted to do was an e-commerce type of application. As product, I decided to go with fast food like sandwiches and additional drinks, deserts etc. The project consists of a landing page, menu, and sandwich builder.

To make the sandwich builder more authentic and realistic, I went on the Subway page and looked up ingredients they use in their sandwiches. When constructing your perfect sandwich, you're limited on how many ingredients you're able to choose. This is because a lot of companies do that to not run into any financial issues because the sandwich price stays consistent. The menu is split into two parts, the menu itself and a basket where you can see what products you have already selected.

This was pretty much it. In the end, I never published the project as I didn't like how the design turned out.

From Day 69 to Day 71

After the blow with Empare (that's what the last project was called), I decided to uplift my UI and CSS skills. I read more about design and followed more accounts which posted about it on Twitter. For a long time, I've been following Pratham and Jay on Twitter, who post beautiful CSS art. That's when I decided to try it out myself.

There is not a lot to say about it except that it seemed more difficult than it actually was. Then I wrote a full breakdown of this project and published it on Hashnode and DevTo. It was my first blog post that really took off and received a lot of attention.

If you want to find out more about this project, check out my blog post 👉 Ukulele with CSS

From Day 72 to Day 90

Besides ukulele, for which I created a CSS art, I have another passion which is football. For a long time, I wanted to create The Higher Lower Game clone, but with footballers and their goals. The problem then was that I didn't know how to get the information (such as footballer's names, goals, etc.) and how to set up the backend. At this point of time, I already knew how to get the first one done and that's what I've directly taken care of as well as the frontend. The backend was completely new to me, so I decided to take The Complete Node.js Developer Course on the side while working on the other things for this project. I learned about Node.js and Express that allowed me to finish this project.

If you want to find out how I got the information on footballers for this project, check out my blog post 👉 Web Scraping with Puppeteer

From Day 91 to Day 100

The last but not least is my current project - Circlist. It's a web app that allows you to gather people, you interact the most on Twitter with, in one or multiple lists. This isn't my first take on the Twitter API, but surely the biggest. The project nears its first beta-testing and likewise its final release. I already finished the application. The last thing to do is the landing page, which will take some time to design and then to build. So certainly not one I could complete in the last 10 days and which goes beyond this challenge.

So that was “My 100 Days of Code in a Nutshell 🥜”. Thanks for reading and have an amazing day! ♥

Where can I find these projects?

50Projects50Days | GitHub

Holo Weather | Website & GitHub

Empare | Never published

Ukulele | Website, CodePen & GitHub

FootGuess | Website

Circlist | Never published

In case you want to try out 100DaysOfCode for yourself, you'll find out more information on the following website (https://www.100daysofcode.com/).

If you liked this article, consider following me on Twitter. I post tips around web development and progress on my projects. If you have any questions, my DMs on Twitter are always open.

Preparation

First, I came up with the script for the animation.

Mario is standing on a platform. He's approached by Goomba. When Goomba touches him, Mario dies in his iconic way (move up and then drop down). Whole animation loops and starts from the beginning.

As with my last CSS art, I had to find a template to orientate myself. Last time it was my ukulele. I don't have any Mario merchandise lying around, so I went on the internet. I found original sprites of Mario's animation, so I decided to use these as well as sprites for Goomba's animation.

Now it was clear, I had to create two images of Goomba, two images of Mario as well as an image of a platform, so five images in total.

Pixel Art

The game which comes from 1985 isn't unexpected to be made using pixel art, so I went for this approach for my CSS art as well. The best way to create pixel art in CSS is using box shadows. Although it's the best choice, it's not the easiest one if you have to do it by hand. You'll need to fill out box shadows for every pixel and filling out 16x16 fields could be pretty intimidating and boring.

Luckily, there is a great website called Pixel Art to CSS which takes all the dirty work away and only leaves you with the creative process.

After drawing the characters and frames for their animation, I exported them as key frames into the project. I tried to do the same with the ground, but its size in comparison to the characters was too big, so I went with key frames for the ground as well. But because it had only one frame, it didn't make any difference visually. The scale was now fixed, so I counted that as a win.

Placement and Animation

Now the only thing left to do was placing our elements and animating them. For every element, I created a div to which I assigned the specific CSS class. I placed them on the screen like this using absolute position, as it was the easiest choice in this situation.

Last but not least are walking animation for Goomba and death animation for Mario. Using key frames, I mapped two points between which Goomba is going to walk (start of the platform and end of the platform). While in between, I timed the point when Goomba slightly touches Mario and that's when Mario's death animation should begin. To create the animation as well as to time it properly, I broke down the animation into three parts.

• Part One: Mario flies up

• Part Two: Mario falls down

• Part Three: Mario goes back up

That's pretty much it. From this point the animation loops back to beginning and as everyone knows a loop in an animation makes everything two times better.

You can find the whole animation and code on the dedicated CodePen page for this project.

Thanks for reading and have a great day! ♥

If you liked this article, consider following me on Twitter. I post tips around web development and progress on my projects. If you have any questions, my DMs on Twitter are always open.

There are a few ways to access the necessary data, Rest APIs, public databases and web scraping. Puppeteer is an awesome tool for getting the last one done. In this post, I want to help you discover this tool for yourself and show you what it's capable of.

Let's get the first question out of the way.

What is Puppeteer?

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol.

That's what the official documentation says. Complicated isn't it? In simpler terms, we're dealing with an invisible browser which is controlled via code.

Show me the way!

After installing the Puppeteer NPM package, you'll have to write some code and show Puppeteer where and which information you would like to get.

Note that most of Puppeteer's methods are asynchronous, so you'll have to use an async function or then method. For upcoming examples, I'll stick to the first one.

Let's get some data!

I think that the best method to learn something new is by practicing. So let's take an example for web scraping with Puppeteer and break it down. I'll try to explain every step as best as I can. But if you're stuck or you want to find out more about a specific method, I encourage you to check out the official documentation.

For starters, we need to check if the website allows web scraping at all. For this, we will check if the website contains a robot.txt file. If not, we are good to go. Otherwise, you'll see which restrictions are placed by the owner of the website.

In this example we will be scraping some data from the official English Premier League website, to be more precise, a table of football players and their total amount of goals per season.

With the following code we will launch our browser with a predefined viewport. And navigate to the website while leaving some time for all components to load at the end of the code.

Note: websites may differ according to the client's viewport that's why it's important to predefine it.

const viewport = {'defaultViewport' : { 'width' : 1430, 'height' : 979 }}
const browser = await puppeteer.launch(viewport)
const page = await browser.newPage()
await page.goto('https://www.premierleague.com/stats/top/players/goals')
await page.waitForTimeout(3000)

Now let's scrape the table we're seeing on the website. For that, we will use $$eval to find all the table components using HTML elements as the selector and then getting the innerText in each of the selected elements.

//'tbody tr td' - selector
let tableEls = await page.$$eval('tbody tr td', tds => tds.map(td => {
    return td.innerText
}))

Now we just have an array filled up with all the strings that we could find in the table. We have empty strings and unnecessary spacing. We should also split this array into smaller arrays containing the data for each individual player and then create an object out of each array to make it easier to read and access for the front-end.

//Modifications
tableEls = tableEls.map(el => el.trim())
tableEls = tableEls.filter(el => el)
tableEls = chunkArray(tableEls, 5)
tableEls = tableEls.map(el => el.slice(1))
//Final Arr To Save
let seasonData = []
//Create an object
tableEls.map(el => {
    let obj = {
        id: nextID,
        name:  el[0],
        team: el[1],
        country: el[2],
        goals: +el[3]
    }
    nextID++
    seasonData.push(obj)
})

// Close the browser at the end of your session
await browser.close()

Let's get some images!

Now that we've collected our data about each and every footballer in the table, we could also use some images of each football player. The website, we were currently on, doesn't provide us with any photos, so let's start a new session and go to the well-known website which finds billions of photos across the whole internet. I'm talking about Google Images.

First, we start a new session and open a new page. Then we use the array seasonData to get the name of each footballer. The name needs some adjustment because we will pass it into an URL and any space has to be replaced with +. Afterwards we will need to select the first image on the page. This can be done using XPath which gives the shortest unique path to every element on a website. Then we select our element and get the image URL. In the end, we should add it as a property to our player object.

for(let i = 0; i < seasonData.length; i++) {
    let obj = seasonData[i]
    const search = obj.name.replace(/\//g, '+')
    await page.goto(`https://www.google.com/search?tbm=isch&q=${search}`)

    const imageSelect = '//*[@id="islrg"]/div[1]/div[1]/a[1]/div[1]/img';
    await page.waitForXPath(imageSelect)
    const image = await page.$x(imageSelect)
    let imageSrc = await page.evaluate(img => img.src, image[0])

    obj.imageURL = imageSrc
}

Now using Node's file system we can save our seasonData array to a JSON file, pass the data to the front-end or create a Rest API.

More possibilities

This example is just the tip of the iceberg. You can do other things with the Puppeteer library such as interact with elements, take screenshots and more. If you want to find out more about it, check out the official documentation.

I hope I could waken interest in you to learn more about this awesome JavaScript library.

Thank you for your time! ❤

If you liked this article, consider following me on Twitter. I post tips around web development and progress on my projects. If you have any questions, my DMs on Twitter are always open.

Another thing that I really wanted to try out for a long time is CSS art. I saw a lot of beautiful art pieces on Twitter and they really inspired me to create my own. That's how I combined programming and music in this art piece.

HTML & CSS

Body

First I created the body of the ukulele using a div and pseudo-elements (after and before).

Bridge & Saddle

Before adding the neck, I've added a bridge at the bottom of the body. Using a pseudo-element I also added a saddle on top of the bridge where the strings are going to end.

Neck

Up next we have the neck of ukulele. It's a simple rectangular div.

Headstock

After creating the neck it was time to put the headstock on top. In this case the pseudo elements are just purple circles which give ukulele's headstock an interesting shape.

Tuning pegs

Now it was time to add the other end called turning pegs where the strings are going to be attached. I decided to split them into two rows with a pair in each row. Like that I could position them relative to each other.

Turners

With the same method as mentioned before, I added the turners themselves.

Strings

Now let's add the most important part the strings. Again positioned relative to each other but absolute in the global container. These are positioned exactly between the saddle and the nut.

Nut

Not a lot to say about the nut, just a div positioned absolute in the global container.

Rest of the strings

The part that took me the longest, I reckon. These are placed in a separate container. In this container they are placed absolute and under a specific angle, so they barely touch the pegs.

Frets

A lot of divs positioned relative to each other and absolute in the global container.

Animation and Audio

Now let's bring the whole thing to life with some animations and sounds. At first I wanted to make the strings realistic that means the animation would start at the point of interaction. But that would be too much effort for a project like this. So I went with a very simple animation in which the string would just move from side to side but get less momentum.

For the sounds I took my ukulele and my phone. I recorded each string separately and assigned each audio to each string.

If you want to try out the audio and animation, I made a separate website for this CSS art (desktop only).

If you want to use this art (with appropriate reference 😉), feel free to check it out on CodePen.

Thank you for your time! ❤

If you liked this article, consider following me on Twitter. I post tips and progress on my projects such as this one. If you have any questions, my DMs on Twitter are always open.

A relatively new trend on the web is Glassmorphism. You can imagine it as taking a glass panel and putting it in front of a background. Give the glass a little bit of colour and a blur effect which result in the background changing completely when you're looking through the glass piece. Now add the information that you want to transmit to your user on top and voilà, you've got yourself a pretty looking glassmorphism UI.

Is it all about pretty looking? Or is there more to it? Let's find out.

1) Minimalist design 🐁

Minimalist design took over a while ago. We don't stuff the websites full of information anymore, instead we build in more white space, add more margin and sprinkle in some padding. This way the user doesn't feel attacked or pressured with information which could be very overwhelming.

Glassmorphism gives you the possibility to do the same by spreading your information on a glass pane, leaving more space in between to see through the glass into an interesting background.

2) Focus user's attention 🔎

By spreading your information on the glass pane, it would differentiate itself from your other content. So it can easily catch user's attention.

The information on the glass pane would stand out even more because of the blur the background receives. The text, images or icons look even more sharpen and clear on a blurred background that's why they would be more attractive for the user than on a plain background.

3) Wow effect ✨

Although we talked about some interesting points before which help you provide the information to the user in the best possible way, "pretty looking" could also bring its value to the table. Would a simple circle attract your attention? Probably not, but what about a circle that slowly fades away? Probably yes...

That's why geometric forms are very beloved by glassmorphism enthusiasts. They are very strict but when you put them behind a glass pane they fade away. You can often see a part of a triangle behind the glass pane and a part stretching out of it. This gives the whole thing an antithesis of strict and lenient which gives it this Wow effect ✨.

How to create a glassmorphism design?

I could share a code snippet right here of the CSS. But there are plenty of websites which help you generate a glassmorphism design which suits you the best. Here are some resources:

• Glassmorphism CSS Generator
• CSS Masks & Glassmorphism Generator

------------

The images are from my latest project 👉 Holo Weather

I was very interested in this type of project but I wanted to do something different, something more interesting.

That's when I came up with the idea of a moving object which could represent my followers count. By adding some details and a story to it we get:

"Gary the Snail who is hungry and wants to get to some food at the end of the road."

So... how did I do it? How can you make your own version and what tools do you need?

Here are the 5 main steps:

1) Get the tokens for your app on Twitter's developer page.

2) Use a library/add-on/module for Twitter integration. I've used Twitter Lite for NodeJS. But there are also other possibilities.

• Setup the authentication and check for the available endpoints (docs).

3) Create your design for the banner using photo-editing software, I used Photoshop but you can use paintNET, GIMP, etc. Don't forget to subdivide your design into different layers and export them separately.

Example:

4) Now it's time to get the followers count, create a single image out of the three above and update the profile banner:

• Fetch the follower count using one of the two APIs: GET followers/ids or GET users/show
• Use Merge Images for NodeJS to merge the images in the right place. You'll probably need the scale function to map the moving object on top of the background. Here is a JavaScript example:
• To update the profile banner you should use POST account/update_profile_banner by sending the new Banner as a base64 format.

5) Using a cron job you can repeat all the steps above in a specific duration you like.

That's how I integrated a followers count in my profile banner. If you want to see it in action, you can check my Twitter profile.

If you're stuck or you want to use exactly the same version, I uploaded the source code to my GitHub page.

This project was inspired by Suren's post.