teleren/devto huggingface dataset:
Understanding the Document Object Model (DOM) in Web Development
Tags: webdev, javascript, beginners, dom
Published: 2023-02-17 08:15:04

## Introduction

When you browse the web, you might have come across the term “DOM” before. The Document Object Model (DOM) is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. In this blog post, we’ll explore what the DOM is, how it works, and why it’s important for web development.

## What is the DOM?

The DOM is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can interact with the page.

For example, a JavaScript program can use the DOM to:

• Access and change the content of an HTML document

• Add or delete elements and attributes to or from an HTML document

• Change the style of an HTML document

## How does the DOM work?

When a web page is loaded, the browser creates a Document Object Model of the page. The HTML elements of the page become nodes in the DOM. The nodes can then be accessed and manipulated with a programming language like JavaScript.

The DOM is represented as a tree data structure. Each node in the tree represents an element on the page, such as a paragraph, image, or heading. The nodes can also represent attributes and text.

To access a node in the DOM tree, you need to know its location. This is done using the DOM’s node hierarchy. You start at the top of the tree with the document object and work your way down to the node you want to access.

## Why is the DOM important for web development?

The DOM is an essential part of web development. Without it, web pages would be static and unresponsive to user interaction. The ability to manipulate the DOM is what makes web applications interactive and dynamic.

Here are some common uses for the DOM in web development:

 • Validating form input

• Creating dynamic user interfaces

• Animating page elements

• Updating the content of a page without refreshing it

## Conclusion

In summary, the DOM is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM is a tree-like structure that can be manipulated with a programming language like JavaScript. It is an essential part of web development and allows for dynamic and interactive web pages.
How to keep your Ubuntu laptop running with the lid closed
Tags: ubuntu, powermanagement, laptop
Published: 2023-02-17 08:10:34

I have a Dell laptop running Ubuntu 20.04 that I use for remote work. By default, the laptop goes into suspend mode when I close the lid, which causes me to lose my connection. To prevent this, I followed the instructions in this guide [1] and edited the /etc/systemd/logind.conf file to set the HandleLidSwitch parameter to "ignore":

`HandleLidSwitch=ignore`

Then, I restarted the login service by using the following command:

`sudo systemctl restart systemd-logind.service`

According to the guide, this command may restart the session, so it's important to save all current work beforehand. However, in my case, the session did not restart, and the laptop continued to work as expected even after I closed the lid.
**Reference**:
[1] https://ubuntuhandbook.org/index.php/2020/05/lid-close-behavior-ubuntu-20-04/
Type Conversion In JavaScript
Tags: javascript, webdev, beginners
Published: 2023-02-17 08:04:29

To change the type of a value in JavaScript, it is necessary to perform type conversion, which implies transforming the data type from its original state to a distinct one.


There are two main ways to perform type conversion in JavaScript:

**1. Implicit Type Conversion (Type Coercion):**
JavaScript automatically performs type conversion in certain situations, such as when using operators or functions with operands of different types. 

Implicit conversion to String:
![JavaScript implicit type conversion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5752gez6wfjowqpjhnjg.png)

Implicit conversion to Number:
![Implicit conversion to Number](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwe0hek00xojqqv4588n.png)


**2. Explicit Type Conversion:**
You can also perform type conversion explicitly using functions such as `parseInt()`, `parseFloat()`, `String()`, `Number()`, `Boolean()`, and `toString()`.

Explicit conversion to Number
![Explicit conversion to Number](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnhwidkgxu9z5q4chgy0.png)

Explicit conversion to String
![Explicit conversion to String](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8cxwyk4sws3kogxm23a.png)

Explicit conversion to Boolean
![Explicit conversion to Boolean](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/211h3eaibk40se9ui3rn.png)


_**Thanks for reading**_
_Please share this piece if its helpful._
AWS Part 13 -- Aurora で MySQL サーバーを作ってローカル CLI からアクセスする
Tags: aws, aurora, mysql
Published: 2023-02-17 07:38:05


## Aurora とは？

AWS が管理してくれる DB サーバー
MySQL or Postgres と同じように扱える
起動するだけで使えるらしい

---






# Aurora を MySQL で実際に構築する

https://youtu.be/z88qIXVvocQ?t=208

Cloud Guru さんの動画を参考にして作る

---

## SG を作る

まずは MySQL のアクセス用のセキュリティグループと
インバウンドルールを作る

基本ルール

- SG 名: from-mysql-aurora-3306
- VPC: デフォルト

インバウンドルール

- タイプ: MySQL/Aurora
- ポート: 3306 (固定)
- ソースタイプ: IPv4 全て

これでセキュリティグループを作成

---

## 基本設定を作る

RDS のサービスページから Create Database で作成開始する。
まずは基本設定を埋めていく。

- 設定方式: スタンダード
- エンジンタイプ: MySQL
- バージョン: 8.0.28
- DB インスタンス サイズ: Free Tier
- DB インスタンス ID: cloud-guru-with-sg
- マスターユーザー名: admin
- パスワード: *****

---

## 接続設定(ネットワーク)

次にネットワークの設定を埋めていく

- VPC: デフォルト
- DB サブネット: デフォルト
- Public アクセス: True
- SG: rom-mysql-aurora-3306 ( 前述 )
- AZ: なし
- DB ポート: 3306 (デフォルト)

## DB オプション

- 初期DB名: gurudb
- バックアップ: false

---

## DB の完成を確認

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

これらで DB を作成する。
すると Amazon RDS / Databases のページに
cloud-guru が表示されている。

5 分経つと　Provision が終わって、Available になる。

こう言う時、アベイラブルになって喜ぶって不思議な気分...

https://consultant-media.com/consul-available/





---
---

# Aurora で作った RDS サーバーに接続する

作った Aurora / MySQL サーバーに接続する。

---

## エンドポイントを確認

作成した RDS サーバー cloud-guru の詳細を確認する

5 分くらい経つと、エンドポイントとして

cloud-guru.{uuid}.ap-northeast-1.rds.amazonaws.com

このようにエンドポイントが表示される。
これに向けて mysql コマンドでアクセスする。

Public IP なのでローカルからアクセスできる。

---

## ローカルのターミナルからアクセス

```php
brew services start mysql

mysql --version          

mysql  Ver 8.0.31 for macos13.0 on arm64 (Homebrew)
```

MySQL を起動。
動いているのを確認できた。

https://youtu.be/8giBFEpRWi0?t=747

ダイワボウさんの動画を参考にして

```php
mysql -h cloud-guru-with-sg.{yourUUID}.ap-northeast-1.rds.amazonaws.com \
-u admin -p gurudb

Enter password: ******
```

mysql -h {hostName} -u {userName} -p {dbName}
この形式でコマンドを打つ。

```php
Welcome to the MySQL monitor.  Commands end with ; or \g.                                              
Your MySQL connection id is 277                                                                        
Server version: 8.0.28 Source distribution

Copyright (c) 2000, 2022, Oracle and/or its affiliates.
```

MySQL にログインできた。

```php
mysql> show databases;
+--------------------+
| Database           |
+--------------------+
| gurudb             |
| information_schema |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.02 sec)
```

自分の DB が確認できた。

---
Best Intelligent Talent Matching and Analytics
Tags: ai, nlp, startup, hr
Published: 2023-02-17 07:30:14

Unlock the Full Potential of Your Workforce with Birbal AI's Intelligent Talent Matching and Analytics

In today's fast-paced and competitive business world, having the right talent is more important than ever. But with so many resumes to sift through and interviews to conduct, finding the perfect candidate can be a daunting and time-consuming task. That's where Birbal AI comes in.

Birbal AI's Intelligent Talent Matching and Analytics uses cutting-edge artificial intelligence and machine learning technology to streamline the hiring process and help you find the perfect candidate for your team. Our platform analyzes resumes, job descriptions, and candidate profiles to identify the best match based on skills, experience, and cultural fit.

But that's not all. Our platform also provides powerful analytics that can help you gain insights into your workforce, such as skills gaps, diversity, and employee engagement. With this information, you can make informed decisions to optimize your team's performance and reach your business goals.

Birbal AI's [Intelligent Talent Matching and Analytics](https://www.cronj.com/blog/how-to-choose-the-apt-intelligent-talent-matching-and-analytics-platform/) is perfect for startups, MNC's, and staffing domain people who are looking to attract and retain top talent. With our platform, you can reduce the time and cost of hiring, improve the quality of your hires, and gain a competitive edge in the marketplace.

So why wait? Unlock the full potential of your workforce with Birbal AI's Intelligent Talent Matching and Analytics today
5 areas where Vaadin shines as LiveView implementation for Java
Tags: java, springboot, vaadin, spring
Published: 2023-02-17 07:30:00

---
title: 5 areas where Vaadin shines as LiveView implementation for Java
published: true
description: 5 areas where Vaadin shines as LiveView implementation for Java
tags: Java, SpringBoot, Vaadin, Spring
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-02-17 07:30 +0000
---
LiveView is a programming approach that allows developers to build interactive, real-time user interfaces for web applications. It was introduced as a part of the Phoenix web development framework for the Elixir programming language. There are LiveView implementations available for many popular languages, Java included. And we are talking about Vaadin here which exists for much longer and is much more mature than Phoenix LiveView.

![Vaadin](https://miro.medium.com/v2/resize:fit:244/format:webp/1*7mfsYF2a2_BfAhTjx_ODSw.png)

Where Vaadin shines in areas LiveView programming is very famous?

**1.) Writing less code** — and I really mean much less than you would expect. No zillions of endpoints, no DTOs, mappers, JavaScript code. Your feelings will be like that you are developing a desktop application, though UI for the browser will be there.

**2.) Both ways communication** — is it frontend triggering an action or is the backend receiving a message from pub/sub system? Vaadin will update the browser page to reflect the latest situation. You are not doing this — Vaadin does.

**3.) Single language approach** — Java for backend and frontend development. And it's a huge thing. This means you don't need angular/react/vue developers, you have a single repository for the entire application, that simplifies overall deployment and long time maintenance.

**4.) Automatic UI updates managed by Vaadin** — changes being done in backend code that relates to UI are automatically transformed into updated HTML and sent to frontend. Very efficient ‘diffed changes’ are communicated to frontend, push communication is also directly supported. And don't forget, it's Vaadin doing this for you as a silent servant.

**5.) HTML transformed to Java objects** — you can use HTML templates but Java objects are better. Using Vaadin you use HTML in form of Java objects. You have Div() object available, and you can insert TextField() into it. Want to hide TextField in the browser? Just call textField.setVisible(false) … and Vaadin will remove textField from the browser page. Just simple as that.

![Example of Vaadin code: TextField and Button definitions](https://miro.medium.com/v2/resize:fit:640/format:webp/1*z_USnrNfIspG6Z7Cgr_jXA.png)

Are you still with me? Nice. If you are interested in details and can get a whole idea of how you can use Vaadin in your new or existing projects, you are welcome to take part in this Udemy Course: “[FullStack Vaadin (14–23+) — Practical Solutions](https://www.udemy.com/course/fullstack-vaadin-14-23-practical-solutions/?referralCode=86634EA8983DEA9AB198)”

![Udemy course](https://miro.medium.com/proxy/1*xOYuYidbmzpTTkk3j3nTlw.webp)
Getting Started with Tkinter: A Beginner's Guide to Building GUI Applications with Python
Tags: beginners, programming, python, tkinter
Published: 2023-02-17 07:27:35

## Introduction
The Tkinter module is a graphical user interface (GUI) module that comes with Python. It allows Python programmers to create GUI applications with widgets and other features for desktop and web applications. Tkinter was developed for the Tcl language, but it was later ported to Python and has been included in every version of Python since the 1.4 release.

## Installation
Tkinter is a built-in module in Python, so there is no need to install it separately. It can be imported into a Python script like any other module using the 'import' statement.

## Basic Syntax
To use Tkinter, you first need to create a top-level window that will serve as the container for all the widgets. The basic syntax to create a window is as follows:

```
import tkinter as tk

root = tk.Tk()
root.mainloop()
```

This will create a basic window with the title "Tk" and an empty window. The mainloop() method will keep the window open until it is closed.

## Widgets
Tkinter provides various types of widgets, such as buttons, labels, text boxes, radio buttons, and more. You can add these widgets to the window using the 

_pack(), grid()_, or _place()_ methods. Here is an example of how to create a button widget:

```
import tkinter as tk

root = tk.Tk()

button = tk.Button(root, text='Click Me')
button.pack()

root.mainloop()

```
This code will create a button labeled "Click Me" and place it in the window using the _pack()_ method.

## Events and Callbacks
In Tkinter, you can bind events to widgets, such as button clicks or key presses. When an event occurs, a callback function is called to handle the event. Here is an example of how to bind a button click event to a callback function:

```
import tkinter as tk

def on_button_click():
    print('Button clicked')

root = tk.Tk()

button = tk.Button(root, text='Click Me', command=on_button_click)
button.pack()

root.mainloop()

```
This code will create a button labeled "Click Me" and bind the _on_button_click()_ function to the button's click event using the _command_ parameter.

## Conclusion
Tkinter is a powerful module that allows you to create GUI applications in Python. With its wide variety of widgets and event handling capabilities, it is easy to create complex and interactive applications. However, it is recommended to use other more powerful and sophisticated frameworks and libraries, like PyQt, for more advanced and big projects.
My game idea
Published: 2023-02-20 22:38:29

---
title: My game idea
published: true
date: 2023-02-17 07:27:20 UTC
tags: 
canonical_url: https://paige.bio/posts/game_idea/
---

Background I’ve been wanting to make a game for a long time now… suffice to say I have occasionally played around with some things like tile maps. Here’s a trivial list comprehension that produces a tile map that could be potentially used for a game (numeric cells are empty spaces, # cells are walls): Unless you’re familiar with tile map games this is probably especially hard to relate to given that the “sprites” are just ASCII characters.
ReactJS Advantages for Developers
Tags: react, javascript, beginners, programming
Published: 2023-02-17 07:14:15

ReactJS offers several advantages that make it a popular choice among developers. Here are some of the most significant benefits of using ReactJS:

Reusability:
ReactJS components are reusable, which means you can use them across multiple projects. This saves time and effort when developing complex applications.

Virtual DOM:
ReactJS uses a Virtual DOM, which is a lightweight representation of the actual DOM. This allows ReactJS to update the UI efficiently, without the need for costly and time-consuming DOM manipulation.

High Performance:
ReactJS is designed to be highly performant. It is optimized for rendering large amounts of data, making it an ideal choice for data-intensive applications.

Unidirectional Data Flow:
ReactJS uses a unidirectional data flow, which means data flows in a single direction from parent components to child components. This makes it easier to manage and debug application data.

Large Community and Ecosystem:
ReactJS has a large community of developers, which means there is a wealth of resources available for developers to learn from. It also has a vast ecosystem of third-party libraries and tools, making it easy to integrate with other technologies.

ReactJS Developer Skills

To become a [skilled ReactJS developer](https://www.cronj.com/hire-react-js-developers.html), you need to have a solid understanding of ReactJS fundamentals, as well as the following skills:

Proficiency in JavaScript and ES6:
ReactJS is a JavaScript library, so having a strong understanding of JavaScript is essential. It is also recommended to have knowledge of ES6 features such as arrow functions, classes, and destructuring.

Knowledge of ReactJS Components:
As discussed earlier, ReactJS components are the building blocks of ReactJS applications. Therefore, it is crucial to understand how they work and how to create them.

Understanding of ReactJS State and Props:
ReactJS state and props are essential concepts for building ReactJS applications. It is crucial to understand how they work and how to use them effectively.

Experience with ReactJS Tools and Libraries:
ReactJS has a vast ecosystem of tools and libraries that can help you develop ReactJS applications more efficiently. Familiarity with popular tools such as React Router, Redux, and React Native can help you become a more skilled ReactJS developer.

Knowledge of Web Development:
ReactJS is often used in web development, so having a good understanding of web development concepts such as HTML, CSS, and HTTP is crucial.

Conclusion:

ReactJS is a powerful library for building user interfaces. It offers several advantages, including reusability, virtual DOM, high performance, unidirectional data flow, and a large community and ecosystem. To become a skilled ReactJS developer, you need to have a solid understanding of ReactJS fundamentals and skills such as proficiency in JavaScript, knowledge of ReactJS components, state, and props, experience with ReactJS tools and libraries, and knowledge of web development.
Best Practices for ReactJS Development
Tags: react, frontend, webdev, beginners
Published: 2023-02-17 07:12:54

When [developing applications with ReactJS](https://www.cronj.com/hire-react-js-developers.html), it is essential to follow best practices to ensure that your code is maintainable, scalable, and performs well. Here are some best practices to keep in mind when developing ReactJS applications:

Use Functional Components:
Functional components are more lightweight than class components, making them faster and more efficient. They also make it easier to manage application state, as they can use React Hooks to manage state.

Follow the Single Responsibility Principle:
Each component should have a single responsibility, meaning it should only be responsible for rendering a specific part of the UI. This makes it easier to maintain and modify components over time.

Use Pure Components:
Pure components are components that don't depend on state or props, meaning they only render when their input changes. This makes them more efficient and reduces the number of unnecessary re-renders.

Use PropTypes for Type Checking:
PropTypes is a library that allows you to type check your components, ensuring that the correct data types are passed to each component. This can help prevent errors and make your code more reliable.

Use ESLint and Prettier:
ESLint and Prettier are tools that can help ensure that your code is consistent and follows best practices. They can help catch errors and ensure that your code is easy to read and maintain.

Use React Developer Tools:
React Developer Tools is a browser extension that allows you to inspect and debug React components. It can help you identify performance issues and bugs in your code.

Optimize Performance:
To optimize the performance of your ReactJS application, you can use tools such as React Profiler, which can help you identify performance bottlenecks and optimize your code.

Follow Accessibility Guidelines:
When developing applications with ReactJS, it is important to follow accessibility guidelines to ensure that your application is accessible to all users, including those with disabilities.

Conclusion:

When developing applications with ReactJS, it is important to follow best practices to ensure that your code is maintainable, scalable, and performs well. These best practices include using functional components, following the Single Responsibility Principle, using pure components, using PropTypes for type checking, using ESLint and Prettier, using React Developer Tools, optimizing performance, and following accessibility guidelines.

By following these best practices, you can develop high-quality ReactJS applications that are reliable, scalable, and easy to maintain.
Top ReactJS Libraries for Building Web Applications
Tags: react, javascript, programming, webdev
Published: 2023-02-17 07:06:05

ReactJS has a thriving ecosystem of libraries and tools that can help you [develop web applications](https://www.cronj.com/hire-react-js-developers.html) more efficiently. Here are some of the top ReactJS libraries you can use to build web applications:

Redux:
Redux is a popular library for managing application state in ReactJS applications. It provides a centralized store that can be accessed by all components, making it easier to manage application state and share data between components.

React Router:
React Router is a library that allows you to handle routing in your ReactJS application. It provides a declarative way to define routes and handle navigation, making it easier to build complex single-page applications.

Axios:
Axios is a library for making HTTP requests from your ReactJS application. It provides a simple and easy-to-use API for making requests, handling errors, and configuring request options.

Material-UI:
Material-UI is a library of pre-built ReactJS components that follow the Material Design guidelines. It makes it easier to build applications with a consistent and professional-looking user interface.

Formik:
Formik is a library for managing forms in ReactJS applications. It provides a simple and declarative API for managing form state, handling validation, and submitting form data.

React Bootstrap:
React Bootstrap is a library of pre-built ReactJS components that follow the Bootstrap design system. It provides a wide range of UI components, including forms, tables, navigation, and more.

React Helmet:
React Helmet is a library that allows you to manage the meta tags and other document head content of your ReactJS application. It makes it easier to manage SEO and improve the accessibility of your application.

React Testing Library:
React Testing Library is a library for testing ReactJS components. It provides a simple and intuitive API for writing tests, making it easier to test your components and ensure their reliability.

Conclusion:

ReactJS has a large ecosystem of libraries and tools that can help you [develop web applications](https://www.cronj.com/hire-react-js-developers.html) more efficiently. These libraries include Redux, React Router, Axios, Material-UI, Formik, React Bootstrap, React Helmet, and React Testing Library.