teleren/devto huggingface dataset:
Creating Smooth Animations in React with Framer-Motion
Published: 2022-12-11 23:09:45

React.js is a popular JavaScript library for building user interfaces. It allows you to create reusable components that can be shared among different parts of your application. Framer-motion is a popular animation library for React that makes it easy to create smooth, gesture-based animations.

Here is a simple tutorial on how to use React.js and Framer-motion together to create an animated button:

First, you will need to make sure that you have React.js and Framer-motion installed in your project. You can do this by running the following command:

```
npm install react react-dom framer-motion
```
Next, create a new file called "Button.js" and add the following code:
```react
import React from 'react';
import { motion } from 'framer-motion';

const Button = ({ onClick }) => {
  return (
    <motion.button
      onClick={onClick}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.95 }}
    >
      Click me!
    </motion.button>
  );
};

export default Button;
```
This code creates a new Button component that uses the motion.button component provided by Framer-motion. When the button is hovered over, it will animate to a scale of 1.1. When the button is tapped, it will animate to a scale of 0.95.

To use this Button component in your application, you can import it and add it to your JSX like this:

```react
import Button from './Button';

const App = () => {
  return (
    <div>
      <Button onClick={() => console.log('Button was clicked!')} />
    </div>
  );
};

```
This code creates a new App component that uses the Button component. When the button is clicked, it will log a message to the console.

You can learn more about React.js and Framer-motion by reading the documentation and exploring the examples on their respective websites.
Download videos and music from youtube via command line: youtube-dl
Published: 2022-12-11 23:08:53

To download music and videos from youtube via command line is very simple.

First we have to install youtube-dl

``sudo apt install youtube-dl``

If you want to listen to music directly through the terminal, you can also install `` mplayer`` or ``mvp``.

Once installed, just do:

``youtube-dl -x --audio-format mp3 <URL_VIDEO>``

To listen to it, you can use ``mplayer <file_name>``

If you want to change the audio directly through the terminal, you can use this macro I made, just add it to your ``zsh`` file

```bashscript
# Muted sound on/off
alias sound_off="amixer -D pulse sset Master mute"
alias sound_on="amixer -D pulse sset Master unmute"

```

Outras macros:

increase

``amixer -D pulse sset Master 20%+ ``

decreases

``amixer -D pulse sset Master 20%- ``

If you prefer, you can use ``alsamixer`` directly as well, as it comes with a text interface.

``machine@machine~: alsamixer``

If it is necessary to configure the sound card, just press f6 and select it.

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

after select


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


<br />

[![Texto alternativo da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4alkts3uxq0dsco0nv.png))](https://www.linkedin.com/in/israel-lopes-419a32189)
How to create cpanfile by "perl Makefile.PL"?
Tags: perl, cpanm, cpanfile, make
Published: 2022-12-11 23:04:16

How to create <code>cpanfile</code> by "perl Makefile.PL"?

<a href="https://metacpan.org/pod/ExtUtils::MakeMaker::CPANfile">ExtUtils::MakeMaker::CPANfile</a> makes it possible.

```perl
# Makefile.PL
use ExtUtils::MakeMaker::CPANfile;
 
WriteMakefile(
  NAME => 'Foo::Bar',
  AUTHOR => 'A.U.Thor <author@cpan.org>',
);
 
# cpanfile
requires 'ExtUtils::MakeMaker' => '6.17';
on test => sub {
  requires 'Test::More' => '0.88';
};
```
How to append to GitHub Env via JavaScript Action
Tags: webdev, javascript, github
Published: 2022-12-11 23:02:17

## Prerequsite
 - You are creating a JavaScript/TypeScript action for GitHub
 - [You already have a repository going. If not follow this tutorial.](https://docs.github.com/en/actions/creating-actions/creating-a-javascript-action)

## Sauce
 
### DIY

```js
const fs = require('fs');

fs.appendFileSync(process.env["GITHUB_ENV"], "test_var=true");
```

### Core method

```sh
const core = require('@actions/core');

core.exportVariable("test_var", "true")
```


## Outcome

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

This also works for path & step summary :) 

```js
const fs = require("fs");

export function appendEnv(key, value) {
  fs.appendFileSync(process.env["GITHUB_ENV"], `${key}=${value}`);
}

export function appendPath(path) {
  fs.appendFileSync(process.env["GITHUB_PATH"], path);
}

export function appendStepSummary(content) {
  fs.appendFileSync(process.env["GITHUB_STEP_SUMMARY"], content);
}
```
Type narrowing ?? Checkout My techy bites #1
Published: 2022-12-11 22:47:22

Hey Guys,

Just sharing that the #1: December edition post for My Techy bites newsletter is out. It contains:

- Type narrowing with typescript
- Partytown to improve web app performance
- AWS Code Catalyst
- The LENTION USB C Docking Station in the gadget corner

Here's a link to the post{% embed https://sachitm.substack.com/p/1-december-edition %}

Like, share and subscribe to the newsletter if you like it.

Thanks
Typescript unknown vs any ?Checkout my techy bites #2
Published: 2022-12-11 22:44:26

Hey Guys,

Just sharing that the #2: December edition post for My Techy bites newsletter is out. It contains:

- Leadership lessons from Toto Wolff
- Typescript unknown vs any use and difference
- Turbopack, the successor to Webpack
- Kindle scribe in the gadget corner

Here's a link to the post{% embed https://sachitm.substack.com/p/2-december-edition %}

Like, share and subscribe to the newsletter if you like it.

Thanks
Release 0.4 Final
Tags: beginners, opensource, javascript, react
Published: 2022-12-11 22:37:12

## What I did
After creating the project creation UI, I used my experience in contributing to the UI to improve the contributing document. I updated any references to tools such as Node.js and Jest with links to the webpages for these tools. 

## Goals
I think I mostly achieved my goals. The form has its data fields updated as they change. Although this data is not sent anywhere currently, with the way it is set up it should not take too much more effort for the form UI that I have created to perform its function. I would have liked to have aimed higher, but with the project still in a preliminary phase it is difficult to integrate the difference components together without them all being present. 

## How I did it
It was difficult to get the UI to look close to what I wanted, since I had to integrate what already exists and its CSS styling with my own additions. However, I managed to get it done by using the existing CSS stylesheet with my own component. 

Since I had free rein over what I could use, within the limits of what already existed for the project (using [React](https://reactjs.org/)), I decided to use [Material UI](https://mui.com/) components to create the UI.

For the text input fields I used the [TextField](https://mui.com/material-ui/react-text-field/) components, which was fairly straightforward. For the date field, I used MUI X [DatePicker](https://mui.com/x/react-date-pickers/date-picker/) component. Validating dates manually is difficult to do, so the DatePicker component was perfect for this use. It also allowed for a more intuitive way to select a date than a simple text input. All of this was contained within Items in a a vertical [Stack](https://mui.com/material-ui/react-stack/) component container in order to arrange the inputs. In the App level, I placed the existing upload interface as well as my project creation form UI within a reverse horizontal Stack component. 

## What did I learn
I learned that open-source project creation can be an slow process. Waiting for code reviews and approval for changes can take a long time. With larger communities for a project, it would probably be a faster process since the community would be more organized, with more contributors to conduct code reviews.

I also learned a bit more about the Material UI library. I had previously learned about the library through previous projects but have never created a UI of my own using it. I had to chance to build my own UI from scratch using the library and found it very simple to use and find documentation for.

## How did I leverage the community?
After I created the project creation UI, I asked in the community Slack channel if there were any further issues I could work on to add to my contributions. One contributor filed a few issues which I could work on. This is how I managed to start working on the issue to update the contribution document.
Load Laravel Env variables into client code with Vite
Tags: php, laravel, javascript, vite
Published: 2022-12-11 22:23:03

Lets imagine that we need to handle an api public key, Laravel by default ships with an `env` file to set this types of properties, there are times where these values should be access from the backend and from the frontend site.

Of course with InertiaJS we can set a value with key and value in the `HandleInertiaRequest` middleware, but it would be much cleaner to directly call these values from the `ENV` file through the code.

Lets set an api public key as an example:

```env
VITE_API_PUBLIC_KEY=123
```

Then in your Javascript component or any frontend file you can get the value as:

```vue
console.log(import.meta.env.VITE_API_PUBLIC_KEY)
```

Hope it helps, Happy Coding!
SQL vs NoSQL
Tags: webdev, javascript, programming, node
Published: 2022-12-11 22:22:31


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


MongoDB and SQL are both popular technologies used for storing and managing data, but they have some significant differences.

MongoDB is a NoSQL database, which means it uses a non-relational data model. This means that data is stored in collections of documents, rather than in tables with rows and columns like a traditional SQL database. This makes MongoDB more flexible and scalable, as it can handle a wide variety of data types and structures.

In contrast, SQL is a relational database that uses a structured query language (SQL) to manage data stored in tables. SQL is more rigid and is typically used for managing structured data that follows a predictable pattern.

One of the key differences between MongoDB and SQL is the way they store and manage data. In MongoDB, data is stored in JSON-like documents, which can contain various data types, including arrays and nested objects. This allows for greater flexibility in the way data is organized and accessed. In SQL, data is stored in tables and must follow a predefined schema.

Another key difference is the way that data is queried. In MongoDB, data is queried using a JSON-like syntax, which is more intuitive and allows for more complex queries. In SQL, data is queried using SQL commands, which are more structured and require a deeper understanding of SQL syntax.

Overall, the main difference between MongoDB and SQL is the way they handle data. MongoDB is a NoSQL database that is more flexible and scalable, while SQL is a relational database that is more structured and predictable. Depending on the needs of your project, one may be a better fit than the other.
Creating a Project Brief: Key Elements and Best Practices for Effective Planning
Published: 2022-12-11 22:17:53

A project brief is a document that outlines the key details of a project. It's typically used to communicate the project's goals, objectives, and deliverables to stakeholders and team members. A well-crafted project brief can help ensure that everyone involved in the project is on the same page and working towards the same goals.

Here are some steps to help you build a project brief for your next project:

1. Identify the project's purpose and goals. What is the project trying to achieve, and why is it important? Be as specific as possible when defining the project's purpose and goals.
2. Outline the project's objectives. What are the specific steps or tasks that need to be completed in order to achieve the project's goals? Make sure that each objective is clear, measurable, and achievable.
3. Define the project's deliverables. What will be produced as a result of the project? This could include things like reports, presentations, prototypes, or finished products. Be sure to specify who will be responsible for each deliverable and when it is due.
4. Identify the project's stakeholders. Who will be impacted by the project, and who will need to be involved in its planning and execution? This could include clients, customers, team members, or other individuals or groups who have a vested interest in the project's success.
5. Establish the project's timeline and budget. When will the project start and end, and how much money will be needed to complete it? Be sure to include any major milestones or deadlines in the timeline, and to allocate sufficient resources to ensure that the project can be completed on time and within budget.
6. Outline the project's risks and challenges. What are the potential obstacles or challenges that could arise during the course of the project? Identify these upfront and develop strategies for mitigating or addressing them.
7. Include information about the communication channels, ticket boards, mockups, and other resources that will be used during the project. This could include things like Slack for team communication, Asana for tracking project tasks, and mockups or inspiration to guide the design process. Be sure to specify the technology stack that will be used to build the project.

By following these steps, you can create a comprehensive project brief that will help ensure that your project is well-planned and executed. By clearly communicating the project's goals, objectives, and deliverables, a project brief can help ensure that everyone involved in the project is working towards the same goals and that the project stays on track and within budget.

If you want to create a project brief for your next project, you can [download my template](https://docs.google.com/document/d/1gRVoMjLzrZfZb3W0IJomS4f-azzzRIqyciDW7lQdZzA/edit?usp=sharing). 

I also created a new app called [Glivo](https://glivo.app), to help you with this kind-of things, maybe you find it useful, it's free! :)
How to create diagrams with markup language (Mermaid)
Published: 2022-12-11 22:13:10

If you're like me and don't like creating diagrams in apps, get to know mermaid.

Mermaid is a markup language that lets you create diagrams with just a few lines of code.

In order for the diagram to render, you can add a plugin to your IDE. So when opening a .md file, just ask it to render the markdown and the diagram will be rendered together.

If you want to render it directly on your page, just add the tag:
 
``<script src="https://unpkg.com/mermaid@8.4.8/dist/mermaid.min.js"></script>``



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

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


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



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

We should always keep the default opening of the mermaid, only what will change is ***graph TD;*** which is the style of the diagram. This style you change with your need.

Of these styles we have some that are: ***flowchart LR***, ***sequenceDiagram*** and ***journey***.

There are more styles, and you can check it right here at the official mermaid link, there you will have the complete documentation.

[mermaid-oficial-link](https://mermaid-js.github.io/mermaid/#/)

<br />

[![Texto alternativo da imagem](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ds4alkts3uxq0dsco0nv.png))](https://www.linkedin.com/in/israel-lopes-419a32189)
Quick note: Generate flamegraph for Crystal app
Tags: performance, crystal, crystallang
Published: 2022-12-11 22:09:46

---
title: Quick note: Generate flamegraph for Crystal app
published: true
description:
tags: 
  - performance
  - crystal
  - crystallang
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x40vzxdaox83rd30r71b.png
---

*Quick note for me to remember how to generate flamegraphs to profile Crystal lang app. Let’s see how it works…*

## **Flamegraph?**

* [Flamegraph](https://github.com/brendangregg/FlameGraph)
* [Memory Leak (and Growth) Flame Graphs](https://www.brendangregg.com/FlameGraphs/memoryflamegraphs.html)

## Installation

```shell
$ brew install flamegraph
$ ls /opt/homebrew/Cellar/flamegraph/1.0_1/bin
difffolded.pl                pkgsplit-perf.pl             stackcollapse-elfutils.pl    stackcollapse-instruments.pl stackcollapse-perf-sched.awk stackcollapse-recursive.pl   stackcollapse-vsprof.pl
files.pl                     range-perf.pl                stackcollapse-gdb.pl         stackcollapse-jstack.pl      stackcollapse-perf.pl        stackcollapse-sample.awk     stackcollapse-vtune.pl
flamegraph.pl                stackcollapse-aix.pl         stackcollapse-go.pl          stackcollapse-ljp.awk        stackcollapse-pmc.pl         stackcollapse-stap.pl        stackcollapse.pl
```

## **Profile**

Run application and extract Process ID(PID), that requires to record data.
For example I am looking to debug my app that has name `crystal-run`:

```shell
$ sudo dtrace -x ustackframes=100 -n 'profile-97 /pid == $(pgrep -n crystal-run)/ { @[ustack()] = count(); } tick-60s { exit(0); }' -o out.user_stacks
$ stackcollapse.pl out.user_stacks | flamegraph.pl > user.svg
```
Guide to Product Management Training: Response from ChatGPT. it8Academy
Tags: product
Published: 2022-12-11 21:59:36


A product management training guide is a resource that provides guidance and instruction on the principles and practices of product management. It typically covers topics such as: 

- defining product strategy, 

- managing the product development process, 

- gathering and prioritizing customer requirements, 

- and measuring product success. 

Some possible components of a product management training guide include:

1. An overview of the role and responsibilities of a product manager

2. The product management lifecycle, including stages such as ideation, development, and launch

3. Techniques for defining and communicating product vision and strategy

4. Methods for gathering and prioritizing customer feedback and requirements

5. Tools and frameworks for roadmapping and prioritizing product features

6. Tips for working with cross-functional teams and stakeholders

7. Strategies for conducting market research and analyzing competitors

8. Guidance on how to measure and report on product performance and success

9. Best practices for managing product risks and balancing short-term and long-term goals.

Overall, a product management training guide should provide a comprehensive, practical overview of the key concepts and skills needed to be a successful product manager.

If you also need to be a part of a community to access the best resources and learn skills needed to excel as a product manager, check it8 Academy https://it8-academy.com/
Learning Ruby - Day 01
Published: 2022-12-11 21:58:41

I am writing this blog to record my own journey of learning Ruby, with the hope that it may help other learners advance their Ruby skills as well.

So, without further ado

## What is Ruby?

```
def greeting
 puts "Hello world"
end

```

Ruby is a **high-level** object-oriented programming language, that was invented by Yukihiro Matsumoto in the mid-90's. 

> **High-level** refers to the level of abstraction a programming language has from 'computer speak' AKA binary. 

Ruby is considered a general-purpose language and thus has a lot of different applications such as 
 - Web scraping and crawling
 - Building Web Servers ( check out this cool [post ](https://www.rubyguides.com/2016/08/build-your-own-web-server/)for more info )
 - Command Line Tools 
 - Web Applications
 
You can even develop games in Ruby ( using the Ruby2D library ). These are just a handful of possibilities you can create with Ruby, but I'm sure there are many more as well.

## Ruby Resources
Before I leave, I wanted to share some Ruby resources that I've discovered, and may be helpful for you as well.
- [Ruby in Twenty Minutes](https://www.ruby-lang.org/en/documentation/quickstart/)
- [The Odin Project ( Ruby Course )](https://www.theodinproject.com/paths/full-stack-ruby-on-rails/courses/ruby)
- [Learn enough Ruby to be dangerous](https://www.learnenough.com/ruby-tutorial)
- [FreeCodeCamp](https://www.youtube.com/watch?v=t_ispmWmdjY)
Gamification of Software Engineering
Tags: discuss, productivity, career, webdev
Published: 2022-12-11 21:50:56

Hello fellow devs, I've been dreaming about gamifying software engineering to maximize fun and engagement while creating transparency.

I believe that the hourly pay + 40 hours a week model is outdated and that there is a better way to motivate employees. How would you transform the workplace to maximize fun and create equal opportunity?
Another sad day for Open Source
Tags: opensource, github
Published: 2022-12-11 21:30:11

## Package Control (tool to handle extensions on Sublime Text) authors are against open source and they steal others projects.


Material Theme, my popular theme for many editors (milions of downloads and 11k ⭐️ on Github), and the most popular theme for Sublime Text, has been deprecated back in 2016. Some days ago we decided to drop the repository since we got 0 contributions and becase it was really old and including dangerous code and dependencies.

Today we found Sublime Text authors just stole the [WHOLE repository](https://github.com/SublimeText/material-theme) publishing the theme again, under their name, by replacing ANY reference of original authors with their names.

[We opened a pull-request ](https://github.com/wbond/package_control_channel/pull/8658)to restore the original theme made by us with all the credits. Let's see if they accept it, or they want to keep the stolen repository.

Remember, the original Material themes [live here](https://github.com/material-theme/). Other projects are just stolen and unsupported copies.

**Today I'll quit with open source**. If you love open source like i did, consider different text editors (there are many now, also free) of at least consider using a different theme.

If you want to help and build a new Material Theme for Sublime Text, [contact us on Twitter.](https://twitter.com/materialtheme)