teleren/devto huggingface dataset:
Class Component with React Typescript 
Tags: typescript, react, javascript, programming
Published: 2022-03-06 14:45:46


## What is a Component?
A component is an independent, reusable code block which divides the UI into smaller pieces.

## What are Class Components?

 Class components are ES6 classes that return JSX

---


Using TypeScript together with React has proven to be a powerful combination.

The “older way” of doing components is with class components. And they can keep state per class. State is like props, but private and only controlled by the component itself.

## How to create class component using TypeScript

Class components need to be extended from the base React.Component class.

`import React, { Component } from 'react'; 
`

```
import React, { Component } from 'react';

type CounterProps = {
  header: string;
};

type CounterState = {
  value: number;
};

class Counter extends React.Component<CounterProps, CounterState> {
  
  state: CounterState = {
    value: 0,
  };

  render() {
    const { header } = this.props;
    const { value } = this.state;

    return (
      <div>
        <h1>{header}</h1>
        <p>{value}</p>
      </div>
    );
  }
}
```

**1-** The CounterProps type is used to declare what type the properties of this component support.

**2-** This is similar to declaring types with prop-types but without any additional packages and the result of type checking is available at design time. You won't need to run the project to figure out that some types are not correctly passed.

**3-** Class properties are useful for storing some data that should not affect re-render of a component. 

> In
 the example below, it is a helloMessage that changes when a component is mounted. Its update won't trigger re-rendering.


```
import React, {Component} from "react";

type CounterProps = {
  value: number;
};

class Counter extends Component<CounterProps> {
 
   // It won't be possible to assign a value 
  // with a different type to this property.
 
  helloMessage: string;

  componentDidMount() {
    helloMessage = "Hi! I'm mounted.";
  }

  render() {
    return <p>{this.props.value}</p>;
  }
}
```


##  pass a React component down as a prop to a child component 


Within TypeScript, React.Component is a generic type (React.Component<PropType, StateType>), so you want to provide it with (optional) prop and state type parameters:


```
class Test extends Component<PropsType,StateType> {
  constructor(props : PropsType){
    	super(props)
  }
  
  render(){
   	console.log(this.props) 
    return (
     	<p>this.props.whatever</p> 
    )
  }
  
};
```

**And here how to get props of component
**

```
type ViewProps = React.ComponentProps<typeof View>
// or
type InputProps = React.ComponentProps<'input'>
```
Laravel 9 Send Email Cron Job Task Scheduling Example
Tags: laravel, cronjobs
Published: 2022-03-06 14:45:35

Hello Dev,

Now, let's see a tutorial of laravel 9 cron job tutorial. step by step explain laravel 9 cron job task scheduling. In this article, we will implement a how to create cron job in laravel 9. Here you will learn how to make a cron job in laravel 9.

Why do we have to use a cron job? and what is a benefit to using cron jobs in laravel 9 and how to set up cron jobs in laravel 9?, If you have this question then I will explain why. Many times we need to send notifications or send emails automatically to users to update property or products. So at that time, you can define some basic logic for each day, hour, etc can run and send email notifications.

Here, I will give you a very simple example. we will create a cron job command to get users from API and create new users in our database. we will set tasks automatically done by every minute task. You can write your own logic on command. I will also show you how to set up a cron job in server with laravel 9. so let's follow the below step to do this example.

[Laravel 9 Send Email Cron Job Task Scheduling Example](https://www.codecheef.org/article/laravel-9-send-email-cron-job-task-scheduling-example)
Hadolint: AST para Dockerfile
Published: 2022-03-06 14:44:49

Hadolint é uma ferramenta interessante para realizar linter de arquivos Dockerfile. Preza pelas boas práticas e faz, inclusive, de shell bash incluído no Dockerfile. Um pequeno exemplo aqui abaixo usando o hadolint instalado diretamente pelo brew e usando imagem de contêiner.

Exemplo de Dockerfile:

```
# syntax=docker/dockerfile:1
FROM python:3.7-alpine
WORKDIR /code
ENV FLASK_APP=app.py
ENV FLASK_RUN_HOST=0.0.0.0
RUN apk add --no-cache gcc musl-dev linux-headers
COPY requirements.txt requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
EXPOSE 5000
COPY . .
CMD ["flask", "run"]
```

```
$ brew install hadolint

$ hadolint Dockerfile

Dockerfile:6 DL3018 warning: Pin versions in apk add. Instead of `apk add <package>` use `apk add <package>=<version>`
```

O exemplo acima, pede para que seja discriminado a versão do pacote ao invés de usar a versão latest dos binários.

É possível ignorar esta mensagem usando --ignore:

```
$ hadolint --ignore DL3018  Dockerfile

```

Usando Docker:

```
$docker run --rm -i ghcr.io/hadolint/hadolint < Dockerfile

```
Para ignorar nas imagens docker, basta incluir uma linha com comentário com código de erro:

```
# syntax=docker/dockerfile:1
FROM python:3.7-alpine
WORKDIR /code
ENV FLASK_APP=app.py
ENV FLASK_RUN_HOST=0.0.0.0

# hadolint ignore=DL3018
# hadolint ignore=DL3006,3013 (e demais separados por vírgulas)

RUN apk add --no-cache gcc musl-dev linux-headers
COPY requirements.txt requirements.txt
RUN pip install --no-cache-dir -r requirements.txt
EXPOSE 5000
COPY . .
CMD ["flask", "run"]
```

Repita o comando:

```
$ docker run --rm -i ghcr.io/hadolint/hadolint < Dockerfile
```

Saiba mais em: https://githubhelp.com/hadolint/hadolint

#hadolint
Web Development

Tags: webdev
Published: 2022-03-06 14:39:22

[Website Development](https://www.affordablewebsites.ie/website-development/)
Take your business to the next level

A great website is not based on looks alone, the real success of a great website is having the website development done properly from the start. Affordable Websites develop fast, user-friendly websites that help you reach your business goals. From small business websites right through to complex eCommerce websites our team of web developers can code anything you can imagine. We are proficient with the latest web technologies and specialise in open-source platforms such as WordPress.


Our Dublin web development team codes only to the highest of web standards. This ensures your website code is not only robust and reliable but keeps your data and website safe & secure. We’re highly skilled at website coding and never rely on applications to do our web development. We implement the best practices for fast performance, high ranking websites. With a fast performing website, Google and other search engines will recognise this and it helps rank your website higher in the search engine.
Timezone pt_BR
Published: 2022-03-06 14:19:20

Se você pretende manter o horário dos contêineres com mesmo timezone do host hospedeiro, legal configurar as variáveis no momento de subir o contêiner. Aqui vai um exemplo:

```
version: "3.9"
services:
  web:
    build: .
    ports:
      - "8001:5000"
    environment:
      - LANG=pt_BR.UTF-8
      - LANGUAGE=pt_BR:pt:en
      - TZ=America/Sao_Paulo
  redis:
    image: "redis:alpine"
    environment:
      - LANG=pt_BR.UTF-8
      - LANGUAGE=pt_BR:pt:en
      - TZ=America/Sao_Paulo
```
How to remap the F4 key to Launchpad from Spotlight automatically on start
Tags: apple, macbookpro, macos
Published: 2022-03-06 13:54:42

---
title: How to remap the F4 key to Launchpad from Spotlight automatically on start
published: true
description: Remapping the F4 key to Launchpad from Spotlight automatically on start on new MacBooks pro 2021
tags: Apple, MacBookPro, MacOS
//cover_image: https://direct_url_to_image.jpg
---

**Receipt:**
Place code below to `~/Library/LaunchAgents/com.local.KeyRemapping.plist`, if file not exist's you should create it.

```
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>Label</key>
    <string>com.local.KeyRemapping</string>
    <key>ProgramArguments</key>
    <array>
        <string>/usr/bin/hidutil</string>
        <string>property</string>
        <string>--set</string>
        <string>{"UserKeyMapping":[
            {
              "HIDKeyboardModifierMappingSrc": 0xC00000221,
              "HIDKeyboardModifierMappingDst": 0x0C000002A2
            }
        ]}</string>
    </array>
    <key>RunAtLoad</key>
    <true/>
</dict>
</plist>
```

Restart your Mac and enjoy it! 
:)
I made a simple Typescript template
Tags: typescript, github, opensource
Published: 2022-03-06 13:48:21

Too many templates out there, another one wouldn't hurt 🙃.

This one aims to provide minimal boilerplate to get cracking on with your node.js + Typescript project, without bothering about writing out the `tsconfig.json`. It only contains [typescript](https://npmjs.com/package/typescript), [prettier](https://npmjs.com/package/prettier) and [@types/node](https://npmjs.com/package/@types/node) as dev dependencies.

Check it out!

{% embed https://github.com/DeathVenom54/typescript-minimal-starter %}
Dativejs Tutorial - Creating a Dative instance
Tags: dativejs, javascript, webdev, programming
Published: 2022-03-06 13:32:00

## Creating A Dativejs Instance

In Dative 2-alpha there are two ways of creating an instance for your application

1. `new Dative`
2. `defineApp`


The `new Dative` is the normal way we know in the v1-v2 but the `defineApp` is the new way which also uses the same options api like `new Dative` but with the `defineApp` you don't need to use the `new` keyword

### Let's start cooking 🥳🍜

```ts
defineApp<T extends DativeOptions>(options: T): Dative
```

```ts
import { defineApp } from 'dativejs'

let app = defineApp({
   data: ()=>({
      message: "Holla"
   }),
   template: `
     <div>
       <h1>{{message}}</h1>
     </div>
   `
})
```

### **Notice** That there's not `app.render()` again like the v1-v2

The `v2-alpha` render automatically when there's an `el` options or when you use the `app.mount(el: string)`

New options has been added to the instance 
Check [API docs](https://dativejs.js.org/api/index.html)


Next blog will be on the ``{{#if}}`` block


Thanks for reading ❤️❤️
Nhà cung cấp bạt che - dù che hòa phát đạt
Tags: batchennang, duchenang, hoaphatdat, maixepdidong
Published: 2022-03-06 13:04:31

Chúng tôi là nhà cung cấp bạt che nắng mưa, mái che di động, ô dù che nắng ngoài trời giá rẻ và là đơn vị chuyên thiết kế thi công các hạng trên.
Cam kết chất lượng và giá thành ưu đãi nhất đến với quý khách hàng.
Xem thêm:
[https://hoaphatdat.net.vn/](https://hoaphatdat.net.vn/)
Gọi ngay: 0963.379.379
Đây là một video hữu ích cho tất các cả bạn đang có nhu cầu tìm hiều.
Chúng tôi đang lựa chọn và lọc ra các thông tin hữu ích nhất đến tay người tiêu dùng và bổ sung thêm kiến thức nhằm giúp tạo thêm các giá trị cốt lõi nhất cho cuộc sống quanh ta càng trở nên có nghĩa và văn minh giàu mạnh hơn.
http://www.print3dforum.com/member.php/24976-hoaphatdat379
https://dangnhanh.com.vn/du-che-nang-mua-ngoai-troi
http://forum.vietmoz.net/members/hoaphatdat379.39924/
https://m.mydigoo.com/forums-topicdetail-427188.html
https://tool.toponseek.com/keyword-ranking-report/hoaphatdat.net.vn
http://muaban.oho.vn/raovat.php?id=1033735
https://forum.cs-cart.com/user/194574-hoaphatdatct/
https://www.thegioiseo.com/members/hoaphatdatct.173137/
https://glints.com/vn/profile/public/32fa76d6-e49b-449e-83a6-a436af4b4806
https://vnraovat.net/members/hoaphatdat379.60552/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gwadissmezhatd66d5nq.jpg)
https://www.anphabe.com/profile/hoaphatdat.cng.ty
https://rabbitroom.com/members/hoaphatdatct/profile/
https://starity.hu/profil/315766-hoaphatdatct/
https://bibliocrunch.com/profile/hoaphatdatct/

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14e5iaoeurxwq0p5pfzr.jpg)
Understanding Temporal Dead Zone!
Tags: javascript, webdev, beginners
Published: 2022-03-06 12:52:36

Temporal Dead Zone is the area of a **block** where a variable is not accessible till it gets initialized with a value.

- Block is pair of brackets {...} used to group multiple executable statements
- Initialization means assigning an initial value to a variable

If we try to access the variable before its initialization, it will throw a Reference error as shown below:

> ![Image showing reference error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk6kui52i9wn7dlb2ixi.png)
 
As you can see we got ReferenceError stating can't access the variable before initialization. To prevent our Javascript code from such kind Errors, we need to access variables outside the Temporal Dead Zone(TZD).
#### Scope of Temporal Dead Zone: 
TDZ starts at the beginning of the block's local scope and ends with the variable initialization with a value.
```
{
  // tdz of block started
  // tdz of block started
  console.log(a); // Reference Error
  // tdz continued
  // tdz continued
  let a = 20; // tdz ends here
  // tdz does not exist here
  // tdz does not exist here
}
```
As we can see that this started at the start of the {}(brackets/block) itself and ended with the variable initialization. 
We got a Reference error because we tried accessing the variable before its initialization. So, it's a good practice to access variables after initialization.

##### Let's take examples to better understand the concept:
* Example 1:
Accessing variables after declaration and before initialization 
```
let add;
console.log(add);
```
The above code gives us the output as *undefined* :

> ![output-undefined](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ue3sn58dy7xdlp2g3t57.png)
 
The output shows that we have that variable but do not have any value assigned yet, so the compiler gives it an undefined value.

* Example 2:
As we know if we try to access a variable before its definition and initialization it will give a reference error.

> ![Image showing reference error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk6kui52i9wn7dlb2ixi.png)

* Example 3:
If we use var to declare a variable we get undefined as output, as we try to access the variable before initialization.
```
console.log(add);
var add = 3;
```
Output:

> ![var-output-undefined](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k4ljzllbmjc8dcbpvbf7.png)

Javascript does not initialize let and const variables with any values, they remain dead and inaccessible.  In contrast, var is initialized after its hoisting.

> Nowadays **let** and **const** are used instead of var to define variables as it causes minimum consequences.In old scripts only we would be able to see var used.
Why you should not care about results as a beginner
Tags: success, growth, learning, beginners
Published: 2022-03-06 12:32:04

Have you ever asked the question?

why do only few people succeed in achieving their goals? Sometimes even the smallest goal like getting up early or having a diet can be difficult.

One probable reason could be looking too much at results. and using them as a metric to measure our success. While forgetting about the process that gets us there.

That’s why I want to talk about a Process-oriented approach to defining goals in my new article : [Why you should not care about results as a beginner](https://daddou.me/posts/success/process-oriented-goals)
virtual memory ဆိုတာ
Tags: operatingsystem
Published: 2022-03-06 12:18:17

virtual memory သဘောက လက်တွေ့ တကယ့် physical memory တွေမှာက လုပ်နိုင်စွမ်း ကန့်သတ်ချက်တွေရှိတယ်။ 2GB ပဲ ရှိတဲ့ ဥစ္စာတွေမှာ 4GB လောက်ကစားဖို့လိုမဲ့ program တွေဆိုရင် သူက storage ကို သွားအကူအညီသွားယူရတယ်။  storage ဆိုတာတွေမှာ disk, ssd စသည်ဖြင့် ရှိကြမယ်။ အဲ storage ကို RAM လိုမျိုး သို့ memory အဖြစ် ကစားသွားတာ။ အဲတာ virtual memory လို့ခေါ်တယ်။
Food Library- Using azure app service, NodeJs, Pug
Tags: azuretrialhack, azure, microsoft
Published: 2022-03-06 11:57:47

[Instructions]: # (To submit to the Microsoft Azure Trial Hackathon on DEV, please fill out all sections.)


### Overview of My Submission
 **Food Library** is a nodejs, expressJs out of the blue idea, the main focus of this project is making use and learning all the functions available in the app service category. like first deploying with Vscode then later implemented the CI/CD with Github, creating an alert rule and lots more. 

**Food Library** Aims to promote your country culture through its wide variety of foods and dishes, Post your dishes and hype your country.


### Submission Category: 

 **Computing Captains** Category 


### Link to Code on GitHub

{% embed 
https://github.com/tylerjusfly/azure-devto-hackathon %}

The Functionalities and how to find your way around is in the README.md file.
The MIT license can be found in the LICENSE file and is part of the repository.

### Additional Resources / Info

#### Created my alert rule from azure app
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wfc5axxoqoczqi876c9.PNG)

#### The HomePage where a User can SignIn and Signup
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5op6uyd308qrmx5gnrbc.PNG)

#### My Triggered alert when i have > 2 code 200 request
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9wcp96t1jqehgf7dzt4.PNG)

#### View various dishes and add yours to it

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

Visit us at https://store-api.azurewebsites.net/

#### There were no other developers involved in this work.


[Reminder]: # (Submissions are due on March 8, 2022 @ 11:59 PM UTC)
My journey in Rust
Tags: rust, programming, beginners
Published: 2022-03-06 11:57:01

I've decided to start learning Rust and I would like to share my journey with you. In this blog post, I'm going to share my thought process on the introduction to Rust.

## What is Rust?
Rust is a multi-paradigm, general purpose programming language designed for performance and safety, especially safe concurrency. It guarantees memory safety by using the "borrow checker" to validate references.

One might ask? what is safe concurrency? what's the borrow checker? I got confused by hearing those new terms, they were certainly new to me, especially the borrow checker. After some research, I found some explanations;

### Safe concurrency
Wait, What is concurrency in the first place?
Concurrency is the ability of different parts or units of program to be run in no particular order, without affecting the final outcome.

What if some parts of those programs actually need some data before it can be executed? what if some parts of the program is tampered with or ran into some error, maybe even affected the other parts, (N.B the parts could be a thread or anything else). How do we ensure this safety? Making sure we don't accidentally read or write into other parts of programs that run parallel to each other.

Is this where safe concurrency come in? Yes! you got that right!:smiley:. Safe concurrency is when units of programs run in parallel and are isolated such that you can only read their state and not write to them.

### What is the borrow checker?
This is an enforcement by Rust itself, It enforces a number of properties, In JavaScript you can move the same value. In Rust, you can't do that, the borrow checker helps to check the lifetime of variables, the mutability, the immutability and the ownership of a variable or data.

### Why Rust?
Because of its type safety, Rust is considered one of the most powerful languages. It has speed, fearless concurrency and also memory safety. It can also be considered a system programming language.

### Where can you use Rust?
Well, you can use it in a lot of spaces, like Blockchain, embedded system engineering, systems programming, the web (using WASM, YEW or other libaries)

### How to start learning Rust?
All you need to do is to go into [Rust official website](https://www.rust-lang.org/) and follow the instructions. 

So that's it, I just shared my own process of getting to know rust and why you should use it. What do you wanna do in Rust? Well, I am going to be a Blockchain engineer in Rust. I'm going to share more tips and more thought process as I progress in this journey. I hope you enjoyed my thought process :grin:
Next.js docs -- js から React へを読んで
Tags: nextjs, react, html
Published: 2022-03-06 11:54:36

## 記事のリンク

https://nextjs.org/learn/foundations/from-javascript-to-react

## why

Twitter で話題になっていた記事。

職場でも話題になっていたのでかなり大事だと認識して、しっかりと読んで解釈してみた。

# HTML と DOM の対比

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

この記事を読むまでは HTML を update していると思っていた。恥ずかしい。

https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript

js では createElement などをして dom を操作するコードを書くだけで
**実際に HTML を変更しているわけではない**
HTML を CRUD する DOM を書いているだけらしい。

バックエンドが実際に　DB　を変更しているわけではなく、 DB を変更するためのクエリを生み出すコードを書いている関係と似ている(感想)

===

# { Imperative(命令的) or Imperative(宣言的)} プログラミング

## wiki によると

https://ja.wikipedia.org/wiki/%E5%91%BD%E4%BB%A4%E5%9E%8B%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0

命令的、宣言的という言葉はよく聞く。
wiki によると
特典ポイント5%と消費税10%　が存在する EC サイトの実例っぽいので例えると

100 + 200 で 300 にするのみで、現在の特典と消費税を計算しないのが `命令的(Imperative)` 

100 + 200 で 300 にするだけでなく、外部の state に 15% 追加されることを保存するのが　`宣言的(Declarative)`

React や Vue は　state に追加する　declare もしてるから　宣言的。

===

## 今回の Next の記事によると

https://nextjs.org/learn/foundations/from-javascript-to-react/updating-ui-with-javascript

ここで扱っていた js のコードは命令的だった。
インターフェースが`どうやって` DOM を更新していくか、ステップごとに書いていった

しかし、記事では `何を` したいのかを宣言する　宣言的なコードを書いたほうがスピードが速いと言っている。

そして最もポピュラーな宣言的なライブラリが React.js。

### まとめ

React は私たち開発者から何をしたいかを受け取り、どうやって DOM を実装するかをこなしてくれる。

## React の詳細な書き方

Babel 入れれば

```
      ReactDOM.render(<h1>Develop. Preview. Ship. 🚀</h1>, app);
```


も使える（普通は webpack  に含まれてると推測）　
ES6 の基礎文法だいじ
UI コンポーネントを分けて再利用考えて作って、UI コンポーネントの 
header, 
logo
title
nav
article
hooter
って感じのツリーも意識しよう
State, props をちゃんと使おう

応用として context, ref, useEffect も使おう！

残りはこのように React の大枠のガイドが書いてあった。

読破！
Spring Security without the WebSecurityConfigurerAdapter
Tags: spring, java, security
Published: 2022-03-06 11:52:47

Since Spring Security 5.7.0-M2 the use of **WebSecurityConfigurerAdapter** was deprecated (link to GitHub - https://github.com/spring-projects/spring-security/issues/10822) to move to component-based security configuration.

To adhere to the best practices of Spring Security, it is better to use lambda DSL and the method HttpSecurity#**authorizeHttpRequests **to define the authorization rules. 

So, instead of :

```java
@Configuration
public class SecurityConfiguration extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests((authz) -> authz
                .anyRequest().authenticated()
            )
            .httpBasic(withDefaults());
    }

}
```
it is better to use:

``` java
@Configuration
public class SecurityConfiguration {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests((authz) -> authz
                .anyRequest().authenticated()
            )
            .httpBasic(withDefaults());
        return http.build();
    }

}
```
More details in official Spring blog - https://spring.io/blog/2022/02/21/spring-security-without-the-websecurityconfigureradapter.