teleren/devto huggingface dataset:
Launch your mvp here (prior to doing on Product Hunt)
Tags: mvp
Published: 2022-04-25 08:58:23

Hi! I’ve put together list of tools / websites where to launch your beta.

Feel free to use it, share it and improve it: https://docs.google.com/spreadsheets/d/1KDA-MiENWTN39780JJc1MDBV2irw4bokEF6MXcBKCek/edit#gid=0
Flutter Installation — Flutter Basic Programming — Part 2
Tags: flutter, dart, mobile, beginners
Published: 2022-04-25 08:55:45

Hello guys. I've finish two path of series [Flutter Programming](https://dev.to/hoangnguyen0403/series/17852). The second topic will help you installation Flutter environment before you start run code. So take a look at [Installation Guide](https://hoangnguyen0403.medium.com/flutter-installation-flutter-basic-programming-part-2-256628fb687) in Medium.
Chapter 1. Initial Setup
Tags: python, discord, tutorial, beginners
Published: 2022-04-25 08:31:01

Have you ever been on Discord? If yes, then you've probably seen a Discord bot before, they appear as regular members in a server, except with a "BOT" tag next to their username. In Discord, a bot can be summoned by sending a command in chat.

## Prerequisites

This tutorial expects you to have at least a decent understanding of Python. Rest assured, even if we will use `async` syntax, an understanding of asynchronous programming is not needed.

## Preparing our dev environment.

First things first, we'll need to install a version of Python higher than 3.8. If you don't already have it installed, you can install it [here.](https://www.python.org/downloads/)

Once you've installed Python, you can check if your python executable is working properly by making it print the Python version. On linux/macOS:

```shell
$ python3 --version
```

Windows:

```shell
C:\> python --version
```

If your Python executable is working properly, you should see this:

```shell
Python 3.8.10  # This number can be higher, but not lower.
```
This step is optional, but highly recommended. We will create a 
virtual environment using `venv`. In your Discord bot's root directory, execute this command:

```shell
python3 -m venv .venv  # Linux/macOS
```

Windows:

```shell
C:\> python -m venv.venv
```

We can activate our environment using `source` on Linux/macOS

```shell
$ source /.venv/bin/activate
```

On Windows:

```shell
C:\> /.venv/Scripts/activate.bat
```

Almost there! All we have to do now is to install `Discord.py v2.0` using `pip`. Linux/macOS:

```shell
$ python3 -m pip3 install -U git+https://github.com/Rapptz/discord.py
```

Windows:

```shell
C:\> python -m pip install -U git+https://github.com/Rapptz/discord.py
```

Once that's done, you did it! We have successfully prepared our environment to start writing our Discord bot, see you in the next tutorial!

## Further Reading

* [Python's `venv` module.](https://docs.python.org/3/library/venv.html)
* [Template's GitHub Repository.](https://github.com/BiasedKiwi/discordpy-template)
Q&A with Ex - FB Engineer offering free programming interview advice
Tags: programming, career, eventdriven, help
Published: 2022-04-25 08:21:36

5/5/22 @ 6pm EST

Programming Interview Prep Q&A with an Ex-FB engineer (Me). I'm a self-taught engineer that frequently conducted interviews during my 4 years at Meta, from E3->E7 !

I'll be taking questions about interview prep from the audience.

From advice on how to best leverage leetcode, to handling recruiters, anything interview prep related is fair game.

(This will be recorded)

[Link to join is here!](https://discord.com/invite/ff655vQw?event=968035137944178748)
Responsive Card / CSS
Tags: codepen
Published: 2022-04-25 08:14:05


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmbwmaudlal3thuvu73o.PNG)
<p>grid-column-template is the property that is used to configure the number of columns and width of columns in the grid container</p>

<p>👉 repeat function creates n number of columns of the given width w</p>

<p>👉 In this case our n value is auto-fit which automatically creates the correct number of columns by distributing the width of the grid container with the width of the items</p>

<p>👉 The width of each item is defined to be between 100px and the width of the container</p>

<p>This allows the items to wrap, but not shrink more than 100px</p>

{% codepen https://codepen.io/Jafari95/pen/gOoJKqY %}
Install Maven and run Ward monitoring tool on linux server to see server resources consumption in real time
Published: 2022-04-25 08:14:02

I am trying to install this monitoring tool on my Linux server to see the server resources consumption in real time. https://github.com/B-Software/Ward

However the documentation is not self explanatory assuming I have no experience with java and jar files before. I am having a hard time setting the tool up.

**Here is how I did it**
1. Install Apache Maven
 - `sudo apt update`
 - `sudo apt install maven`
 - `mvn -version`

2. git clone https://github.com/B-Software/Ward.git

3. cd Ward
4. `mvn clean package`

5. cd into the target directory and run `java -jar ward-1.8.8.jar`

6. Open localhost:4000 (or your server's ip followed by :4000)


Photo by <a href="https://unsplash.com/@firesmini?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Filipe Resmini</a> on <a href="https://unsplash.com/s/photos/beetle?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
The First Steps to De-google Yourself
Tags: degoogle, liberty, privacy, freespeech
Published: 2022-04-25 08:13:48

Fed up of Google? More and more people are beginning to recognize the evil Google is hiding and investors have begun putting money to create similar services _**minus **_ the awful practices Google have been doing to it's users such as using/sharing data forcefully on it's users along with suppressing freedom of speech.

However, to get rid of Google, you need to make sure the following items are checked:

1- Are you logging in to any sites or services using Google's authentication? If yes, your first step would be check which apps are connected to Google or use Google for login. Steps on how to see the list of apps [here](https://support.google.com/accounts/answer/3466521?hl=en).

Once you have identified which sites you login using Google, go to each site, use forgot password step in order to force those sites to give you a password. At this point, after that, you're able to login without using Google's authentication though you need to change the email address to more secure and reputable email providers such as ProtonMail.com.

2- Prepare an auto reply to all incoming messages to anyone contacting you over your Gmail asking them to instead email you over to your new email address.

3- Make sure you're not subscribed anymore to any Google Services such as Google Music, YouTube premium, etc...

4- Make sure to export any sheets/documents/stuff you have either on Google's services or Google Drive to somewhere else.

5- Prepare a list of bookmarks for your favorite YouTube videos that do not require login to view; since you will lose your playlists on YouTube once you do.

Finally, it's time to consider the following alternatives to Android's OS:
https://itsfoss.com/open-source-alternatives-android/

If you made it this far, congratulations, you have De-googled yourself and no longer under the mercy of big brother tech Google.
Design Pattern React : Custom Hooks
Tags: french, designpattern, react
Published: 2022-04-25 07:44:07

Rien de compliqué ici, Le custom Hook commence toujours par 'use', son état est indépendant et permet de partager une logique entre chaque components.

Implémentation:

Step 1: Déclaration du use custom
<code>
const useAdd = () => {

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

  const add = () => setCount(count + 1);

  return [count, add];
};
</code>

Le nom de la fonction doit commencer par 'use' et ensuite on fait ce qu'on veut, on peut utiliser les hooks de react return les valeurs qu'on veut, ect....


Step 2: Utilisation

<code>
const [count1, add1] = useAdd();
const [count2, add2] = useAdd();
</code>

Le point important à retenir, c'est que chaque instance du hook custom est indépendante.

{% codesandbox gsjoct %}
Two ways to AWS Resources' Drone View
Tags: aws, awsservices, awscli, console
Published: 2022-04-25 06:42:01

### Ever wondered to if you could see all the aws resources priced/not-priced under one single view? With time & need, we would have created resources in AWS account, but could not have known or guessed to see them all under one view. Well, let us see two ways of getting the view 

###


**Option 1 - View the resources in AWS management console**

- Login to your AWS account
- From the "Find Services" search & click on "Tag Editor"

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sdv4gcbbu36885cmn0q.png)
- AWS Resource Groups -> "Tag Editor" -> Console view is opened up
- Search criteria for Region, AWS Resources, Tags as Optional are provided for filter(s). Click on "Search Resources" to get the list of resources based on search criteria provided
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idgh7o80se7axdgtg3bs.png)
- For a full list of resources remove all filters and click on "Search Resources"
 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v2nd0qdzxtcrkwvk70sn.png)

**Option 2 - Get the list of resources via awscli**
 
- configure & connect to aws cli using AWS IAM User/Role/SSO User
- We will use the AWS Resource Tagging API to get list of resources via cli  

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


```
aws resourcegroupstaggingapi get-resources --profile <<profile-name>>
```

P.S. Listing resources from cli would be region wise (in above) as I have configured the profile for one region


Happy Resources View !!
How to proper use ambient enum from Definition file
Tags: typescript, enum
Published: 2022-04-25 06:39:14

If you guy need to declare your `enum` in definition file you may encounter a weird behavior and lead to something like this

```ts
/// module A
/// types.d.ts
export enum MyEnumA {
     A = "A"
}


/// module B
/// main.ts
import { MyEnumA } from 'A'
console.log(MyEnumA.A) 
// TypeError: cannot read property 'A' of undefined
```

## Why?
In the nutshell, Definition file cannot be reference as value and that is why they call it 'Ambient'

---

## How to properly solve it?

### `const enum` solution (Not recommended)
If your project have a very simple setup. You may able to use the typescript feature call `const enum` which 

> `const` as a prefix of `enum` will turn this `enum` into an inline constant in compiler time.
```ts
/// module A
/// types.d.ts
export const enum MyEnumA {
     A = "A"
}


/// module B
/// main.ts
import { MyEnumA } from 'A'
console.log(MyEnumA.A) 

/// module B compiled
/// main.js
console.log("A") // <<< here is the hardcoded value from enum

```
But why this approach is not recommended?
1. this approach does not support `isolatedModule` option
2. as `MyEnumA.A` is transpile into a hardcoded value. if `module B` enum value is change, you need to recompile `module A` again to update the hardcoded value
3. Typescript team does not recommend it https://www.typescriptlang.org/docs/handbook/enums.html#const-enum-pitfalls


---

### Declare ambient value in global scope (Recommended)
The proper solution is to assign this enum value ambient. As ambient is just an abstraction, in the implementation file you need to assign this value as you declare in ambient too.

So we will declare `enum` in definition file as an ambient and assign value into global scope variable

```ts
/// module A
/// types.d.ts
declare enum MyEnumAValue { // ambient enum
     A = "A"
}
declare var MyEnumA: typeof MyEnumAValue // ambient value

/// module B
/// types.ts as ambient value file
enum MyEnumAValue {
    A = 'A'
}

window.MyEnumA = MyEnumAValue; /// this will be checking with ambient if enum value is consistent with ambient enum
// or
global.MyEnumA = MyEnumAValue;


/// main.ts
import 'A'
console.log(MyEnumA.A) 
```

Here is how the type checking work
#### Consistent
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mt80kip5s417yoty536a.png)

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

## Summary
If you want to use a type definition file and you want to declare enum in it.

in the implementation file you need to assign the value as you declare in the ambient too.

The best way to do it is assign the enum value to global scope variable.
The Beauty of Open Source
Tags: opensource, mysql, dotnet
Published: 2022-04-25 06:31:48

At [Aista](https://aista.com) we have chosen to base our entire business model upon open source. For a traditional business based upon secrecy and _"trade secrets"_, such a choice might look weird, since we're basically giving away our filet mignon for free you might say. However, for a small startup it allows us to _"compete"_ in a segment traditionally unreachable for a small company such as us. Let me illustrate this with a simple story about our codebase to illustrate the point.

One of the databases we support in Magic Cloud is [MySQL](https://www.mysql.com/). MySQL's database connector for .Net has a long standing bug related to `async` retrieval of data. If MySQL was closed source, there would be no way anybody would really know, except that all attempts to fetch data from a MySQL database would be blocking invocations, resulting in much less scalability and throughput for your backend as it fetches data from your MySQL instance. At some point some smart developer understood the problem, and more importantly [how to fix it](https://mysqlconnector.net/). At Aista we had no idea about these issues with MySQL's default data connector. However our codebase was open source, so we didn't need to know, since due to our codebase being open source [another smart developer](https://github.com/bgrainger) discovered the issue for us, and [fixed it](https://github.com/polterguy/magic.lambda.mysql/pull/3#issuecomment-1107898160) without us having to do anything but click the _"Accept pull request button"_. Thank you Bradley Grainger.

If any one of the above parts of our infrastructure was closed proprietary code, there would be no way we would be able to have the above scenario unfold. If MySQL was closed source, the developers behind [MySQL Connector](https://mysqlconnector.net/) would not be able to neither discover it nor fix it. If our codebase was closed source, Bradley wouldn't be able to discover our issues, etc, etc, etc. Every single part of our codebase would need to be open source from the bottom to the top for us to be able to harvest the quality improvements that Bradley applied for us, for free may I add. So by arguably _"giving away our filet mignon for free"_, we get to play in a more _even_ playing field, where we can more easily compete with _"the big guys"_, resulting in quality improvements of our product, typically only achievable for huge companies such as Google or Microsoft. I think Linus Torvalds most adequately explains it as follows.

> Open Source is the only way I can create great software

Thank you MySQL, thank you Bradley, thank you MySQLConnector, and thank you Open Source - We love you all. For the record, if you want to contribute to Magic, the easiest place to start is [here](https://github.com/polterguy/magic.clone).
Frontend Mentor - URL shortening API landing page
Tags: javascript, react, scss, nabillatrisnani
Published: 2022-04-25 06:28:57

This is my solution to [Frontend Mentor URL shortening API landing page](https://www.frontendmentor.io/challenges/url-shortening-api-landing-page-2ce3ob-G)

---
## Table of contents
- [Overview](#overview)
  - [The challenge](#the-challenge)
  - [Links](#links)
- [My process](#my-process)
  - [Built with](#built-with)
  - [What I learned](#what-i-learned)
- [Author](#author)

## Overview
The challenge is to integrate with the [shrtcode API](https://shrtco.de/) to create shortened URLs and display them like in the designs.

### The challenge
**User should be able to:**
- View the optimal layout for the site depending on their device's screen size
- Shorten any valid URL
- See a list of their shortened links, even after refreshing the browser
- Copy the shortened link to their clipboard in a single click
- Receive an error message when the `form` is submitted if:
  - The `input` field is empty

### Links
- [Solution](https://github.com/NabillaTrisnani/frontendmentor_url-shortening)
- [Live Preview](https://nabillatrisnani-url-shortening.netlify.app/)

## My process

### Built with:
- HTML5
- SCSS
- Bootstrap
- [React](https://reactjs.org/)
- [shrtcode API](https://shrtco.de/)

### What I learned
- Create empty array in `localStorage`
```javascript
localStorage.setItem('data', '[]');
```
- Put fetched data to array in `localStorage`
```javascript
let param = this.state.value;

fetch(`https://api.shrtco.de/v2/shorten?url=${param}`)
  .then((res) => res.json())
  .then((result) => {
    // if localStorage 'data' is null make an empty array
    if (localStorage.getItem("data") == null) {
      localStorage.setItem("data", "[]");
    }

    // get localStorage 'data' as var old_data
    var old_data = JSON.parse(localStorage.getItem("data"));

    // if fetch is ok return localStorage 'data' push result
    if (result.ok === true) {
      old_data.push(result);
    }

    // set localStorage 'data' to new data from push result
    localStorage.setItem("data", JSON.stringify(old_data));

    // set state items equal to result, linkStorage to localStorage 'data'
    this.setState({
      items: result,
      linkStorage: JSON.parse(localStorage.getItem("data"))
    });
  })
  .catch((error) => console.log("error", error));
```

---

## Author
- Frontend Mentor: [@NabillaTrisnani](https://www.frontendmentor.io/profile/NabillaTrisnani)
- Github: [@NabillaTrisnani](https://github.com/NabillaTrisnani)
- LinkendIn: [Nabilla Trisnani](https://www.linkedin.com/in/nabilla-trisnani/)
- Twitter: [@NabillaTrisnani](https://twitter.com/NabillaTrisnani)
Assignment Help
Tags: beginners, tutorial, html, webdev
Published: 2022-04-25 06:17:18

We are leading the best quality [assignment help](https://valueassignmenthelp.com/) for students with Ph.D. and local academic writers. Value [assignment help](https://valueassignmenthelp.com/) is the base of services that offer assignments according to your semesters and subjects codes. Find our services in Australia, Germany, Malaysia, U.A.E, India, Canada, South Korea, and the U.S.A. VAH has 2000+ writers in each country to help with your assignment complete before the deadline

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afqa4lgownxe45n5f99b.png)
Want [assignment help](https://valueassignmenthelp.com/) online Let Our Experts Help you. Value [Assignment Help](https://valueassignmenthelp.com/) is the best assignment service provider offered online by a team of experts. Our experienced experts are well known for providing assistance with almost all assignment types. Our cost is pocket-friendly for students. Thus, with us, you will get your work in a cost-effective manner.
🔁automatic-loading-and-redirecting🔁
Tags: html, css, javascript, redirect
Published: 2022-04-25 06:10:59

You will enter a loading page and then you will be redirected to a new page

You can download if you like😜: [Project Download](https://github.com/Amirrezaheydari81/automatic-loading-and-redirecting)

❤ Thank you for following my Instagram: [My Page](https://www.instagram.com/amirrezaheydariinsta)
Remix and dynamic routes
Tags: react
Published: 2022-04-25 05:59:44

Now that we have our [post overview page in Remix](https://daily-dev-tips.com/posts/remix-and-data-loading/) let's see how we can add the individual pages from this data.

We are already able to click on the posts on the overview and go to each respective page like:

- `posts/post-1`
- `posts/post-2`

But for now, they are non-existing, so let's see how we can make those work dynamically.

If you would like to follow along, download [this GitHub repo](https://github.com/rebelchris/remix-starter/tree/data-handling) as your starting point.

## A quick recap

We've added a posts model in the previous article, which acts as our data source. You can find it here: `app/models/post.server.ts`.

For now, it simply outputs an array of posts, but eventually, we'll work to make this load from an external source.

To load these posts on the overview page, we use the `useLoaderData` hook built into Remix.

We are going to apply the same concept to create our dynamic pages.
Like many of these modern frameworks, we have an option to create one file that can serve as a dynamic file.

In Remix, we use a dollar sign to make a file dynamic.
Create the dynamic post file: `app/routes/posts/$slug.tsx`.

```js
import { json, LoaderFunction } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';
import { getPost } from '~/models/post.server';

type LoaderData = {
  post: Awaited<ReturnType<typeof getPost>>,
};

export const loader: LoaderFunction = async ({ params }) => {
  return json({
    post: await getPost(params.slug),
  });
};
```

This will now find the post matching this param based on the slug.

However this `getPost` function doesn't exist yet, so let's open our `model` and create it quickly.

```js
export async function getPost(slug: string | undefined): Promise<Post> {
  const posts = await getPosts();
  return posts.filter((post) => post.slug === slug)[0];
}
```

As you can see, this is based on the existing function that retrieves all the posts, but we limit it to match based on the slug.

And then, we can return some HTML and render our post title, for instance.

```js
export default function PostSlug() {
  const { post } = useLoaderData() as LoaderData;
  return (
    <main className="mx-auto max-w-4xl">
      <h1 className="my-6 border-b-2 text-center text-3xl">
        The post title: {post.title}
      </h1>
    </main>
  );
}
```

Let's try it out and see what happens.

![Remix and dynamic routes](https://cdn.hashnode.com/res/hashnode/image/upload/v1650011642440/JW29M8qA1.gif)

Yes, we did it.
We now have managed our dynamic routes in Remix.

You can find the completed code on [GitHub](https://github.com/rebelchris/remix-starter/tree/dynamic-routes).

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)