teleren/devto huggingface dataset:
My first Hactoberfest
Tags: webdev, hacktoberfest, javascript, programming
Published: 2021-11-08 17:48:11

I completed my First Hacktoberfest by submitting 4 PRs. My 4 PRs are accepted by Hacktoberfest Team.

After registering, the search🧐 for an open-source project began.
Because this was my first time contributing to an open-source projects, I was a little bit nervous. I was at a loss as to which projects to choose. React is my preferred technology stack. I also have a good grip in Front-End. As a result, I began searching for open-source projects involving the Python programming language and HTML,CSS,JS.REACTJS.
SOLID em menos de 5 minutos
Tags: programming, opensource
Published: 2021-11-08 20:49:25

Post original: [link](https://medium.com/@jotanlima/solid-em-menos-de-5-minutos-81ff05274c7)

Essas são as minhas interpretações desse paradigma, não são verdades absolutas.

## Single Responsibility Principle

**Princípio da Responsabilidade Única**

- Uma classe deve ter somente uma função (não necessariamente uma função e sim fazer uma única tarefa bem feita), utilize interface para agrupar métodos.

## Liskov Substitution Principle

**Princípio da substituição de Liskov**

- A classe mãe deve poder ser substituída pela sua classe filha. Basicamente fazendo um override nos métodos, modificando para satisfazer os requisitos da nova classe.

## Dependency Inversion Principle

**Princípio da inversão de dependência**

- Toda classe de alto nível seja completamente independente de suas subclasses. Ou seja, as classes não podem depender dos detalhes de implementação de seus métodos e classes.

## Interface Segregation Principle

**Princípio da segregação de Interfaces**

- Este princípio afirma que uma interface não pode forçar uma classe a implementar métodos que não pertencem a ela. Cada interface deve conter métodos específicos, evitando poluir as classes que irão implementa-las.

## Open Closed Principle

**Princípio do aberto/fechado**

- Crie classes que tem foco de serem extensíveis, distribuindo as responsabilidades em classes pequenas, utilize classes abstratas.

**Fiquem com Deus e até a próxima.**

_Nunca desista de correr atrás dos seus sonhos_
Host your Swagger files with Github Pages & Swagger UI 🦜
Tags: github, html, javascript, tmforum
Published: 2021-11-13 16:35:16

Get some Swagger files like from the [tmforum ProductOrder specification](https://github.com/TGotwig/TMF622_ProductOrder).

Create `index.html` at root level:

```html
<html>
  <head>
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-bundle.js"></script>
    <script src="https://unpkg.com/swagger-ui-dist@3/swagger-ui-standalone-preset.js"></script>
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/swagger-ui-dist@3/swagger-ui.css" />
    <title>TMF622_ProductOrder</title>
  </head>
  <body>
    <div id="swagger-ui"></div>
    <script defer>
      window.onload = function () {
        const ui = SwaggerUIBundle({
          urls: [
            {
              name: "TMF622-ProductOrder-v4.0.0",
              url: "TMF622-ProductOrder-v4.0.0.swagger.json",
            },
            {
              name: "Product_Ordering_Management.regular",
              url: "Product_Ordering_Management.regular.swagger.json",
            },
          ],
          dom_id: "#swagger-ui",
          deepLinking: true,
          presets: [SwaggerUIBundle.presets.apis, SwaggerUIStandalonePreset],
          plugins: [SwaggerUIBundle.plugins.DownloadUrl],
          layout: "StandaloneLayout",
        });
        window.ui = ui;
      };
    </script>
    <style>
      .swagger-ui .topbar .download-url-wrapper input[type="text"] {
        border: 2px solid #77889a;
      }
      .swagger-ui .topbar .download-url-wrapper .download-url-button {
        background: #77889a;
      }
      .swagger-ui img {
        display: none;
      }
      .swagger-ui .topbar {
        background-color: #ededed;
        border-bottom: 2px solid #c1c1c1;
      }
      .swagger-ui .topbar .download-url-wrapper .select-label {
        color: #3b4151;
      }
    </style>
  </body>
</html>
```

Enable **Github Pages**:

![Github Pages settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sweaw9lhwrzr0sjtczd8.png)

That's all! 😀🎉

![Swagger UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ou3g6h3frxl5e3usnva7.png)
使用 urequests 請記得關閉連線釋放佔用的資源
Tags: micropython, urequests
Published: 2021-11-09 04:02:48

在 MicroPython 中要使用 http 協定存取網路服務, 最簡單的方式就是藉助內建的 urequests 模組, 一般的使用情境大概會是這樣：

```python
import network
import urequests

# 連線至無線網路
sta=network.WLAN(network.STA_IF)
sta.active(True)   
sta.connect('FLAG-SCHOOL','12345678')

while not sta.isconnected() :
    pass

print('Wi-Fi connected.')

res = urequests.get("https://flagtech.github.io/flag.txt")
if(res.status_code == 200):
    print("Success.")
else:
    print("Oops.")
```

不過您可能沒有注意到的是到上面的寫法 get 並沒有完成, 而是只接收到 http 回應的表頭而以, 也就是說整個連線還佔著。如果我們會重複進行 get, 像是以下這樣的極端狀況：

```python
import network
import urequests
import time

# 連線至無線網路
sta=network.WLAN(network.STA_IF)
sta.active(True)   
sta.connect('FLAG-SCHOOL','12345678')

while not sta.isconnected() :
    pass

print('Wi-Fi connected.')

while True:
    res = urequests.get("https://flagtech.github.io/flag.txt")
    if(res.status_code == 200):
        print("Success.")
```

執行後很可能就會很快出錯：

```
>>> %Run -c $EDITOR_CONTENT
Wi-Fi connected.
Success.
Success.
Traceback (most recent call last):
  File "<stdin>", line 16, in <module>
  File "urequests.py", line 116, in get
  File "urequests.py", line 55, in request
OSError: -2
```

才兩次 get 就掛了。

## Response.content 才會關閉連線

如果你看 [ureqests 模組的原始碼](https://github.com/micropython/micropython-lib/blob/43cad179462d965014eaaa6567eabcae2c6f6f25/python-ecosys/urequests/urequests.py#L22), 就會發現你必須取用 Response 物件的 content 屬性, 才會接續收取從伺服器送來跟在表頭後面的內容, 並且關閉連線。取用 Response.text 或是 Responses.json 屬性都會連帶取用 Response.content。因此, 最好的作法就是取用上述這些屬性, 完成整個 http 傳輸過程。如果你並不需要取得伺服器送來的內容, 也可以暴力一點, 直接叫用 Response.close() 關閉連線：

```python
import network
import urequests
import time

# 連線至無線網路
sta=network.WLAN(network.STA_IF)
sta.active(True)   
sta.connect('FLAG-SCHOOL','12345678')

while not sta.isconnected() :
    pass

print('Wi-Fi connected.')

while True:
    res = urequests.get("https://flagtech.github.io/flag.txt")
    if(res.status_code == 200):
        res.close() # 或是 txt = res.text 也可以
        print("Success.")
```

現在就可以正常一直 get 了：

```
>>> %Run -c $EDITOR_CONTENT
Wi-Fi connected.
Success.
Success.
Success.
Success.
Success.
Success.
Success.
...
```
Artificial Intelligence Training in Gurgaon | Artificial Intelligence Course in Gurgaon
Tags: tutorial, career, beginners, programming
Published: 2021-11-09 09:32:43

https://www.gyansetu.in/courses/deep-learning-ai-artificial-intelligence-training-gurgaon 

Artificial Intelligence is everywhere nowadays. Every Big Company like Google,Facebook,Amazon and Many more are using it to understand their user or Customers. It is Hottest Skill in demand right now. 

There are Many AI job vacancies in top companies but there is a lack of skills. 

This skill Also pays well. 

Now Learn Artificial Intelligence Training in Gurgaon with iClass Gyansetu.  
During This Course you will work on Live Projects Prediction Analysis, Linear Regression, Image Processing, Audio & Video Analytics, Text Data Processing, IOT and various Machine Learning & Deep Learning Algorithms. You will get 100% Job Placement Assistance, free Course Repetition. 

Join now. Call:- 08130799520
Features influencing the Uber for Alcohol delivery app development cost

Tags: uberforalcohol, appdevelopment, webdev, productivity
Published: 2021-11-09 12:40:17

The cost of developing an on-demand alcohol delivery app would be determined by numerous factors. It includes features & functionality, app size & complexity, technology stack, third-party services integration, geographical location of the company or app developers’ team you hire, and the selection of platforms. 

In short, the development of an app from scratch cost would be high when compared to opting for a ready-made app. Predominantly, the number of features incorporated will have a direct impact on the cost. It will elevate when the features set added increase. That is, the Uber for alcohol delivery app with the advanced features would cost high in comparison to the one with the basic features. Below are a few sets of crucial features that would influence the cost. 

<strong>Take Away option</strong>

Apart from the customers placing orders and getting these delivered on their doorsteps, they can directly pick from the liquor store. Thereby, they can avoid delivery charges. 

<strong>Referral program</strong>

The platform owner can gain a larger user base by introducing a referral program. With this, you can reward customers for successful referrals. 

<strong>Offer Special Gifts</strong>

Typically, people would like to gift flowers and chocolates. Besides this, you can let them gift alcoholic beverages via the <a href="https://www.uberlikeapp.com/alcohol-delivery-app-development">Uber for alcohol delivery app</a> by placing orders and specifying the destination address of whom you want to gift.  

<strong>Resolve customer queries</strong>

The vendors or store owners can directly connect with the customers to resolve queries. This will gradually increase customer satisfaction which will be a ladder for your business success.
 
<strong>Ad management</strong>

The platform with a separate advertisement space will empower the third party to promote their services or products. The platform owner can manage the ads through the admin panel. 

<strong>Concluding note</strong>

We have discussed a few sets of features that will influence the on-demand alcohol delivery app development cost in this blog. It is significant to note that the features & functionality is the major factor determining the Uber for alcohol delivery app development cost.
Peculiaridades do JS. Que não são erros! Nem esquisitice! - Objetos
Tags: javascript, braziliandevs
Published: 2021-11-09 17:20:22

JS é uma linguagem interessante! 

Além das coisas já bem conhecidas(espero)!
Que funções são valores! 
O fato de funções serem tratadas como valores!
Funções serem cidadãos de primeira classe! Entre outras coisas da parte funcional do JS!

Mas hoje quero mostrar algo sobre que tudo no JS é objeto! 


```javascript 
function teste(){}

teste['testeinterno'] = 'oi'
console.log(teste.testeinterno) // 'oi'

for(chave in teste){
  console.log(chave) 
}
//"testeinterno"


```
Colocamos uma propriedade na função? 
Como assim? 
Isso acontece pq tudo no JS é objeto. 
Inclusive uma função! 
E como um bom objeto no JS você pode colocar propriedades nele! 
Não é um erro! Nem uma esquisitice. 

Vamos ver um array! Que é um objeto :P


```javascript
const arr = ['testar', '09']
//array normal! 

arr['oi'] = 'neh'
arr[1.5] = 'hello'
arr[-1] = 'bah'
// como ele é objeto! Podemos por propriedades //e valores!

for(chave in arr){
  console.log(chave) 
}
//"0" "1" "oi" "1.5" "-1"

console.log(arr) // ["testar", "09"]
console.log(arr.oi) // 'oi'
console.log(arr[-1]) // 'bah'

console.log(arr[-1] + arr[1.5]) //"bahhello"

```

Isso e outras coisas podem aparecer pra você em algum momento! 
Por enquanto é isso! 
Em breve quero escrever mais textos sobre isso e complementar este! 
Brinque no JSBIN 

https://jsbin.com/fuxazuniqo/1/edit?js,console

https://www.youtube.com/watch?v=n5uiJr-v0KQ
https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Working_with_Objects
What's HTML language?
Tags: html
Published: 2021-11-09 15:50:53

HTML is a word from hyper text markup language, it's not programming language it's markup or coding language html work by tage for example
&lt;html&gt; &lt;/html&gt; ...
and HTML5 is not other language it's version 5 of html and we say HTML5 from 
hyper text markup language version 5.
HTML is the basic of anysite.
Setting up Anonymous User to Embed Kibana Dashboard to Your Application
Tags: kibana, dashboard, anonymous
Published: 2021-11-10 08:48:29

Recent works let introduce me some challenges in putting Kibana Dashboard into applications, in secured manner. Hence writing up a quick post for setting it up securely.

### Elasticsearch

Enable X-pack Security

```
xpack.security.enabled: true
```

Create credentials for internal communication of Elastic stack:

```
/usr/share/elasticsearch/bin/elasticsearch-setup-password auto
```

Random passwords will be created for you:

```
Changed password for user apm_system
PASSWORD apm_system = some-random-password

Changed password for user kibana_system
PASSWORD kibana_system = some-random-password

Changed password for user kibana
PASSWORD kibana = some-random-password

Changed password for user logstash_system
PASSWORD logstash_system = some-random-password

Changed password for user beats_system
PASSWORD beats_system = some-random-password

Changed password for user remote_monitoring_user
PASSWORD remote_monitoring_user = some-random-password

Changed password for user elastic
PASSWORD elastic = some-random-password
```

### Kibana

Configure your `kibana.yml`:

```
elasticsearch.username: "kibana"
elasticsearch.password: "<password-generated>"
```

Create encryption keys for your Kibana:

```
/usr/share/kibana/bin/kibana-encryption-keys generate
```

Then update your `kibana.yml` using the keys given in previous step:

```
xpack.encryptedSavedObjects.encryptionKey: some-random-key
xpack.reporting.encryptionKey: some-random-key
xpack.security.encryptionKey: some-random-key
xpack.reporting.capture.browser.chromium.disableSandbox: true
```

Then start your Kibana.

Now, you will prompt to enter username and password - use the `elastic` user in above steps.

Once you are logged in, go to Stack Management. 

Create a new role named as `embed_dashboard`. Then:

1. Give privileges to indices you want to expose to public. 
2. Create a kibana privilege as well, by Add a new one. Choose targeted space - i used Default. Then in feature privilege, grant access to read only for Dashboard and Visualise Library.

Now save.

Once you are done, go create a new user, assign the role as `embed_dashboard` role.

Then, back to `kibana.yml`, append the config as following:

```
xpack.security.authc.providers:
  anonymous.anonymous1:
    order: 0
    session:
      idleTimeout: 1Y
    credentials:
       username: "anon"
       password: "SomeStrongPasswordIGuess"
  basic.basic1:
    order: 1
```

Then restart your Kibana.

By now, you should be able to have a Public URL for your dashboard and be able to embed the dashboard in any of your applications.

Photo by <a href="https://unsplash.com/@chrisliverani?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Chris Liverani</a> on <a href="https://unsplash.com/s/photos/dashboard?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Day 56/100 Bugs and Errors
Tags: 100daysofcode, programming, challenge, motivation
Published: 2021-11-10 15:31:40

"Debugging is twice as hard as writing the code in the first place. Therefore, if you write the code as cleverly as possible, you are, by definition, not smart enough to debug it."

– Brian Kernighan and P.J. Plauger, The Elements of Programming Style

![bugs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b21xayyjkj0eeirw6gfb.png)
Elementor Abschnitte, Spalten, Margin & Padding erklärt - WordPress Layout Anleitung
Tags: wordpress, elementor, pagebuilder
Published: 2021-11-12 15:05:59

---
title: Elementor Abschnitte, Spalten, Margin & Padding erklärt - WordPress Layout Anleitung
published: true
date: 2021-11-10 14:53:58 UTC
tags: WordPress,elementor,pagebuilder
canonical_url: https://bloggerpilot.com/elementor-layout/
---

![Elementor Sections, Columns, Margin & Padding erklärt - WordPress Layout Anleitung](https://bloggerpilot.com/wp-content/uploads/2021/11/elementor-layout.png)

Wenn du Elementor Sections noch nicht kennst, ist es vielleicht schwer zu verstehen, was diese Einstellungen eigentlich bewirken. In diesem Blog-Beitrag werden wir sie dir anhand von Beispielen erklären.

Der Original-Artikel erschien auf [Elementor Abschnitte, Spalten, Margin & Padding erklärt - WordPress Layout Anleitung](https://bloggerpilot.com/elementor-layout/).

Wenn du Elementor noch nicht kennst, ist es ein Page Builder Plugin, das von vielen WordPress Plugin-Entwicklern verwendet wird. Es ist ein leichtgewichtiges Plugin, das dir viel Flexibilität bei der Erstellung von Layouts bietet, indem es dir verschiedene Layout-Optionen zur Verfügung stellt, mit denen du dein Layout schnell mit Steuerelementen wie Spalten, Abständen, Rändern, Auffüllungen, Anordnung usw. anpassen kannst. Außerdem ist es sehr einfach zu bedienen.
Listen to the Season 7 Premiere of DevDiscuss: "Deeply Human Stories in Software with The Changelog"
Tags: discuss, podcast
Published: 2021-11-10 17:52:18

---
title: Listen to the Season 7 Premiere of DevDiscuss: "Deeply Human Stories in Software with The Changelog"
published: true
description: Listen to S7E1 of DevDiscuss!
tags: discuss, podcast 
series: DevDiscuss Season 7
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4db01vlo54hl311zoddy.png
---

## We're super excited to share that season 7 of the DevDiscuss podcast is finally here — and you can listen right here on DEV!

{% podcast https://dev.to/devdiscuss/s7-e1-deeply-human-stories-in-software-with-the-changelog %}

_Quick refresher since it's been a minute — DevDiscuss is the first original podcast from DEV all about the burning topics that impact all our lives as developers._

**Episode Info** 

In the season premiere, we’re talking about deeply human stories in software — with some pretty fantastic guests from [The Changelog](https://changelog.com/).

### Hosts:
- @ben — Creator of DEV & Co-Founder of Forem
- @coffeecraftcode — Developer Advocate at Forem
  
### Guests: 
- [Adam Stacoviak](https://twitter.com/adamstac), Founder and Editor-in-Chief of Changelog Media.
- [Jerod Santo](https://twitter.com/jerodsanto), Managing Editor of Changelog Media

Let us know your thoughts on this show in the comments below — or on Twitter ([@thepracticaldev](https://twitter.com/thepracticaldev) ).

![Speakers](https://media.giphy.com/media/qZelsWAXfWpAA/giphy.gif?cid=ecf05e47ddu6jql6tkj8kvdmj4z5ofal65l38f235ruuinlo&rid=giphy.gif&ct=g)

---

_You can [follow DevDiscuss](dev.to/devdiscuss) to get episode notifications and listen right in your feed_ — or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx). 

## Quick Listening Links
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s7-e1-deeply-human-stories-in-software-with-the-changelog/id1513053883?i=1000541361862)
- [Spotify](https://open.spotify.com/show/4Jae2mPUqx0XnGychucsE4)
- [Google](https://podcasts.google.com/feed/aHR0cHM6Ly9mZWVkcy5kZXZwb2RzLmRldi9kZXZkaXNjdXNzX3BvZGNhc3QueG1s/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZkaXNjdXNzLzUw?sa=X&ved=0CAQQkfYCahcKEwjQzIevrY70AhUAAAAAHQAAAAAQCg)
- [Listen Notes](https://www.listennotes.com/podcasts/devdiscuss/s7e1-deeply-human-stories-in-zND98OeCPQg/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevDiscuss-p1324596/?topicId=167643015)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods Site](http://devpods.herokuapp.com/podcasts/devdiscuss/episodes/228)

---
_Acknowledgements_ 
- _@levisharpe for producing & mixing the show_
- _Our season seven sponsors: [Microsoft](https://www.microsoft.com/en-us/dev-community/Event/Register?eventId=DevDiscussPodcast_o7nllI4cp4Vg&ocid=aid3038582), [New Relic](https://developer.newrelic.com/), & [Vultr](ource=devdiscuss&utm_medium=syndication&utm_campaign=october21)!_
aa
Published: 2021-11-20 02:57:48

Puppeteer and the Lighthouse API (you can see the complete code here).
```javascript
var s = "JavaScript syntax highlighting";
alert(s);
```
 
```python
s = "Python syntax highlighting"
print s
```
 
```
No language indicated, so no syntax highlighting. 
But let's throw in a <b>tag</b>.
```
async function captureReport() {
  // Puppeteer initialization
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Start user flow
  const flow = await lighthouse.startFlow(page, { name: 'My User Flow' });

  // ... Caputure reports here ...

  // End user flow
  return flow.generateReport();
}
Within
Audit and Fix a Markdown Page
Tags: opensource, c, beginners, webdev
Published: 2021-11-20 05:05:12

My recent contribution to an open source project is the improvement of the online course notes for the C language course (IPC144) in my college. The online note uses Docusaurus, and I had the opportunity to study Docusaurus a while back, so this contribution deepened my knowledge.

### Issue
The issue I worked on was the Audit and Fix a Markdown Page. Each chapter of that online note consists of its own md file. My professor file an issue with a list of all of the md files and 19 tasks for improving each page. I selected the "output-functions" page in it, filed a new issue, and worked on the tasks.

### Checking display
I set everything up locally and checked for problems with the display. Such as: typo, markdown, the Light and Dark mode, and the desktop and mobile.

### Using tools for improving the quality of web pages
As my professor mentioned, I tried running the page through Lighthouse and Web Hint.
I had never used them, but it was easy to check with those tools.
Lighthouse checked if the page is optimized for each item, and showed me there is no alt tag for images. After I added alt, performance, accessibility, best practices, SEO scores went up.
![lighthouse](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zhep3fujffzdjtucze6m.png)
When I checked the page using Web Hint, I got 55 hints, but nothing about the page I was working on.
![Web Hint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rgtft6p0kwlmig1z9hwq.JPG)
 
### Fixing Frontmatter for the page
Markdown documents can use the Markdown FrontMatter metadata fields, enclosed by a line --- on either side.([Docusaurus official page](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-docs#markdown-frontmatter))
I added the FrontMatter below:
```
---
sidebar_position: 5
title: Output Functions
id: output-functions
slug: modularity/output-functions
desctiption: This chapter on output functions is about invoking standard library procedures to stream data to users
---
```

### Reviewed from other students
I made a PR, other students reviewed it and gave me some requests.
They were:
- Removing extra space I missed in the md file
- Adding a hyperlink to a related page
- Adding Description to the page(as a Frontmatter)
- Adding backticks to function names

### Conclusion
I thought there were a lot of tasks, but it wasn't too difficult. It was good to be able to contribute to the project that actually used Docusaurus and to experience the improvement of the page using Lighthouse and Web Hint. This time, my professor listed the tasks and provided them to us, which made the contribution easier, and I would like to use the task when working on external issues myself in the future.

### :link:Links
[IPC144 Project repo](https://github.com/Seneca-ICTOER/IPC144) | [Issue](https://github.com/Seneca-ICTOER/IPC144/issues/87) | [Pull Request](https://github.com/Seneca-ICTOER/IPC144/pull/100)

(Photo by Glenn Carstens-Peters on Unsplash)