teleren/devto huggingface dataset:
Switch from vanilla JS to React Js
Tags: react, vanillajs
Published: 2023-11-13 04:13:06

## 1) JSX (JavaScript XML):
Understand JSX, which is a syntax extension for JavaScript recommended by React. JSX makes it more readable and concise to describe what the UI should look like.

## 2) Components and Props:

a) Components: Learn how to create functional and class components.
b) Props: Understand how to pass data between components using props.

## 3)State Management:
useState Hook: Learn how to manage state in functional components using the useState hook.
State in Class Components: Understand state management in class components.

## 4)Lifecycle Methods:
If you're using class components, learn about lifecycle methods such as componentDidMount, componentDidUpdate, and componentWillUnmount.

## 5)Event Handling:
Understand how to handle events in React components, both in functional and class components.

## 6)Conditional Rendering:
Learn how to conditionally render components or elements based on certain conditions.

## 7)Lists and Keys:
Understand how to render lists of items and the importance of using keys to help React identify which items have changed, been added, or been removed.

## 8)Forms in React:
Learn how to work with forms in React, handle form submissions, and manage form state.

## 9)React Router:
If your application involves navigation, learn how to use React Router to handle routing in a single-page application.

## 10)Managing State Across Components:
Understand strategies for managing state that needs to be shared across multiple components, such as lifting state up, using context, or using state management libraries like Redux.

## 11)Hooks (useEffect, useContext, etc.):
Explore other React hooks, such as useEffect for handling side effects, and useContext for accessing context in functional components.

## 12)Error Boundaries:
Learn how to use error boundaries to gracefully handle errors in your application.

## 13)Functional Components vs. Class Components:
Understand the differences between functional and class components and when to use each.

## 14)Testing React Components:
Explore testing frameworks like Jest and testing-library/react for testing React components.

## 15)Webpack and Babel:
Understand the basics of Webpack and Babel for bundling and transpiling your React code.

## 16)State Management Libraries (Optional):
Explore state management libraries like Redux or Recoil for more advanced state management scenarios.

## 17)React Hooks Libraries (Optional):
Explore popular React hooks libraries like react-query or react-query/devtools for managing asynchronous data fetching.

## 18) Next.js (Optional):
Explore frameworks like Next.js for server-side rendering and other advanced features.
Unraveling the Magic of APIs: Your Guide to the Digital Connectors ✨
Tags: api, programming, beginners, frontend
Published: 2023-11-13 03:40:44

## Introduction

In the digital realm, APIs (Application Programming Interfaces) are the unsung heroes that enable seamless communication between different software applications. Let's embark on a journey to demystify APIs, exploring their essence from the ground up.

## What is an API?

At its core, an API is a set of rules that allows one piece of software to interact with another. It serves as a bridge, enabling applications to request and exchange data in a standardized way.

## The Basics: How APIs Work

### 1. Request and Response

- **Client sends a Request:**
  - A client (an application or a user interface) initiates communication by sending a request to the API.

- **Server Processes the Request:**
  - The API, hosted on a server, processes the request and performs the necessary actions.

- **Server Sends a Response:**
  - The server sends back a response containing the requested data or indicating the success/failure of the operation.

### 2. HTTP Methods

- **GET:**
  - Retrieves data from the server.

- **POST:**
  - Sends data to the server to create a new resource.

- **PUT/PATCH:**
  - Updates existing data on the server.

- **DELETE:**
  - Removes data from the server.

## Building Blocks of APIs

### 1. RESTful APIs

- **Resource-Based Architecture:**
  - REST (Representational State Transfer) organizes APIs around resources (e.g., users, products) and uses standard HTTP methods for operations.

- **Stateless Communication:**
  - Each request from a client contains all the information needed to fulfill that request, making the communication stateless.

### 2. API Endpoints

- **URLs that Matter:**
  - API endpoints are specific URLs where requests can be made to access or manipulate data.

- **Example:**
  - `GET /users` retrieves a list of users.

## Advanced API Concepts

### 1. Authentication and Authorization

- **API Keys:**
  - Many APIs require an API key for access, ensuring security and tracking usage.

- **OAuth:**
  - OAuth provides a standardized way to authorize third-party applications.

### 2. Rate Limiting

- **Throttling Requests:**
  - APIs often implement rate limiting to control the number of requests a client can make within a specific time frame.

### 3. Webhooks

- **Real-Time Communication:**
  - Webhooks enable servers to send real-time data to other applications when specific events occur.

### 4. GraphQL

- **Query Language for APIs:**
  - GraphQL allows clients to request only the data they need, reducing over-fetching and under-fetching.

## Conclusion: The API Symphony 🎵

As we conclude our API exploration, it's clear that APIs form the backbone of modern digital interactions. From the simplicity of a GET request to the sophistication of OAuth and GraphQL, APIs orchestrate the harmonious exchange of information in the vast landscape of the web.

So, the next time you make that API call, remember: you're not just fetching data; you're tapping into the symphony of interconnected applications.

```
Happy API adventures! 🚀
```
Discussion of the Week #9
Tags: discuss, womenintech, community
Published: 2023-11-13 03:30:00

I first became active in developer communities this year, when I joined [Tokyo Dev](https://www.tokyodev.com/), [Women Who Code Tokyo](https://www.womenwhocode.com/tokyo), and [Creative Tokyo](https://creativetokyo.com/). I was able to become a lightning talk speaker for all three communities and was met with warm support from its members despite feeling imposter syndrome.

I was able to discuss what it's like working in Japan as a foreigner with the developers in Tokyo Dev, working as a woman in tech with Women Who Code, and bring out my creative side with the people from Creative Tokyo.

How important do you think it is to have a community of like-minded individuals in your journey as a developer? Share your experiences in the comments below!
「小野 正裕エコノミスト アナリスト」グローバル製造業PMI
Tags: 小野正裕
Published: 2023-11-13 02:59:14

10月10日、国際通貨基金（IMF）は四半期ごとの世界経済見通し報告書を発表した。 
同報告書は、2024年の世界経済の実質成長率予測を7月時点の予測より0.1ポイント下回る2.9％に下方修正し、同時に中国の経済成長率予測も0.3％ポイント下方修正した。
世界貿易の低迷など低成長の影が深まる中、ＩＭＦの５年後の世界経済成長率見通しは３％程度にとどまる。
実際、現在の複雑かつ激動する国際情勢と世界経済の回復の遅れを背景に、IMFによる2023年の世界経済の実質成長率予測は3.0％に据え置かれ、2024年には2.9％に引き下げられている。 3%を下回る予想は2000年から2022年の間に5回しか発生していないことがわかり、そのいずれもリーマン危機や新型コロナウイルス感染症流行の最初の2年間などの深刻な経済危機を伴っていた。
今回予想が３％未満に引き下げられた場合の違いは、世界に明らかな大きな経済危機はないものの、高インフレを伴わない景気減速が完全に沈静化した点だ。
このうち先進国では、ＩＭＦがユーロ圏の経済成長率を0.3ポイント引き下げ1.2％とした。 影響要因としては、ロシアとウクライナの紛争の長期化とエネルギー価格の上昇が挙げられる。 2024年の消費者物価上昇率は3.3％の高水準で推移すると予測されている。 日本では、IMFはインバウンド（訪日外国人）の消費を考慮し、2023年の成長率を0.6ポイント引き上げ2.0％としたが、2024年の成長率は前回と同じ1.0％にとどまる。前回の予測値と同様だ。

特に、景気低迷の懸念が高まっている米国経済は、IMFが2023年の展望値を0.3%ポイント引き上げ、2.1%の高成長を記録し、2024年の経済成長率も0.5%ポイント引き上げ、1.5%に達するものと予想しています。個人消費が堅調になり、米国の'経済軟着陸の現実的意味が大きくなった'いう理由からです。
それでも、エコノミストの間では米国経済に対する懐疑的な見方が依然として根強い。 例えば、アメリカン・ユーラシア・グループのロバート・カーン氏は、景気後退は来ないという見方は楽観的すぎると考えている。

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akyjncgyydwz8gcoqj1b.jpg)
実際、米国の急速な金利上昇と財政混乱を背景とした長期金利の急上昇により、住宅ローン金利は23年ぶりの高水準に達している。 現金などの過剰貯蓄を使い果たした米国の家計がどのように消費を抑制するのかを予測するのは難しい。 一方、米国は対中輸出・投資規制の加速や安全保障の観点からサプライチェーンの再構築などの経済動向により、自らの状況をさらに悪化させる可能性がある。 米国からの輸入に占める各国のシェアによると、2023年1月から8月にかけて中国は15年ぶりにカナダの後塵を拝し、首位から陥落した。
世界経済の需要低迷や景気悪化を反映する兆候が現れている。 S・Pグローバルが発表した世界の製造業購買担当者景気指数（PMI）は、今年9月時点で13カ月連続で好不況ラインの50を下回っている。
イスラエルとイスラム過激派組織ハマスとの紛争も新たな懸念となっている。 戦闘激化により供給が不安定になれば、下落傾向にあったエネルギー価格が再び上昇し、世界経済の行方に影響を与える可能性がある。
中国経済界は、２００５年から２０１４年までの世界経済の年平均成長率は３．９％とみている。 中国がかつて二桁成長を維持したような原動力を得ることができなくなった今、世界経済は長期にわたって低迷する可能性があり、特に財政を失った新興市場国や発展途上国にとっては大きな打撃となるだろう。新型コロナウイルス感染症の流行による余波も懸念される。
市場では、この景気減速の背景とし、インフレ対策として各国中央銀行が急速に金融引き締めを行い、経済活動を抑制していることが挙げられている。 これはある程度管理された減速であるため、世界経済は短期的には再び加速する可能性がある。 岐路に立つ世界経済が上向きの選択をできるかどうかは、世界経済が新型コロナウイルス感染症の流行と高インフレを完全に克服し、力強い成長ペースを再開できるかどうかにかかっている。
Setup Nginx in a Digitalocean droplet
Tags: laravel, nginx, ubuntu
Published: 2023-11-13 02:58:27

I will explain the procedure for configuring a Digitalocean droplet and setting up Nginx for this droplet.

## Configure the Digitalocean droplet
At first, sign up on the [Digitalocean](https://cloud.digitalocean.com/) platform . After going to the home page click on the Create Button in the upper side

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

Choose droplets

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5rhinrzx4ve55ngrydb.png)
After coming to the new page, choose your datacenter closest to your main traffic. Then choose the OS, I will be doing this with Ubuntu 22.04LTS. Choose the package and sign-in method. I will be adding my SSH key here. 

## Install and configure Nginx
Login to the server by using your terminal. If you added your ssh key, then you can do this
`ssh root@192.123.222.11`

We will now install Nginx by doing

```
sudo apt update
sudo apt install nginx
```
After completing the installation , we will configure the firewall. We will now open both port 80 and 443 by running below command

```
sudo ufw allow 'Nginx FULL'
```
Verify it by running

```
sudo ufw status
```
This will show

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

Now verify the whole Nginx installation by 

```
systemctl status nginx
```

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

From the web browser, enter the IP in the browser

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

Congrats! The nginx is installed successfully on a digitalocean droplet.
Writing Tests
Published: 2023-11-13 02:44:37

For this week in [Topics in Open Source Development](https://github.com/Seneca-CDOT/topics-in-open-source-2023), we were tasked with adding tests to an existing project. Here is my experience doing so.

Project Repository: https://github.com/paulkim26/til-to-html
Commit: https://github.com/paulkim26/til-to-html/commit/2a00cf69b4fab11c65baedc9ca518fe3bf36e9d6

## Testing Framework

Since my project already uses Bun, I decided to use Bun's own [built-in test runner](https://bun.sh/docs/cli/test). It is based on [Jest](https://jestjs.io/) which makes it easy to pick for developers familiar with that testing framework. As a result, there was no additional setup required.

## Writing Tests

For this project, I added tests that test the markdown parsing modules I had previously written ([source](https://github.com/paulkim26/til-to-html/tree/main/src/parse-markdown)). Since each markdown parsing module accepts multiple syntaxes e.g. markdown italics can be represented as either `_text_` or `*text*`, I made sure to test for each matching combination along with an aberrant test case (e.g. an empty string) ([example](https://github.com/paulkim26/til-to-html/blob/main/src/parse-markdown/parseItalics.test.ts)).

One nice thing I realized working with TypeScript is that I don't have to write additional tests that check for strange type combinations e.g. passing a `null` to a function that accepts only strings, since TypeScript already blocks such cases. If I had written it in a weakly typed language i.e. JavaScript, I would have had to cover these cases as well.

## Takeaways

I have only had limited experience writing tests before; this was a good experience to write some more. I was surprised to learn how verbose and comprehensive the act of writing tests can be. It is in its verbosity, however that test writing is great since it is easily readable for a human. I see no reason for any project to not include its own suite of tests, especially open source ones. I will for sure continue to write tests in all of my projects going forward.
Why Hartwick Fields Dog Food is a Great Choice for Your Pet
Tags: pets, dogs, dogfood
Published: 2023-11-13 02:29:12

Hello fellow pet lovers,


I've recently discovered an exceptional brand of dog food that I believe deserves more recognition. It's called Hartwick Fields. What initially drew me to this brand was their commitment to providing gourmet-inspired options for our furry friends. They offer a range of tasty food options that are sure to make meal times exciting for your beloved pets.


However, what truly sets Hartwick Fields apart from other brands is their dedication to the health and wellbeing of our pets. They understand that a healthy pet is a happy pet, and they've tailored their products to ensure optimum nutrition and taste.


I found a comprehensive review on [Hartwick Fields Dog Food ](https://pethealthmatter.com/hartwick-fields-dog-food/)here that provides detailed information about specific products and their benefits. This review helped me understand why Hartwick Fields could be a great choice for my pet, and I believe it might help you too.


From their Puppy Real Chicken & Whole Grains Recipe packed with natural ingredients essential for a puppy's growth, to their Small Variety Baked Biscuits that serve as both a treat and a healthy reward, Hartwick Fields offers a diverse range of products catering to different needs and preferences.


In conclusion, if you're in search of a new dog food brand, I would highly recommend considering Hartwick Fields. Their focus on quality, nutrition, and taste is evident in their offerings.


Do you have any experiences with Hartwick Fields dog food? I'd love to hear your thoughts. Let's keep the conversation going and share our experiences for the benefit of our furry friends!
Connecting the Dots: Steve Jobs' Wisdom on Embracing Life's Unpredictability
Tags: motivation
Published: 2023-11-13 02:18:12

In a world obsessed with planning and predictability, Steve Jobs' timeless words offer a refreshing perspective on life's journey: "You can't connect the dots looking forward; you can only connect them looking backward." This profound insight encapsulates the essence of embracing uncertainty and trusting that every experience, no matter how unrelated it may seem at the time, plays a crucial role in shaping our lives.

## The Unpredictable Path

Life rarely unfolds as we envision it. We set goals, make plans, and chart our courses, but the twists and turns that inevitably arise can make us question our path. It's in these moments of uncertainty that Jobs' wisdom truly shines. Instead of fearing the unknown, we should celebrate it as an opportunity for growth and discovery.

## Connecting the Past

When we look back on our lives, it becomes evident how seemingly unrelated experiences and decisions have led us to where we are today. We can trace a line from our past choices to our current circumstances, seeing how each "dot" connects to the next. Jobs himself experienced numerous setbacks and detours before founding Apple, a company that would revolutionize the tech industry.

## Embracing Failure

Jobs' journey was riddled with failures, including being ousted from the very company he co-founded. Yet, instead of succumbing to defeat, he chose to view these experiences as valuable lessons. It was during his time away from Apple that he founded NeXT Computer and Pixar, ultimately leading to his triumphant return to Apple. In retrospect, these "dots" represented crucial stepping stones on his path to success.

## Learning from Mistakes

Mistakes are an inevitable part of life. Jobs believed that we can't truly connect the dots until we acknowledge and learn from our errors. Each misstep, setback, or disappointment contributes to our personal and professional development. It's through these experiences that we gain the wisdom and resilience needed to navigate the future successfully.

![Driving Highway Tail Lights](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbipnr41iu859gffo0ip.jpg)

## Staying Open to Opportunities

To connect the dots looking backward, we must remain open to new opportunities and experiences. Jobs encouraged us to trust in our intuition and follow our passions, even when they don't seem to align with our immediate goals. These divergent paths can lead to the most unexpected and fulfilling destinations.

## Conclusion

Steve Jobs' quote reminds us that life is an intricate tapestry of experiences, choices, and opportunities. We may not always understand how our current circumstances relate to our future goals, but that's perfectly fine. The beauty of life lies in its unpredictability, and it's only by embracing this uncertainty that we can truly connect the dots and appreciate the unique journey we are on. So, as you navigate the twists and turns of your own life, remember that the most extraordinary stories are often written by those who dare to venture into the unknown.
Windows 基礎 Part 02 -- CTRL + SPACE で英かな切り替えする
Tags: windows11
Published: 2023-11-13 02:12:41


## 前提

SSD に 120 GB のソフトを入れる必要があった。
windows の SSD が 60/256 GB しか空いていなかった。
余分なアプリを消しても、容量は大きく変わらなかった。

なので、クリーンインストールした。(5h待機)

その後の初期設定で、英かな切り替えで 2h ハマった。
その解決策の記事。

---

## 要件

CTRL + SPACE キーで 英かな 変換がしたい。

---

## 問題

検索すると、以下の位置の Windows IME から設定するようだ。
しかし、該当の項目がない。

設定 / 時刻と言語 / 日本語 / オプション / キーボード / MicroSoft IME

参考サイト

https://www.ipentec.com/document/windows-switch-microsogt-ime-using-ctrl-and-space-key#google_vignette:~:text=%E5%8F%B3%E5%81%B4%E3%81%AE%E3%82%A8%E3%83%AA%E3%82%A2%E3%82%92%E4%B8%8B%E3%81%AB%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%5B%E3%82%AD%E3%83%BC%E3%83%9C%E3%83%BC%E3%83%89%5D%E3%81%AE%E3%82%BB%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%5BMicrosoft%20IME%5D%E3%81%AE%E3%82%BF%E3%82%A4%E3%83%AB%E3%82%92%E6%8E%A2%E3%81%97%E3%80%81%E5%8F%B3%E5%81%B4%E3%81%AE%5B...%5D%E3%83%9C%E3%82%BF%E3%83%B3%E3%82%92%E3%82%AF%E3%83%AA%E3%83%83%E3%82%AF%E3%81%97%E3%81%BE%E3%81%99

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

この画像は解決後。

---

## 解決策

「キーボードの追加」ボタンを押すことで、Microsoft IME が現れた。その後、上記の記事の通りの操作で、英かな変換を CTRL SPACE でカスタマイズできた。

---

## Tips


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

Preferred Language で Japanese を上に持ってくれば、起動直後から日本語で入力できる。

Englishが上だと、alt shit で起動時に変更する手間がかかる
How to Migrate UniFi Controller from a Debian 11 on a Raspberry Pi 3B+ to Debian 12 on a 4B
Tags: unifi, ubiquiti, migration, raspberrypi
Published: 2023-11-13 01:39:58

Glossary:

* 4B = 4 Model B
* 3B+ = 3 Model B+


## Step 1

### Set up the Raspberry Pi 4B

Follow these [instructions](https://projects.raspberrypi.org/en/projects/raspberry-pi-setting-up). I highly recommend doing as much [preconfiguration in the Raspberry Pi Imager](https://projects.raspberrypi.org/en/projects/raspberry-pi-setting-up/2) as you can. 

## Step 2

### Install UniFi Controller

Follow these [instructions](https://pimylifeup.com/rasberry-pi-unifi/).

## Step 3

### Export your UniFi Controller settings on the Raspberry Pi 3B+ 

## Step 4 

### (If you have a Site set up) Export your Site(s) from UniFi Controller on the Raspberry Pi 3B+

Be sure to follow the onscreen instructions. Do *NOT* migrate your UniFi devices until they have imported correctly in the new UniFi Controller instance.

## Step 5

### (If you have a Site set up) enable multi-site in the new UniFi Controller instance

## Step 6

### Import the Site you exported in Step 4

[Pointers](https://community.ui.com/questions/Create-new-site-on-CloudKey-controller/ad6d66bc-9a64-4967-8816-674fa5a9da2c).

## Step 7

### Migrate your existing UniFi devices to the new Controller instance

Repeat Step 4, but instead of exporting the site again, migrate your desired devices. Wait for the UniFi devices from your 3B+ instance to show up in the new instance.

## Step 7

### Import the settings you backed up in Step 3 into the new Controller instance

## Step 8

### Forget the migrated devices in the 3B+'s Controller instance

Repeat Step 4, by pass the site export and device migration, and then click `Forget`

## Step 9

### (For convenience) link your local UniFi credentials with your UniFi cloud SSO

## Step 10

### Connect the new instance to the mobile app

Use your cloud SSO credentials to login to the mobile app. Your new installation should show up there.
ObjectObject
Tags: javascript, react, webdev, flatiron
Published: 2023-11-13 01:29:22

As a student of the Flatiron School's software engineering program, I have been enjoying the opportunity to learn the React framework. It feels worth noting however that the lack of emphasis on Object Orientation before starting React left many of my classmates without the full picture of what makes React such a brilliant tool. Vanilla JavaScript was not developed with Object Oriented Programming (OOP) in mind, and it appears in the language only as an optional construct for better organizing data. You know, if you really want to. Unfortunately, it is taught the same way at Flatiron, which is to say as an optional module that is easily skipped. I know I am not typing anything revolutionary when I say that OOP is a thing of brilliance and beauty, but I think perhaps seasoned devs take it for granted, not always realizing the paradigm shift it requires of new students of code. It offers an opportunity to get learners thinking in a brand new way. Instead of viewing lines of code as sequential instructions, they can see it nonlinearly, with discreet entities being created that carry out their specific tasks.
React's Java-like structure has the potential to help new coders understand the general lines of reasoning behind more formal languages and larger projects where organization is key, all while they get to feel like they are breezing through creating nifty user interfaces that once would have been much more ponderous to write. I believe, however, that OOP is the bridge between the two, and that being able to see its paradigm even in JavaScript is an invaluable tool for grasping programming's finest forms of problem-solving.
Is my YouTube channel idea too broad?
Tags: question, youtube
Published: 2023-11-13 01:22:13

---
title: Is my YouTube channel idea too broad?
published: true
description: 
tags: #question, #youtube
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-11-13 00:29 +0000
---
Hi all, I've been teaching myself Android development with Kotlin for some time recently started a [YouTube channel](https://youtube.com/@danieltalkscode) to improve my learning by making tutorials, and to create a portfolio of videos to show potential employers. I've also become very interested in learning about other tools and techniques such as using Postman, Charles Proxy, Docker, Selenium, Raspberry Pi and Arduinos etc. If I expand range of videos to include some of the subjects above would that be confusing for viewers or too much variety?