teleren/devto huggingface dataset:
7 Reasons you must learn Algorithms
Tags: algorithms, programming, devjournal, developers
Published: 2023-05-31 01:32:00

Algorithms are the secret ingredient for success, and you don't have to be a programmer to add them to your recipe.

Here are 7 Reasons you must learn algorithms:

## 1. Solve Problem:
The main reason to study algorithms is to solve problems that otherwise cannot be addressed.


## 2. Broad and far-reaching:
In today's world, their impact is very broad and far-reaching. Be it the Internet, Biology, Computer Graphics, Security, Social Networks, Particle collision simulation, quantum computing etc.


## 3. To become a proficient programmer: 
As Linus Trovalds said bad programmers worry about the code and good programmers worry about their data structures and their relationship with each other.


## 4. For intellectual simulation: 
As Francis Sullivan once said that great algorithms are poetry of computation.


## 5. Common language to understand:
Algorithms have become a common language to understand nature. Computational models are replacing mathematical models.


## 6. Personal productivity:
Want to be a master of efficiency? Learn algorithms and watch your personal productivity soar.


## 7. The backbone of technology:
Algorithms are the backbone of technology and understanding them is like having a secret superpower.



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

Algorithms play a critical role in today's digital age. 

Understanding how algorithms work and how to implement them can open up a world of opportunities, making it an essential skill for anyone looking to advance their career.



Thanks for reading this.

If you have an idea and want to build your product around it, schedule a call with [me](https://calendly.com/pragyanatvade).

If you want to learn more about DevOps and Backend space, [follow me](https://dev.to/pragyanatvade).

If you want to connect, reach out to me on [Twitter](https://twitter.com/pragyanatvade) and [LinkedIn](https://www.linkedin.com/in/pragyanatvade/).
As tais gerências de estado do Flutter
Tags: flutter, dart, bolhadev
Published: 2023-05-31 00:53:02

---
title: As tais gerências de estado do Flutter
published: true
description: Get.makeCoffee()
tags: flutter, dart, bolhadev
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-31 00:51 +0000
---

Pra começar esse texto é uma sátira sobre as brigas que ocorrem na comunidade Flutter sobre gerência de estado, se levar isso a sério recomendo um psiquiatra.

Quem não é do front provavelmente não tá ligado sobre gerência de estado, volte duas páginas por favor (procure no google, estou com preguiça de explicar nesse texto). Mas enfim, se já codou com Flutter provavelmente já mandou o setState para aquele lugar e se não mandou tá codando errado. Chegando no ponto principal, a partir disso você vai conhecer os famosos competidores do ringue: BLoC, MobX, Provider/Riverpod, Cubit, Getx, ValueNotifier/ChangeNotifier, Triple Pattern entre outros que você pode encontrar aqui mas que tá errado, onde que o GetIt é state management deus?? Absurdo, vou abrir PR no repositório do site…

Vamos começar pelo mais polêmico, que rufem os tambores (som do tambor)… ELE, O GetX. Esse tal de GetX na verdade é um framework (ruim) dentro do flutter, que seria outro framework (talvez não, mas isso é assunto pra outro texto), o que pra mim não faz sentido nenhum. Esse package propõe tanta coisa que cansa só de ler a intro da documentação dele. Esse monstrinho feio tem coisas pra mostrar alertas, pra injetar dependências, pra traduzir texto, pra gerenciar as rotas e até pra SALVAR DADOS NO LOCAL STORAGE DO DISPOSITIVO, SÓ FALTA FAZER CAFÉ E CÓDIGO SOZINHO. Vou abrir uma issue pra isso, to sentindo falta do café.

Seguindo, com o talvez segundo mais popular segundos pesquisas que não fiz temos o MobX. Esse é simples, o único problema é depender de geração de código que deixa o desenvolvimento mais lento que o Chrome com 2 abas abertas em um pc com 4GB de RAM e um Celeron. Até tem como utilizar sem geração de código, mas ai perde a graça e fica muito verboso.

Na real, fui ver quantos tem pra falar e fiquei cansado, vou encerrar com o BLoC então. Esse lindão ai te faz ter que entender sobre orientação a objetos, quem quer entender isso em pleno 2021? Ainda mais a galera que vem do javascript, nem sabem o que é isso. Bom, só pra resumir, tu precisa criar classes pros eventos e pros estados, CADA EVENTO QUE TIVER É UMA CLASSE, E CADA ESTADO TAMBÉM É UMA CLASSE, isso é muito verboso, cansei só de pensar.

Enfim, programar é chato mesmo, só aceite e pegue uma breja geladinha pra aguentar tanta coisa que rola no Flutter e na bolha dev.
Learning Backend Development
Published: 2023-05-31 00:39:00

I’ve been learning for AWS certificate recently and have some opportunities to work on some real life examples creating websites.

Hosting a website on AWS is so much more complicated but it guarantee a stable service most of the time. I’m also considering hosting on Godaddy since that’s where we planning on to get the domain from.

Please suggest some good resource to study these topics if you see this!

👏👏💫💫
Add coverage rate to a php app gitlab-ci
Tags: devops, php, laravel, gitlab
Published: 2023-05-31 00:08:05

First of all lets make some changes to out dockerfile and add this section into it :
```
RUN LC_ALL=C.UTF-8 apt-add-repository ppa:ondrej/php -y

```
now we can install php extensions easy pizzy !!

so we add the build section in out gitlab-ci.yml
```
build:
  stage: Build
  image: docker:20.10.16
  services:
    - docker:dind
  script:
    - docker login -u $CI_REGISTRY_USER -p $CI_REGISTRY_PASSWORD $CI_REGISTRY
    - docker build --pull -t $IMAGE_TAG .
    - docker push $IMAGE_TAG
```

now we have our image ready just after this section finished

after that we may create a test section and install xdebug that its required just in this stage :

```
code-coverage:
  stage: Test
  image: $IMAGE_TAG
  script:
    - apt-get update
    - apt-get install -y php8.2-xdebug
    - export XDEBUG_MODE=coverage

```


> we should avoid install xdebug directly in dockerfile because its reduce the performance !

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


Just one more section and then our coverage indicator is ready

add this line so it will run the code coverage test and extract out the coverage percent to gitlab and also make a copy of tests results so we can check them in merge requests 

```
code-coverage:
  stage: Test
  image: $IMAGE_TAG
  script:
    - apt-get update
    - apt-get install -y php8.2-xdebug
    - export XDEBUG_MODE=coverage
    - ./vendor/bin/phpunit --do-not-cache-result --log-junit phpunit-report.xml --coverage-cobertura phpunit-coverage.xml --coverage-text --colors=never
  artifacts:
    when: always
    reports:
      junit: phpunit-report.xml
      coverage_report:
        coverage_format: cobertura
        path: phpunit-coverage.xml
  coverage: '/^\s*Lines:\s*\d+.\d+\%/'
```

now lets create a merge request and we what happens after pipelines passed : 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/viwu1thqzwlvvb4uo1st.png)


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



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aohzgt5tcgizs2wzzmmi.gif)
Server Component Safe React Hooks
Tags: react, reactjsdevelopment, webdev, javascript
Published: 2023-05-30 22:58:11

The introduction of hooks in ReactJS transformed the way programmers handle state changes and lifecycle events, enabling simpler, more manageable code and raising developer output.

The team at ui.dev has compiled a list of Server Component Safe React Hooks, which you can access at [usehooks](https://usehooks.com/)

Hooks from usehooks are functional in server components.This library is Next-compatible and SSR safe
INSTALL SLACK ON LINUX MINT 21.1
Published: 2023-05-30 22:58:00

Slack remains an effective messaging platform that connects businesses and communities together in a peculiar space. Chatrooms on slack are called **channels** that connects developers, professionals and members of communities.

**Pros Of Using Slack**
The following are advantages of using slack in no particular order:

-  Slack can be used by individuals to host files, and personal resources.

- Slack is flexible and it is available for all businesses worldwide.

- Slack is designed for businesses and allows resources to be updated at once by members in a community

- Slack allows users to search through over 10,000 messages.

**TABLE OF CONTENTS**
Download Slack For Linux
Install Dependencies
Install Slack
Conclusion

**Download Slack For Linux**

Update your Linux System to fetch the latest security patches from the repositories with the commands:

```
sudo apt-get update
sudo apt-get upgrade
```
Visit the official website of [slack](www.slack.com/downloads/linux) and download the `rpm version`. 

Note: `RPM` version cannot be installed on Debian based Operating Systems like Ubuntu, Linux Mint.
In this tutorial, I will  use a work-around to convert the `RPM` version to a `DEB` version which is installable on Debian-based Operating Systems.

![Slack Download](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/49ssg9efhqnc7nse915r.png)

**Installing Dependencies**

Conversion of an `rpm` package to a `deb` package requires a linux utility called `Alien`. Alien is a computer conversion program that converts different linux software packages to `.deb` files for installation.

This is the command to install `Alien`:

`sudo apt-get install alien`


![conversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vkdlapukioe6vkre2ax5.png)

This is the downloaded `rpm package` at **`home/.../Downloads/Programs`**


![File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kpzied76r91oxaihdcm.png)
This is the command to convert the `rpm` file to a `deb` file using the `Alien` utility.
`sudo alien slack-4.32.122-0.1.el8.x86_64.rpm`

Replace the slack package with your file version in the above command.

![Alien conversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0hb2asrqglfmzd1sbjof.png)

This prompt converts the `rpm file` to a `debian file` which can now be installed on all Debian Based Operating Systems.

Finally, we must install the `.deb` package on linux mint with the command: 

`sudo apt install ./slack_4.32.122-1.1_amd64.deb`


![six](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et4oeclmdnpvjnkez025.png)

In the terminal, we can now issue this command to check the version of slack on your system.
 `slack --version`


![seven](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xx39dx5xrutcz0pgnx5i.png)


**Conclusion**
And ta-da!, this is a working Slack-Desktop on Linux Mint.

![Working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j236vyncexk8gr4xtc3w.png)
Accelerate Domain Learning: Explore Application Dependencies with RailsGraph
Tags: graph, rails, ruby, erd
Published: 2023-05-30 22:57:05

😥 One of the major challenges of data migrations in large codebases is identifying dependencies on the models being migrated. Lack of comprehensive knowledge about the codebase further complicates this task.

📦 Using [RailsGraph](https://github.com/ahmad-elassuty/rails_graph), you could generate an interactive graph that is easy to explore! To learn more please check my blog post.

{% embed https://medium.com/@ahmad-elassuty/accelerate-domain-learning-explore-application-dependencies-with-railsgraph-26329aed9f09 %}

👀 Spoiler alert

{% embed https://vimeo.com/831676396?share=copy %}
JFxBorderlessNative provide Windows Native Aero Snap support for UNDECORATED view in JavaFx
Tags: java, javafx, windows, jni
Published: 2023-05-30 22:24:52

Hi I’ve just released my first Java library on maven central that support native Aero snaps for undecorated Stage.

This library is working for Windows 7 to 11 and compatible with java 8+ 

You can check it out on [github](https://github.com/pillisan42/JFxBorderlessNative) or include it in your project 
`implementation("io.github.pillisan42:jfx-borderless-native:1.0.7")`
Local Image not displaying in public folder EASY FIX - NextJS
Tags: javascript, react, nextjs, frontend
Published: 2023-05-30 22:14:44

At the time of writing this article, I'm working on a NextJS project and I faced a particular issue that I would love to share with you.

Since this is my first time using NextJS, I had to read a lot of the documentation to make sure my folder structure was accurate and so I didn't mess anything up.

All my static assets were in the `public` folder and while also using Tailwind, I ran into an error. My images weren't showing up when I added the image source on the in-built `Image` component.

After minutes of making sure my paths were correct, and restarting my dev server (many times), I finally saw the issue!

Here is how my code looked before I saw what the issue was:

```
import Image from 'next/image'
const SampleImage = () => {
    return (
    <Image src={'/public/office.jpg'}/>
)
};

export default SampleImage;
```
I realized that since my image was in the `public` folder, I didn't need my image path to have the `/public` prefix.


So here is the new line of code that displayed my images as I wanted:

```
import Image from 'next/image'
const SampleImage = () => {
    return (
    <Image src={'/office.jpg'}/>
)
};

export default SampleImage;
```

If you're using Tailwind, you can use the following in your `tailwind.config.js` file:

```
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  theme: {
    extend: {
      backgroundImage: {
        'office': "url('/office.jpg')",
      },

    },
  },
  plugins: [],
}
```

_It worked!_

Based on your images, NextJS might throw an error requiring you to add the `width` and `height` properties to your image.

_I look forward to learning way more about NextJS. Join me on this journey by following me. I'll update you regularly on new things I learn._

Thanks for reading and please share with someone who would like this ;)
End-to-end product lifecycle with Team Pando
Published: 2023-05-30 21:58:35

## Eat your own dog food. It's good for you!

There is nothing like eating your own dog food to build empathy with your users and there's nothing that comes close to real user empathy in its ability to improve your product.

We're lucky at Team Pando: we're a product team who **loves** helping product teams build better products, faster.

So we get to use our own product every day to build... our product.

Here's a view into how we use Team Pando to build Team Pando. (And look out for the feature we discuss to drop in the product soon!)

{% embed https://www.youtube.com/embed/Aw-gdF0tQlw %}

How do you manage your product, design, and engineering handoffs? If you like what you see, check out [Team Pando](https://www.teampando.com/?utm_source=devto&utm_medium=web&utm_campaign=20230530-end-to-end-feature) — we’re here to help!
Congestion Control in TCP 🚦
Published: 2023-05-30 21:53:12



Congestion is a situation where the network performance degrades due to too many packets being sent or received. Congestion can cause packet loss, delay, and lower throughput. To avoid congestion, TCP uses two mechanisms: **congestion avoidance** and **congestion detection**. 🕵️‍♂️

## Congestion Avoidance 🚫

Congestion avoidance is a proactive approach that tries to prevent congestion before it happens. TCP uses a parameter called **congestion window (cwnd)** to control how many packets can be sent at a time. The cwnd is initially set to a small value and is increased gradually as long as the network is not congested. This is called **slow start**. 🐌

However, if the cwnd grows too large, it may exceed the capacity of the network or the receiver, and cause congestion. To avoid this, TCP uses another parameter called **threshold (ssthresh)** to limit the growth of the cwnd. When the cwnd reaches the ssthresh, TCP switches from slow start to **congestion avoidance** mode. In this mode, the cwnd is increased by a smaller amount for each successful transmission. This is called **additive increase**. ➕


## Congestion Detection 🔎

Congestion detection is a reactive approach that tries to detect congestion after it happens and adjust the cwnd accordingly. TCP uses two indicators to detect congestion: **timeout** and **duplicate acknowledgments (ACKs)**. ⏰

Timeout occurs when a sender does not receive an ACK for a packet within a certain time interval. This means that either the packet or the ACK was lost due to congestion. When timeout happens, TCP assumes that the network is congested and reduces the cwnd to one segment. This triggers slow start again. 🐌

Duplicate ACKs occur when a receiver receives an out-of-order packet. This means that some packets before it were lost due to congestion. When a receiver receives an out-of-order packet, it sends an ACK for the last in-order packet it received. If the sender receives three duplicate ACKs for the same packet, it assumes that the network is congested and performs a **fast retransmit** of the lost packet. It also reduces the cwnd by half and switches to **fast recovery** mode. In this mode, the cwnd is increased by one segment for each duplicate ACK received until a new ACK arrives. This is called **multiplicative decrease**. ✖️

The following diagram illustrates how the cwnd changes over time in fast recovery mode.



## Summary 📝

- Congestion control in TCP aims to avoid or detect congestion and adjust the cwnd accordingly.
- Congestion avoidance is a proactive approach that uses slow start and additive increase to increase the cwnd gradually.
- Congestion detection is a reactive approach that uses timeout and duplicate ACKs to detect congestion and perform fast retransmit and fast recovery.
- Congestion control in TCP helps to improve the network performance and reliability.

I hope you learned something new from this article. If you have any questions or feedback, please leave a comment below. Thank you for reading! 😊
What is useState() and useEffect() in React
Published: 2023-05-30 21:15:33

In React, useState and useEffect are two essential hooks used for managing state and side effects in functional components.

**useState:**

Use case: useState allows you to add state to a functional component. It returns a pair of values: the current state and a function to update that state.
Example:

```

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
```

In this example, useState(0) initializes the count state to 0. The setCount function is used to update the count state when the button is clicked.

**useEffect:**

Use case: useEffect allows you to perform side effects in functional components, such as fetching data, subscribing to events, or updating the document title.
Example:

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

function UserProfile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    // Fetch user data from an API
    fetch('https://api.example.com/user')
      .then((response) => response.json())
      .then((data) => setUser(data));
  }, []);

  return (
    <div>
      {user ? (
        <div>
          <h2>{user.name}</h2>
          <p>Email: {user.email}</p>
        </div>
      ) : (
        <p>Loading user profile...</p>
      )}
    </div>
  );
}
```
In this example, useEffect is used to fetch user data from an API when the component mounts (empty dependency array []). The retrieved data is stored in the user state using setUser, and the component renders the user's name and email when the data is available.

These are just a few basic use cases for useState and useEffect. They are powerful hooks that allow you to handle state and side effects in a declarative way, enabling you to build dynamic and interactive React applications.
100 Days Coding Challenge - Day 11: FreeCodeCamp JavaScript Algorithms and Data Structures & AI Chatbot Python
Tags: javascript, programming, python, 100daysofcode
Published: 2023-05-30 20:52:01

## Day 11

I finish the ES6 section, tomorrow I will start "Regular Expressions"

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

Plus, I'm currently working in an AI Chatbot project with Python to my University, apart of the Homeworks of course, this is a club apart:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxqaobjkx0si2ddykx4f.png)
Share Your Expertise & Stories with #devpride this Pride Month! 🌈
Tags: devpride, lgbtq, meta, wecoded
Published: 2023-05-30 20:43:48

Happy Pride, all! ❤️ 🧡 💛 💚 💙 💜 🤎 🖤 🤍 💗

We’re so inspired by the contributions and engagement within the queer community on DEV. We regularly witness creativity and expertise shining through on posts and active participation under hashtags like #devpride, #pride, #lgbt, #lgbtq, #trans, and #theycoded.

Let's keep the incredible momentum going in June for Pride month! Throughout the month of June, we’ll prioritize posts published under the hashtag **#devpride** and give them the spotlight they deserve.

We're committed to showcasing your content using our moderation tools and sharing it across our social media channels. Our goal is to amplify queer voices, provide visibility to queer experiences, and spark important conversations.

---

We’d love to hear stories about how being LGBTQ2S+ has impacted your career as a developer, both in positive and negative ways. We're particularly interested in hearing how you've overcome challenges within the community. Have there been specific jobs, conferences, or experiences that have played a role in your journey? 

---



Remember to tag your content with the hashtags that represent you best. Alongside #devpride, you can use #pride, #lgbt, #lgbtq, #trans, and #theycoded. Select one or more that resonate with you!

Let's come together and make this initiative a remarkable celebration of inclusivity and empowerment. Your contributions matter, and your expertise can have a profound impact on fellow developers and individuals navigating similar journeys. Share your articles, tutorials, projects, and personal stories using the hashtag #devpride.

Thank you for being an integral part of the DEV community. Let's make Pride Month an extraordinary celebration of LGBTQ2S+ excellence, empowerment, and inclusivity. Together, we can create something truly incredible! 🌈🌈🌈

💗 The DEV Community Team 


---


Note: We kindly ask you to join the discussion with respect and open-mindedness. Every voice matters, so let's make sure everyone feels welcomed and valued. Together, we can build an amazing community where everyone can freely express their thoughts and experiences. Let's create an awesome and inclusive space!