teleren/devto huggingface dataset:
Created a Web extension
Tags: webdev, discuss, beginners, mobile
Published: 2022-04-19 16:45:32

Today I Managed to get around to creating my browser extension for my mobile app Notie. I managed to get the functionality working and dialled in. I’ve just got to make changes to the ui and get that finalised then port it over to Safari. Hopefully that all goes okay.

What browser extensions have you developed (if any)?
Survey Form Project
Tags: codepen, freecodecamp, html, css
Published: 2022-04-19 16:38:19

## **Survey Form Project** ✅ 

Hey guys. I just finished doing the second project on [FreeCodeCamps Responsive Web Design](https://www.freecodecamp.org/learn/responsive-web-design/) with help using this [YouTube tutorial](https://www.youtube.com/watchv=se0CcYu7OPI&t=1626s&ab_channel=Traverse%26Create). I would highly recommend this course to anyone who is trying to learn HTML and CSS. My project is hosted on [Codepen](https://codepen.io/) a browser based code editor that works with the FCC courses and has lot's of other features. 

If anyone notices anything that could be done better or if you have any tips/tricks, feel free to let me know! I am glad to be adding another project in to my portfolio, and moving on to the next. :)

{% codepen https://codepen.io/trubdubz/pen/YzYdbew %}
The machines have now also learned the grammar of the English language.
Tags: node, javascript, ai
Published: 2022-04-19 16:34:58

[Grammar.AI](http://grammarai.glitch.me/) is new artificial intelligence that has studied English grammar. It can determine the tenses of sentences. It also finds modal verbs in sentences and can determine the construction of sentences.
## Why Grammar.AI?

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cgoxgveltr27w2vcrful.PNG)
This program is absolutely free. Use of this program is not restricted. Artificial intelligence learns and analyzes sentences of any difficulty. Use this app very easy. [Try now this!!!](http://grammarai.glitch.me/)
Removing Sensitive Data in Git
Tags: beginners, gitlab, github, git
Published: 2022-04-19 16:27:42

This guide explain how to remove sensitive text from your Git repo. It requires [BFG Repo-Cleaner](https://rtyley.github.io/bfg-repo-cleaner/), which is [endorsed](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository) by GitHub, and Java.

1. Close/merge all pull requests.
1. Make sure all developers' local branches are clean.
1. Clone your repo to create an emergency backup.
1. Download the `bfg` JAR file from [BFG Repo-Cleaner](https://rtyley.github.io/bfg-repo-cleaner/), for example `bfg-1.14.0.jar`.
1. Go to a temporary working folder.
1. Clone a _bare mirror_ of your repo, for example: `git clone --mirror git@gitlab.com:SomeUser/myrepo.git`
1. Create a text file named `sensitive.txt` with regular expressions to replace. For example, this text file will replace all occurrences of `password123` with `***REMOVED***` and all occurrences of `abc123` with `samplePassword`:

  ```bash
  password123
  abc123==>samplePassword
  ```

1. Copy in the `bfg-1.14.0.jar` file.
1. Execute this command to replace the sensitive text: `java -jar bfg-1.14.0.jar --no-blob-protection --replace-text sensitive.txt myrepo.git`
1. Go into the mirror repo: `cd myrepo.git`
1. Execute `git reflog expire --expire=now --all && git gc --prune=now --aggressive`
1. Push to your remote branch: `git push` . Note: If this fails, you may need to unprotect the branch in the remote Git server.
1. Ask all developers to **re-clone the repo** to get the rewritten Git histories.
1. Verify that the repo looks correct, then delete the local backup repo and temporary working folder.

Now all sensitive data is gone.

Thanks for reading!

Follow me on Twitter [@realEdwinTorres](https://twitter.com/realEdwinTorres) for programming tips, software engineering content, and career advice. 😊

_The content in this blog post is publicly available at [Git](https://git-scm.com/), [GitHub](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/removing-sensitive-data-from-a-repository), [GitLab](https://gitlab.com/), and [BFG Repo-Cleaner](https://rtyley.github.io/bfg-repo-cleaner/)._
I want to start writing about development, but I’m a beginner. Is this is a bad idea?
Tags: anonymous, codenewbie, discuss, writing
Published: 2022-04-19 16:18:00

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._

***

I would really like to begin posting about software development, but I'm brand new to all of this and don't know if my posts will be welcomed, shunned, or ignored completely.

I really like the idea of learning in the open, but it can feel so daunting and I'm a bit worried that the community will be annoyed or harsh with me for posting about things that I don't yet fully know. I want to post about the problems I'm facing, the solutions I'm coming up with, and the different concepts I'm learning, but I don't know if I can speak with enough authority on these topics yet to do so.

What do you think? When is the best time to begin posting about development? Do devs generally expect writers in these communities to know exactly what they're talking about or is it okay to just go for it and lean on the community for support?
Terminal komandalar | Part 1
Published: 2022-04-19 16:10:12

##pwd
- joriy papka manzilini chop etadi

## `clear`
- terminaldagi hamma tekstni tozalab yuboradi

## `ls`
- joriy papka ichidagi hamma narsani chop etadi
- `ls -a` yashirin fayllarni ham chop etadi

## `mkdir [dir name]`
- make directory - papka yaratadi

## `cd`
- change current directory
```sh
cd Foundation
```
- `cd ..` bitta orqaga qaytadi

## `tepa strelka`
- eski komandalarni qaytaradi

## `cat [file name]`
- faqatgina tekst faylni kontentini print qila oladi

```sh
cat main.cpp
```
HackerRank — Problem Solving — JavaScript — Simple Array Sum
Tags: javascript, programming, problemsolving, hackerrank
Published: 2022-04-19 16:06:10


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

Given an array of integers, find the sum of its elements. For instance, if the array=[10,20,30], then it will return 10+20+30 = 60.

Solution:


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

Explanation: 

**- Step 01:** Take a variable named sum and store an initial value as 0.

**- Step 02:** Iterate a for loop through the given array.

**- Step 03:** Add up each array element in the sum variable.

**-Step 04:** Return the sum variable after adding all the array element.
Quick Tip: Establishing PowerShell Remote Session – Docker Container
Tags: docker, powershell, container, enterpssession
Published: 2022-04-20 17:39:34

---
title: Quick Tip: Establishing PowerShell Remote Session – Docker Container
published: true
date: 2022-04-19 16:04:38 UTC
tags: Docker,Powershell,Container,EnterPSSession
canonical_url: 
---

The title is quite self-explanatory, so, if you want to establish a remote session from PowerShell, running on your host, to the PowerShell, running on your container, just follow the next steps.

As the first step, we’ll need to get the Container ID, the necessary parameter to use on the cmdlet **[Enter-PSSession](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/enter-pssession?view=powershell-7.2)** to perform the remote session.

![](https://toolgbrmaker.files.wordpress.com/2022/04/image.png?w=1024)
_docker ps –no-trunc_

Afterward, we need to copy-paste the ID highlighted on the above image and perform the next step to end with the remote session established.

![](https://toolgbrmaker.files.wordpress.com/2022/04/image-1.png?w=1024)
_Enter-PSSession -ContainerId $ContainerID -RunAsAdministrator_

And that’s it, remote session established… From this point on you’ll be able to run your cmdlets in your container from your host machine.

I hope that helped! Stay safe!
Problem With CSS
Tags: css, sass, problem, webdev
Published: 2022-04-19 15:52:22


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

**CSS** is one of those technologies that we learn to use when starting with web development. But after we find better solutions we don't really think about it. Don't get me wrong CSS is great it helps us build modern and rich ui for websites. But when I'm creating a web application for my client CSS might not be the best choice.

## The Problem With Frameworks
the only problem I have with using framework such as bootstrap or tailwind is that they are a completely different way of writing CSS and a average beginner might find it difficult to use these technology right away in their project. So the problem arises how do we make css less boring and also make it easier for developers to write it?

## Solution To The Problem

Let's introduce **_Sass_** also known as _Syntactically Awesome Style Sheets_.

Sass is a css framework that builds on top of normal css,its like typescript but for css.

> But Why do i like sass so much?

to know the answer of this lets answer three questions

Why should I use sass?

1. Sass is literally css!.Yeah sass is literally css but with some extra feature. This makes developer experience amazing!

2. Sass is smart!. When you write sass you are also writing legacy support for older browsers

3. Sass is mature! sass is stable and has a large community!


So the next time someone tells you they need to use a CSS framework point them to this blog!

Now for the final part I am going to give you some resources that you can use to your advantage

{% embed https://www.youtube.com/watch?v=akDIJa0AP5c %}.


sass Documentation: https://sass-lang.com/

**SASS SCSS SYNTAX AND SASS**

sass can be written in two ways using the scss or the sass way
create a file with .scss syntax to use the scss syntax 
and use .sass to use the sass bracket syntax

**What't the difference**

SCSS does not contain any brackets and relies on indentation
SASS uses to contain a style

**TIP: CHECK THE SASS DOCS TO SEE MORE ABOUT SASS VS SCSS**
```
//scss code
.button
  padding: 3px 10px
  font-size: 12px
  border-radius: 3px
  border: 1px solid #e1e4e8

//sass code
 .button {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 3px;
  border: 1px solid #e1e4e8;
}
```

**PROMOTION**
If you like this content be sure to subscribe to my youtube channel as a thank you helps me a lot! :)

CHANNEL--👉https://www.youtube.com/channel/UCVN9qpxbrJ9qMPjpZf3ywpA

signing off....
Luos Web App: Rooting table
Tags: webdev, saas, opensource, luos
Published: 2022-04-19 15:50:23

Plug and play applied to edge and embedded systems
⏩ https://app.luos.io/

Get a global view of your edge or embedded systems. Whether you have one or fifty boards, you don't need to configure them because Luos organizes, summarizes and standardizes the information for you.

Our current alpha version allows you to test and understand the future possibilities of this project for your needs. Feel free to send us any recommendations or comments based on your experience.
Gen-Z #developers vs Millennials, how are they different?
Tags: discuss, programming
Published: 2022-04-19 15:34:08

Gen-Z are the digital natives (those born in 1997 onward), who were raised on social media, connected with their friends, family on Facebook, entertained on Tiktok, and are finding their opportunities on many social platforms. 

Is YouTube king for this generation? how do you master your coding skill?

How about Millennials (born between 1981 and 1996)? How do they/we learn?
The difference between a Virtual Machine (VM) and a Container
Tags: containers, vm, docker
Published: 2022-04-19 15:25:24

##### *They are two ways to deploy multiple, isolated services on a single platform*
## The Difference
### VM's
- VM's have an hypervisor managing the resources in connecting to the main physical machine
- Multiple machine with multiple OS's can run separately in isolation    

**Pros**
- System reliability: host OS wont be affected even if it crashes because of isolation.
- Provides layer of security, even if infected by some malware. Host OS will not be affected
- Multiple OS environment running on the system.

**Cons**
- Running multiple os's can lead to instability
- Less efficient
- Can be infected with the weakness of the Host Os

### Containers

- Key: There are exceptionally lightweight.
- A form of operating system virtualization.

`An Abstraction of the app layer that package the code and dependencies together`

- They can share The host OS kernel, libraries and binaries too  

**Pros**
- Extremely Lightweight and fast
- Exemplary when it comes to CI?C implementation  

**Cons**
- depends on the Host OS
- Cannot all by themselves provide security at a commendable level.
- When a container is deleted, if the data inside is lost. You will have to add Data volumes in order to store the data.


> Major Difference: Vm's Hypervisor virtualizes the physical 
  hardware, Each VM contains a guest OS, a virtual copy of the 
  hardware the oS requires to run WHILE a container 
  virtualizes the OS and only contains the application and it 
  libraries.
CSS Interview Question: Center HTML Element (3 Approaches💥)
Tags: css, interview, tutorial
Published: 2022-04-19 15:07:29

You get asked a question ❓ or is challenged to write code to 
> *Center a div vertically and horizontally OR How to perfectly center an element in a browser?*

How would you answer? 🤔 Below are three possible ways to do it. My recommendation all the way below. Given HTML markup that looks like below:

```html
<div class="parent">
  <div class="child"></div>
</div>
```

**Approach #1: CSS Translate/Transform**
This is an approach that have a better browser 🌏 support than both CSS Flexbox and Grid. Code may look like below.

```css
.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

![CSS Translate/Transform Browser Support Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54kwhqpyxoqtejv4bwyx.png)

Codepen: https://codepen.io/angelo_jin/pen/popONyX

> Note: All implementation will look like below

![Vertically and Horizontally Centered HTML Element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqd4thnnv3kkyam4ugq2.png)

**Approach #2: CSS Flexbox**
This solution have a better browser support than css grid and ideal for those browsers can support the feature. It is great for creating 1 dimension layout which aims at providing a more efficient way to align and distribute space among items in a container. Can even center when their size is unknown and/or dynamic. 😲

```css
.parent {
  display: flex;
  align-items: center;
  justify-content: center;
}
```

Codepen: https://codepen.io/angelo_jin/pen/QWaVGGP

![CSS Flexbox Browser Support Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e196a5nk682me7r7wmlr.png)

**Approach #3: CSS Grid**
This ruleset is ideal because we are not on the 90's anymore, few lines of style we have to add that completely changes the way we design user interface.😊 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in terms of size, position, and layer, between parts of a control built from HTML primitives.

If you are going to use this on your interview, mention that you would use this solution if browser can support it. This would show that you are paying attention with the latest and greatest css specs and is not tied up with the old way of doing things.

```css
// CSS Grid
.parent {
  display: grid;
  place-items: center;
}
```

Codepen: https://codepen.io/angelo_jin/pen/qBpMqRr

![CSS Grid Browser Support Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n36j6hikl8rnfxbchbgs.png)

Below is for medium for those who like video format:
{% youtube https://youtu.be/QPr8uBohiBM %}

Codepen Center Element Collection: https://codepen.io/collection/MgJxRk
(Great idea to bookmark for future use)

A great front-end engineer focus his attention equally on CSS and JS, be well-rounded, and doesn't concentrate on one technology. For my recommendation on this question, I would use CSS Grid if browser is capable of supporting. If not, resort to CSS Flexbox then, CSS Translate would be the last choice.
Software performance testing - How to do it ? [3]
Tags: devops, sre, performance, productivity
Published: 2022-04-19 15:05:16

In the previous parts about Software Performance Testing, we saw what it is and why it's important to do it.

Today, we will start to talk about something more practical about performance testing : How to do it ?

---

## 1/ Before to do it
Normally, it's something which is done during the design, but be sure that all the apis you call can support your trafic in all the environment. Maybe some services don't have the same resources in non production to decrease costs.

So be sure, everything is ok with all the other services.

---

## 2/ Ways to do it
To do your performance testing, I precognize to first do a test of your service with mocks to only check your service, then do your test with all the other services.

Why? Just because if your service can't support the desired volume, it won't help anything to do it with all the other services.

If you are confident, you can directly do it with all the other services.

In both cases, if a bottleneck appears you will have to explore your logs and monitors to understand what happend.

---

## 3/ Testing

To test your api, the easiest way is to use a dedicated tool like **[JMeter](https://jmeter.apache.org/)** or **[Gatling](https://gatling.io/open-source/)**.

Both of this services are open-source and can be use with Java. If you know Scala, you can use Gatling using it.

Personally, I recommand Gatling. I used both of them. Gatling is really easy to use, to build scenarios and it uses less resources.

If you don't know these tools, you can check online there are a lot of tutorials to learn how to use it.

### JMeter
{% embed https://www.youtube.com/watch?v=mXGcBvWYl-U %}
{% embed https://www.youtube.com/watch?v=SoW2pBak1_Q %}
{% embed https://www.youtube.com/watch?v=3m4vkDU0zIU %}

### Gatling
{% embed https://www.youtube.com/watch?v=o993CvUz4GQ %}
{% embed https://www.youtube.com/watch?v=CpbgltEqFpQ %}

---

Then congrats! Your services are ready to go in production with lot more reliability! 🚀

I hope this mini-serie helped you! 🍺

---

<center><h3>You want to support me?</h3></center>
<a href="https://www.buymeacoffee.com/mxguilbert7" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="41" width="174"></a>
Lista de Exercícios 02 - Strings #05
Tags: python, programming, tutorial, beginners
Published: 2022-04-19 15:04:32

Q1. Leia o nome do usuário e imprima o nome todo em maiúsculo, todo em minúsculo e no formato padrão mantendo somente o primeiro caractere de cada nome em maiúsculo.

Q2. Imprima o seguinte texto, respeitando a citação e mantendo as aspas:
    _Albert Einstein disse uma vez: “Uma pessoa que nunca cometeu um erro, nunca tentou nada novo.”_

Q3. Refaça o exercício anterior armazenando em uma variável o nome do autor da mensagem, em outra variável a citação ou frase, e imprima a mensagem utilizando _f-strings_ e mantendo a resposta da questão anterior.

Q4. Solicite o nome e o sobrenome do usuário, em duas variáveis separadas e imprima a seguinte mensagem, usando substituição de string (%s). “Olá, &lt;Nome> &lt;Sobrenome> !” Por exemplo: “Olá, Joao Vale!”

Q5. Criar um algoritmo que entre com dois nomes e imprimi-los em ordem alfabética.

Q6. Usando os métodos **_isX()_**, crie um algoritmo que solicite do usuário as informações: nome, idade, peso. Realize a seguinte validação:
* nome: somente letras, sem dígitos
* idade: numérico
* peso: numérico, podendo conter ponto decimal.

Escreva na tela se o campo estiver válido ou inválido.
Extend Core Components in AEM
Published: 2022-04-19 15:03:58

---
title: Extend Core Components in AEM
published: True
description: These are the notes on how to extend a core components in AEM.
tags: 
//cover_image: https://direct_url_to_image.jpg
---
### Core Components vs Foundation components

| Capability | Core Components | Foundation Components  |
| ------------- |:-------------:| -----:|
| Storage      |/apps | /libs |
| Logic      | java POJO with sling model      |   JSP |
| Markup | HTL Syntax      |    JSP |
| CSS class Naming| BEM Notation      |   Custom Scheme |
| Dialog Definition | Coral 3      |    Coral2+ classic UI |
| JSON Output | Sling Model exporter with Jackson Serialization     |   Default Sling servlet |
| License | Apache      |   Adobe propriety |

### 👨‍💻 How to extent core components
Core components can not be directly used. So we can use property component to refer to the core component.

Select the component you want to extend from core component library **/apps/core/wcm/components** copy the path of the component.

Create a proxy components in your project
Go to **/apps/project-name/components/content/~create component**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7j5mnlj57y144byeahtm.png)

Fill in all details in dialog box. In **Super Type:** use Path without **/apps/** to the core component.

Now you will be able to select and add components to your template.
 
### 👨‍💻 How to add styles to your components
Create a **clientlibs-components** folder under your app folder.

Create a client library under clientlibs-components folder

/clientlibs-components/~create node of Type (cq:CllientLibraryFolder)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bh3th7wr9mxhqkh3x8uj.png)

If you want to use client library provided by core component you can embed multi string categories property to your component.

**Use your own client library**
Create a Catagories property with multi string value and point it to **your-project-folder.components.yourcomponent** i.e training.components.breadcrumb in this case.

Then create css.text file with 👇 below content 
`#base=css
style.less`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn0cr6qrzzia8ymur66u.png)
 

Create a folder structure in you client library
/css/style.less

So the **folder structure** looks something like this ⛺️.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzjkodbyj77gpg51wce0.png)
 
In order to use these styles on your site. We need to embed this into our clientlibs-site as well. This holds similar structure as clientlibs-components folder with additional **embed** multi string property
which points to your component.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfa6jj5ghwdw1tu6qqdd.png)
Regression
Published: 2022-04-19 15:01:08

Regression is a form of machine learning that is used to predict a numeric label based on an item's features. For example, an automobile sales company might use the characteristics of a car (such as engine size, number of seats, mileage, and so on) to predict its likely selling price. In this case, the characteristics of the car are the features, and the selling price is the label.


Regression is an example of a supervised machine learning technique in which you train a model using data that includes both the features and known values for the label, so that the model learns to fit the feature combinations to the label. Then, after training has been completed, you can use the trained model to predict labels for new items for which the label is unknown.