teleren/devto huggingface dataset:
Introduction to Web Development: A Beginner's Guide
Tags: webdev, firstpost, beginners
Published: 2023-05-09 00:58:35

Hello, Dev.to community! I'm excited to be writing my first blog post here. Today, I want to give an introduction to web development for beginners who are interested in learning more about this field.

Web development is the process of building websites and web applications. It involves several technologies, including HTML, CSS, and JavaScript, which work together to create a user-friendly experience on the web. Here are some basic concepts to get you started:

**1. HTML: The Building Blocks of the Web**

HTML (Hypertext Markup Language) is the standard markup language for creating web pages. It provides the structure and content of a website, including headings, paragraphs, images, and links. HTML is a crucial part of web development, and every web developer should have a good understanding of it.

**2.  CSS: Making Web Pages Look Good**

CSS (Cascading Style Sheets) is a language used for styling web pages. It allows web developers to control the layout, colors, fonts, and other visual aspects of a website. CSS is used in conjunction with HTML to create attractive and engaging web pages.

**3.  JavaScript: Adding Interactivity to Web Pages**

JavaScript is a programming language used for adding interactivity to web pages. With JavaScript, web developers can create dynamic effects like dropdown menus, popups, and animations. JavaScript can also be used for more complex applications like games and data visualizations.

**4.  Frameworks and Libraries: Making Development Easier**

Frameworks and libraries are collections of pre-written code that can be used to speed up development time. Popular frameworks and libraries in the web development community include React, Angular, and Vue. These tools can help web developers create complex applications more quickly and efficiently.

**5.  Web Hosting: Putting Your Site Online**

Once you've built your website, you need to put it online so that people can access it. Web hosting services like AWS, Azure, and DigitalOcean provide the infrastructure needed to host your website and make it available to the world.

**Conclusion**

Web development can seem overwhelming at first, but by learning the basics of HTML, CSS, and JavaScript, you can start building your own web pages and applications. There are also many resources available online, including tutorials, courses, and forums, to help you along the way. I hope this beginner's guide has been helpful in introducing you to the world of web development. Stay tuned for more articles on this topic!
Setting Up Your Full-Stack Development Environment with Python, Django, and React
Tags: django, react, webdevlopment, setupenvironmen
Published: 2023-05-09 03:46:38

Welcome to a comprehensive guide on setting up your full-stack development environment with Python, Django, and React. This article is designed to provide step-by-step instructions to budding programmers and experienced developers alike. Let's dive right in!

**Step 1: Installing Python and Django**

Python is a versatile language that's great for back-end web development. Django, a Python-based framework, makes it easy to build robust and scalable web applications. If you haven't already installed these tools, here's how to do it.

* Visit the official Python website to download and install the latest stable version of Python. As of September 2021, the current stable release is Python 3.9.x.
    
* We recommend using a virtual environment for your Python projects to avoid dependency conflicts. Python's built-in `venv` module makes this a breeze. Here's how to create a new virtual environment:
    

```bash
python3 -m venv myenv
```

* To activate the virtual environment:
    
    * On Windows: `myenv\Scripts\activate`
        
    * On Unix or MacOS: `source myenv/bin/activate`
        
* With your virtual environment activated, install Django using pip, Python's package manager:
    

```plaintext
pip install django
```

**Step 2: Creating a Django Project**

Now that we have Django installed, let's create a new Django project:

```plaintext
django-admin startproject ProgrammersPost
```

You can replace "ProgrammersPost" with your preferred project name.

**Step 3: Installing Node.js and npm**

Node.js is a runtime that allows you to run JavaScript on your server, while npm is a package manager for JavaScript. To install these:

* Visit the official Node.js website to download and install Node.js and npm. As of September 2021, Node.js 14.x is the current LTS version.
    
* Verify your installation by running the following commands in your terminal:
    

```plaintext
node -v
npm -v
```

**Step 4: Creating a React Application**

React is a popular JavaScript library for building user interfaces, especially single-page applications. Follow these steps to create a new React application:

* First, install Create React App, a tool that sets up a modern web app by running one command:
    

```plaintext
npm install -g create-react-app
```

* Next, create a new React application:
    

```plaintext
npx create-react-app programmerspost-client
```

Replace "programmerspost-client" with your preferred app name.

And voilà! You have now set up a full-stack development environment with Python, Django, and React. With these powerful tools at your disposal, you're ready to build scalable and efficient web applications. Stay tuned for more tutorials on developing with Python, Django, and React!
100 Days React
Tags: react, 100daysofcode, learning, codenewbie
Published: 2023-05-09 03:31:28

Halo Dev, ini adalah post pertamaku di Dev.to, aku harap disini aku bisa lebih berkembang lagi dengan sekumpulan orang hebat di dalamnya.

> if you see this post, i need your support to learn react, please help me 🙂

## Background

Aku sekarang ada di umur 22, sebagai seorang developer yang aktif belajar dan masih di bangku kuliah. Aku belum memiliki pekerjaan tetap, saat ini aku ada di posisi sebagai Quality engineer. Walau demikian, sekarang aku sedang kembali belajar front-end web dev yang pernah tertunda selama beberapa waktu. Sebelumnya selama 2021 sampai akhir 2022 lalu aku bergelut di bidang back-end engineer dan cloud computing. 2023 ini aku kembali bergelut dengan front-end dev dan lebih memilihnya dibanding back-end dan cloud computing karena ternyata aku lebih senang untuk menyajikan aplikasi yang langsung berinteraksi dengan user. Oleh karenanya, aku kembali memilih untuk belajar front-end. 

**Aku menargetkan belajar react selama 100 hari ke depan karena aku harus memiliki pekerjaan dengan gaji yang mumpuni sebelum wisuda selanjutnya atau setidaknya sebelum Oktober.**

## The goal

secara spesifik aku sedang mengincar sebuah jabatan full-time di sebuah company, atau setidaknya divisi frontend entah itu di jogjakarta atau di jakarta. Aku sedang mengharapkan sebuah tempat di mana aku bisa mencari ilmu lebih banyak lagi dan bisa bekerja dengan tim secara langsung. other specifics:

- Front-end dev menggunakan react, sebagai sebuah framework yang memang aku sedang sukai
- gaji yang mumpuni
- remote memiliki nilai lebih

## Ekspektasi harian

Ini adalah pertama kali aku mencoba 100 days challenge. Jadi sepertinya aku harus mengerahkan energi ekstra untuk menjaga konsistensiku dalam berkembang. Ekspektasinya:

- setiap hari aku akan membuat sebuah project, halaman, atau react component
- setiap yang aku buat akan memiliki github repo, atau sebuah commit git yang telah dipush ke github
- setiap hari aku akan mencatat dan mendokumentasikan apa yang telah aku buat di notion, di bagian 100 Days challenge React. Jika itu adalah sebuah project, aku akan mempostingnya di dev.to
- di hari liburku, aku akan membaca setidaknya sebuah halaman medium atau menggunkan berlatih menjawab inteveiw question selama 25 menit per hari (1 pomodoro)

> Karena aku sudah menulis ini, maka aku harus menyelesaikannya. Mari bekerja, dan itu lebih baik bukan?
Starting my journey into Public Learning
Tags: beginners, learning, programming
Published: 2023-05-09 02:23:02

## Hello There!
This "blog page", or whatever it's called, will serve as my start to public learning

## But what is Public Learning?
According the the ~2 articles I've read on the topic (I know, I'm practically a genius now), it consists of:

- Making your work publicly accessible
- Welcoming feedback and criticism 
- Participating in anything and everything

[(Topics taken from Sudheer's article)](https://grow-self.com/learning-in-public/)

I'll probably end up using this to talk about the way I do things, the way I think, ect., and less on the topic of what I'm learning. However, I think either topic will suit me fine.

See you around!

_And of course, my GitHub is on my profile. Check it out!_
Solucionando problemas no hackerRank: Somando e retornando a Solve Me First.
Published: 2023-05-09 00:59:17

Neste artigo, vamos explicar como resolver o problema do hackerRank: SolveMeFirst. Primeiramente, o código fornecido não contém a operação de soma necessária para resolver o problema.

O código deve ser atualizado da seguinte forma:

```
function solveMeFirst(a, b) {
  return a + b;


}
```

Neste exemplo, estamos definindo a função solveMeFirst que recebe dois parâmetros, a e b, e retorna a soma desses dois parâmetros. Para mostrar o resultado no terminal, basta chamar a função passando os valores apropriados de a e b, como em:



Function solveMeFirst(7, 3); // output: 10

Também é possível armazenar os valores de a e b em variáveis e passá-las como argumentos para a função:

let a = 7;
let b = 3;

Function solveMeFirst(a, b); // output: 10

Portanto, a solução correta para o problema é simples e direta, sem a necessidade de declarar variáveis adicionais. A função solveMeFirst recebe dois valores, soma-os e retorna o resultado.
Does react build command automatically put all files inside public folder to inside build folder?
Tags: react, node, webpack, javascript
Published: 2023-05-09 00:46:18

**Yes**, by default, when you run `npm run build` , the create-react-app build process will copy all files in the public folder to the build folder when creating a production build. This includes any HTML files, images, or other static assets that are placed in the public folder.
Resolvendo problemas no hackerRank: Contando CamelCases
Tags: javascript, beginners, programming
Published: 2023-05-09 00:35:16

Olá, seja bem vindo a mais um Resolvendo problemas no HackerRank: No caso de hoje, iremos percorrer todos os valores de uma função declarada e analisar se estes tem camelCase, caso sim, iremos contá-los. Vejamos mais informações com a explicação e sua resolução.

**CamelCase -**

Há uma sequência de palavras no CamelCase como uma sequência de letras,`s`, tendo as seguintes propriedades:

- É uma concatenação de uma ou mais palavras que consistem em letras inglesas.
- Todas as letras da primeira palavra são minúsculas .
- Para cada uma das palavras subsequentes, a primeira letra é maiúscula e as demais letras são minúsculas.

Vamos determinar o número de valores de `s`.

Vejamos um exemplo:

s = oneTwoTree, tem 3 palavras em inglês logo nosso contador irá percorrer `s` e retornar 3 como a quantidade exata de CamelCases. Agora vejamos como resolver isso em Javascript em nosso algoritmo.

```
function camelcase(s) {
    // Write your code here
  let count = 1;
  
  for ( let letters of s){
    if(letters == letters.toUpperCase()){
      count++
    }
  }
  return count
}
```
 
Neste código, nós declaramos um contador `count`,com início 1. E criamos um laço de repetição `for`que irá percorrer o parâmetro da função `camelcas`. Onde declaramos uma variável letters que recebe `s`, se essa variável for igual a UpperCase, ou seja se dentro desse parâmetro tiver alguma letra em camelCase, iremos adicionar +1. Depois retornaremos a variável `count`.

O resultado será:

```
saveChangesInTheEditor

input: 5
```

Assim, concluímos mais um _Resolvendo problemas no HackerRank:_ até a próxima.
NVIDIA GPUs Performace Comparison (value per 1$)
Tags: machinelearning, python, datascience
Published: 2023-05-09 00:04:51

[Data Source](https://en.wikipedia.org/wiki/List_of_Nvidia_graphics_processing_units#GeForce_30_series)
[Code](https://github.com/norflin321/ml/blob/main/gpus_comparison.ipynb)
[Result](https://i.imgur.com/LqTnL20.png)

``` Python
import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
import dataframe_image as dfi

plt.rcParams["figure.dpi"] = 300
plt.rcParams["savefig.dpi"] = 300
plt.rcParams["figure.figsize"] = [12, 5]

df = pd.DataFrame()
df['name'] = ['GeForce RTX 4090', 'GeForce RTX 4080', 'GeForce RTX 4070 Ti', 'GeForce RTX 4070', 'GeForce RTX 3090 Ti', 'GeForce RTX 3090', 'GeForce RTX 3080 Ti', 'GeForce RTX 3080', 'GeForce RTX 3070 Ti', 'GeForce RTX 3070', 'GeForce RTX 3060 Ti', 'GeForce RTX 3060']
df['release_date'] = ['October 12, 2022', 'November 16, 2022', 'January 5, 2023', 'April 13, 2023', 'March 29, 2022', 'September 24, 2020', 'June 3, 2021', 'January 27, 2022', 'June 10, 2021', 'October 29, 2020', 'October 27, 2022', 'September 1, 2021']
df['price'] = [2007.58, 1441.61, 1226.36, 875.47, 1368.88, 1328.24, 1177.12, 900.77, 910.68, 591.89, 610.55, 511.45]
df['tdp_watts'] = [450, 320, 285, 200, 450, 350, 350, 350, 290, 220, 200, 170]
df['ray_traycing_tflops'] = [191, 112.7, 92.7, None, 79.9, 71.1, 68.2, 61.3, 43.5, 40.6, 32.4, 25]
df['tensor_compute_tflops'] = [292, 172, 142, None, 269.1, 235.08, 228.6, 180.6, 154.8, 141.31, 109.7, 75.7]
df['half_precision_tflops'] = [73.1, 43.0, 35.5, 22.6, 33.5, 29.38, 28.06, 22.6, 19.35, 17.66, 13.70, 9.46]
df['double_precision_tflops'] = [1.142, 0.672, 0.554, 0.353, 0.524, 0.459, 0.438, 0.353, 0.302, 0.276, 0.214, 0.148]
df['single_precision_tflops'] = [73.1, 43.0, 35.5, 22.6, 33.5, 29.28, 28.57, 22.6, 19.35, 17.66, 13.72, 9.46]
df['fillrate_gts'] = [1290.2, 761.5, 626.4, 455.4, 524.2, 457.6, 438.5, 352.8, 302.36, 276.0, 214.3, 147.8]
df['fillrate_gps'] = [443.5, 280.6, 208.8, 158.4, 174.7, 156.2, 153.5, 131.0, 151.18, 144.0, 112.8, 63.4]
df['clock_speed_mhz'] = [2230, 2210, 2310, 1920, 1560, 1395, 1365, 1260, 1575, 1500, 1410, 1320]

for column in df.columns[3:]:
    df[column] = df['price'] / df[column]
    
df['tdp_watts'] = df['tdp_watts'] * -1
df = df.sort_values(by=['release_date'], ascending=True)
df['mean'] = df[df.columns[3:]].mean(axis=1)

def pretty_panda(x):
    return (df.style
                .background_gradient()
                .set_properties(**{'font-size': '10pt'})
                .format(precision=2)
                .set_caption("NVIDIA GPUs Performace Comparison (value per 1$)")
                .set_table_styles([
                    {'selector': 'thead', 'props': 'text-transform: uppercase;'},
                    {'selector': 'caption', 'props': 'font-size: 20px'}
                ]))

df = pretty_panda(df)
df
```
Create a select2 input with alpinejs and livewire
Tags: javascript, livewire, alpine, laravel
Published: 2023-05-08 23:57:38

In this small article i will show you how to implement a select2 input using [Alpine.js](https://alpinejs.dev/) and [Livewire](https://laravel-livewire.com/) without any needs for **JQuery** 

So first of all we will use library called [Tom Select](https://tom-select.js.org/) this is an alternative one for the original one [select2](https://select2.org/) this one is written in native **javascript** so there is no need for **JQuery** anymore 

After that create a new **blade** file inside the **components** directory for example `select2.blade.php`
Then add this bunch of code 

```js
@props(['multiple' => false])

<div {{ $attributes }} wire:ignore x-data="{
    value: @entangle($attributes->wire('model')),
    init(){
        let input = new TomSelect(this.$refs.select, {
            onChange: (value) => this.value = value,
            items: this.value
        });
    }
}">
    <select x-ref="select" {{ $multiple? 'multiple' : '' }}  x-model="value">
        {{ $slot }}
    </select>
</div>
```

At the end you could now easily use it from your **livewire** component like this
```html
<x-select2 wire:model="permissions">
    <option value="create-users">Create Users</option>
    <option value="edit-users">Edit Users</option>
</x-select2>
``` 

> Note: don't forget to include the **cdn** files

```html
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script> 
```

Here is the full code on [Github](https://gist.github.com/jojomak13/9a05f06501372298c95ddca11c248d77)
Why I love to use AWS Amplify on my React application?
Tags: amplify, serverless
Published: 2023-05-08 23:47:19


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

As a Full-Stack Developer, building a robust and scalable React application can be a challenging task, especially when it comes to setting up and managing the backend infrastructure. Fortunately, Amazon Web Services (AWS) has provided a solution to this problem in the form of Amplify.

Amplify is a development platform that provides a set of tools and services that simplify the process of building, deploying, and managing cloud-powered applications. It offers a wide range of features, including authentication, data storage, analytics, and much more.

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

In this blog post, I will be sharing why I love to use Amplify to create my React applications.

## Easy setup and configuration
One of the major reasons I love using Amplify is its ease of setup and configuration. Amplify provides a CLI tool that enables developers to quickly set up a new project and configure the necessary services. With just a few commands, I can easily set up authentication, data storage, and other essential services for my React application.

## Seamless integration with React
Another reason why I love using Amplify is its seamless integration with React. Amplify provides a set of React components that enable me to quickly and easily integrate backend services into my React application. These components handle the necessary authentication, data fetching, and other operations, allowing me to focus on building the front-end components.

## Scalability and flexibility
Amplify is designed to be scalable and flexible, allowing developers to easily adjust to changing business requirements. It offers a range of services that can be easily configured and scaled as needed, enabling developers to build applications that can handle any amount of traffic and data.

## Strong security features
Amplify provides a range of security features that help protect applications from potential security threats. These features include authentication, authorization, and data encryption. With Amplify, I can be confident that my application and data are secure.

## Cost-effective
Finally, I love using Amplify because it is cost-effective. Amplify offers a range of pricing options that allow developers to pay only for the services they use. This makes it easy for developers to build and deploy applications without having to worry about high infrastructure costs.

In conclusion, Amplify is an excellent development platform for building scalable and robust React applications. Its ease of setup and configuration, seamless integration with React, scalability and flexibility, strong security features, and cost-effectiveness make it a perfect choice for developers.
Gift Card UI
Tags: codepen
Published: 2023-05-08 23:44:36

<p>A recreation of this "Gift Card" Dribbble shot by Chuan²: <a href="https://dribbble.com/shots/2045026-Gift-Card" target="_blank">https://dribbble.com/shots/2045026-Gift-Card</a></p>

<p>Works best in Chrome (and browsers that support clip-path).</p>

{% codepen https://codepen.io/davidkpiano/pen/VLmxGb %}
Modern Cloud Workflow with Pebl - Part 4
Tags: pebl, devops, cloud, infrastructure
Published: 2023-05-08 22:49:35

In part 3 we explored adding object store capabilities with an intuitive file system interface.

In part 4 we are going to look at adding scheduled tasks to our application.

## Decorating Scheduled Tasks

With pebl scheduled tasks are created with a python decorator placed on the function that you want to run at a regular interval:

```python
import pebl

@pebl.cron("task", "@hourly")
def task():
  import time
  print(" -- task running at:", time.time())
```

The first argument to the decorator is a unique identifier provided by you. Pebl ensures that there's only one scheduled task ever registered for each identifier, meaning that updates & redeploys behave as expected.

The second argument is the interval, and currently only two values are supported, `@hourly` and `@daily`.

## Simple Example

Let's incorporate a scheduled task into our Flask application! And while doing so let's also utilize the object store. We will create a simple daily task that snapshots the current count.

```python
import pebl
import redis
from flask import Flask

conn = redis.Redis(**pebl.redis("redis-1"))

app = Flask(__name__)

@app.route("/")
def root():
  return "Hello!"

@app.route("/counter", methods=["POST"])
def increment():
  conn.incr("counter")
  return "success!"

@app.route("/counter", methods=["GET"])
def get_count():
  curr = conn.get("counter")
  return {
    "counter": int(curr) if curr else 0
  }

@pebl.cron("snapshot", "@hourly")
def counter_snapshot():
  path = f"/snapshots/{int(time.time())}"
  curr = conn.get("counter")
  with open(path, "w") as f:
    f.write(curr.encode())

pebl.service(app, "your-subdomain.pebl.rocks")
```

Give this a try by running it with `pebl run`!

## Conclusion

And with that we have covered four key capabilities provided by the pebl SDK, and also how to run and deploy pebl workloads.
SGBD - midleware de gerenciamento de banco de dados
Tags: programming, beginners, database, sql
Published: 2023-05-08 22:44:11

**SGBD** é o Sistema Gerenciador de Banco de Dados - DBMS do inglês - é a propria aplicação (midleware) de banco.

Alguns termos usados neste domínio são:

 • **_SGBD_**: o midleware (exemplos: postgresql, mariadb, mongodb etc);
 • **_banco de dados_**: recurso criado no SGBD que guardará as entidades de dados (exemplos: db_myapp, db4api etc);
 • **_tabelas_**: entidades de dados (exemplo: campanha, cupons etc)
 • **_estrutura/schema de dados_**: os atributos ou colunas (exemploi: id, titulo, subtitulo etc),
 • **_registros_**: cada "linha" e os dados existentes (exempo: 1, Ano Novo ...;

E isso sem entrar no mérito dos diferentes tipos de tecnologias de bancos (exemplo: relacional, nosql, timeseries etc).
Gráfico CFD e principais métricas visualizadas com ele.
Tags: beginners, agile
Published: 2023-05-08 22:37:33

Veja quais métricas são possíveis de visualizar a partir de um Gráfico CFD.

Lead time: o tempo que determinada tarefa leva para sair de “To Do” até a coluna “Done”. É possível ver a evolução do lead time ao longo do tempo e identificar quais fatores contribuem para aumentá-lo ou reduzi-lo;

Throughput: a quantidade de tarefas concluídas em um determinado período de tempo;

WIP (Work in Progress): a quantidade de tarefas em andamento em cada estágio do processo;


Cycle Time: o tempo médio que uma tarefa para ser concluída, desde o momento em que é iniciada até o momento em que é concluída;

Tempo médio de espera: o tempo médio que uma tarefa fica parada em uma determinada coluna antes de ser movida para a próxima.

Essas métricas são essenciais para avaliar a eficiência do processo de desenvolvimento de software e identificar possíveis melhorias.

Se as curvas descerem ni gráfico CFD significa que existiam itens sendo trabalhados dentro do seu fluxo que voltaram no fluxo ou simplesmente desapareceram, para isso existem diversas abordagens.

O gráfico CFD não costuma trazer respostas, mas fornece dicas valiosas para que você se aprofundar e encontrar a causa raiz de anomalias no fluxo de desenvolvimento do time.