teleren/devto huggingface dataset:
Roadmap to Become a Web Developer
Tags: webdev, programming, beginners, roadmap
Published: 2023-02-21 22:57:37

Halo semua, dalam postingan pertama saya kali ini saya ingin berbagi tentang peta jalan sebagai web developer.

##1. Apa itu Web developer

pertama kita bahas mengenai web developer itu sendiri,
web developer menurut wikipedia adalah seorang programmer yang mengembangkan aplikasi web menggunakan model client-server. karena perkembangan teknologi dan dibutuhkannya spesialis web developer juga terbagi menjadi tiga:
1. sisi klien atau sebutan nya **Pengembang Front-end**
2. sisi server atau sebutan nya **Pengembang Back-end**
3. sisi Kedua-dua nya atau sebutannya **Pengembang Full-stack**

## 2. Front-end Developer

pengembang front-end web development menurut wikipedia adalah pengembang antarmuka pengguna grafis dari sebuah situs web. melalui penggunaan HTML, CSS dan JavaScript, sehingga pengguna dapat melihat dan beriterkasi dengan situs web tersebut. hal yang harus pelajari yaitu:
a. Bahasa Pemprogramman
- HTML adalah bahasa markup standar untuk dokument yang dirancang untuk tampilan di browser
- CSS adalah bahasa style sheet yang di gunakan untuk menjelaskan presentasi dokumen yang di tulis dalam bahasa markup seperti HTML
- JS adalah bahsa pemprograman yang merupakan salah satu teknologi inti dari Wold Wide Web selain HTML dan CSS
b. Framework
- framewok css adalah kerangaka kerja yang memudahkan developer dalam mendesain website dari sisi client. dengan kumpulan komponen-kompen siap pakai seperti layout, Navigasi, Inputs, dan yang lainnya.
Framework yang bisa gunakan seperti Bootstrap, Bulma, Tailwind, etc.
- Framework JS adalah kerangka kerja yang memudahkan developer dalam mengembangkan website dari sisi client. dengan kumpulan kode-kode yang siap pakai seperti Dom manipulasi, State Management, Routing, Etc. Framework yang bisa digunakan seperti React, Vue, Angular, etc.

## 3. Back-end Developer

Pengembang Back-end adalah pemegembang yang berkerja disisi server yang berfokus pada logika fungsional, basis data, dll, yang tidak bisa dilihat disitus web. Hal yang harus di pelajari yaitu:
a. Bahasa pemprograman seperti: Node, Python, PHP, etc.
b. Frameworok untuk disisi server seperti: Express, Django, Laravel, etc.
c. Database yang bisa digunakan seperti: MongoDB, PostgreSQl, MySQL, etc.

## 4. Alat Manajemen

Setelah kita tahu sedikit mengenai arti dari web developer dan jenisnya langkah selanjutnya adalah untuk persiapan seperti:
**a. Manajemen Proyek**
alat manajemen proyek adalah sebuah perangkat lunak yang membantu untuk mengelola proyek agar berjalan secara efesien dan efektif. contohnya seperto: Trello, Jira, Redmine,dll.

**b. Manajemen Proyek Kode**
alat manajemen proyek kode adalah sebuah perangkat lunak yang membantu untuk pengendali versi kode proyek. Contohnya seperti: Githhub. Gitlab, Bitcbucket, dll.

Kesimpulan
1. kita bisa belajar semua, telah menemukan passion atau ketertaikan selnjutnya untuk fokus
berikut refrensi detailnya [](https://roadmap.sh/frontend)
2. agar tapih dalam dokumntasimengnukana trello dan git
[](https://www.geeksforgeeks.org/roadmap-to-become-a-web-developer-in-2022/)
¿Que es Git?
Published: 2023-02-21 22:49:30

> Git fue creado por la necesidad de mantener el primer proyecto de Linus Torvalds "Linux".>

Git es un sistema de control de versiones o software que nos sirve para registrar el historial de desarrollo de algún proyecto como aplicaciones, software, correcciones, actualizaciones, etc.

**¿Qué es un repositorio?**
Es todo proyecto seguido que tiene un historial de git en el cual se registran sus cambios.

**¿Qué es un commit?**
Es un cambio registrado, aquí el desarrollador describe porque hizo el cambio.

**¿Por qué en Git todo se trabaja por ramas, ramificacioes o bifurcaciones?**
Rama principal llamada master, donde esta el proyecto que sale al publico. Es una copia exacta del proyecto pero de forma aislada, si todo va bien, unificas esa rama con el proyecto principal

**¿Qué es un clon?**
Es una copia exacta del proyecto o repositorio, cada equipo de desarrolladores tiene una copia exacta del proyecto(clon).

**¿Qué es un fork?**
Es un proyecto diferente que se crea a través de otro, por ejemplos las distribuciones de linux

**Características de Git:**
- Git no necesita conectarse a un servidor local, ni internet.
- Es mas rápido.
- Cada desarrollador tiene un backup del proyecto lo cual lo hace seguro.
- Cuenta con ramas y fusiones para no malograr la rama principal.
- Git se asegura de que no haya datos corruptos.

**Trabajo con Git basico**
*. Empezamos creando un repositorio codificando:
```
git init
```
*. En caso ya cuentes con un proyecto, para que se clone el proyecto y se cree una copia en el equipo local.
```
git clone
```
*. Empezar con el proyecto y mandar la descripcion de los cambios del repositorio a través de commits. Cada commit debe representar algo especifico, una nueva funcionalidad, correciones.
Los cambios del desarrollador van al Stagin area, con el comando:
```
git add`
```
*. Finalmente mandas el siguiente comando:
```
git commit
```
SRE book notes: Dealing with Interrupts
Tags: sre, books
Published: 2023-02-21 22:48:45

These are the notes from [Chapter 29: Dealing with Interrupts](https://sre.google/sre-book/dealing-with-interrupts/) from the book [Site Reliability Engineering, How Google Runs Production Systems](https://sre.google/sre-book/table-of-contents/).

This is a post of a series. The previous post can be seen here:

{% embed https://dev.to/bitmaybewise/sre-book-notes-reliable-product-launches-at-scale-3hab %}

---

> Any complex system is as imperfect as its creators. In managing the operational load created by these systems, remember that its creators are also imperfect machines.

![PEBKAC: problem exists between keyboard and chair](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/srkqsbqry6ixifrymlwb.jpg)

---

> Polarizing time means that when a person comes into work each day, they should know if they’re doing just project work or just interrupts. Polarizing their time in this way means they get to concentrate for longer periods of time on the task at hand. They don’t get stressed out because they’re being roped into tasks that drag them away from the work they’re supposed to be doing.

---

> For any given class of interrupt, if the volume of interrupts is too high for one person, add another person.

---

> A person should never be expected to be on-call and also make progress on projects (or anything else with a high context switching cost).

---

> Sometimes when a person isn’t on interrupts, the team receives an interrupt that the person is uniquely qualified to handle. While ideally this scenario should never happen, it sometimes does. You should work to make such occurrences rare.

---

If you liked this post, consider subscribing to my newsletter [Bit Maybe Wise](http://bitmaybewise.com/).

You can also follow me on [Twitter](https://twitter.com/bitmaybewise) and [Mastodon](https://mastodon.online/@bitmaybewise).

---

Photo by [Brett Jordan](https://unsplash.com/@brett_jordan) on Unsplash
Linode + DEV Hackathon
Tags: linodehackathon
Published: 2023-02-21 22:33:09

## What I built
Mimi is an expense journaling and budgeting application.


### Category Submission:
Wacky Wildcard


### App Link
-Not deployed

### Screenshots

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

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




### Description
Main objective of this app is to help the user keep track of the expenses made by them and thereby helping them to analyse their spending pattern and further optimize it.
 

### Link to Source Code
UI: https://github.com/DivyaPankajaNanda/mimi.git
API: https://github.com/DivyaPankajaNanda/mimiapi.git


### Permissive License
MIT

## Background
I believe that money should be spent on this that really provide us happiness, therefore to figure out what type of expense porvides us immense pleasure we need to track it.


### How I built it
UI - SvelteKit,Bootstrap(initial setup wip)
API - Spring boot (initial basic setup)
DB - PostgreSql


### Additional Resources/Info
Day 699 : Fingers
Tags: hiphop, code, coding, lifelongdev
Published: 2023-02-21 22:25:29

_liner notes_:
- Professional : Pretty good day. Had a couple of meetings and was able to refactor a project and update some of the code. It had a dependency on jQuery that I was able to remove. Tested it and everything seems to still work like before. It probably helped that I created something similar when I was playing around with the API previously.

- Personal : Last night I tried to come up with a workaround for the roadblock that I ran into with saving settings in side project without using a database. I think I may have found a way, but I've never done it before. It'll be interesting and probably helpful to know for possible future projects. A good thing to have in my back pocket to use just in case I come across this again. Ended the night watching "Vinland Saga".

![A field filled with what looks like dandelions with some trees in the distance at sunset in Skagit Valley, WA, United States](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39xybcoxvlmi7dmesyk0.jpg)

Going to roll up my sleeves and trying to see if I can code up the possible solution for my issue. There's quite a bit of unknowns happening all at once. I'll see how this goes. Fingers crossed.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube o1v7mGD14lo %}
Understanding DOM Nodes: A Comprehensive Guide with Example
Tags: dom, html, javascript, react
Published: 2023-02-21 21:53:42

The Document Object Model (DOM) is a tree-like structure that represents the HTML elements in a web page. The nodes of the DOM are the individual elements, attributes, and text within the HTML code. Understanding the different types of DOM nodes is crucial when working with JavaScript and manipulating web pages.

Here are the different types of nodes in the DOM:

1. **Document Node**: This is the top-level node in the DOM and represents the entire HTML document.
2. **Element Node**: This represents an HTML element, such as `<div>`, `<p>`, `<ul>`, etc.
3. **Attribute Node**: This represents an attribute of an HTML element, such as `id`, `class`, `src`, etc.
4. **Text Node**: This represents the actual text within an HTML element.

Let's take a look at an example to see how these nodes work together. Consider the following HTML code:

```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Node Example</title>
  </head>
  <body>
    <div id="myDiv">
      <p>Hello World!</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
      </ul>
    </div>
  </body>
</html>

```
In this example, we have several different types of DOM nodes:

The document node is represented by the entire HTML code.

- The `<div>` element is an example of an element node, with an attribute node for `id`.
- The `<p>` element is another example of an element node, with a text node containing the actual text "Hello World!".
- The `<ul>` element is an element node, with two child element nodes for the list items.
- The `<li>` elements are also element nodes, with text nodes containing the text "Item 1" and "Item 2", respectively.

Understanding the different types of DOM nodes and how they relate to each other is essential when manipulating web pages with JavaScript. By accessing and manipulating these nodes, we can dynamically update the content and appearance of web pages to create interactive and engaging user experiences.

To see a working example of DOM Nodes in action, check out my GitHub repository: https://github.com/SidraMaq/DOM/tree/main/DOM-Nodes.

Thanks for reading! I hope you found this post informative and helpful. If you have any questions or feedback, please feel free to leave a comment below. And don't forget to check out my GitHub repository for working example of DOM Nodes.
Getting Hooked on React
Published: 2023-02-21 21:47:55

Hooks are special functions. Hooks CAN ONLY be called inside the body of a function component. 

Rules of Hooks:

Thou shalt call the Hook within the scope of a react application. 
Thou shalt call your hooks from the toop level of the component. (this error would call if you were to try to call your hook in a conditional. it doesn't like this because calling it within a conditional means that you could simply not call it in a specific case.)  

useState - enables us to hook into the component's state
useId - enables us to store a unique identifier on the component instance

You should not mess with or try to update state. 

In javascript, you could do this, but it is a big "no-no" in react. 

React.useRef(initial value) -- if you leave this blank, it is undefined.

React states shouldn't be mutated, react refs are meant to be mutated.  

Refs are an object to what is being referred. So, if you are calling a funciton using useRef, you have to slide in the refName.current.value to get to the value you want. Otherwise, you aren't getting past the {current: "whatever"}
Scalable Data Analysis with Postgres and Apache AGE: A Case Study part 2
Published: 2023-02-21 21:35:58

**Benefits **
Data Solutions Inc. gained a lot of benefits by using Apache AGE. One of the most important was the special search language called GQL, which made it easier and more natural for them to find and analyze their data.

By adding Apache AGE to their Postgres database, they could handle more data and search it faster. This meant they could keep up with the growing amount of information from their customers and not be overwhelmed by it.

The new system also gave them better insights into what their customers were doing, which allowed them to make faster and better decisions. By having a more scalable and powerful system, they could get the information they needed more quickly and easily.

**Summary**
Data Solutions Inc. was able to handle their growing amount of data by adding Apache AGE to their existing Postgres database. This combination allowed them to store and analyze large amounts of complex data more efficiently without having to change their entire system.

The new system was powerful and flexible, which meant they could manage their data more effectively and easily. By doing this, they were able to keep up with the growing amount of information from their customers and make better decisions faster.
[Apache-Age:-https://age.apache.org/](https://age.apache.org/)
[GitHub:-https://github.com/apache/age ](https://github.com/apache/age)
Scalable Data Analysis with Postgres and Apache AGE: A Case Study part 1
Published: 2023-02-21 21:33:15

**Introduction**
In today's data-driven business environment, Data Solutions Inc. had a growing need to store and analyze large amounts of data generated by their business operations. They were already using Postgres as their primary database, but they found that it was becoming increasingly difficult to scale their Postgres-based solution to handle the growing volume of data.

**Challenge**
Data Solutions Inc. had a problem. They had too much information to handle from their customers, and their current database, which was built using Postgres, was not able to keep up with the growing amount of data. In other words, they were getting too much information and their database couldn't handle it all.

**Solution**

To solve the problem of handling large volumes of complex data, Data Solutions Inc. used Apache AGE. This is a special kind of database that can store and search graphs of data, which is perfect for businesses like Data Solutions Inc. that deal with lots of complex information.

They added Apache AGE to their existing Postgres database, which helped them to handle more data and search it faster. By doing this, they didn't have to change their entire system and could still use the same tools they were used to.

Apache AGE also comes with a special way of searching the data, called GQL. It's like using a search engine to find information on the internet, but for their data. This made it easier and more natural for Data Solutions Inc. to find what they needed.

Overall, by adding Apache AGE to their Postgres database, Data Solutions Inc. could handle more complex data and find the information they needed more quickly and easily.


[click for part 2](https://dev.to/moiz697/scalable-data-analysis-with-postgres-and-apache-age-a-case-study-part-2-mo6)

[Apache-Age:-https://age.apache.org/](https://age.apache.org/)
[GitHub:-https://github.com/apache/age ](https://github.com/apache/age)
AWS Cloud Quest: DNS Study Note
Tags: aws
Published: 2023-02-21 21:25:22

This is the DIY challenge of the DNS in AWS Cloud Quest.


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



### DIY Steps:
1. Create a CNAME record `database.internal.news.org`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6beb28jpblmcmbnygwry.png)
🚀 Mobile App deployment automation 📱
Tags: mobile, flutter, github, timetomarket
Published: 2023-02-21 21:21:57

## 🎩 Intro
As a I was working in my company, something struck me. All of our app where shipping in a CI/CD pipeline except one thing... mobile app 😱

What you'll learn on this post is a common and easy way to automate mobile app deployment.

## ❓ The 'Why'
When one of my colleagues showed me the process to deliver a mobile app (On 🤖 Play Store and 🍎 Apple Store), I was shocked by the number of step to do for deployment of a new version.
I though we were back to the 80s when we had to connect to servers to deploy an application 😵

So i was thinking to myself, as somebody ever thought of automated these ?
As i was searching for a way to do it, I found this tool named... [Fastlane](https://fastlane.tools) 🤩

## 🔨 Fastlane
I discovered this on a blog post on medium when searching for a solution.
I learned that it was a toolbox for all thing related to mobile app (Screenshot, certificate, etc...) and the deployment was the feature that i was most interested in.
It took me two days to know how it work, implement it and... WOILA !!!

I was able to automate the deployment of new features on our mobile app without manual repetitive task.
It was like magic 🧙

## 📹 Demo (< 13')
As a like to say : Talk is cheap, show me the code. And I will do more than that... A demonstration in a video which demonstrate the tool in action 💪 !!!

{% youtube sw3K7vkgDVc %}

## 💸 Gains
- A lot of repetitive tasks performed by my colleagues were eliminated ♻️
- Time saved could be invested in creating & delivering new features at a regular pace ✨
- Drastic Time to market enhancement 📉

## 📑 Resources
{% embed https://dev.to/optnc/better-collab-flows-w-git-conventional-commits-49j8 %}
{% embed https://github.com/lschaeffer313/domaine-nc-mobile %}
Domina la Fuerza de Azure OpenAI con Microsoft Learn: Libera tu Jedi Interior
Tags: azure, microsoftcloud, openai, spanish
Published: 2023-02-21 21:12:58

Open AI y Microsoft son dos de las empresas más importantes en el mundo de la tecnología. Ambas tienen un enfoque en la inteligencia artificial y el aprendizaje automático, y han colaborado en numerosos proyectos para avanzar en este campo.

Open AI fue fundada en 2015 por un grupo de inversores y tecnólogos, incluyendo a Elon Musk y Sam Altman. Su objetivo es desarrollar y promover inteligencia artificial segura y beneficiosa para la humanidad. La organización sin fines de lucro ha creado algunos de los modelos de inteligencia artificial más avanzados del mundo, como GPT-3 (Generative Pre-trained Transformer 3), una plataforma de aprendizaje automático que puede generar texto humano como si fuera escrito por una persona.

Por otro lado, Microsoft es una empresa líder en tecnología que se centra en crear software y hardware. Fundada en 1975 por Bill Gates y Paul Allen, Microsoft es conocida por su sistema operativo Windows, así como por sus programas de ofimática como Word, Excel y PowerPoint. Además, Microsoft ha invertido en inteligencia artificial y aprendizaje automático durante años y ha desarrollado sus propias plataformas y herramientas, como Azure Machine Learning y Microsoft Cognitive Services.

Open AI y Microsoft comenzaron a colaborar en 2016 cuando Microsoft invirtió $1 mil millones en la empresa de investigación. Desde entonces, Microsoft ha empezado a implementar GPT-3 en sus soluciones de Word, PowerPoint, Outlook, Power Apps, Power Automate, Teams y últimamente integrándolo con Bing.

![AzureOpenAI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvyuttv9xgqqlmn4hu1e.png)
Hace unos días, mientras comenzaba mis merecidas vacaciones (_La foto de portada muestra a mis hijas durante nuestras vacaciones_), Microsoft anunció[ la disponibilidad general de Azure OpenAI Service](bit.ly/OpenAIPiova). El servicio Azure OpenAI proporciona acceso mediante la API REST a los eficaces modelos de lenguaje de OpenAI, incluidas las series de modelos GPT-3, Codex y Embeddings. Estos modelos se pueden adaptar fácilmente a tareas específicas como la generación de contenido, el resumen, la búsqueda semántica y la traducción de lenguaje natural a código. Los usuarios pueden acceder al servicio a través de las API REST, el SDK de Python o por la interfaz basada en web en Azure OpenAI Studio.

- 
**Te comparto el [enlace](bit.ly/AzureOpenAI-Training-MicrosoftLearn) para que empieces a conocer este mundo de Azure OpenAI.**

- 
**También te comparto el [enlace](bit.ly/azureopenAIDocsPiova) con la documentación oficial de Microsoft.**

Sin dudas que han logrado avances significativos en el campo de la inteligencia artificial y la colaboración entre estas empresas seguirá impulsando el desarrollo y el avance de la AI en el futuro.

¡Gracias por leer!
Adapter Design Pattern in PHP
Tags: php, oop, interface
Published: 2023-02-21 21:10:01

An useful use of interface

The Interface file GatewayInterface.php:
```php
interface PaymentGatewayInterface
{
    public function processPayment(float $amount): bool;
}

class PayPalGateway
{
    public function sendPayment(float $amount): bool
    {
        // Send payment using PayPal API
        return true;
    }
}

class StripeGateway
{
    public function charge(float $amount): bool
    {
        // Charge payment using Stripe API
        return true;
    }
}
```


Creating StripePaymentAdapter.php:
```php
class PayPalAdapter implements PaymentGatewayInterface
{
    private $payPalGateway;

    public function __construct(PayPalGateway $payPalGateway)
    {
        $this->payPalGateway = $payPalGateway;
    }

    public function processPayment(float $amount): bool
    {
        return $this->payPalGateway->sendPayment($amount);
    }
}
```

Creating PaypalAdapter.php:
```php
class StripeAdapter implements PaymentGatewayInterface
{
    private $stripeGateway;

    public function __construct(StripeGateway $stripeGateway)
    {
        $this->stripeGateway = $stripeGateway;
    }

    public function processPayment(float $amount): bool
    {
        return $this->stripeGateway->charge($amount);
    }
}
```

Now multiple type of payments can be done by calling the Interface:
```php
$payPalGateway = new PayPalGateway();
$payPalAdapter = new PayPalAdapter($payPalGateway);
$payPalAdapter->processPayment(100.00); //Here PayPalAdapter's processPayment method is being called

$stripeGateway = new StripeGateway();
$stripeAdapter = new StripeAdapter($stripeGateway);
$stripeAdapter->processPayment(300.00); //Here StripeAdapter's processPayment method is being called
```