teleren/devto huggingface dataset:
The Importance of Friend Recommendations in Social Media
Tags: apacheage, postgres, socialmedia, intern
Published: 2023-06-23 00:01:10

## Introduction

Today, we will delve into a topic that has become essential in the digital age: the importance of friend recommendations in social media and how they can enhance the user experience. With the advancement of technology and the proliferation of social networks, the opinions of our friends and contacts have taken center stage in online decision-making. Let's explore this fascinating realm and understand how this interaction can transform the way we use social media platforms.


![friends recomendation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tybda5foeeydor24l517.png)



## The Era of Social Media and Its Influence

Social media platforms have become integral parts of our lives. They not only keep us connected with friends and family but also provide a rich environment for information sharing and content discovery. However, amidst a sea of possibilities, we often feel overwhelmed by the sheer amount of available information. This is where friend recommendations come into play.

## Personalization and Enhanced User Experience

Social media platforms are becoming increasingly intelligent and capable of personalizing the user experience. By analyzing data and utilizing algorithms, they can tailor content and recommendations to match our individual preferences. One powerful tool in achieving this personalization is the use of graphs.

## The Role of Graphs in Friend Recommendations

Graphs can represent social connections and provide valuable insights for precise recommendations. In the context of social media, a graph can be constructed where each user is a node, and the edges represent relationships between users. By analyzing this graph, platforms can identify patterns, communities, and influential individuals, which can inform friend recommendations.

## The Benefits of Graph-Based Friend Recommendations

Using graphs for friend recommendations allows social media platforms to go beyond basic similarities in interests. They can consider factors such as mutual friends, shared connections, and even indirect relationships, providing more accurate and relevant recommendations. This approach enhances the user experience by introducing a higher level of personalization and increasing the chances of discovering content that aligns with individual preferences.

## Conclusion

In conclusion, friend recommendations play a vital role in social media platforms, improving the user experience by leveraging the trust and familiarity we have with our friends. Additionally, the use of graphs as a representation of social connections adds another layer of sophistication, enabling platforms to provide more precise and personalized recommendations. As social media continues to evolve, the importance of friend recommendations and the integration of graph-based algorithms will undoubtedly continue to shape the way we navigate and engage with these platforms.
Don't use `innerHTML`
Tags: webdev, javascript, programming, tutorial
Published: 2023-06-22 23:40:39

`innertHTML` is a good function. But if you wrote a code in a wrong way, or if you misused this code, it can be used to infiltrate your web app.

In this article I explained why it can be bad if misused with code samples. If you like to read the article [HERE](https://bit.ly/dont-use-innerHTML)

The alternative with this one is using `setHTML(<value>)` function. The downside with this one is that, its still in its experimental state so other browsers might not support this function.
Harnessing The Power of Duti: Command-Line Customization of Default File Opener in MacOS
Tags: macos, shell, dotfiles
Published: 2023-06-22 23:35:47

I always found it super irritating that MacOS makes setting up default file associations such a manual process. Then I discovered `duti`

`duti` is a command-line utility that allows you to define the default file opener for any file type. You can set your favorite text editor to open code files, have PDFs open in your preferred viewer, and assign specific applications to open different image file types.

## Getting Started with Duti

Before using `duti`, you need to install it. The simplest way to install `duti` on your Mac is via Homebrew. If you haven't installed Homebrew yet, you can install it with this command in your terminal:

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

Once Homebrew is installed, you can install `duti` with the following command:

```bash
brew install duti
```

## Using Duti to Set Default Applications

The basic syntax of the `duti` command is:

```bash
duti -s com.example.MyApp myextension all
```

Here, `com.example.MyApp` is the bundle identifier of the application you want to set as the default, `myextension` is the file extension you want to change the default for, and `all` is the role (which can be 'all', 'editor', or 'viewer').

To find the bundle identifier of an application, you can use the following command, replacing `AppName` with the name of the application:

```bash
osascript -e 'id of app "AppName"'
```

For example, to set Visual Studio Code as the default application for .txt files, you would first get Visual Studio Code's bundle identifier:

```bash
osascript -e 'id of app "Visual Studio Code"'
```

This will output something like `com.microsoft.VSCode`. You can then set Visual Studio Code as the default for .txt files with:

```bash
duti -s com.microsoft.VSCode txt all
```

## Verifying Changes with Duti

To verify your changes, you can use the `-x` flag followed by the extension:

```bash
duti -x txt
```

This should return something like this:

```bash
/Volumes/Macintosh HD/Applications/Visual Studio Code.app
com.microsoft.VSCode
```

This confirms that Visual Studio Code is now the default application for .txt files.
How to setup PHPMyAdmin with Nginx on Ubuntu
Tags: phpmyadmin, nginx, devops
Published: 2023-06-22 23:33:54

What is PHPMyAdmin? It is an open source tool written in the [PHP](https://www.php.net/) programming language and it is useful for handling the administration of MySQL/MariaDB database servers over the Web. It possess a simple interface that is easy to navigate and learn quickly.

What is Nginx? [Nginx](https://nginx.org/) is an open source software that is used mainly as a web server, reverse proxy, cache server. It is also used as a load balancer, for media streaming, etc.

Now to the topic of discussion for today...
How do I setup PHPMyAdmin with nginx on my ubuntu server?

### Step 1: Install needed tools
Before installing PHPMyAdmin, make sure you have installed and configured mysql/mariadb and nginx

```
sudo apt update && sudo apt upgrade
sudo apt install zip
mkdir -p /var/www/phpmyadmin
cd /var/www/phpmyadmin
wget https://www.phpmyadmin.net/downloads/phpMyAdmin-latest-all-languages.zip
unzip phpMyAdmin-latest-all-languages.zip
cp -a phpMyAdmin-5.2.1-all-languages/. .
rm -rf phpMyAdmin-5.2.1-all-languages
rm -rf phpMyAdmin-5.2.1-all-languages.zip
```

### Step 2: Configure Nginx virtualhost

```
sudo vim /etc/nginx/conf.d/vhost.conf
server {
    listen         80 default_server;
    listen         [::]:80 default_server;
    server_name    _;
    root           /var/www/phpmyadmin;
    index          index.php;

    location / {
      #try_files $uri $uri/ =404;
      try_files $uri $uri/ /index.php?$args;		
    }

    location ~ \.php$ {
      include snippets/fastcgi-php.conf;
      fastcgi_pass unix:/run/php/php7.2-fpm.sock;
    }
	
    location ~ /\.ht {
      deny all;
    }
	
    location /phpmyadmin {
      alias /var/www/phpmyadmin;
      #try_files $uri $uri/;
    
      location ~ \.php$ {
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.2-fpm.sock;
        include fastcgi_params;                       
        fastcgi_param SCRIPT_FILENAME $request_filename;
        #fastcgi_intercept_errors on;
      }
    }
}
```

### Step 3: Test your PHPMyAdmin installation
Go to this url to test: http{s}://your-url/phpmyadmin

Thank you so much for your time. Make sure to check back on my blog for other amazing technical contents.
MCV Frameworks
Published: 2023-06-22 23:16:04

By chance and by deliberately researching, I have discovered that there are many other web stack frameworks that implement the Model-View-Controller paradigm:
 
- For example, looking at popular data science framework Django, I thought: 'wow, this is Ruby on Rails but in Python.'  Personally, I like Ruby much more than Python, but it lacks the data science libraries.  
- Another example is Laravel.  This MVC framework was created to improve PHP stacks. A very, very old piece of the old LAMP stack, PHP is used by a vast majority of web sites.  I've worked with PHP: ugh, super recursive and time-consuming to debug. It's sort of like an entrenched cancer.
- and there are several more MVC frameworks.

So, learning Ruby on Rails has been a fun and relevant adventure.
New Journey!
Tags: beginners, programming, html, webdev
Published: 2023-06-22 22:11:35

**New journey**
Today I start my new journey as a web developer.I start an online course by **udemy**, So I decide to share my experince with all of you guys.This is my first my step to this course that i learn a basic of HTML5 and I create an Practise webpage name **My Resume**

I will tell you what attributes,tags and other elements which I used in this webpage.

First I use header tag **h1** to display my name on top then I use image tag **<img>** in image tag i use some attributes like src,width,height and alt.Due to image tag I am able to show my image in my resume web page.
After image tag again I use header tag **h2** for my details after  header tag I use list tag **ul,ol,il**.
I also use anchor tag **<a>** in this tag I link my second webpage name contact. At last I use footer tag in it.

These few things I learn from course till now. Which I share With You,
Below I will share my Github link of that webpage link kindly see and give me advice or suggestion how I improve my skills.
**Github link:**https://github.com/Anasucp/My_resume_html.git
A Comprehensive Guide to Common Responsive Device Sizes in CSS
Tags: css, webdev, responsive, design
Published: 2023-06-22 22:00:17

**Introduction**:
In today's digital era, designing websites that adapt to different screen sizes and devices is crucial. Responsive web design ensures optimal user experience across a wide range of devices. In this comprehensive guide, we will explore the most common device sizes and provide CSS code snippets to create responsive layouts.

## 1. Mobile Devices:
Mobile devices are widely used for browsing the web. Here are some common mobile device sizes and corresponding CSS media queries:

```css
/* Extra Small (XS) */
@media (max-width: 576px) {
  /* CSS styles for Extra Small screens */
}

/* Small (S) */
@media (min-width: 576px) and (max-width: 767px) {
  /* CSS styles for Small screens */
}

/* Medium (M) */
@media (min-width: 768px) and (max-width: 991px) {
  /* CSS styles for Medium screens */
}

/* Large (L) */
@media (min-width: 992px) and (max-width: 1199px) {
  /* CSS styles for Large screens */
}

/* Extra Large (XL) */
@media (min-width: 1200px) {
  /* CSS styles for Extra Large screens */
}
```

## 2. Tablets:
Tablets have larger screens compared to mobile devices. Here are some common tablet device sizes and corresponding CSS media queries:

```css
/* Portrait Tablets */
@media (min-width: 768px) and (max-width: 1023px) {
  /* CSS styles for Portrait Tablets */
}

/* Landscape Tablets */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* CSS styles for Landscape Tablets */
}
```

## 3. Desktops and Laptops:
Desktops and laptops offer ample screen real estate for displaying content. Here are some common desktop and laptop device sizes and corresponding CSS media queries:

```css
/* Small Desktops */
@media (min-width: 1280px) and (max-width: 1439px) {
  /* CSS styles for Small Desktops */
}

/* Medium Desktops */
@media (min-width: 1440px) and (max-width: 1919px) {
  /* CSS styles for Medium Desktops */
}

/* Large Desktops */
@media (min-width: 1920px) {
  /* CSS styles for Large Desktops */
}
```

## 4. High-Resolution Displays:
High-resolution displays, such as Retina or HiDPI screens, require special considerations to ensure sharp and crisp visuals. Here's a CSS media query targeting high-resolution displays:

```css
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* CSS styles for high-resolution displays */
}
```
**Conclusion**:
Designing responsive websites that adapt to various device sizes is essential for delivering a seamless user experience. By using CSS media queries, we can create responsive layouts for mobile devices, tablets, desktops, and high-resolution displays. It's important to test and optimize your designs across different devices to ensure consistent and visually appealing experiences. With the CSS code snippets provided in this guide, you have the foundation to create responsive web designs that cater to the most common device sizes.
Demystifying Docker Containers: Unleashing the Magic of Self-Contained Application Packages
Tags: docker, devops, beginners
Published: 2023-06-22 21:50:41

I have watched countless videos and read numerous articles attempting to explain what Docker is, but each time I think I understand Docker containers, I become even more confused. In this post, I will attempt to break down Docker containers into simpler terms that we can all understand.

![Content of a spliter cell installation folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6pjl6h1j8xla1nl8psxp.png)

Imagine the image above is the installation folder for Tom Clancy's Splinter Cell video game, a great game by the way(you should check it out after this post). Most installation folders follow a similar structure, with a main setup file and additional binaries and libraries required for installation. However, there's a catch – your computer might not meet the minimum requirements to play the game, preventing you from enjoying it. But what if there was a way to simply download the game, start playing it right away, and not have to go through the installation process or worry about meeting system requirements?

That's where Docker containers come in. In essence, Docker containers are like magical boxes that not only contain the entire game but also ensure that it already meets all the necessary requirements for running. Thinking in terms of Docker and the video game analogy, you can imagine this box as a self-contained package that has the game installed and configured perfectly inside it. The beauty of it is that because the game within the box already meets all the requirements, you can just run it on your personal computer without having to worry about compatibility or system requirements.  All the container needs is access to the underlying kernel of your operating system to make the magic happen.

In the context of Docker containers, they are also like these magical boxes. Docker containers are self-contained packages that encapsulate an application and all its dependencies. They include everything needed for the application to run, such as libraries, binaries, and configuration files. These containers run independently from your host machine, utilizing the underlying kernel of your operating system to access the necessary resources. By utilizing the host kernel and not requiring their own separate operating system, Docker containers are lightweight and fast to start up.

With Docker containers, you can package applications in a consistent and portable manner, making them easily deployable across different environments. Just like the game within the magical box, Docker containers provide a reliable and self-contained runtime environment for applications, ensuring consistent behavior regardless of the underlying host machine. They offer the convenience of being able to download and run applications without the need for complex installation processes or concerns about system compatibility.
Best fast typing tool for programmer right into your vscode editor
Published: 2023-06-22 21:40:22

**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw94b7fsugj5hwbq47c1.png)[](https://www.youtube.com/channel/UCFMcspBeKPvRsV_T6tqLLMg)**
How to Implement Chaos Testing for Your Backend Services Using k6
Published: 2023-06-22 21:32:19

---
title: How to Implement Chaos Testing for Your Backend Services Using k6
published: true
description: k6 is not only an excellent tool for load testing. You can also use it to perform chaos testing to find out the tightly coupled services. From the test result, you can improve your system to be more reliable and fault-tolerant. In this article, you can learn how to implement chaos testing using k6. 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cpvnlioxudpzxrub9xoo.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-06-22 21:21 +0000
---

Hi there,
It's been such a long time since my last article written in here about testing.
A lot of things have been going on.

![A lone tree in the middle of desert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xeo8tilh2g7yvee9b0ox.jpg)

Recently, I have written more articles with some of the clients I worked with.
One of them is the article about: How to Implement Chaos Testing for Your Backend Services Using k6.
Chaos Testing nowadays is getting more and more popular since it enables you to find the tightly-coupled components in your application. From there you can find the solution to fix them so that your application is more reliable and fault-tolerant when unexpected incidents.
You can check out more details at [How to Implement Chaos Testing for Your Backend Services Using k6](https://semaphoreci.com/blog/chaos-testing-k6) blog page.
Day 768 : Make It Clear
Tags: hiphop, code, coding, lifelongdev
Published: 2023-06-22 21:05:01

_liner notes_:
- Professional : Whew... today was a challenge! haha What I thought would be just verifying the responses coming back from a new version of an API with what's in the docs would be easy. I should have known. I jinxed myself. haha. I don't have a lot of experience with OpenAPI specs, so when I come across something that looks strange to me, I wonder if it's strange because it could be an error or because I don't know enough about OpenAPIs. I try a bunch of different things to see if I get the same results. If I do, then I ask the team for their input. And to make it clear as possible (or try to be), I take screenshots of what I'm seeing, links to information I found, and a whole lot of text explaining what I did to the greatest detail that I can. Then someone will reply, and since I don't know a lot about OpenAPI, I'll ask follow up questions on what they mean and we go back and forth for a while. Next thing I know, basically the day is over. haha At least some of the other updates I did earlier in the week, got merged so I can put them in the done column. haha My brain is mush. Did no actual coding, but my mind is tired. 

- Personal : Went through some tracks for the radio show. Went through the HTML Canvas tutorial. Watched the first episode of "Secret Invasion". Pretty good.

![From the moss covered shore of Kirkjufell, Iceland looking at an island with a large pointy topped mountain.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i4bv3i8noectq6juklun.jpg)

Going to go through Bandcamp and pick up some projects. Get my music picks tweets ready. Do some more of the HTML Canvas tutorial. Going to do some research to see if I can maybe reuse a library I'm already using to try and save the preview image without have to do the HTML Canvas stuff. We'll see. I also want to watch some episodes of "Vinland Saga".

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube lC2m86jpbYs %}
3 Ways to Embed a Matplotlib Chart into an HTML Page
Tags: webdev, python, matplotlib, datavis
Published: 2023-06-22 20:32:36

Are you struggling with integrating Matplotlib charts into your HTML pages? We've got you covered! Our latest article dives deep into innovative techniques for seamlessly embedding stunning charts while preserving interactivity. 🚀

Discover three powerful solutions:
1️⃣ mpld3 library: Unleash the potential of Matplotlib with mpld3's effortless chart integration.
2️⃣ Base64 Encoding: Learn how to encode charts as base64 for seamless HTML integration.
3️⃣ Leveraging py-script: Dive into the power of py-script to embed interactive charts with ease.

Don't miss this comprehensive guide that takes you step-by-step through each solution, providing clear instructions and examples. Elevate your data visualization game and conquer the complexities of chart integration effortlessly. 💪

Read more on [Towards Data Science](https://towardsdatascience.com/3-ways-to-embed-a-matplotlib-chart-into-an-html-page-8e11fa66a4b0)
how to setup an absolute path in a React TypeScript project
Published: 2023-06-22 19:55:22

To set up absolute paths in a React project you can follow these steps:

Install the required dependencies:


```ts
npx create-react-app my-app --template typescript
npm i cargo
```

Configure absolute paths:
make change on tsjsconfig.json and create carco.config.js file in the root directory of your React project with the following content:

tsjsconfig.json
configuring the baseUrl and paths in your tsconfig.json.

- The base directory for resolving module paths is the src directory, as the "baseUrl" is set to "src".

- Aliases for module paths are specified in the "paths" section. We've defined two aliases here:
"@components/*": This alias corresponds to the path./components/*. For instance, the resolution of "@components/Button" would be "./components/Button".
The alias "@utils/*" corresponds to the./utils/* path. 

- For instance, the resolution of "@utils/helpers" would be "./utils/helpers".

- Make sure to modify the paths and aliases in accordance with the organisation of your project.

```ts

{
   "compilerOptions":{
      "baseUrl":"src",
      "paths":{
//add paths line                          
         "@components/*":[
            "./components/*"
         ],
         "@utils/*":[
            "utils/*"
         ]
      },
      "target":"es5",
      "lib":[
         "dom",
         "dom.iterable",
         "esnext"
      ],
      "allowJs":true,
      "skipLibCheck":true,
      "esModuleInterop":true,
      "allowSyntheticDefaultImports":true,
      "strict":true,
      "forceConsistentCasingInFileNames":true,
      "noFallthroughCasesInSwitch":true,
      "module":"esnext",
      "moduleResolution":"node",
      "resolveJsonModule":true,
      "isolatedModules":true,
      "noEmit":true,
      "jsx":"react-jsx"
   },
   "include":[
      "src"
   ]
}

```


caraco.config.js

The tsConfigPath property is set to "./tsconfig.json", indicating the file path where the TypeScript configuration (tsconfig.json) is located. 

This file contains the "baseUrl" and "paths" configurations for alias resolution.

```ts
const CracoAlias = require("craco-alias");

module.exports = {
    plugins: [
        {
            plugin: CracoAlias,
            options: {
                source: "tsconfig",
                // baseUrl SHOULD be specified
                // plugin does not take it from tsconfig
                baseUrl: "./src",
                // tsConfigPath should point to the file where "baseUrl" and "paths" are specified
                tsConfigPath: "./tsconfig.json"
            }
        }
    ]
};

```



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



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