teleren/devto huggingface dataset:
Explaining MediaRecorder API in 264 Characters! 🎥
Tags: frontendchallenge, devchallenge, javascript, webdev
Published: 2024-03-26 03:32:49

_This is a submission for DEV Challenge v24.03.20, One Byte Explainer: Browser API or Feature._

## Explainer
This helps capture audio/video in the browser. It can be used to record the screen, webcam, or microphone. Usage - start recording with start(), stop with stop(), and handle data via events like dataavailable(delivers media data to the app), onstop, onresume, etc.

## Additional Context
Check out this man's post for the code tutorial.
{% embed https://dev.to/ethand91/mediarecorder-api-tutorial-54n8 %}

## Thanks!
Big thanks to the DEV Team for the frontend challenge!
Your creativity and dedication to this platform is what makes it awesome.
Liquor Tags - Fetch OpenGraph data and Render the output
Tags: elixir, tags, liquor, embed
Published: 2024-03-26 03:05:00

---
title: Liquor Tags - Fetch OpenGraph data and Render the output
published: true
description: Liquor Tags. Inspired by dev.to embed tags (liquid tags), takes Open Graph data from URLs and generate output using pseudo EEx templates.
tags: elixir, tags, liquor, embed
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2024-03-26 03:05 +0000
---

*Liquor Tags*. Inspired by dev.to embed tags (liquid tags),
takes Open Graph data from URLs and generate output using pseudo EEx templates.
Useful when creating previews of websites using Open Graph data.

## Installation

```elixir
Mix.install([
  {:liquor, "~> 1.0.0"},
  {:req, "~> 0.4.14"}, # Just for demostration
  {:kino, "~> 0.12.3"} # Just for demostration
])
```

```elixir
alias Liquor.Tags.Tag

content = """
{% github ElixirCL %}
{% embed https://ninjas.cl %}
"""

tags = [
  Tag.new("github", "Github: <%= og.url %>", "https://github.com"),
  Tag.new("embed", "Website: <%= og.title %>")
]

# Fetch only needs to return the HTML string
fetch = fn url -> Req.get!(url) |> then(& &1.body) end

Liquor.render(content, tags, fetch)
|> Kino.Text.new()
```

### Renders

```text
Github: https://github.com/ElixirCL
Website: Ninja Software Chile (Ninjas.cl)
```
Boost Your Testing Productivity with WeTest Automation: Revolutionizing Mobile Game & App Testing on Real Devices
Tags: automationtesting, automatedtesting, qualityassurance, qa
Published: 2024-03-26 02:41:04

WeTest Automation Testing offers a comprehensive suite of tools designed to identify and address issues throughout the entire mobile app or game release cycle.

Achieving a consistent app or game experience across devices is essential to meet user expectations. However, the diverse hardware and operating systems of Android devices often lead to compatibility issues. With WeTest Automation Testing, debugging, and discovering compatibility issues become a breeze.

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

Functional testing plays a crucial role in verifying the functionality of a mobile game or software application. WeTest Automation Testing significantly enhances the efficiency and repeatability of functional testing, making it a streamlined and effective process. Rest assured that your features will work as designed.

Neglecting performance testing can have severe consequences, including poor customer experience, reputational damage, and lost sales. WeTest Automation Testing provides testers with comprehensive performance data, including CPU usage, FPS (Frames Per Second), and RAM usage, enabling you to quickly identify and address performance issues.

Regression testing is vital for ensuring that code changes do not introduce new issues. However, it can be a time-consuming process. WeTest Automation Testing eliminates regression testing downtime with test analysis, enabling teams to swiftly identify and address testing issues, ensuring a seamless testing experience.

**Why Choose WeTest Automation Testing?**

**Reliable Device Maintenance**
WeTest boasts high-standard server rooms and cabinets with 99.9% stability and dedicated broadband support. Our infrastructure ensures a stable power supply, consistent temperature and humidity levels, and reliable equipment operation and maintenance.

**Seamless Integration with Testing Frameworks**
WeTest seamlessly integrates with major native mobile testing frameworks. Whether you use Appium, Airtest, Espresso, GameLoop, or WeTest Monkey, our platform supports them all. Simply upload your test cases, and WeTest will automatically parse them, saving you time and effort.

**Features of WeTest Enterprise**
With WeTest, you can enjoy the benefits of our private cloud solutions, ensuring confidentiality and real-time responsiveness. Customize and deploy devices according to your needs, including configuring pre-installed apps, uninstalling apps, and automatically launching specific apps. We provide the flexibility you require.

Unlock the Power of [WeTest Automation Testing](https://www.wetest.net/?utm_source=pr&utm_medium=PR-8) today and experience streamlined mobile game and app testing on real devices. Stay ahead of the competition and deliver high-quality games and apps to your users.
DevOps with Guruu | Chapter 11: Deploy CI/CD with Jenkins, SonarQube, Docker, MicroK8s, ArgoCD
Tags: webdev, devops, aws
Published: 2024-03-26 02:11:22

DevOps with Guruu | Chapter 11: Deploy CI/CD with Jenkins, SonarQube, Docker, MicroK8s, ArgoCD | P.1
{% embed https://youtu.be/nBEhEKbDd4Y %}
> Jenkins CI/CD Configuration
> Jenkins Installation
> Jenkins Plugin Installation
> Jenkins System Configuration
> Maven Installation
> SonarQube Installation
> Docker Installation
> Jenkins CI/CD Pipeline
> SonarQube Integration
> Jenkins Job Configuration
> Test the Build
> Jenkinsfile Configuration
> MicroK8s Installation
> MicroK8s Add-ons
> ArgoCD Installation
> Monitoring with Prometheus and Grafana
> Prometheus
> Grafana

Join me on this journey to mastering DevOps. Let's get hands-on and build a strong foundation together! Don't forget to like, share, and subscribe for more exciting content. Happy coding, future DevOps!"
What is a Security Operations Center (SOC)?
Published: 2024-03-25 17:04:58


![What is a Security Operations Center (SOC)?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agc4629m15f3g2nlxwip.jpg)


In today's digital environment, safeguarding vital assets and customer information is of utmost importance as malicious actors constantly evolve their strategies to launch intricate cyber assaults. To effectively counter these challenges, enterprises are increasingly adopting Security Operations Centers (SOCs) as a proactive measure.

A SOC acts as a centralized unit consisting of IT security professionals, processes, and technologies dedicated to safeguarding an organization’s digital assets around the clock. By utilizing unified security tools and methodologies, SOCs enhance their ability to detect threats, expedite incident responses, and ensure compliance with regulatory standards.

Key functions of a SOC encompass managing asset inventories, conducting routine maintenance and readiness activities, planning for incident responses, regularly conducting tests, staying informed with the latest threat intelligence, continuously monitoring security, managing logs, detecting and responding to threats, restoring systems and data post-incidents, refining security measures, and managing compliance.

However, SOC teams encounter numerous challenges in their daily operations, including coping with the rising volume of security alerts, dealing with budget limitations, managing various tools, addressing skill and knowledge shortages, clarifying the mission's objectives, bridging talent gaps, confronting sophisticated adversaries, handling vast amounts of data, combating alert fatigue, and addressing unknown threats.

To tackle these hurdles, CloudDefense.AI offers a comprehensive suite of cloud security tools designed to alleviate the burdens faced by SOC teams. Through features like noise reduction technology, an all-encompassing security suite, a user-friendly dashboard, expert assistance, the Hacker’s View™ solution, seamless integration capabilities, a Code to Cloud approach, and AI-driven Security Posture Management (AI-SPM), CloudDefense.AI empowers SOC teams to streamline security operations, mitigate risks, and stay ahead of evolving cyber threats.

In conclusion, by establishing a SOC and leveraging advanced cloud security solutions such as CloudDefense.AI, organizations can bolster their security posture, enhance resilience against cyber threats, and foster confidence among customers in their ability to protect sensitive data and assets.
HOW TO SUCCESSFULLY RECOVER LOST/STOLEN CRYPTOCURRENCIES.
Published: 2024-03-26 01:33:23

Everywhere on the internet is all about cryptocurrency investment, I never had any idea how it’s done, and also a lot of people were into it and earning money while in their homes, i was interested and made up my mind to invest in the hope of earning money myself. I approached a group of online traders to enlighten me more, and after spending some time with them, I received assistance in investing and had to invest and eventually upgraded to the mega scheme, but I was unaware that the company was only reaping me off my finances and that all the reviews I had read were fake until it came to my notice after investing {230,000.00} Usd and haven’t made any interest in return, I had to stop investing and asked them to at least let me get some part payment to pay off my mortgage, they refused and it became issues oh how I’ve ended up being fooled by these fake investors. I reported to the police but it was all untraced because they blocked me on every site. after explaining to my colleague regarding the issue, she introduced me to Fastfund Recovery a genius hacker and recovery expert who had once helped her to retrieve some money she had previously lost to some romance scam on facebook. I refused to accept and believe what she said and decided to contact them and supplied all transaction proofs to Fastfund Recovery through email for verification to help him proceed, to my surprise he recovered my funds completely and my total profit was all directed to my wallet in just a few days. My joy was again restored and I had hopes on what to survive on and also for my daughter’s savings, they’re also very specialized in all types of mobiles and internet hacking kindly reach out to them now if you’re experiencing the same issue: Fastfundrecovery8 (AT)gmailcom
Calculating total size of disks
Tags: bash, awk, grep
Published: 2024-03-26 00:54:55

This is the output of `lsblk` command on my Ubuntu machine:
```
$ lsblk
NAME   MAJ:MIN RM   SIZE RO TYPE MOUNTPOINT
loop0    7:0    0   1.7G  1 loop /snap/0ad/592
...
sda      8:0    0 111.8G  0 disk 
├─sda1   8:1    0   619M  0 part /boot/efi
├─sda2   8:2    0   954M  0 part [SWAP]
└─sda3   8:3    0 110.3G  0 part /home
sdb      8:16   0 931.5G  0 disk 
└─sdb1   8:17   0 931.5G  0 part /
sr0     11:0    1 383.5M  0 rom  
```
I wanted to get total size of disks `sda` and `sdb` together, but I wanted to use bash to do it.

First, I only get lines beginning with `sda` or `sdb`:

```
$ lsblk | grep -Pi '^sda|^sdb'
sda      8:0    0 111.8G  0 disk 
sdb      8:16   0 931.5G  0 disk
```

Then we isolate just the fourth column delimited by spaces (that is SIZE column).

```
$ lsblk | grep -Pi '^sda|^sdb' | awk '{print $4}'
111.8G
931.5G
```

Next step would be to add 111.8G and 931.5G together. So we do that:

```
$ lsblk | grep -Pi '^sda|^sdb' | awk '{print $4}' | awk '{total+=$1} END {printf "%.1fG\n",total}'
1043.3G
```

Lastly, let's convert the answer to terabytes (since the answer is in gigabytes):

```
logan@logan-mainPC:~$ lsblk | grep -Pi '^sda|^sdb' | awk '{print $4}' | awk '{total+=$1} END {printf "%.1fG\n",total}' | awk '{terabyte=$1/1000; printf "%.1fT\n",terabyte}'
1.0T
```

So we conclude that 1043.3G is about 1T in size. Now we know that we would need at least 1T of space to copy the contents of both `sda` and `sdb` to another hard disk. :)
Web Components and Shadow DOM
Tags: webdev, javascript, beginners, programming
Published: 2024-03-26 00:28:51

## Introduction

Web components and shadow DOM are not new to the world of web development, but they have gained significant attention and popularity in recent years. They are two essential tools that are used to encapsulate and modularize web application code, making it more maintainable and reusable. In this article, we will explore the advantages, disadvantages, and features of web components and shadow DOM.

## Advantages

Web components offer developers a way to create customized and reusable HTML elements. This helps in creating a more organized and consistent code structure, leading to better code maintenance. They are also portable and can be used across different applications and frameworks. On the other hand, shadow DOM provides a way to encapsulate styles and behaviors of a component, preventing them from affecting the rest of the application. This results in improved code reliability and reduced chance of conflicts.

## Disadvantages

One major disadvantage of using web components and shadow DOM is its limited browser support. Not all browsers fully support these technologies, which can cause compatibility issues. Additionally, the learning curve for these tools can be steep, requiring a good understanding of HTML, CSS, and JavaScript.

## Features

Web components and shadow DOM have many useful features that make them essential tools for web developers.

### Web Components

Web components offer four main features:

- **Custom Elements:** Allow developers to define their own custom HTML elements.
- **Shadow DOM:** Encapsulates styles and behaviors, preventing them from leaking into the rest of the application.
- **HTML Imports:** Enables importing external HTML files.
- **Templates:** Allows the creation of HTML templates that can be reused across your application.

### Shadow DOM

Some of the notable features of shadow DOM include:

- **Scoped CSS:** Ensures that styles applied within a shadow DOM do not affect the rest of the document.
- **Node Access Restrictions:** Restricts access to the shadow DOM's nodes from the outside, enhancing encapsulation.

## Example of Custom Element

```html
<!-- Define a custom element -->
<script>
  class MyCustomElement extends HTMLElement {
    constructor() {
      super(); // Always call super first in constructor
      // Element functionality written here
    }
  }
  // Define the new element
  customElements.define('my-custom-element', MyCustomElement);
</script>

<!-- Use the custom element -->
<my-custom-element></my-custom-element>
```

## Conclusion

In conclusion, web components and shadow DOM are powerful tools that bring modularity and reusability to web development. They offer several advantages, but they also have some limitations. With increasing browser support and evolving technologies, web components and shadow DOM are undoubtedly going to play a significant role in the future of web development. As a web developer, having a good understanding of these tools can greatly enhance your skills and make you more efficient in building web applications.
How My Experience in Technical Support Enhances My Career as a Software Engineer
Tags: softwareengineering, career, webdev, programming
Published: 2024-03-26 00:07:13

First of all, I want to clarify that I don't have many years of experience as a software engineer. However, I can certainly speak about my experience in technical support and freelancing.

## Networking
Like in many other jobs, I've formed some friendships during my time in technical support. Some friends stayed in the company, but others I will keep as friends forever. Some of them chose to become software engineers like me, while others work in similar fields. My two years of experience allowed me to meet many kind people, mostly over the phone or through WhatsApp.


## Deal with customers
Most of them were difficult to deal with because they thought we could solve all problems. While we could handle many issues, some, like disruptions and energy loss, were out of our control. As a result, I learned how to communicate effectively, calm people down, and negotiate. As a result of these skills, I gained many freelance opportunities and partnerships. The most powerful tool I discovered is the ability to use words. With them, you can make a real difference in the world.

## Speak in public
During that time, I was in high school. Our teachers often gave presentations and speeches on the topics we were studying. As a child, I was always shy and found it difficult to speak in public. However, after years of practice and speaking regularly, I noticed improvements in my speaking ability. I realized that I could express myself more easily.

## General knowledge on web 
In past job, I helped customers with different services. This means I've learned about hosting, VoIP protocol, TCP/IP, and how networks work in general. This knowledge has been really helpful in understanding the HTTP Protocol.

## Grow as a professional
When I first started at the company, I was a bit like a kid. But with time and experience, I grew up both personally and professionally. At first, I didn't always know how to handle things, but my leaders helped me learn and adapt. I even helped a new employee when I had been with the company for six months, working four hours a day
Mengenal Laravel: Framework Populer PHP untuk Pengembangan Web
Tags: webdev, laravel
Published: 2024-03-26 00:00:00

**Hai, Sobat Risereaders!**

Dalam pembahasan kali ini, kita akan menjelajahi salah satu framework PHP yang sangat terkenal dan banyak digunakan, yaitu Laravel.

## Apa Itu Laravel?

[Laravel](https://laravel.com) merupakan sebuah _framework open-source_ berbasis bahasa pemrograman [PHP](https://www.php.net) yang dirancang untuk memudahkan dalam pengembangan aplikasi web secara cepat dan efisien.

Laravel adalah _framework_ yang telah menerapkan _design pattern_ MVC. _Model-View-Controller_ (MVC) adalah sebuah _design pattern_ yang digunakan dalam pengembangan suatu software untuk memisahkan logika aplikasi menjadi tiga komponen utama, yaitu model, _view_ dan _controller_.

Sejak diperkenalkan oleh Taylor Otwell pada tahun 2011. Sekarang, Laravel telah berkembang menjadi salah satu _framework_ PHP yang sangat populer, didukung oleh komunitas yang aktif dan besar.

## Fitur Unggulan Laravel

Popularitas Laravel tidak lepas dari sejumlah fitur unggulannya. Beberapa di antaranya mencakup:

### Eloquent ORM

Eloquent adalah sistem _Object-Relational Mapping_ (ORM) terintegrasi dalam Laravel. Dengan Eloquent, kita dapat fokus pada pengembangan aplikasi web tanpa harus terlibat secara langsung dengan perintah SQL.

Misalnya, untuk menampilkan user yang memiliki id 1, di SQL kita perlu menulis perintah seperti ini:

```php
SELECT * FROM users WHERE id = 1;
```

Namun, dengan menggunakan Eloquent, kita dapat menyingkat penulisan sebagai berikut:

```php
$user = User::find(1);
```

### Blade Templating Engine

Blade adalah _templating engine_ bawaan Laravel yang memudahkan pembuatan tampilan menarik dengan cara yang efisien dan dinamis. Blade cukup mudah untuk dipelajari, apalagi jika kamu sudah terbiasa dengan _templating engine_ lainnya.

### Artisan Console

Artisan adalah _command-line interface_ (CLI) yang menyediakan berbagai perintah untuk memudahkan pengelolaan aplikasi Laravel. Kita dapat menggunakannya untuk membuat model, migrasi, _controller_ dan masih banyak lainnya.

Misalnya, untuk membuat _controller_ bernama `BookController`, kita dapat menggunakan perintah:

```
php artisan make:controller BookController
```

Maka akan dibuatkan _controller_ `BookController` di

```
nama_projek/app/Http/Controllers/BookController.php
```

### Sistem Routing

Sistem routing Laravel yang fleksibel dan terstruktur dengan baik memudahkan pengelolaan cara aplikasi menanggapi permintaan HTTP.


### Authentication Bawaan

Laravel menyediakan fitur _authentication_ bawaan yang mempermudah implementasi fitur-fitur seperti _login_, _signup_, dan _reset password_.

## Kesimpulan

[Laravel](https://blog.riseku.com/kategori/laravel/) adalah _framework open-source_ PHP yang menerapkan _design pattern_ MVC (_Model-View-Controller_). Dengan fitur-fitur canggih dan kemudahan penggunaan yang dimilikinya, Laravel menjadi pilihan banyak _web developer_ dalam mengembangkan aplikasi web.

Jika kamu tertarik mempelajari lebih lanjut, bisa mengunjungi website resmi Laravel di [laravel.com](https://laravel.com). Terima kasih telah membaca!
🎆THE BEST HTML/REACT TAGS YOU SURELY DON'T KNOW FOR 2024🎆
Published: 2024-03-25 23:31:10

# ⭐- WHAT WILL I SHOW?

In this post, I'll showcase AMAZING HTML/REACT tags that you DEFINITELY DON'T KNOW to START USING IN 2024

If you're new, I always post programming content here! Stay tuned!

Enjoy the read!!

# ✅ 1 - `<picture>`

This Tag allows you to place MULTIPLE IMAGES at the same time, being able to choose which one will be shown according to the client's screen!

It's AMAZING for when you have various images of different sizes!

[Learn more here!](https://w3schools.com/tags/tag_picture.asp)

![Picture Tag](https://pbs.twimg.com/media/GJjT36tXcAAHCU9?format=jpg&name=small)

# ✅ 2 - `<dialog>`

This one is simpler, but VERY USEFUL

You know when you want to show those dialog boxes on your website? This tag will save you!

I only use it now!

[Learn more here!](https://w3schools.com/tags/tag_dialog.asp)

![Dialog Tag](https://pbs.twimg.com/media/GJjUTBYXUAAoC-0?format=png&name=small)

# ✅ 3 - `<template>`

No more defining a variable with an ENTIRE HTML in your JavaScript!

This tag allows you to place content that can be shown or not, based on JavaScript

IMAGINE THE POSSIBILITIES!

[Learn more here!](https://w3schools.com/w3css/w3css_templates.asp)

![Template Tag](https://pbs.twimg.com/media/GJjU6ldW4AAX4aU?format=jpg&name=small)

# ✅ 4 - `<track>`

This TAG you use along with a media element, like a video or an audio, and you can simply provide SUBTITLES for that content!

MAKES YOUR LIFE MUCH EASIER!!

[Learn more here!](https://w3schools.com/tags/tag_track.asp)

![Track Tag](https://pbs.twimg.com/media/GJjVTuhXgAAK3ya?format=png&name=small)

# ✅ 5 - `<object>`

This one allows you to embed external content within your HTML page!

You can put a PDF, files, videos, audios, and even handle the error if the browser doesn't support it!

simply AMAZING!

[Learn more here!](https://w3schools.com/tags/tag_object.asp)

![Object Tag](https://pbs.twimg.com/media/GJjV5Q0WwAAH3xy?format=png&name=small)

# ⭐ BONUS - `<base>`

This one's good!
With it, you set a Base URL for ALL URLs on your page!

No more repeating the same URL all the time!

[Learn more here!](https://www.w3schools.com/tags/tag_base.asp)

![Base Tag](https://pbs.twimg.com/media/GJjWTHKW0AAlKVA?format=png&name=small)

# 😄 - THANK YOU!

This post was shorter than the others, mainly because time is a bit tighter, but I'll make the next one AMAZING!!

Thank you for reading so far! If you have any suggestions, just let me know and I'll tag you at the top!!

Also, check out my other projects:

better-format: [https://github.com/luciano655dev/better-format](https://github.com/luciano655dev/better-format)

DayKeeper (in dev):
[https://github.com/luciano655dev/daykeeper](https://github.com/luciano655dev/daykeeper)

### Thank you!