teleren/devto huggingface dataset:
Resolvendo problema ao realizar migração de dados utilizando a opção Migration Wizard no MySQLWorkbench no MacOS
Tags: mysqlworkbench, libmysqlclient, macos
Published: 2023-11-03 19:00:41

Ao iniciar o processo de migração tudo transcorre normalmente até chegar ao processo "STEP BULK DATA TRANSFER" onde recebemos o seguinte erro:

```
dyld: Library not loaded: @executable_path/../Frameworks/libmysqlclient.dylib
  Referenced from: /Applications/MySQLWorkbench.app/Contents/MacOS/wbcopytables
  Reason: no suitable image found.  Did find:
	file system relative paths not allowed in hardened programs

ERROR: Determine number of rows to copy: Error getting row count from source tables, wbcopytables exited with code -6
Failed
```

Esse problema ocorre pois a instalação do MySQLWorkbench não cria o arquivo com o nome `libmysqlclient.dylib`, no lugar, a instalação cria outro arquivo com um nome semelhante: `libmysqlclient.21.dylib`.

Para resolver o problema, podemos simplesmente realizar uma cópia do arquivo `libmysqlclient.21.dylib` e renomeá-lo para `libmysqlclient.dylib`:

Podemos acessar o diretório `Applications` onde se localizam as aplicações instaladas e ao localizar o `MySQLWorkbench` devemos clicar com o botão direito do mouse e escolher a opção `Show Package Content`, assim podemos navegar dentro do pacote de instalação. Em seguida acessamos a pasta `Content > Frameworks` onde se localiza o arquivo `libmysqlclient.21.dylib`.

Basta realizar a cópia e renomeação do arquivo para tudo funcionar normalmente.
Open Sourcing LinBy UI: Streamline Your DevOps Setup with Automated Jenkins Integration
Published: 2023-11-03 18:54:27

Hey everyone! 👋
I'm super excited to share something I've been working on that I hope can be of value to the DevOps community. I've just open-sourced my project **LinBy UI**!
LinBy UI is a tool designed with the intention to make the lives of DevOps professionals and system admins a lot easier. The main feature at the moment is the automation of setting up Jenkins - which I know can be a bit of a hassle sometimes. But that's just the start. The vision is to create a user-friendly interface that allows for easy deployment and management of various DevOps tools all in one place.
Here's what you can expect from LinBy UI:
- **Automated Jenkins Setup**: Get Jenkins up and running without manual setup hassles.
- **Expandable to Other Tools**: The architecture is built to support more tools in the future.
- **Community-Driven Development**: Looking for feedback, suggestions, and contributions!
The project is in its early stages, and there's plenty of room for improvement and additional features. I believe that with the community's insights and contributions, LinBy UI can grow into an even more versatile and powerful tool.
If you're interested in contributing or just want to check it out, you can find the repo here:  [Link](https://github.com/neetesshhr/linby-ui/)
Whether you're interested in contributing code, documentation, suggestions, or bug reports - all forms of contributions are welcome. Let's build something great together!
Thanks for reading, and I'm looking forward to any questions or feedback you might have! #opensource #devopstool
How to use useSearchParams hooks in next js 13
Tags: nextjs, webdev, javascript
Published: 2023-11-03 18:29:28

```
"use client";
import { usePathname, useRouter, useSearchParams } from "next/navigation";
import React, { useEffect, useState } from "react";

const checkList = ["Apple", "Banana", "Tea", "Coffee"];

interface MyFilterProps {
  brands: any;
}
const MyFilter = ({ brands }: MyFilterProps) => {
  const searchParams = useSearchParams();
  const pathname = usePathname();
  const router = useRouter();
  const [checkedItems, setCheckedItems] = useState<any>([]);
  const [catsItems, setCatsItems] = useState<any>([]);

  function handleBrandChage(e: any) {
    const { value, checked } = e.target;
    let isSelected = checked;
    if (isSelected) {
      setCheckedItems([...checkedItems, value]);
    } else {
      setCheckedItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== value;
        });
      });
    }
  }

  function handleCatsChage(e: any) {
    const { value, checked } = e.target;
    const val = parseInt(value);

    let isSelected = checked;
    if (isSelected) {
      setCatsItems([...catsItems, val]);
    } else {
      setCatsItems((preItems: any) => {
        return preItems?.filter((val: any) => {
          return val !== val;
        });
      });
    }
  }

  const params = new URLSearchParams(searchParams);
  useEffect(() => {
    if (!checkedItems || !catsItems) {
      params.set("", "");
      return;
    }
    if (checkedItems) {
      params.set("brand", checkedItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("brand", "");
    }
  }, [checkedItems]);

  console.log("checkedItems=>", { checkedItems, catsItems });

  useEffect(() => {
    if (catsItems) {
      params.set("cats", catsItems);
      router.push(`${pathname}?${params}`);
    } else {
      params.delete("cats", "");
    }
  }, [catsItems]);

  return (
    <>
      <h1>Brand Filter</h1>
      {checkList &&
        checkList?.map((b: any, i: number) => (
          <>
            <input
              key={b}
              type="checkbox"
              checked={checkedItems?.includes(b)}
              value={b}
              onChange={handleBrandChage}
              name="brand-checkbox"
            />
            <label>{b}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {checkedItems && checkedItems.join(", ")}.
      </div>

      <h1>Cats Filter</h1>
      {brands &&
        brands?.map((b: any) => (
          <>
            <input
              key={b.id}
              type="checkbox"
              checked={catsItems?.includes(b.id)}
              value={b.id}
              onChange={handleCatsChage}
              name="brand-checkbox"
            />
            <label>:::::{b.brand}</label>
            <br />
          </>
        ))}
      <div className="result">
        Above checkbox is {catsItems && catsItems.join(", ")}.
      </div>
    </>
  );
};

export default MyFilter;

```
The JAM stack: A Bright Future for Web Development
Tags: jamstack, gatsby, webdev, react
Published: 2023-11-03 18:51:05

---
tags: jamstack, gatsby, webdev, react
---

The JAM stack (JavaScript, APIs, Markup) architecture is gaining momentum in the web development world, and it's not hard to see why. It offers numerous benefits for both businesses and developers, making it a promising choice for the future.

For businesses, JAMstack means improved website performance, enhanced security, and cost savings in scaling digital products. The clear separation of applications in JAMstack development also contributes to a more seamless developer experience.

### Where JAM stack Shines:

JAM stack is particularly well-suited for scenarios where websites need to be fast and highly responsive. This architecture excels in:

1. Content Sites: JAM stack is perfect for content-heavy websites, blogs, and news portals. The pre-built nature of JAM stack enables quick content delivery and efficient updates.

2. E-commerce: While JAM stack may not be ideal for real-time transaction processing, it shines in serving product catalog pages, blogs, and other non-transactional components of e-commerce sites.

3. Static Websites: If your website doesn't require real-time interactions or complex server-side processing, JAM stack is a great fit.

### Where It May Not Fit:

However, it's essential to acknowledge that JAM stack may not be suitable for all scenarios. For applications with heavy real-time interactivity, dynamic content, and complex server-side operations, a traditional server-based architecture might be a better choice.

One of the standout features of JAM stack websites is their pre-built and static file-based structure. This results in faster loading times and improved overall performance. Instead of generating pages in real-time or on the server, everything is pre-built. Users enjoy swift page rendering and seamless navigation, leading to higher user satisfaction and potentially increased conversion rates.

In a digital landscape where speed and efficiency are key, the JAM stack architecture is undoubtedly a beacon of promise, both for businesses and the developers who build the web. Embrace the future with JAM stack!
Queue Data Structure
Published: 2023-11-03 18:27:05

A Queue is defined as a linear data structure that is open at both ends and the operations are performed in First In First Out (FIFO) order.

Think of a Queue as a line at a store; the first person to get in the line is also the first person to get out the line.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ab9blgdnmzf7kskav8j3.png)

Adding a value to a queue is 'enqueue' and removing is 'dequeue.'

> Enqueue: Adds an item from the back of the queue. 
> Dequeue: Removes an item from the front of the queue.
> Front/Peek: Returns the value of the item in front of the queue without dequeuing (removing) the item.
> IsEmpty: Checks if the queue is empty.
>IsFull: Checks if the queue is full.
>Display: Prints all the items in the queue.

Queue is used when things don’t have to be processed immediately, but have to be processed in First In First Out order.
Queue can be used in several things like:

-Task Scheduling: Queues can be used to schedule tasks based on priority or the order in which they were received.
- Resource Allocation: Queues can be used to manage and allocate resources, such as printers or CPU processing time.
 
- Batch Processing: Queues can be used to handle batch processing jobs, such as data analysis or image rendering.
 
- Message Buffering: Queues can be used to buffer messages in communication systems, such as message queues in messaging systems or buffers in computer networks.

- Event Handling: Queues can be used to handle events in event-driven systems, such as GUI applications or simulation systems.
Sources:
> [GeeksForGeeks](https://www.geeksforgeeks.org/applications-of-queue-data-structure/)
> [FreeCodeCamp](https://www.freecodecamp.org/news/queue-data-structure-definition-and-java-example-code/#:~:text=Enqueue%3A%20Adds%20an%20item%20from,if%20the%20queue%20is%20empty.)
Como eu estudei para certificação AZ-900 e fui aprovada?
Tags: braziliandevs, certification, azure, cloud
Published: 2023-11-03 18:16:18

Dicas para otimizar o estudo e focar direto na certificação

Embora tenha passado na prova em 2023, meus estudos começaram no ano de 2020, junto com a pandemia e a oportunidade de fazer uma mentoria promovida pela WoMakersCode e Microsoft chamada Black Woman in Tech.

E ai a IBM entrou com tudo investindo nos seus profissionais, para que eles fossem certificados em diferentes clouds, sim a IBM está com um programa de incentivo a certificação. Nessa que eu fiz a prova de IBM Cloud, AWS, Azure Fundaments e Azure Data.

Meus estudos começaram por aqui:

Azure Fundamentals
[Roadmap Oficial da Microsoft](https://learn.microsoft.com/pt-br/credentials/certifications/azure-fundamentals/?source=post_page-----2d82f8b0879--------------------------------)
(Buscar no link por: ROTEIRO DE APRENDIZAGEM)

E utilizei esses vídeos na véspera da prova para avivar o conteúdo na minha cabeça:

[AZ-900 | EP 1/5 | AZ900 | Treinamento Oficial | Microsoft Azure Fundamentals](https://youtu.be/4ub1uGKQK6U)

[AZ-900 | EP 2/5 | AZ900 | Treinamento Oficial | Microsoft Azure Fundamentals
](https://youtu.be/RoQTtUi4OjE)

[AZ-900 | EP 3/5 | AZ900 | Treinamento Oficial | Microsoft Azure Fundamentals
](https://youtu.be/nhbGN30DS3s)

[AZ-900 | EP 4/5 | AZ900 | Treinamento Oficial | Microsoft Azure Fundamentals
](https://youtu.be/9Q41pcxOzN8)

[AZ-900 | EP 5/5 | AZ900 | Treinamento Oficial | Microsoft Azure Fundamentals](https://youtu.be/wJW9WtRqxFU)
TypeScript Best Practices: Writing Clean and Maintainable Code
Tags: javascript, beginners, programming, tutorial
Published: 2023-11-03 17:49:18

---
canonical_url: https://baransel.dev/post/typescript-best-practices/
---

TypeScript is a powerful language for web development, offering type safety and improved code quality. To make the most of it, you need to follow best practices. In this article, we'll explore essential TypeScript best practices for writing clean and maintainable code, helping you become a more proficient developer.

## 1. Use Descriptive Variable and Function Names

Clarity is crucial in code. Use descriptive names for variables and functions to enhance readability. For example:

```typescript
// Bad
const d = 100;

// Good
const defaultWidth = 100;
```

## 2. Embrace Type Annotations
Leverage TypeScript's static typing by adding type annotations to variables, parameters, and return values. This helps catch type-related errors early:

```typescript
function add(a: number, b: number): number {
return a + b;
}
```

## 3. Avoid the any Type
Minimize the use of the any type as it weakens TypeScript's benefits. Instead, define precise types or use generics when needed.

```typescript
// Avoid
function process(data: any): any {
//...
}

// Prefer
function process<T>(data: T): T {
//...
}
```

## 4. Enable strict Mode
Enable TypeScript's strict mode in your tsconfig.json to enforce stricter type checking. This catches more potential errors during development.

## 5. Utilize TypeScript's Interfaces
Use interfaces to define the structure of objects, making code more understandable and maintainable:

```typescript
interface User {
name: string;
age: number;
}
```

## 6. Write DRY (Don't Repeat Yourself) Code
Avoid duplication by creating reusable functions and components. This simplifies maintenance and improves code consistency.

## 7. Leverage Tooling
Take advantage of TypeScript's tooling in code editors like Visual Studio Code. It provides autocompletion, real-time error checking, and refactoring support.

## 8. Regularly Update TypeScript
Keep your TypeScript version up-to-date to access new features, improvements, and bug fixes.

## 9. Document Your Code
Provide clear documentation for your code. Use comments and consider generating documentation from TypeScript types.

## 10. Unit Testing
Write unit tests for your TypeScript code to ensure it behaves as expected and catches regressions early.

## Conclusion
TypeScript offers powerful features for web development, but it's essential to follow best practices to fully benefit from it. By using descriptive names, embracing type annotations, avoiding the any type, enabling strict mode, and following these best practices, you'll write cleaner, more maintainable code. Keep learning, experimenting, and improving your TypeScript skills, and you'll become a more proficient web developer.
How to write a new custom lint rule in flutter or dart
Tags: opensource, flutter, dart, lint
Published: 2023-11-03 17:37:43

All the logic for analysis of linter packages live in dart lang repo.
Specifically the following directory contains logic.

For eg avoid_empty_else is stored here

https://github.com/dart-lang/sdk/blob/9fa33d8acdff743fc7265d147abe9261deb149bc/pkg/linter/lib/src/rules/avoid_empty_else.dart#L27
React: useState or useRef?
Tags: react, javascript, webdev, learning
Published: 2023-11-03 17:37:02

In React, useState and useRef are two hooks that allow us to manage state and references in functional components. Here I want to describe the main differences between them:


**Re-rendering**
This is maybe the main difference between useState and useRef. useState triggers a re-render when its state changes. On the other hand, useRef does not cause a re-render when its current value changes. This could save a lot of time spent in unuseful re-render caused by simple state change.

Ex:

```
// useState
setCount(count + 1); // triggers re-render

// useRef
inputRef.current = 'Hello'; // does not trigger re-render
```


**Return Values**
useState returns an array with the current state value and a function to update it ([value, setValue]), while useRef returns an object with a current property ({current: initialValue}).

Ex:

```
// useState
const [count, setCount] = useState(0);

// useRef
const inputRef = useRef(null);
```


**Immutability vs Mutability**
useState is “immutable”, meaning you must use the state setter function to modify state variables and queue a re-render. In contrast, useRef is “mutable”, allowing you to modify and update the current value outside of the rendering process.

Ex:

```
// useState
setCount(count + 1); // correct way to update state

// useRef
inputRef.current = 'Hello'; // correct way to update ref
```


**Reading Values**
You can read state at any time with useState, but each render has its own snapshot of state which does not change. Conversely, with useRef, you shouldn’t read (or write) the current value during rendering.

Ex:

```
// useState
console.log(count); // logs the count state

// useRef
console.log(inputRef.current); // logs the current ref value (not during render)
```


These differences may help us to select effectively which one use in our projects.
What is Microservice?
Tags: systemdesign, programming, beginners, devops
Published: 2023-11-03 17:32:32

**Hello and welcome to the 3rd post 🧵 of System Design, by @mukeshkuiry !**

**Let's dive into microservices today! 🏗️ It's yet another fundamental aspect of system design.**


## 🔍 What are Microservices?
Microservice architecture is a cutting-edge pattern that organizes an application into loosely coupled services. It divides the entire application into submodules, each independently developed, deployed, and maintained.

![Microservice description image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbqutcq1qd0rifk3mpqa.png)



## 💪 Why Microservices?
Microservices are like the superheroes of software architecture 💥! They are robust and reliable, unlike traditional monolithic processes. With each service having its codebase and logic, it's easier to manage. They communicate seamlessly through APIs, making your application more versatile.

![Monolithic vs micoservice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/glvgoom5gwy420646ijq.png)



## 🚀 Scalability and Speed
Looking to build a scalable application? Microservices are your best friend. Scaling sub-modules is a breeze! Plus, with a large team, dividing the application into sub-modules accelerates product development 🏎️.

## 📦 Independence and Flexibility
Microservices grant each service independence. They can be developed using different technologies and languages, offering the flexibility to choose the best tool for each task. This ensures that you can adapt and evolve your services without affecting the entire system. 🛠️💬

## 🔒 Resilience and Fault Isolation
Microservices are inherently fault-tolerant. If one service encounters an issue or fails, it doesn't bring down the entire application. This isolation allows for easier debugging, maintenance, and overall system resilience. It's like having a safety net for your application! 🛡️🔗

With these key aspects, microservices provide a robust, flexible, and resilient architecture that can handle a variety of challenges in modern system design. 💪🏛️ #systemdesign #microservices

**Thanks for reading! Like, Follow, Comment.**
**Happy Coding!!**
What is WebCrumbs?
Tags: react, webdev, community, opensource
Published: 2023-11-03 17:29:02

{% embed https://dev.to/opensourcee/tldr-whats-webcrumbs-42l6 %}

WebCrumbs is an open source project that aims to be a no-code admin panel designed for Node.js websites. Its core feature will allow developers to add plugins with a single click, significantly reducing the time and effort typically required for implementing integrations or building features from scratch.

Plugins, you say? They're more than just code snippets; they are practical solutions to real-world problems. While libraries help resolve coding issues, plugins step in to address broader challenges. 

For instance, want to integrate an AI chatbot on your website? There will be multiple plugins for that. They are pieces of code that add specific features or functionalities to an existing website, allowing it to be customized and extended in its capabilities. 

In the realm of WebCrumbs, plugins are the magic beans that empower developers to upgrade their Node.js websites effortlessly. With a simple one-click action, you can assimilate a plugin and unveil new features, sparing yourself the time and elbow grease that would have otherwise been invested in coding these features from scratch.

This is the vision.

The essence of WebCrumbs goes beyond a solution; it creates a global community and a global playground. Envision a central registry for Node.js plugins, akin to what WordPress represents in its domain. This isn't just about enhancing individual projects but fostering a universal community of developers committed to refining the web. It's true collaboration transcending the boundaries of a single company or team.

Being part of an emerging open-source global community, the mission is clear: simplify web development and create a space where collaboration is the norm, not the exception. Although WebCrumbs is in its pre-launch phase, it's an open field for contributions. 

You can show your support in many ways - [starring our repository](https://github.com/webcrumbs-community/webcrumbs), [signing our newsletter](https://webcrumbs.org) and participating on our [discussions](https://github.com/webcrumbs-community/webcrumbs/discussions) and [open issues](https://github.com/webcrumbs-community/webcrumbs/issues).

This project is not a one-person show. It's a gathering of hundreds of developers from over 35 countries, all coming together in one GitHub repo. It's an open call for developers to share what they know, help grow our community, and move together through the journey. Our goal is to share this vision, get more people involved, and find our way in the world together.

{% cta webcrumbs-community/webcrumbs %} Dive into the code and contribute to the WebCrumbs community {% endcta %}

{% cta webcrumbs.org %} Explore the world of WebCrumbs {% endcta %}