DEV Community: Anneta Wamono

Tilting Cursor effect with CSS and JS

Anneta Wamono — Tue, 27 Jun 2023 23:52:31 +0000

Welcome to my Frontend Studies - a series where I try to recreate and give general notes on a UI element that inspires me. I hope beginner and intermediate learners can take something away from this, and as well as help me improve in return.

My inspiration for this article is Studio Brot's website. I like it a lot because it is a subtle animation effect that results in a pretty fun mouse interaction.

I broke down the element into the following parts:

Replace cursor with a custom cursor
Find your range of rotation
Rotate the cursor along the x-axis

The HTML

<div class="cursor">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550.58 667.15"><path class="d" d="M0,50.09C0,8.48,47.86-14.92,80.7,10.63l450.48,350.41c37.58,29.23,16.91,89.46-30.7,89.46h-228.41c-16.82,0-32.71,7.7-43.14,20.89l-139.7,176.67c-29.4,37.19-89.22,16.4-89.22-31.01V50.09ZM500.48,400.5L50,50.09V617.05l139.7-176.68c19.91-25.18,50.26-39.87,82.36-39.87h228.41Z" fill="currentColor"/></svg>
</div>

Replace cursor with a custom cursor

Get an SVG cursor. Remember to size it appropriately. My cursor started out much larger than I wanted, so I used CSS to scale it down.

.cursor svg {
    width: 100px;
}

Make your SVG cursor follow your mouse pointer using event listener mousemove. The event parameter gives you access to the clientX and clientY properties which represent the x and y position of your pointer. I'm also using CSS translate property to update the position of the SVG cursor, which can be passed through in JavaScript.

const cursor = document.querySelector(".cursor");

document.addEventListener("mousemove", function(e) {
  let clientX = e.clientX;
  let clientY = e.clientY;
  let vw = window.innerWidth;

  cursor.style.transform = `translate(calc(${clientX}px), calc(${clientY}px)`;
});

Find your range of rotation

You'll need to make sure that the tip of the SVG cursor matches the tip of your mouse pointer so that clicking with the SVG cursor feels accurate. CSS has a transform-origin property that defines the point all transforms are based on. By default it is in the center of the element, but you can adjust it.

.cursor svg {
    /* block elements have a width and height value needed for transformations */
  display: block;
  transform-origin: top left;
}

Find a range of rotation that suits your new cursor. I chose 52deg.

Rotate the cursor along the x-axis

Find viewport width with window.innerWidth.
Take clientX value of your cursor and the viewport width and normalize them to map to your range of rotation. Normalization is taking any range of values and mapping it to the range of 0 to 1. The result is that when you input a value within your initial range, you get a corresponding output value between 0 and 1. So in our code, our initial range is 0 to our viewport width. We pass the x position into our normalize function so that it returns a number between 0 and 1. We can then take that number and multiply it with our range of rotation 52deg so that we can get the correct degree of rotation at our mouse's x position.
Pass that degree to our SVG cursor as a CSS property.

const cursor = document.querySelector(".cursor");

document.addEventListener("mousemove", function(e) {
  let clientX = e.clientX;
  let clientY = e.clientY;
  let vw = window.innerWidth;

  cursor.style.transform = `translate(calc(${clientX}px), calc(${clientY}px)`;

  let rotation = Math.round(52 * normalize(clientX, vw));

  cursor.style.setProperty("--cursor-rotate", `${rotation}deg`);
});

function normalize(curr, max) {
  return curr / max;
}

Takeaways

When I first saw this effect my gut reaction was "I totally know how to do that". I had enough knowledge to already piece together how I was going to achieve this without needing to do a ton of research. I think this signaled to me that my skillset was improving.

Thank you for reading my article. If there is anything you would like more details on, leave a comment below. I'd like to continue improving the quality of my articles, so any feedback is appreciated.

See you at the next one!

I built a Discord bot to teach me Portuguese

Anneta Wamono — Mon, 26 Dec 2022 01:06:06 +0000

I've been trying to learn Portuguese on my own for three years. I dream of becoming fluent and impressing my partner's family with wit and charm. Unfortunately, it takes a lot of effort to learn a language. Something that helps with picking up a language is expanding your vocabulary. I have a Google Sheet of about 700 words and phrases that I've been learning, but there are better ways to learn than looking at a spreadsheet. I was inspired by this article to build a bot with some personality to teach me Portuguese. This article will briefly discuss the technology I learned to make my bot and some challenges I ran into.

Goals for the project
Having fun
Learning the Discord API
Learning Google Sheets API
Creating a command to fetch vocab words
Setting up a cron job
Deploy to Heroku

Goals for the project

My primary goal was to build a bot that would send me some vocab words every day, and my secondary goal was to make it fun to interact with. My first decision was to use Discord because it's an app I use every day and have open on all my devices, and it has a Javascript API for building bots. My second decision was to keep my vocabulary list in Google Sheets and use the Google Sheets API to connect to my data. I wanted as little friction as possible to get my bot up and running.

Having fun

The best way to trick me into doing something is to have fun while doing it. I wanted to build a bot that would inspire me to engage with Brazillian culture, so I chose a beloved folklore character to teach me Portuguese - Cuca 🐊.

Cuca is best known as a crocodile from the children's show Sítio do Picapau Amarelo. If you've ever watched Cidade Invisível on Netflix, you may know her as the lady who can enter people's dreams. However, I prefer her crocodile form 😂.

Every vocab list Cuca sends me comes with a fun gif. And there are a lot of fun gifs to choose from.

Learning the Discord API for NodeJs

Setting up the Discord bot was very simple. There's a helpful guide that takes you through the basics of installing discord.js through npm and creating a new bot on the developer's portal. The most important thing to note is your bot's security token. You can invite your bot to your server by generating an invite link. The invite link is a URL with your bot's client_id and some permissions and scopes appended to it. Scopes and permissions allow your bot certain functions, so be sure to choose what you need. For my bot, I wanted to create slash commands, so I selected the bot, guild and applications.commands scope and Embed Links and Mention Everyone permissions.

This is an example of my generated link:

https://discord.com/api/oauth2/authorize?client_id=XXXXXXXXX&permissions=147456&scope=applications.commands%20bot%20guilds

Learning Google Sheets API

My most significant pain point in the project was understanding how to authenticate for the Google Sheets API. Typically for other APIs I've used, I would be given an API key to send along with my request. Google Cloud gives you two authentication options: OAuth 2.0 Client IDs and Service Accounts. There were more tutorials explaining Service Accounts, so I went down that route. When you create a service account, you're prompted to download a JSON file that holds your account details and private key. That file is what you use to authenticate your API requests. Your service account also acts like a google account, one that you can share your google sheet documents with (like any other google account).

Creating a slash command to retrieve vocab words

I created a slash command that connects to my Google API service and returns a randomized list of vocab words and their translations. This /vocab command connects to my Google API service code and passes my spreadsheet id and the range of values I want to return. My vocab list is two columns: one column for the Portuguese words and the next for the translation, so I select the range of values and randomly select 20 values.

async function getWordsTranslationsMeanings() {
    try {
        const auth = await getAuthToken();
        const response = await getRangeSpreadSheetValues({
            spreadsheetId,
            sheetName,
            auth,
            range
        })

        const translationsArray = response.data.values;
        const translationsArrayLength = translationsArray.length;

        // Selecting random number of words
        const randomWords = []
        for (let index = 0; index < numOfWords; index++) { // numOfWords = 20
            const randomWordIndex = Math.floor(Math.random() * translationsArrayLength);
            randomWords[index] = translationsArray[randomWordIndex]
        }

        return randomWords;

    } catch (error) {
        console.log(error.message, error.stack);
    }
}

To send my vocab words to Discord, I used embed messages. These are nifty blocks of messages that can hold different media like images and gifs.

Here's a snippet of the embed code:

    const embed = new MessageEmbed();

    await getWordsTranslationsMeanings().then( words => {
            let fields = words.map(word => { return { name: word[0], value: word[1] } })
            embed.setColor('#2A8947')
                .setTitle('Palavras de vocabulario')
                .setDescription('Agora vai!')
                .addField('\u200B', '\u200B')
                .addFields(fields)
                .setImage(getGucaGif())
                .setTimestamp()
                .setFooter({ text: 'Feito por Anneta Wamono');

            if (interaction) {
                interaction.channel.send({ embeds: [embed] });
            } 
        },
        err => {
            console.log(err);
        }
    );

And the SlashCommandBuilder code:

const { SlashCommandBuilder } = require('@discordjs/builders');
const { createEmbedWith20Words } = require('../actions/send20Words.js');

module.exports = {
    data: new SlashCommandBuilder()
        .setName('vocab')
        .setDescription('Replies with a list of vocabulary words!'),
    async execute(interaction) {
        await createEmbedWith20Words({ interaction });
        await interaction.reply('Aqui estão suas palavras!');
    },
};

Setting up the cron job

The ideal situation would be for Cuca bot to send me my vocab list daily at a convenient time to practise. The best solution was cron. The cron syntax is quite straightforward once you understand it.

For my purposes, I wanted to send a message every day at 8am.

The asterisks indicate that your job will run for every value in that range.

Deployment

I used Heroku to deploy my bot, even though I've struggled with it before. That's because I've never known what a procfile was and how to use it. Procfiles are used to configure the dyno your code will run on. In my case, setting the dyno as a worker was important. By default, dynos are configured for web processes to receive HTTP traffic. Worker dynos are for background jobs, queueing systems, and timed jobs, and you won't receive a timeout error when running your bot.

Project takeaways

This was a really fun project to do. I got the opportunity to learn more about new APIs and gained more confidence when deploying my projects. Am I fluent in Portuguese now? Nope, but every day I get a little bit better. I want to add more features to Cuca bot, like a command that issues a test and keeps track of my score.

Resources

See you at the next one!

How to build a Twitch chat overlay with HTML, CSS and JS

Anneta Wamono — Mon, 25 Apr 2022 20:36:57 +0000

Like me, you may have started watching more Twitch streams in the last two years. One of the things that makes a Twitch stream fun and interactive are the overlays that react to the chat's input. So by the end of this tutorial, you'll have a simple chat overlay to use in your streams. You can take this tutorial and build on it to make more complex and interactive overlays.

Prerequisites

If you are a beginner at web dev, this is for you. To complete this tutorial, you'll need to know some HTML, CSS, JS. We'll need ComfyJS to complete the project.

Project requirements:

ComfyJS by Instafluff

Setting up the project
Connecting to Twitch chat
Sending messages to the DOM
Styling
Adding animation
Adding different styles based on roles

Setting up the project

We'll be writing our code in a single HTML file. Create a chat.html file and add the following:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Twitch chat</title>
</head>
<body>
    <div id="chat">
        <ul>
        </ul>
    </div>
</body>
</html>

We'll be putting our Twitch messages in the <ul> block as <li> elements. Next, let's integrate with Twitch.

Connecting to our Twitch chat

We'll be using ComfyJS to integrate with our Twitch chat. It's a very easy-to-use library, and it only takes a few lines of code to connect with our chat. Let's add this code to our <head>:

<script src="https://cdn.jsdelivr.net/npm/comfy.js@latest/dist/comfy.min.js"></script>

Next, we need to add a <script> tag below our <body> tag and add the following:

ComfyJS.onChat = (user, message, flags, self, extra) => {
        console.log(user, message);
}

ComfyJS.Init("YourTwitchName");

ComfyJS.Init() lets us connect to our Twitch account, so remember to replace YourTwitchName with your channel name. We want to test if we're connected to our chat, and we can do that by going to our Twitch Creator Dashboard and selecting Stream Manager. There, you'll see a "My Chat" window where you can send messages to test your code. If you open chat.html in your browser and open your dev tools, you'll see the messages appear.

Sending messages to the DOM

So now that we're receiving messages from our chat let's start sending them to our DOM. We'll adjust our code in our <script> to the following:

var chat = document.querySelector("#chat>ul");

ComfyJS.onChat = (user, message, flags, self, extra) => {
        var newMessage = document.createElement("li");
        newMessage.innerText = `${user}: ${message}`;
        chat.append(newMessage);
}

ComfyJS.Init("YourTwitchName");

We're creating a new <li> element for each message we receive and adding the user and message to it. That gets appended to our <ul> block.

We want to separate the user from the message and give it some spacing for our purposes. So we'll change the code to the following:

var chat = document.querySelector("#chat>ul");

ComfyJS.onChat = (user, message, flags, self, extra) => {
        var newMessage = document.createElement("li");
        var text = document.createElement("blockquote");

        newMessage.innerText = user;
        text.innerText = message;

        newMessage.append(text);
        chat.append(newMessage);
}

Styling

Our chat is working, but we don't want to add it to our stream in this state😅. Let's add some CSS to make it look more impressive. Start by adding <style> tags to our <head>. To that, we're going to add these rules:

Fix the width and height of our chat

#chat {
    width: 400px;
    height: 350px;
}

You can set this to any width and height. Just remember what values you've chosen for later.

Style the messages

#chat li {
    background-color: hsl(196, 58%, 93%);
    box-sizing: border-box;
    padding: 1rem 10px;
    margin-bottom: 10px;
}

#chat ul {
    list-style-type: none;
    list-style-position: outside;
}

Note: We're using box-sizing: border-box; here so that our padding and margins don't increase the width of our messages.

Set chat to auto overflow

#chat {
    width: 400px;
    height: 350px;
    overflow-y: auto; 
}

We're setting the overflow-y property because we want to affect the vertical overflow of the chat. We set it to auto because we want the chat to start its scrolling behaviour when it starts to overflow.

Display the chat from the bottom up

#chat {
    width: 400px;
    height: 350px;
    overflow-y: auto; 
    display: flex;
    flex-direction: column-reverse;
}

We want the last message to appear in our chat and push our older messages up and off the screen. To do this we set our display property to flex and set the flex-direction to column-reverse.

Remove scrollbars

#chat::-webkit-scrollbar {
    display: none;
}

At this point, our chat is starting to look decent. Below is the full stylesheet with additional rules to get our final result:

html,body {
    margin: 0;
    font-family: monospace;
    color: hsl(197, 62%, 32%);
}

#chat {
    width: 400px;
    height: 350px;
    overflow-y: auto;
    display: flex;
    flex-direction: column-reverse;
}

#chat::-webkit-scrollbar {
    display: none;
}

#chat ul {
    list-style-type: none;
    list-style-position: outside;
}

#chat li {
    background-color: hsl(196, 58%, 93%);
    box-sizing: border-box;
    padding: 1rem 10px;
    margin-bottom: 10px;
    border: 4px solid;
}

#chat blockquote {
    font-size: 1.2rem;
}

Adding animation

To make our chat look even cooler, we're going to have each new message enter and slide in from the left. First, we want to define our @keyframes animation:

@keyframes slide-in-left {
    from {
        transform: translateX(400px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

Next, we'll target our most recent message with last-of-type and apply the animation to it:

#chat li:last-of-type {
    animation-name: slide-in-left;
    animation-duration: 0.15s;
    animation-timing-function: ease-in;
}

These 2 CSS rules are enough to give us an entrance animation. You can try and make the top message animate off screen using li:nth-child() as a bonus activity.

Finally, to make the newest message stand out, we'll make our older messages a bit transparent:

#chat li:not(:last-of-type) {
    opacity: 0.5;
}

Here is the final result with the animation.

Conclusion

We've made a great looking chat overlay, and now you can show your audience what you've made on your streams. Here is a tutorial on how you can add your HTML file to OBS. It will run just like it did in our browser, but remember to set the width and the height to the same values we used for #chat in our CSS. And here is a repo of this project on Github.

This was just a taste of what you can do with ComfyJS. It's a great library for making fun projects for your stream. Check out PixelPlush, TrostCodes, and whitep4nth3r for inspiration on overlay and interaction ideas. Thank you to LunchDevCommunity for their rudimentary chat overlay.

Lastly, I challenge you to extend this chat by setting different colours for your mods and subscribers (hint: you can use the flags mod and subscriber).

Thank you for reading my article. I'm new to writing, so any feedback on whether this was helpful or not, or topics you might be interested in are welcome.

See you at the next one!

7 resources that made me a better Frontend dev

Anneta Wamono — Sun, 20 Mar 2022 00:48:53 +0000

Being a frontend developer is intimidating. It's one of the fastest-changing areas in software development as new tools or frameworks come into popularity every few years. I started looking to work as a frontend engineer in 2020, but at the time, I had stopped programming for a year to pursue a diploma in film. It was apparent that I had missed a lot in only a year, and I knew that I had to make up for the gaps in my knowledge if I was serious about getting a job.

In this article, I want to share the frontend resources that I've been using to improve my skills, draw inspiration and solidify my understanding of frontend development. Let's get started!

1. Frontend Horse

Alex Trost does live coding shows on Twitch, often with other talented devs as guests. I love watching Alex's streams because they're both entertaining and educational. Below is an excellent video about Design Systems with Mike Aparicio.

2. Josh W Comeau

Josh Comeau is a developer I admire a lot. Firstly, he brings great joy to his websites with detailed animations and interactivity. Secondly, he is a great teacher. I'm currently taking his CSS for JavaScript Developers course, and he goes the extra mile when delivering his material. I recommend it for anyone looking to solidify their CSS knowledge.

3. Frontend mentors

I've been working on improving the quality of my portfolio projects, and Frontend Mentor is an excellent repository of high-quality designs for anyone to use. They have a good selection of free designs you can practice on, and there are several larger projects you can work on with a pro subscription. I'm working on the Audiophile eCommerce design and building it with NuxtJS.

4. freeCodeCamp

FreeCodeCamp is a fantastic resource for anyone who wants to start learning code. I've been particularly interested in their YouTube channel because they do complete tutorials of projects built in different stacks. Last month, I needed to learn Webpack for a project I was working on, and I turned to this freeCodeCamp video:

5. JSConf

Another good YouTube channel to watch is JSConf's channel. They upload recordings of the different conferences they host worldwide, and the presentations are fun and digestible to watch. Below is a presentation by Philip Roberts about the event loop in JavaScript.

6. Codrops

I love getting newsletters in my inbox. I try to subscribe to useful frontend sources, and Codrops is my go-to for inspiration. They have a weekly roundup of articles and beautiful website designs. They also post tutorials on experimental website designs.

7. Michael Thiessen

My last resource is also a newsletter. Michael Thiessen writes a newsletter with tips on how to improve your Vue skills. When you start learning something new, you focus on getting things to work. We don't often try to make our code the best it can be because of a lack of experience with the tools. That's where I found myself when I started learning Vue. Thanks to Michael's newsletter, I've been able to refactor my components with confidence.

BONUS: Hyperplexed

This is less of a resource and more an inspiration, but I felt I needed to add this Youtube channel because it really motivated me to practice my frontend development more frequently. Hyperplexed breaks down some fun frontend challenges in quick bite-sized videos.

Thank you for reading my article. I'm new to writing, so any feedback on whether the article was helpful or topics you might be interested in is welcome.

See you at the next one!

DEV Community: Anneta Wamono

Tilting Cursor effect with CSS and JS

The HTML

Replace cursor with a custom cursor

Find your range of rotation

Rotate the cursor along the x-axis

Takeaways

I built a Discord bot to teach me Portuguese

Table of contents

Goals for the project

Having fun

Learning the Discord API for NodeJs

Learning Google Sheets API

Creating a slash command to retrieve vocab words

Setting up the cron job

Deployment

Project takeaways

Resources

How to build a Twitch chat overlay with HTML, CSS and JS

Prerequisites

Table of contents

Setting up the project

Connecting to our Twitch chat

Sending messages to the DOM

Styling

Fix the width and height of our chat

Style the messages

Set chat to auto overflow

Display the chat from the bottom up

Remove scrollbars

Adding animation

Conclusion

7 resources that made me a better Frontend dev

1. Frontend Horse

2. Josh W Comeau

3. Frontend mentors

4. freeCodeCamp

5. JSConf

6. Codrops

7. Michael Thiessen

BONUS: Hyperplexed