DEV Community: Sergo

Goose Compiling 2025

Sergo — Sun, 26 Jan 2025 12:20:43 +0000

This is a submission for the 2025 New Year Writing challenge: Compiling 2025.

In 2025, I plan to:
- Find a job and earn money;
- Or not find a job, but successfully launch my startup and earn money from it.

What will my startup be about? Many of my apps focus on achieving goals, tracking habits, and time management, i.e., resource management or self-development. I will continue in this direction because:
- It is important to me;
- It is interesting to me;
- I see a need for this among other people.

I also plan to:
- Start purposefully and daily learning English;
- Develop my mental skills and become the best version of myself;

But the most important thing is that I want to learn to believe in myself.
I haven't been able to do all of this for years. Why did I decide that I would succeed in this now? I need to believe in myself. I am learning to believe in myself. And even if I don't achieve everything, at least I should get as close as possible to the culmination of completing these goals.

Goose Retro’ing and Debugging 2024

Sergo — Mon, 20 Jan 2025 22:04:25 +0000

This is a submission for the 2025 New Year Writing challenge: Retro’ing and Debugging 2024.

In 2024, I didn't achieve anything significant.

I had planned to find my first job as a JavaScript developer (I started taking Web Development seriously in 2022), but no one called me because I lack commercial experience.

I send my resume every day, but I haven't had a single interview yet.

That's why I often think that since "nobody needs me," I'll hire myself and start my own startup. However, during this time, I've accumulated a bunch of different personal projects that showed me they're incapable of attracting an audience of more than 10 people. Monetization isn't even a question here.

But in 2024, I learned how to paint walls, hang and connect chandeliers to the electrical system. I learned how to calculate capacities and set up Internet connections in the absence of electricity. I read my first book in English, and now I'm reading "The Lord of the Rings." I also created a couple of projects using Node.js and learned its basics.

By the way, my own personal project LifeEvent (https://lifevent.vercel.app/), which I developed in 2023, helped me remember some events from the past year. However, few people appreciated it. Maybe I advertised it poorly, or perhaps it really isn't that great. Still, something tells me I need to return to it. After all, I have 2025 ahead of me, in which I plan to catch up and accomplish a lot.

Overall, 2024 reminded me not to give up and reinforced my belief that I can learn or do whatever I set my mind to. You just need to be able to concentrate and love what you do.

I realized that you don't need to publish an MVP that nobody is interested in. I also realized that you shouldn't create projects for others, expecting them to like it. They'll most likely pass you by, and you'll burn out. You need to make projects solely for yourself, for your own satisfaction, or to solve problems that concern your mind and heart. At least this way, you'll be satisfied with the work you've done.

Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice - Wintice

Sergo — Wed, 25 Dec 2024 09:56:49 +0000

This is a submission for Frontend Challenge - December Edition, Glam Up My Markup: Winter Solstice

What I Built

I created a landing page for the event "Winter Solstice." My main task was to figure out what it is. Even though I had heard a lot about it, I didn't know how it works. To help others understand it, I decided to add the necessary materials to the website that explain it.

What has been done:

An interactive navigation menu with beautiful animation, taken from a tutorial but slightly modified.
Addition of images and videos.
Zooming in on reduced images.
Responsive design.

Demo

Live
GitHub

Journey

Actually, I was planning to do a different task. But I started to dig into this one, got involved, and it carried me away. I had never worked directly with the DOM before. I always used some frameworks (React, Astro, Next). Sometimes I used a templating engine (Jinja2). But modifying the DOM directly like this feels amazing; it's like you can change any webpage on the internet (for example, if you don't like its style).
It was interesting to manually toil with responsive design again, without using TailwindCSS or Bootstrap. It was fascinating to see the project through to the end, even though it might seem simple at first glance, it took quite a bit of time for me to figure out and understand how to accomplish what I did.
I feel that this work has brought me one step closer to becoming a web developer. Thank you for the opportunity to participate!

I'm open to criticism! Write down anything you find unsightly or awkward, I'm happy to learn something else!

Netlify Dynamic Site Challenge: Motizen, a treasure hunt game

Sergo — Sun, 12 May 2024 21:22:02 +0000

This is a submission for the Netlify Dynamic Site Challenge: Build with Blobs.

First of all, I want to apologize. Both to myself and to the community. Unfortunately, I couldn't and didn't have time to implement everything I wanted. I didn't estimate my strength and time. And this is a very big mistake. But I always remember that many smart people said that it's better late than never. Or it's better to participate than not to participate.

What I Built

I wanted to surprise you with a game where each user would uncover pieces of a picture and find various treasures. Every day, piece by piece. But since I don't have enough experience, and I didn't work closely with Netlify, it turned out the way it did.

First of all, when you go to the site, don't be scared. Yes, there is a registration. 😅 I implemented it with Netlify Integrity. The game was supposed to show players who found treasures. But I didn't have time to implement this.

Demo

You can try the game here.
Attention! Please do not click too quickly and too much! I didn't implement serverless functions very well.😭😥

Platform Primitives

I implemented two functions, loadGameState, saveGameState, with which you can save the game state using Netlify Blobs as storage. And I did it through Netlify Function Serverless.

async function loadGameState(gameStateBlobId) {
    return fetch(`/.netlify/functions/load-game-state?blobID=${gameStateBlobId}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then(result => {
      const gameState = JSON.parse(result.gameState);
      console.log('Game state loaded successfully: ', gameState);
      return gameState;
    })
    .catch(error => {
      console.log('Error in loading game state: ', error);
      throw error;
    });
}

async function saveGameState(gameState) {
    const json = JSON.stringify(gameState);

    return fetch('/.netlify/functions/save-game-state', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: json
    })
    .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    })
    .then(result => {
      console.log('Game state saved successfully: ', result)
      return result;
    })
    .then(result => {
        localStorage.setItem('gameStateBlobId', result.blobID);
    })
    .catch(error => {
      console.log('Error in saving game state: ', error);
      throw error;
    });
}

This is a serverless function for load-game-state.mjs:

import { getStore } from '@netlify/blobs';

exports.handler = async function(event, context) {
    const siteID = process.env.NETLIFY_SITE_ID;
    const token = process.env.NETLIFY_TOKEN;
    const store = getStore({ siteID, token, name: 'my-store' });

    if (event.httpMethod !== 'GET') {
      return { statusCode: 405, body: 'Method Not Allowed' };
    }

    const blobID = event.queryStringParameters.blobID;
    if (!blobID) {
      return { statusCode: 400, body: JSON.stringify({ message: "BlobID is required" }) };
    }

    let buffer;
    try {
      buffer = await store.get(blobID);
    } catch (error) {
      console.error("Error fetching blob:", error);
      return { statusCode: 500, body: JSON.stringify({ message: "Error fetching game state" }) };
    }

    if (!buffer) {
      return { statusCode: 404, body: JSON.stringify({ message: "Game state not found" }) };
    }

    const gameState = buffer.toString();

    return {
      statusCode: 200,
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ gameState })
    };
};

And this is how I implemented Netlify Integrity (maybe, someone it will helpful):

'use client'

import netlifyIdentity from 'netlify-identity-widget';

export default function Home() {

...

    useEffect(() => {
      netlifyIdentity.init();

      const handleLogin = (currentUser) => {
        netlifyIdentity.open();
        setIsLoggedIn(true);
        setPlayerName(currentUser.user_metadata.full_name || currentUser.email);
      };

      const handleLogout = () => {
        setIsLoggedIn(false);
        setPlayerName('');
        netlifyIdentity.logout(); // выход из системы
      };

      netlifyIdentity.on('login', handleLogin);
      netlifyIdentity.on('logout', handleLogout);

      if (netlifyIdentity.currentUser()){
        handleLogin(netlifyIdentity.currentUser());
      }

      return () => {
        netlifyIdentity.off('login', handleLogin);
        netlifyIdentity.off('logout', handleLogout);
      };
    }, []); 

    return (
      <main className={styles.main}>
        <ImageUploader onFileSelect={(selectedFile) => setFile(selectedFile)} setName={(name) => {setUserName(name); setPlayerName(name);}} />
        <CanvasComponent processImage={processImage} />
        <div ref={nameRef}>{playerName}</div>{/* Div для отображения имен */}
        {isLoggedIn ? (
          <div className={styles.userIdentity}>
            {playerName}
            <button onClick={() => netlifyIdentity.logout()}>Logout</button>
          </div>
        ) : (
          <button onClick={() => netlifyIdentity.open()}>Login / Sign Up</button>
        )}
      </main>
    );
}

This is not the End

In this project I used Next.js, Netlify Blobs Store, Netlify Integrity, Canvas API, Netlify Serverless and deployed on Netlify.
It was hard, but very interesting. Thank you for this challenge!

Earth Day Celebration & Problems

Sergo — Sat, 27 Apr 2024 19:39:03 +0000

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Earth Day Celebration Landing Page

What I Built

I wanted to create a landing page about Earth Day, as a reminder that Earth is our common home where we need to keep order for a higher quality of life.

Demo

Project Demo
Source Code

Journey

The main idea I wanted to achieve is to remind people that April 22 is not a holiday in honor of the Earth, but a reminder that many environmental issues remain unresolved. And one of the main tools to keep the ecosystem "healthy" is to inform people about these problems. So, my landing is in black tone. Honestly, the first concept didn't work out for me, as I was not allowed to touch the original HTML according to the contest rules. So, I decided to do something simpler.
And since there is a lot of text in the proposed code, I wanted to draw users' attention to it for animations. I hope I achieved something.
Anyway, I learned a lot, for example, how to work with IntersectionObserver, how to work with the DOM and how to create animations when scrolling a page.

Thank you for the challenge!

License

Pictures:
Swallow
Dolphins

Apex Legends Plugin

Sergo — Fri, 26 Apr 2024 16:12:56 +0000

This is a submission for the Coze AI Bot Challenge: Trailblazer.

What I Built

The plugin allows to quickly find information about the current or next map, data about players - how many kills, headshots, how many wins/losses, data about the strongest players in various seasons and much more.

Demo

Plugin Demo

Journey

I love playing video games, and one of my favorite online shooters is Apex Legends.
Sometimes there is a need to get information without going to the game, such as changing maps or getting information that can't be obtained through the game but can be retrieved via API. That's what this plugin does. Hope it will helpful.

Thank you for the challenge!

National Geographic Earth Day 2024

Sergo — Thu, 25 Apr 2024 17:02:41 +0000

This is a submission for Frontend Challenge v24.04.17, CSS Art: Earth Day.

Inspiration

I was inspired by a video from National Geographic. And decided to recreate it, but in a CSS manner.
I wanted people to watch this video through my website.

Demo

You can view the live demo on Vercel.
Project Demo
Source Code

Journey

At first, I wanted to recreate the image in the form of pixels. But it turned out to be tedious and not very high quality.

Then I decided to base the images on rollers. And then I was very excited, because my persistence knew no bounds then. To make the pictures fit exactly around the circle, I created a circle class in CSS.

In the end, it turned out pretty well.

But it was not enough for me, and I decided to do something responsive. And then I realized that my persistence was quickly fading. Because everything was done manually.

I had to change each parameter of the image, selecting the anchor circles. And even then, I did not cover many sizes.

A few days ago I wanted to add more animations, like a butterfly waving its wings, or a fish twitching in its own way, but... I'm going to stop for now. I need a break after all the manual work.

Thank you for this challenge!

JoyBot will make you smile

Sergo — Wed, 24 Apr 2024 19:33:35 +0000

This is a submission for the Coze AI Bot Challenge: Bot Innovator.

What I Built

JoyBot is an AI bot that can help to lift your spirits. He finds funny jokes, anecdotes or videos for you.

JoyBot can:

find funny videos from Youtube;
find jokes from Knowledge or through the Internet;
understand user's humor style;
keep up with the latest trends;
help to boost your mental health.

Demo

Try the bot here.

ask to find funny videos with cats, for example
ask to find a video with a dog

finds this: Nico: Am I Superman?

ask text jokes

Your Configuration

Persona & Prompt:

Plugins:

Google Plugin to search jokes, anecdotes.
Youtube Plugin to search videos.

Knowledge:

Looks for jokes on websites in two languages: English and Russian.

Long-term Memory On - to provide a more interactive and engaging experience for users.

Journey

Sometimes you have to make people laugh, to distract them from the intention to hang you.
George Bernard Shaw

There are times in life when things get tough and difficult. I had such a time. Past mistakes or failures make you more serious and responsible, but your smile and the sparkle in your eyes suffer. Sometimes you need to laugh! Especially, at yourself. But if initially, it's hard to do, try watching funny clips or reading funny jokes. That's where JoyBot can help.

A smile is happiness you'll find right under your nose.

I enjoyed working with Coze.com so much. It's not just free and easy, but also super useful. I want to continue exploring this platform while I have such a great opportunity.
Thank you!

Why I burn out when programming, or this is a story about where I get my inspiration

Sergo — Wed, 03 Jan 2024 14:00:35 +0000

Feedback for developers is essential. And it's no matter whether it comes from future clients, the compiler, or random passers-by.

But what if you don't get feedback?
I had different thoughts that all this was uninteresting or unnecessary for anyone. Motivation is lost, and burnout occurs.
I want to talk about situations that I personally encountered.
I'm self-taught, I've been programming for almost two years without professional experience in companies.

5. Small results are better than big ones

I noticed that when I solve a problem, I get satisfaction. But when I publish an application, I get disappointed because the expectation does not coincide with reality.

Users don't react the way you imagined.

When external evaluation becomes more important than internal evaluation, you burn out. Small resulsts are better than big ones. Don’t let the outside world hate what you like.

4. It's a good idea to have a Plan B

When you publish an application, you still take risks. You risk getting frustrated if you have spent a lot of time and energy.

To protect yourself from negative consequences, such as guilt or regret, have a Plan B.

For example, if I publish an app and no one signs up, I'll say, "Okay. But now I have experience, I can update my portfolio.”

3. Create for yourself first

One day, I decided to create a website for my friends. They said that the site was needed so that they could communicate about gaming topics. When I publish the site, no one signed up. I lost motivation for a while.

I would have burned out if I didn't have a Plan B, if I hadn't made the site primarily for myself to level up skills.

Create for yourself first and solve the problem of others as if it were your problem. But if you suddenly come across an uninteresting or unclear problem, and you don’t find a benefit for yourself, then most likely
you will burn out.

2. New opportunities that open up are links in one chain

Believe in yourself and in the new opportunities that will open up for you in the future.

I believe that one day I will become not just a good, but an exellent developer, and will raise my life to a better level.

1. Passion is one of the most important things, just like your life

Even if you burned out or lost everything, you are still alive. You can do something.

My results are relatively small. I have not so good plans B. I don't have any hint of new opportunities in the near future.

But I finally realized the meaning of programming and what I want to achieve. Programming allows me to create applications. It helps me improve my skills and makes life interesting. I enjoy it. And I am grateful to the entire community of programmers who had a hand in creating the Internet, computers, articles I still learn from, and games with applications that I love. Thank you!

You can see what I’m working on and how to contact me here.