teleren/devto huggingface dataset:
tfcmt supports updating comments
Published: 2022-04-24 23:38:55

![image](https://user-images.githubusercontent.com/13323303/164969354-02bdd49a-547e-4951-9262-033ec5b4db11.png)

--

![image](https://user-images.githubusercontent.com/13323303/164969385-355e801e-3d58-4b75-9657-0bcc10da8d12.png)

In this post, we introduce tfcmt's new feature, updating comments instead of creating new comments.

[tfcmt](https://github.com/suzuki-shunsuke/tfcmt) is a CLI tool to improve the experience of CI of Terraform.
By posting the result of terraform plan and terraform apply to GitHub Pull Requests as a comment, you can know the result quickly without browsing the CI web page.

About tfcmt, please see the [document](https://suzuki-shunsuke.github.io/tfcmt/).

From [tfcmt v3.2.0](https://github.com/suzuki-shunsuke/tfcmt/releases/tag/v3.2.0), tfcmt has supported updating existing comments instead of creating new comments.

This is really useful to keep Pull Request comments clean.

To use this feature, please set `-patch` option.

```console
$ tfcmt plan -patch -- terraform plan -no-color
```

You can also set the `plan_patch` field in the configuration file.

```yaml
plan_patch: true
```

The command line option `-patch` takes precedence over configuration file option `plan_patch`.

If you want to disable patching although `plan_patch` is true, please set `-patch=false`.

```console
$ tfcmt plan -patch=false -- terraform plan -no-color
```

If the patch flag is enabled, tfcmt finds the comment and updates it. If no comment is found, tfcmt creates a new comment.

For detail, please see the [document](https://suzuki-shunsuke.github.io/tfcmt/plan-patch).
How to Switch to the default GPU for High Performance Graphic Card in Windows 11
Tags: performance, gpu, windows, beginners
Published: 2022-04-24 23:31:14

When using computers, we tend to utilise the in-built integrated graphics processors that help with providing basic features at a low power consumption. 

Sometimes, you may need to use apps (or games) that require high processing power. Windows 11 automatically switches between graphics cards, depending on the apps you are using and the games you’re playing. Though at times you may need (or be forced) to switch between a discrete video card (dedicated for high processing power) and your inbuilt processor.

### Why the need to Switch between default GPU for High Performance GPU?
When working on normal apps e.g. Excel, the integrated graphic card chip is powerful enough to handle the program. However when doing projects in Data Science and also "heavy gaming" ( for example: RIDE 4) 
> Recipe for a computer meltdown without a High Performance GPU!

Normally there is an automatic switch between the two graphics cards; but with apps or programs with bugs, you will be forced to change the GPUs manually.

Below are steps to follow for **SWITCHING** the graphic cards:

**Step 1.** Open the Settings app. On **System** window --> click on **Display**.
![Step 1 of switch to GPU in Windows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/44alzgjt1h6wx2pph0dz.png)

**Step 2.** From the **Display** window, scroll down to **Graphics**.
![Step 2 of switch to GPU in Windows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2tuqrt8r5ydx7bfnrsof.png)

**Step 3.** On the **Graphics** page, you can either choose between adding an app from **Desktop app** or **Microsoft app** or simply **Search for the app** that needs the High Performance GPU.
![Step 3 of switch to GPU in Windows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bf7nocvu5pglx3jkhmj.png)

**Step 4.** Click on the app, --> **Options** button.
![Step 4 of switch to GPU in Windows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pil67zdywg9orn5xakzl.png)

**Step 5.** A dialog box will pop up (**Graphics preference**) Click on the preferred graphical Card and then save.
![Step 5 of switch to GPU in Windows 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u03gdmdtj9hnz5u1c1yk.png)
Setup begins. #2
Tags: javascript, react, redux, webdev
Published: 2022-04-24 23:17:09

## Let's get right into the action. 

---

## Creating React / Redux from template

> ``npx create-react-app table-prep --template redux
cd table-prep
code .
``

You've all seen it, such a beautiful series of letters and dashes. Even ending in punctuation! It's like it was meant to be. But we're not done. I'll be adding more in the future, but for now I'm going to add just one of my favorites.

## Adding Styled Components Package

`npm install --save styled-components`

I will be using **Styled Components** for my components. It's beautiful, not just in the browser but also in it's reusability and organized file structure. 

On the topic of beautiful, let's go ahead and add some scripts to to enable easy linting.

## Adding Scripts
Inside of `package.json` we are going to add 2 lines of code to our `scripts` object.

![eslint script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f7ivs1ptrwpp9lllx01.png)

`"lint": "eslint ."` 
Allows us to run `npm run lint` in our terminal to check for linting errors in all of our code.

`"format": "eslint . --fix"`
Allows us to run `np run format` in our terminal to have eslint edit our files for us to fix errors or warnings ([when it's something that eslint is capable of fixing](https://eslint.org/docs/rules/)).

## Removing some of the boilerplate.

`src/App.js`
I removed all of the code within the `<div className="App></div>`

`src/features`
I removed every file from within features and any references to the exports in other files.

`src/app/store.js`
I removed the old reducer

And.... That should be it for now. I might have removed something I forgot about, and I will definitely remove / clean up some of the files later on. But for now, it's time to actually _start_ writing code.

---

[Header Photo by Lukasz Grudzien](https://unsplash.com/@12photography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/)
Redux middleware
Published: 2022-04-24 22:48:22

Here’s what a simple middleware looks like:
function simpleMiddleware({ getState, dispatch }) {
  return function(next){
    return function(action){
 	 // processing
 	 const nextAction = next(action);
 	 // read the next state
 	 const state = getState();
 	 // return the next action or you can dispatch any other action
 	 return nextAction;  
    }
  }
}
Join me in my journey through Redux (and food). #1
Tags: webdev, react, redux, programming
Published: 2022-04-24 22:43:52

I enjoy cooking, I enjoy web development, and I really enjoy React/Redux. What better way to put those all together than with a tried and true... 
**Recipe Project!** 

For now I am calling this project `TablePrep` but that is **very** much subject to change when I actually come up with a good title.

As I embark on this well traveled road, I'm going to document my learnings, struggles, and hopefully success.

Imagine this blog as a `git commit` for my life.

## Why?
- Experience
- Portfolio Project
- Learn languages and recipes

## How?
- React / Redux
- Styled Components
- Firebase (_later_)

---

[Header Photo by Anshu A](https://unsplash.com/@anshu18) on [Unsplash](https://unsplash.com)
Strings 💫 🌌 ✨
Tags: dart, rawstring, string
Published: 2022-04-24 22:37:07

${expression} kullanarak bir ifadenin değerini bir string'in içine koyabilirsiniz.

```
class Person{
String firstName;
String lastName;
int age;
Person(this.firstName, this.lastName, this.age);
}
main(){
Person p = new Person('mark','smith', 22);
print('The persons name is ${p.firstName} ${p.lastName} and he is ${p.age}');
}

```
Çıktı:

```
The persons name is mark smith and he is 22
```


**Raw Strings**
Bir string'i biçimlendirmek için escape karakterinii kullanabilirsiniz. Örneğin: '\n', 'yeni satır' anlamına gelir.
Kaçış karakterlerini yok saymak için 'r' kullanın.

```
main(){
print('this\nstring\nhas\nescape\ncharacters');
print('');
print(r'this\nstring\nhas\nescape\ncharacters');
}
```

Çıktı:

```
this
string
has
escape
characters
this\nstring\nhas\nescape\ncharacters
```

Örnek kod: – ‘Dollar Sign’

```
void main() {
double price = 100.75;
print('Price is: \$${price}');
}
```

Çıktı:

```
Price is: $100.75
```

**Runes**
Runes bir string'e kodlanmış özel karakterlerdir.

Örnek kod:

```
main() {
var clapping = '\u{1f30C}';
print(clapping);
}

```

Çıktı: 🌌


Örnek kod:

```
main() {
var clapping = '\u{1F31F}';
print(clapping);
}

```

Çıktı: 🌟

daha fazlası için: https://www.compart.com/en/unicode/block/U+1F300


Resource: Learn Google Flutter Fast - Mark Clow
Another project added semi-complete
Tags: react, ruby, webdev, beginners
Published: 2022-04-24 22:04:11

Today I submitted my coding project for my coding bootcamp witch utilized both a React client side model and a Ruby server side model. The project was built between me and my partner and was a amazon-clone(_very original I know_). Building this project was really fun and a lot of work for one week so there are tones of areas in the code that need refactoring and revision. Also I wanted to create a filter page for the items in the inventory, a render of the average rating of each product, and a working login page, however just developing the application in its current state came with its fair share of struggles. I think whenever I have more time I plan on revisiting this project and adding those final touches. The biggest error or issue I was having is that I tried to use the useContext feature from React however it was creating some bugs due to how the app was mounting. This was causing all of my data objects to not set in state. Some solutions I tried to implement to work around this was to use a useEffect hook and a time out function, however it was still having some issues so I resulted to prop drilling, which would not be the optimal solution for sure. The coding problem I had the most fun creating and solving was the rating feature that would generate either a filled star or an outlined star depending on the rating of the product. To achieve this I created an array of five zeros and applied a fill method based on the object rating amount and would fill the given positions in the array with a value of 1 and the return a star if the value was 1 and an outline if the value was zero. Vimeo: {% vimeo 702643150 %}
How to get a variable value from another script, Godot's Visual Script
Tags: tutorial, codenewbie, gamedev, beginners
Published: 2022-04-24 21:30:00

> _**Update: Godot's Visual Script will discontinue in Godot 4.0.**_ Therefore, it's useless to continue using Visual Script in Godot now.

A lot of people who use Godot's Visual Script want to get a variable value from another script. Here's how!

Just **drag and drop** a scene node, which is attached to the script, into the canvas as shown in the screen recording below:

![drag and drop a scene node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ntk9377dbafiofxz8onu.gif)

## A proper way to do it

As it has been pointed out in my previous tutorial, it's better to use an **instance** mode unless you are OK to fix every nodes if anything goes wrong.

- First, **set a scene node** that you want to get the variable from to an `object` variable in the `_ready` function which will be called only once.

![set a scene node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngv3puewfpi5i5j9grqr.jpg)

- **Change set mode** of the node to **Instance**. And **put the `object`** variable **to the instance** input port.

![setup](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik2s97b3gnolv1ic135h.jpg)

I hope this helps 👍

---

Cover photo by [olieman.eth](https://unsplash.com/@moneyphotos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/safe?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Day 16: Wasted weekend?
Tags: productivity
Published: 2022-04-24 21:28:00

Hi!
So is this weekend is wasted? haven't opened VSCode or pushed anything to Github for the last two days but I feel like I didn't rest either even if I literally spent like 80% of this weekend in bed. Last week was a stressful one and I really needed sometime to shut off and come back flesh but I still feel like I need some time yet tomorrow I have to get back to work
remember `websockets` and `redis` I was talking about on Friday I didn't research about them either. and this week I have several new tools to research about, a whole new feature to work on, meetings to attend to, papers and articles to write and do all that and spare some time for other stuff too.
so is this last  weekend wasted? I don't think so, I may have gained something that I don't realize yet. what I do know though is that I have a lot of things to do for the upcoming week so I have to get started first thing in the morning

let's have a productive week ahead

signing off...
Why should we learn Tailwind CSS?
Published: 2022-04-24 21:03:51


As per official Tailwind CSS documentation, Tailwind CSS is a highly customizable, low-level CSS framework that allows you to custom-build designs eliminating opinionated component styles that you would anyway want to override.
Beautiful custom user interfaces can be effectively built using CSS without actually putting in much coding effort. Being a utility-first framework, Tailwind CSS renders the leverage of styling every component distinctively, the way you desire.
Adapting the “form follow function”, the name of the utility class predicts the exact function of that class for ease in designing. Tailwind combines the most critical CSS properties which can be customized and extended according to project requirements.
 

## Why Use Tailwind CSS?

There’s a lot that goes on in web development. It can sometimes, thus, become an overly complicated task. Mapping the impact of styling might become tedious and time-consuming hampering the progress of the application/website.
Implementing Tailwind CSS will eliminate all the above-mentioned issues. Tailwind CSS creates small utilities with a defined set of options enabling easy integration of existing classes directly into the HTML code. Custom styling can be provided to the components with the help of this framework.

## Advantages of Using Tailwind CSS

Now that you are familiar with the what and why of Tailwind CSS, let’s take a look at some of its most prominent advantages.

1. Highly Customizable: Tailwind CSS is a highly customizable framework. Although it comes with a default configuration, it is simple to override it with a tailwind.config.js file. 

2. Common Utility Patterns: Eliminate the hassle of naming classes with Tailwind CSS. The availability of common utility patterns solves numerous problems like specifying classes, organizing them, cascading them, and much more. 

3. Can Be Optimized Using PurgeCSS: A major advantage of Tailwind CSS is that optimization can be performed using PurgeCSS. PurgeCSS can reduce the file size considerably by scanning the HTML and removing unused classes.

4. Enables Building Complex Responsive Layouts Freely: The Tailwind CSS framework uses a default mobile-first approach. The availability of utility classes makes it easier to build complex responsive layouts freely. 

5. Facilitates Fluid Community Interaction: Stuck with an unsolvable issue? The Tailwind CSS community can be the perfect solution. Become a part of this community and get comprehensive assistance from fellow users as and when required.
Dart Typing 💫 🌌 ✨
Tags: dart, type, static, dynamic
Published: 2022-04-24 20:59:33

**Dart, tip kontrolünü iki farklı zamanda gerçekleştirir:**
• Kod derlendiğinde (kod yeniden yüklenir/veya önceden derlenir).
• Kod çalıştırıldığında (runtime).

**Static Tipler**

• `int`: Tamsayılar
• `double`: Ondalık sayılar(çift hassasiyet)
• `bool`: Boolean true ya da false
• `String` : Immutable (değişmez) string
• `StringBuffer`: Mutable(değişken) string
• `RegExp`: Düzenli ifadeler
• `List, Map, Set`: Koleksiyon class'ları
• `DateTime`
• `Duration`: Bir zaman aralığı
• `Uri`: Identifier
• `Error`: Hata bilgisi


Dynamic Tipler (aka Untyped)

Tür bilgisi olmayan değişkenleri `var` veya `dynamic` anahtar kelimelerini kullanarak tanımlayabilirsiniz.

İkisinin arasında ince bir fark vardır:

```
void main() {
print (multiplyMethod1(2,4));
print (multiplyMethod2(2,4));
}
dynamic multiplyMethod1(int a, int b){
return a * b;
}
var multiplyMethod2(int a, int b){
return a * b;
}
```

Bu kodu derlemeye çalıştığınızda aşağıdaki hatayı alırsınız:

```
Error compiling to JavaScript: main.dart:10:1: Error: The return type can't be 'var'. var multiplyMethod2(int a, int b){ ^^^ Error: Compilation failed.
```

Bunun nedeni methodların bir tür döndürmesi gerekmesi ve `var` döndürememesidir. Bir tür belirtmeniz gerekir.


**Tip Çıkarımı (Type Inference)**
Örnek 1:
```
void main() {
dynamic x = 1;
if (x is int){
print('integer');
}
}

```

Output: 

```
integer
```

Örnek 2:

```
void main() {
dynamic x = 'test';
if (x is String){
print('String');
}
x += 1;
}
```

Output:

```
String Uncaught exception: TypeError: 1: type 'JSInt' is not a subtype of type 'String'
```

**Tip Eşleştirme**

Dart, kullanıcıların 'is' anahtar sözcüğünü kullanarak tipleri kontrol etmesine olanak tanır.

```
main(){
printType(23);
printType('mark');
}
printType(dynamic d){
if (d is int){
print ('Its an Integer');
}
if (d is String){
print ('Its a String');
}
}
```

Output:

```
Its an Integer
Its a String
```

**Tip Bilgileri**

Çalışma zamanında runtimeType özelliğini kullanarak bir nesnenin tipine erişebilirsiniz.

```
void main() {
var v1 = 10;
print(v1.runtimeType);
var v2 = 'hello';
print(v2.runtimeType);
}
```

Çıktı:

```
int
String
```

Resource: Learn Google Flutter Fast - Mark Clow  ✨
Real Life Example - Recursive Components
Tags: react, javascript, webdev, recursion
Published: 2022-04-24 20:54:34

Following [my last article](https://dev.to/danielbellmas/build-a-tree-array-from-a-flat-array-recursion-32jn) about displaying comments a recursive way, where we turned a flat array into a recursive object (tree), here is the UI implementation in React.

The end result I wanted to achieve looks something like this: ![Recursive comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6502fodsxlgnsur550y1.png)
 
The first thing we can see is that every comment body is pretty similar, which, for every web dev, screams **GENERIC COMPONENT!**

--- 

### <u>The Recursive Component</u>

```react
const Comment = ({ comment }) => {
    const { index, comments } = comment;
  
    const hasComments = !!comments.length;
  
    return (
      <React.Fragment>
        <CommentBody {...comment}/>

        {hasComments && (
          <ul className={styles.comments}>
            {comments.map(comment => (
              <li key={comment.index}>
                <Comment key={index} comment={comment} />
              </li>
            ))}
          </ul>
        )}
      </React.Fragment>
    );
  };
```
—— 
### <u>A Breakdown of the Code</u>

The `CommentBody` component is the UI of a **single comment**, and if it has <u>sub comments</u> then we'll render a `ul` with all of the <u>sub comments</u>, and if one of those comments too has comments then we'll render those too and so forth...

Every recursion has to have a **stopping condition**.
Here, `hasComments` is checking if a comment has more comments inside.


To use the component we need to pass a recursive object to it, in this case, it will look something like this:

```react
const nestedComments = {
  index: 0,
  title: 'title1',
  comments: [
    {
      index: 1,
      title: 'title2'
    },
    {
      index: 2,
      title: 'title3',
      comments: [
        {
          index: 3,
          title: 'title4'
        }
      ]
    }
  ]
};

const Comments = () => (
  <section>
    <Comment comment={nestedComments}/>
  </section>
);
```
---

## Conclusion

We can see that a _recursive_ **design** requires a **->** _recursive_ **component** which requires **->** _recursive_ **data**.
Days 4-7: Busy days
Tags: appwritehack
Published: 2022-04-24 20:50:16

The past few days I was barely on my laptop, and when I am, I write 2 lines of code that is work related.

But I was able to prepare the majority of the necessary stuff to get me started to build with appwrite. installed Docker desktop and appwrite backend server, and explored some functions, next, I will make a separate Flutter app as backend playground.

The past busy days didn't  keep me away from my phone (of course), so I had the chance to explore appwrite docs for Flutter, and I'm surprised by how easy to interact with the backend. after the hackathon, I will try appwrite for Android.
React native the master
Tags: javascript, webdev, beginners, programming
Published: 2022-04-24 20:45:36

if you are a javascript developer and you love to code like a react developer then starting app development with react native won't be difficult. Because react native is so simmilar like react. sometime web developer wants to switch their career on app development. and to start app development with react native i think this could be the best solution for begginers. Now I will tell you why you should learn react native?

if you want to build cross platform app like this will work for android and ios both then either start with react native neither start with flutter. Now why flutter because we are talking about react native.

flutter was build by google and it is more fast then react native but the main problem is flutter looks like oop. so if you are not fimiliar with oop then start with react native

just go to docs and start building your very fast mobile apps!
Let's Explore React-Chat-Engine
Tags: react
Published: 2022-04-24 20:43:34

Basically Chat Engine is a free serverless chat API.In this blog we will learn how to use this amazing Chat Engine is a free chat API.  have three steps and take about five minutes…


To build this api first we need to build a ear with
Let's build a react-project

`npx create-react-app chat-engine-tutorial
cd chat-engine-tutorial
yarn run start
`

if you run this code then congratulations you 

**The next step is** :
This next step doesn’t need code.
Let’s go to Chat Engine and get our chat API key.
Register at chatengine.io
Create a Project, I’ll call mine “Tutorial”
Create your first User or two, I’ll call my users “Adam” and “Eve”
You’ll need the Public Key and the Username + Password of a user


The last step is Add the Chat API: 
Let’s connect this chat API to your React project.
Take your favourite IDE and open the chat-engine-tutorial project.
Open the src/App.js file, and replace it with the following code:

`import React from 'react';
import { ChatEngine } from 'react-chat-engine';
function App() {
  return (
    <ChatEngine
      publicKey='00000000-0000-0000-0000-000000000000'
      userName='adam'
      userPassword='pass1234'
    />
  );
}
export default App;`



Lastly you can customize your application with reading this article [Go Doc](https://chatengine.io/docs/react/v1)