teleren/devto huggingface dataset:
Basics of Graph
Tags: datastructure, dsa, algorithms
Published: 2022-10-02 17:14:47

# Basics of Graph

Graph is data structure it has two componets 

1. vertex / node
2. edge

# Type of Graph

1. Undirect

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

degree(1) = 2 ← no of connected edges 

degree(2) = 3

### Total Number of edges in Undirect graph = 2 * E

(where E = Number of edges)

## Path

sequence of node without reapeting or revisiting any node.

### ex

1 3 2

1 5 

❌1 3 2 3 → invalid can’t revisit

### Undirected acyclic graph


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

1. Directed 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hladz22xqs4g0d9iw40u.jpg)
Indegree(2) = 2 ← number of incoming edges

Outdegree(2) = 2 ← number of outgoing edges

## Path


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

- Qwe can move 1 to 5 and 5 to 4
- similarly 1 to 2 and 2 to 3
- but we can not move from 5 to 1

### suppose if 2 to 1 is not there then we can call this Directed Acyclic Graph (DAG)

# Representation of Graph

1. adjacency matrix

 → when two node are connected put 1 at their position 

1. adjacency list 

→ write name of name and name of other connected nodes

## Example

### Graph


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


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

### Adjacency List


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

# If edges are having some weights then

### weighted undirected graph


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

### if weight is not given if still you need then you can consider it as 1

weighted directed graph


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

# Traversal in Graph

1. DFS - Depth First Search

→ Take one node and search all child until you reach leaf node still if dont find then comeback one step

1. BFS - Breadth First Search 

→ First Search all childs then grandchild then again child of grand childs
Iterate Through All an Array's Items Using For Loops (freecodecamp notes)
Tags: javascript, webdev, programming, beginners
Published: 2022-10-02 17:07:58

Original Question -> https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-all-an-arrays-items-using-for-loops 

**Question**

We have defined a function, filteredArray, which takes arr, a nested array, and elem as arguments, and returns a new array. elem represents an element that may or may not be present on one or more of the arrays nested within arr. Modify the function, using a for loop, to return a filtered version of the passed array such that any array nested within arr containing elem has been removed.

```javascript
function filteredArray(arr, elem) {
  let newArr = [];
  // Only change code below this line
  
  // Only change code above this line
  return newArr;
}
```

**Things to know before attempting this question**

1.How indexOf works ? The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.
2.How to iterate with a for loop
3.How to use .push()

**Answer**

```javascript
function filteredArray(arr, elem) {
  let newArr = [];
  // Only change code below this line
   
   for (let i=0;i<arr.length;i++){
      if(arr[i].indexOf(elem)==-1){
          newArr.push(arr[i])
      }
   }
  // Only change code above this line
  return newArr;
}
```
13 Web3 projects flagged for Hacktoberfest contributions - FrancescoCiull4
Tags: techtips, hacktoberfest, web3, opensource
Published: 2022-10-02 16:58:23

####   Original Tweet from [@FrancescoCiull4](https://twitter.com/FrancescoCiull4)
{% embed https://twitter.com/FrancescoCiull4/status/1575944598488129536 %}

🏁Hacktoberfest has begun🏁

13 Web3 projects flagged for [@hacktoberfest](https://twitter.com/hacktoberfest) #Hacktoberfest contributions.

Languages used:
- JavaScript
- Solidity
- Python
- PHP
- Go

↓ 

Blockchain Developer Bootcamp [@ConsenSys](https://twitter.com/ConsenSys) 

Open-source version of ConsenSys Academy's Blockchain Developer Bootcamp
{% embed https://t.co/ApLWvnwthv %} 

Celo Blockchain [@CeloOrg](https://twitter.com/CeloOrg) 

Official repository for the golang Celo Blockchain

{% embed https://t.co/Sz666Y5w9H %} 

Hyperledger Caliper [@Hyperledger](https://twitter.com/Hyperledger) 

A blockchain benchmark framework to measure performance of multiple blockchain solutions

{% embed https://t.co/K8ji5WF9Jh %} 

Hyperledger Cactus [@Hyperledger](https://twitter.com/Hyperledger) 

Hyperledger Cactus is a new approach to the blockchain interoperability problem

{% embed https://t.co/YZFHMNKkYK %} 

Stacks Blockchain API [@Stacks](https://twitter.com/Stacks) 

API for the Stacks 2.0 blockchain

{% embed https://t.co/ULq5BnGCxo %} 

Ethereum org Website [@ethereum](https://twitter.com/ethereum) 

Ethereum. org is a primary online resource for the Ethereum community.

{% embed https://t.co/cE7nF5h9Yt %} 

NEAR Protocol [@NEARProtocol](https://twitter.com/NEARProtocol) 

{% embed https://t.co/TZVAm0pj3t %} 

Near JavaScript API [@NEARProtocol](https://twitter.com/NEARProtocol) 

JavaScript library to interact with NEAR Protocol via RPC API

{% embed https://t.co/aVyC3KnHfJ %} 

rotki

A portfolio tracking, analytics, accounting and tax reporting application that protects your privacy

{% embed https://t.co/7zcGkV1MQ7 %} 

Web3 PHP [@official_php](https://twitter.com/official_php) 

A php interface for interacting with the Ethereum blockchain and ecosystem. Native ABI parsing and smart contract interactions.

{% embed https://t.co/Lw8IxrXoXp %} 

Ethereum Solidity

Solidity, the Smart Contract Programming Language

{% embed https://t.co/bRZcF6XODS %} 

Truffle [@trufflesuite](https://twitter.com/trufflesuite) 

A tool for developing smart contracts.

{% embed https://t.co/fi0IqUsiag %} 

Remix IDE [@EthereumRemix](https://twitter.com/EthereumRemix) 

Remix is a browser-based compiler and IDE that enables users to build Ethereum contracts with Solidity language and to debug transactions.

{% embed https://t.co/WLyIV9J4gq %} 

Intellij solidity [@intellijidea](https://twitter.com/intellijidea) [@JBPlatform](https://twitter.com/JBPlatform)

{% embed https://t.co/4cey5Qi73U %} 


#### Click [Here](https://www.knowledge-twitter.com/?utm_source=dev.to)  For More Posts Like This [https://www.knowledge-twitter.com](https://www.knowledge-twitter.com/?utm_source=dev.to)
I am building the MOST productive tool ever - part 2
Tags: javascript, programming, productivity, webdev
Published: 2022-10-02 16:44:51

One of my testers from my testing team requested a feature about a week ago that the todo stack must have a feature in which we can easily REMOVE a task from the middle if we want to.


## If you don’t know what todo stack is, here's a brief introduction.
Todo stack is a chrome extension. Which is being built by me and i have a team of 4 people as testers of this extension. It is Lightweight, Offline, Fast & Easy to work with tool. The vision is to build a tool which is minimal & productive as well. Read more.

At first, it sounded to me a little non-sense because then the whole idea of stack will die BUT then with time as i used and more worked on the project i realized that this MUST be in the extension.

Because sometimes we may want to delete from the middle. And so i coded a function that helps user to delete task from middle. Look at the live example below.


![live example of todostack middle delete feature](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q6xjbm5g1myweo5ewcb.gif)

## 🍴 What’s Happening?
Right now. I am fixing some of the bugs and working intensely on the user interface. If YOU WANT SOME FEATURES, COMMENT NOW!. And me and my team will try to deliver it on the next alpha update.

## 🎁 A surprise for you!
For users who will [REGISTER on our website](https://todostack.vercel.app/) we will specially invite them when the extension will be released publicly. And also if some of you want to get early access, YES ,YOU CAN. Fill the form which is also on website. And I will see you in email 😊.

## 💙 We will thank you!
Tell a friend about this chrome extension. [Visit our website](https://todostack.vercel.app/) and on the bottom you will see a share button, HIT and [Tell a friend](https://wa.me/?text=Hey.%20I%20recently%20discovered%20this%20tool%20for%20effortlessly%20managing%20your%20tasks.%20I%20also%20registered%20for%20the%20first%20day%20for%20the%20first%20user%20experience.%0ASign%20up%20here%20to%20receive%20a%20special%20invitation.%20https%3A%2F%2Ftodostack.vercel.app%2F). We’re currently getting 100's of people interested in this project. Help us reach our vision of 200+ registrations on our website.

>  Hey it's here:  [https://todostack.vercel.app/](https://todostack.vercel.app/)

## 🍬 One more thing, before you go
I write about interesting projects & internet and productivity and other amazing stuff as well. So if you don’t want to miss out on those stories HIT A FOLLLOW BUTTON ( We’re almost half way to 100).
object-oriented programming (OOP)
Published: 2022-10-02 16:41:16

Object-oriented programming (OOP) is a programming paradigm based on the concept of “objects”, which can contain data and code: data in the form of fields (often known as attributes or properties), and code, in the form of procedures (often known as methods).

A common feature of objects is that procedures (or methods) are attached to them and can access and modify the object’s data fields. In this brand of OOP, there is usually a special name such as this or self-used to refer to the current object. In OOP, computer programs are designed by making them out of objects that interact with one another.[1][2] OOP languages are diverse, but the most popular ones are class-based, meaning that objects are instances of classes, which also determine their types.

Many of the most widely used programming languages (such as C++, Java, Python, etc.) are multi-paradigm and they support object-oriented programming to a greater or lesser degree, typically in combination with imperative, procedural programming. Significant object-oriented languages include Java, C++, C#, Python, R, PHP, Visual Basic.NET, JavaScript, Ruby, Perl, SIMSCRIPT, Object Pascal, Objective-C, Dart, Swift, Scala, Kotlin, Common Lisp, MATLAB, and Smalltalk.
Is Digital transformation more disruptive then Gutenberg's revolution?
Published: 2022-10-02 15:44:52

570 years ago, in 1452, is the date that marks the beginning of the first book printed with Gutenberg's movable type technique (The Bible), and the start of the early modern period.

Today at the end of 2022 we are in the center of Digital Transformation, it is forever changing the way we work
and transmit knowledge and data.

But the invention of the printing machine is only one of the historical events, the Transformation is a new ERA that marks the end of HISTORY, the same as when the PREHISTORY getting ended with the invention of writing.

Professor Luciano Floridi, writes in one of his books:
"The actual generation is experiencing the transition from history to HYPERHISTORY"
HYPERHISTORY means our present and future, and some people still don't realize it ...
Currently Looking For A Node.JS Role 👋🚀
Tags: javascript, jobs, node, startup
Published: 2022-10-02 15:42:36

Hi everyone 👋,

I’m Ahmed Bankole, an experienced software engineer with 5 yrs+ experience in building softwares, tools and web applications and have a passion for building tools that solve problems.

I left my current company and decided to explore and give myself more access to new roles and opportunities but unfortunately I’ve been unable to land roles despite my experience and portfolio.

During my previous role at my last company , I had the opportunity to lead a team of 7 engineers remotely that turned an idea to a product and built innovative solutions across a variety of software platforms within few months of drawing on the whiteboard. My leadership experience and ability to communicate and listen to my coworkers has increased and it boosted my team productivity by 35%. I also had the opportunity to directly work and grow a product with no feedback into a product that has gained over 500+ users on the beta launch.

I’m currently in search for a role as Node.JS Backend Developer (remote) or FullStack Developer(NodeJS and VueJS) at any company or startup and would appreciate if I can get apply directly.

PS: I’m definitely okay working in an early stage startup with less than 10 members and I believe I can be able to grow with the product and team.

Here’s my GitHub profile if you’re interested in hiring me, please drop a comment and I’ll send my resume 🙂

GitHub:
https://github.com/geekyahmed

Thanks for listening 🙂👋
Slideshow - Free digital signage app for Android
Tags: android, showdev
Published: 2022-10-02 15:41:59

Hi guys,

I would like to introduce Slideshow app for Android, using which you can turn your Android tablet, box or stick into a Digital signage solution.

![Slideshow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n9bql2r1uhby2rf3op75.png)

Some of the features:

- Display images, videos, text, Excel, PDF, HTML files, YouTube videos, date & time, weather, RSS news
- Setup screen layouts and playlists for different parts of the day or different days of the week
- Upload files through embedded web interface from a browser or through USB flash drive, or synchronize from Google Drive / Dropbox / WebDAV

The app is free of charge for private as well as commercial usage, without any cloud dependency or fees.

You can find more information on [https://slideshow.digital/](https://slideshow.digital/) and tutorials are available on [https://www.youtube.com/channel/UCJFSXCItojY4PS76JNr_pdQ](https://www.youtube.com/channel/UCJFSXCItojY4PS76JNr_pdQ).

{% embed https://www.youtube.com/watch?v=yWlTqVzVJwk %}

I am looking forward to any feedback :)

Milan
NextJS Setup
Published: 2022-10-02 15:29:40

Setup dự án NextJS theo phong cách cần gì thì mới thêm cái đó.

Đầu tiên cần cài đặt NextJS dùng Typescript phiên bản mới nhất, hãy dùng câu lệnh:

`npx create-next-app@latest --typescript`

Sau khi cài đặt xong chúng ta mở dự án bằng VSCode sẽ thấy cấu trúc thư mục như sau:

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

Việc đầu tiên là tạo 1 thư mục src ở thư mục gốc và di chuyển thư mục pages, styles vào đó. Việc di chuyển này giúp thư mục gốc trông ngắn gọn và sạch sẽ hơn vì sau này có rất nhiều file khác được tạo thêm ở thư mục gốc.

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

NextJS có sẵn câu lệnh `npm next lint` và sử dụng ESLint để kiểm tra code có theo 1 quy chuẩn không nên tạm thời mình cứ dùng ESLint đó đã. Do ESLint để phát hiện thôi chứ không sửa code cho chúng ta nên phải cài thêm Prettier để sửa code, dùng câu lệnh:

`yarn add --dev prettier`

Prettier này cũng có quy chuẩn của riêng nó nên rất có thể nó sẽ xung đột với ESLint và ở trong tài liệu NextJS cũng nói thế nên chúng ta cần cài thêm một package để mà kết nối Prettier với ESLint, dùng câu lệnh:

`yarn add --dev eslint-config-prettier`

Sau khi cài xong chỉ đơn giản là vào file .eslintrc.json ở thư mục gốc và chuyển thành như sau:

`{
  "extends": ["next/core-web-vitals", "prettier"]
}`

Đại loại là extends thêm cái prettier sau cái next kia, nó cũng sẽ chạy sau thằng next kia nên sẽ không bị xung đột.

Còn tiếp nhưng hãn nháp vậy
Guide:How to learn Python in 2022
Tags: beginners, programming, python
Published: 2022-10-02 15:26:08

![Experts learning about python](https://naples.floridaweekly.com/wp-content/uploads/images/2022-06-30/7p1.jpg)

**Learn the Basics.**
To be an expert in any language you have to get the basics right. 
So one should by learning the basic data types:
1. int
2. float
3. bool
4. str
5. list
6. tuple
7. set
8. dict
9. None

Once you get the fundamentals down you can start to get into developer environments and make a local setup to get started in programming.
Try to learn about:
How to use the Terminal: just the basic running commands.
Pick a code editor of your liking :Code editors like sublime text, VScode.
Learn about IDEs and when you would need them like Pycharm , Spyder.
Notebooks are also used for programming like Jupyter Notebook.
The main takeaway is to learn about the existence of these technologies and when you would use them.

Next, you are ready to try on some advanced topics like Object Oriented Programming (OOP) and Functional Programming.
OOP is mostly popular and it is taught in coding bootcamps and colleges as well so learning this is highly recommended.

Next is the inevitable Data Structure and Algorithms (DSA).
When trying to get a job this is the part which decide either you are in or out. So this will require concentration and consistency. (I will cover DSA in my later posts)

At last, try to make some projects and keep practicing.

To learn these concepts you can refer to youtube tutorials by:
1. [freecodecamp](https://www.youtube.com/watch?v=eWRfhZUzrAc)
2. [Telusko](https://www.youtube.com/watch?v=QXeEoD0pB3E&list=PLsyeobzWxl7poL9JTVyndKe62ieoN-MZ3)
3. [Python docs](https://docs.python.org/3/tutorial/index.html)
Media Queries CSS, responsive design and css grid media queries
Tags: css, ux, webdev, design
Published: 2022-10-02 14:55:18


Let's talk about media queries and the media at-rule.  The media at rule can be used to style an element based on the result of one or more media queries. In layman's terms a media query is the browser going hey what kind of device am I on and what are its characteristics. This can then change the styling of a web page if the characteristics of the user device match certain criteria set by the developer.  You can then have multiple queries to handle different devices and environments. Be careful however, adding too many media queries can slow down your load times.

### Syntax
A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in ìvarious ways using logical operators.
So that's a big mouth full. Let's break this down a little bit. 
Media type is what broad category of output device (print , screen or all) that the query applies to. The media feature is a specific characteristic of that user agent output device. An example media query would be
  
```css
@media screen (min-width: 1400px) {
 p {
 color: #000;
 }
}
```

The above query will make all paragraph elements black if the users viewport is 1400 pixels or larger. Like most css this is a fairly simple concept and it's all about how you use it. For more information about specific media features and logical operators I would suggest checking out [mdn](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)

### Responsive design and grid
Media queries are an essential part of creating a responsive design. While there are many use cases for media queries, breakpoints in a grid system are my favorite. A breakpoint here means a specific size at which the layout will change in some way. Think of a site with 3 columns of text. This looks great on a 20" gaming monitor. But you might want the information in a single column on a mobile device for readability. You can set a breakpoint for a screen size of a mobile (about 500px) so if viewed this way all text will be in a single column.

### Bootstrap
A great example of media queries for responsive design is the css framework [bootstrap](https://getbootstrap.com/). This framework has 6 default breakpoints you can set for any given element. This means that specified element will change how it fits in the layout based on screen size while keeping other elements the same. I highly suggest having a look through the source code for bootstrap and seeing how they use media queries. It's how I really started to understand them. Have fun styling your sites.
Sitemaps
Tags: sitemap, webmasters, webdev, webdesign
Published: 2022-10-02 14:51:28

“Links, videos, images, and content generally there’s no website that doesn't use them, But do search engines know what your website uses? ”

![Visual sitemap sample preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjmp6gucrpssc4c2ojdr.jpg)

## What are Sitemaps?
A sitemap is a file that lists URLs for a site with metadata about each URL, so that search engines can more intelligently crawl the site. 

We use sitemaps to provide information about the types of content on your pages:

- An  image entry can include the location of the images included in a page.
- A news entry can include the article title and publication date.
- A video entry can specify the video running time, rating, and age-appropriateness rating.

Also provides valuable information about these files. Sitemaps supplement this data to allow crawlers that support Sitemaps to pick up all URLs in the Sitemap and learn about those URLs using the associated metadata. Using the Sitemap does not guarantee that web pages are included in search engines, but provides hints for web crawlers to do a better job of crawling your site.

## Do you need a sitemap?

- If your site's pages are properly linked: **NO**
- If your website is small: **No**
- If Your website doesn’t have many media files (video, image) or news pages: **NO**
- If you're using a CMS such as WordPress, Wix, or Blogger: **NO**

You might need a it if:

- Your site is really large
- Your site is new and has few external links to it
- Your site has a lot of rich media content (video, images) or is shown in Google News
- Your site has a large archive of content pages that are isolated or not well linked to each other

Well, It depends on how big your website is, that's why it can get more complex if your website is too big:

![Big sitemap preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q9z90wos3zyy7wuejk83.png)

and here is Google's sitemap:

![Google's sitemap preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hsg9xm0g9ng8pzsetys9.jpg)




## How to create a sitemap?
When creating a sitemap, you're telling search engines about which URLs you prefer to show in search results.

Well already there’s a sitemap generators out there:

- [Google sitemap generator](https://code.google.com/archive/p/googlesitemapgenerator/downloads)
- [Yoast SEO Sitemap Plugin](https://yoast.com/help/xml-sitemaps-in-the-wordpress-seo-plugin/) - (Specially for wordpress)
- [xml-sitemaps.com](https://www.xml-sitemaps.com/)

Tools to create Visual/Graphical sitemaps::

- [Miro.com](http://Miro.com)
- [MS whiteboard](https://www.microsoft.com/en-ww/microsoft-365/microsoft-whiteboard/digital-whiteboard-app)
- [Google Jamboard](https://jamboard.google.com/)


Resources:

- [Google search central](https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview)
- [Wikipedia](https://en.wikipedia.org/wiki/Site_map)
- [sitemaps.org](https://www.sitemaps.org/)