teleren/devto huggingface dataset:
Tackling Clickbait on DEV: Strategy and Technical Approach
Tags: meta, ai, webdev, machinelearning
Published: 2024-01-24 14:34:27

# Tackling Clickbait on DEV: Our Strategy and Actions

Recently, we have implemented measures to address the issue of clickbait on DEV. This post aims to explain our approach and the rationale behind it.

## Defining Clickbait

Clickbait typically refers to content with certain patterns in titles, such as listicles or sensationalist headlines. While listicles, for instance, have gained traction for driving engagement on DEV, they sometimes lead to an imbalance, as illustrated by community initiatives like this Chrome add-on:

{% embed https://dev.to/lnahrf/no-listicles-the-chrome-add-on-that-removes-list-type-articles-from-your-devto-feed-3i8 %}

## Our Approach

### Emphasis on Mitigation Over Strict Filtering

Instead of implementing rigid filtering, we've opted for a more nuanced approach. The reasons are as follows:

- **Balance in Content**: Not all listicles are negative; they can be informative. However, they are often disproportionately rewarded due to our engagement-based system.
- **Diverse Nature of Clickbait**: Clickbait comes in many forms, and a rigid filter might not effectively catch them all.
- **Subjectivity Issues**: The subjective nature of determining what constitutes clickbait makes strict filtering impractical.

### AI and Human Judgment in Scoring

We introduced a `clickbait_score` field in our app, ranging from `0.0` to `1.0`.

{% embed https://github.com/forem/forem/pull/20493 %}

This score isn't determined solely by algorithms. We utilize AI along with human judgment to assign scores to posts, recognizing the subjective and nuanced nature of the task.

### Implementing Through A/B Testing

We are carefully integrating the clickbait score. As part of our ongoing A/B tests, users may experience varying levels of clickbait mitigation. This data will help us refine our approach in the coming weeks.

### Looking Ahead: Customizable User Settings

While we are working on a default setting for managing clickbait, we recognize the need for personalization. Future updates may include user-specific settings to tailor feed preferences based on clickbait scores.

_We will be sharing more in the near future about a variety of strategies we are undertaking to improve the core experience and help **separate signal from noise** on DEV_.

Happy coding ❤️
Node.JS vs PHP: A Closer Look at Efficiency
Tags: webdev, javascript, node, php
Published: 2024-01-24 14:34:24

In the world of web development, choosing the right technology is crucial. Today, let's talk about **Node.js** and **PHP**, two popular choices with different approaches to efficiency. 🚀

**1. Node.js:**
🔹 Built on the V8 JavaScript engine, it's known for its speed and non-blocking, event-driven architecture.
🔹 Perfect for real-time applications, such as chat apps and streaming services.
🔹 Scalable, thanks to its ability to handle concurrent connections efficiently.
🔹 A strong choice for building APIs and server-side applications.
**2. PHP:**
🔹 A server-side scripting language known for its simplicity and wide adoption.
🔹 Well-suited for traditional web applications and content management systems (CMS).
🔹 Extensive community support and a vast library of packages and frameworks.
🔹 A great choice for quick prototyping and web projects.
Ultimately, the choice between Node.js and PHP depends on your project's requirements. Node.js excels in high-performance applications, while PHP remains a solid choice for many web scenarios.
What's your experience with these technologies ⁇ Feel free to share your thoughts and use cases in the comments below!
Follow for more
[Github](https://github.com/hadiraza04/)
[Twitter or X](https://twitter.com/hadiraza04)
nvm 설치, 2024-01-24
Tags: nvm, node
Published: 2024-01-24 14:33:35

https://github.com/coreybutler/nvm-windows/releases

nvm-setup.zip 다운로드

원하는 곳에 설치

```
nvm list available
```
LTS 버전이 안정적이기 때문에 LTS 버전 중에 최신 버전 다운로드

```
nvm install 버전
```

설치 완료 후 설치 완료된 버전 확인 가능

```
nvm ls
```

원하는 버전 사용

```
nvm use <version>
```

> npm'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.

nvm 설치 후 사용할 버전 설정을 하지 않으면 에러가 뜸


_참조: https://jin2rang.tistory.com/entry/Window-Nodejs-%EC%84%A4%EC%B9%982_
Need feedback on my playground project
Tags: discuss, watercooler, webdev, tutorial
Published: 2024-01-24 14:32:00

Was looking for some dev feedback for a playground built to demonstrate the value of our offering. Kindly do check it out and help me improve the messaging. 

1. Playground - https://inbox-playground.suprsend.com/ 
2. Associated webpage
 - https://www.suprsend.com/products/app-inbox 

Here's an image of playground

![app inbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldkxwbqcb81m0bbd3g20.png)



It's a messaging tool which guarantees 100% deliverability, as opposite to email or push which may get lost due to numerous reasons. Esp important for some b2b usecases like collaborations, administrative decisions, project management and more.
Some Typescript definitions
Published: 2024-01-24 14:30:33

_...work in progress..._


### Return type
You are able to define the return type of the function that you're calling. You can check the **Basic Types** in this [link](https://www.typescriptlang.org/docs/handbook/basic-types.html). Later we are going to approach some more complex approches.
*Example:*

![Return type example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjt0oqirznykrsta5kxw.png)

### **d.ts** files
This file provides typescript type information about some API file written in JavaScript, been **d** standing for **Declaration Files**. So let's supose that you're consuming some external library function, and wants to know what's the return type of certain function


### Generics
Let's use a function example. You know exactly the type that will be returned by that function, so thanks to generic, you can specify it instead of creating a function with static types.

```typescript
// A generic function to create a Box holding a value of any type
function createBox<T>(value: T): { getValue: () => T, setValue: (newValue: T) => void } {
    let internalValue: T = value;

    return {
        getValue: () => internalValue,
        setValue: (newValue: T) => {
            internalValue = newValue;
        }
    };
}

// Example usage of the generic createBox function
const numberBox = createBox<number>(42);
console.log("Number Box Value:", numberBox.getValue());

const stringBox = createBox<string>("Hello, Generics!");
console.log("String Box Value:", stringBox.getValue());

// You can also use the same generic function for other types
const booleanBox = createBox<boolean>(true);
console.log("Boolean Box Value:", booleanBox.getValue());
```


### Non-null assertion operator
TypeScript includes a non-null assertion operator, !, which you can append to the end of an expression when you are confident that the value will never be null or undefined. This allows you to bypass TypeScript's strict null checking for that specific value.

```typescript
interface User {
  id: number;
  name?: string; // The name property is optional
}

const user: User = { id: 1, name: "John Doe" };

// TypeScript would normally complain here since name could be undefined,
// but we're sure it's initialized in this context.
console.log(user.name!.toUpperCase()); // Output: JOHN DOE


```
How to create a POST api With Mongo DB and Node JS
Tags: mongodb, javascript, node, database
Published: 2024-01-24 14:24:33

first you have to build connection with you database for that will create db.js file you have to import this file in you main file named as index.js or server.js file you can see that in bottom code snippets

```
const mongoose = require("mongoose");
const express = require("express");
require("dotenv").config();
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
mongoose.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});

const db = mongoose.connection;
db.once("open", (_) => {
  console.log("Database connected:", process.env.MONGODB_URI);
});

db.on("error", (err) => {
  console.error("connection error:", err);
});
Create a usermodel.js file in your node js project

const moongoose = require("mongoose");
const userSchema = new moongoose.Schema({
    name: { type: String, required: true },
    email: { type: String, required: true }
    phone: { type: Number, required: true }
    //---- you can add multiple parameters over here
});
```

module.exports = moongoose.model("user", userSchema);
now will will create a route file where are going to access this schema and build api to store data on database

create a userroutes.js file

```
const express = require("express");
const router = express.Router();
const user= require("./usermodel.js");

//-------- api structure -------------------
router.post("/adduser", async (req, res) => {
    const { name , email, phone} = req.body;
    try {
        const newUser= new user({
            name,
            email,
            phone
        });
        const savedUser = await newUser.save();
        res.status(200).json(savedUser);
    } catch (err) {
        res.status(500).json(err);
    }
});


module.exports = router; //======>dont for get to add

```
you might already have this file named as server.js or index.js in your folder stucture where you are going to build you api structure

```
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
var cors = require("cors");
app.use(express.urlencoded({ extended: true }));
app.use(bodyParser.json());
require("./db");


const User = require("./userroutes.js");


app.use("/api", User);

const server = app.listen(process.env.PORT, () => {
  console.log(`listening on port ${process.env.PORT}!`);
});

server;
```
so now you can create more apis

Happy Coding !
Mysql, 2024-01-24
Tags: mysql, windows
Published: 2024-01-24 13:58:26

https://dev.mysql.com/downloads/windows/installer/8.0.html

Mysql Installer 8.0.36 버전 설치
Microsoft Windows


Windows (x86, 32-bit), MSI Installer 다운로드

로그인하지 않고, No thanks, jus start my download 선택

Coustom 선택

[MySQL Servers] – [MySQL Server] – [MySQL Server 8.0] – [MySQL Server 8.0.33 – X64]

[Applications] – [MySQL Workbench] – [MySQL Workbench 8.0] – [MySQL Workbench 8.0.33 – X64]

[Documentation] – [Samples and Examples] – [Samples and Examples 8.0] – [Samples and Examples 8.0.33 – X86]

세 개 추가

<Microsoft Visual C++ 2019 Redistributable Package (x64) is not installed. Latest binary compatible version will be installed if agreed to resolve this requirement.">
Mysql 설치, 2024-01-24
Tags: mysql, windows
Published: 2024-01-24 13:58:26

https://dev.mysql.com/downloads/windows/installer/8.0.html

Mysql Installer 8.0.36 버전 설치
Microsoft Windows


Windows (x86, 32-bit), MSI Installer 다운로드

로그인하지 않고, No thanks, jus start my download 선택

Coustom 선택

[MySQL Servers] – [MySQL Server] – [MySQL Server 8.0] – [MySQL Server 8.0.33 – X64]

[Applications] – [MySQL Workbench] – [MySQL Workbench 8.0] – [MySQL Workbench 8.0.33 – X64]

[Documentation] – [Samples and Examples] – [Samples and Examples 8.0] – [Samples and Examples 8.0.33 – X86]

세 개 추가



> Microsoft Visual C++ 2019 Redistributable Package (x64) is not installed. Latest binary compatible version will be installed if agreed to resolve this requirement."

에러 발생 시
https://learn.microsoft.com/ko-KR/cpp/windows/latest-supported-vc-redist?view=msvc-170

https://aka.ms/vs/17/release/vc_redist.x64.exe 설치

기본 값 그대로 두고 설치
root 계정의 비밀번호 설 



_참조 : https://min-devlog.tistory.com/32_
A new customizable vue video player
Tags: vue, video, javascript, opensource
Published: 2024-01-24 13:47:42

Hey developers!

Today, my team at [display.studio](https://github.com/display-design-studio) released a new Vue library! We are excited to contribute to the open-source community by creating useful tools that are highly customizable and easy to implement.

[Library Link](https://github.com/display-design-studio/vue-player)

####First of all, what is it and why?
There are a lot of video player libraries but we found them hard to customize, heavy, and not easy to use in our nuxt projects.
Our library is available for every vue and nuxt project.
[Guide to installation](https://github.com/display-design-studio/vue-player?tab=readme-ov-file#installation)

####Our goal
We have developed a wrapper with minimal logic, which provides you with all the [props](https://github.com/display-design-studio/vue-player?tab=readme-ov-file#props) and [events](https://github.com/display-design-studio/vue-player?tab=readme-ov-file#events) of the video tag.

Example:
```vue
<script setup>
import { VuePlayer } from '@display-studio/vue-player'
</script>

<template>
    <div>
        <VuePlayer src="" poster="">
           <MyCustomControls />
        </VuePlayer>
    </div>
</template>
```
By default, the controls of the native video tag are disabled to allow you to utilize your custom controls.

Inside the VuePlayer instance, you can use the useVuePlayer function which provides you with:
- `togglePlay`
- `playing`
- `toggleMute`
- `videoMuted`

With these elements, you can customize your controls with different text or SVG.
```vue
<script setup>
import { useVuePlayer } from '@display-studio/vue-player'
const player = useVuePlayer()
</script>

<template>
  <div class="vue-player__controls">
    <button @click="player.togglePlay()" class="vue-player__controls-toggleplay">
      {{ player.playing ? "pause" : "play" }}
    </button>
    <button @click="player.toggleMute()" class="vue-player__controls-togglemute">
      {{ player.videoMuted ? "unmute" : "mute" }}
    </button>
  </div>
</template>
```

We started a [discussion on GitHub](https://github.com/display-design-studio/vue-player/discussions/1) to talk about new features such as implementing a fullscreen function in useVuePlayer to customize and place where you prefer.

Anyone who wants to contribute is welcome!
We are open to listening to feedback on bugs and new feature requests.

Thank you!
Laravel 10 FrankenPHP with PHP 8.3 with Ubuntu 22.04
Tags: php, laravel, nginx, webdev
Published: 2024-01-24 13:43:04

Operation System : Ubuntu 22.04 ARM 
Server Provider : AWS - t4g.micro (2vCPU with 1GB Ram)


Before getting started with FrankenPHP, you need to prepare your operation system with libraries and PHP required for Laravel.


Update and Upgrade your Operating System 
```
sudo apt update
sudo apt upgrade
sudo apt install zip unzip
```


Install PHP 8.3
```
# Add Ondrej's PPA
sudo add-apt-repository ppa:ondrej/php 
# Press enter when prompted.
```
Do another update & upgrade to grab the latest files from PHP 8.3(Ondrej's PPA)
```
sudo apt update
sudo apt upgrade
```

# Install new PHP 8.3 packages
```
sudo apt install php8.3 php8.3-cli php8.3-xml php8.3-{bz2,curl,mbstring,intl}
```

Navigate to the work directory
```
cd /var/www
```


Install Composer 
```
sudo php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
sudo php -r "if (hash_file('sha384', 'composer-setup.php') === 'e21205b207c3ff031906575712edab6f13eb0b361f2085f1f1237b7126d785e826a450292b6cfd1d64d92e6563bbde02') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"
sudo php composer-setup.php
sudo php -r "unlink('composer-setup.php');"
```

Most likely, you want to put the composer.phar into a directory on your PATH, so you can simply call composer from any directory (Global install), using for example:
```
sudo mv composer.phar /usr/local/bin/composer
```


```
sudo composer create-project laravel/laravel project_name
```


oops i'm still editing
Exciting News in Fintech! 🚀💻
Tags: fintech, snowflake, consultingservices, datamanagement
Published: 2024-01-24 13:41:24

Thrilled to share how our fintech firm is taking data management to new heights with Snowflake! ☁️❄️

In a world where data is king, we understand the paramount importance of efficient data management. Our recent integration with Snowflake has been a game-changer, bringing enhanced capabilities and unprecedented agility to our operations.

🔍 Unparalleled Insights: With [Snowflake's cloud-based data platform](https://www.softwebsolutions.com/portfolio/enhanced-data-management-using-snowflake-solutions.html), we now have real-time access to comprehensive insights, allowing us to make informed decisions and stay ahead of the curve in the dynamic fintech landscape.

💼 Optimized Performance: Say goodbye to sluggish queries and hello to lightning-fast performance! Snowflake's architecture ensures that our data processing is not just efficient but also scales seamlessly with our growing demands.

🔒 Fortified Security: Security is non-negotiable in fintech. Snowflake's robust security features provide an ironclad defense, ensuring the confidentiality and integrity of our sensitive financial data.


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

🔄 Agile Data Handling: The agility Snowflake brings to our data handling is unparalleled. Whether it's adapting to changing business needs or swiftly responding to market shifts, our data infrastructure is now as nimble as our fintech innovations.

💡 Innovation Accelerated: By harnessing the power of Snowflake, we're not just managing data; we're propelling innovation. The platform's flexibility allows us to experiment, iterate, and launch new products and services faster than ever.

Join us on this exciting journey of elevated data management in the fintech realm. The future is data-driven, and with Snowflake, we're not just keeping up; we're leading the charge!

#FintechInnovation #DataManagement #Snowflake #TechTransformation #FintechRevolution 🚀🔗
HTML to Word? Weird right?
Tags: webdev, programming, discuss
Published: 2024-01-24 13:39:29

Recently,  one user came to me asking whether we can provide this API.

The use case was quite simple - he wanted to export the HTML report to a Word file so that he could edit it. It was only possible in Word Documents due to the complex structures of the report and he was using ASP.net 

I went to Google to find if there is any provider of this API that can solve the use case but nothing solid came to hand. We @ [Apyhub](https://apyhub.com) decided to build this utility and today it's **LIVE** and available to test.

You can send an HTML file, it seamlessly converts it to a Microsoft  Word File while preserving formatting and readability.

Note: One problem lies within fetching images which is problematic and we're trying to solve it.


Link to API: https://apyhub.com/utility/html-to-docx

**But why I'm posting this here:**

Firstly, It will be great to have feedback on this API. I would love to know if you find any more use cases where this API fits the need.

Second, A message from developer to developer - Anything can be built so don't restrict yourself from your limits. Give it a try - you will at least get validation.


Thanks :)
Technocrat Recovery the best team To hire To change schools grade
Published: 2024-01-24 13:36:01

Technocrat Recovery the best team To hire To  change schools grade
Academic life can be a thrilling adventure, but it also throws curveballs and tests our resilience. When faced with challenges, maintaining good grades can feel like scaling a magical mountain. Enter TECHNOCRATE RECOVERY, a valiant knight in the realm of academic support, offering potent spells to overcome hurdles and achieve academic mastery. Academic life is full of challenges, from complex subjects to demanding coursework and rigorous exams. Every student faces hurdles along their educational journey that can impact their grades and overall academic performance. However, with the right strategies and mindset, these challenges can be overcome, leading to sustained academic success.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr31m322qx9s85fjg4xy.jpeg)
Examining the Diverse Web of Philippine Folklore: A Trip Through Folklore Books' Pages
Published: 2024-01-24 13:35:26

Books of Philippine folklore are the gateways to a world where myths, legends and also cultural heritage intermingle—which makes for an exciting literary trip into the heart of Filipino storytelling. These books are like safekeeping stories that have been handed down from generation to the generation through generations forever.
The numerous mythical creatures in the stories of Philippine folklore is one very fascinating feature about them. From Tikbalang, which is a horse-headed creaure with an inclindation to mischief o the Kapre that has cigar smoking giant habitaing in trees, these types of fantastical creature add some sortof magic and wonderment on the tales. Folklore literature goes into the many backgrounds, traits and also relationships of these beings thereby offering insight on cultural meanings that should be attributed to each mythological character. An example of a book that admirably presents the Philippine Folklore is ‘Gino Junior and the Aswang Clan’ by Andrew Pasaporte. The emerging middle-grade book, discusses universal family themes such as self discovery through imagination are found in this novel while it still maintains its Filipinoness.
Besides the mythical and heroic, folklore books of the Philippines act as a medium for preserving the cultural heritage. In a world of progress and modernization, which frequently obliterates the conventions traditional these books become protectors of the cultural heritage. By codifying the folklore, these books guarantee the continuity and perpetuate it for future generations.
The Philippine folklore books are a gateway into this amazing world where the past intertwines with the now. By turning the pages, readers are taken to a land of many dreams, virtue and also ethnic enrichment. What is more, these books entertain and also educate helping develop the knowledge of a specific folklore that determines the identity of a national soul.
Vimium is awesome - Browsing without mouses
Tags: browser
Published: 2024-01-24 13:33:29

## What's Vimium?

A chrome extension / firefox add-on what can be able to browsing without mouse.

<https://vimium.github.io/>

Let's see keyboard shortcuts provided by Vimium.

## Minimal tutorial

| key | desc |
| --- | --- |
| `h` | Scroll left |
| `j` | Scroll down |
| `k` | Scroll up |
| `l` | Scroll right |
| `H` | Go back in history |
| `L` | Go forward in history |
| `J` | Go one tab left |
| `K` | Go one tab right |
| `f` | Open a link in the current tab |
| `F` | Open a link in a new tab |
| `x` | Close current tab |
| Esc | Cancel current command |

More info, see [project page](https://vimium.github.io/) or type `?`.

## How to open link

Type `f` or `F`. Then characters will be shown on links.

![Vimium open link command](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ly7lm40ndz239zgrbmo.png)

Type the character what you want open.

## Conclusion

Almost of all controls can be replaced by these keyboard shortcuts. (...without drag and drop)

If you good for key typing, your browsing will be more quickly, and you will like it.

Happy browsing!