teleren/devto huggingface dataset:
Connect using BASH
Tags: ssh, bash, droplet, tutorial
Published: 2022-12-03 11:08:48

> " This article is published using [Lamento](https://www.lamento.in/)🍋

## Install Bash
If you have Linux or mac OS running on your device you are blessed with free bash integration but in windows you should install and configure it. luckily for windows we can use [Git Bash](https://git-scm.com/downloads) as an alternative & Powershell to works fine.

## Path
Open your Bash terminal on the folder where you needed the SSH key to be generated.

## Generate key gen

1- Enter this command to start the ssh generation process.
```
ssh-keygen
```

2- It will ask you to assign the path where it need to be store the generated token.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bfck6c78b2zeibz176r.png)

3- A passphrase will be asked for generations but this could be omitted just leave it empty and press enter.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhujqu8nsp02iate7vmy.png)

4- The ssh key is generated on the specific location successfully.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x39d8lz67bvmn913n8nv.jpg)

5- Enter this command to view the files.
```
cat your-ssh.pub
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uolvmuii3z7pxrydgzj5.png)
  
6- Paste the pub ssh key in this text area and assign a name to it.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1subxnugmw0hr2t4j3nr.png)

7- To connect with the cloud computer from your terminal use this command.
```
ssh -i ./plausible-ssh root@13x.5x.x6.8x
```

> Here root is your digital ocean Droplets user name & follow up the ip address of the droplet.
How to Check Directory Size in Ubuntu
Tags: linux, unix, beginners
Published: 2022-12-03 11:05:51

To check the size of a directory in Ubuntu, you can use the du command. This command stands for "disk usage" and it shows the amount of disk space used by the specified files or directories.

Options:

```
-h , --human-readable

-s, --summarize

-a, --all

-c, --total

--max-depth
```

To use the du command, open a terminal window and navigate to the directory whose size you want to check. Then, type du followed by the name of the directory, like this:

```
du /path/to/directory
```

This will display the size of the directory in kilobytes. If you want to see the size of all the files and directories inside the specified directory, you can use the `-a` option like this:

```
du -a /path/to/directory
```

This will display the size of each file and directory inside the specified directory, along with the total size at the end.

You can also use the -h option to display the size in a more readable format, such as megabytes or gigabytes, like this:

```
du -ah /path/to/directory
```

This will display the size of each file and directory in the specified directory in a human-readable format.

Overall, the du command is a useful tool for checking the size of directories in Ubuntu.
Advent of Code 2022 - Day 3
Published: 2022-12-03 11:01:46

---
title: Advent of Code 2022 - Day 3
published: true
description: I'm trying to solve all the Advent of Code puzzles in this video series.
tags:
cover_image: https://i.ytimg.com/vi/Le5WRtjyOyI/maxresdefault.jpg
---

{% youtube Le5WRtjyOyI %}

I'm trying to solve all the Advent of Code puzzles in this video series.
How JavaScript works?
Published: 2022-12-03 10:54:05

Let's Understand JS! There are few around the globe who loves JS like anything and the there is another part of the world who hates JS to the core. Hence on this blog, I will try to explain the behind the scenes on How JS works to make the latter part also fall in love in JS✌️😎



## **JS is a single threaded and synchronous language which means it can handle one task at a time**.



### What the heck is execution context in JS?


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



#### You can think of execution context(EC) as a container having two parts. The first part is named as **Memory** and also called as _Variable environment_  and the second part is named **code** also called as _Thread of execution_ .



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




The first being memory allocation phase, during this phase, JS skims the whole code and assigns memory to each and every variable and function; For variables during this phase, JS assigns a special placeholder called undefined and a whole copy of function code for the function.


Functions in JavaScript, when you compare with other programming languages, work differently.

Let's take an simple example,

```
var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);
```
The above example has an function which takes an argument of type number and returns the square of the number.



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3hfh8xmte66di1bcdy9g.gif) 



The second phase is the execution phase, during which JS executes the code line by line and assigns the actual value to the variables. The functions are considered as first-class citizens in JS, they behave very differently from any other language. That being the case when JS sees a function invocation it creates a brand new execution context inside the global execution context and executes the function in the same way with this two-phase process.



#### Are you wondering how JS manages its job smoothly?

All these tasks of creating and deleting the EC once the work is done are managed in JS by a stack called the call stack. Call stack has also other names such as,

- Execution Context Stack
- Program Stack
- Control Stack
- Machine Stack
- Runtime Stack





##### In this article, we have understood how JS works and the execution context briefly. I hope this blog is helpful, please feel free to share and comment below.
The role of Meta Programming in Low-Code
Tags: lowcode, programming, productivity
Published: 2022-12-03 10:48:23

If I had a dollar for every time somebody asked me why we invented our own programming language called [Hyperlambda](https://aista.com/hyperlambda/), I would have been a bajillionaire a long time ago. The short answer of course is because applying true low-code is impossible without a meta programming language, and there are none in existence today in main stream usage as far as I know besides Hyperlambda.

True low-code is more than just scaffolding OOP code. Sure you can generate a database model in some OO language, and consume it from your existing programming language – But, to create true meta programming capacity you need to be able to semantically inspect your existing code. The computer needs to understand the code. For traditional programming languages, this is simply not possible.

Meta programming serves a similar purpose in low-code as your database does for data handling. You can handle data using your file system, but without structured data, with a decent normalisation, where entities are referencing each others in relationships, your data is really nothing but a big mountain of garbage. The same is true for meta programming in regards to low-code. A traditional programming language such as C# or Java simply cannot do what Hyperlambda can do.

As far as I know, we are the only low-code software development platform out there with a truly functioning meta programming language. Something even Microsoft can testify towards, since [this article](https://learn.microsoft.com/en-us/archive/msdn-magazine/2017/june/csharp-make-csharp-more-dynamic-with-hyperlambda) became their 5th most read article throughout their entire existence when it was published some few years ago. We’re still getting dozens of visitors to our [GitHub repository](https://github.com/polterguy/magic) originating from the above article.

To understand Hyperlambda is to realise it’s simply a “better XML”. XML of course is not particularly humanly readable. Hyperlambda on the other hand, is just as easily understood by humans as YAML or Markdown. This creates a symbiotic relationship between the human software developer, and the machine, allowing for automated processes, where the machine for the most parts creates the code. This is why we can say with confidence the following ...

> Where the Machine Creates the Code

Seriously, nobody else could even use the above slogan, simply because they would be lying. We however, are 100% serious when we utter the above!
This week’s newsletter is out! (03-12-2022) - Digital Fashion, Odious Debt, and Flaming Bonfires
Tags: javascript, tech, webdev
Published: 2022-12-03 09:59:33

---
title: This week’s newsletter is out! (03-12-2022) - Digital Fashion, Odious Debt, and Flaming Bonfires
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Digital Fashion, Odious Debt, and Flaming Bonfires

https://markjgsmith.substack.com/p/mark-smiths-newsletter-03-12-2022

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
The Feynman Technique: A How-to Guide for Lifelong Learners and Students
Published: 2022-12-03 09:59:00


The Feynman Technique is an effective way for lifelong learners and students to learn and retain information. It was developed by Nobel Prize-winning physicist Richard Feynman as a way to make learning easier and more efficient. The technique involves breaking down a concept into its component parts, simplifying it, and teaching it to someone else. This guide will provide a step-by-step guide to using the Feynman Technique to learn and retain information.


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

**Step 1: Choose a Concept**
The first step in using the Feynman Technique is to choose a concept that you are trying to learn. Once you have identified the concept, break it down into smaller concepts that can be more easily understood. This will help you gain a better understanding of the overall concept and how it works.

---

**Step 2: Explain the Concept to a Layman**
The next step is to explain the concept to a non-expert. This can be done by using simple language and visuals to make the concept easier to understand. This will help you identify any gaps in your understanding of the concept and will also help you identify any misconceptions about the concept.

---

**Step 3: Identify Gaps in Your Understanding**
Once you have explained the concept to a non-expert, it is important to identify any gaps in your understanding of the concept. These gaps can then be filled in by researching the topic further or asking an expert for advice.

---

**Step 4: Identify Misconceptions**
It is also important to identify any misconceptions that you may have about the concept. Misconceptions can be corrected by researching the topic further or asking an expert for advice.

---

**Step 5: Simplify the Concept**
The next step is to simplify the concept. This can be done by using analogies, stories, and visuals to make the concept easier to understand. This will also make it easier for you to explain the concept to someone else.

---

**Step 6: Teach the Concept**
The final step is to teach the concept to someone else. Explain the concept in a simple, straightforward way and ask questions throughout the process. This will help ensure that you have fully understood the concept and can explain it effectively to others.

---

**Conclusion**
The Feynman Technique is an effective way for lifelong learners and students to learn and retain information. By breaking down a concept into its component parts, simplifying it, and teaching it to someone else, you can better understand the overall concept and how it works. The Feynman Technique can help you learn and retain information more efficiently, while also improving your communication skills.
Machine Learning Day - 1
Tags: machinelearning, coding, programming
Published: 2022-12-03 09:30:35

So today finally I decided to start my machine learning journey properly. I say properly because I have my final project coming up.

To get started, I covered important concepts data preprocessing such as manipulating missing values using imputer class in sklearn, encoding categorical data, spliting data into training and testing data and why is it important? and finally learnt about feature scaling and the uses cases of feature scaling.
How to install and activate Virtual Environment in Python Django
Tags: python, django, venv, rest
Published: 2022-12-03 09:28:48

```
1. cd C:\Users\user\Desktop\UserDjangoProject> **pip install virtualenv**
2. For Create a venv run this ** virtualenv -p python3 venv**
3. Activate **virtualenv venv\Scripts\activate**
4. It will look like this (venv) C:\Users\user\Desktop\UserDjangoProject>
5. Then run **pip install -r requirements.txt**
6. Run the django project run this **./manage.py runserver**

If error occurs like
`bash: env/venv/bin/activate: Permission denied`
Run . env/venv/bin/activate (Your path can be change)
```
5 Relationship Tips - Laravel
Tags: php, laravel, beginners, webdev
Published: 2022-12-03 09:24:28

My dear, I found this wonderful source https://www.youtube.com/watch?v=ijt10uTM8LY that shows us 5 Laravel Relationship Tips that are useful to us. They will make us happy in our projects and write our code. I will touch quickly on them, but visit the source and deepen it a lot

- withDefault()

We have in the database some Category that do not have a parent, and we do not want to show the empty value. Here comes the withDefault() 

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

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

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

- Eager and Lazy Loading With Constraint

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

- Querying Relationship Existence With Constraint

Let's single out some limitations on finding results using whereHas 

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

- Shorter Syntax to Query Relationship Existence

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

- Eager Loading and Query Relationship Existence Combo


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

I hope you enjoyed the code and I wish you always a happy code .
5 Easy Ways to Center a div Element in CSS
Tags: css, codenewbie, beginners, tutorial
Published: 2022-12-03 08:59:52

The nicest thing about CSS is that one problem can be solved in many ways. It doesn’t matter that you don’t know all the possibilities - you won’t struggle to find your way out of the problem.

However, you can be prepared by already knowing that it is possible to solve what you have at hand in many ways, as long as you are creative. Today we will walk through a simple and common situation you will encounter in your project: how to center your `div` element.
<br>

### option I

This will horizontally align the block to the center of the parent. You can also add `width` to your `.child` to prevent it from stretching out to the edges of the `.parent`.

```css
.parent {
    display: flex;
}
.child {
    margin: auto;
}
```

### option II

Probably one of the first solutions you’ll learn when aligning items because of its simplicity. `align-items` will pack the items vertically to the center, while `justify-content` will take care of the horizontal part.

```css
.parent {
	display: flex;
	align-items: center;
	justify-content: center;
}
```

### option III

Setting the `top` and the `bottom` may look pretty straightforward. However, if you stop there, the browser will just center the element’s edges and it will display it off-center. Adding the `transform` property will solve that issue.

```css
.parent {
	position: relative;
}

.child {
	position: absolute;
	top: 50%;
	bottom: 50%;
	transform: translate (-50%, -50%);
```

### option IV

You may look to find a way to write as little code as possible in your project when that’s possible. Using the `place-items` shorthand property, which will align your item both vertically and horizontally, you’re basically getting rid of setting the block and inline directions (`align-items` & `justify-content`)

```css
.parent {
	display: grid;
	place-items: center;
}
```

### option V

Last in line for today is another shorthand property called `inset`, which can help you center your `div` element. `margin: auto` will behave as in the first example, while `inset` corresponds to `top`, `bottom`, `left` and `right`.

```css
.parent {
	position: relative;
}

.child {
	position: absolute;
	inset: 0;
	margin: auto;
}
```

Although they are far from being the only options when centering the `div` elements in your CSS, I hope you’ll make use of them throughout your exploration.

Can you think about another way you can `center` your `div` next time? 🤓

---
_Cover photo by <a href="https://unsplash.com/@albrb?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Alejandro Barba</a> on <a href="https://unsplash.com/s/photos/dot?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_
Toàn Cầu Pool
Tags: beboidep, beboigiadinh
Published: 2022-12-03 08:43:18

"Toàn Cầu Pool hoạt động trong lĩnh vực tư vấn thiết kế & xây dựng các công trình bể bơi thương mại, bể bơi thi đấu, bể bơi gia đình,… Cung cấp lắp đặt và bảo trì các thiết bị bể bơi uy tín, cao cấp và chất lượng và nhận được sự tin tưởng của khách hàng trên khắp cả nước. 

Hagtag: #toancaupool #toancaupoolcom #thietkebeboi #thietbibeboi #hoachatbeboi #phukienbeboi 

Website: [https://toancaupool.com/](https://toancaupool.com/) 
Email: info@beboitoancau.com / beboitoancau@gmail.com 
Địa chỉ: LO DM07-2 Làng Nghề Dệt Lụa Vạn Phúc – Q. Hà Đông – Hà Nội 
Số điện thoại công ty : 02485.828.898
Hotline: 0979.304.733"
UIKit vs SwiftUI
Tags: ios, swift, swiftui, programming
Published: 2022-12-03 08:40:08

SwiftUI and UIKit are two frameworks used for developing user interfaces on Apple platforms. SwiftUI is a newer framework that was introduced in 2019 and is designed to make it easier for developers to build user interfaces for Apple platforms. UIKit, on the other hand, has been around for much longer and is the primary framework used for building user interfaces on Apple platforms.

One of the main differences between SwiftUI and UIKit is the way that user interfaces are created. SwiftUI uses a declarative syntax, which allows developers to describe the user interface they want to create in a clear and concise way. UIKit, on the other hand, uses an imperative syntax, which involves writing code to explicitly describe how the user interface should be constructed.

Another key difference between the two frameworks is their approach to building user interfaces. SwiftUI uses a concept called "views" to represent the individual elements of a user interface, such as buttons, text fields, and labels. These views can be composed together to create more complex user interfaces. UIKit, on the other hand, uses a combination of views, view controllers, and other classes to build user interfaces.

Overall, SwiftUI and UIKit are both powerful frameworks for building user interfaces on Apple platforms. SwiftUI offers a more modern and declarative approach to building user interfaces, while UIKit offers a more familiar and established approach. The choice of which framework to use will depend on the needs of the project and the preferences of the developer.
Tips to organize a lot of information?
Tags: management, information
Published: 2022-12-03 08:23:39

There are many different ways to organize a large amount of information, and the best method will depend on the specific information you are trying to organize and the goals you have for using that information. Here are a few general tips that can help you organize a lot of information effectively:

1. Start by breaking the information down into smaller, more manageable chunks. For example, you might divide a large dataset into smaller sets based on different categories or themes. This can make it easier to work with the information and identify patterns and trends.

2. Create a system for labeling and organizing the information. This could involve using folders or file cabinets to physically organize paper documents, or using digital tools such as databases or spreadsheets to organize and sort information.

3. Use keywords and tags to help you search for and retrieve specific pieces of information. For example, if you are organizing a large collection of research papers, you might use keywords to describe the main topic of each paper and tag each paper with relevant information such as the author's name, the date it was published, and the journal it appeared in.

4. Regularly review and update your organization system. As you add more information, you may need to revise your system to ensure that it continues to work well for you. This might involve re-categorizing information or adding new keywords and tags.

5. Consider using a tool to help you manage and organize your information. There are many different tools available, such as project management software, note-taking apps, and reference management software, that can make it easier to organize and access a large amount of information.

---

Photo by <a href="https://unsplash.com/@freegraphictoday?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">AbsolutVision</a> on <a href="https://unsplash.com/s/photos/organize-information?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
ACCESSING NFT SMART CONTRACT CODE
Published: 2022-12-03 08:22:27

Web3 is fascinating! Did you know that you are able to access the source code of any NFT smart contract deployed in the Ethereum network? 
 
Let's see how: 

The best way to view the smart contracts is through Etherscan, an Ethereum block explorer. Etherscan allows users to easily search and browse transactions and blocks. It’s like the Google of Ethereum. 

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

Go to Etherscan through https://etherscan.io: This is the landing page that you’ll see: 

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

Now, we are going to search the smart contract of a popular NFT marketplace,[Bored Ape Yatch Club](https://boredapeyachtclub.com/). We will type in the symbol which is BAYC inside the search bar.  


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

Scroll down through the filter search bar under Tokens (ERC 721).  

Click on the “BoredApeYachtClub(BAYC)” and you'll be automatically redirected to the site containing the contract details.  

You will immediately see this page:  

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

On your far right you will see “Profile summary” containing the contract address, the official site link and the social profles.   

Click on the contract address. This is the site that you’ll see:  

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

Scroll downwards and you’ll immediately see this:  
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ohtos71d6v8ceilpf7j1.png)

Click on the contract tab that has a green tick on the right. You will be immediately redirected to this page:  

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

Scroll downwards and you’ll see the smart contract code. Fascinating!  
A practical example of decentralization in web3.