teleren/devto huggingface dataset:
The Broken Metric: Why Years of Experience is Meaningless in Software
Tags: career, community, react, algorithms
Published: 2022-09-10 17:17:21

We've all seen it: a job you're more than capable of handling in a competent manner: an opening for a developer position that highlights a tech stack that is your bread and butter.

You know it inside and out. Forwards and backwards. MERN. LAMP. Whichever it is. You know all the latest and most relevant features of your language. ES6? You're fluent in ES2022 - on top of all the newest tricks and shortcuts - Hooks, Async, Typescript, what have you. 

The problem? **Not one of these techniques existed five years ago.**

**So in what broken and out-of-touch hiring system is it important that you were writing React apps five years ago?**

Class Components. Functional Components. Hooks. Redux. Going all the way back to when react was a library you included in a `<script>` tag. Obviously, this sort of scenario applies across technologies.

_**Why**_ should it matter, at all, if you were writing React in a style and manner that was en vogue six years ago -- but which is **_completely useless now?_** 

The obvious answer is that **IT DOESN'T.**

So why do HR departments and hiring managers continuously look at this metric? 

The easy answer is because technology is a dense, and hard-to-evaluate skillset for people who are not themselves educated in it. The HR department doesn't know how to distinguish one resume from another for the simple reason that they don't know a promise from a hash table: _they don't speak the language._

And so, they resort to familiar, albeit broken, metrics of competency: years of experience. 

Which in an industry where the standard of operation changes every few months; reflects absolutely nothing regarding the skill level of a candidate.

Now there is some obvious benefit to having done something for a longer amount of time; but this creates a bar to jump over which in many cases, does nothing to actually differentiate candidates, and instead only favors those who have momentum in their career; instead of being a fair reflection of who is competent in the job.

Of course, some companies have sought to solve this by requiring coding interviews that resemble leetcode questions.  

This is better; but it still has little to do with a Front-End or Mobile developer's day-to-day job responsibilities.

Other companies have gotten a bit closer with sending 'take home assignments' -- which mock actual real-world development; but the problem here is that the time requirements often make applicants feel rushed and prone to submit a project with overlooked bugs or a lack of polish.

Perhaps together, we can steer the industry into a bright new day where hiring managers have someone qualified **actually review the github linked on your resume.**
Make awesome button hover effect using HTML CSS only
Tags: css, hover, tutorial, webdev
Published: 2022-09-10 17:02:00

Hello guys. today I will learn you how to do this: 

we need only thoose:


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

In HTML file we will create button has class called "btn" (or any name you want): 

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Awesome Button Hover Effect</title>
</head>
<body>
    <button class="btn">Hover me</button>
</body>
</html>
```

Don't forget link CSS file with HTML (in **head** tag):

```
<link rel="stylesheet" href="style.css">
```

In CSS file:
 - First we need to remove basic styles:
 

```
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
```

 - we need edit the background and center button

```
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgb(8, 8, 8);
}
```

 - then we need to edit CSS of button ( without hover first ):

```
:root {
    --main-color: rgb(180, 255, 68);
}

.btn {
    position: relative;
    padding: 12px 35px;
    border: 3px solid var(--main-color);
    border-radius: 0;
    font-size: 17px;
    background: none;
    color: var(--main-color);
    font-family: sans-serif;
}
```


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


 - make before element for the button:

```
.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 100%;
    background-color: var(--main-color);
}
```

 - Then we need to make hover effect. the before element translateY will be 0 when hover.

```
.btn:hover {
    color: rgb(0, 0, 1);
}

.btn:hover::before {
    z-index: -10;
    transform: translateY(0);
}
```

 - then we need to appear before element only on hover, so we will add overflow hidden for button:

```
.btn {
   overflow: hidden;
}
```

 - the next thing we want to do is making the transitions:

```
.btn {
    transition: 0.5s linear;
}
 
.btn:hover {
    transition: 0.5s linear;
}

.btn::before {
    transition: 0.5s linear;
}

.btn:hover::before {
    transition: 0.5s linear;
}
```

 - the next thing we want to do is making drop shadow on hover

```
.btn:hover {
   filter: drop-shadow(0 0 50px var(--main-color));
}
```

 - the last step is making RGB color animation:

```
@keyframes animate {
    0% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(0deg);
    } 100% {
        filter: drop-shadow(0 0 50px var(--main-color)) hue-rotate(360deg);
    }
}

.btn {
    animation: animate 3s linear infinite;
}
```

{% codepen https://codepen.io/AmrV/pen/WNJxemq %}
Python: The benefits and limitations
Tags: python, programming, beginners
Published: 2022-09-10 16:45:44

## Introduction to the Python programming language

It’s one of the most popular programming languages out there at the moment and still growing. Originally founded in 1991 by Guido van Rossum. Python is used in a wide variety of fields, but it’s especially popular for data science and web development.

---

**So, what are the benefits and limitations of the Python programming language?**

---

.
.
.

---

**Benefits:**

- It is very easy to learn (beginner friendly)

- There is a lot of library support

- Lots of community support

- Open-source (freeware)

- Excellent at scaling from simple applications to those that are more complex in nature

---

**Limitations:**

- It is slower than a lot of languages because it is an interpreted programming language

- Not a good language for mobile development and computing

- It isn’t good at threading due to the global interpreter lock

- It has limitations with database access because its data access layer is not very well developed

- Memory consumption is too high, so it’s not a good choice for memory-intensive tasks
Livewire Confirm
Tags: laravel, livewire
Published: 2022-09-10 16:35:28

Let's create a confirmation dialog using Livewire. 

The confirm dialog will display and do what ever it needs after the user click on confirm button.

```php
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Confirm extends Component
{
    public $displayingModal = false;

    protected $listeners = [
        'displayConfirmation' => 'display',
    ];

    public $state = [
        'title' => '',
        'message' => '',
        'return' => [
            'component' => '',
            'args' => [],
        ],
    ];

    public function display($title, $message, $component, ...$args)
    {
        $this->state['title'] = $title;
        $this->state['message'] = $message;
        $this->state['return'] = [
            'component' => $component,
            'args' => $args,
        ];

        $this->displayingModal = true;
    }

    public function confirm()
    {
        $this->emitTo(
            $this->state['return']['component'],
            ...$this->state['return']['args']
        );

        $this->displayingModal = false;
    }

    public function cancel()
    {
        $this->state = [
            'title' => '',
            'message' => '',
            'return' => [
                'component' => '',
                'args' => [],
            ],
        ];
        $this->displayingModal = false;
    }

    public function render()
    {
        return view('livewire.confirm');
    }
}
```

The blade file:

```php
<div>
    <x-jet-dialog-modal wire:model="displayingModal">
        <x-slot name="title">
            {{ $state['title'] }}
        </x-slot>

        <x-slot name="content">
            <p>
                {{ $state['message'] }}
            </p>
        </x-slot>

        <x-slot name="footer">
            <x-jet-secondary-button wire:click="cancel" wire:loading.attr="disabled">
                {{ __('No') }}
            </x-jet-secondary-button>

            <x-jet-button class="ml-3" wire:click="confirm" wire:loading.attr="disabled">
                {{ __('Yes') }}
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>
```

And the usage will be like:

```php
$this->emitTo('confirm', 'displayConfirmation', 'Delete Record', 'Are you sure?', 'livewire-component-name', 'destroyRecord', '11234');
```

OR

```html
<div class="cursor-pointer"
    wire:click="$emitTo('confirm', 'displayConfirmation', 'Delete Record', 'Are you sure?', 'livewire-component-name', 'destroyRecord', '11234')">
    <x-icon name="o-trash" class="text-indigo hover:text-red-500 mr-3 flex-shrink-0 h-6 w-6">
    </x-icon>
</div>
```

The `emitTo` basically trigger to given Livewire component's name, call the method, and pass whatever arguments required for the method.

Do take note the `livewire-component-name` is responsible to handle whatever methods defined for further actions. `destroyRecord` is a method to be call i `livewire-component-name`, and '1234' argument expected to received in `destroyRecord` in `livewire-component-name`.
Livewire Alert
Tags: livewire, laravel
Published: 2022-09-10 16:25:26

Let's create a simple Livewire Alert component, to replace a normal conventional alert message. 

> Assuming you are using Laravel Jetstream as well.

```php
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Alert extends Component
{
    public $displayingModal = false;

    public $state = [
        'title' => '',
        'message' => '',
    ];

    protected $listeners = [
        'displayAlert' => 'display',
    ];

    public function display($title, $message)
    {
        $this->state['title'] = $title;
        $this->state['message'] = $message;

        $this->displayingModal = true;
    }

    public function render()
    {
        return view('livewire.alert');
    }
}
```

The blade file:

```php
<div>
    <x-jet-dialog-modal wire:model="displayingModal">
        <x-slot name="title">
            {{ $state['title'] }}
        </x-slot>

        <x-slot name="content">
            <p>
                {{ $state['message'] }}
            </p>
        </x-slot>

        <x-slot name="footer">
            <x-jet-button class="ml-3" wire:click="$set('displayingModal', false)" wire:loading.attr="disabled">
                {{ __('Close') }}
            </x-jet-button>
        </x-slot>
    </x-jet-dialog-modal>
</div>
```

Once you have the component configured, you may use and trigger by using `emitTo`:

```php
$this->emitTo('alert', 'displayAlert',  'Greeting', 'Hello World!');
```
What is a HeadlessChrome user agent?
Tags: ask, webdev
Published: 2022-09-10 16:21:41

Here's what I get when I inspect user agents visiting my site:

```
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/92.0.4512.0 Safari/537.36
Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/91.0.4472.114 Safari/537.36 Prerender (+https://github.com/prerender/prerender)
...
```

What does this prerender thing mean? What does this HeadlessChrome mean? Are all of these bots? 
FYI, I am using Netlify as my hosting.
HTML hidden element
Published: 2022-09-10 15:48:35

## What is The HTML hidden attribute?
The **HTML hidden attribute** is used to hide an element. It indicates that the element is not yet, or no longer, relevant. It sets the visibility of the elements in the document.  When it is present the browser will not display the element to the user, but it remains in its position on the webpage.

The hidden element is used to not show the element to the user unless certain conditions are met such as pressing a button or checkbox, etc. Using JavaScript statement, the hidden attribute can be removed and make the element visible to the user.

**Note**: The hidden attribute is a boolean attribute.
**Example 1**
`<!DOCTYPE html>
<html>
<head>
    <title>hidden attribute</title>
</head>
<body>
    <h1>GitDemy</h1>
    <h2>HTML hidden attribute</h2>
    <!-- hidden paragraph -->
    <div hidden>
      This content will be hidden while
      displaying the content
    </div>
    <h4>A computer science portal for development.</h4>
</body>
</html>`
**Output**
In the following example, the div element is hidden from the user's view.

![Image HTML hidden attribute example output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47m4zlopgy9uk1j0w8r7.jpg)

This article is originally posted on [GitDemy](https://gitdemy.com)
Read full article, click the below link.
[HTML hidden attribute](https://gitdemy.com/reference/html-hidden-attribute)
This week in DevRel: Projects Coming Alive
Tags: devrel, codenewbie
Published: 2022-09-10 15:44:51

---
title: This week in DevRel: Projects Coming Alive
published: true
description: Community Building is a long-game. There's a lot of prep work that goes into things; it's a good feeling when you start to see them coming alive.
tags: devrel, codenewbie
series: Technical Community Building
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---
Another week in the Technical Community Builder Life and a lot of work saw the light of day this week. Here are some of the main tasks I worked on:

## Blog post 
I drafted my blog [Machine Learning for Front-end Developers: Get Started with TensorFlow.js](https://developers.deepgram.com/blog/2022/08/getting-started-with-tensorflowjs/) a couple of weeks ago, and then made updates based on an SEO review and a DevRel. As part of this process, I also requested artwork, posted it on the [Deepgram Blog](https://developers.deepgram.com/blog/), cross-posted to Dev, and then created social media posts for sharing my blog post.

##  Forum
We did a soft launch of [our forum](https://github.com/orgs/deepgram/discussions) that's powered by GitHub discussions. As part of this soft launch, I discovered that we can only have 10 categories, and then I internally cried and had to rethink some of what I have planned. I also met with a few teams within Deepgram to discuss how we can utilize the forums to support each other. As part of this soft-launch, we had our first [Community Spotlight](https://github.com/orgs/deepgram/discussions/18) on a familiar face around these Dev blog posts: [Madza](https://dev.to/madza). Y'all should go over and say hi in our [intro thread](https://github.com/orgs/deepgram/discussions/3)! We're giving away a $100 Amazon gift card to a person posted in our forum.

## Twitter Space
I got to sit down with Madza this week in a Twitter Space to talk about Hackathons. Unfortunately, the audio made it a little difficult to hear, but we were still able to capture some really important information on how to approach hackathons.

## Community Strategy
I'm super stoked about having a Community space with our forum, because it creates a centralized space for our Community. As part of that, I'm working on how to support different community members, whether a web developer, university student, python developer, or SaaS founder. Understanding your members is a key part of developing a strategy for engaging, supporting, and filling a need for them. 

Next week I'll be at [MagnoliaJS](https://www.magnoliajs.com/)- you can still grab tickets! - so I loaded my week with a lot of prep work to be able to keep up with my day-to-day community work while still being able to speak at and attend the conference. Let me know if you'll be there!
Finding order in disorder
Tags: productivity, life, gtd, tooling
Published: 2022-09-10 15:33:40

I am going through a period of my life where everything seems to be showing signs of strain. Much as if you inspect a building and find potential points of failure. Sometimes it feels as if there are so many of these points that I could never get things back in order.

But I am not bankrupt. I am not going to lie down and accept my fate. I was talking to a close childhood friend yesterday and he gave me a beautiful analogy.

Life is like a wave on the shore. When caught off guard, most people will let life happen. They will stand there and let the wave engulf them. This is not a bad things. Sometimes you have to let the universe unfold how it will.

But we have another choice. We can dive into that wave. We can take the reign.

It's okay to experience life, but don't be afraid to make life and experience.
Day-10 of machine learning
Tags: beginners, programming, machinelearning, leetcode
Published: 2022-09-10 15:33:37

Day-10 of machine learning:
- completed Linear Regression assignment where I implemented cost function and implemented the gradient for parameters 𝑤,𝑏  for linear regression with one variable (city population) to predict profit for a franchise. 


Also
- solved some basic coding questions at leet code and code studio.
About some popular internet protocols
Tags: webdev, beginners, javascript, react
Published: 2022-09-10 14:34:01

In this article i am discussing about some protocols used widely in web dev.

1. HTTP
2. HTTPS
3. FTP
4. SSH
5. IMAP
6. SMTP

## SSH
- It will allow users to access files and control system in remote over internet.
- Data will be encrypted. So middle persons cannot see the actual data.
- It will maintain state of connection.
- As i mentioned in the first point one user can control other machine shell / command prompt with SSH.
- Format to use `ssh <SYSTEM_USER_NAME>@<HOST_IP>`.
- Default port number is 22.
- Generally developers will use SSH to access containers or servers. Example AWS EC2 cluster can be accessed by SSH, Digital ocean droplets can be accessed by SSH.
- Widely used encryption methods in SSH are AES and Blowfish.
- Refer this [link](https://www.redhat.com/sysadmin/ssh-secure-communication#:~:text=SSH%20uses%20three%20different%20encryption,Hashing) to know more about how encryption works in SSH.

## HTTP
- Hypertext transfer protocol allows us to send files like HTML, CSS, JS and image files etc.. between client and server.
- It is stateless. It won't maintain any state.
- Format to use `http://<DOMAIN/IP>:PORT`
- Default http port is 80
- It is oneway communication.

## HTTPS
- HTTP has a drawback. Any one can read the data while transferring because data will be in plain format. To solve this problem we will use HTTPS. It will encrypt the data while transferring so man in middle can't see the actual data as it is encrypted.
- It is stateless. It won't maintain any state.
- Format to use `https://<DOMAIN/IP>:PORT`.
- Default http port is 443.
- It is also oneway communication.

HTTPS = HTTP + SSL

## FTP
- File transfer protocol is used to share / upload files between to machines.
- Unlike HTTPS it is bi-directional
- Client can upload files in server and server also can do the same.
- It is outdated. People won't prefer to use this protocol in these days.
- Default port number is 21.
- Format to use in command prompt `ftp <DOMAIN/IP>`.
- It will maintain state of connection.

## IMAP
- Internet Message Access Protocol is used to receive emails in internet.
- Default port number is 143.

## SMTP
- Simple mail transfer protocol is used to send emails in internet.
- Default port number is 25.

Happy coding!
OSD600 Blog #1
Tags: opensource, osd600
Published: 2022-09-10 13:52:31

Hey Everyone!

My name's Rohan, and I recently just finished up my 4th semester at Seneca College as a Computer Programming & Analysis student. I'm actually currently working as a co-op student, but I enrolled in this course because I really did not want to miss the chance to take this before I graduate. 

I think my first real exposure to Open Source was maybe 5-7 years ago, when I had a really old Android phone (it must have been a Nexus 5). Google stopped providing the phone with updates just 2 years after release,even though the hardware was just fine. This is when I learned of various open source "custom rom" projects, with the big one being CyanogenMod (now known as LineageOS). 

I remember thinking it was amazing that these groups of people all over the world were working together towards a common goal of keeping their phones supported by themselves, without relying on the manufacturers. The amount of e-waste that was probably generated due to how disposable we treated phones is probably massive, and this aimed to tackle that.

This semester, I really wanted to learn how exactly coding works when you are working with large groups of people and a large code base, as up until now I've mainly just been coding on my own projects, which have only topped out at probably a few thousand lines of code. I'd also like get a more solid understanding of Git, as currently I only know the basics. 

The trending repo I looked at was the Insomnia app repo: https://github.com/Kong/insomnia. 

I chose this because I did not know that there were tools like this, as last semester I would be using curL commands in the terminal for interacting with REST APIs.
Using find function nodejs
Tags: node, mongodb, flutter, javascript
Published: 2022-09-10 14:18:50

```js
const categorySchema = mongoose.Schema({
    name: {
        required: true,
        type: String
    }
});

const productSchema = mongoose.Schema({
    name: {
        type: String,
        required: true
    },
    category: {
        type: mongoose.Schema.Types.Mixed,
        ref: "Category",
        required: true
    }
});
```
As you see above I have two models where I am using Category inside Product.
Now I want to fetch all the products by passing a particular Category or its id as _id which gets generated by default by mongodb.
Although I am achieving the desired result do this below:

```js
        const id = req.query.categoryId;//getting this from GET REQUEST
        let tempProducts = [];
        let products = await Product.find({});

            products.forEach(product => {
                if (product.category._id===id){
                    tempProducts.push(product);
                }
        });
```
It gets me what I want to achieve but still I want to know how to get it using "find" function. or this what I am doing is the only way.
Email Activation on User Registration
Tags: programming, tutorial, wordpress
Published: 2022-09-10 14:15:52

Whether you're setting up email activation on user registration, this video will show you the easiest way to do it. We'll also show you how to add user activation options, so you can ensure that your users are fully registered and ready to use your site.

User activation option upon registration:
- Auto activation
- Need email verification
- Need admin approval
- Need both email verification and admin approval

https://www.youtube.com/watch?v=kIBhKy8jnZ8
Remove Duplicates from Sorted LinkedList
Tags: javascript, leetcode
Published: 2022-09-10 13:13:13


Given the head of a sorted linked list, delete all duplicates such that each element appears only once. Return the linked list sorted as well.


Example 1:


Input: head = [1,1,2]
Output: [1,2]


Approach 1
pntr1 & pntr2 is only for understanding purpose
```js
var deleteDuplicates = function(head) {
   let pntr1 = head;
  while (pntr1 && pntr1.next) {
    let one = pntr1;
    let two = pntr1.next;

    if (one.val === two.val) {
      pntr1.next = pntr1.next.next;
    } else {
      pntr1 = pntr1.next;
    }
  }
    return head;
};

```