teleren/devto huggingface dataset:
How to Kill a Process Running on a Port
Tags: javascript, webdev, tutorial, linux
Published: 2022-09-18 20:12:20

**It is common in Node.js and other languages to run a script on a certain port**. Since ports can come in and out of use, it's also common to get the following error:
```
    Error: listen EADDRINUSE: address already in use :::3000
    at Server.setupListenHandle [as _listen2] (net.js:1318:16)
    at listenInCluster (net.js:1366:12)
    at Server.listen (net.js:1452:7)
    at Function.listen (/application.js:618:24)
    at file:///httpdocs/index.js:149:5
    Emitted 'error' event on Server instance at:
        at emitErrorNT (net.js:1345:8)
        at processTicksAndRejections (internal/process/task_queues.js:80:21) {
        code: 'EADDRINUSE',
        errno: -98,
        syscall: 'listen',
        address: '::',
        port: 3000
    }
```

This error says that there is currenlty something running on port 3000, so we can't use it. Fortunately this is quite easy to fix.

## Linux and Mac
To solve this issue on linux or on a mac, you first want to find out the process ID or PID currently running on the port (in our case :3000). To do that, you can use `lsof`. If you want a way to remember lsof, it is that it means 'list of'.
```
    lsof -i :3000
```
This will return processes running on port :3000.</strong> The next step is to kill the processes on that port. Note the PID, and then run the following command, replacing [PID] with your PID:
```
    kill -15 [PID]
```
Why -15? -15 refers to the message your computer will send. You should try **-15** the first time, as this will lead to an orderly shutdown of port 3000. If that doesn't work, then try:
```
    kill -9 [PID]
```

Now there will be nothing running on port :3000. This will also work for any other port you're having issues with, i.e. :8080, :1337, or any other number.

## For Windows Users
For any windows users out there, it is slightly different, but I have put this here as it may also prove useful. First off, find what is running at the port you are looking for (i.e. 3000). The PID can be found at the end of the line when you run this process:
```
    netstat -ano | findstr :3000
```

<p><strong>Then, similar to linux and mac, kill what is on that port</strong>, replacing PID with the PID for that process from the statement above.</p>
<pre><code class="shell">
    taskkill /PID PID /F
</code></pre>
Create design primitives with React and TailwindCSS
Tags: tailwindcss, javascript, typescript, react
Published: 2022-09-18 19:58:04

TailwindCSS is a powerful `utility-first` CSS framework for rapidly building your UI. It also removes all unused utility classes from the resulting bundle automatically. But this only works if a full `class name` provided by Tailwind like `bg-gray-900` is inside your code.

## A utility function to the rescue

To overcome this limitation, I played a bit around before I ended up with this:

```ts
function cx(...cns: (boolean | string | undefined)[]): string {
  return cns.filter(Boolean).join(" ");
}
```

This small function is quite handy in this case. It allows us to concatenate `utility classes` in various ways. For example:

```ts
const styles = {
  base: "bg-gray-700",
  abc: {
    a: "hover:bg-gray-600",
    b: "hover:bg-gray-500",
    c: "hover:bg-gray-400",
  },
};

const classes = cx(styles.base, styles.abc["b"]);
```

It's also possible to use `bool expressions`.

```ts
const classes = cx(true && "bg-gray-700", false && "hover:bg-gray-600");
```

The class `hover:bg-gray-600` will be filtered out by `cx` as the expression resulted in `false`.

## Full Example

```tsx
import { PropsWithChildren, ReactElement } from "react";

const styles = {
  base: "rounded",
  variants: {
    default: "bg-gray-600",
    primary: "bg-blue-600",
    secondary: "bg-green-600",
  },
  sizes: {
    sm: "px-1 py-1",
    md: "px-2 py-1",
    lg: "px-3 py-1",
  },
};

type Variant = keyof typeof styles.variants;

type Size = keyof typeof styles.sizes;

type Props = {
  type?: "button" | "submit";
  variant?: Variant;
  size?: Size;
  disabled?: boolean;
};

function Button({
  type = "button",
  variant = "default",
  size = "md",
  disabled = false,
  children,
}: PropsWithChildren<Props>): ReactElement {
  const classes = cx(
    styles.base,
    !disabled && styles.variants[variant],
    styles.sizes[size],
    disabled && "bg-gray-800"
  );

  return (
    <button type={type} className={classes} disabled={disabled}>
      {children}
    </button>
  );
}
```

Somewhere in your codebase, this can be used as follows:

```tsx
<Button>Click</Button>
<Button variant="primary">Click</Button>
<Button variant="secondary" sizes="lg">Click</Button>
<Button disabled>Click</Button>
```
Hot Take: Top Developers/CTOs Need Dumber Job Titles
Tags: devops, management, career, community
Published: 2022-09-18 19:41:07

{% youtube 2QHR9U0g61g %}

Titles can be a tricky thing, both in the way of determining what your title is and the social impact it has. Oliver Wyman's Head of Engineering Carolyn Vo has a made up title for her executive role, and explains why it affects her image as a manager in a positive light. Learn why you should too and more in this episode of Dev Interrupted, [listen here.](https://www.youtube.com/watch?v=HO6EZVU_oS4)

## [You’re invited to Interact on October 25th!](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog)

*Want to know how engineers at Slack and Stripe connect their dev teams’ work to the business bottom line? Or how team leads at Shopify and CircleCI keep elite cycle time while minimizing dev burnout and maximizing retention?*

*These are just two of the topics we’ll tackle at [Interact](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog) on October 25th.* 

*A* ***free, virtual, community-driven engineering leadership conference,*** *[Interact](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog) is a one-day event featuring over 25 of the most respected minds in development, all selected by the thousands of engineering leaders in the Dev Interrupted community.* 

## [Register now!](https://devinterrupted.com/event/interact/?utm_source=dev.to&utm_medium=referral&utm_campaign=202210%20-%20Event%20-%20Interact%20-%20Referral%20-%20Distro%20-%20Podcast%20Blog)


![Register now!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9xpvwbw5xfawom98qga.jpg)
JavaScript: OOP-Class
Tags: javascript, beginners
Published: 2022-09-17 05:32:43

1. **Classes are templates for objects**. The name of a class should have the first letter capital and the rest in camalcase.
2. **An instance is an object that contains the property name and method of a class**. 
3. When we create a new instance with the keyword `new`, the constructor method is called.
Note: class methods and getter syntax are the same with objects. **BUT** no commas between methods.
4. To call a method: `instance.methodname()`
5. Inheritance allows the child class to use share property and method. The `extend` keyword makes the method and getters of parent class available in the child class. The `super` keyword calls the constructor method in the parent class.
6. Static method can only be called directly from the class. It can't be used on an instance of a class or subclass. (don't forget the `()` at the end)
example code:

```
class Animal {
    constructor(breed, gender) {
        this._breed = breed;
        this._gender = gender;
        this._vaccine = 0;
    }
    get breed() {
        return this._breed;
    }
    get gender() {
        return this._gender;
    }
    get vaccine() {
        return this._vaccine;
    }
    vaccineShot(num) {
        this._vaccine += num;
    }
    static generateName(){
        const nameArr=['Milo','Cookie','Sandy','Odin'];
        return nameArr[Math.floor(Math.random()*3)]
    }
}
class Dog extends Animal {
    constructor(breed, gender, age) {
        super(breed, gender);
        this._age = age;
    }
    get age(){
        return this._age;
    }
    increaseAge(num){
        this._age+=num;
    }
}
const dahuang = new Dog('Golden Retriever', 'Male',1);
dahuang.vaccineShot(2)
console.log(dahuang)
//Output: DogHome { _breed: 'Golden Retriever', _gender: 'Male', _vaccine: 2, _age: 1 }
console.log(dahuang.vaccine)
//Output: 2
dahuang.increaseAge(1);
console.log(dahuang.age)
//Output: 2
console.log(Animal.generateName());
//Output: Milo

```
Mongo DB Troubleshooting!
Tags: help
Published: 2022-09-18 19:17:34

Hello all!

Trying to distinguish differences between users and was wondering if anyone out there was also using mongodb and realm specifically for authentication that would have some sort of idea how to manipulate this variable?

The alternative I was thinking if not possible was store a created value in a user object after authentication?? Thanks to all and would love all feedback!

(Variable needed to be manipulated is highlighted)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cck6f93zy2ndkwkkj3d7.png)
Smallest Even Multiple
Tags: leetcode, python
Published: 2022-09-18 18:45:33


Given a positive integer n, return the smallest positive integer that is a multiple of both 2 and n.



```py

class Solution(object):
    def smallestEvenMultiple(self, n):
        """
        :type n: int
        :rtype: int
        """
        res = 2 
        while True:
            if res % n == 0:
                return res
            res += 2
    
            
            
            
        

```
Refs in React
Tags: react, javascript, webdev, programming
Published: 2022-09-18 18:42:00

# **What are Refs?? anyone??**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0ubxmirloetzzkn67ub.gif)
Don't know, I am here to help you. if You know how to manipulate the DOM(Document Object Model) using Vanilla Javascript. Then understanding this concept would be easier.
So the ref's concept is same as using `document.getElementById`, `document.getElementByClassName` or `document.getElementByTagName` in javascript. This method is used to get access of the current element or component in the DOM structure were we can manipulate it or change its CSS attribute, delete or add an element. Same in React.js the Refs hook is used to get the access of the current element, Where it passes the current element object. We can manipulate it by calling the current attribute of that object. It doesn't re-render while the element is manipulated.

Lets understand it with an example:-
```
function CustomTextInput(props) {
  const Input = useRef();
  
  function handleClick() {
Input.current.focus();
  }

  return (
    <div>
      <input
        type="text"
        ref={Input} />
      <input
        type="button"
        value="Focus the input"
        onClick={handleClick}
      />
    </div>
  );
}
```
My Portfolio Site
Tags: portfolio, react, discuss, showdev
Published: 2022-09-18 18:35:34

Hey 👋, Guys I just Made My Portfolio Site and wanted to share you with all, It is Made using **React.js**

[My Portfolio Site](https://jayant818.netlify.app/)

It has some Flaws that are yet to be Resolved.

Pls have a look at this & give Your Review.

Thanks.
PreCloud version 1.8.1: Improve navigation and the PayPal button
Tags: encryption, privacy, paypal, reactnative
Published: 2022-09-18 18:35:02

In this version, I made the app navigation not swipable, this way I find it more solid when switching between screens.

I also added a “Copy” item in the menu for each password.

There is one more secret. You may noticed the PayPal button on the settings screen if you are using Android. It wasn’t showing for iOS. Because apple only allows in app purchases for any kind of payment. If I show it, apple will reject my app.

What I did in this version is, the PayPal button will only show after 7 days after I submit a new version. Apple normally reviews each version within 2 days, so they won’t see the button while reviewing 🤐

I will change to 3 days in next version :)

---

And feel free to use this button 😆

---

Use `PreCloudBlog` as password to decrypt this blog:

`PreCloud:wy4ECQMIoVsaaQScQn3gp2IFZ2nJMggQSBHcUocRQgW35AI6v7KXV5bhuIWjw0PB0sJBAUwpcXdMEt6ZvpsuSdaujSwPRs+ajP9CBVY2+t00zA7F7BMoVysS5ZeJa6bTmKt0Y09GXrmyVfL43tms0H6oc5IxOhfPjnCUeLGr1eO9SRmXH9ALvO2OVD6bUUImpy7Nj44RVLtgJJN7pYo6l9L5+DvFNFHMk5ChRkphv/Ko6GAAbXDW9Nf7MlVenFsm9VEO1qhlsQo4jejfiDgJQ3F2E8e0xFtTfSO1AEMqeX96EdNm7AiU8h0gKt690Pvgas54J9OShQ9nwmwwS5ZQknlF0YN11HbYbnnWmlfG2OIP6/gvyOD16wotG0jEoL+WCAP+mQ0ZMJOHiEQB2GTbQ32Gbr7LFX3xY3iUWSW2bblFxA7XJG48LFL0lyCwk4EBVJPS6wUeBOlh3oDWMqZEQOAYbSVI7W32sbXt6omfvUvKpyZjcnL3RXTFVy3rUpt1rRosQAK2SknMXvcj+Mvjf8BuindeTDsKMgXPf0SRLtswYc/Nvlw4KysiaY4Ytv8Dimwz95RgpXhz1wZ86OavTI9A3tQkRePQNd2WXaik7n3dez5U/0r3vq5E7icyAkJlGdGZ85aMF1DYzpUp9aoJZ8vAa7024mp05gM8xDOT1zmeoLXp/C/lhEK1ywfLaeAHXg3nQ57Rs4wf2QB37ysaHCMHW0RqnjLy6wnkaZcuh2sU4wKhL0Fn4nVxYkt9RUrfl6Bx6MsIsOsSI+6WZOloOVnFckkrDk609SZdyi7XAN4PNnGrP5aK08esDRJruuNOe3+YiOvlc62l0mjEaPKfCffCojbOKp7e3q59JkLGXtaKmoI3jOo8NQRQtiV38snh6jUhIwMpS/5v4AIat1ATfFczFVFNFXSP0sWgorszoo1js6A9S0nccLgy1n3Cz/K5c6PrM4UnBz+06e8rFhCKQciOmHaRpBxqCvQVNGIreMVbfoGOG2VzA/jOZ5TMQbJIsjD/ZuhF47p/qZ9tp9Qdhvc9sIeMegJqS9nAjAtUloEd9htJKye6i4/RVCFM4He4OevKUQ==`

---

Download the new version: [Play store](https://play.google.com/store/apps/details?id=com.precloud) or [App store](https://apps.apple.com/us/app/precloud/id1638793841)
Tel Links
Tags: html
Published: 2022-09-18 18:33:36

For many years there has been a standard for making links that open phone apps to dial a phone number. This is really great. Imagine you're browsing a website for a pizza place and you want to start a phone call to place the order. Without a tel link, especially on mobile, you're stuck memorizing the number and copying it over to your phone app. With a tel link, you quickly click on the link and your phone app is opened with the number in the dialpad.

The problem comes with extensions. How do you tell the phone app to dial an extension after the base number?

Some quick searching of the Internet seems to point toward the use of w (for wait) or p (for pause) as the marker between the number and the extension, e.g. 555-555-5555w555 or 555-555-5555p555. I tested these options on my Android phone and on Skype on a Windows 10 machine (the version from the Store). They did not work.

Some more research found that another option was a comma (,). This one does work on both iOS and Android. It does not work with desktop Skype. 

It also might not cover absolutely everything that has to be pressed. For example, in the system I tested in, it required pressing # after the extension. It did not work to add # to the end of the link, e.g. tel:+1555-555-5555,555#

## Now What?

So, what should you do? It's not very consistent, unfortunately. If you know your audience is solely or mostly iOS and Android, you can proceed with the comma approach. But that will fail completely - not gracefully - in other uncommon circumstances like Skype. That might be an acceptable trade most of the time, because how many people are really clicking on a phone link on something other than iOS or Android at this point?

A middle ground approach is to link the base phone number without the extension. This will work on any phone app that supports the tel protocol. This leaves some minor room for confusion, though: somebody clicks the link, it launches the phone app, then you hear it asking for an extension, so you have to switch back to the browser to read the extension, and switch back to the app to enter it. That's a bit of an annoying surprise, but I'm in the camp that it is still less annoying than having no link at all.

And of course, that's the third option: don't link anything. This would be the philosophy that it's better to do nothing if you can't do it perfect.

In my context, we went with the comma. We know the audience is going to be almost if not entirely iOS and Android wanting that functionality. But which one you go with may depend on your context, because unfortunately it is not a completely universal standard.
PHP: XDebug in VS Code
Tags: php, vscode, testing
Published: 2022-09-18 18:30:13

[XDebug](https://xdebug.org/) is a helpful tool when debugging PHP code. XDebug is a step debugging tools that helps you inspect functionality of PHP code in a cleaner way than regularly writing dump/log statements.

I will not get into details here about setting up XDebug on a server, but you can find that with some Internet searching. Instead, this post is about how to use XDebug within Visual Studio Code.

## Install the Extension

First, install [the extension PHP Debug (xdebug.php-debug) from the Visual Studio Code extension directory](https://marketplace.visualstudio.com/items?itemName=xdebug.php-debug).

!["Visual Studio Code extension page"](https://ryanrobinson.technology/assets/img/2022/03/PHP-Debug-extension-page.png)
_Screenshot of the extension in the directory_

### Start the Listener

To start the XDebug listener:

1. Go to the “Run and Debug” tab (Ctrl + Shift + D) in the main app sidebar.
2. Click the play button beside the XDebug listener. Depending on your developer environment, you may have other listeners as well.

A small window will be added to your workspace with a few buttons. While everything is running smoothly, it will be a pause, a stop, and a restart button. While stopped because of a breakpoint, it will provide other options to continue, step over, step into, and step out.

!["XDebug in VS Code debug panel"](https://ryanrobinson.technology/assets/img/2022/03/Debug-panel.png)
_Debug panel_

### Monitor Notices, Warnings, etc

You can monitor for any notices, warnings, errors, or exceptions that occur while the listener is running.

1. Go to the “Run and Debug” tab (Ctrl + Shift + D) in the main app sidebar.
2. If it is collapsed, expand the “Breakpoints” accordion section.
3. Select under what conditions you want to break and show you results, e.g. Notices, Warnings.

### Add a Breakpoint

You can add a breakpoint at a line in the code and have XDebug report the value of variables as of the start of that line.

1. In the VS Code editor for the code you want to check, scroll to the left of the line of code you want to break. This will cause a little red dot to appear. Click on that red dot to create the breakpoint.
2. Carry out your test scenario (e.g. load the page that calls that PHP in your browser).
3. See the results with the values of each variable at the breakpoint, within the Run and Debug window in VS Code.

!["Visual Studio Code with an XDebug breakpoint set"](https://ryanrobinson.technology/assets/img/2022/03/XDebug-breakpoint.png)
_Breakpoint beside line of PHP code_
Free as in Cats
Tags: opensource
Published: 2022-09-18 18:28:46

I once heard the phrase that most open source projects (the context was specifically Drupal) was not free as in beer but was free as in cats.

What he meant by that is that you may not pay for the code up front, but you probably do have to pay to keep it running and you need to give it your attention if you really want to get the best of it. It’s not something you can enjoy with no responsibility.

Cats need food, attention (sometimes while you’re trying to sleep or use your computer), clean litter, play time, and so on. Open source technology needs code maintenance and infrastructure to run it.

This is a conversation that came up a lot in a previous job that included consulting with non-profit clients on Constituent Relationship Management (CRM) systems. They were often very excited that we could help them get set up with [CiviCRM](https://ryanrobinson.technology/categories/civicrm/), an open source platform, in part because it was “free.”

We made a habit of explaining that the code may be free, but there would still be costs in other ways. There were costs paid to us to help them configure it properly. There were costs paid to us to apply software maintenance updates on a regular basis. There were costs for a web server to host the site, and CiviCRM did need meaningfully more power – which meant more expensive – than a simple WordPress shared host. There would often be the cost of bugs, both in terms of lost productivity while the bug was present and in terms of time/money to get the bug fixed. There were costs to develop any custom extensions. They had to know all this before they signed off on a project.

Not always, but sometimes – especially with non-profit deals available with services like Salesforce and Dynamics 365 – it would actually be cheaper in both time and money to use a paid closed source hosted platform than to use the “free” CiviCRM. That depends on a few variables including number of users and how many customizations would be needed. And of course, there were other variables as well unrelated to cost (CiviCRM is built for non-profits first). Cost isn’t the only factor, but it often is the first one that comes to mind for non-profits on a tight budget.

Open source is great. I’m thankful for many great open source systems including CiviCRM and Drupal. Just know that “free” is “as in cats” rather than “as in beer.”
GitHub and GitLab: Diagrams in Markdown
Tags: github, gitlab, markdown
Published: 2022-09-18 18:27:39

GitHub recently announced [a great new feature that allows for generating diagrams within markdown](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/). I tested this out and it also works in GitLab.

If you’re writing a lot of documentation in markdown, as you probably are if you’re using GitHub or GitLab, this can be really nice when you need diagrams, like mapping out your CI/CD system or server maps. You can build diagrams much faster than putting something together in Photoshop or some other diagramming tool that exports an image which you then need to upload.

This is all it takes, building off the standard code markdown “` markers and using arrows to indicate links between objects.

```markdown
mermaid
  graph TD;
      A-->B;
      A-->C;
      B-->D;
      C-->D;
```
Drupal: Ckeditor Abbreviation
Tags: drupal
Published: 2022-09-18 18:26:23

One of the HTML tags that many are not aware of is [the &lt;abbr&gt; tag](https://www.w3schools.com/TAGS/tag_abbr.asp). This is a useful tag to help provide explanations of abbreviations within the body of the text. If you’re reading along and see an abbreviation for <abbr title="WordPress">WP</abbr> and you know what it is, you can keep reading. If you’re reading along and see an abbreviation and don’t know what it is, you can hover over it and it will show you an explanation. It’s a win-win, providing an explanation for those that need it without needing to add more text in the main body which may come across as over-explaining for those that don’t need it.

To make it easy to insert this tag into Drupal content, you can install [the ckeditor\_abbreviation module](https://www.drupal.org/project/ckeditor_abbreviation). This is a simple but effective module that adds a button to the ckeditor WYSIWYG editing panel that enables users to add an &lt;abbr&gt; without touching any code. The interface fits in seamlessly, with a similar experience to adding a link.