teleren/devto huggingface dataset:
Third-party apps
Tags: thirdpartyapps, apps, apk, android
Published: 2022-09-24 11:39:13

Third-party apps are developed by companies other than the ones that make the platform. They run on or the website that hosts them. Although the term “first-party apps” isn’t frequently used (we’ll use it in this post to clarify which is which), you may think of them as such. Wikipedia


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

third-party apps
The owner of the device or website may approve or disapprove of third-party apps. For instance, Apple developed the Safari web browser app, which is a first-party, built-in program for the iPhone. Still, there are other web browser apps available in the App Store that Apple only authorized for use on the iPhone. They are third-party applications. Some apps that Facebook didn’t create are allowed to operate on its social media platform. These are independent apps.

Security Risks
A thriving ecosystem of third-party apps that have access to the personal data of many users is supported by online social networks. Despite several recent high-profile occurrences, there are currently no systematic procedures to identify third-party programs on online social networks that misuse data. To detect the misuse of data exchanged with third-party apps, we recommend CanaryTrap. After sharing a honeytoken with the third-party app, CanaryTrap links the honeytoken to a user account and tracks any unauthorized usage of the token across several routes. We created and used CanaryTrap to view Facebook data sharing with third-party apps that may have been misused.

Third-party Apps
By using a third-party app, we specifically reveal the email address linked to a Facebook account as a honeytoken. After that, we keep an eye on the emails we’ve received and utilize Facebook’s transparency tool to look for any unauthorized uses of the shared honey token. Using CanaryTrap to monitor 1,024 Facebook apps, we have found numerous instances of data sharing gone wrong, including malware, spam, and targeted advertising.
Read more on:
https://hecodesit.com/third-party-apps/
Music Player | Audio Player 🎵quran
Tags: codepen
Published: 2022-09-24 11:34:35

<p>Simple Beautiful Fully Functional Music | Audio Player.</p>

<p>Design inspired by: <a href="https://dribbble.com/shots/4240318-Made-with-InVision-Studio-Music-Player" target="_blank">https://dribbble.com/shots/4240318-Made-with-InVision-Studio-Music-Player</a></p>

{% codepen https://codepen.io/himalayasingh/pen/QZKqOX %}
🧲 Sticky Scroll in vscode
Tags: vscode, tutorial, productivity, programming
Published: 2022-09-24 10:47:03

Classes and methods might get really long, making you lose context of what the code is about.

Visual Studio Code recently added a new cool feature you can enable in the settings, called **Sticky Scroll**.

When it’s enabled, everytime you go deeper on a nesting level, the first row remains sticky at the top of editor.

Thanks to the project being Open Source, on vscode the are constantly new smart features every month. Some of them, even if small, are highly appreciable!

Here a short video to see it in action!


[![YouTube Video](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cesjqzj8qj5hbw5hd8df.png)
](https://youtube.com/shorts/hbLq3sQshDY)

---

Thanks for reading this post, I hope you found it interesting!

Feel free to follow me to get notified when new articles are out ;)
{% embed https://dev.to/balastrong %}

Do you like my content? You might consider subscribing to my YouTube channel!
You can find it here:
[![YouTube](https://img.shields.io/badge/YouTube:%20Dev%20Leonardo-FF0000?style=for-the-badge&logo=youtube&logoColor=white)](https://www.youtube.com/channel/UC-KqnO3ez7vF-kyIQ_22rdA?sub_confirmation=1)
Pulumi Challenge 01
Tags: pulumi, aws, challenge, startup
Published: 2022-09-24 09:13:03

---
title: Pulumi Challenge 01
published: true
description: 
tags: pulumi,aws,challenge,startup
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79diwlcgfyv4yvu6idbx.png
---

I attended the <a href="https://www.pulumi.com/challenge/startup-in-a-box/" target="_blank" rel="new">[Pulumi Challenge 01]</a>.

It is exciting because I love programming for Infrastructure as Code (IaC) and learning about any services in any cloud platform, such as AWS and Azure GCP.

### What I learned from Pulumi challenge 01.

- How to create a Pulumi account.
- How to create a new AWS account.
- How to create a new Checkly account.
- How to install Pulumi CLI on my MacBook Pro using:

```bash 
brew install pulumi
```

- How to install AWS CLI on my MacBook Pro using:

 ```bash
brew install awscli 
```

- How to create Access Key and Secret from AWS account.
- How to create API Key from Checkly.
- How to find Account ID from Checkly.
- How to link Checkly key to Pulumi by using the below command.

``` bash
pulumi config set checkly:apiKey <YOUR API KEY> --secret
pulumi config set checkly:accountId <YOUR ACCOUNT ID>
```

- How to set up an AWS profile using:

```bash
aws configure
```

- How to solve the problem of running the website because there are limits on the country that can display only from these countries which are ("US", "CA", "GB", "DE").

### You can find the code below inside cdn-website > index.ts
I live in Singapore, so I can't open the website because AWS Cloudfront allows only specific regions. I can fix it by adding my country code.

### Before

``` js

restrictions: {
          geoRestriction: {
            restrictionType: "whitelist",
            locations: ["US", "CA", "GB", "DE"],
          },
        },

```

## After

``` js

restrictions: {
          geoRestriction: {
            restrictionType: "whitelist",
            locations: ["US", "CA", "GB", "DE", "SG"],
          },
        },

```

You can deploy all resources and pulumi projects using:

```bash
pulumi up
```

You can also clean up all resources and projects using:

```bash
pulumi destroy && pulumi stack rm <your environment>
```

Please feel free to see my video recording for more information.
{% embed https://youtu.be/IC9fnZyZKkM %}

You can also find my repo which includes everything you need for this challenge [here](https://github.com/ninefyi/pulumi-challenge-01).

Keep learning!!!
How to record webcam video and audio using ffmpeg
Tags: beginners, programming, tutorial, devjournal
Published: 2022-09-24 10:40:00

## Introduction

Hello! 👋

In this tutorial I will show you how to use the ffmpeg command to record your webcams video and audio to an mp4 file.

---

## The Command

The command is a pretty simple one liner. (Please note my machine is Linux so the format/input may change depending on your OS)
You can alter the command based on your webcam input by checking the following documentation:
https://trac.ffmpeg.org/wiki/Capture/Webcam

```bash
ffmpeg -f pulse -ac 2 -i default -f v4l2 -i /dev/video0 -t 00:00:20 -vcodec libx264 record.mp4
```

The -f defines the format, pulse for audio and v4l2(Video 4 Linux 2).
The -ac defines the audio channels, in this case 2.
The -i defines the input, default for audio and the webcam for video. 
The -t defines the duration of the recording, in this case 20 seconds.
The -vcodec defines the output video codec, since it is an mp4 file it is set to libx264 (H.264)
Audio should default to AAC so -acodec is not needed.

---

## Conclusion
Here I've given a very simple demonstration on how to use the ffmpeg command to capture the user's webcam footage with audio.

I'm thinking of creating a C++ example and will let you know when that's finished. 😎

Side note, I'm sorry for the wait on my WebRTC Android Tutorial, been pretty hectic recently but it's almost finished!

Hope you found this quick tutorial useful and if you have any useful resources for learning FFmpeg please share them with me. 

---

Like me work? I post about a variety of topics, if you would like to see more please like and follow me.
Also I love coffee. 

[![“Buy Me A Coffee”](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/ethand9999)
How to bold matching characters in text JavaScript.
Tags: javascript, regex
Published: 2022-09-24 10:27:37

To achieve this, we need to replace a character match with `<strong>{input character}</strong>` in a particular sentence.

So Here is the function:

```javascript

const boldMatchCharacters = ({ sentence = "", characters = "" }) => {
    const regEx = new RegExp(characters, 'gi');
    return sentence.replace(regEx, '<strong>$&</strong>')
}

```

- I create regex from `input characters`

- Using string's replace function, I replace `$&` which returns the whole match as it is with `<strong>$&</strong>`

##### Example

```javascript 
console.log(boldMatchCharacters({ sentence: 'Hello Hello Hello, How are you?', characters: 'hel' }));
```
###### Output
`<strong>Hel</strong>lo <strong>Hel</strong>lo <strong>Hel</strong>lo, How are you?`

### Happy Hacking
New Developer Job Search Tool Launched For The UK
Published: 2022-09-24 09:45:20

We recently built a new developer jobs search tool for the UK to help developers / jobseekers find and apply for jobs much quicker. 

[Developer Jobs UK ](https://developerjobsuk.co.uk/) pulls in the most recent developer jobs from some of the top job boards on the web including LinkedIn, Glassdoor, Stack Overflow, Indeed and more. 

Our crawlers filter and categorise each job based on keywords making easier to search for particular dev languages and skills.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvxr5bdl3wgy9xyihdhk.png)
Sending Laravel Logs to Mattermost Channels
Tags: laravel, mattermost, opensource
Published: 2022-09-24 09:44:53

[Mattermost](https://mattermost.com/) is an open-source platform for communication and collaboration with integrations with many tools. It is mostly considered as an open-source alternative to Slack and Microsoft Teams.

Although Laravel does not have an official [log channel driver](https://laravel.com/docs/9.x/logging#available-channel-drivers) for Mattermost, we can build a custom [Monolog](https://github.com/Seldaek/monolog) handler that can be easily configured in Laravel apps.

I have created a small [package](https://github.com/muhamadhhassan/laramost) for this purpose that, unlike the existing Mattermost handlers, format the message according to Mattermost [docs](https://developers.mattermost.com/integrate/webhooks/incoming/#parameters)

## Installation

```bash
$ composer require muhamadhhassan/laramost
```

## Configuration

In your `config/logging.php` file, add the `mattermost` channel to the `channels` array:

```php
use LaraMost\Formatter\MattermostFormatter;
use LaraMost\Handler\MattermostWebhookHandler;

'channels' => [
    'mattermost' => [
        'driver'  => 'monolog',
        'handler' => MattermostWebhookHandler::class,
        'formatter' => MattermostFormatter::class,
        'with' => [
            'hook' => 'https://your-mattermost.com/hooks/random-string',
        ],
        'level' => 'error'
    ],
],
```

You can follow the steps [here](https://developers.mattermost.com/integrate/webhooks/incoming/#create-an-incoming-webhook) to create an incoming webhook for your channel.

### Levels

Monolog levels are used to set the message color and icon

| Level Name | Level Value | Color   | Emoji |
|------------|-------------|---------|-------|
| DEBUG      | 100         | #91C4EB | 🔍|
| INFO       | 200         | #91C4EB | ℹ|
| NOTICE     | 250         | #99cc33 | 📝|
| WARNING    | 300         | #ffcc00 | ⚠|
| ERROR      | 400         | #cc3300 | 🐛|
| CRITICAL   | 500         | #cc3300 | ❌|
| EMERGENCY  | 600         | #cc3300 | 🚨|

## Usage

Simply, using Laravel `Log` facade

```php
Log::channel('mattermost')->error('Something went wrong', ['user_id' => 5]);
```

Will send the following message to your mattermost channel:


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

> ⚠ **Warning**: When you log to the `mattermost` channel make sure that the level is greater than or equals the one defined in `config/logging.php`

And there you have it! A simple implementation to send log records to a Mattermost channel.
Features (without timestamps - Str wrap static method and ... ) Laravel 9.31
Tags: laravel, php, webdev, programming
Published: 2022-09-24 09:43:29

In the new version 9.31 we have Some of the new features.

- Model "without timestamps" feature
https://github.com/laravel/framework/pull/44138

withoutTimestamps() method where updated_at will not change
```php
$user = User::first();

// `updated_at` is not changed...
User::withoutTimestamps(
    fn () => $user->update(['reserved_at' => now()])
);
```

- Model getAppends() method

added an accessor method to Model to get the accessors that are being appended to model arrays. This could be useful for custom model mappings
```php
$model->getAppends();
```

- Str wrap static method
https://github.com/laravel/framework/pull/44207

missing static Str::wrap() method, which was only available via Stringable
```php
Str::wrap('-bar-', 'foo', 'baz'); // 'foo-bar-baz'
str('-bar-')->wrap('foo', 'baz'); // 'foo-bar-baz'
```

- Improve Blade compilation exception messages 
https://github.com/laravel/framework/pull/44134

I hope you enjoyed with me and to learn more about this release visit the sources and search more. I adore you who search for everything new.

Source :- https://laravel-news.com/laravel-9-31-0
Source :- https://www.youtube.com/watch?v=-g7BRU7L78c
Structure of Java Program
Tags: java, javascript, webdev, tutorial
Published: 2022-09-24 04:36:40

**Structure of Java Program**

```
class ClassName {
 public static void main(String args[]) {
 //statements
 }
}
```

**Let's look at the elements involved in the structure of a Java program.** 

A typical structure of a Java program contains the following elements:

**class Block**:- Methods and Variables can be written in class Block

**Methods Block**:- Statement and instructions written in method block

**Steps to Create, Complie and execute java Program **

**Stpe-1. Write A programm using editor and IDE**

Editor : -
        1. Notepad
        2. Word
        3. Notepad++
        4. Edit plus
        5. Sublime
IDE:- 
       1. Eclipse
       2. Intelji
       3. Visual Studio code
       4. Net Beans

Using the above code editor we write programs and save the file using .java extension

**Step-2. Compile the code or complie the java file**
     complier complie the code complier check's for the syntax(rules) if the syntax is correct is generated the class file if the syntax's is wrong it does not generate the class file but its throw complie time error

**Step-3. excute the class File**

**Syntax of print Statements** 

1. System.out.println();
   1. This print statement will print the data as push the cursor 
   to next line
2. System.out.print();
   This Print Statement will print the data and cursor will stay in same line 

Now Write The below code in any editor 
```
class MyProgram {
 public static void main(String args[]) {
 System.out.println("Hello World!");
  }
}
```
**Command to complie java program** 
    `javac MyProgram.java`

**command to excute java program**
    `java MyProgram`



**Note:- To check the version of JDK** 
       `javac -version`
Number of Students Unable to Eat Lunch
Tags: javascript, leetcode
Published: 2022-09-24 09:39:42

```js
var countStudents = function (students, sandwiches) {
  let count = 0;
  let availableStudent = students;
  let availableSandwhich = sandwiches;

  while (availableStudent.length !== count) {
    const nextStudent = availableStudent.shift();
    const nextSandwich = availableSandwhich.shift();
    if (nextStudent === nextSandwich) {
      count = 0;
    } else {
      count++;
      availableSandwhich.unshift(nextSandwich);
      availableStudent.push(nextStudent);
    }
  }

  return count;
};

```


```js
var countStudents = (students, sandwiches) => {
    while (students.length) {
        if (students[0] === sandwiches[0]) {
            students.shift();
            sandwiches.shift();
        }
        else if (!students.includes(sandwiches[0]))
            return students.length;
        else students.push(students.shift());
    }
    return 0;
};

```
display
Published: 2022-09-24 09:07:22

## display 속성에 대해서.

display 속성은 대표적으로 block, inline, inline-block 있다.

display는 HTML(element)요소들을 어떻게 보여줄지 결정하는 속성이다.

모든 HTML요소는 display 속성을 가지고 있다.

display: block; 
width는 기본적으로 super요소의 width 만큼 늘어난다.
height는 내용물의 높이 만큼 늘어나기때문에 아무것도 넣지않는다면 height는 0

display: inline;
inline 요소는 기본적으로 사각 박스 형태가 아니기 때문에 width, height로 크기를 설정할 수 없다.(img는 예외이다.)

display: inline-block;
inline-block 속성은 이름처럼, inline과 block의 특성을 모두 가지고 있기에
텍스트 흐름(inline처럼) 나열되고 block과 같이 width, height로 크기를 조절할 수 있다.
Connecting my website with Google Sheets
Published: 2023-06-12 17:13:18

---
title: Connecting my website with Google Sheets
published: true
date: 2022-09-24 09:05:55 UTC
tags: 
canonical_url: 
---

When I used my old website, there was something I remember I didn't like about it:

> Why do I have to edit the HTML code every time I add a project?
> 
> Why do I have to copy and paste a lot of code every time I want to add a social media link to my website?

When making my new website, I was going to make the same error, but then I thought that it would be cool to connect it with Google Sheets.

Looks easy, right? Well, the difficult part was getting a service that actually worked. Some were paid, others had a limit.  
So I decided to go with [opensheet](https://github.com/benborgers/opensheet). It's quite easy to use, only some fetch requests.

```
fetch(
  "https://opensheet.elk.sh/[Sheet ID]/Projects"
)
  .then((res) => res.json())
  .then((data) => {
    data.forEach((row) => {
      addProject(
        row.project,
        row.url,
        row.tags,
        row.description
      );
    });
  });

function addProject(name, url, tags, description, json) {
  // add project to DOM here
}

```

Looked great! Then I did the same thing for my social media links:

```
fetch(
  "https://opensheet.elk.sh/[Sheet ID]/Social"
)
  .then((res) => res.json())
  .then((data) => {
    // add social to the dom
  });

```

Add a very simple loader effect, and it's done! It is quite useful and a huge time-saver, but we always have problems with loading speed.
Better (decentralized) Regulation and Protocol for Parental Control?
Tags: opensource, news, security
Published: 2022-09-24 09:01:37

---
title: Better (decentralized) Regulation and Protocol for Parental Control?
published: true
description: 
tags: opensource,discuss,news,security
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dbitd51qqtxeucpql62m.png
# Use a ratio of 100:42 for best results.
---

There seem to be more and more discussions on and revalations about how some corners of social media are downright dangerous for kids. This makes me have a few reactions:

1. That's awful, and:
2. Oh no... politicians are going to pass non-sensical regulation on a topic they don't understand.
3. But... I like to browse anonymously... I don't want services to be required to verify someone's identity before being able to use it. But I can definitely see it happen, especially in Europe.
4. And most importantly: I don't want to re-enact 1984, like they do in China, where facial recognition and id cards must be provided to use all kinds of online services (such as games), so companies (and the gov) can prevent ~~everyone~~ kids from accessing the internet as a whole or just certain content. Also, I don't trust anyone to keep that type of data safe ever.

So I was wondering... If this problem needs to get tackled, can we find a better solution, before panicked politicians take a sledgehammer to solve the problem?

**What about instead of trusting services to perform identification verification, can we somehow leave it to the parent?**

To that extent, considering the immense amount of resources that identity verification would cost to begin with, can't that money be used to develop a better parental control mechanism and experience instead? Maybe one that is tied to the computer/phone/device (or even network of devices if they have more than one), rather than being enforced by the provider/company/gov?
I'm thinking, why not implement an open source protocol that works as follows:

1. The privileged parent can turn on and off certain types of content (e.g. by domain/url/"content flags"/even keywords; e.g. `nsfw`, `partial nudity`, `PG-13` could be "content flags").
2. Applications and content providers can opt into that protocol, to check whether something may be accessed or not.
3. There would be sensible and maybe crowdsourced default settings, so parents don't have to make the hard decisions on their own (that is similar to how ad-block works afaik)

E.g. the browser implements the protocol as a "hub"-actor, and websites that want to offer any non-safe or unmoderated content must (over the time frame of implementation, let's say a few years or so) implement the "content provider" actor of the protocol, which communicates to the hub the type of content (could start out as simple as adding a new `HTTP` header, or maybe an initial handshake whose result stays cached for a while etc.), to check if it should be served.

It's just a rough idea that I have been having, but it certainly sounds more appealing than waiting for the next (much worse) iteration of the "Do you want to allow our cookies?" bull.
Why Git is best for the version control system?
Tags: git, github, webdev, productivity
Published: 2022-09-24 08:57:09

- Git is a fast and modern implementation of the version control system.

- Git provides a history of content changes.

- Git facilitates collaborative changes to files.

- Git is easy to use for any type of knowledge worker.

- Git is flexible so that it fits your needs instead of the other way around.

- Git is powerful to satisfy the scripting needs of advanced developers.

- Git log changes locally so that connectivity doesn’t block your work.

- Git is team-centric so that collaboration happens naturally.

---

## Let's connect 💜

You can follow me on [Twitter](https://twitter.com/MrDanishSaleem), [Instagram](https://www.instagram.com/mrdanishsaleem/), [LinkedIn](https://www.linkedin.com/in/mrdanishsaleem/) & [GitHub](https://github.com/mrdanishsaleem/)

If you like this post. Kindly support me by [Buying Me a Coffee](https://www.buymeacoffee.com/mrdanishsaleem)
Django project using Microservice Architecture
Tags: python, django, restapi, microservices
Published: 2022-09-24 08:55:49

Welcome to microservice architecture using Django!

Django is a powerful web framework that helps you build complex web applications quickly and easily. But what exactly is microservice architecture, and how can Django help you take advantage of it?

Microservices are a newer architectural style for building software applications. Unlike traditional monolithic architectures, which build one large application as a single unit, microservices break an application down into small, independent services that communicate with each other. This has several advantages:

1. Services can be developed and deployed independently of each other, so you can move faster overall.
2. Each service has a well-defined purpose and responsibility, making the code easier to understand and maintain .  
3 . If one service goes down , the others can continue to run , so your app is more resilient . 
4 . Services can be written in different languages , allowing you to choose the best tool for each job .
5.You can scale individual services as needed , rather than scaling the entire app .