teleren/devto huggingface dataset:
How to make incremental and decremental Counter App using HTML, CSS & JavaScript
Tags: javascript, webdev, programming, beginners
Published: 2023-04-09 15:56:08

Hello developers, Welcome to my new blog. I recently deployed my first app on Netlify and am excited to share the project details. In this blog, I am going to explain how to create a counter app. Actually, if you are on a learning path then it’s very important to build different projects with your learning. 

So without wasting any more time let's start the blog.

## Prerequisites of this project:
If you read this blog then I am assuming that you know the basics of HTML, CSS and JavaScript.

It’s a javascript so I am not going to explain the html and css file.

### Counter App:

![How to create an incremental and decremental Counter App using HTML, CSS & JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltgfa21kqupyn2djllqz.PNG)

As you can see, while doing this project I can split this into parts;
1. Display to show the number
2. Increment while pressing + button
3. Decrement while pressing - button
4. Reset the counter while pressing the button

Now it's time to start coding

## 01 Display to show the number

For this I can take the h2 tag under div.

```
 <div class="updateNumberDiv">
    <h2 class="updateNumber" id="updateNumber"></h2>
 </div>
```
Select the id with document.getElementById of the h2 tag and assign a default value.

```
let score = 0;
let updateNumber = document.getElementById("updateNumber");
```
I can show the default number (0) with the help of textContent.

```
updateNumber.textContent = score;
```
Now it's time to show the increment, decrement and reset the default number.

I can solve this by taking one function for each increment, decrement and reset but it's too lenghty so I can use the querySelectorAll for selecting all buttons.

```
let updateBtn = document.querySelectorAll(".updateBtn button");
```
Then add click addEventListener on every button with the help of forEach loop. Then after that I can select the id of each button with the help of e.target.id.

Then I can use the if-else statement and after grabbing the id of the button, I can perform the increment, decrement and reset.

```
updateBtn.forEach((button) => {
    button.addEventListener("click", (e) => {
        let btnId = e.target.id;
        if (btnId === "increment") {
            score++;
            updateScore();
            return;
        } else if (btnId === "decrement") {
            score--;
            updateScore();
            return;
        } else if (btnId === "reset") {
          score = 0;
          updateScore();
          return;
        }
    })
})
```

Github Repository for this project:
https://github.com/faisaljawedkhan/counterApp/tree/dev

Counter App:
https://khancounterapp.netlify.app/

## Conclusion

In this blog, we built a counter app.

If you think this will helpful for you the do **Like, Comments, and Share** with your colleagues and friends.

Do **Follow** me here on **dev.to**

Until then Happy Coding.
Shareto- A Micro Blogging Application Using Spring MVC
Tags: webdev, beginners, spring, sql
Published: 2023-04-09 15:55:46

This is a micro blogging application powered by spring mvc,that offers features you expect from a blogging application like authentication, post micro blogs, comment on others blog, like blogs and delete and update your own blogs and comments.

Their are few tutorials demonstrating simple crud app in spring mvc, some demonstrate login and logout, but couldn't find a beginner friendly project having all in one place. So I created in web application using spring mvc and some other backend technologies having all the above features at one project. For a developer who is willing to getting started with spring, it's a wonderful project for them.
[github link](https://github.com/krishna-vasudev/Shareto)
[youtube demo video](https://www.youtube.com/watch?v=dYjKtP1Z6yE)
Check out my Medium Clone on GitHub
Tags: react, node, mongodb, typescript
Published: 2023-04-09 15:52:58



Hi everyone,

I wanted to share with you a project I've been working on recently - a Medium clone! If you're not familiar with Medium, it's a popular platform for writers and bloggers to share their content with a wider audience.

I created a clone of Medium using React, Node.js, and MongoDB. The clone includes many of the same features as Medium, such as creating and publishing articles, following other users, and leaving comments on articles.

I'm really proud of how the clone turned out, and I've made the code available on my GitHub profile. You can check it out here: https://github.com/nisabmohd/Medium-clone

Feel free to fork the repository and use it for your own projects. And if you have any feedback or suggestions for improvement, I'd love to hear them!

Thanks for taking the time to check out my Medium clone. I hope you find it useful!


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wyemuf8cf2k6b1k7v2y6.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syj6rxh0j7fkc51hlvv6.png)
Weekly 0055
Tags: weeklyretro
Published: 2023-04-09 15:52:00

### Monday

A day in the office with the entire team. It’s always a pleasure to spend time together and at the same time it’s weird for me because I work from home since 5 years now. 🙂

In the morning I move some pages and routing in Red Origin. I try to organize the solution in a better way. In addition, I started to watch a tutorial about using Playwright and Blazor for UI testing. I will implement this in the next weeks.

In the afternoon we planned our recurring calls for Red Origin. We have a bi-weekly sprint planning on Monday morning and other calls to check the activities during the week.
We will start with this new setup by the end of April.

**Mood:** 🎯

### Tuesday

In the morning I had our weekly demo for Brandplane and it went very well. I hope some new customers will join our product in the next days.

After lunch I created a new project on GitHub called **BlazorKit.CopyToClipboard**.

Basically it’s a razor library to add a button in a Blazor application to copy some text to the clipboard.
The project is here: [https://github.com/kasuken/BlazorKit.CopyToClipboard](https://github.com/kasuken/BlazorKit.CopyToClipboard) and it’s published on NuGet as well.

![https://user-images.githubusercontent.com/2757486/229806262-d3b0ac5f-e6de-4e4f-8007-f22b97af1729.png](https://user-images.githubusercontent.com/2757486/229806262-d3b0ac5f-e6de-4e4f-8007-f22b97af1729.png)

I updated the GitHub Action in my old project BlazorKit.Spinners to the latest version. This project is located here: [https://github.com/kasuken/BlazorKit.Spinners](https://github.com/kasuken/BlazorKit.Spinners)

**Mood**: 🚀

### Wednesday

In the early morning I worked on a project about signing document for an important customer. After that I had a meeting for a code review and check deadlines. It went better that I thought.
Over lunch I went to an office close to home to register myself as a Freelancer 🙂

After lunch I worked a little bit on Brandplane but not so deep in the code, but just on administrative stuff.

**Mood: 🥳**

### Thursday

Vacation in New York.

**Mood: 🗽**

### Friday

Vacation in New York.

**Mood: 🗽**

---

Are you interested in learning GitHub but don't know where to start? Try my course on LinkedIn Learning: [Learning GitHub](https://bit.ly/learninggithub).

![LinkedIn Learning](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdc2bpiftpadibi4h51c.gif)

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out 🙂

{% embed https://dev.to/kasuken %}
Spotify vs. Apple Music recommendations
Tags: music, machinelearning, datascience
Published: 2023-04-09 15:19:04

## Spotify

**Me:** Let me listen to some of _The Strokes_ tracks. I like "Last Nite" and "You Only Live Once".

**Spotify:** You know what? _The Strokes_ has a drummer, _Fabrizio Moretti_, and he has a side band called Little Joy, where he plays guitar.

**Me:** I like _Little Joy_! "Don't Watch Me Dancing", "With Strangers" - I might even listen to the whole album.

**Spotify:** Cool! The singer of _Little Joy_, _Rodrigo Amarante_, was previously in a Brazilian band, _Los Hermanos_. I think you might like some songs from the other singer of _Los Hermanos_, _Marcelo Camelo_.

**Me:** Definitely! His songs like "Vermelho" and "Liberdade" sound great.

**Spotify:** By the way, you might also like some music by Camelo's wife, _Mallu Magalhães_. Here, try "Sambinha Bom" and "Vai e Vem".

**Me:** You really seem to make some quality suggestions! Nice!

**Spotify:** Should we try _Banda do Mar_?

## Apple Music

**Me:** Let me listen to some _Radiohead_. I like their "Airbag".

**Apple Music:** Have you heard "Creep"?
Cara Mengatur Jadwal Video VCS di Grup Telegram
Published: 2023-04-09 15:00:35

Berikut ini adalah langkah-langkahnya:

Buka grup Telegram: Pertama-tama, buka [grup Telegram VCS](https://lastekno.com/grup-telegram-vcs/) di mana Anda ingin mengatur jadwal video call.

Klik ikon kalender: Di bagian bawah layar chat grup, klik ikon kalender. Ini akan membuka jendela kalender grup.

Tentukan tanggal dan waktu: Pilih tanggal dan waktu yang sesuai untuk video call. Anda dapat mengklik tanggal dan waktu di kalender, atau memasukkannya secara manual menggunakan opsi "Input Date & Time".

Tambahkan deskripsi: Setelah menentukan tanggal dan waktu, tambahkan deskripsi tentang acara video call. Ini akan membantu anggota grup untuk memahami tujuan dari video call dan persiapan apa yang diperlukan sebelum panggilan.

Undang anggota grup: Setelah menentukan detail acara, undang anggota grup untuk bergabung dengan panggilan video. Anda dapat melakukannya dengan menekan tombol "Invite" di bagian bawah jendela kalender dan memilih anggota grup yang ingin diundang.

Konfirmasi panggilan video: Sebelum acara dimulai, pastikan untuk mengkonfirmasi panggilan video dengan anggota grup. Anda dapat melakukannya dengan menekan tombol "Reminder" di jendela kalender dan mengirimkan pengingat kepada anggota grup tentang acara tersebut.

Dengan mengikuti langkah-langkah di atas, Anda dapat dengan mudah mengatur jadwal video call di grup Telegram. Ini dapat membantu memudahkan komunikasi dan kolaborasi antara anggota grup, serta memungkinkan Anda untuk mengorganisir acara secara efisien dan efektif.
Love != Undefined
Tags: poetry
Published: 2023-04-09 14:50:09

```javascript
const love = {
  isBoundByEarthlyChains: false,
  isLimitedByMortalFrames: false,
  soarsBeyondStarsAbove: true,
  livesOnInForeverLove: true,
  knowsNoBoundaries: true,
  cannotBeErasedByTime: true,
  livesOnThroughAgesLong: true,
  isNeverEndingSoulfulSong: true,
  travelsThroughWindsOfTime: true,
  leavesSignInOurHearts: true,
  sharesMemoriesAndPureMoments: true,
  enduresForeverPassion: true,
  shinesForeverBold: true,
  cannotBeDiminishedByTime: true,
  soarsOnWingsOfStarsAbove: true
};
```

---
Love is not bound by earthly chains,
Love is not bound by earthly chains,
Nor limited by mortal frames.
It soars beyond the stars above,
And lives on in forever love.

It knows no boundaries, space or place,
A love that time cannot erase.
It lives on through the ages long,
A never-ending, soulful song.

It travels through the winds of time,
And in our hearts it leaves a sign.
Of memories shared and moments pure,
Of passion that forever endures.

Though years may pass and seasons fold,
Our love will shine, forever bold.
For time cannot diminish true love,
That soars on wings of stars above.
🚀 Supercharge Your GPT-3 Model with Personalized Training: A Quick & Easy Guide! 🌟
Tags: ai, api, tutorial, productivity
Published: 2023-04-09 14:49:58

Unlock the true potential of GPT-3 by training your own personalized model! By customizing your model with domain-specific data, you can create a powerful AI assistant tailored to your unique needs. Imagine having your own AI-powered blog writer that mimics your writing style, making it easier to maintain a consistent online presence. Or how about an AI that understands the intricacies of your codebase and helps you debug and optimize your code? Solo entrepreneurs can benefit immensely from a customized GPT-3 model that's trained to assist with tasks like customer support, personalized outreach, drafting proposals, and even generating marketing ideas. In short, training your own GPT-3 model opens up a world of possibilities and empowers you to supercharge your productivity, creativity, and efficiency! 🚀

## Step 1: Install the OpenAI CLI

First, you need to install the OpenAI CLI on your machine. Open your terminal and run the following command:

```sh
pip install openai
```

## Step 2: Set up your API key

Export your OpenAI API key as an environment variable:

```sh
export OPENAI_API_KEY=<your_api_key>
```

## Step 3: Prepare your training data

Create a JSONL file containing your training examples. In this case, we're using blog-related prompts:

```json
{"prompt": "What is Midjounrey?", "completion": "<an explanation of what Midjourney is>"}
{"prompt": "How does Midjounrey work?", "completion": "<an explanation of how Midjourney works>"}
{"prompt": "What are all of Midjounrey's parameters and what do they do?", "completion": "<a list of all parameters Midjourney has and explanations for each>"}
{"prompt": "Give me a list of amazing Midjounrey's prompts by the community?", "completion": "<a list of all your favorite Midjourney prompts>"}
```

Save this file as `train_data.jsonl`.

## Step 4: Train your custom GPT-3 model with the Davinci model

Now, use the OpenAI CLI to train your custom GPT-3 model with the Davinci model as the base model. Replace `<path_to_train_data.jsonl>` with the path to your `train_data.jsonl` file.

```sh
openai api fine_tunes.create -m davinci --n_epochs 3 \
    -t <path_to_train_data.jsonl>
```

## Step 5: Training the model with additional data

If you want to train your model with more data, simply add new examples to your `train_data.jsonl` file and run the fine-tuning command again. The updated model will be trained on the new data.

## Step 6: Use your custom model

Once your model is trained, you can use it with the OpenAI API. Replace `<model_ID>` with the ID of your custom model:

```sh
openai api completions.create -m <model_ID> \
  --max-tokens 30 --temperature 0 --stop "###" \
  -p "Your prompt here"
```

---

And that's it! 🎉 You've successfully trained a custom GPT-3 model using the OpenAI CLI, and you can now use it to generate more accurate and personalized results. Enjoy your supercharged GPT-3 model! Don't forget to follow for more exciting tips and tricks! 😊
Quick job
Tags: vue
Published: 2023-04-09 14:45:09

I need [this](https://github.com/ts1/flipbook-vue) exported as Web Component so I could use it in my React project.

I followed [this](https://medium.com/@pateldhruv020/using-vue-component-in-react-9161f30d29a0) instruction but encountered some errors on compiling coffiee. 

Anyone up for a task? Paying $100 (crypto/bank transfer).
Announcing Lucia 1.0 - A simple and flexible auth library with support for multiple databases and frameworks
Tags: javascript, webdev, security, database
Published: 2023-04-09 14:38:44

I'm super excited to announce Lucia 1.0! This has been a long time coming and I still can't believe how much support the project had over the development. It now has over 800 Github stars and nearly 3,000 NPM weekly downloads!

Lucia is a server-side authentication library for TypeScript that aims to be unintrusive, straightforward, and flexible. At its core, it’s a library for managing users and sessions, providing the building blocks for setting up auth just how you want. Database adapters allow Lucia to be used with any modern ORMs/databases and integration packages make it easy to implement things like OAuth. Unlike Auth.js, it's much more low-level and simple, giving you full control of auth.

Key features:

- Session based auth
- Support for popular databases/ORMs
- OAuth support
- Multiple auth methods with keys
- Email verification links and OTPs with tokens

Docs (I've worked super hard on this!): https://lucia-auth.com/?framework=sveltekit
Repo: https://github.com/pilcrowOnPaper/lucia

## Working with Lucia

A simple example for email/password auth:

```ts
const user = await auth.createUser({
	// how to identify user for authentication?
	primaryKey: {
		providerId: "email", // using email
		providerUserId: "user@example.com", // email to use
		password: "123456"
	},
	// custom attributes
	attributes: {
		email: "user@example.com"
	}
});
const session = await auth.createSession(user.userId);
const sessionCookie = auth.createSessionCookie(session);
```

You can see that Lucia provides basic primitives that you can use however you want to implement your own auth.

## Concepts of Lucia

Aside from users (which should be obvious), there's 2 other key concepts: Sessions and keys. One you understand the 3 concepts of Lucia, it should be pretty easy to use it.

### Sessions

Sessions are how you validate and keep track of users. You create new sessions for a user and store the id of the session to the user’s browser or device. To validate a session, you can compare the session id stored in the client and the database.

### Keys

When authenticating users (log in), you get the user data from an external provider, such as the email from the user’s input or the Github user id for social login. Keys allow you to link such external data from a provider with Lucia users stored in your database. This type of key can hold a password, which will be hashed and can be validated with Lucia’s API. This is mainly for implementing password logins.

For example, for email/password, “email” can be the provider id, the user’s email can be the provider user id, and the user’s password can be stored as the key’s password. For Github OAuth, “github” can be the provider id and the user’s GitHub user id can be the provider user id.
7 UX Design principles you should know
Tags: ux, beginners, design
Published: 2023-04-09 14:34:29

User Experience is how users interact with your product and how satisfied they are with the experience. Better the UX Design, More customers will you acquire. Over the years, we've come across many different principles, that have often played a key role in the way we interpret design✨🤌. Here are some design principles to create effective and enjoyable digital experiences:-

### 1. ✅ Simplicity
> Simplicity is key to good UX design. Users should be able to navigate your product easily and quickly. Avoid cluttered designs, confusing layouts and unnecessary features and Keep it Simple!

### 2. ⚖️ Law of Proximity
> Objects that are near, or proximate to each other, tend to be grouped together. This proximity helps to establish relationships with the nearby objects. Elements in close proximity share similar traits, whereas elements far away, have different purposes. 

### 3. 🏃🏼 Goal Gradient Effect
> This effect is based upon the idea, that more the user is to completing a task, the faster they is to completing it. This will provide a clear indication about the progress and help users strive towards its completion.

### 4. 👬🏼 Law of Common Region
> Elements that are put into groups of the same region, tend to share the same properties and traits. It gives a clear understanding to users regarding the structure and the relationship between each element.

### 5. 👌🏼 Usability Effect
> A Simple aesthetic design showcases the usability of the design. More simple aesthetic the design looks, more usable it is.

### 6. 🙋🏻‍♂️ Von Restorff Effect
> When multiple similar objects are grouped together, the most different or "isolated" one is the one the user most likely to choose.

### 7. 😶‍🌫️ Tesler's Law
> The law states that for any system, a certain amount of complexity cannot be reduced. The complexity should be assumed by either the user or the system.

The above listed design principles are the ones that you should keep in mind, as you create interactive designs meant for fulfilling their own unique tasks. 
Stay connected for more interesting content!
Creating S3 Buckets on AWS
Tags: s3, cloud, aws
Published: 2023-04-09 14:26:50

Simple Storage Service (S3) is a cloud storage solution that offers a lot of flexibility, allowing multiple access irrespective of location. Cloud storage is safer and easier to scale.

Creating an S3 bucket on AWS is a straightforward process. You can follow the steps below:

## Step 1: Select S3 on AWS Header

To get started, log in to your AWS account and navigate to the S3 console by selecting S3 from the AWS header. You can also access this from services

![S3 bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/orh40s3j12l1i7846elq.png)

## Step 2: Create S3 Bucket

![Create S3 bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lu8z1q8uycfo6g8qk7k0.png)

Once you are on the S3 console, click on the "Create bucket" button to create a new bucket. The following details are required:

![AWS S3 bucket](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b5u8auwrm43ucjb30ecw.png)

- **Bucket name:** This must be globally unique on AWS. The name must also comply with DNS naming conventions and cannot contain uppercase letters or underscores. A good practice is to use a name that describes the contents of the bucket.

- **AWS Region:** It is important to choose a region closer to your users. The closer the region to the users of the applications, the lower the latency.

- **Copy settings from an existing bucket (optional)**: You can choose to copy settings from an existing bucket to this new one, such as permissions and encryption settings.

- **Access Control list (ACL) options**: AWS provides a set of predefined ACL options that define who can access the bucket and the objects within it. You can choose one of the predefined options or define your own.

- **Block public access (optional):** By default, AWS blocks public access to your bucket. You can choose to enable public access for specific users or groups, but it is recommended to keep public access blocked to avoid unauthorized access.

- After filling in all the necessary details, click "**Create bucket**" to create your new S3 bucket.

You can now start uploading files to it by clicking on the bucket name from the S3 console and selecting "Upload" or by using AWS APIs or the AWS CLI.

Did you find this useful? Kindly follow for more!