teleren/devto huggingface dataset:
Service Management - Linux
Published: 2023-07-22 05:21:47

**_<u>What is this chapter ?
</u>_**
- Its about the services which are running in background , whether while starting of the OS or starting the services after the OS.

**_<u>List all the service which are running in the server :
</u>_**
service --status-all

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

'+' -----> Installed 
'-' -----> Not Installed

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

systemctl status apache2

**_<u>To stop the service :
</u>_**

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

service apache2 stop ( it should be in SUDO )
service apache2 reload
service apache2 restart ( it will load from the scratch )

For systemctl - we need to say " WHAT WE NEED TO DO FIRST "

**_<u>Disable & Enable service :
</u>_**

You can see its ENABLED in the screenshot , it means " ITS LOADED AUTOMATICALLY WHILE STARTUP "

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

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

**_<u>Masking & unmasking service :
</u>_**


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

Mask is just like a COVER to a painting , you don't want anyone to touch.

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

But you can't touch the paint as its MASKED i.e., START it.

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

UN-MASK it and start the service,

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

**_<u>List all the services which are masked ?
</u>_**

systemctl list-unit-files | grep masked

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

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

**_<u>Note :
</u>_**
1. service & systemctl both are same.
2. Reload - will load the configuration files alone.
Returning to OSS development?
Tags: webdev, discuss, productivity, opensource
Published: 2023-07-22 05:17:05

Hello!

A few years back, I created a CSS framework, [`new.css`](https://github.com/xz/new.css). The project quickly took off, reaching the #1 spot of the day on Hacker News. This brought a lot of eyeballs and attention, which I am incredibly grateful for! However, stress in my life and anxiety around Internet communication and collaboration made me fall out of touch with the project, and this disconnect has led to some depressing burnout.

I would very much like to integrate back into the open source development community and start regularly updating my own projects, along with contributing to the work of others.

Others who have found themselves in similar situations, how have you handled this? Do you have any recommendations for working through personal project burnout, or returning to a community after a good amount of time has passed?

Thanks, everyone! ^‿^
Circle-Packing with Javascript and SVG — the Kusama Way
Tags: javascript, css, webdev, showdev
Published: 2023-07-22 05:00:10

I love the works of Japanese artist Yayoi Kusama, and have — for a long time — wanted to make an interactive poster of her famous dots.

Although my father is a retired Math-teacher, I simply _cannot_ grasp the super-complicated "circle-packing" algorithms, so I ended up doing something more simple:

```js
function kusamaDots(
  numDots,
  minRadius,
  maxRadius,
  width,
  height
) {
  const dots = [];

  function createDot() {
    const x = Math.floor(Math.random() * width);
    const y = Math.floor(Math.random() * height);
    const radius =
      Math.random() * (maxRadius - minRadius) + minRadius;
    const dot = { radius, x, y };
    if (!dots.some((c) => intersects(dot, c))) {
      return dot;
    }
    return null;
  }

  while (dots.length < numDots) {
    const dot = createDot();
    if (dot !== null) dots.push(dot);
  }
  return dots;
}
```

Parameters are:

1. `numDots`. Total number of dots.
2. `minRadius`. Minimum radius of a dot.
3. `maxRadius`. maximum radius of a dot.
4. `width` of the "canvas" (SVG viewBox).
5. `height` of the same.

The `createDot` method creates a random `x` and `y`-position within the boundaries of the `viewBox`. It sets a random radius between the values of `minRadius` and `maxRadius`. 

It creates a `dot`-object, and then it checks whether the dot *intersects* with any other dots (that have been created already). For this, we need a small helper-method:

```js
function intersects(first, second) {
  const dx = first.x - second.x;
  const dy = first.y - second.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  const sumOfRadii = first.radius + second.radius;
  return distance <= sumOfRadii;
}
```

If the dot does *not* intersect with any other dots, it's `return`ed. 

After that, a `while`-loop runs until `numDots` have been reached.

To *output* the dots, we simply create `<circle>`s in SVG:

```js
const dots = kusamaDots(
  e.target.valueAsNumber,
  10,
  150,
  1000,
  1000
);
svg.innerHTML = dots
  .map(
    (dot) =>
      `<circle r="${dot.radius}" cx="${dot.x}" cy="${dot.y}"></circle>`
  )
  .join("")
```

---

## CSS

The CSS is fairly simple. The frame and responsive texts are similar to [The Moon in 10241 Dots](https://dev.to/madsstoumann/the-moon-in-10241-dots-re-creating-a-1969-masterpiece-35e2). 

The most important part is a custom property used for the dot color (as `fill`)! 

However, I decided to do a custom range slider and a color-picker as part of the poster, thus making it _an interactive_ poster:

![Kusama Poster Final](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wkxc9t7zko0a1eu08nl7.png)

Can you spot them?!

Drag the slider and click the color-picker to make your **own** poster:

![Modified version](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw0vbdidn3an10lpce6n.png)

---

## Demo

{% codepen https://codepen.io/stoumann/pen/bGQjNXQ %}
TIL that starting is the hardest part!
Published: 2023-07-16 01:49:14

Last year, after transitioning out of my career in healthcare and social services, I made the decision to uproot my life and move to my dream city, Chicago, IL and also pursue a career change into tech. 

After searching the web for different bootcamp and apprenticeship options, I learned about DPI, and I simply could not believe that a program like this existed! For context, my little brother completed an unpaid training program, Per Scholas, in Atlanta and was able to successfully transition into a career in IT. However, due to my financial circumstances, I simply could not afford to attend an unpaid training program. 

I was incredibly excited to register for Tech Prep 2.0; strangely enough, however, my excitement quickly turned into a bit of panic and a whole lot of fear. I was terrified to log into Canvas!

After journaling about my anxieties and reaching out to my loved ones for support, I finally got the courage to start the course today, and I could not be happier! In this week's learning modules, it was incredibly encouraging to hear about Raghu Betina's non-traditional journey into application development. And, during my studying today, I recognized that sometimes, getting started is the hardest part.

Going forward, I have scheduled my daily "deep work" sessions (shoutout to Dr. Cal Newport and his book, *Deep Work*) so that I can help reduce any anxiety and activation energy associated with starting my coursework. I'm so excited to see where this journey will take me, and I am already so inspired by the work of my cohort!
Writing Modern Web Applications In Nim
Tags: webdev, beginners, opensource, nim
Published: 2023-07-22 04:54:00

Nim has two famous web frameworks for frontend and backend development - [Jester](https://github.com/dom96/jester) and [Karax](https://github.com/karaxnim/karax), but this post not about them.

This post about [HappyX](https://github.com/HapticX/happyx) web framework.

In HappyX a lot of things runs at compile-time due to metaprogramming (**macro-oriented**). It's mean that your web application will be faster than more other apps created in other web frameworks.

In HappyX you can write both server-side and client-side applications with the same code. This allows developers spend less time to development.

Here also a LOT of syntax sugar due to DSL (Domain-specific language), ex:
```nim
# Server-side application example
import happyx


# declare server at http://127.0.0.1:5000
serve "127.0.0.1", 5000:
  # Will match /user/id100, /user/id0, /user/id25, etc.
  # Don't match /user/idSomeId
  get "/user/id$id:int":
    # Respond JSON
    # `id` is immutable variable
    return {"response": fmt"Hello, user[{id}]"}
  
  # Will match /post/c0ffe, /post/babe, /post/cafe, etc.
  # Don't match /post/SomeId
  get "/post/$postId:/[a-fA-F0-9]+/":
    # Respond JSON
    # `postId` is immutable variable
    return {"response": postId}
```

There are also CLI for creating, building and serving your projects!
```bash
hpx create --name my_project --kind SPA --use-tailwind
cd my_project
hpx build
hpx dev --reload
```

You can also convert HTML files into HappyX files with `html2tag` command:
```bash
hpx html2tag source.html --output output
```

## Frontend Example

```nim
import happyx

# Declare our application and set target element with id="app"
appRoutes "app":
  # Will be at example.com/#/home
  "/home":
    tDiv(class = "someClass"):  # equal to <div class="someClass">
      "Hello, world!"  # equal to Hello, world!
```

## Backend Example

```nim
import happyx

# Declare our application
serve "127.0.0.1", 5000:
  # will be at http://127.0.0.1:5000/
  get "/":
    # plain/text
    return "Hello, world!
```
The Importance of Server-Side Handling: Safeguarding Sensitive Information in Web Applications
Tags: security, webdev, beginners, programming
Published: 2023-07-22 04:34:05

Handling API calls and storing sensitive information, such as API keys or other credentials, on the back-end (server-side) is an important practice in web development. This approach offers some key benefits:

- Security: Placing sensitive information on the server-side reduces the risk of exposing that information to the public, including potential malicious users. If sensitive data like API keys were stored on the front-end (client-side), they could be easily accessed by anyone with access to the client code, which could lead to unauthorized access to the API or other security issues.

- Simplification: Placing API calls on the server-side allows for a cleaner and more simplified separation of concerns. The client-side code can focus on user interactions and presentation, while the server-side handles data processing and interactions with external services like APIs. This allows the client-side to focus on its primary responsibility, which is providing a smooth user experience. Meanwhile, the server-side handles the more technical aspects. 

In a client-server setup, the server acts like a messenger between the front-end and the back-end. Below is an illustration explaining this process: 


![Browser and Database Communication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8tol9b6arog3hk1voyn.png)

When a user interacts with the browser (e.g., by clicking a button or submitting a form), the browser sends a request to the server to perform certain actions or retrieve data. The server then processes the request, which may include interacting with databases and communicating with other external services (like APIs). Once the server has completed its processing, it sends back a response to the browser. The response can contain the results of a request, data, or any error messages, which the browser uses to update the user interface and provide feedback to the user.
Hello World
Tags: javascript, react
Published: 2023-07-22 04:30:59

```react
import { collection, doc, getDoc, getDocs, query, where } from "firebase/firestore";
import { db } from "src/firebase/firebase-config";

export const GetAllPost = async () => {
    try {
        const usersRef = collection(db, "users");
        const querySnapshot = await getDocs(usersRef);

        const allPosts = [];

        querySnapshot.forEach((userDoc) => {
            const userData = userDoc.data();
            const posts = userData.post || [];
            const newData = posts.map((item) => {
                return {
                    ...item,
                    userName: userData.userName,
                    fullName: userData.fullName,
                    profileUrl: userData.profileUrl,
                };
            });
            allPosts.push(...newData);
        });

        return allPosts;
    } catch (error) {
        throw new Error('Error retrieving all posts');
    }
};

export const GetDetailsFromUsername = async (username) => {
    try {
        const q = query(collection(db, "users"), where("userName", "==", username));
        const querySnapshot = await getDocs(q);

        if (querySnapshot.empty) {
            return {
                code: 404,
                message: "User not found",
            };
        }

        const user = querySnapshot.docs[0];
        const userData = user.data();

        return userData;
    } catch (error) {
        return {
            code: 500,
            message: "Internal server error",
            error: error.message,
        };
    }
}

export const GetPostDataWithPostID = async (username, postId) => {
    try {
        return await GetDetailsFromUsername(username).then(async (user) => {
            const userRef = doc(db, 'users', user.uid);
            const userDoc = await getDoc(userRef);
            if (userDoc.exists()) {
                const data = userDoc.data();
                const postData = data.post;
                const post = postData.find((item) => item.postId == postId);

                return post ? { post, user } : null;
            } else {
                console.log('User not found');

                return null;
            }
        });
    } catch (error) {
        console.error('Error finding post:', error);
        throw error;
    }
};

```
DEV Showcase v9
Tags: codenewbie, showdev, help, discuss
Published: 2023-07-22 04:00:00

Welcome to the DEV Showcase - a weekly thread where you can share what you've been working on and get feedback and encouragement from the DEV community.

This is your chance to show off your latest project, share a cool hack or technique you've learned, or ask for advice and feedback from other developers. Whether you're a seasoned developer or just starting out, this is the place to connect with others and get inspired.

Here are a few questions to think about if you're stuck:
- What have you been working on lately?
- What tools or resources have you found helpful?
- Have you learned any new skills or techniques recently?
- What challenges have you faced, and how can the community help you overcome them?
- What are your goals for your project or your career moving forward?

Remember, this isn't a competition or a challenge - it's just a space to share and connect with others. So don't be shy! Share your work and get feedback and encouragement from the DEV community.

We're excited to see what you've been working on, and to support you as you continue to grow and develop your skills.
Age Calculator
Tags: codepen, agecalculator, vinkal93, vinkalprajapati
Published: 2023-07-22 03:44:27

{% codepen https://codepen.io/vinkal-93/pen/bGQjBbQ %}

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Age Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f2f2f2;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
        }
        input[type="date"] {
            padding: 8px;
            width: 100%;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            margin-top: 10px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        #result {
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Age Calculator</h2>
        <label for="birthdate">Enter your birthdate:</label>
        <input type="date" id="birthdate">
        <button onclick="calculateAge()">Calculate Age</button>
        <div id="result"></div>
    </div>

    <script>
        function calculateAge() {
            const birthdateInput = document.getElementById("birthdate");
            const birthdate = new Date(birthdateInput.value);
            const now = new Date();
            
            // Calculate the difference in milliseconds between the birthdate and current date
            const ageInMillis = now - birthdate;

            // Calculate the age in years, months, and days
            const years = Math.floor(ageInMillis / (365.25 * 24 * 60 * 60 * 1000));
            const months = Math.floor((ageInMillis % (365.25 * 24 * 60 * 60 * 1000)) / (30.44 * 24 * 60 * 60 * 1000));
            const days = Math.floor((ageInMillis % (30.44 * 24 * 60 * 60 * 1000)) / (24 * 60 * 60 * 1000));

            // Display the result
            const resultElement = document.getElementById("result");
            resultElement.textContent = `Your age is ${years} years, ${months} months, and ${days} days.`;
        }
    </script>
</body>
</html>

```
**
This code creates a simple web page with an input field where the user can enter their birthdate. When they click the "Calculate Age" button, it will display their age in years, months, and days below the button. The age is calculated using JavaScript by subtracting the birthdate from the current date and then converting the difference to years, months, and days. The layout is styled using CSS for a clean and professional look.**
Professional Calculator In HTML CSS and JS
Tags: codepen, calculato, webdev, vinkal93
Published: 2023-07-22 03:35:14

- **Professional Calculator In HTML CSS and JS**

{% codepen https://codepen.io/vinkal-93/pen/jOQpMdd %}

**> This code creates a simple professional calculator with a clean and modern design. It includes buttons for digits, arithmetic operators (+, -, *, /), a decimal point, a clear button (C), and an equals button (=) to calculate the result. The result will be displayed in the input field, and it also handles basic error cases. Note that this calculator is basic and may not handle complex expressions or scientific calculations.**
Your Comprehensive Platform for Vision AI
Tags: ai, webdev, beginners
Published: 2023-07-22 03:30:00

**Introduction**:
In the realm of Vision AI, Hasty stands out as a single platform that covers a wide range of use cases. With its robust features and capabilities, [Hasty](https://www.aiforme.wiki/ai/tools/hasty) provides all the necessary tools to transform raw images and videos into production-ready AI models. Trusted by world-class organisations, Hasty is revolutionising the delivery of AI to production.

**The Power of AI in Training AI:**
Hasty's annotation solution takes a unique approach by leveraging AI to train AI models. By annotating images, users contribute to the training of AI models, which in turn accelerate the annotation process. This iterative and continuously improving approach allows you to build your data asset at an unprecedented pace.

**Automated Quality Control:**
Hasty automates 90% of quality control work through AI consensus scoring. This eliminates the need for complex review workflows and costly redundancies. By using AI to identify potential errors, Hasty simplifies the quality control process, allowing you to fix issues with a single click.

**Model Playground for Vision AI:**
With Hasty's Model Playground, you can create, compare, and deploy Vision AI models quickly and efficiently. The platform enables the rapid creation of models, fine-tuning them down to the smallest parameter. These models are then deployed in Hasty's data annotation environment, enabling unparalleled annotation speed. Additionally, the models can be exported and deployed in your own environment for further customization and integration.

**Benefits of Hasty:**

**Accelerated Data Annotation:** Hasty's AI-powered approach expedites the data annotation process, allowing you to create annotations at an unprecedented speed.

**Streamlined Quality Control:** By automating quality control through AI consensus scoring, Hasty simplifies the review process, saving time and resources.

**Efficient Model Creation:** With Model Playground, Hasty empowers users to quickly create and fine-tune Vision AI models, achieving optimal performance.

**Seamless Deployment:** Hasty offers flexible deployment options, allowing you to deploy models within the Hasty platform or export them for integration into your own environment.

**Conclusion:**
[Hasty's](https://www.aiforme.wiki/ai/tools/hasty) comprehensive platform empowers organisations to harness the full potential of Vision AI. From accelerating data annotation to automating quality control and facilitating efficient model creation, Hasty is a game-changer in the field of Vision AI. Embrace Hasty to unlock the power of AI and streamline your AI development process, enabling you to deliver production-ready AI models with ease.
Unleash your power with Cocaptain
Tags: programming, productivity, development, webdev
Published: 2023-07-22 02:54:10

## Introduction
- **Cocaptain** is a vscode extension that allows you to use chatgpt inside vscode without api-key.
- **Cocaptain** combines the power of chatgpt and vscode to make you more powerful.
- Fore more details : https://github.com/Ayyoub-ESSADEQ/cocaptain

## What you can do with Cocaptain ?
### Chat panel :
- Click on the chat icon and ask chatgpt what ever you want :

![chat panel demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xl3tucnah3do2x37gdi.gif)

- You could execute code directly from the chatpanel.
- You could give a custom name to the conversation.
- You start new conversation
- In case there is a problem, you could reload the extension.
- All those functionalities are available in the context menu of the webview (UI) of the extension.

### Project Structure Creation :
1. Create a powershell file, let's call it `projectStructure.ps1`
2. Inside the file put what ever you want your project to looks like. For example :
```powershell
# ask create a script that create a folder called test (in the current directory) that contains the following folders : public, src, and a file called package.json. Also, the folder folder called public contains the following folders : styles, scripts, images ?
```
3. click `tab`.
4. Enjoy the magic

![powershell demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pptf006fl4yenoqj6qit.gif)

### Code generation :
1. Create a file of your choice. For example, `test.py`.
2. Describe what you want to you want chatgpt to generate (just make sure to point chatgpt that you want only the codeblock). For example, put this inside test.py :
```python
# ask create a script that draw the graph of sin(x)+cos(y) using matplot lib (only the code)
```
3. click `tab` and wait.

## Use your imagination :
- You could do whatever you want with cocaptain, it's free and powerfull.