teleren/devto huggingface dataset:
How to Create Azure Resource (e.g. Linux VM) using the Quickest Method
Published: 2023-07-02 17:23:05

The blog post is about using the fastest or quickest way of creating a Virtual Machine. The fastest way to create a Virtual Machine in Azure is by using a QuickStart Custom Template.

**WHY USING A QUICKSTART CUSTOM TEMPLATE**
The purpose is to automate deploying resources with Azure Resource Manager templates in a single, coordinated operation and in faster way to meet demand and load balancing issues. QuickStart template is a community contributed template or from a template stored in a template spec. 

Follow the steps below to create one.
a. Search for a **custom template** and select **Deploy a Custom template.**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au9qrxuoruak8c2ldf8h.png)
b. Click **Create a linux Virtual Machine** and select **QuickStart template** as shown below.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5tyf2yvz94jtat1k7gfk.png)
c. Being a faster way of creating VM, all project name details and parameters will be automatically given, as seen below, 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp2a5d7tlh3eqz4tkz3i.png)
Only the resource group will be inputted or recreated, Linux version and authentication type can be changed. You can also choose to edit template and parameters by clicking edit template. Click Next: review and create.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk8ucytzmjg8cqu9jkrm.png)
d. When Deployment is complete as seen below, go to resource to see the overview of the QuickStart created VM called (SimpleLinuxVM).

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm72hvq1hn9u6n5n5igt.png)
The VM Overview below

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

e. Open PowerShell and ssh into the VM using the IP address and password, the capture below shows I have successfully connected to the VM.

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



**Conclusion:** The above description above shows I have successfully used QuickStart template to create a VM using the faster method.
Open Discussion: How to Train Active English for Work Interviews and Environments - Alone?
Tags: discuss, productivity, work, interview
Published: 2023-07-02 17:03:00

Hello fellow Devs,

I'm currently preparing for a job interview and I'm in a bit of a dilemma. I need to ensure my active English skills, both speaking and writing, are up to par with what's expected in the professional world. However, the challenge that I'm facing is **learning alone, and therefore, receiving little to no feedback, which I believe is crucial for progress**.

As it stands, my English proficiency seems to be in a good place. I have some scores to show you for context:

![my EnglishScore test result from British Council has achieved CEFR C1 in 2022](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4psoqnqs0fghoumd5apr.png)

![my EF test result is Advanced C1-C2 in 2023](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z843xyb849lg1s7aii45.jpg)

My fluency in English, as gauged by the EnglishScore test from British Council, is at CEFR C1 as of 2022, and according to the EF test, I'm at an Advanced C1-C2 level in 2023. These results may appear reassuring on paper. Yet, I've noticed a disparity between these scores and my active English skills. The latter still needs some honing, which feels a bit contradictory given the so-called 'Advanced' level.

This discrepancy is the primary reason for reaching out to this wonderful community. I'm interested in hearing your thoughts, strategies, and experiences. 

Here are some areas where I would appreciate your insights:

1. **Learning Strategy**: What are the best strategies for learning English, specifically for professional environments, on your own? Any specific methods that worked for you or someone you know?

2. **Feedback Mechanism**: How can I get constructive feedback when I'm learning by myself? Are there any reliable online tools, communities, or techniques you can recommend?

3. **Common Mistakes**: What are some common mistakes non-native speakers make while speaking or writing English, particularly in professional settings? How can one avoid these?

4. **Active English**: Active English skills seem to be different from general English skills. In your experience, what are some effective ways to specifically improve active English?

5. **Cultural Nuances**: How important are cultural nuances when communicating in English in a professional environment? Any tips on how to understand and use them?

6. **Interview Preparation**: For those who've had job interviews in English, what tips can you share? How can I use my English skills effectively to communicate my competencies and fit for the role?

7. **Continuous Improvement**: Once I start working, how can I continue improving my English while juggling my job responsibilities?

I'd appreciate if you could share your thoughts, experiences, and any resources you found helpful. My goal with this open discussion is to not only benefit myself but also help others in a similar situation. Looking forward to hearing your thoughts and advice!

Thanks in advance for your help and participation in this discussion.

> [ranggakd](https://beacons.ai/ranggakd)
How to allow all domains for Image nextjs config?
Tags: webdev, nextjs, solution, javascript
Published: 2023-07-02 16:33:31

Learn how to configure next js image hosting and prevent invalid src prop error.
Open next.config.js and add it in the ”images” config

```
module.exports = {
  images: {
    domains: ['res.cloudinary.com'],
  },
};
```

```
images: {
      remotePatterns: [
         {
            protocol: "https",
            hostname: "avatars.githubusercontent.com",
            port: "",
            pathname: "/**",
         },
      ],
   },
```
you Can also see another solution in [medCode Blogs](https://www.medcode.dev/blogs/allow-all-domains-images-nextjs-config)
Introducing: 11ty with reasonable defaults
Tags: showdev, webdev, productivity
Published: 2023-07-02 16:31:01

# TL;DR

Initialize your 11ty projects with reasonable defaults: 

1. `npm install -g yo`
1. `npm install -g generator-eleventy-reasonable`
1. `yo eleventy-reasonable`

https://github.com/winstonpuckett/generator-eleventy-reasonable

# What and why is this?

I had a problem. I love 11ty. I've used it for years now to create most of my front end. It's simple and powerful and I can always get better performance than with most other frameworks.

As I've used it, I've developed a toolchain around it. 11ty is bare-bones (as it should be). I found that I install the same HTML/CSS/JS minification in every new project I create. I always have a similar file structure and similar needs to extend 11ty. In the past I've forked my projects or copy/pasted when I create a new one, but this approach bothered me.

I wanted to abstract all the complexity of setting up a new 11ty project.

# What features are included?

- Runs `npm install` to always start with the latest versions of dependencies
- Minification on build through [html-minifier](https://www.npmjs.com/package/html-minifier), [clean-css](https://www.npmjs.com/package/clean-css), and [terser](https://www.npmjs.com/package/terser).
- Sets up standard 11ty folder structure (_includes for include-able files and _assets for files to copy to the server).
- Sets up a default nunjucks template and wires in a default CSS file.
- Default template has a number of good meta tag suggestions and sets up an emoji favicon (something I've appreciated).
- Default CSS file is in dark mode in case you're coding late at night.
- With only a few short files, it's easy to see what needs to be updated and removed.
- Sets up a build and serve script in the package.json file, so you can run `npm run serve` to work with the project.

# Can I use this for commercial projects?

Absolutely! The project is under an MIT license. And if you're using it for anything cool, I'd love to hear about it!

# Where can I find out more info?

- Source Code: https://github.com/winstonpuckett/generator-eleventy-reasonable
- NPM: https://www.npmjs.com/package/generator-eleventy-reasonable
Comando SELECT em SQL
Tags: database, postgres, sql, beginners
Published: 2023-07-02 16:20:17

Um comando SQL SELECT é fundamental na consulta de dados em um banco de dados. Permite aos utilizadores obter informações específicas de uma ou mais tabelas com base em critérios definidos. Embora possa parecer assustador à primeira vista, compreender as noções básicas do comando SELECT pode melhorar bastante a sua capacidade de manipular e analisar dados de forma eficiente.

É importante notar que o comando SELECT, por si só, não modifica o banco de dados; em vez disso, busca dados para análise ou apresentação posterior. Ao dominar este comando, terá à sua disposição uma ferramenta poderosa para extrair informações valiosas do seu banco de dados.

Vamos explorar os vários componentes e casos de utilização do comando SQL SELECT, dando-lhe os conhecimentos necessários para navegar no banco de dados.
___
## Entendendo o comando SELECT
O comando SELECT é usado para obter dados de uma tabela do banco de dados. Pense nele como uma ferramenta poderosa que lhe permite fazer perguntas sobre seus dados e obter respostas significativas. Com o SELECT, você pode especificar quais colunas serão recuperadas, filtrar os dados com base em determinadas condições e até mesmo classificar os resultados.

### Selecionando todas as colunas

```
SELECT * FROM table_name;
```
Busca todas as colunas da tabela especificada, permitindo que você veja o conjunto de dados completo. É uma ótima maneira de explorar a estrutura de sua tabela e obter uma visão geral dos dados disponíveis.

### Selecionando colunas específicas

```
SELECT nome_da_coluna1, nome_da_coluna2 FROM nome_da_tabela;
```
O comando anterior mostra apenas as colunas do seu interesse, facilitando o foco nas informações relevantes.

____
## Conclusão
O objetivo com o texto pequeno é para facilitar o entendimento.
Dito isso...
Parabéns! Você acabou de aprender o conceito básico do comando SELECT no SQL. Ao usar o SELECT, você pode obter dados específicos de uma tabela de banco de dados. Lembre-se de que as possibilidades do SELECT são vastas, permitindo que você realize consultas e análises mais avançadas. Agora que você tem uma base sólida, sinta-se à vontade para explorar mais e desbloquear todo o potencial do SQL!

Boas consultas!

## Leitura Adicional
- [SELECT DISTINCT](https://dev.to/diegodmitry/comando-select-distinct-1c9n-temp-slug-5054433)
Apa itu Bahasa Pemrograman
Tags: indonesia
Published: 2023-07-02 14:36:20

## Bahasa Pemrograman itu Bahasa

Bahasa itu sistem komunikasi. Dipakai oleh manusia untuk berinteraksi, memahami satu sama lain.

## Apa itu Bahasa Pemrograman

Bahasa pemrograman itu **sistem komunikasi yang dipakai manusia untuk berinteraksi dengan komputer**, memahami satu sama lain.

Bahasa pemrograman itu dipakai untuk membuat program. Orang yang membuat program namanya programmer.

Bahasa pemrograman memungkinkan programmer untuk mengekspresikan algoritma dan logika dalam bentuk yang dapat dipahami oleh mesin.

## Bahasa Pemrograman Punya Aturan

Sama seperti bahasa manusia, bahasa pemrograman punya "kosa kata" dan "tata bahasa", biasanya dikenal dengan sintaksis (Inggris: syntax).

Setiap bahasa pemrograman memiliki aturan dan aturan sintaksisnya sendiri yang harus diikuti oleh programmer.

Bahasa pemrograman juga menyediakan berbagai macam konstruksi dan fasilitas, seperti variabel, tipe data, operasi matematika, struktur kontrol, dan banyak lagi. Dengan menggunakan bahasa pemrograman, programmer dapat mengendalikan perilaku dan kinerja komputer untuk mencapai tujuan yang diinginkan.

## Contoh Bahasa Pemrograman

Beberapa bahasa pemrograman populer termasuk:
- Python
- Java
- C++
- JavaScript
- Ruby
- PHP
- dan banyak lagi.

Masing-masing bahasa pemrograman memiliki fitur, kegunaan, dan kelebihan yang berbeda-beda, yang membuat mereka lebih cocok untuk tujuan tertentu.

## Kesimpulan

Secara umum, bahasa pemrograman itu alat yang digunakan untuk mengkomunikasikan instruksi kepada komputer.

Dengan bahasa pemrograman, programmer bisa membuat perangkat lunak (software) yang kompleks, dan melakukan berbagai tugas dari pemrosesan data sederhana hingga kecerdasan buatan (AI; Artificial Intelligence) dan analisis data yang canggih.

---

Masih punya pertanyaan terkait bahasa pemrograman? Kirim di kolom komentar ya. Terima kasih sudah membaca!
Compromissos de um SRE em um grupo de trabalho
Tags: sre, beginners, devops
Published: 2023-07-02 16:04:07



> **Importante**: o texto a seguir é fruto de um exercício de criação de um time de SRE, onde os times de desenvolvedores seriam os responsáveis por criar e manter a infraestrutura e aplicações.
> Não existe um modelo certo ou errado, nem considere esse texto como uma verdade absoluta.
>  Boa parte desse material foi baseado nos livros: [The Site Reliability Workbook](https://sre.google/workbook/table-of-contents/) e [Site Reliability Engineering](https://sre.google/sre-book/table-of-contents/). Você poderá encontrar frases ou partes do livros, nesse texto e nos outros.


## Compromissos com os times

A principal missão da função de SRE no grupo de Squads é capacitar as equipes de desenvolvimento de produtos com ferramentas e processos para maximizar a confiabilidade e a resiliência das aplicações que suportam o ecossistema desses produtos.

### Compartilhando as expectativas

Definir as expectativas certas é fundamental para cumprir os prazos e a conclusão da tarefa. Para isso, trabalhamos de acordo com os seguintes princípios:

-   Enfatizamos que os proprietários das aplicações, não os SREs, são diretamente responsáveis por fazer alterações em um aplicativo.
-   O envolvimento com a equipe de SRE é para benefício de todas as Squads. Qualquer nova automação ou ferramental deve melhorar as ferramentas comuns e as automações usadas em todo grupo e evitando o desenvolvimento de soluções únicas
-   Os SREs devem dar à equipe de desenvolvedores um alerta sobre quaisquer novos processos que a empresa possa introduzir.
-   As mudanças propostas devem ser priorizadas conjuntamente pelos desenvolvedores e pelos SREs. Os desenvolvedores devem comprometer-se a dedicar uma porcentagem razoável de tempo de engenharia para corrigir e prevenir os pontos que estão quebrando a confiabilidade.
-   Os SREs não são engenheiros de operações tradicionais. Os proprietários das aplicações são responsáveis por desenvolver e suportar suas aplicações.
-   Parte do trabalho de SRE se concentra na entrega de ferramentas: para monitoramento, alertas, implementações, melhores práticas e listas de verificação.
    
### Preocupações gerais

O SRE se preocupa com vários aspectos de um serviço, dentre esses aspectos podemos destacar os seguintes:

-   Instrumentação, métricas e monitoramento
-   Resposta de emergência
-   Planejamento de capacidade
-   Desempenho: disponibilidade, latência e eficiência
    
### Definindo o envolvimento

Os SREs podem trabalham com equipes de desenvolvimento de produtos de acordo com os seguintes modelos de envolvimento diferentes:

-   Part Time, em projetos pontuais e/ou de forma temporária
-   Full time, com dedicação quase exclusiva
-   Suporte alternativo
    
Quando as equipes abordam os SREs para obter envolvimento, um dos fatores que é considerado ao priorizar uma solicitação é se um compromisso conjunto pode ajudar a reduzir a lista de pendências das Squads.

Confira os [Modelos de engajamentos de um SRE com um grupo de trabalho](https://dev.to/rafaelonline/modelos-de-engajamentos-de-um-sre-com-um-grupo-de-trabalho-11b2)
Training ChatGPT with local data to create your own chat bot!
Tags: chatgpt, ai, python
Published: 2023-07-02 15:58:04

Using OpenAI’s ChatGPT, we can train a language model using our own local/custom data, thats scoped toward our own needs or use cases. 

I am using a Mac/MacOS, but you can also use Windows or Linux. 

**Install Python**
You need to make sure you have Python installed, and at least version 3.0+. Head over to following link and download python installer: [](https://www.python.org/downloads). You can also open a terminal and run `python3 --version` to verify you have the correct version of python installed. 

**Upgrade PIP**
`python3 -m pip install -U pip`

**Installing Libraries**
```
pip3 install openai
pip install gpt_index==0.4.24
pip3 install PyPDF2
pip3 install gradio
```

**Get OpenAI key**
[](https://platform.openai.com/account/api-keys)

**Prep Data**
Create a new directory named ‘docs’ anywhere you like and put PDF, TXT or CSV files inside it. You can add multiple files if you like but remember that more data you add, more the tokens will be used. Free accounts are given 18$ worth of tokens to use.

**Script**

```
from gpt_index import SimpleDirectoryReader, GPTListIndex, GPTSimpleVectorIndex, LLMPredictor, PromptHelper
from langchain import OpenAI
import gradio as gr
import sys
import os

os.environ["OPENAI_API_KEY"] = 'ApiGoesHere'

def construct_index(directory_path):
    max_input_size = 4096
    num_outputs = 512
    max_chunk_overlap = 20
    chunk_size_limit = 600

    prompt_helper = PromptHelper(max_input_size, num_outputs, max_chunk_overlap, chunk_size_limit=chunk_size_limit)

    llm_predictor = LLMPredictor(llm=OpenAI(temperature=0.7, model_name="text-davinci-003", max_tokens=num_outputs))

    documents = SimpleDirectoryReader(directory_path).load_data()

    index = GPTSimpleVectorIndex(documents, llm_predictor=llm_predictor, prompt_helper=prompt_helper)

    index.save_to_disk('index.json')

    return index

def chatbot(input_text):
    index = GPTSimpleVectorIndex.load_from_disk('index.json')
    response = index.query(input_text, response_mode="compact")
    return response.response

iface = gr.Interface(fn=chatbot,
                     inputs=gr.inputs.Textbox(lines=7, label="Enter your text"),
                     outputs="text",
                     title="My AI Chatbot")

index = construct_index("docs")
iface.launch(share=True)

```

Save as app.py 

Open Terminal and run following command

`python3 app.py`

This will start training. This might take some time based on how much data you have fed to it. Once done, it will output a link where you can test the responses using simple UI. It outputs local URL: http://127.0.0.1:7860

You can open this in any browser and start testing your custom trained chatbot. The port number above might be different for you.

To train on more or different data, you can close using CTRL + C and change files and then run the python file again.

If this article was helpful, maybe consider a clap or follow me back.
How to fetch data before rendering in React JS
Tags: react, javascript, api, webdev
Published: 2023-07-02 15:38:35

In React.js, you can fetch data before mounting and components using various techniques, in order to display components require the fetched data before being displayed, the data must be fetched before mount, mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component: constructor() getDerivedStateFromProps() render().

![React lifecycle](https://i0.wp.com/reactjsguru.com/wp-content/uploads/2022/06/Screenshot-360.webp?w=1440&ssl=1)

Here are a few common approaches depending on whether your react app is class based or functional:

## Functional Components App

A functional component in a React app is a JavaScript function that returns JSX (JavaScript XML) to define the structure and behavior of a user interface element. It is a simpler and more lightweight alternative to class components. Functional components allow you to write reusable and stateless code by using hooks like useState and useEffect to manage component state and lifecycle effects. They are widely used in modern React development due to their simplicity and readability.

If your app is functional components based, use the `useEffect` hook, and fetch your data within the hook which is executed, before mount.

```Javascript
import React, { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await fetch('your-api-endpoint');
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  // Render the component using the fetched data
  return <div>{/* Render your component with the fetched data */}</div>;
}
```

## Class-Based React App

For class components, you can also use async/await inside the componentDidMount method to fetch data, but it won't fetch the data before rendering, instead it will trigger a re-render, note that the method componentWillMount has been deprecated. the only way to fetch data before rendering is using the useEffect hook. Nevertheless using componentDidMount can be ideal for certain cases.

```JSX
import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      this.setState({ data: jsonData });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    const { data } = this.state;

    return (
      <div>
        {/* Render your component using the fetched data */}
      </div>
    );
  }
}

export default MyComponent;
```
Funções de trabalho de UI/UX e seus títulos explicados
Tags: ui, ux, design, webdev
Published: 2023-07-02 15:34:00

Sentindo-se confuso sobre as diferentes funções de UX/UI existentes? Vamos tentar explicar para você!

# Product Designer
 Visionários colaborativos que alinham as necessidades do usuário, metas de negócios e viabilidade técnica. Eles projetam fluxos de usuário e desenvolvem interfaces que buscam o equilíbrio perfeito entre estética e funcionalidade.

# UX/UI Designer
Masterminds do design centrado no usuário, combinando estética e funcionalidade, criando uma experiência digital perfeita. Da pesquisa do usuário à criação de maquetes de alta fidelidade, eles transformam ideias em design visualmente atraente e fácil de usar.

# UX Researcher
Exploradores curiosos que desvendam o comportamento e as motivações do usuário por meio de entrevistas, pesquisas e testes de usabilidade. Eles revelam informações valiosas para orientar as decisões de design e melhorar a experiência do usuário.

# UX/UI Manager
Líderes experientes que supervisionam o processo de design UX/UI, orientam designers e conduzem iniciativas estratégicas de design. Eles garantem a excelência do design e colaboram com equipes multifuncionais para oferecer experiências de usuário excepcionais.

# Design Engineer
Construtores de pontes com experiência em tecnologia entre design e desenvolvimento. Eles possuem habilidades de codificação e trabalham em estreita colaboração com designers e desenvolvedores para traduzir designs em interfaces funcionais.

# Design System Manager
Guardiões da consistência e escalabilidade do design. Eles estabelecem e mantêm sistemas de design, diretrizes e bibliotecas de componentes, capacitando as equipes a criar designs coesos e eficientes.

EI, NÃO ESQUEÇA!!
Curtir e compartilhar 
está apenas 0 MTS, aproveite
a oferta por tempo limitado ;)
[Luzídio Rafael](https://luzidiolinks.netlify.app/)
Hi DEV fellows 🥳❗
Tags: contest, career, news, design
Published: 2023-07-02 15:12:31

Hi DEV fellows! I don't know if it is polite but I would like to share something with you. Go Daddy is promoting an event and it is on the dribbble.com. I cannot participate but I am pretty sure that you fellows can. Design a logo to they 10 years .online. Well, my cover image its just an unfinished glance. I think is fine for you to show up!