teleren/devto huggingface dataset:
WakaTime: A powerful, nice, free plugin that you should use!
Tags: extensions, productivity, frontend, management
Published: 2023-04-13 13:07:56

Hey guys, how are you?!

Today I'd like to share and talk about a nice and interesting plugin for ours developers! 

If you sometimes wanted to see somethings like:

```
✅ The most used IDEA
```
```
✅ Most codified languages
```
```
✅ More coded projects
```
```
✅ Most codified project feature
```
```
✅ Your development insights 
```
```
✅ Team Goals
```

And some other cool and interesting stuff?!

I need to show for you the [WakaTime](https://wakatime.com/)!

**WakaTime** is a plugin for you to use in your favorite IDE and with that you can follow, have access to various useful and interesting information and follow up your day to day code through the available options of **WakaTime Dashboard**!

And it supports you to be able to integrate it with: Github, Gitlab, Bitbucket and others!

As they say:

> WakaTime is committed to making time tracking fully automatic for every programmer. By creating open source plugins for IDEs and text editors, we give powerful insights about how you code, and let you get back to what matters most: creating amazing software.

They have many possibilities for integrations, such as:

- 📌 [VS Code](https://wakatime.com/vs-code)
- 📌 [WebStorm](https://wakatime.com/webstorm)
- 📌 [PhpStorm](https://wakatime.com/phpstorm)
- 📌 [ IntelliJ IDEA](https://wakatime.com/intellij-idea)
- 📌 [Azure Data Studio](https://wakatime.com/azure-data-studio)

And many others and you can find the other's possibilities of integrations here: [Plugins Available's](https://wakatime.com/plugins)
___

Some images of some examples of interesting and useful features that we can find in **WakaTime**:

### ✨ General dashboard with various information:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xb9uoac0st9cckw7uual.png)
___
### ✨ Details of activities in a specific project:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b9gqyjwurzrqpjn225vk.png)
___
### ✨ The most worked features in a project:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l2320t5ma09snqpzce5o.png)
___

That's all folks! 

It's been very useful to keep up with my day to day code, see what else I'm working on, like what project, most coded language and a few other things!

See you soon 🤟🤟🤟
Client-Side and Server-side
Tags: webdev, javascript
Published: 2023-04-13 12:32:35

## Introduction
when getting deep into JavaScript, the use of frameworks such as `React`. we'd always see them implementing words like `client-side` and `server-side` in their documentation which sometimes makes people new to such words lost. 
Two types of code are implemented when creating web applications: `client-side` and `server-side`. 
A basic understanding of the differences between these two types of code is essential for building high-performance and efficient web applications. In this article, we'll discuss what server-side and client-side development is, and how they differ.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w6hppalc4frd10m6uwn9.png)

## What is client-side

In web development, client-side refers to the interface that is displayed on the web Application. client-side is almost always written in Javascript, HTML, and CSS. Client-side code handles tasks such as user interface components like buttons and forms, as well as logic that handles user interactions and input.

Client-side allows for a faster and more responsive user experience. By performing tasks on the client side, developers can reduce the amount of time for pages to load and respond to user input.

## What is server-side

Much like the client side, the server side refers to a piece of code task running on the server. In the past, virtually almost all web Application logic ran on the server side, and this included rendering dynamic web pages, interacting with databases, identity authentication, and push notifications.

server-side allows developers to perform tasks that would be difficult to do on the client side. e.g, server-side code can be used to interact with databases, perform data analysis, or integrate with other systems such as APIs.

## Difference between server-side and client-side

- Server-side code runs on the server while client-side code runs on the user device, such as mobile phones and computers.

- Server-side code can be used to perform complex calculations, interact with databases, and integrate them with other systems while Client-side code, on the other hand, is typically used to handle user interactions and input, as well as to create visual effects and other interactive elements.
Laravel 11: Are you excited for the big release?
Tags: laravel, mobile, devops, programming
Published: 2023-04-13 12:27:58

Are you a Laravel enthusiast waiting eagerly for the next big release?
 
Well, get ready to brace yourself for Laravel 11, the newest version of the highly popular PHP framework that promises to take web development to the next level!

With its release date looming on the horizon, rumors are rife about the incredible new features that Laravel 11 has in store for developers. 

## Laravel 11 Release Date Details

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ththyipxopiwcxhvat.jpg)
According to the official Support Policy, Laravel 11 is scheduled to be released on February 6th, 2024.

**Laravel 11 Release Date and the Top Features Coming**
While the release of Laravel 11 is certainly exciting news, it’s important to note that upgrading all projects immediately is not necessary. Although version 6 marked the last LTS (Long-Term Support) release, each major version of Laravel is supported with updates for two years, giving developers ample time to prepare and make necessary upgrades.

## What’s new in Laravel 11?
As Laravel continues to evolve and grow, we can expect Taylor Otwell and the Laravel team to continue delivering a cutting-edge PHP framework that meets the needs of modern web development. By the time we have the update on the included features for the new release here are the best-anticipated features to be included in the laravel 11 release, scheduled on February 2024.
 
Laravel is the perfect tool to help you take your web development capability to the next level. So, whether you need a custom Laravel application or just want to upgrade your existing one to the latest version, we can help you get the desired digital presence for your business. Our team of experienced developers is here to provide you with top-notch Laravel development services. Team up and get started with your next development project.

**So, what are you waiting for?**
Keep your eyes peeled for Laravel 11's release date and get ready to discover the latest and greatest features that this framework has to offer!

Read the below blog to know more about Laravel 11 and the top features coming with it: https://bit.ly/3mw5oze
Laravel v11 is on its way! Is this the worst update of all time?
Tags: laravel, php, webdev, programming
Published: 2023-04-13 12:24:25

Isn’t Laravel 11 Exciting?

It is set to be an exciting release, bringing new features and updates to the popular PHP framework. The development team has always been committed to providing the best possible experience for developers. Therefore, it is likely that Laravel 11 will come with valuable and innovative features to enhance the development experience even further.

Instead of jumping to conclusions or making assumptions, let’s dive straight into unlocking the Laravel 11 release notes, and evaluate its features, and capabilities.

**There is a lot to love about Laravel 11, including:**
https://bit.ly/3KXQgEn 🚀

---

## Laravel 11 Release Date:
According to the official Support Policy, Laravel 11 is scheduled to be released on February 6th, 2024.

## Some possible features that could be included in Laravel 11 are:
As of my knowledge cutoff date of September 2021, Laravel 11 had not been released yet. However, based on the previous release patterns of Laravel, it is likely that Laravel 11 will include several new features and improvements.

- Improved support for PHP 8.
- A new model directory structure for organizing models.
- Enhanced database migration capabilities, such as being able to specify the schema for each table separately.
- A new HTTP client with additional features and improved performance.
- Improved support for TypeScript in Laravel Mix.
- Better support for multi-tenancy applications.
- A new job dispatching system with improved performance and scalability.
- Enhanced support for testing, including better mocking and stubbing capabilities.
AI-Powered Coding: A Look at GitHub CoPilot's Capabilities
Tags: ai, github, developers, programming
Published: 2023-04-13 12:05:42

Let me give you an insight of a powerful tool called the **GitHub CoPilot** that has revolutionized the way we write code. And congratulations to all the developers as we have an AI powered assistant that will assist us in writing fast and efficient code. 

![Congratulations](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqtwuokxkg5e7nhfb06j.jpg)

The term "CoPilot" generally refers to a person who assists the primary pilot in controlling an aircraft. Similarly, GitHub CoPilot is the term that conveys the idea of an AI powered assistant for a developer. Like a co-pilot who helps the pilot in controlling an aircraft, GitHub CoPilot helps developers in controlling the code they write.

## GitHub CoPilot's Capabilities

### Increased Productivity 

Isn't the goal of a developer to maximize productivity? Why not utilize a potent tool to enhance your productivity?

GitHub CoPilot provides suggestions and autocompletions thus automating repetitive tasks. While it won't write the entire code according to your exact specifications, it can still be a valuable time-saver, particularly when it comes to catching unintended syntactical errors. By preventing you from spending your productive hours fixing minor mistakes that you may have inadvertently made, it allows you to focus on more meaningful tasks.


![More Productive](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s5ug3nsw5b64rvddtrdk.jpg)

### Understanding Natural Language

One of the most impressive capabilities that I found is that it is able to understand plain English language and generate code for you.

For example, if you want to write a code to filter non matching data from two JSON objects then you can simply type the text in form of a comment and it will give the code.

`//Filter out non matching personIDs from teamMembers and assignmentExists
            const filteredTeamMembers = teamMembers.filter((e:any)=> !assignmentExists.find((n:any)=>n.dataValues.PersonID === e.dataValues.PersonID));`


![AI Programmer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/15msfk466c2e9mtgtfiz.png)

### Helps in reducing errors
 
It is able to recognize errors and correct those, thus saving lot of time.

### Better quality of code

As it is able to give proper code suggestions, you can focus on improving the code quality. In my case, it gave me async await code suggestions which I feel is much better than a promise based code.


![Good Quality Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfrzlxi28x4prcooki2l.jpg)

---

## Conclusion

So these are few of the capabilities that this tool offers. While there are still a few limitations as well but it is still powerful enough. 

You can explore this tool by creating a free account for 2 months after which it will charge you. If you are using Visual Studio Code editor, then simply install the extension and start coding.

For more info visit [link](https://github.com/features/copilot).
How to create JWT accesstoken and refresh token & validate
Published: 2023-04-13 11:50:08

# dev-auth-middleware-jwt this package allows handle auth middleware.

This library will help us to generate access & refresh token also able to validate

## INSTALLATION

```console
$ npm i dev-auth-middleware-jwt --save
```

or if you are use `yarn` then just run this code

```console
$ yarn add dev-auth-middleware-jwt --save
```

## REQUIRED TASK

- We have to create a `.env` file into the root project directory for store our all of `environment` variable.
- Create all variable following the down below code example.

```console
ACCESS_TOKEN_SECRET=key //use your secret key
ACCESS_TOKEN_EXPIRES_IN=1d //modify as you need eg: 60s, 1m, 1h, 7d

REFRESH_TOKEN_SECRET=key //use your secret key
REFRESH_TOKEN_EXPIRES_IN=1d //modify as you need eg: 60s, 1m, 1h, 7d
```

- That is required

## USAGES

Firstly, just import this package using

```ts
import { JWT, Validate } from "dev-auth-middleware-jwt";
```

Now it's ready to use.

If you want you try with this template. I just try to explement this package features and show...

```ts
import express, { Request, Response } from "express";
import dotenv from "dotenv";
import { JwtPayload } from "jsonwebtoken";
dotenv.config();
import { JWT, Validate } from "dev-auth-middleware-jwt";

declare module "express" {
  interface Request {
    user?: any;
  }
}

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

let refreshTokens: any = [];
app.post("/", async (req: Request, res: Response) => {
  const { username, password } = req.body;
  try {
    const payload: JwtPayload = {
      id: "4234124123423535",
      username,
    };
    const accessToken = JWT.generateAccessToken(payload);
    const refreshToken = JWT.generateRefreshToken(payload);
    refreshTokens.push(refreshToken);

    // response
    res.status(200).json({
      data: {
        accessToken,
        refreshToken,
      },
    });
  } catch (error) {
    console.log(error);
    res.status(500).json({ message: "Something went wrong!", error });
  }
});

app.post("/pro", Validate.accessToken, async (req: Request, res: Response) => {
  if (req.user) {
    res.json({
      data: {
        user: req.user,
      },
    });
  } else {
    res.json({ data: { message: "User not found" } });
  }
});

app.post(
  "/get-ref",
  Validate.refreshToken,
  async (req: Request, res: Response) => {
    console.log(req.user);
    if (req.user) {
      res.json({
        data: {
          user: req.user,
        },
      });
    } else {
      res.json({ data: { message: "User not found" } });
    }
  }
);

const PORT = process.env.PORT || 4000;
app.listen(PORT, () => console.log(`🚀 Server is running at ${PORT}`));
```

#### Author

This package created by [Sabbir Hossain Shuvo](https://www.showwcase.com/devlopersabbir). And the GitHub profile is [https://github.com/devlopersabbir](https://github.com/devlopersabbir).

#### LICENSE

MIT

For support just [Buy Me A Coffee](https://www.buymeacoffee.com/devlopersabbir)
[https://www.buymeacoffee.com/devlopersabbir](https://www.buymeacoffee.com/devlopersabbir)
Complete Guide to Tracking Website Visitors: IP Addresses, Devices, and City
Tags: javascript, programming, tracking, tutorial
Published: 2023-04-13 11:49:41

To track visitors' IP addresses, device information, and city, you can use a combination of server-side and client-side technologies. Here's a brief overview of how you can do it:

Server-side tracking: When a user visits your website, their browser sends a request to your server. You can log the IP address of the user in your server logs or a database. Here's an example code in Node.js using the Express framework:

javascript

```
const express = require('express');
const app = express();

app.use((req, res, next) => {
  const ip = req.ip;
  // log IP address to database or server logs
  console.log('IP address:', ip);
  next();
});
```
This code logs the user's IP address to the console. You can modify it to save the IP address to a database or server logs.

Client-side tracking: To track the user's device information and city, you can use JavaScript to gather information from the user's browser and send it to your server. Here's some example code using the Geolocation API to get the user's city:


```
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    const lat = position.coords.latitude;
    const long = position.coords.longitude;
    const apiUrl = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${long}&appid=${YOUR_API_KEY}`;
    fetch(apiUrl)
      .then(response => response.json())
      .then(data => {
        const city = data.name;
        // send city to server
        console.log('City:', city);
      })
      .catch(error => console.error(error));
  });
}
```
This code uses the OpenWeatherMap API to get the user's city based on their latitude and longitude. You can modify it to use a different API or database to get the city information.

To track the user's device information, you can use the navigator.userAgent property in JavaScript to get information about the user's browser, operating system, and device. Here's an example:

```
const userAgent = navigator.userAgent;
console.log('User agent:', userAgent);
```
This code logs the user's user agent string to the console. You can parse the string to extract information about the user's device.

It's important to note that tracking user information requires user consent and compliance with privacy regulations. Make sure to inform users about what information you are collecting and why, and provide them with an opt-out option.
Complete Guide to Creating HTML Forms and Sending Data to Google Sheets Using API
Tags: javascript, webdev, beginners, programming
Published: 2023-04-13 11:14:41

Create a Google Sheet: First, you’ll need to create a Google Sheet to store the data from your HTML form. You can create a new Google Sheet by going to your Google Drive, clicking the “New” button, and selecting “Google Sheets”.

Set up the Google Sheets API: To use the Google Sheets API, you’ll need to create a project in the Google Cloud Console and enable the Google Sheets API. Here’s a step-by-step guide to getting started: https://developers.google.com/sheets/api/quickstart/js

Create an HTML form: Next, you’ll need to create an HTML form that collects the data you want to store in your Google Sheet. Here’s an example form that collects a user’s name and email:

`<form id="my-form">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <br>
  <button type="submit">Submit</button>
</form>`
Add JavaScript to send form data to Google Sheets: Finally, you’ll need to write JavaScript code that sends the form data to your Google Sheet using the Google Sheets API. Here’s an example code that uses the gapi.client.sheets.spreadsheets.values.append method to append a new row to the Sheet:
`<script src="https://apis.google.com/js/api.js"></script>
<script>
  function submitForm() {
    gapi.client.init({
      apiKey: 'YOUR_API_KEY'
    }).then(function() {
      return gapi.client.load('sheets', 'v4');
    }).then(function() {
      var params = {
        spreadsheetId: 'YOUR_SPREADSHEET_ID',
        range: 'Sheet1!A1:C1',
        valueInputOption: 'USER_ENTERED',
        resource: {
          values: [[document.getElementById('name').value, document.getElementById('email').value]]
        }
      };
      return gapi.client.sheets.spreadsheets.values.append(params);
    }).then(function(response) {
      console.log(response.result);
    }, function(response) {
      console.error(response.result.error.message);
    });
  }
  document.getElementById('my-form').addEventListener('submit', function(event) {
    event.preventDefault();
    submitForm();
  });
</script>`
This code uses the gapi.client.sheets.spreadsheets.values.append method to append a new row to the Sheet. You'll need to replace YOUR_API_KEY with your own API key, and YOUR_SPREADSHEET_ID with the ID of the Google Sheet you created earlier.

When the user submits the form, the submitForm function is called, which initializes the Google Sheets API, loads the Sheets API, and then appends a new row to the Sheet with the data from the form.

Learn more : https://www.instagram.com/devwebsstore/
Dividere il monitor in 4 terminali con Terminator
Tags: terminal, linux, beginners
Published: 2023-04-13 10:56:31

Una delle prime cose che faccio quando la mattina entro nel pc al lavoro, è aprire alcuni terminali.

Di solito uso [Terminator](https://gnome-terminator.org/) che è un emulatore di terminale per Linux che consente di aprire e gestire più finestre di terminale all'interno di una sola finestra.
Ha diverse caratteristiche interessanti, anche se la sua configurazione non è molto intuitiva per certi aspetti.

La suddivisione in 4 terminali della finestra di Terminator è definita come un **layout** nel suo file di configurazione.
Ho quindi aggiunto un layout personalizzato _server_ dalla finestra delle preferenze.

![Terminator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ju7fgow3n4a0226hvyq1.png)

Si può anche modificare direttamente il file di configurazione:

```bash
$ nano ~/.config/terminator/config

[global_config]
  enabled_plugins = CustomCommandsMenu, APTURLHandler
  suppress_multiple_term_dialog = True
[keybindings]
[profiles]
  [[default]]
    background_darkness = 0.85
    font = Monospace 9
    scrollback_lines = 2000
    use_system_font = False
[layouts]
  [[default]]
    [[[child1]]]
      parent = window0
      type = Terminal
      command = ""
    [[[window0]]]
      parent = ""
      type = Window
  [[servers]]
    [[[child0]]]
      type = Window
      parent = ""
      order = 0
      position = 0:0
      maximised = True
      fullscreen = False
      size = 1920, 995
      title = admin@node01: ~
      last_active_term = 428ce1c8-9aed-4acf-a481-45a18c5f54a9
      last_active_window = True
    [[[child1]]]
      type = HPaned
      parent = child0
      order = 0
      position = 958
      ratio = 0.5002610966057441
    [[[child2]]]
      type = VPaned
      parent = child1
      order = 0
      position = 495
      ratio = 0.5
    [[[terminal3]]]
      type = Terminal
      parent = child2
      order = 0
      profile = default
      uuid = a1b21c6d-82fa-4907-9b35-838b3743bb62
      command = ""
    [[[terminal4]]]
      type = Terminal
      parent = child2
      order = 1
      profile = default
      uuid = 9a8f88b6-22e6-49f4-865f-d100a84fa56e
      command = ""
    [[[child5]]]
      type = VPaned
      parent = child1
      order = 1
      position = 496
      ratio = 0.5
    [[[terminal6]]]
      type = Terminal
      parent = child5
      order = 0
      profile = default
      uuid = 716efc36-9385-4b79-898f-a437165c439b
      command = ""
    [[[terminal7]]]
      type = Terminal
      parent = child5
      order = 1
      profile = default
      uuid = 428ce1c8-9aed-4acf-a481-45a18c5f54a9
      command = ""
[plugins]
```

Adesso è possibile avviare Terminator specificando di usare il layout _server_:

```bash
terminator --layout=servers
```

Infine, ho creato un launcher apposito per gnome-shell con [MenuLibre](https://github.com/bluesabre/menulibre) per eseguire il comando sopra.

![MenuLibre](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwclsfiso0zx6x65xs07.png)
Advanced Excel Formulas
Tags: excel, training, course
Published: 2023-04-13 10:50:28

If you want to take your career to new heights, you can get started by brushing up on Excel skills. Earlier, the use of Microsoft Excel skills was limited to businesses. However, in today's world, Excel skills are helpful in all areas of life, such as educational, business, personal, to official purposes.   
Around 66% of people working in offices use Excel every hour at least once. Thus, possessing **[MS Excel Skills](https://youtu.be/UxZR7pXOpOg)** will offer you several career opportunities regardless of the job profile you're looking for or working on. Whether you're an accountant, data analyst, product manager, or HR, you'll need Excel skills to carry out your basic tasks. Excel skills are divided into three categories, namely basic Excel skills, intermediate Excel skills, and advanced Excel skills. Here, we will cover the following topics in detail. So, it's time to get started.