teleren/devto huggingface dataset:
Music Monday — What are you listening to? (Nostalgia Edition)
Tags: watercooler, discuss, music
Published: 2023-05-08 20:05:24

_cover image source: [nowthatsmusic](https://giphy.com/gifs/nowthatsmusic-now-cd-3o6ZsWaAvLBUTPSGOs)_

**Alright, it's a new week and I'm ready to listen to some fresh tunes. This time up I'm curious to hear any music that makes you all feel particularly nostalgic. Perhaps it's music that references a previous decade (perhaps even one that you never lived during). Or, maybe it's music that brings you back to a particular time in your life, like [tunes from your teenage days](https://dev.to/music-discussions/music-monday-what-are-you-listening-to-tunes-from-your-teenage-days-edition-4mk3). Whatever the case may be, I wanna hear some tunes that take you to a specific time and place. Take me there with ya!**

![A hand holding a compact disc floats around the screen with little laggy trails behind it like in the early internet days... it's meant to feel nostalgic](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ndk58y3ip0jm3zje99l.gif)

***

## How we do 

In this weekly series, folks can chime in and drop links to whatever it is they've been listening to recently + browse others suggestions.

If you'd like, [you can view previous entries in the series here](https://dev.to/michaeltharrington/series/17887). And for those who have been following along with this series, you may notice that I'm now posting it under the DEV Team org... it's the same old series, but I've just decided to house it here going forward. 😀

***

Alright, let's get this nostalgia train a'rollin'... 🚂 _Note: you can embed a link to your song using the following syntax `{% embed https://... %}`. This should work for most common platforms!_

Looking forward to listening to y'all's suggestions! 🎶
Git bash commands
Tags: vim, osdc, html, github
Published: 2023-05-08 20:00:26

My recent [contribution](https://github.com/kantoniko/ladino-pages/pull/1) on github is to the [kantoniko](https://github.com/kantoniko) project. 

I wanted to help so I looked up some of the open issues that are not resolved yet. I saw a cool, urgent labeled, request about adding the name of the contributors of the kantoniko project, to the website about page. I decided to explore the project and to setup the environment locally.

At first I was confused by the many repositories that the project has. I was looking for the about file so I can modify it. After a long search I used our course slack channel and got the file's location by the help of @szabgab .

The workflow went as described:

I opened my git bash and created a new folder and entered it using cd command:
`mkdir kantoniko`
`cd kantoniko`

Cloned the repository that is responsible for the website pages and entered it using cd command:
`git clone https://github.com/chapnitsky/ladino-pages.git`
`cd ladino-pages/`

I noticed that the about page is in English only so I entered the en directory and listed all of the files in it:
`cd en/`
`ll`

I found out that the file I needed to modify is called about.md, and decided to edit it via vi command:
`vi about.md`

While in the vi editor, I pressed INSERT so I could enter new data to the file, the contributors names and their profile's url. When I finished the modification, I wanted to save the file with all of the changes and exit the editor. You can do that by pressing ESC button and using this sytax, that means write and quit:
`:wq`

I wanted to see only the changes so I used the diff command:
`git diff`

Once I was satisfied with the results I added and commited the changes:
`git add about.md`
`git commit -m "Added contributors to the 'about' page"`

After commiting, I pushed it to my forked repository by:
`git push`

By the end, I opened a PR so the changes will be added to the project as needed.

It felt great using this kind of technic without using github GUI.
I hope I contributed a lot and that the kantoniko project is getting more progress!
How do I distribute my layer-data for MongoDB?
Tags: mongodb, opensource, typescript, node
Published: 2023-05-08 19:53:50

Hello everyone,

Over the past few weeks, I have been working on an open-source tool designed to enhance the performance of aggregation queries in MongoDB: [https://github.com/maggregor/maggregor](https://github.com/maggregor/maggregor)

I would like to have opinions about the distribution of my project.

At the moment, I only have a Dockerfile for installation. I plan to create a Docker image to facilitate the installation. However, I would appreciate any suggestions.

I was talking to a friend about wanting to distribute it via a pkg but he don't think creating an embeddable executable using "pkg" [https://www.npmjs.com/package/pkg](https://www.npmjs.com/package/pkg) (would be suitable for this case (the server consists of a TCP proxy and requires a database to store metadata)

I am considering distributing the tool via npm.

What are your thoughts on this?
Stop using useState for everything
Tags: react, useref, usestate, webdev
Published: 2023-05-08 19:43:39

The useState hook was created to help us to store data and update the UI all the times that the data changes. But, every time the state changes, it causes a re-render on your app and this could be a problem.

### Let's take a look on the code below

![Image showing a react code with useState](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mzls41b5kjvpnmrd7j5.png)

***You might be thinking: “It works, there's nothing wrong, right?” - The answer is: no.***

The ***onChange*** function will set a state every time the user presses a key on keyboard. It means the app will re-render **every time the user types a letter.**

And as we can see, our app is re-rendering unnecessary. 👇🏽

![Image showing an app re-rendering many times](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0cbv5b03tgybcc0v03j.png)

*So, we gonna fix that using the useRef hook.

## Why?

First: the useRef allow us to get the input value without setting a state every time the user types a letter. 

Second: We gonna use the useRef because we don't need to update the UI. If wee need to update UI, we must be using useState.


![Image showing how to use useRef](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hklmmtvies9rex14pk57.png)


As you can see, we don't need to set a new state on the onChange event and our application just render one time, like the picture below:

![Image showing the result of using useRef](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38sotifa1c4jhwsw79xz.png)

***“But Douglas, the app is rendering twice* 😭*”*** - Yes, the React Strict mode is enabled and it renders twice just to detect any problem in the app. It only runs on debug mode, so in production will gonna be safety 🙂

So, it works! Your app is happy. Now we have the entire input value without rendering so many times. 

Bye 🙂
The Impact of New AI Tools on Coders' Lives
Published: 2023-05-08 19:16:43

Artificial intelligence (AI) has come a long way in recent years, and it's now being integrated into many software development tools. AI-assisted coding tools are becoming increasingly popular, and they're changing the way that coders work. In this article, we'll explore the impact of these new AI tools on coders' lives.

### Increased Efficiency.
One of the most significant benefits of AI tools for coders is increased efficiency. AI-assisted coding tools can help automate repetitive coding tasks, which allows coders to focus on more complex and creative aspects of the coding process. This automation can speed up the coding process significantly, and help coders complete projects more quickly.

###Improved Code Quality 
AI tools can also help improve the quality of code that coders produce. For example, some tools can analyze code and suggest improvements to ensure it adheres to best practices and coding standards. This can help coders catch errors and ensure their code is more maintainable and scalable.

###Reduced Errors
Coding can be a tedious and repetitive process, and even the most experienced coders can make mistakes. AI-assisted coding tools can help reduce the number of errors that coders make by automatically checking code for syntax errors and suggesting fixes. This can save coders a significant amount of time and help ensure the quality of the code they produce.

###New Opportunities=
AI tools are also creating new opportunities for coders. For example, some tools can analyze large datasets and provide insights that would be difficult or impossible for humans to identify on their own. This allows coders to create new applications that can process vast amounts of data and provide insights that were previously impossible.

###Potential Challenges
While AI tools can provide significant benefits for coders, there are also potential challenges to consider. One concern is that AI-assisted coding tools may reduce the demand for human coders, as some tasks may be automated. Additionally, there may be a learning curve for some coders to adopt new AI tools and incorporate them into their workflows.

###Conclusion
AI-assisted coding tools are changing the way that coders work. These tools provide significant benefits, including increased efficiency, improved code quality, and reduced errors. Additionally, they're creating new opportunities for coders to create applications that can process large datasets and provide new insights. While there are potential challenges to consider, it's clear that AI tools will continue to play a significant role in the future of coding. As such, coders should embrace these tools and explore how they can integrate them into their workflows to improve their productivity and the quality of the code they produce.
Spread and Rest operator in JS
Tags: webdev, javascript, react, javascriptlibraries
Published: 2023-05-08 19:11:48

Make your **JavaScript** code cleaner and less complex with spread & rest operators.

Unlock the power of spread and rest operators in JavaScript:

**Spread and Rest operators **are two important features in JavaScript introduced in **ECMAScript 6 (ES6)** that provide a concise and powerful way to work with arrays and objects.

**1. Spread Operator**

_The spread operator (…) _is used to spread the contents of an array or object into individual elements. This is useful when you want to combine multiple arrays or objects into a single array or object, Or when passing arrays or objects as arguments.

We can also use the spread operator to add new elements to an array:
![Spread operator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4j3c2c0uskc1ru34lqs.jpg)

In the example below, we use the spread operator to add the element `0` to the beginning of the `arr` array.

![Image eg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mmfg3pt5cpxyuq64jhk.jpg)

The spread operator can also be used with objects.

**2. Rest Operator**

_The rest operator (…)_ is used to represent an indefinite number of arguments as an array. This is useful when you want to pass a variable number of arguments to a function, or when you want to group a set of arguments into an array.

In this example, we define a function called `sum` that uses the rest operator to collect any number of arguments into an array called `numbers`. We then use the `reduce` method to sum up the numbers in the array and return the result.

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fiwfgmvu6tuoap2ozag.jpg)
We can also use the rest operator to group a set of arguments into an array.
So must use this two operators to ease your code.

That's it!
Thanks for reading 🙌
How to add a progress bar to terraform cli
Tags: vscode, extension, terraform
Published: 2023-05-08 19:03:06

So I figured terraform cli deserves a better ux. After all, the endless staredown at output logs is not ideal.
A progress bar, then ? so developers know if they have enough time to grab a cup of coffee?
[This Vscode Extension](https://marketplace.visualstudio.com/items?itemName=oferkafry.easy-terraform-commands) adds a button to the status bar. Clicking it opens a command menu that runs commands with a progress bar.

![The "Dashboard"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6kw974v4b3qhsoe7tgb.png)

In action:

![In action](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/chiwzo45mzltqttx487s.gif)

**That's it. Enjoy!**
What is RSS/XML/Atom/Syndication?
Tags: rss
Published: 2023-05-08 18:45:52

RSS, XML, Atom, and syndication are essential technologies that facilitate the distribution and consumption of content on the web. They enable users to subscribe to and access updates from multiple sources in an organized, efficient manner, while content creators can reach a larger audience and increase their visibility. Here's a summary of each term:

RSS (Really Simple Syndication): RSS is a web feed format that enables users to subscribe to frequently updated content, such as blog posts, news headlines, or podcasts. By using an RSS reader or aggregator, subscribers can access updates from multiple sources in one centralized location, without having to visit each website individually. RSS feeds are typically written in XML.

XML (Extensible Markup Language): XML is a markup language used to structure and store data in a human-readable and machine-readable format. It allows developers to create custom tags to define the structure and presentation of the content. XML is the foundation for many data formats, including RSS and Atom, and it plays a crucial role in syndication by facilitating the sharing of structured data between different platforms and applications.

Atom: Atom is an alternative to RSS, designed to address some limitations of the latter. Like RSS, Atom is an XML-based web feed format used for content syndication. It offers additional features compared to RSS, such as improved support for content updates, better handling of content metadata, and support for multiple feed formats. Atom is considered more flexible and extensible than RSS, although both formats are still widely used for content syndication.

Syndication: Syndication refers to the process of distributing and sharing content across multiple platforms or outlets. In the context of the web, syndication often involves the use of web feeds, such as RSS or Atom, to enable users to subscribe to updates from various sources. This allows content creators to reach a broader audience, while users benefit from having access to aggregated content in a single location.
Permission, responsibility, and empowerment
Tags: management, architecture, productivity, leadership
Published: 2023-05-08 18:16:57

## From this Week's [Meme Monday](https://dev.to/ben/meme-monday-66l)

{% embed https://dev.to/sarahokolo/comment/26g4n %}

Now, like all comments in the thread, this is a shitpost — so I don't want to get too serious, but it's interesting food for thought.

### Tornado vs. Bug

The difference between the tornado and a bug is that the tornado is something you literally can't do anything about — so if you live in an area that gets enough tornadoes, you might as well just mow your lawn as long as the tornado isn't _moments from crushing your house_.

However, in software, you _can_ "fix" the tornado. That's why you probably shouldn't be mowing the lawn. You have agency over the bigger issue — or do you?

### Agency and Responsibility in Team Software Development

This is one of the biggest problems in team software development (i.e., 99% of important software development). It's not always clear that you do have agency to fix the bug — and if you do have agency, it's not always clear that you have the responsibility.

#### Creating Systems for Clarity

So great, let's create systems to make sure that people know that they can and should fix the bug.

**However**, if we define "responsibility" the wrong way, it is either too many people's responsibility or too few. Too many, and everyone might look at each other thinking someone else will fix it. Too few, and now you've mostly disallowed agency. The select few people who can deal with it will.

Identifying this issue and finding balance is key.

#### Empowerment

If communication around "can" and "should" are worked out, then empowerment might still be a problem. I think empowerment is mostly about knowledge and wisdom transfer, through documentation, management, pairing, meetings, or anything in-between.

### Final Thoughts

- Getting all of this right is more of an ongoing practice than a one-time solution.
- While it may be "leadership's" job to ultimately get some of this right, it can be your job to help ask the questions to get everyone on the right track here. Mostly, if people aren't in the right place, it's because they're busy. There's often a chance to raise a hand and see how you can help.
- Getting this right _everywhere_ can be daunting. Start small.
Create Custom Jetpack Compose Animations 🎨 Make Your App Experience Truly Unique
Tags: kotlin, android, animation, tutorial
Published: 2023-05-08 18:16:49

Hey Kotlin enthusiasts! ✨ Ready to take your Jetpack Compose animations to the next level? In today's blog post, we'll learn how to create custom animations instead of using predefined ones, giving you the flexibility to design a unique experience for your app users. Let's dive in! 🏊

## Custom Jetpack Compose Animations with Animatable 🎉

When you want to have more control over the animation and create a truly custom experience, using `Animatable` is the key. It provides you the flexibility to design unique and fine-tuned animation behavior.

Recall our previous example of scaling a button? Now, let's see how to create that same animation as a custom animation experience.

### Custom Animation to Scale a Button 🖲️

In this example, we'll animate the scale of a button from 1f (normal size) to 1.5f (enlarged) when it's pressed. But this time, we'll make it custom! 🌟

```kotlin
@Composable
fun CustomScaleAnimationButton() {
    val animationProgress = remember { Animatable(1f) }
    
    val pressInteractionSource = remember { MutableInteractionSource() }
    val isPressed by pressInteractionSource.collectIsPressedAsState()

    LaunchedEffect(isPressed) {
        if (isPressed) {
            animationProgress.animateTo(
                targetValue = 1.5f, 
                animationSpec = spring(dampingRatio = Spring.DampingRatioLowBouncy)
            )
        } else {
            animationProgress.animateTo(
                targetValue = 1f, 
                animationSpec = spring(0.75f)
            )
        }
    }

    Button(
        onClick = {},
        modifier = Modifier
            .scale(animationProgress.value)
            .pointerInput(Unit) {
                detectTapGestures(
                    onPress = {
                        pressInteractionSource.tryEmit(PressInteraction.Press())
                        coroutineScope.launch {
                            tryAwaitRelease()
                            pressInteractionSource.tryEmit(PressInteraction.Release())
                        }
                    }
                )
            },
    ) {
        Text("Custom Animate Me!")
    }
}
```

Voilà! You just crafted a custom animation in Jetpack Compose! 🏅 Your animation now has a unique behavior that sets it apart from the predefined ones.

## Closing Thoughts 🤔

Creating custom animations with Jetpack Compose is a piece of cake! 🍰 By using `Animatable`, you can easily design custom, reusable, and flexible animations.

As always, I want to hear your thoughts on this topic. Please let me know in the comments section how you plan to use custom animations in your projects, and share your unique use cases in the comments!

Stay tuned for more amazing content on Kotlin, Android, Ktor, and Kotlin Multiplatform! 🎉

**Before you go, don't forget to like the post 👍 and follow me 🔔 so you don't miss out on any exciting developments in the Kotlin world!** Happy coding! 🥳
How I am using composer to install Dolibarr modules
Tags: webdev, php
Published: 2023-05-08 18:12:20

Those who don't know about Dolibarr, [Dolibarr](https://www.dolibarr.org/) is a Open Source ERP and CRM system for businesses. It's codebase is written in PHP.

Here is the [repository](https://github.com/Dolibarr/dolibarr/) if you are interested. btw I don't think any developer will be comfortable working on this codebase first time 😅

It had a composer file to manage some dependency before but in the current stable version it is disabled. You can check the commit message [here](https://github.com/Dolibarr/dolibarr/commit/857048c9bd1aa38e00ddbdc868a3936963805f1a) 😜

So anyway, to install any module we need to zip the module and upload via Dolibarr admin panel. Or we can copy the module to the htdocs/custom folder area. 😐

But it causes some issues when we are continuously updating modules and managing version control system for modules.
 
Also it causes some security risk when we open the upload functionality of the modules. 😱

And honestly why we shouldn't use composer to install modules? It felt like I am in the age of Dinosaurs. 🙄

So what we did was simple. Initialize the dolibarr project with composer. Created separate repositories for the modules.

And when we need to install any modules we just need to add that in the composer.json file.

```
{
    "name": "dolibarr/dolibarr",
    "description": "Dolibarr ERP & CRM is a modern and easy to use web software to manage your business",
    "license": "GPL-3.0-or-later",
    "require": {
        "myproject/dashboard": "dev-master",
        "myproject/report": "dev-master"
    },
    "repositories": [
        {
            "url": "git@github.com:myproject/dashboard.git",
            "type": "git"
        },
        {
            "url": "git@github.com:myproject/report.git",
            "type": "git"
        }
    ],
    "config" : {
       "vendor-dir" : "../vendor"
    }
}

```
I did install the modules outside the project folder in the `vendor` directory and created symlink to show this as the custom folder inside htdocs directory.

And in the modules I added composer.json to make the module repositories as packages. Here is the composer.json file of the module

```
{
    "name": "myproject/dashboard",
    "description": "This module shows custom dashboard",
    "type": "dolibarr-module",
    "license": "MIT",
    "authors": [
        {
            "name": "Ahmad Jamaly Rabib",
            "email": "rabib@japantravel.com"
        }
    ],
    "require": {}
}

```
I have kept the require as empty as it is not needed now but we can modify based on our needs.

So in this way whenever we add/update any module in our dolibarr main project we just need to run `composer install` or `composer update`. No need to copy the folders or making zip files to upload from dolibarr dashboard. 😎🥳

We can do the same approach for any PHP projects to reuse codes and reduce complexity. 😇 Thank you for reading!