teleren/devto huggingface dataset:
First thoughts about event loop.
Tags: javascript, eventloop, programming
Published: 2023-01-31 14:31:05


Call stack bu js interpreterga script ichidagi functionlarni kuzatib borishni ta'minlaydigan mexanizm. Call stackka qo'shilgan function eng yuqoriga joylashadi, function biror narsani return qilsa yoki scope o'zi tugasa - call stackdan remove qilinadi interpreter tomonidan, oxirgi kirgan function birinchi bo'lib chiqib ketadi, ya'ni eng oxirigi kirgan function birinchi execute bo'ladi, bu LIFO prinsip, "last in, first out". barcha funksiyalar amalga oshirilishadi avval anonymous degan funcksiya yaratiladi interpreter tomonidan, hamma funksiya shuning ichida ishga tushiriladi, agar call stackda umuman funksiya qolmasa, anonymous eng oxirida remove bo'ladi call stackdan.

web apilar browserlar bizga beradigan feature hisoblanadi. masalan biz serverga request jo'natsa va response kelmagunicha javascript kodlarimiz execute bo'lmasdan kutadigan bo'lsak, bu bizni dasturimizni rasvo bo'lishiga sabab bo'ladi. web apini o'zida kodlarni execute qilishimiz mumkin, bu esa browserning o'zida amalga oshiriladi.

yana bir foydalaridan biri, web api C kabli low level tillarda yozilgan bo'ladi, bu esa oddiy js bajara olmaydigan ishlarni browserni o'zida bajarishimizga yordam beradi

ular bizga AJAX so'rovlar yuborishimiz, DOMni manipulyatsiya qilishimiz, geo tracking, lcoal storagega kirish kabi ishlarni bajarishimizda yordam beradi.

web apilar yordamida jsdan tashqarida ham ishlar bajarishimiz mumkin, lekin masalan bizni js kodimiz responsega javob berishi kerak bo'lsa, unda nima qilamiz? aynan hus yerda bizga callback yordamga keladi.

callback orqali browser response kelganidan keyin bizi kodimizni ishga tushirishimizga ruxsat beradi.

callback function o'zi nima? callback bu functionga argument  sifatida berilgan another function. u  asosiy kodimiz ishga tushib bo'lganidan keyin ishga tushadi.

cal back funcsiyalar by default asyncronus emas.

settimeoutni vaqti tugasa ham, u birdan ishga tusha olmaydi. sababi call stack bir vaqtning o'zida faqat bitta ish bajaradi. qachonki call stack empty bo'lsa, o'shanda async kodlar ishga tushishni boshlaydi.

call stackdan farqli o'laroq, callback queue FIFO prinsipiga amal qiladi. first in, first out, ya'ni birinchi ishga tushgan function birinchi amalga oshiriladi.
Don't Let Burnout Hold You Back: The Ultimate Guide to Thriving as a Software Developer
Tags: burnout, softwaredevelopment, mentalhealth, webdev
Published: 2023-01-31 14:26:55

As software developers, we often wear many hats and juggle multiple projects at once. With tight deadlines, long hours, and high levels of stress, it's easy to fall into a pattern of burnout. But it doesn't have to be this way!

In my latest article on Medium, I explore the topic of burnout in the software development industry and provide a guide to beating burnout and thriving as a software developer. From prioritizing self-care to setting boundaries and seeking support, I cover it all.

So if you're feeling overwhelmed and burnt out, head over to Medium and check out my article "Saving the Savvy: How to Beat Burnout and Thrive as a Software Developer".

Let's take control of our well-being and avoid burnout! 💪💻 #burnout #softwaredevelopment #work-life-balance #developer-wellness.

link: https://aaron-janes.medium.com/saving-the-savvy-how-to-beat-burnout-and-thrive-as-a-software-developer-f5a208c6c2c3
Cap XIX: Potenciando la productividad, gestión de la configuración e integración continua, El libro negro del programador. 💻
Tags: productivity, books, spanish, programming
Published: 2023-01-31 14:23:39

## **Potenciando la productividad con la gestión de la configuración e integración continua**

---

> No se trata de trabajar más horas, sino de ser productivos durante el tiempo que estamos trabajando.

---

* Dedicar más horas de las necesarias de manera crónica al trabajo es señal de que existen problemas de organización personal o empresarial.

* El éxito vendrá de la mano del talento, la tecnología, la innovación y la capacidad de reinventarnos a nosotros mismos.

* No se debe pensar en llenar las 8 horas de trabajo diario y huir de la oficina, pensar en cumplir con el objetivo y alcanzar los resultados deseados, pensar en trabajar productivamente.

* Dos conceptos clave: gestión de la configuración del proyecto e integración continua del software.

* Gestión de la configuración: procesos que ayuden a generar código de calidad en cada etapa del desarrollo, por ejemplo, uso de git para control de versiones, gestión de bugs, etc.

* Tener un control granular de versiones del código es fundamental hoy en día en cualquier área de la programación.

* Es super importante establecer las reglas que guiarán al proyecto, como estandarizar los mensajes de commit, tener en claro como hacer pull request al repositorio, como administrar mejor los bugs.

* Invertir tiempo en estas reglas básicas ahorrarán muchos dolores de cabeza en el futuro.

* Detrás de la productividad siempre está el trabajo bien organizado y el saber que hacer.

* Integración continua: es la manera de enterarnos lo antes posible si algo malo pasa con el código, debemos asegurar que la compilación del proyecto este bien y detectar cuando antes si algo falla apra no perjudicar a todo el equipo.

* De esta manera se mejora como desarrollador y nos volvemos mas profesionales.

--- 

Te dejo el link gratuito de [*El libro negro de programador*](https://underpost.net/ir/pdf/cy3/el-libro-negro-del-programador.pdf) por si te intesa leerlo, o dale click a la imagen:


[![libro](https://www.digitalskillsinstitute.com/assets/media/books/5541eba31b4b42b5bb021dc77c70d658-480.jpg)](https://underpost.net/ir/pdf/cy3/el-libro-negro-del-programador.pdf)
I developed a simple but beautiful developer portfolio template using React and Next.js
Tags: javascript, react, nextjs, webdev
Published: 2023-01-31 14:19:58

# Software Developer Folio

## A clean, beautiful and responsive portfolio template for Developers!

![Portfolio Website](https://repository-images.githubusercontent.com/577325623/4f220169-ebd3-4aa6-8e9b-b6b0909b5cd2)

Nearly all the components are dynamic and easy to use! Feel free to use it as-is or personalize it as much as you want.

If you'd like to **contribute** and make this much better for other users, please do.


## Project Covers
✔️ Homepage\
✔️ Expertise\
✔️ Experience\
✔️ Work and Projects\
✔️ Contact

To view a live example, **[click here](https://yesildal.me)**.


## Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

The versions i have used in the project.

```
node@v16.16.0
yarn@1.22.17
git@2.37.3
```

## How To Use 

From your command line and clone.

```bash
# Clone this repository
git clone https://github.com/umutyesildal/yesildal.me-personal-portfolio.git

# Go into the repository
cd yesildal.me-personal-portfolio

# Install dependencies
yarn

# Start a local dev server
yarn dev
```

## Deployment 

For deployment I have used [vercel](https://vercel.app/) and I am pretty happy with it.
```bash
# Build & Development Settings
Framework Preset: Nextjs
Build command: next build
Output directory: default
Install command: yarn
Development command: next
```




## Technologies Used 

- [React](https://reactjs.org/)
- [Next](https://nextjs.org/)
- [gsap](https://greensock.com/gsap/)
Resolvendo problemas no HackerRank: Variação de Positivos e Negativos.
Tags: javascript, programming
Published: 2023-01-31 13:58:47

Com foco em melhorar ainda mais o rendimento e aprendizado em uma linguagem, também exercendo a lógica da programação, nessa nova série de resoluções irei demonstrar como resolvi certos conflitos de lógica: alguns simples, outros que necessitam de mais esforço. 


**Plus Minus**

No episódio de hoje, veremos algo bem interessante.Teremos uma listagem de números dentro de um array, e nele teremos 2 números positivos, 2 negativos e 1 número zero. Nosso objetivo é pegar os valores positivos, negativos e zero, e dividir pelo número de parâmetros na função:


```
arr = [1,1,0,-1,-1]

0.500000
0.333333
0.166667
```

É possível resolver esse desafio de muitas formas. A forma que fiz foi a seguinte:

```
function plusMinus(arr) {
    // Write your code here
    const all = arr.length
    let positive = 0, negative = 0, zero = 0;
    
    for (let i = 0; i < arr.length; i++){
      if (arr[i] > 0) positive++;
      if (arr[i] < 0) negative++;
      if (arr[i] === 0) zero++;   
    }
    let positiveVar = (positive / all).toFixed(6); 
    let negativeVar = (negative / all).toFixed(6);
    let zeroVar = (zero / all).toFixed(6);
  console.log(`${positiveVar}\n ${negativeVar}\n ${zeroVar}`)
}
```

O código acima cria uma variável que vai pegar o comprimento do parâmetro posto no PlusMinus, após isso criasse uma variável que armazenará valores positivos, negativos e zero no futuro, mas que no momento começa em 0.

Após isso se coloca o for e cria um index i que estará ligado diretamente a arr.length que é o parâmetro pra comprimento.


```
if (arr[i] > 0) positive++;
if (arr[i] < 0) negative++;
if (arr[i] === 0) zero++; 
```
Finalizando declara as variáveis de positivo, negativo e zero divididas pelo número de arr.length e com método .toFixed, e chamando elas no console.log.



Existe uma resolução alternativa para resolver essa questão, que consegue adquirir um resultado igual:



```
//codigo alternativo.
    /*let positive = (arr.filter(num => num > 0).length)/arr.length
    let negative = (arr.filter(num => num < 0).length)/arr.length
    let zero = (arr.filter(num => num == 0).length)/arr.length
    console.log(positive.toFixed(6))
    console.log(negative.toFixed(6))
    console.log(zero.toFixed(6))*/
```
Com isso, finalizamos os problemas no HackerRank de hoje. Até a próxima!
Without JQuery only css
Tags: css, html
Published: 2023-01-31 13:57:05

I would like to say only for CSS 

I have posted on code in codepen, I want to css only, without JQuery, It will look like https://www.pagalguy.com/ only for css, not any language like javascript, JQuery [1]: https://codepen.io/Kailashsk/pen/YzjJWxL
Disaster Recovery
Tags: systems, architecture, distributedsystems, beginners
Published: 2023-01-31 13:43:32

In the real world, the systems can be a victim of a cyber-attack or even a natural disaster that can disturb the functionality of the server. In such cases, we need to recover the lost data as much as possible from another location where the data was backed up. Hence comes Disaster Recovery. It replicates the data in an off-premises location that remained intact even after the disaster or was far away from where it couldn’t have been backed up.

The concept of disaster recovery is to keep the data on some secondary locations in case the primary fails or is stuck in a disaster.

## Recovery Time Objective (RTO)

RTO can be defined as an acceptable delay between the service interruption and restoration respectively. It tells us about the acceptable time window for service unavailability.

![Disaster Recovery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xiyewqzims0hymz1czfu.jpg)

## Recovery Point Objective (RPO)

RPO is the acceptable time since the last data recovery point. It tells us about an acceptable loss of data between the last recovery point and service interruption time.

## Strategies for disaster recovery

There are some strategies we can use for disaster recovery.

- **Backup**
Backup is a simple strategy for disaster recovery where we store the data off-site or in a removable drive that is safe from cyber-attacks and such things.

- **Cold site**
The cold site lets us arrange the basic data and infrastructure on a second site.

- **Hot site**
Further, the hot site keeps up the data up to date in the copies which might be time-consuming and expensive, but they make up for that in downtime reduction.

## Why do we need disaster recovery?

- Restoration is fast.
- Downtime is reduced.
- Customer retention is better.
- Damages are limited.
- Interruption is minimized.

{% embed https://github.com/pragyaasapkota/System-Design-Concepts %}

**_I hope this article was helpful to you._**

**_Please don’t forget to follow me!!!_**

**_Any kind of feedback or comment is welcome!!!_**

**_Thank you for your time and support!!!!_**

**_Keep Reading!! Keep Learning!!!_**
10 Must-Take FREE Google Data Science Courses for 2023 🚀🔥
Tags: beginners, programming, tutorial, datascience
Published: 2023-01-31 13:41:49

Many businesses today require Data Science skills, and it is a crucial part of many industries. As time has gone on, businesses have begun to use data science methods to expand their businesses and improve customer satisfaction.

Here are 10 Data Science Courses with Certifications Online for FREE:
### 1. Data Science Foundations
[🔗Link](https://learndigital.withgoogle.com/digitalunlocked/course/data-science-foundations)

### 2. Python Basics for Data Analysis
[🔗Link](https://learndigital.withgoogle.com/digitalunlocked/course/learn-python-basics-for-data-analysis)

### 3. Basics of Machine Learning
[🔗Link](https://learndigital.withgoogle.com/digitalunlocked/course/machine-learning-basics)

### 4. Machine Learning Crash Course
[🔗Link](https://learndigital.withgoogle.com/digitalunlocked/course/machine-learning-crash-course)

### 5. Google Analytics for Beginners
[🔗Link](https://www.classcentral.com/course/google-analytics-for-beginners-98262)

### 6. Google Cloud Computing Foundations: (Networking and Security in Google Cloud)
[🔗Link](https://www.classcentral.com/course/google-cloud-computing-foundations-networking-and-security-in-google-cloud-98572)

### 7. Google Cloud Computing Foundations: Cloud Computing Fundamentals
[🔗Link](https://www.classcentral.com/course/google-cloud-computing-foundations-cloud-computing-fundamentals-98568)

### 8. Google Cloud Computing Foundations: (Data, ML, and AI in Google Cloud)
[🔗Link](https://www.classcentral.com/course/google-cloud-computing-foundations-data-ml-and-ai-in-google-cloud-98571)

### 9. Data Science with Python
[🔗Link](https://learndigital.withgoogle.com/digitalunlocked/course/data-science-with-python)

### 10. Google Analytics for Power Users
[🔗Link](https://www.classcentral.com/course/google-analytics-for-power-users-98264)
when does neco start
Published: 2023-01-31 13:37:12

[https://multischolar.com/neco-timetable/](https://multischolar.com/neco-timetable/#utm_source=backlinks&utm_medium=search&utm_campaign=darry+ring+us&utm_content=Michelle)
https://plaza.rakuten.co.jp/chenlee/diary/202301310000/
https://www.provenexpert.com/neco-when/
https://www.producthunt.com/@necowhen
https://www.divephotoguide.com/user/necowhen/
https://wakelet.com/@necowhen
https://vocal.media/authors/necowhen
https://www.lifeofpix.com/photographers/necowhen/
https://seedandspark.com/user/necowhen
https://rosalind.info/users/necowhen/
http://phillipsservices.net/UserProfile/tabid/43/userId/196688/Default.aspx
https://app.roll20.net/users/11575679/necowhen
https://speakerdeck.com/necowhen
https://social.msdn.microsoft.com/Profile/necowhen
https://camp-fire.jp/profile/necowhen
https://plazapublica.cdmx.gob.mx/profiles/necowhen/activity
https://www.metal-archives.com/users/necowhen
https://storium.com/user/necowhen
https://trabajo.merca20.com/author/necowhen/
https://www.intensedebate.com/people/necowhen
https://www.mifare.net/support/forum/users/necowhen/
https://pinshape.com/users/2564834-necowhen
http://foxsheets.com/UserProfile/tabid/57/userId/119443/Default.aspx
https://www.kompasiana.com/necowhen
https://www.credly.com/users/neco-when/badges
https://www.myminifactory.com/users/necowhen
https://www.sqlservercentral.com/forums/user/necowhen
https://www.longisland.com/profile/necowhen
https://guides.co/a/when-does-neco-sta/
https://myanimelist.net/profile/necowhen
https://www.iheart.com/podcast/269-when-does-neco-start-108100199/
CSS Viewer
Tags: css, design, tooling, webdev
Published: 2023-01-31 13:35:43

Hi,

Before I start, I acknowledge that this tool is an inspiration by [CSS Stats](https://cssstats.com/). Ok, let's jump on it.

## What is CSS Viewer?
The tool used to view the CSS Styles.

Wait a minute. We already have CSS Stats, right?

## How it differs from CSS stats? 🤔
As I mentioned above, I used CSS Stats to run this tool.
If we give the CSS path in CSS Stats, we can get the stats of the particular CSS file. Here we can give the JSON path of the assetsMap of your application. It will list down all the CSS paths. While clicking the particular CSS path you can view the CSS Styles as you want.
## Ok, what is the exact use case to use this application?🧐
Consider this scenario of your application using fingerprinting technology to build the application.

Example:
```javascript
https://my-domain/my-css-{fingerprinted-hash}
```
For every build, the fingerprinted hash will vary.
For example, it may vary from 737jsb77sd236 to dsvyd623t3bdc.
So, in this case, you have to replace the old hash with the new hash to view the recent changes in the CSS Stats. To avoid this confusion, we can use this tool for the requirement of updated CSS stats.

### working:
#### 1. Paste your JSON path:
![initial-flow](https://i.imgur.com/6LwKYUO.png)

### 2. Click the particular CSS Path:
![json-path-flow](https://imgur.com/l9wGENO.png)

### My Use case:
My mentors taught me that don't use too many colours in any application for a better user experience. So, Before I introduce new colours in the design phase, I should check the available colours to reuse them. So I used CSS stats to check the available colours. But, sometimes I missed giving the updated fingerprinted hash. So I decided to create this. I hope it will fit your use case also.
If it doesn't fit, Please raise an issue [here](https://github.com/AlwarG/css-viewer/issues)

Thank you for reading this post 🙏. Feel free to post your comments if you want to share something. Contributions to this project are also welcome.

Application: https://css-viewer.vercel.app/
Github: https://github.com/AlwarG/css-viewer
Zerando o Hacker Rank: Contando Positivos, Negativos e Zeros
Tags: tutorial, typescript, programming, braziliandevs
Published: 2023-01-31 13:28:28

No tutorial de hoje, vou ajudá-lo a entender como resolver mais alguns desafios que você encontrará no HackerRank, usando a linguagem TypeScript.

Desafio que abordaremos:

- Plus Minus


## Plus Minus

O objetivo desse desafio, é que recebendo um array de números inteiros, calculemos as proporções entre a quantidade de items positivos, negativos e zeros do array. Devemos imprimir o valor desses cálculos em uma nova linha com 6 casas após o decimal. Você pode conferir o desafio neste [link](https://www.hackerrank.com/challenges/plus-minus/problem?isFullScreen=true).

Por exemplo:

A entrada do array seria dessa forma:

```jsx
[-4, 3, 9, 0, -4, 1];
```

Devemos retornar o cálculo desses valores dessa forma:

```jsx
0.500000
0.333333
0.166667
```

Para resolver esse desafio, iremos utilizar a função `plusMinus`. Começaremos definindo uma variável `const` para guardar o valor total do array:

```jsx
function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;
  
  ...
}
```

Após guardar o total de items do array, crie a variável `count` para armazenar três contadores iniciando-os com zero: um para o número de items positivos, negativos e zeros.

```jsx
function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;
  let count = positives: 0, negatives: 0, zeroes: 0
  ...
}
```

Em seguida, usaremos o método `.forEach()` para percorrer cada item do array. Para cada item do array, iremos verificar se o valor é positivo, negativo ou zero e incrementaremos o valor para a variável `count`:

```jsx
function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;
  let count = { positives: 0, negatives: 0, zeroes: 0 };

  arr.forEach(num => {
    if (num > 0) count.positives++;
    if (num < 0) count.negatives++;
    if (num === 0) count.zeroes++;
  });

 ...

}
```

Por fim, após o loop, iremos calcular as três relações entre a quantidade de items positivos, zeros e o tamanho total do array dividindo o contador pelo número total de items. O resultado é arredondado para seis casas decimais usando o método `.toFixed()`, assim como foi solicitado no desafio. No final, imprimimos os valores totais de `positivesToTotalRatio`, `negativesToTotalRatio` e `zeroesToTotalRatio`.

```jsx
function plusMinus(arr: number[]): void) {
  const totalElements = arr.length;
  let count = { positives: 0, negatives: 0, zeroes: 0 };

  arr.forEach((num) => {
    if (num > 0) count.positives++;
    if (num < 0) count.negatives++;
    if (num === 0) count.zeroes++;
  });

  const positivesToTotalRatio = (count.positives / totalItems).toFixed(6);
  const negativesToTotalRatio = (count.negatives / totalItems).toFixed(6);
  const zeroesToTotalRatio = (count.zeroes / totalItems).toFixed(6);

  console.log(
    `${positivesToTotalRatio}\n${negativesToTotalRatio}\n${zeroesToTotalRatio}`
  );
}

```

## Obrigado por ler!

Espero que tenha gostado da resolução do desafio, até a próxima!
Key Skills of A Full Stack Website Developer
Tags: website, web, skills, webdev
Published: 2023-01-31 13:25:25

<p>A Full Stack Website Developer is a professional who has a comprehensive understanding of both front-end and back-end <a href="https://dev.to/manojtr/top-8-website-development-technologies-4efj">development technologies</a>. These developers are responsible for creating complete, end-to-end web solutions, from the initial design to the final deployment of the website.</p>
<p>Here are the key skills that a Full Stack Website Developer should have:</p>
<ol>
<li aria-level="1"><strong>Front-end development:</strong> This includes skills in HTML, CSS, and JavaScript, as well as frameworks such as React and Angular. These skills are used to create the visual design and user interface of a website.</li>
<li aria-level="1"><strong>Back-end development:</strong> This includes skills in server-side programming languages such as PHP, Ruby on Rails, or Python, as well as databases such as MySQL or MongoDB. These skills are used to create the underlying logic and functionality of a website.</li>
<li aria-level="1"><strong>Responsive design:</strong> Full Stack Developers should be able to create responsive designs that look great on any device, from desktops to smartphones.</li>
<li aria-level="1"><strong>Project management:</strong> Full Stack Developers should have the ability to manage multiple projects simultaneously, ensuring that each project is completed on time and within budget.</li>
<li aria-level="1"><strong>Debugging and troubleshooting:</strong> Full Stack Developers must be able to identify and resolve bugs and issues that arise during the development process.</li>
<li aria-level="1"><strong>Collaboration:</strong> Full Stack Developers should have excellent communication and collaboration skills, as they often work with other developers, designers, and stakeholders to create a website.</li>
</ol>
<p>The role of a Full Stack Website Developer is essential in the web development industry, as these <a href="https://www.webomindapps.com/">web developers</a> are responsible for creating complete, high-quality websites that meet the needs of clients and their users. With the right skills and experience, Full Stack Website Developers can play a crucial role in the success of any web development project.</p>