Forem: Alteca

How to Make an Animated Search Bar with using only HTML and CSS

Alteca — Tue, 13 Feb 2024 17:32:59 +0000

Intro

In this article, as you've probably read in the title, I will show you how to create an animated search bar using HTML and CSS.

Note: This requires a basic understanding of both HTML and CSS.

Code

Basic layout

First we need to layout the basic elements for our project. I like using the HTML5 Boilerplate extension for this, the extension can be installed in the VSCode extension store. If you prefer doing everything manually then do that instead.

<!DOCTYPE html>
<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>Animated search bar demo</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

</body>
</html>

As you can see I also linked a css file which we will need later, and added a title.

Input element

Now create an input element enclosed by a <div> element. You can make the placeholder whatever you want it to be, but make sure to set the type to text .

    <div>
        <input type="text" placeholder="Search Anything...">
    </div>

SVG File

We also need a search icon for our search bar. For this i am using an SVG file from heroicons.com as it is very easy to copy the icon from their library. Just go to their site, search "search" and hover over the magnifying glass icon, then click on "Copy as SVG". Now that you've copied it, paste the icon inside the <div> element.

Make sure to paste it after the <input> as shown below.

 <div>
        <input type="text" placeholder="Search Anything...">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
    </div>

CSS

Now that we've layed out all our HTML, we need to start creating the CSS for this project.

First we need to reset everything and then style our input element.

*{
    margin: 0;
    padding: 0;
}

Now we need to make our input element fancy by slapping on some animations and making there only be on border at the bottom.

input {
    padding: 1rem 1rem;
    font-size: 30px;
    width: 30%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 3px solid black;
    transition: all 300ms ease-in-out;

}

Now we need the input box to transition when it is clicked on, this means we need the :focus selector.

input:focus {
    border-bottom: 3px solid rgb(0, 158, 66);
    outline: none;
    width: 65%;
}

After this we need to make the SVG a certain size as right now it covers up half of the screen.

svg {
    width: 10%;
    margin-left: 5%;
}

Finally we need to add a finishing touch by centering the element on the screen.

div {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-top: 50px;
    width: 80%;
}

Here's all the code in one piece if you had a hard time hanging on to the snippets I gave you:

HTML:

<!DOCTYPE html>
<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>Animated search bar demo</title>
    <link rel="stylesheet" href="indes.css">
</head>

<body>
    <div>
        <input type="text" placeholder="Search Anything...">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="w-6 h-6">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
        </svg>
    </div>
</body>

</html>

CSS:

*{
    margin: 0;
    padding: 0;
}
input {
    padding: 1rem 1rem;
    font-size: 30px;
    width: 30%;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom: 3px solid black;
    transition: all 300ms ease-in-out;

}
input:focus {
    border-bottom: 3px solid rgb(0, 158, 66);
    outline: none;
    width: 65%;
}
svg {
    width: 10%;
    margin-left: 5%;
}
div {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    margin-top: 50px;
    width: 80%;
}

Outro

So here you have it, a nicely animated search bar with a great expansion animation, feel free to use this in your own projects, I would love this project to actually gain some functionality, so thanks in advance.

How to make an Average Age calculator

Alteca — Thu, 08 Feb 2024 17:45:07 +0000

Intro

In this blog post I will show you how to make an average age calculator as it already says in the title.

I hope you have fun doing this, so let's get right in.

Code

First we need to get the basic layout of the site done by importing the standard html5 Boilerplate code(You can get this extension at the VSCode extension library).

<!DOCTYPE html>
<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></title>
</head>
<body>
</body>
</html>

You are free to make the <title> whatever you like. If you would like to continue this project and rank on search engines, you should add <meta name="keywords" content=""> and <meta name="description" content=""> tags to the head too.

Next up we need to add two <input> elements in the <body> element so that your users will be able to type in their desired ages.

    <input type="number" id="age1">
    <input type="number" id="age2">

Now that we've created the basic layout for our HTML it's time to create the Javascript necessary to execute the things our users want.

First we will make three const variables in a <script> element at the bottom of the HTML page, but still inside the <body> element like so:

<script>
       const age1 = document.querySelector("#age1");
       const age2 = document.querySelector("#age2");
       const result = document.querySelector("#result");
</script>

Now the user to somehow needs get returned the answer to their input, we will do that using a <p> element in the HTML.

<p id="result"></p>

Then we need the users to click a button to get their desired result based on their input. I made a simple "calculate" for this purpose. I will also add a "reset" button just to make this a bit cleaner.

<button id="Calculate">Calculate</button>
<button id="reset">Reset</button>

We also need the following javascript to make these two buttons const variables, add this to the <script> we created earlier on in this tutorial.

    const calculator = document.querySelector("#Calculate");
    const reset = document.querySelector("#reset");

Finally to make all of this functional insert the following code in the <script> element. (make sure all the variable declarations have already been made before the place you insert the code)

        calculator.addEventListener("click", function(event){
            result.innerHTML = (Number.parseInt(age1.value) + Number.parseInt(age2.value))/2
        })
        reset.addEventListener("click", function(event){
            age1.value = '';
            age2.value = '';
            result.innerHTML = '';
        })

At the end the HTML should look like this:

<!DOCTYPE html>
<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>Average Age calculator</title>
</head>
<body>
    <h1>Average Age Calculator</h1>
    <div>
    <input type="number" id="age1">
    <input type="number" id="age2">

</div>
<div>
<button id="Calculate">Calculate</button>
<button id="reset">Reset</button>
</div>
<p id="result"></p>
 <script>
       const age1 = document.querySelector("#age1");
       const age2 = document.querySelector("#age2");
       const result = document.querySelector("#result");
       const calculator = document.querySelector("#Calculate");
       const reset = document.querySelector("#reset");
        calculator.addEventListener("click", function(event){
            result.innerHTML = (Number.parseInt(age1.value) + Number.parseInt(age2.value))/2
        })
        reset.addEventListener("click", function(event){
            age1.value = '';
            age2.value = '';
            result.innerHTML = '';
        })

</script>   
</body>
</html>

If you've examined this code in detail you may find that I wrapped the <input> and <button> elements in <div> tags, you will see later why.

I also added the following CSS to make the whole thing look less like a junkyard when you use it in the browser. Note that I did not optimize this for mobile phones so it may look weird if you open it there.

*{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}
h1 {
    text-align: center;
    font-weight: 600;
    font-size: 70px;
    color: rgb(12, 97, 255);

}
div {
    display: flex;
    justify-content: center;
}
input {
    border: 2px solid rgb(12, 97, 255);
    margin: 3em 2em;
    padding: 1em 2em;
    border-radius: 10px;
    font-size: 20px;
}
button {
    background-color: rgb(255, 120, 24);
    color: white;
    transition: all 300ms ease-in-out;
    font-size: 43px;
    padding: 0.5em 1em;
    border: 2px solid rgb(255, 120, 24);
    border-radius: 20px;
    margin-left: 10px;
    margin-right: 10px;
}
button:hover {
    background-color: white;
    color: black;
    border: 2px solid black;
}
p {
    font-size: 36px;
    text-align: center;
    margin-top: 20px;
}

As you can see I added the <div> elements to create a flexbox layout around both the inputs and the buttons.

Final words

I really hope you enjoyed this tutorial, this project helped me a lot with getting familiar with DOM and JavaScript. If you've made this far in the blog post I also wish you a great time playing around with this simple tool.

You can also check out the original project if you want to see what mine looks like, though if you did everything correctly yours should be exactly the same.

How to stay Motivated while Coding

Alteca — Wed, 31 Jan 2024 16:42:39 +0000

Intro

I Have A lot of experience when it comes to coding, as it is something I’ve been doing for about 3 years, first with Scratch and later with more serious programming languages such as JavaScript. It’s very hard to stay motivated to keep coding even when everything you’ve done doesn’t work, believe it or not, it happened to me just like it happens to many other coders.

Step 1: Mindset

To be and stay motivated while coding is a question of, first of all, your mindset. Your mindset is how you initially think of what you will be doing before you even write the first letter in your code editor. A key component of staying motivated later on, even when encountering big problems, is how you think of what you will be doing.

What I usually do for myself, so that I don’t end up replicating the man in the world famous meme with the man who gets angry and hits his computer off the table, breaking it in the process. My point is, your mindset shouldn’t be: “I have to do this or else I will have done nothing” but: “I’m doing this, but even if I don’t succeed I will still be closer to solving the problem”

Step 2: Action is key

Many people, including myself, often found themselves in a state of resignation and chose not to make any attempts to resolve the problem they were facing. Consequently, a significant number of individuals, myself included, resorted to becoming semi-sedentary individuals who passively consume various forms of media rather than actively engaging in coding or problem-solving activities.

When you take action (in this case, coding) and make an effort to do something, you are still attempting to solve the problem but may require more time and resources. However, if you are a couch potato, it is a completely different story. You are not even making an effort to confront the problem you have and instead, simply indulge in watching TV or consuming other internet content.

Being a couch potato is not the best experience I’ve had, so I really want to tell you, do not live through this phase, you lose time of your only time to be alive and you will never be able to do anything after you’re dead.

Step 3: Confront the problem

This is the last and most crucial step to resolve the issue of being demotivated while coding you have to confront the problem you were facing all this time, the very problem that made you give up in the first place. Maybe read a bit more on the issue on the internet.

There are plenty of helpful websites for you such as Stackoverflow.com, blog posts, and even social media networks that can help you resolve your issue.

Conclusion

As you have just read, it is quite simple to address your concerns about motivation in coding. I hope you all have a wonderful time staying motivated once again.

7 Best Free Chrome Extensions in 2024

Alteca — Wed, 10 Jan 2024 16:33:33 +0000

Intro

In the ever-changing landscape of the internet there is one thing that makes Chromium a unique browser engine; extensions. People use them constantly. The most handy extensions include ad-blockers, VPNs, AI detectors and extensions for customization.

Once you master the very fine and delicate art of picking the extensions that are right for you. I hope this article helps you get hold of a couple of extensions you should definitely get your hands on. Have fun reading :)

Adblock Plus

This is an overall great Adblock extension that helps you navigate the web without needing to deal with annoying pop-ups on websites and just generally any annoying ads. It also allows non-intrusive ads that meet their strict criteria so that you still will see ads if you want to.

Personally, I use the extension all the time, and where it really helps is YouTube because recently YouTube advertising has been getting out of control so I'm glad that there are ad-blockers capable of blocking YouTube ads, there are still some issues though, but the developers are constantly improving it.

SEO analysis and Reviews by Woorank

This extension is an on-page SEO reviewing extension as it analyses every element on a webpage to create a map of what a website does well, does badly or doesn't do at all. You can then see all SEO ranking factors in the pop-up the extension gives you and comes in very handy when you have your own website and want to bump up your SEO ranking.

Many advanced features are locked behind a premium paywall, but the information the extension gives for free should be enough for most people.

WebChatGPT

Introducing a new paradigm in online communication, the "WebChatGPT" extension harnesses the power of OpenAI's language model to transform everyday chat experiences. It can use its web crawler to crawl the web and give users real-time results and not limit them to what was before September 2021. It is a very versatile tool and has quick handy shortcuts, for example writing articles, drafting emails and scripting videos.

Hive AI Detector

Hive AI detector is a great extension to see if something was generated by AI or not. It is very accurate and has never given me any false results. It is a simple icon on the bottom of the page where you put in the text you want to check and then get the results in a second or two.

It is very reliable and can detect text generated by chatGPT even if you specifically ask it to be undetectable or use a prompt generator.

Giphy

Giphy is an extension that allows you to insert GIFs anywhere you write with a special pop-up. It brings the vast and entertaining world of GIFs right to your fingertips. It intuitive way to discover, select, and insert beautiful GIFs directly into your conversations, emails, or social media posts. With a user-friendly pop-up interface, users can effortlessly search through an extensive library of GIFs, ensuring that every message you want to deliver is not just delivered beautifully, but animated with the perfect visuals that it needs.

The Giphy extension transcends the limitations of static text, enabling users to communicate with not only text but also humorous pictures and personality.

Custom Cursor

The Custom Cursor extension is a great extension to create a sense of personality in your browser by getting rid of the standard cursor and replacing it with something much more fun and exciting from their library of many thousands of cursor packs that you can install with a single click.

There are many packs to choose from and can fit any taste, do you want a Star-Wars-themed cursor, no problem. Do you want something more cyberpunk and flashy, you will find it too. Overall it is a great extension that will help you customize your cursor if you're not satisfied with the default one.

Return Youtube Dislike

The Return YouTube Dislike extension, as its name already says returns the dislike count on YouTube videos for full transparency since its removal in early November of 2021. This has two sides to it, on one hand, it is more transparent and more clear to people what they are watching, on the other, people can potentially be influenced by the decisions of the masses and not express their personal opinion.

It is a handy extension to have and also the type of extension that you can install and then forget about since it rarely is updated as there is no need to do so.

Conclusion

As you've read in this article, you will now know how to streamline your workflow and have the maximum output in minimal time. I hope these extensions will help you become more productive and maximize your creative output.

Scratch is Addictive: How to get rid of your Scratch addiction

Alteca — Tue, 22 Aug 2023 06:07:33 +0000

Intro

You probably all know scratch, but for those who don’t, Scratch is an online platform for kids to learn how to code, but the truth about it is: it can also be very addictive. While I was still a full-time scratcher I was also sucked into this hole, but managed to get out of it. In this article, I will share how Scratch can be addictive and how to overcome your addiction if you notice something unusual about your behavior.

How do you become addicted?

At launch Scratch was a playground for anyone who didn’t know how to code to create great games without writing code. At first, kids were actually learning coding and that was great for Scratch and the kids.

But everything changed when Scratch added the community features because they ultimately wanted to attract otherwise not attracted users to the platform.

Loves and Favorites

Starting with loves and favorites, this is one of the key drivers of Scratch addiction. People want to be famous, this is what drives the addiction to Twitter, Instagram, Facebook, Snapchat and Tiktok.

Loves and Favorites have now lost their previous glory, now people are manipulated, and pop-ups telling them to Love Fav and follow are everywhere. The Projects themselves may be good, but the ways people promote these projects are just not appropriate.

Games are the most bloated because of this. Some like to make a script to make the player get an upgrade when you click on the love and fav buttons tricking them to love and fav. Some geeks have even found a way to let the player follow their account for a reward in a game.

Something else to point out is that so many games are bloated with this that even projects on the trending page pick up these features, though they are made by famous scratchers who can get followers by quite literally just publishing a project.

Comments

Comments in scratch have now become very toxic and rude. A few months ago someone was asking me to f4f though just by tracking who I follow it is easy to devise that I don’t do f4f.

Also, they write nasty things like All of this was copied from someone else and only put together by you. What these people don’t know though, is that programming and Scratch are both based on stealing code, adding your spin onto it and saying that you made it.

The same scripts are used largely not because the person who made them was lame and didn’t want to make his own. But because these scripts have been so perfected over the years that they to put it simply, are the best.

Scratch is also Scratch and the name was chosen exactly because the Scratch Team wanted users to innovate already existing things. They say that they chose their name because DJs take discs and then scratch them to make the music sound different.

My point here is that no matter what the comments tell you, your project can only be judged by you and you alone. If you think it’s good enough then move on to something else, but if you think that it needs improvement, continue fine-tuning your project until you think it’s good enough for you to move on.

Follows

Follows are usually the consequences of loves and favs, there are many strategies to make someone follow you, one of which is Follow for Follow. This strategy is so old that now nobody can rely on it so they innovate.

For example, I found a strategy I called Liking, what you do here is you Love a few projects of the person you’re trying to make to follow you. You type a few friendly comments even though the projects themselves may be trash and then you wait.

After a while, like two days the person will follow you with a 70% chance which is insane. There are countless amounts of follow strategies used by Scratchers, but they don’t differentiate between a real engaged follower and a follower that will never come back to your profile.

Followers at first seem to be people who like you, but then you dread more, and you adopt the most outrageous of strategies to get more.

Studios

Loves and Favs and Follows are the main reason you become addicted to Scratch, but what takes this a step further are Studios. For those who aren’t familiar, studios are groups of projects with a certain group of people who can curate the studio.

Politics in studios are brutal, you can be demoted anytime and the only safe person is the host. Scratch studios used to be friendly places with cooperation and everything you would want in a studio. Now studios are just spam, pure spam. Most of the projects in studios are very low quality, but get loves and favs.

Many people are promoted to curate studios not because they have good projects or would help others, no they are promoted to make the studio grow faster and get featured so that it can grow even faster than before.

Many scratchers have more than 100 projects, but most of these users aren’t experienced and are very low quality. When someone like that is promoted, then they add all their projects to the studio, making the studio grow faster

What people usually do, is spam their project into a few hundred studios and watch it gain popularity even though it is complete trash (or not). Not every project in a studio is bad, but the good and quality projects just drown in the sea of low-quality cheap projects.

How to Stop Being Addicted to Scratch

So now that we know that Scratch can be very addictive, you have to somehow get out of that addiction, well you’re in luck because, in this part of the article, I’ll be sharing how I overcame my addiction to Scratch and maintained a healthy relationship with the website

How many people on scratch are addicted?

During my study of my studio https://scratch.mit.edu/studios/33047730 I devised that 36,8% of non-school Scratch accounts are addicted to Scratch. And since there are also student accounts that we have to take into account, one 5th of the Scratch userbase or 22.08% is addicted to Scratch. This results in a mind-blowing 24729600 addicted accounts.

When do I Know I'm Addicted

If 3 of the following statements are true for you then you are probably spending too much time on Scratch(addicted).

You waste time commenting on projects, profiles or studios
You forget about real life and think about Scratch all the time
You dread becoming famous on Scratch so badly that you want to do it by any means
You waste your time by loving and favoriting other people's projects
You don't spend most of the time in the scratch editor but on the website
You want your project to be on the trending page and work only because of this
You spam everyone with f4f requests
You promote your projects by spamming studios and comment feeds

What can You do?

So now, What can you do about all this? How can you get rid of your Scratch addiction?

I know you won't like the thing I am about to say and I understand why, but face it; you must quit Scratch for a month, no, not for a day, not for a week, but for a month. The truth is that when I was addicted I started doing HTML and CSS and making my website so I completely forgot that Scratch even existed while everyone was still asking me for my Scratch profile which I won't share here.

It is crucial for you to focus on something else when you quit Scratch if you think that you are ready to learn HTML and CSS(How to make websites) go on and do that, but what your hobby will be has to make you forget about your scratch followers who will be roasting you for not posting something every day.

Also, check out the free HTML course on codecademy:https://www.codecademy.com/learn/learn-html

How to ACTUALLY Become Famous

First of all, after you've quit Scratch for a month, ask yourself if you actually want to become famous on Scratch or if you want to continue with another language or another hobby altogether.

If you want to keep doing Scratch, keep in mind that you don't want to become addicted again. So how do you really become famous on Scratch? It's actually very simple: value quality, create quality projects and the followers will eventually come, put your project into a couple of studios and the views and followers will come themselves if the project you made is valuable.

But what if you want to be the next CrystalKeeper7, Chipm0nk, Will_Wam or Griffpatch, you have a long journey ahead of you because all of these people, behind the scenes, are software developers that work in big tech companies. They can create stunning projects only because they know other, more powerful programming languages like Java, JavaScript and Python.

If you really have decided to become the next Guru on Scratch then you should learn at least one real programming language like JavaScript. I found this JavaScript course very useful: https://learnjavascript.online/. You can also learn Java and Python on codecademy.com.

My Story

Now I will share my own story with anyone still eager to read along this far.

Decades back in 2022 this random bloke of a kid made a scratch account by the name of MatveiCephei and started making scratch projects, most of them were bad, but there was one that was good, it was called Platformer 1.0, sadly a 1.1 version was never developed and released due to technical difficulties that the developer faced during the development and all progress was abandoned.

After releasing the 1.0 version the developers realized that you can stuff the project into like 200 studios for it to become noticed, so the dev did exactly that, in a day or two the project skyrocketed alongside two other projects. First 100 views, then 200, then 300, then 400, and then the growth slowed down, but the project still managed to get to 500 and until now even 600.

The project is my best project overall on that account so don't think it gained popularity only because I marketed it well, but this demonstrated to me how well marketing can pay out. I kind of forgot though that this works well only for quality projects, but other games don't get this kind of popularity with studio promotion.

I was starting to make two other games that were a ball roll game and a generic platformer. Then happened the best event of my life, or so I thought, someone followed me. Back then this was a very big event for me and so I wanted more, so I followed myself and let my mom follow me too.

The other followers came shortly after, seeing that people wanted to follow me, then I started releasing more games, dumping them into even more studios and people came, slowly but surely.

Now that I was addicted, I wanted the maximum number of followers possible, so I stopped making projects and used the technique described as Liking earlier in the article. I attracted a few followers this way, but fewer than if I would continue to make projects.

Finally, in February, I quit Scratch since I had started my website and little did I know that it would take me half a year to make in pure code. A website builder would've been faster, but the customizability wouldn't be there.

Conclusion

So this is how I let go of my addiction to scratch, and I hope with the help of this article you will too. In conclusion: you can still use Scratch, but make sure that your relationship with Scratch remains healthy. Thanks for reading:)

How to pick the perfect Domain Name?

Alteca — Tue, 22 Aug 2023 06:04:31 +0000

If you're into websites and web development you probably know that every website needs something to cover up its IP address: a domain name. But how exactly do you pick one? There are so many, most of those which you want are already taken and there are also many variable domain extensions to choose from. This may be a bit overwhelming at the start so I will explain here in a simple and intuitive tutorial how to choose the perfect domain name for your website.

Think about your Niche

Think about what the Niche of your website is going to be, is it tech, fashion or perhaps cooking? Think about what type of website it will be, a blog, a business website or an ecommerce online shop. If you already have a niche planned. Great! Then you're free to proceed to the next step.

Brainstorm

At the first step of the process just brainstorm some ideas, don't think about the availability or price. Perhaps an awesome idea will strike you in the middle of your shower or lunch break. You may also be struck when you wake up in the middle of the night. Wherever the idea strikes you, don't wait, write it down or you'll maybe forget it.

Brainstorm and come up with at least five domains that you really like because most of them will be taken and only one may be free. Sometimes even all five domains are taken so this step may take a while.

Try

After brainstorming some domains you should go to a domain registrar website like namecheap.com and check the availability of your desired domains. If your top pick was already taken, don't stress, this happened to me too and to many other website creators.

It is common that very branded domains, for example, www.pineapplejuice.com are already taken while unknown and SEO-optimized domains like www.warbrokergaragelondon.com aren't taken.

It doesn't have to be .com

Now it is time to choose your domain extension, there are many: .net .org .tech .store .shop and so on. I'm here to say that your SEO won't be impacted by having another domain extension, what will matter though is that .com domains are more memorable for users themselves, but judging by the fact that many websites with very absurd domain extensions still get millions of visits every month.

This happens because the users have by then memorized the domain well enough and don't care about domain extensions, the users are there for the content, not the domain extension. if the content is good users will come anyway. If you still don't believe me here are some examples:

And are these websites dying? Absolutely not, all of them are making waves in the tech industry and are growing steadily. I know that a .com domain is desirable, but if you don't get one, it's fine, judging the examples here you can absolutely become the next big thing in your industry.

Which Domain Registrar to use?

The Places where you buy your domain are called domain registrars, they can be of different quality all over the internet. A good domain registrar usually has built-in domain privacy protection, low prices and good customer service.

Good domain Registrars:

Namecheap is a great domain registrar for those starting out and offers relatively cheap prices compared to the others out there.

Google Domains is another outstanding domain registrar which is very reliable and will result in lower costs than Namecheap which offer a discount at the beginning but bump the price up afterwards.

Cloudflare is also another great tool with the lowest prices found anywhere, but this registrar has some work for you because you have to do everything manually and yourself.

Bad Domain Registrars

Domain.com is a bad domain registrar due to high prices upsells and most importantly a separate fee for domain privacy protection making up for an astronomical yearly fee.

GoDaddy is also another example of a bad domain registrar because it is pricy and gives you so many useless upsells like premium domain privacy protection. Also if you reach out to them then they'll respond, but only write something about their other products.

Trust me and don't use these domain registrars and go with the ones listed on the other list. Many people have had so much trouble with Godaddy and domain.com and don't let the high Google rankings fool you, these companies have paid millions so that they would be the top pick on Google.

Conclusion

This article might have helped you a lot with choosing your domain name, but regardless of the domain you choose, you will have the chance to become the next big thing on the internet. I hope this article helped you with choosing your domain so thanks for reading :)

Free Web Hosting?! Guide to Github Pages Part 1

Alteca — Sun, 30 Apr 2023 16:07:20 +0000

Intro

Web hosting. Every beginner in web development always doesn't know which web host to choose and if you have a custom coded website then DON'T get paid web hosting. Only do that when your website is bigger than 500mb. If otherwise read on to discover the secret of Github pages.

DISCLAIMER: THIS WILL ONLY WORK IF YOU HAVE THE WEBSITES FILES ON YOUR COMPUTER

Step 1: Getting a Github account

Getting an account at Github is fairly easy, it's like at any other website or program you put in your email your desired username password and all that stuff. If you already have one, great, you can skip this step

Step 2: Creating your Repository

So now that you've got your account, you need to go to the plus drop down at the top right corner of the screen and select: New Repository. You'll probably ask "Wait, what is a repository?". So, a repository is basically a folder where all kinds of files can be stored and shared with the public.
When you've clicked "New Repository" then you'll be given some settings. Just leave everything as it is, and select Create Repository.

Step 3: Adding Your Files

Now for the fun part, adding your website's files to your repository. At the top of the code tab there will be a link saying: Upload an Existing File. Click there and select your files. If your websites code is in a folder and you think that you can just drag the folder into the upload space, you're wrong. Since the repository is already a folder, you don't need an extra one. So in your File Management program go inside the folder and then drag all the files from it into your repository.

Step 4: Putting your Website on the internet

Since we have our website now, let's get it onto the internet. Go to the settings tab and select Pages in the side bar.
Then on the drop down where it says "None" Select the other option, it can be main or master, but that doesn't matter.
Leave the second drop down as the default and click save, Github will now take your code, and publish it on the internet, this might take a few minutes so just let Github do its thing. After a few minutes you should see something that says that your site was published. Click on the link, but if you notice that nothing happens thats okay. We'll cover this in the next step.

Step 5: Adding index.html

As I said if the internet refuses to open your site, that's okay. It just means that you didn't add an index.html file.
It's really easy go to your home page and then select "edit" and rename your file to index.html. This should eliminate the issue.

Outro

Now you could say you're done, since you have your site on the internet up and running, but there's one tiny, small problem. Your website has a very unmemorable domain. Who will want to type that in. To Fix this we will have to get a domain from a domain registrar and combine it with our Github repository.
Part 2 coming soon!

vs @import, Which should you use to get Fonts

Alteca — Thu, 20 Apr 2023 23:27:14 +0000

Intro

When you go to Google Fonts to get a font for your website, you definitely saw two options. You can use either the link HTML element <link> or the CSS @import. When you decided you probably just sticked to the <link> element if you're a beginner in this area. In this article you'll get to know all the pros and cons of using <link> and @import so stay here and read on.

The <link> element is a good way to get started when you have just one page that you need to have in the specific font you picked. I've used the <link> element a lot in my early days of using html, and it does work, but does require you to paste it in all individual html files for it to function.

@import

Now to my favorite way of importing a font into a html document, this will not only save time, but also not take up as much space as the <link> element so if you don't like long html documents then you will definitely like this method more. This is especially useful when making a website with only a few CSS files which allows you to save much more time than with the <link>

Conclusion

You should still take into consideration that both these tags get the exactly same job done so if you're just making a small page it won't make any difference which element @import or <link> you use. But @import is the clear winner here because it is much more time consuming to use the <link> element

CSS Slide out animation for Image Gallery

Alteca — Thu, 20 Apr 2023 16:29:04 +0000

You likely have an image gallery or a blog post thumbnail gallery on your website, if so, this article will definitely help you bring your gallery to life and make it more interactive. To discover how to do this, read on.

It's actually very simple and you can do it with about 20 lines of code in total, but the result is awesome. Sliding animated images are much more appealing than static images

First we need to make the gallery itself in HTML

<div id="gallery">

<!-- this is where your images go -->
<div>

Note that this code will not show anything because the src attribute needs to be added.
Additionally add the alt attribute so that if the image doesn't load you will still have some text in its place. Now so that your gallery isn't all stacked vertically let's make it flex with CSS.
Firstly create CSS file and copy or write this code inside it

#gallery{
display: flex;
}
#gallery img {
margin: 3rem 1.5rem;
border-radius: 1rem;
max-width: 40rem;

}

Now we have a flexed image gallery, but it sadly doesn't do anything. I added a border-radius property because I don't like completely square images, but if that's okay with you, you can delete it.
In the next step we will make the images slide upwards when you hover over them with css transition, so hang on.
Firstly add this code to the #gallery img selector:

transition: all 400ms ease-in-out;

Now we will need to make the actual transition using this code:

#gallery img:hover{
transform: translateY(-1.2)
}

Look at your image gallery, it looks awesome, and even has a cool animation. You can be proud of yourself now.

You should ditch Chrome, here's Why:

Alteca — Sun, 16 Apr 2023 18:19:08 +0000

Intro

You with an almost 70% chance if you're on desktop or laptop are reading this article in Google Chrome, the most popular browser on the planet. In this article you'll discover why Chrome isn't all that great and which other browsers you can use as an alternative. Have fun reading :)

Reasons to Ditch Chrome

In the last years more and more people are becoming concerned with privacy and giving your personal data to big tech companies such as Google and Facebook. The more the concern for privacy the less popular Chrome will be because many Chrome users will be discouraged by the fact that they're being spied on. I know many Chrome users do say that Google does track them and they know about it, but they can't help it because Chrome has a strategy to keep you from using another browser.
Chrome's updates have also added much less than previously so there is basically no big features added in the last couple of years.
The time has come, after google Chrome announced that it will be making all Adblock extensions incompatible with Chrome more and more people started asking themselves: "how trustworthy is Chrome?". Here, in this article I'll show you 5 alternative Browsers you can use instead which have more of a focus on privacy and user experience than on getting more data out of its users. You'll definitely be surprised how much Google actually knows about you only through Chrome and note: Chrome is not their only source of information. Google knows our location interests all our history and many more things.

How Chrome Tries to Keep You from Ditching it

As it was stated above Chrome has a number of strategies to keep you away from using another browser. One Strategy that you probably think of right away is the fact that Chrome remembers all your passwords and you maybe forgot all of them and can't live without the Chrome password manager. Another strategy is that Chrome is in the Google Workspace which is convenient because you have one account for everything, this also allows you to have two separate profiles for work and for personal use. It also has many extensions which can't be installed in a browser with its own engine like Safari, but don't threat all Chromium base browsers support Chrome's extensions.

Why Chrome is so Popular

You probably asked yourself "Why is Chrome so popular in the first place since it collects all your data? Who wants a browser like that?" Well, people who spent their whole life in internet explorer which was probably the worst browser ever. Internet explorer was horrible, tired of the constant crashing and all the other bad aspects of IE people wanted a browser that just doesn't crash and is fast. Chrome did both and got the marked to itself. You might ask: "Why is Chrome so popular now though?". I'll say this: because Chrome is a popular browser already people know about it and install it first thing when they've got their computer up and running.

Alternatives to Chrome

Here I have five alternatives to Chrome you may or may not like. Note that this is not a rang list so the first or last browser in this list is not necessarily the best.

Vivaldi

Vivaldi is a browser based on Chromium(the open source Chrome engine) with a decent looking interface and is easy to use, the theme is customizable and looks very nice, personally I do not use Vivaldi, but if I don't use it, it doesn't mean it's a bad browser.

Firefox

Mozilla Firefox was initially released a bit earlier than Chrome, but lost to Chrome during the time when Internet Explorer started losing popularity. Firefox is one of two major browsers that still use their own browser engine(the other is Safari). It has a clean look and is very customizable and much more focused on privacy than Chrome.

Microsoft Edge

You'll maybe say: "Wait didn't you tell me that Products from big companies aren't trustworthy!" Edge is definitely safer than Chrome, but it may also track you, but much less than Google and Chrome do. Edge is not according to popular belief Internet Explorer in a different UI. No it is a Chromium based browser and has nothing to do with IE except that it's made by Microsoft. Edge has a sleek interface and looks very similar to Chrome, just with more privacy and some additional features.

Opera GX

Yes it's Opera again, this browser has been around for a very long time, but never popular, the GX version is meant to be a gaming browser but as I discovered recently it is much more, it has integrated ChatGPT into itself which you can view in the side bar. You can also limit the RAM usage of the browser and customize it completely by picking a color and theme. The interface is nice and sleek and personally this is my main browser and I quite like their background music features.
This browser also has some built in privacy features such as ad blockers and tracker detection.

Brave

Lastly, Brave is a recent browser focusing entirely on privacy, it even has its own search engine. The interface is intuitive and easy to navigate so you should be satisfied with that. It has multiple colors and themes, making Brave fully customizable.

Outro

As you've seen here there are many alternatives to Google Chrome and I encourage you to think twice before using Chrome the next time since there are other excellent browsers out there.

3 Scratch Smoothness tips

Alteca — Tue, 28 Mar 2023 02:14:30 +0000

Hey,
Here I'll show you how to make your Scratch projects very smooth and crisp. I'm really obsessed with smoothness and I hope this tutorial will help you a lot. Note that I am using Scratch addons so my screen looks different from yours, but that's okay.

The Smooth Size Algorithm

This is the first algorithm I'd like to show you, what it does is basically it makes the size of an object smoothly change to a target-size so that it doesn't do it immediately. In the example of this algorithm's use above the sprite with this code inside it will smoothly grow when it is hovered over by the mouse cursor. the "targetsize" input is the normal size of the sprite which you can set to anything you like.

The Smooth Flying Algorithm

This is an algorithm so that an object smoothly zooms to your mouse cursor and doesn't just stick to it. The "Polish" variable is there so that you see that this isn't a value you have to copy from me, but modify according to your needs.

ALWAYS ROUND CORNERS

In UI/UX there is a rule, round corners whenever possible and so that it fits with the theme. If your theme is blocky keep it, but blockiness just doesn't fit with all the fancy algorithms you've learned here so stick to the rule and round your corners.