teleren/devto huggingface dataset:
It Is Ok To Build Your Startup Where There Is Competition
Published: 2022-12-08 05:48:46

It sounds counterintuitive and unnecessarily aggressive, but it is ok. It sort of is frowned upon but not illegal.

Look at these guys:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/884f76unbw55vw6ptbqa.png)
That guy on the left came back one afternoon after a fight with his missus, and this guy had popped up. Then he had another fight with his missus that night. Plus, it probably will turn out that that new guy was his spiteful brother, making you feel worse for this unknown (Chinese?) guy. Poor guy.

So what happens now are they both gonna have to get good at their business and can’t just be fighting their misuses no more.

And they all get a piece of the pie, which they can hide somewhere and eat.

I built a Proxies API like that. Right next to my competition. Right after a fight.

And I don’t need much from it. Some crumbs here and there, and I will do just fine.

Plus, I get to learn from the bunch of the guys before me. That’s where their 80/20 rule comes in. It should be renamed the ‘here’s how the pioneers wasted most of their effort finding the way (the 80%) and here is what finally worked (the 20%), so just copy this’ rule.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ie5inol77vw500de7tl.jpeg)
Using the 80/20 rule and some real personal smarts, I was able to work out.

1. The kind of places they got traffic from, it is hilarious to see the stunts they tried before they realized the now obvious. One guy even started a Facebook group! What DUDE! Developers HATE talking work on Facebook. I could have told you that then.

2. I know what kind of content works, so I just write those but way better. Use their complete exhaustion to my advantage 😈

3. The type of ads they have put up. You can see the evolution of their ads using SpyFu.

4. The kind of website copy they used. You can use the Way back Machines to see their journey from humble beginnings to sophisticated war mongering beasts that they have become, and you know, learn from that.

5. Learn the amount of work they put in. I just need to put in a couple of hours more than them, to be honest, and I will be well & truly ahead. But seriously, how the hell do you know what it takes to do anything? It turns out it is not much in my case, but how DO you know that?

6. The kind of money they make. Let us face it, and everyone loves to be on podcasts where they like to vomit out every personal struggle and detail about themselves, their pets, and their businesses. Good for them.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpcpht049uf3ktwv0cgu.png)
7. I am glad I came in late. In fact, I would have been well advised to probably wait another year.

8. They don’t write half as funny as me. Which means. I have a better Rotating Proxies Service, AND I can make you laugh. That’s something you always look for in a Rotating Proxies API Service.

9. And lastly, never, ever get on a podcast. No, thank you.

The author is the founder of Proxies API, a proxy rotation API service.
Flutter Kanalları
Tags: flutter, dart, channels, mobile
Published: 2022-12-08 07:06:03

Bir flutter kanalı(channel) geliştirme makinenizde temel flutter framework'ünün ne kadar hızlı değişeceğini yönetir. `Stable` en az dalgalanmayı `master` ise en çok olanı temsil eder.

## Flutter kanalları

Flutter'ın üç yayın kanalı vardır: stable (kararlı), beta ve master.
[Belgeler](https://docs.flutter.dev/development/tools/sdk/upgrading) daha yeni bir sürüme ihtiyacınız yoksa `stable` kanalını kullanmanızı önerir.

**stable:** 
Stable kanal, flutter'ın sahip olduğu en yüksek kaliteli yapıları temsil eder. Üç ayda bir (kabaca) yayınlanır ve aradaki kritik sorunlar için düzeltilir. Genel olarak üç kelime ile özetlenebilir "güvenli", "olgun" ve "uzun vadeli".

**beta:**
Beta kanalı, Flutter'ın henüz üretime hazır olmayan ancak test ve geliştirme için yeterince kararlı olduğu düşünülen yayın öncesi sürümlerini içerir ve daha hızlı bir kadansla rahat olanlar için stable olana hızlı hareket eden bir alternatif sunar.
Aylık olarak yayınlanır ve yayınlanmadan önce stabilize edilir. Üç ayda bir ise stable branch'a dönüşür.

**master:**
Master kanalı aktif geliştirme kanalıdır. Bu kanalda destek sağlanmaz ancak buna karşın kapsamlı birim testleri yürütülür. Bu kanal, katkıda bulunanlar veya kararsız yapılardan memnun olan ileri düzey kullanıcılar için doğru kanaldır. Bu kanalda bir şeyler bozulabilir ancak hızlı şekilde de düzeltilir.


## Flutter kanallarını değiştirme:

Mevcut kanalınızı görüntülemek için aşağıdaki komutu kullanın:

` flutter channel`

Başka bir kanala geçmek için flutter channel <channel-name> kullanın. Kanalınızı değiştirdikten sonra, Flutter SDK'sını ve bağımlı paketleri indirmek için flutter upgrade'i kullanın.

Örneğin:

```
 flutter channel beta
 flutter upgrade
```



Kaynaklar:
[docs.flutter.dev](https://docs.flutter.dev/development/tools/sdk/upgrading)
[whats-new-in-flutter-2-8](https://medium.com/flutter/whats-new-in-flutter-2-8-d085b763d181)
[Flutter-build-release-channels](https://github.com/flutter/flutter/wiki/Flutter-build-release-channels)
How to get a Google and a WhatsAPP social icon ?
Tags: discuss
Published: 2022-12-08 07:05:54

Hello !
I’ve done the social menu and displayed it.
Everything is ok and works… and i am already VERY PROUD of me because i’m not computer scientist at all 🙂

Everything works great except in the icons on my social icon menu :

– I need an icon with the “G” for Google, because i want to link my society page on Google
– I need an icon “WhatsAPP” so people can write me using whatsapp by clicking this social icon

I’m using wordpress, and Anima free theme.

Could you please tell me how to do ? Thanks a lot !

i’ve put my website [gbfunda](https://gbfunda.com/gbwhatsapp-download/) on “work in progress” page.
Secrets in Kubernetes
Tags: kubernetes, linux, devops, beginners
Published: 2022-12-08 07:02:01

## Introduction
Hi, I am Akshay Rao currently working in Annotation.i this blog I tried to manage secrets like username and password using kubectl.
Sensitive information, such as login credentials used by Pods to access services, is kept in a Secret object. A Secret might be required, for instance, to keep track of the username and password required to access a database.
I am using minikube and Base64 to encode the secrets.
## Create and encode a Secret
first encode the raw data then encode with base64 and put it in a file.

![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3c5wplikhqbfdiduy2d.png)
## Decode a secret

![Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k34s8knxsearud42of93.png)
## Edit and delete the secret
`kubectl kubectl edit secrets "secret name"`

![Image 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/venaextl10sn2ck7w72a.png)
`kubectl delete secret "secret name"`
## Conclusion
Suggest in the comments on which kubernetes topic should i write blog.
Thank you
Aiming for LightHouse high score with services built with React+NextJS.
Tags: webdev, react, nextjs, performance
Published: 2022-12-08 06:52:00


I've recently been working on a web service that I've been developing for a long time, and I've been working hard on tuning it and have been getting good scores on LightHouse, so I would like to share what I was care of during my development.

![LightHouse score](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz0eeolo8tr70r0u40za.png)


## Performance

- Delay component loading as needed using `loadable/@component`, `react/lazy`, or something else.
  - To retrieve external resources, use in combination with `react/Suspense`, etc.
- Correctly apply `useMemo` and `useCallback` to values and functions.
  - Values and functions are all memoized by setting deps, which prevents unnecessary regenerations when re-rendering.
  - Other details are in the [Properly understand Hooks to improve your application performance](https://dev.to/jpnykw/improve-performance-by-using-hooks-correctly-1jeo).
- Compress resources and source code to reduce communication volume.
- Implementing computationally expensive processes with `WASM`.
  - It is also a good idea to use `WebAssembly` for heavy functions.


## Follow HTML5 semantics
This should always be done with care from the implementation stage. Below are some examples that could be put into practice.

- Observe the order of Heading tags (`<h1>`, `<h2>`), etc.
  - e.g. Don't use `<h2>` before `<h1>`.
- Don't forget to assign the necessary attributes to the tag
  - e.g. Always add `width`, `height`, and `alt` attributes to `<img>`.
  ![attribute example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oitw4a7mup4g0rpd1yex.png)
  - Learn more about [Accessible Names](https://www.w3.org/WAI/ARIA/apg/practices/names-and-descriptions/).


- Don't assign inappropriate attributes to any tag
  - e.g. Don't add `aria-label` attribute to `<span>`.
- Don't bind inappropriate events to any tag
  - Don't bind `onClick` to `<div>` (use `<button>` if you want it to click)
- etc...

## Accessibility
- Don't use `.png` or `.jpeg` as image resources
  - Use `.webp` for images.
     - By far the best conversion tool is [Squoosh](https://squoosh.app/)!
  - Use `.mp4` or `.webm` if you want animation (don't use `gif`)
     - You can use `ffmpeg` to convert to `webm` and so on.

- Pay attention to the contrast ratio between the background and the elements (consideration for users with color vision characteristics).

  - If you are using Chrome, you can use DevTools to focus on an element to see if it has the proper contrast.
  ![contrast example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxl0yj48evbmc5myadyp.png)



## package.json

I used [bundlephobia](https://bundlephobia.com/) to scan `package.json`. It also gives me an estimate of how long it takes to load in a 2G or 3G environment.

## next.config.json

For now, I will definitely enable `swcMinify`. But I don't have any other settings in particular.
872. Leetcode Solution in cpp
Tags: cpp
Published: 2022-12-08 06:48:25

```cpp
/**
 * Definition for a binary tree node.
 * struct TreeNode {
 *     int val;
 *     TreeNode *left;
 *     TreeNode *right;
 *     TreeNode() : val(0), left(nullptr), right(nullptr) {}
 *     TreeNode(int x) : val(x), left(nullptr), right(nullptr) {}
 *     TreeNode(int x, TreeNode *left, TreeNode *right) : val(x), left(left), right(right) {}
 * };
 */
class Solution {
 public:
  bool leafSimilar(TreeNode* root1, TreeNode* root2) {
    vector<int> leaves1;
    vector<int> leaves2;
    dfs(root1, leaves1);
    dfs(root2, leaves2);
    return leaves1 == leaves2;
  }

  void dfs(TreeNode* node, vector<int>& leaves) {
    if (!node)
      return;
    if (!node->left && !node->right) {
      leaves.push_back(node->val);
      return;
    }

    dfs(node->left, leaves);
    dfs(node->right, leaves);
  }
};
```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/leaf-similar-trees/
How to Get Started With Node and NVM on MacOS (M1/ M2) in 2023
Tags: node, nvm, macos, javascript
Published: 2022-12-08 06:41:01

## What are Node and NVM?

Node.Js, commonly known as Node, is a JavaScript runtime for building server-side or desktop applications. Node Version Manager(NVM) allows you to manage Node versions on your device. It is important because different projects on your device may be needing different versions of Node.

Having NVM and Node installed is a likely requirement for software engineers in 2023. This article has steps that make it easy to install Node and NVM on the new Apple Silicon Macs.

---

## Step 1: Installing NVM

Run the following command in a new terminal window that will list all the files including hidden files in your device:

```
ls -a
```

If `.zshrc` is missing from the list, you need to create it by running the following command:

```
touch .zshrc
```

Insure you have the `.zshrc` now available in the list. Use cURL command from [this site](https://github.com/nvm-sh/nvm#install--update-script) to install NVM. Copy and run this command in your terminal. It will look similar to this:

```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.2/install.sh | bash
```

You will need to refresh the `.zshrc` file by running the following command:

```
source .zshrc
```

You can now confirm that you have NVM installed by running the following command. You should get a figure like `0.39.2`.

```
nvm -v 
```


## Step 2: Installing Node

Installing Node is now easy. Run this command in your terminal:

```
nvm install node
```

To install a specific version of Node, just add the version number at the end like this:

```
nvm install 18.12.1
```

To use Node, you will first have to run the following command in your terminal:

```
nvm use node
```

or run a specific version of Node:

```
nvm use 18.12.1
```

Remember Node installation includes the Node Package Manager(NPM). You are ready to use all the resources that Node presents to you. Thank you for getting to the end of this article. You are great!

Photo by <a href="https://unsplash.com/@altumcode?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">AltumCode</a> on <a href="https://unsplash.com/s/photos/macbook?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Git Flow
Tags: chatgpt, gitflow
Published: 2022-12-08 06:34:24

Git flow is a branching model for Git, a popular version control system. The Git flow model is designed to help developers work on large, complex projects by defining strict rules for branching and merging. The basic idea behind Git flow is that there are two main branches in a Git repository: the `master` branch, which represents the production-ready code, and the `develop` branch, which contains the latest development changes. When a developer wants to start working on a new feature, they create a new branch off of the `develop` branch, and when they are ready, they merge their changes back into the `develop` branch. This allows multiple developers to work on different features simultaneously without interfering with each other’s work. When the code in the `develop` branch is ready to be released, it is merged into the `master` branch and tagged with a release number.

Here is a text-based diagram of a Git flow branching model:

```
          A---B---C develop
         /
    D---E---F---G master
```

In this diagram, the `develop` branch (`A-B-C`) represents the latest development changes, and the `master` branch (`D-E-F-G`) represents the production-ready code. When a developer wants to start working on a new feature, they create a new branch off of the `develop` branch. For example, if a developer wants to add a new feature, they might create a branch called `feature1`:

```
          A---B---C---H feature1
         /
    D---E---F---G master
```

When the developer is finished working on the `feature1` branch, they can merge their changes back into the `develop` branch, using a merge commit:

```
          A---B---C---H---I develop
         /
    D---E---F---G master
```

Once the code in the `develop` branch has been tested and is ready to be released, it can be merged into the `master` branch and tagged with a release number:

```
          A---B---C---H---I---J develop
         /
    D---E---F---G---K master
```

The Git flow model is just one way of using Git for branching and merging. There are many other branching models and strategies, and the best one for your project will depend on your specific needs.
Data Science Internship Program | Why Become a Data Scientist
Tags: datascience, beginners, news, discuss
Published: 2022-12-08 06:30:51

Check out this video about the Data Science Internship Program, in which we go over some facts to help you understand why Data Science is the job of the century and why you should become a Data Scientist. Click on the link below.
{% embed http://bit.ly/3VfB3Bf %}
Codebin - MongoDB Atlas Hackathon 2022 Submission
Tags: atlashackathon22, dotnet, mongodb
Published: 2022-12-08 06:30:51

## What I built
I have built a platform (Codebin) where user can create and view their code snippets. Users can access the list of snippets anytime using this platform.

### Category Submission:
Think Outside the JS Box


### App Link
The application is live at [codebin.onrender.com](https://codebin.onrender.com/).



### Screenshots

![codebin home page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vzh5vxvztlis59xyri7m.png)


![codebin snippets list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm16t63ubviazrwwhhg9.png)



![codebin create snippet form](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9yyuhphtwkc15t4kfuvh.png)


![codebin view snippet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fen8c1xmxjnmlrnzawok.png)



### Description
This platform is used to create and view code snippets.
The users can view all their code snippets from the dashboard.
The users can also add tags snippets.
There is also a search feature available in the app which uses the MongoDB atlas' full-text search feature. It helps users to find the snippet quickly.

### Link to Source Code

{% embed https://github.com/frikishaan/codebin %}

### Permissive License
[MIT](https://github.com/frikishaan/codebin/blob/main/LICENSE)

## Background

I got inspiration from the Pastebin, where user can create pastes with any content and access them from anywhere. So I decided to make an application where users can store their code snippets and access them whenever they need from the dashboard.
Users can also search the code snippets using the full-text search functionality built using the MongoDB's in-built feature.


### How I built it

I used MongoDB as a primary database for the application.

![mongodb atlas dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2a4zwzamawpmsizk8smq.png)


I learned how to use MongoDB with .NET applications.

I have also used MongoDB's [Full-text search feature](https://www.mongodb.com/basics/full-text-search) to search for code snippets for a user in application.


![mongo db atlas search index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltuoytfyb09f6c0aqpu5.png)


![codebin search feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6do16dxbm6k5cj4624rm.png)


I also learned some do's and don't while creating a .NET Core application.

I have also learned implementing authentication using Auth0 in a .NET Core application.


### Additional Resources/Info

1. [Courses from MongoDB](https://learn.mongodb.com/learning-paths/using-mongodb-with-c)

2. [Building ASP.NET app with MongoDB](https://www.youtube.com/watch?v=gM4m5LizxL8)

3. [Creating RESTful APIs using .NET Core](https://www.youtube.com/watch?v=jJK9alBkzU0)

4. [Adding Auth0 in .NET Core App](https://www.youtube.com/watch?v=CZIxU9heXYg)
What is ChatGPT
Tags: chatgpt
Published: 2022-12-08 06:29:30

GPT, or Generative Pretrained Transformer, is a type of language model developed by OpenAI. ChatGPT is a large language model that has been trained to generate human-like text in response to a given prompt. It is based on the GPT-3 model, which is one of the largest and most advanced language models currently available.

The purpose of this model is to enable users to have natural, human-like conversations with a computer. This is accomplished by feeding the model a prompt, such as a question or statement, and having it generate a response based on its training. Because i thas been trained on a vast amount of text data, it is able to generate responses that are highly coherent and almost indistinguishable from those written by a human.

One of the key advantages of ChatGPT is its ability to generate responses that are relevant to the given prompt and context. This allows it to engage in lengthy, coherent conversations on a wide range of topics, providing users with a more natural and engaging conversation experience.

Overall, ChatGPT is a powerful tool for generating human-like text and enabling natural, human-like conversations with computers. It has many potential applications, including in chatbots, virtual assistants, and other natural language processing systems.
Increase productivity by visually differentiating between environments
Tags: productivity, angular, html, codever
Published: 2022-12-08 05:47:26

## Going "green"

As mentioned [How I manage my dev bookmarks to save time and nerves](https://dev.to/ama/how-i-manage-my-dev-bookmarks-and-save-time-and-nerves-56ae) I use heavily [Codever](https://www.codever.land) to manage my bookmarks and code snippets, so there is always a browser tab open with the website. Lately I've also been developing quite a bunch of [new features](https://github.com/codeverland/codever/tags) on the project. Lots of testing happens in the browser, and until now there was no quick way to differentiate between the production and development version, unless I look at the URL in the browser's navigation bar of course.

Because I am always looking for things to make me life easier, I've remembered of an old trick to help me much easier differentiate between the two versions:
- change the **color** of the **navigation bar**
- change the **favicon**

Both are now <span style="color:green"><b>green</b></span> for the dev environment 🤓🟢

See in the pictures below how easy it's to recognise the versions without looking the url


![recognise when in dev](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nqe353fdqahlo8u0y1d.jpeg)


![recognise when in prod](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0g5k9nbm1ryeyp0e27g.jpeg)


## Code changes

### Favicon
The code changes were minor. First change the `favicon` `href` attribute **when not production**

```typescript
export class AppComponent implements OnInit {
    favIcon: HTMLLinkElement = document.querySelector('#favicon');
    readonly environment = environment;

    ngOnInit(): void {
        if (environment.production === false) {
            this.favIcon.href = 'assets/logo/logo-green.svg';
        }
    }
}
```

> See [Configure and use environment specific values in Angular and html template](https://www.codever.land/snippets/6389997bb160cb1fab2430fe/details) to see how to work with Angular environments


### Navigation bar color

Then set the navigation's bar color to <span style="color:green"><b>green</b></span> also based
on **not production** condition

```html
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top shadow"
     [ngClass]="{'navbar-dev' : environment.production === false}" >
```

The `navbar-dev` css class

```css
.navbar-dev {
  background-color: darkgreen !important;
}
```

> See [Conditional css class in angular html element ](https://www.codever.land/snippets/638daa94d00726522c6cdd7c/details) on how to change a class in Angular dynamically


## Multiple dev/testing environments

Of course if you have **more dev/test environments** like **integration** or **preprod**, consider differentiating them as well, your developers will thank you.

You won't believe how these little tweaks can improve your development experience 💪
Responsive Website Using HTML and CSS | CSS Grid and Flex Box
Tags: html, css, tutorial
Published: 2022-12-08 06:16:52

Responsive Website Using HTML and CSS

in this tutorial we will learn How to make a responsive website using HTML and CSS.

So, guys, you must have knowledge of HTML and CSS, then you are able to see the video and also you will learn to understand that. 

If you don't have any knowledge and ideas in HTML and CSS please don't watch the video.

Guys, inside the complete video tutorial you will learn step-by-step usage of CSS grid and also flexbox to manage the content inside your website.

Also, you will learn how to use media queries for different screens size. So, guys, you will learn a lot of new things inside the complete video.

I hope this tutorial is very helpful and beneficial for you.

{% embed https://www.youtube.com/watch?v=ry5ZxekCYdo %}