teleren/devto huggingface dataset:
How to create a web page using HTML, a step-by-step tutorial.
Tags: webdev, programming, tutorial, html
Published: 2023-07-09 17:01:01

##About
In this article we will learning that how we could create a webpage only with the help of HTML. This particular article will also give you a basic working of some of the common HTML tags. 

---

##Step1: Creating the folder
Create a new folder on your system to hold your webpage files. Name it something like "MyWebPage". This folder will be the root directory for your webpage.

##Step2: Setting up the HTML file
Create a HTML file with .html extension in the editor. I’ll be using Virtual Studio Code as my editor. Give the file a meaningful name like `index.html`.

##Step3: Add the basic HTML structure

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MyWebPage</title>
</head>
<body>

</body>
</html>
```

Paste the following code in the editor and our system is ready to a create webpage.

####NOTE
Shortcut for Step3 which works only in VS Code is: 
`html:5` and you get the same basic HTML structure written. 

HTML doctype declaration tells the browser that this is an HTML document. Followed by the `<head>` tag which will contain the title which is displayed in the browser’s title bar, and meta data of our webpage. Then comes the `<body>` tag, which can be divided into many sub parts like the header, main and footer which together forms a webpage.

##Step4: Add content to the webpage
Inside the `<body>` section, you can add various elements which will make up our webpage. It may include a paragraph tag `<p>`, a heading tag `<h1>`, inline tags, etc. Let's add a heading followed by paragraph of text to our webpage.

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Web Page</title>
</head>
<body>
    <h1>
        About Me
    </h1>
    <p>
        Welcome to my About Me page! Here's some information about who I am.
        <h3>[your name]</h3>
        <h3>[your favourites]</h3>
    </p>    
</body>
</html>
```

In the code above, `<h1>` tag is used to give the heading, while the `<h3>` tag is used to give subheading. Then, we have used `<p>` for paragraph.

##Step5: Our basic webpage is ready!
Save the changes you made to the "index.html" file. Now, you can open it in a web browser to see your webpage. Simply double-click the "index.html" file, and it should open in your default web browser.
###Output

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb3qqtlw9fygoyln5s0f.png)
Deploy your Discord Rich Presence on Android using Kizzy!
Tags: discord, android
Published: 2023-07-09 16:55:51

Heyya there! It's been a long time since I made my first post. That's because I'm lazy when it comes to typing and thinking of words for a post. Well, it's not really important, hehe...

Back to the original topic, have you ever thought about displaying the activities you're doing on your Android device to your Discord profile, like playing games, coding, or... \*cough\* other stuff?

Say no more! Because now you can do it using **[Kizzy](https://github.com/dead8309/kizzy)**!
This app works by... um... I'm not entirely sure. But from what I read in its README, the app works by communicating with the Discord Gateway through your Discord account. So, I can conclude that this app might disguise itself as a Discord client with only Rich Presence feature.

"Oh? Isn't it risky?" (It should be) not because Kizzy is a _FOSS (Free Open Source Software)_ and its developer, [Vaibhav](https://github.com/dead8309), explicitly explains to users that the app WILL NOT collect any personal information. Of course, as long as you download the app from the original source and not from elsewhere.

Kizzy is packed with many features such as:
1. App Detection, to display which apps you are currently using.
2. Media RPC, to show the music/video you are currently playing.
3. Custom RPC, to create and display your own custom Rich Presence.
4. Console RPC, making it appear as if you're playing games on a Nintendo Switch, so your Discord friends will think, "Oh, wow, X is playing Zelda on Switch!"
5. Experimental RPC, to switching App Detection and Media RPC automatically. Join the [Discord Server](https://discord.gg/vUPc7zzpV5) to get access to this feature.
6. Samsung RPC, I'm not sure about this one because my Android isn't Samsung, hehe...

> Oh, by the way, since Kizzy communicates with the Discord Gateway through your Discord account, which requires logging in, there is a risk of your account getting banned for using a third-party client. So, use it at your own risk.

[Source Code](https://github.com/dead8309/kizzy) - [Release](https://github.com/dead8309/kizzy/releases)
Python's Magic Methods: Unleashing the Power of Dunder
Tags: magicmethods, python, objectorientedprogramming, programming
Published: 2023-07-09 16:28:14

# Python's Magic Methods: Unleashing the Power of Dunder

## Introduction
Python is known for its flexibility and expressiveness, and one of the features that makes it so powerful is its support for magic methods, also known as dunder (double underscore) methods. These special methods allow us to define how objects behave in specific contexts, enabling customizations and enhancing the functionality of our classes. In this article, we'll dive deep into the world of magic methods and explore their capabilities.

## Table of Contents
1. What are Magic Methods?
2. The Magic Behind Dunder Names
3. Commonly Used Magic Methods
    - `__init__`: Initializing Your Objects
    - `__str__` and `__repr__`: String Representations of Objects
    - `__len__`: Getting the Length of Objects
    - `__getitem__` and `__setitem__`: Indexing and Slicing
    - `__iter__` and `__next__`: Making Objects Iterable
    - ... (add more relevant magic methods as needed)
4. Customizing Operators with Magic Methods
    - Arithmetic Operations: `__add__`, `__sub__`, `__mul__`, etc.
    - Comparison Operators: `__lt__`, `__gt__`, `__eq__`, etc.
    - ... (cover other operator-related magic methods)
5. Advanced Magic Methods and Use Cases
    - Context Managers: `__enter__` and `__exit__`
    - Callable Objects: `__call__`
    - Attribute Access: `__getattr__`, `__setattr__`, `__getattribute__`
    - ... (explore more advanced use cases)
6. Best Practices and Caveats
    - Guidelines for Using Magic Methods
    - Potential Pitfalls and Common Mistakes
7. Conclusion

## Conclusion
Python's magic methods provide an incredibly flexible and powerful way to customize the behavior of our objects. By leveraging dunder methods, we can unlock a world of possibilities and make our code more expressive, readable, and intuitive. Understanding and utilizing magic methods effectively can take our Python programming skills to the next level. So, let's embrace the power of dunder and start unleashing the true potential of our Python classes!

Remember to expand on each section, provide examples, and explain the usage and benefits of each magic method.
GIT FLOW EASY-TO-UNDERSTAND TUTORIAL
Tags: git, gitflow, vscode
Published: 2023-07-09 16:27:33

#### Introduction

Git Flow is a branching and release management workflow that's extremely robust. Originated by Vincent Driessen in 2010, it's a Git extension that provides high-level repository operations for managing your project's branching model.

This tutorial aims to demystify the Git Flow process, providing an anchor point for managing larger projects that require a higher degree of control over developments, releases, and hotfixes.

#### Setting Up Git Flow

Git Flow is an extension of Git. To use Git Flow, you need to have Git installed on your system.

* For macOS users, you can install Git Flow through Homebrew using the following command:
```bash
brew install git-flow
```

* For Linux Debian Based users, you can install Git Flow through APT:
```bash
apt install git-flow
```

After Git Flow is installed, you can initialize it inside an existing Git repository by running:

```bash
git flow init
```
This will create the necessary branches for Git Flow and you're now ready to roll!

#### Git Flow Branches Explained
Here are the main types of branches you'll work with in Git Flow:
* **`master`**: This contains the official history of the project. It's the credible source for the code that's gone into production.
* **`develop`**: This is the development branch where all the changes destined for the next release converge.
* **`feature`**: These are branches for new features. They're branched off from develop and merged back into develop.
* **`release`**: This is where you prepare for a new production release. Use it to tweak new features and fix bugs.
* **`hotfix`**: These are branches for quickly patching production releases. Hotfix branches are a lot like release branches and feature branches but they're based on master instead of develop.
* **`bugfix`**: These are used to quickly act on bugs in the production code. They're a lot like hotfix branches but are used when the issue isn't critical and the team can afford to wait until the next release to incorporate the fix.

#### Git Flow Example
Let's assume that we are working on a new feature. Here's how we would use Git Flow:

1. Branch off from develop with a new feature branch: 
```bash
git flow feature start feature_branch
```
2. Make your changes on your feature branch.
3. Once the feature is complete, merge it back to develop: 
```bash
git flow feature finish feature_branch
```

#### Conclusion
The whole essence of Git Flow is the scriptability and the fact that it provides structure to the branching and merging in your Git project. So this workflow is especially suited for continuous collaboration and iterative development in a team.

#### Bonus:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/df3vbrgyzwqyn925g9fd.png)
Check out this [VS Code extension](https://marketplace.visualstudio.com/items?itemName=vector-of-bool.gitflow) that provides a seamless integration of GitFlow directly into your editor!
Convert any Github Repo to VS Code Environment
Published: 2023-07-09 16:05:35

To open a GitHub repository in GitHub.dev, you can follow these steps:

1. Go to the GitHub website and find the repository you want to open. For example, let's say you want to open the repository `[example/repo](https://github.com/example/repo)`.

2. In the URL, locate the `.com` portion, which in this case is `github.com`.

3. Swap the `.com` with `.dev` in the URL. So, in our example, `github.com` becomes `github.dev`.

4. The updated URL would be `[https://github.dev/example/repo](https://github.dev/example/repo)`.

5. Open a new tab in your web browser and paste the updated URL into the address bar.

6. Hit Enter or Return to navigate to the URL.

7. The GitHub repository will now open in GitHub.dev, providing you with a web-based code editor environment powered by Visual Studio Code.

8. From here, you can edit the code, view branches, open pull requests, and collaborate with others in real-time, all within the GitHub.dev environment.

Remember, this process allows you to open a GitHub repository directly in GitHub.dev without needing to download or install any additional software. It provides a convenient way to quickly access and work on your code within a web-based IDE.
My 3 year anniversary blogging at Dev.to - A reflection
Tags: womenintech, opensource, devjournal
Published: 2023-07-09 16:01:47

It has been 3 years since I started blogging at dev.to. I want to take this time to review the 3 years I spent with the DEV community. This is a small reflection of what I did over the last 3 years. 

## The beginning
I decided to start blogging before my senior year in college. I wanted to share what I learned. During the pandemic I needed an outlet to share my stories. Blogging did help me in getting my first software developer job out of college. 

I enjoyed writing and sharing content. It would be best for me to continue writing.

## Posts overview 
Over the last 3 years I wrote various articles on my 
My top 3 highest viewed posts were:
  * [Quick guide to create a custom ChatterBot corpus](https://dev.to/codefatale/quick-guide-to-create-a-custom-chatterbot-corpus-2c1a) - I created a chatbot project in college years ago,before ChatGPT. It was my first project using python and used the Chatterbot library. I was surprised how many views it received.
  * [Writing a story for a visual novel] (https://dev.to/codefatale/writing-a-story-for-a-visual-novel-57np) - I prefer developing visual novels and I use the open source game engine Ren'Py. I still have some good story ideas in the future. 
  * [Creating a remix using Tone.js](https://dev.to/codefatale/creating-a-remix-using-tone-js-1kdg) - This post got me featured on official [Dev Community twitter](https://twitter.com/ThePracticalDev/status/1401192196334931969). I wanted to learn how to create music using code. I found Tone.js, a JavaScript library that allows you to play music notes. I used to be a musician and that gravitated me towards Tone.js.

I'm happy to write my articles on dev.to and interact and help out other developers. Even though the last few months were difficult for me finding my place as a software developer.

## What's next
I have decided to go with the next steps pursing and developing my career. I have plans to start a new personal blog to write my personal experiences in the next few weeks. I'm focusing on my re-branding and building my skills. 

I recently left my previous job and this is a good time to focus on my professional career. I decided to continue pursing personal projects and becoming more focused on open source contributions. I wanted my work to make an impact. 

I'm have gained so many skills and continuing to learn new ones.I'm taking charge of my own career again.
Javascript - interpretation and JIT
Tags: webdev, javascript, beginners
Published: 2023-07-09 10:54:23

We hear about Javascript as it is an interpreted language and the JIT engine made up of it. But did you know that Javascript is also considered either a compiled or an interpreted language thanks to the JIT engine?

### What is JIT?
JIT stands for Just-in-time, it is a dynamic compilation which is being done before the code execution. In the normal process of translate Javascript into machine readable code, the interpreter translates the human code (Javascript) **line by line** and execute that code (bytecode - 0 and 1) immediately, so there's no room for optimization, just translate and run. The JIT leans in this process to do the optimization between the translation and execution.

### How JIT helps
The JIT engine plays a vital role in the optimization. It will do assumptions and estimations in parts of our code, then decide what code can be sent directly to execution and which one should be hold to optimize.
The JIT holds some assumptions for our code when it's doing the optimization. With some code is run frequently, the engine will capture the code, make assumption and optimized version for each of its assumption. If the assumption is correct, the optimized code will be pushed to the compiled code and ready for execution, if it's not, the wrongly-optimized code will be trashed out - this is called **deoptimization**.
[Elaborate more on how JIT works - A crash course in just-in-time (JIT) compilers](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/).

The process of op-deop may cause the engine to slow down the run time of the code due to making to many assumptions by the JIT. The browsers solve this problem by limiting how many time the op-deop should occur, if it reaches the limit, the op-deop should be stopped trying and use the baseline code.

### Conclusion
We studied what is JIT and how it helps transform Javascript in to a well-balanced between compiled and interpreted language. Each browser or server engine has different ways of implementing JIT but in general, they have the same core idea which includes the op/deoptimization with the baseline compiler and optimization compiler.

References:
- [Why JavaScript is called Interpreted or JIT(Just In Time) Compiled](https://javascript.plainenglish.io/why-javascript-is-called-interpreted-or-jit-just-in-time-compiled-c8cc490682bd)
- [The JIT in JavaScript: Just In Time Compiler](https://blog.bitsrc.io/the-jit-in-javascript-just-in-time-compiler-798b66e44143)
How to setup Laravel and Vue .js project in single Digital Ocean droplet
Tags: laravel, vue, digitalocean
Published: 2023-07-09 15:55:41

I write this simple tutorial for beginner who having a hardtime to setup Laravel and Vue.js project in single droplet. This tutorial is suitable if you just want to playing around Digital Ocean and want to use it as a staging. I will not explain detail so i will just drop the link of tutorial below for every step i done.

1. Setup web services for Laravel and Vue.js. For me i use LEMP(linux-nginx-mysql-php)as a web services. 
Link: https://www.digitalocean.com/community/tutorials/how-to-install-linux-nginx-mysql-php-lemp-stack-on-ubuntu-20-04 to

2. In my case i need to buy domain for both Laravel and Vue.js project. I buy domain from GodDaddy. After that i need to change nameserver in GoDaddy admin to Digital Ocean nameserver.
Link: https://docs.digitalocean.com/tutorials/dns-registrars/

3. After you change the namespace, you now have an access from your droplet to connect your domain with any apps in DigitalOcean. 
Link:https://docs.digitalocean.com/products/networking/dns/how-to/add-domains/#add-a-domain-using-the-control-panel

4. Then you need to clone both Laravel and Vue.js project in /var/www/. Then run composer install for laravel and run npm install for vue.js project. If your droplet doesnt have composer and npm yet you can follow tutorial below.
Link: https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-22-04
https://www.digitalocean.com/community/tutorials/how-to-install-and-use-composer-on-ubuntu-20-04

5. You need to setup Nginx sites-available config for both Laravel and Vue.js project so the projects can connected with the domain that you buy.
Link: https://www.digitalocean.com/community/tutorials/how-to-install-and-configure-laravel-with-lemp-on-ubuntu-18-04
https://www.digitalocean.com/community/tutorials/how-to-publish-a-vuetify-app-with-nginx-on-ubuntu-20-04 

And finally now you can run both Laravel and Vue.js project in single droplet. If you having any question you guys can drop the comment below. I will try to answer it.
[Summary] Chapter#07 "The Internals of PostgreSQL" Heap Only Tuple and Index-Only Scans
Tags: postgres, apacheage, devcommunity, bitnine
Published: 2023-07-09 15:54:27

## Heap Only Tuple(HOT)
Hot reduces the necessity of vacuum processing. HOT effectively use pages of rows and tables when the updated row is stored in the same table page that stores the old row.
HOT reduces the issues of inserting of the index tuples consuming the index page space and vacuum cost of index is high. 
PostgreSQL does not insert the corresponding index tuples and sets the HEAP_HOT_UPDATED bit and HEAP_ONLY_TUPLE bit to the t_informask2 field of the old tuple and new tuple.


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

**Pruning of the line pointer**
- Find the index tuple that points to the target tuple
- Access the line pointer [1] that is pointed from the getting index tuple.
- Read 'Tuple_1'
- Read 'Tuple_2' via the t_ctid of 'Tuple_1'.

**Defragmentation of Dead tuples**

## Index-Only Scans
Direct use of index key without accessing the corresponding table pages reduce the Input/Output cost, and all the target entries of SELECT statement are included in the index key. 

PostgreSQL uses visibility table to avoid dilemma, and when all tuples stored in an page are visible then PostgreSQL uses the key index tuple and does not access table that pointed at from the index tuple to check its visibility. 

[Reference](https://www.interdb.jp/pg/pgsql07.html)
FIND command
Tags: linux4all, fatherofos
Published: 2023-07-09 15:54:11

**_<u>FIND :</u>_** 

Mainly used for search the file or document name.

Eg., 

_find /u01/ -name "ERROR"_ --> it will search both files and folders.
_find /u01/ -type f "ERROR"_  --> it searches only file name.
_find /u01/ -type d "LOGS" _ --> it searches only directory name.
find . -name ".*"  --> Important , this will search the hidden file in the current directory.
find . -size +1GB / +1M / -1M_  --> last one will provide the everything which are less than 1 MB.
_find /u01/ -name "ERROR*"_ --> it can search the wildcard also.


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


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

**_<u>Important Points :</u>_**

1. Find is case sensitive.
Javascript Polyfill Array.prototype.square #4
Tags: javascript, programming, webdev, polyfill
Published: 2023-07-09 15:42:02

**This problem was asked by ByteDance.**

## Implement a custom Array function, Array.prototype.square() 

which creates a new array with the results of squaring every element within the array the .square() method is called on.

**Examples**

```
[-2].square(); // [4]
[1, 2, 3, 4].square(); // [1, 4, 9, 16]

```
**Notes**

- The original array should not be modified.
- Assume that the array only contains numbers.

**Solution**

```
Array.prototype.square = function () {
  return this.map((num) => num * num);
};
```

- We utilize Array.prototype.map() to iterate over each element in the array, and return a new array with the squared value of each element.
- The original array is not modified due to the use of map(), which creates a new array with the results of calling the provided function on every element