DEV Community: Kirill Inoz

My First Experience with Three.js

Kirill Inoz — Tue, 22 Nov 2022 12:35:31 +0000

I was interested in Three.js for a long time. It was back in February when I saw Bruno Simon's 3D portfolio, where you drift through his projects and other information on a car. You should check it out afterwards if you haven't. It's amazing. At that time, I just got into learning Vue and I wanted to concentrate on getting more familiar with it than to start learning a new framework.

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.

My 100DaysOfCode in a nutshell 🥜

Kirill Inoz — Thu, 15 Jul 2021 13:28:35 +0000

At the end of November 2020, I became more active on Twitter. I started to follow more content creators and just great people who gave me insides and tips about a fairly new domain for me called web development. This was the time when I also found the 100DaysOfCode challenge. Although I saw a lot of great projects people were working on as part of this challenge, I still didn't want to participate in it. The main excuse was lack of time, which was caused by school (so I thought at that time). But with a new lockdown announced at the start of December and a new course by Florin Pop and Brad Traversy all the stars aligned for me to start with this challenge.

So this is "My 100DaysOfCode 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 problems 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 100DaysOfCode 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 | Currently in works 🚧

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.

Mario with CSS 🎨

Kirill Inoz — Thu, 01 Jul 2021 14:24:45 +0000

Without doubt, one of the most iconic characters in video game history is Mario. First he appeared in Donkey Kong (1981) before receiving his own game just four years later. This game became a massive success, so I'm pretty sure that you've seen, heard or even played it. Although it came out a long time before I was born, I still played it a couple of times. And is there any better way to pay homage to a legendary game than creating a CSS art for it?

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.

Web Scraping with Puppeteer 🎭

Kirill Inoz — Thu, 27 May 2021 13:08:15 +0000

Internet is a wide place full of information. Here you can find everything from cute kitten videos up to scientific researches. This information isn't only useful to us, but it could become vital for our websites and applications.

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.

Ukulele with CSS 🎨

Kirill Inoz — Thu, 08 Apr 2021 11:32:44 +0000

If you follow me on Twitter, you would probably know that I'm passionately learning to play ukulele. I always loved to listen to music but I was never interested in learning to play an instrument or even thinking of creating my own music. But that changed in the recent years and now I'm a proud owner of an ukulele.

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.

Glassmorphism - what's so interesting about it?

Kirill Inoz — Sun, 28 Feb 2021 14:35:50 +0000

Design isn't something that stays the same forever. Old trends go, new trends replace them. It's constantly evolving.

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

Creative Followers Count Display - Twitter API 🐦

Kirill Inoz — Sun, 31 Jan 2021 11:57:08 +0000

As you might know, Twitter has a large developer community which often makes use of a powerful tool Twitter is providing them with. I'm talking about Twitter API. Just by browsing through Twitter you can find a ton of bots and services which make use of this API. Another popular use-case that you can encounter are follower counts. They can be integrated into name, bio or banner of your profile. But they often look identical and boring - just some plain numbers.

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 paint.net, 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.