DEV Community: acode123

Top 6 FREE💸Tools for Web Developers

acode123 — Wed, 18 Sep 2024 00:50:06 +0000

It feels like we're all dealing with a rough economy these days. With money being tight, free tools are more critical than ever. That's why I will show you 6 unique and free tools for web developers to help make your websites appealing and converting.

1. Neumorphism.io

Neomorphism is a growing design trend seen on many websites. Neumorphism.io allows you to captivate on this trend, allowing you to customize the size, radius, distance, intensity, blur, and shape of your neumorphic design.

2. Uiverse

Having attractive and innovative switches can significantly enhance the appeal of your website. Uiverse provides precisely that. They have a huge collection of free switches you can insert into your projects in one click. The switches are created using Tailwind or CSS, both of which offer numerous options for developers to choose from.

3. Coolors

Generating unique colour palettes that look good is a complicated task every web developer must do. However, with the Coolors palette generator, this task is made extremely easy. All you have to do is click your space bar until you find a palette you enjoy. You can also lock specific colours that you like and check if text would look good on them.

Coolors also offers many other tools, such as its palette visualizer, which allows us to visualize our colour palettes on real designs, or the contrast checker, to check the contrast between two colours.

4. Ray.so

Ever wondered how other developers can generate beautiful code snippets? Ray.so, a free tool made by Raycast, allows you to do exactly that. All you need to do is paste your code snippet in and choose a design, and you will instantly get a beautiful code snippet👇 that you can share anywhere you like!

5. Icon Maker

The Icon Maker is another tool created by the Raycast team. It allows you to create beautifully designed custom icons for your project. With hundreds of icons to choose from, you are likely to find the icon you need. The best part? Just like every other tool on this post, the icon maker is free, so never pay for an icon again :)

6. HTML+CSS+JS Cheatsheet

We aren't in the 20th century anymore, and memorising every HTML tag or Javascript built-in function is no longer necessary. This is because we have websites like the Interactive Cheatsheet (Hyperlinked above☝️) that allow us to instantly access standard HTML, CSS and Javascript functions and structures.

However, the HTML interactive cheatsheet website is not only a cheatsheet; it also has many other tools, such as the IFrame generator or the code previewer that you may use.

One Last Thing

I hope you enjoyed this blog post! If you found it helpful and would like to donate a few bucks, you can visit my page here: https://buymeacoffee.com/acode123

As an extra incentive, if you donate ANY amount, your name + your website/linkedin profile etc... will be posted on my next blog post.

AI Travel Bot - Made with Coze AI

acode123 — Thu, 25 Apr 2024 05:17:39 +0000

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

What I Built

As remote work becomes more common, many developers like myself are now starting to travel more. However, many of us don't really know where to go or what to do, which inspired me to make an AI Chatbot designed to help amateur travellers travel the world.

Demo

Try the Chatbot: https://www.coze.com/store/bot/7361661854248812551?bot_id=true

Example usage:

Your Configuration

The Travel bot uses RAG technologies to gather relevant information from verified parts of Wikipedia:

The bot is based upon GPT-4, and has a temperature of 1 to boost creativity:

Journey

Last month, I was trying to plan a trip to Japan, but I didn't know much about the country which made it quite difficult for me. I attempted to seek advice from ChatGPT, but unfortunately, it was unable to provide me with the relevant information due to data cutoff of 2022.

This inspired me to create my own travel chatbot based on the most powerful model of Open AI, fine-tuned on articles from Wikipedia.

I really hope this model helps you, best of luck :)

Our Wonderful Planet - Earth Day Competition

acode123 — Thu, 25 Apr 2024 04:47:09 +0000

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

Inspiration

After landing on the moon in 1969, Neil Armstrong famously stated that "looking back at earth from the moon" made him realise the "utmost importance of protecting our planet Earth".

This inspired me to create a simple animation that emphasizes the small size of the Earth and the importance of protecting it.

Demo

This animation, while simple, highlights perfectly the point Neil Armstrong made after 1969 by showing how small of a dot earth is in the vastness of space.

Please hover over the canvas to zoom into earth.

Journey

I got the idea for this project after attending a seminar about space. The seminar made me realize the fragility of our planet and how we must work towards protecting it. It got me thinking about how important it is for everyone to understand the significance of protecting Mother Earth.

I wish there was a way to make people feel the importance of caring for our planet. That's when I came up with the idea for this project, and I hope it can make a positive impact in raising awareness about environmental issues.

My New Portfolio!

acode123 — Sun, 10 Mar 2024 08:42:39 +0000

Hey there.

I have been building my new portfolio for a week now and need insights into it to see how much progress I have made.

A review would be appreciated on the things that can be improved.

It's still in beta and your advice and feedback would be greatly appreciated :)

NOTE: The Portfolio section is still under construction
https://albertyao.framer.website/

Top 5 Websites You'll Love as a Developer👨‍💻

acode123 — Sun, 25 Jun 2023 10:19:22 +0000

There are many websites out there that can make our jobs as developers easier, today, I would like to share my top 5 favorites. Please feel free to comment on any websites you've found useful in the comments below.

Dev Docs

Dev Docs is a collection of multiple API documentation in a searchable interface. I've found it extremely helpful while trying to find a perfect API for my projects.

Check it out: https://devdocs.io/

Roadmap

Roadmap is a website that allows you to get a personalized roadmap based on what type of developer you are. Roadmap also provides additional educational content for you to further improve your skills as a developer.

Check it out: https://roadmap.sh/

Code Beautify

Code Beautify is a free online tool that allows you to format your code and do simple tasks like converting a decimal into a Hexidecimal number.

Check it out: https://codebeautify.org/

CodeCademy

CodeCademy is a free website that allows you to learn skills developers need to know in an orginanized way. CodeCademy also teaches you simple projects which you can do to build a portfolio.

Check it out: https://www.codecademy.com/

Codepen

Codepen is a community of developers who share and test their front-end code. Codepen is where you can find cool frontend projects and animation all for free.

Check it out: https://codepen.io/

I hope you enjoyed this article and found it useful! Consider checking out and bookmarking some of the above tools you found useful.

Highest paying Programming Languages in 2023💸

acode123 — Thu, 22 Jun 2023 10:32:55 +0000

If you are looking for a lucrative career in the tech industry, you might want to learn one of these highest paying programming languages in 2023. Let's get started!

Go

Go, otherwise known as Golang, was created by Google in 2009. It's an open source language that's used to create simple software. Go has been used by multiple big names, including but not limited to Uber and Dropbox.

Estimated Pay: $168 128

Scala

Scala is a programming language similar to Java. It's a general-purpose programming language that can build almost anything. It's used by Twitter and Coursera.

Estimated Pay: $141 390

CoffeeScript

CoffeeScript is a programming language that compiles into JavaScript, with additional features JavaScript does not yet have, like pattern matching. It's not as popular as it once was, but had a significant impact on JavaScript.

Estimated Pay: $132 067

Objective-C

Objective-C is one of the oldest programming languages out there, however, it's still one of the most high paid programming languages available. It's used by Apple for it's IOS operating system.

Estimated Pay: $127 167

R

R is a programming language that is widely used by Data Scientists and Data Miners. It's founded by the R Foundation for Statistical Computing.

Estimated Pay: $123 988

Python

At the time of writing, Python is the most popular programming language in the world, due to it's low learning curve. Python is a High-Level programming language for General purpose programming.

Estimated Pay: $123 969

JavaScript

Not least of all, we have JavaScript. Javascript is one of the most important programming languages in the world. It's one of the 3 core technologies supporting the World Wide Web. Javascript is used with HTML and CSS to create interactive and user-friendly websites.

Estimated Pay: $115 038

I hope you enjoyed it, please be aware that this post was first published on my free blog: https://freetechnologyhelp.com/highest-paying-programming-languages-in-2023%f0%9f%92%b8/

How to make an AI Image Generator yourself for free(easy)🖼️

acode123 — Sat, 25 Feb 2023 23:59:24 +0000

Note: This tutorial is heavily inspired by a paid course created by Fireship: Link to paid course

Today, we'll be making a fully working AI Image generator with pure Javascript. Be realistic, we won't be able to train our own AI with billions of images for free, so we'll be using OpenAI's pretrained dataset.

Please be aware that this course isn't aimed for pure beginners, if you are reading this, please make sure you have some basic understanding of Javascript and using the Terminal.

Project Set Up

First, be aware that I'll be using VSCode as my IDE, you can download it to follow along.

To get started, create a new folder, and open the folder up in VSCode. Name the folder whatever you want, but remember the name.

Opening a folder: File>Open Folder

After you got a folder open, select Terminal>New Terminal from the top of the screen.

In the new terminal, type the following command:
npm init vite@latest imgtutorial

Feel free to replace imgtutorial with any name you want. Now you would be prompted to select a framework, just hit enter, do the same when it tells you to select a variant.

Now type the following commands in order:

cd imgtutorial npm install

After that, just to check that you got everything right, type npm run dev which should start up your frontend server. You can either type the link manually into your search engine, or control(command on mac)+click the link shown.

If you see a demo website like the one below, you did it right.

OpenAI Account Creation

Now that we got our frontend setup, let's take a break from coding and set up OpenAI.

To get started, go to OpenAI and create an account. After that, click on your profile on the top right corner, and select view API keys.

Then click Create New Secret Key, and store the key shown somewhere secure. It is REALLY important that you do not tell anyone your API key.

Now to store your API key in your project, head back to VSCode, and click once on the folder you've just created with the Command Prompt, then select the create file icon.

Now in the window, type in .env.

Now type the following code into your .env file, replacing yourkey with your OpenAI API key.

OPENAI="your key"

Now we'll create another Terminal window exactly the same way we did before. You should click Terminal>New Terminal. In your new terminal, type the following command, replacing with imgtutorial with the name of your folder.

cd imgtutorial

Now inside your sub folder, type in the following command to install some more dependencies.

npm i dotenv express cors openai

After this, you should have your OpenAI fully setup and ready to use in your backend code.

Backend Coding

Now as we did before, we'll create a new file called server.js. Again, click on your subfolder, and then click on the add file icon.

Then in the box, type server.js:

Inside server.js, copy the following code:

import * as dotenv from 'dotenv';
dotenv.config();

import { Configuration, OpenAIApi } from 'openai';

const configuration = new Configuration({
  apiKey: process.env.OPENAI,
});

const openai = new OpenAIApi(configuration);

import express from 'express';
import cors from 'cors';

const app = express();
app.use(cors());
app.use(express.json());

app.post('/dream', async (req, res) => {
    const prompt = req.body.prompt;

    const aiResponse = await openai.createImage({
      prompt,
      n: 1,
      size: '1024x1024',
    });

    const image = aiResponse.data.data[0].url;
    res.send({ image });
});

app.listen(8080, () => console.log('make art on http://localhost:8080/dream'));

Now in the same terminal window you added your dependencies, type in the following command:

node server.js

This should return you with an URL, but you can ignore it. Anyway, now we got our backend set up and complete!

Frontend Coding

We are now almost finnished with our AI image generator, the last step is to create the frontend, which is accturally the easiest step.

First, go to the HTML file and copy this in:

Copy the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <main>
      <h1>AI Photo Generator</h1>


      <div id="result">
        Image will appear here
      </div>

      <form>
        <label for="prompt">Prompt</label>
        <textarea name="prompt" maxlength="160"></textarea>

        <button type="submit">Dream</button>
      </form>
    </main>

    <script type="module" src="/main.js"></script>
  </body>
</html>

Then go to the main.js file and copy this in:

Copy the following:

import './style.css';

const form = document.querySelector('form');

form.addEventListener('submit', async (e) => {
    e.preventDefault();

    const data = new FormData(form);

    const response = await fetch('http://localhost:8080/dream', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        prompt: data.get('prompt'),
      }),
    });

    const { image } = await response.json();

    const result = document.querySelector('#result');
    result.innerHTML = `<img src="${image}" width="512" />`;
});

Then go to the style.css and copy this in:

Copy the following:

@import url('https://fonts.googleapis.com/css2?family=Poppins&family=Rubik+Glitch&family=Rubik+Microbe&display=swap');
body {
  background-color: #0b0b0e;
  color: white;
  font-family: 'Poppins', sans-serif;
  margin-top: 50px;
}

main {
 display: grid;
 place-items: center;
}

h1 {
  font-family: 'Rubik Microbe', cursive;
  font-weight: 400;
  font-size: 5rem;
}

#result {
  aspect-ratio: 1/1;
  max-width: 512px;
  width: 100%;
  background: #3a3a43;
  display: flex;
  justify-content: center;
  align-items: center;

}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 512px;
  margin-top: 2rem;
}

textarea {
  width: 100%;
  height: 100px;
  margin: 10px 0;
  font-size: 1.5rem;
}

button {
  width: 100%;
  height: 50px;
  background-color: #1b1b1e;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 50px;
}

button:hover {
  background-color: #2b2b2e;
}

.hidden {
  display: none;
}


.spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
}


@keyframes spin {
  from {transform:rotate(0deg);}
  to {transform:rotate(360deg);}
}

Now you are all set! We just need to run our frontend code again and we got a complete image generator!

Running your Project

This is the final step in this course. Under the terminal tab, delete all currently running terminals.

To delete a terminal, hover over it, then select the trash icon, do this with all the terminals available.

Now create a new one(terminal>new terminal) and do the following:

Type this: cd imgtutorial Replacing imgtutorial with whatever you named your sub folder.
Then Type: node server.js

You should see results similar to this.

Now create another terminal(terminal>new terminal) and do the following:

Type this: cd imgtutorial Replacing imgtutorial with whatever you named your sub folder.
Then type npm run dev

You should see results like the following:

Now to access your AI image generator, copy the link generated and access it in a browser.

In the prompt area, describe the image you want it to generate, then click dream. Wait for 1-2 minute and you should see a generated image!

Conclusion:

This is quite a complex tutorial, and you probibally will experience some bugs throughout completing this project. But I'm here to help, just message me and I'll sort your issue out:

My Email: support@freetechnologyhelp.com

If you enjoyed this tutorial, chances are that you'll enjoy my other tutorials too! So here are some ways you can learn more from me:

Here on dev.to
On my twitter account
From my website

Top 7 Free AI tools you should use as a developer and as an individual🤖

acode123 — Mon, 06 Feb 2023 07:15:59 +0000

If you enjoyed this post(hopefully), feel free to check out my personal website and my twitter account.

What you'll learn:

After reading this post, you'll learn the following:

You'll learn AI tools that can help you write faster code
You'll learn AI tools that helps you edit/create videos
You'll learn AI tools that can help you write
And many other tips and tools

1. Steve.ai: Video Creation online app

Steve.ai is an extremely efficient tool, allowing you to generate a live video, with a text prompt. You can get the text prompt from a website, or from a custom written script.

After steve.ai has finished generating your video, you can edit it and personalize it until you are happy with it, then you can download the video you made.

2. Tabnine: Helps you write code

Some of you might remember Github Copilot, quite a good tool while it was still free. Now I've found an alternative, Tabnine.

Tabnine is a tool really similar to Github Copilot. Basically, you install it to your IDE, then Tabnine will give you suggestions and autocompletion for your code.

3. Notion: Free AI writing assistant

Notion is a free AI writing assistant, giving you writing advice, and even helping you write parts of your writing for you.

Notion is still in Alpha, so you will need to sign up for the waitlist, and wait a while before getting access to it.

4. Fireflies: AI meeting assistant

Fireflies will help you take notes during your meetings, and will also analyze voice conversations for free.

Fireflies is also quite popular and trusted by over 60000 companies, and can be used personally too.

5. Hotpot: AI image tools

Hotpot is a collection of many ai image tools you can use personally or commercially.

Here are some things you can do with Hotpot:

Upscale Photos and Art
Remove Objects
Colorize old photos
Turn prompt to art

7. Lalal

Lalal allows you to remove parts of a song, like vocals. You can use it to customize your own musics personally, or use it for commercial purposes. Again, it's completely free.

Lalal can also remove a specific instrument from a song, and they promised to do it all without harming the original quality of the song.

Final Thoughts

I tried my best to not include common AI tools that everyone knows, like ChatGPT. Because it's not providing you any value if I tell you what you already know.

I hope you enjoyed this post, and please leave a comment down below if you have any additional AI tools to add, or have a comment to make.

5 Impressive Javascript projects you can build easily (Tutorials Included)

acode123 — Fri, 03 Feb 2023 09:49:36 +0000

As the wise man said: "The best way to learn is to teach", but I disagree. I believe that the best way to learn is to build, and that's why today, I am going to share 5 easy and impressive Javascript Projects you can build.

1. Chat App

Making a chat app is actually way easier than it sounds. After you complete your chat app, you'll be able to show it off to your friends, and get a job easily.

After some research, I found that the most efficient way to create a chat app is with React as the front-end, and NodeJS as the Backend.

Here is the tutorial: Tutorial

2. Stock Monitoring app

This idea is both useful and impressive at the same time. First of all, after building your stock monitoring app, you'll be able to use it for personal use. You'll also be able to show it off as one of the projects you built.

For this project, I also found ReactJS being the best option.

Tutorial

Image by Freepik

3. Online Course

Making an Online Course can really help you to get a job, because it shows employers your skills. Making an Online Course can also be one of your side hustles to earn some extra money.

For this project, I believe HTML, CSS and Javascript are the best options. As the project isn't that advanced, and does not require a framework like React.

Course

Image by Dribbble

4. Weather App

Building a Weather App will really show off your skills on interacting with API's and will also teach you some basic React skills.

If you create an outstanding weather app with a nice UI, you might even earn some money from it.

I found ReactJS as the best option for this course as this project is quite advanced.

Course

Image from Dribbble

5. Portfolio Website

Creating a creative personal portfolio to showcase all your work is a really effective way to market yourself to employers.

The best way to create a simple portfolio is with plain HTML, CSS and Javascript, as it's quite easy to build one.

Course

Bonus!

I hope you have enjoyed my post(hopefully), and feel free to check out my twitter account, where I post tweets about tech tips, monetization and some popular memes.

This post was originally published on: Free Technology Help

3 Free ways to earn loads of money online💸

acode123 — Fri, 27 Jan 2023 04:02:21 +0000

Earning that first dollar online can seem tough, but what if I tell you that I can teach you 3 ways to earn lots of real money online? All you need is an internet connection, so without further ado, let's get started!

1. Selling Merch Online

The idea of selling Merch online can be scary, but it's actually surprisingly easy.

Here is a store I started a while ago: The Coders

I used spring for my online Merch shop, which works quite well, and spring is also completely free to use.

If you choose to go this path, I advice you to create a unique Merch store, not just any old one. For example, I chose to make a programming merch store that sells T-shirts with funny memes on them.

Link to Spring(Not Affiliated): Spring
Link to my Merch(As Reference): The Coders

2. Freelancing

Unlike creating a merch store, Freelancing takes effort, and freelancing is also extremely competitive.

If you don't yet know, freelancing is when you work for someone else online, and they pay you to do so.

If you are interested in freelancing, I recommend you to use fiverr or upworks to do so.

3. Buying & Selling Stocks

Buying stocks can be very risky, but if you're good at it, you can potentially make thousands of dollars. It takes time and effort, but if you are up to it, it's worth a try.

If you are interested, I'll recommend Webull because it offers a 0% transaction fee, but you should find a stock trading platform that matches your needs.

Conclusion

I hope you have found my tips useful, and don't hesitate to comment below. I'll try my best to respond to every single comment.

5 Unsung HTML Tags You Really Should Know🤔

acode123 — Tue, 13 Dec 2022 06:04:53 +0000

HTML is such a simple language that most developers don't even consider it as a programming language, but today, we are going to go below the surface, and uncover 15 HTML tags that you can take advantage of today!

1. Cite

Cite is a tag that allows you to reference sources you mentioned throughout your website. It is mostly used in citing bibliographic or other site references.

<cite> example.com </cite>

2. Address

Another HTML tag that acts pretty much exactly the same as the Cite tag. As the name suggests, this tag allows you to mark addresses.

<address style="font-size: 21px;"> Somewhere 1234 Street Something, AUS </address>

3. Details

This tag allows you to create a button which displays some information once clicked.

<details> <summary>Developers</summary> The most important Occupation</details>

4. Progress

You know those progress bars that show you how much percent a file is downloaded? Well, this is the tag behind that magic.

<label>Downloading progress:</label><progress value="32" max="100"> 32% </progress>

5. Mark

This tag allows you to highlight words, or phrases that you consider important for your audience to see.

Marked Text

A Quick Conclusion

Do I recommend you using any of these tags? Well, I don't. I believe that if these tags are unpopular, they might be no longer supported by HTML.

However, there is no harm in checking them out!

This post was first posted at: Free Technology Help

5 Addictive games to learn Web Development

acode123 — Wed, 07 Dec 2022 09:51:48 +0000

Are you tired of endlessly scrolling through social media or aimlessly playing games on your phone? Be honest, learning web development is hard for all of us. But why not try something productive and fun at the same time?

In this article, we will explore five addictive games that will not only keep you entertained, but also help you learn the basics of web development. Enjoy!😊

1. Code Combat

After creating your account, you will need to choose a programming language. Some options are: Python, Javascript or Java.

While Code Combat focuses more on the backend side of things, it also teaches you HTML and CSS at later levels.

Unlike some other items on this list, Code Combat is built on more of a freemium approach, where you need to pay to access some features.

Note that you would need to pay to access some levels.

2. Flexbox Froggy

Unlike Code Combat, Flexbox Froggy is made to teach you about CSS Flexbox. A very advanced CSS concept.

You can also check out Flexbox Defence a very similar game, which also targets at your Flexbox knowledge. Both of these tools are completely free.

3. CodinGame

CodinGame is another game that is targeted at the backend side of things. You can complete levels with the choice of more than 25+ languages to choose from.

On the negative side, CodinGame is a little bit more complicated to use than some of the other options on this list.

4. Code Wars

Code Wars is unique to all the other options on this list. Unlike the others, Code Wars requires you to complete challenges(Called Kata) to increase your rank.

You can clan up with other developers or go solo. A really interesting platform you can use to increase your logical thinking skills.

5. Code Monkey

An interesting name for a pretty good programming game. Helps you learn Web Dev in a structured way.

On the negative side, you would also need to pay to access more advanced features.

Conclusion

I hope you enjoyed this guide!

Note that this guide was first posted on my personal blog: https://freetechnologyhelp.com/play-these-5-addictive-games-to-learn-web-development/