teleren/devto huggingface dataset:
841. Keys and Rooms (javascript solution)
Tags: algorithms, javascript
Published: 2021-03-22 05:31:52

###Description:
There are N rooms and you start in room 0.  Each room has a distinct number in 0, 1, 2, ..., N-1, and each room may have some keys to access the next room. 

Formally, each room i has a list of keys rooms[i], and each key rooms[i][j] is an integer in [0, 1, ..., N-1] where N = rooms.length.  A key rooms[i][j] = v opens the room with number v.

Initially, all the rooms start locked (except for room 0). 

You can walk back and forth between rooms freely.

Return true if and only if you can enter every room.

###Solution:
Time Complexity : O(n)
Space Complexity: O(n)

```javascript
// DFS apprach
var canVisitAllRooms = function(rooms) {
    // Keep track of visited rooms
    const set = new Set();
    
    // Recursive dfs function to search rooms
    function dfs(index, rooms, set) {
        // Don't check this room if it has already been visited
        if(set.has(index)) return;
        // Add this room to the list of checked rooms
        set.add(index);
        // Check all the keys in this room
        for(const key of rooms[index]) {
            dfs(key, rooms, set);
        }
    }
    // Start at the first room
    dfs(0, rooms, set);
    
    // Check if all the rooms have been visited
    return set.size === rooms.length;
};
```
Prank Your Coder Friend On April Fools With This!
Tags: javascript
Published: 2021-03-22 05:28:51

> Get Ready To Prank Your Coder Friends With A Simple Code!

#### Just rewrite the console.log function with: 

```javascript
var $old_consoleLog = console.log;
console.log = function(String){
   $old_consoleLog("Bonkers: " + String);
}
```

Explanation: 
```javascript
var $old_consoleLog = console.log; 
```
Stores console.log function as another variable: "$old_consoleLog"
##### Don't let your coder friend find out this variable

```javascript
console.log = function(String){
   $old_consoleLog("Bonkers: " + String);
}
```
Rewrites original console.log function to output "Bonkers: ..."; 
Can also replace "Bonkers with any other Value as Prefix"

### Can Revert Changes with: 
```javascript
console.log = $old_consoleLog;
```

Reaction: **What? Why Console.log Is Adding Bonkers to its output?**
Markdown Basics
Tags: markdown, basics, html
Published: 2021-03-22 05:21:39

**Markdown was developed by John Gruber in 2004.**
It is basically used to format a text file. We can make headings in different sizes and we can add bullet points and we can do basic HTML-like stuff in markdown.

In this article, we are going to learn the basics of Markdown

## Content

1. Headings
2. Italic
3. Strong or bold
4. Task List
5. Blockquote
6. Horizontal rule
7. Unordered lists
8. Ordered lists
9. Links
10. Images
11. Code Blocks

### Headings

We can write six different types of headings of varying sizes.

```markdown
       # Heading 1
       ## Heading 2
       ### Heading 3
       #### Heading 4
       ##### Heading 5
       ###### Heading 6
```
# Heading 1
## Heading 2
### Heading 3
####  Heading 4
##### Heading 5
###### Heading 6
---
### Italic

We can Italic text in two different ways

```markdown
   _This text is italic_
   *This text is italic*
```
_This text is italic_ <br>
*This text is italic*

---

### Bold

```markdown
   __This text is italic__
   **This text is italic**
```
 __This text is bold__  <br>
 **This text is bold**

---

### Task List

```markdown
   *  [x] task 1
   *  [ ] task 2
```

---

### Blockquote

```markdown
   > "Every skill you have today was once unknown to you.
             > A human brain is a learning machine. Stick with it." <br>
                                                           >  James Clear
```

   > "Every skill you have today was once unknown to you.
             > A human brain is a learning machine. Stick with it." <br>
                                                           >  James Clear

---

### Horizontal rule

```markdown
   ---
   ***
```

---
***

### Unordered lists

```markdown
   * item 1
   * item 2
   * item 3
```
* item 1
* item 2
* item 3
 
---

### Ordered lists

```markdown
  1.  item 1
  2. item 2
  3. item 3
```
1. item 1
2. item 2
3. item 3

---

### Links

```markdown
   [hashnode](https://hashnode.com/)
```
[Hashnode](https://hashnode.com/) 

---

### Images

```markdown
   ![Night](https://images.unsplash.com/photo-1607190510513-fb1ea3ed2633?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1953&q=80)
```
![Night](https://images.unsplash.com/photo-1607190510513-fb1ea3ed2633?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1953&q=80)

---

### Code Blocks

``` javascript
   console.log('markdown')
```

```python
   print('hashnode')
```

You can write any programming language with a markdown like the above example.

**Thank you for reading the article**

**My Twitter link** <br>
[srimaniteja19](https://twitter.com/srimaniteja19)
How to Set Element Position to another Element's position.
Tags: javascript, css, html
Published: 2021-03-22 05:14:32

>#### How to Set Element Position to another Element's position. 😎

Did you ever want to set an element's position to another element's position?

You Can Do This Now.

### Example: 

## HTML: 
```html
<div id="Elem1">😀</div>
<div id="Elem2">🕶</div>

<div id="btn">
	Wear Sun Glasses
</div>
```

## Css: 
```css
body{
	font-size: 30vh;
	user-select: none;
}
#btn{
	position: absolute;
	top: 2.5vh;
	font-size: 5vh;
	filter: brightness(100%);
	font-family: sans-serif;
	padding: 1vh;
	background: rgb(200,200,200);
	cursor: pointer;
	width: 40vw;
	text-align: center;
}
#btn:hover{

	filter: brightness(80%);
}
#Elem1{
	position: absolute;
	right: 1vw;
}
#Elem2{
	position: absolute;
	z-index: 3;
}
```

## Javascript [OP]:
```javascript
var btn = document.querySelector("#btn");
var e1 = document.querySelector("#Elem1");
var e2 = document.querySelector("#Elem2");

btn.addEventListener("click", function(){
	e2.style.left = e1.getBoundingClientRect().left + 20 + "px"; // With Offset Of 20px for correct postition
	e2.style.top = e1.getBoundingClientRect().top + "px"; 
});
```
Sass: @import
Tags: css, programming, webdev, design
Published: 2021-03-22 04:53:30

Hi Guys! Lets talk about files and file structures using Sass.

When organizing your web design style files, you don't want to put all the styles into one file. Think when you are building a massive web application, you will have to sift through thousands of lines of code to style or change one thing. 

Here is an example on how to best organize your files.

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

Notice how the master.scss file is the only one that does not have the underscore at the beginning of the filename. This means that everything with an underscore is a partial file and should not be generated into a css file. In the html file, when you link the style sheet, the master style sheet will be the main one used and generated.

The files that are partial files when you want to use them into the master, you simply use @import at the top of the file. For example, if you have a _variables.scss file that stores all the variables you set for styling, you would import it at the top of the master or any other file you want to use using one line of code.

    @import "variables";


I hope this helped, let me know if you'd like me to cover anything else regarding scss.
HTML-Starter-Templates
Tags: html, css, githunt, beginners
Published: 2021-03-22 04:49:35

Hi all HTML and CSS users, I am starting a GitHub repository to collect some basic open-source templates to start web projects. 
I want to ask all of you for your advice on good practices on web pages and layout, you are welcome to collaborate in the repository, it is intended to be a good first commit if you are starting with GitHub and you know some tips about HTML and CSS.

Here is a small description of the project.

## Scope

HTML starter templates seek to collect various templates with different approaches to starting web projects quickly, easily, and efficiently.

## Structure

Each folder within this repository contains a template design with its respective HTML and CSS files.

## Contributing to HTML Starter Templates

First off, thanks for taking the time to contribute!

## Submitting changes

Please send a GitHub Pull Request with a clear list of what you've done and make sure all of your commits are atomic (one feature per commit).

Always write a clear log message for your commits. One-line messages are fine for small changes, but bigger changes should have clearer descriptions.

## Coding conventions

* We indent using two spaces (soft tabs)
* We use HTML for all views
* We ALWAYS put spaces after list items and method parameters ([1, 2, 3], not [1,2,3]), around operators (x += 1, not x+=1), and around hash arrows.
* This is open-source software. Consider the people who will read your code, and make it look nice for them.

This repo is under the MIT License and Contributor Covenant Code of Conduct.

{% github JoelBuenrostro/HTML-Starter-Templates %}
Creating Hello World! In Java
Tags: java
Published: 2021-03-22 04:44:38

>## Creating Hello World! In Java

> Steps:

#### 1) Download & Install Java
#### 2) Download & Install An Java IDE (Integrated Development Environment) **(I Use Eclipse Ide)**
#### 3) Create Java Project 
#### 4) Use This Code: 

```java
class helloworld {
  public static void main(String[] args){
     System.out.println("Hello World!");
  }
}
```

## Explanation: 
```java
   class helloworld{
   }
```
defines a class named helloworld 

```java
  public static void main(String[] args){
  }
```
Main Java Code Goes Here.

```java
   System.out.println("Hello World!");
```
Prints "Hello World!" in java console.

**Remember: Don't Forget To End**
```java
 System.out.println("Hello World!")
```
**with a semicolon (;) to prevent an error**.

Here we go! we have a hello world project in java!
714. Best Time to Buy and Sell Stock with Transaction Fee
(javascript solution)
Tags: javascript, algorithms
Published: 2021-03-22 04:23:22

###Description:
You are given an array prices where prices[i] is the price of a given stock on the ith day, and an integer fee representing a transaction fee.

Find the maximum profit you can achieve. You may complete as many transactions as you like, but you need to pay the transaction fee for each transaction.

Note: You may not engage in multiple transactions simultaneously (i.e., you must sell the stock before you buy again).

###Solution:
Time Complexity : O(n)
Space Complexity: O(1)

```javascript
var maxProfit = function(prices, fee) {
        // The max profit we could make
        let profit = 0;
        // Total profit if we bought at the current price
        let hold = -prices[0];
        // Loop through all the days
        for (let i = 1; i < prices.length; i++) {
            // Check if it would be more profitable to hold or sell
            profit = Math.max(profit, hold + prices[i] - fee);
            // Check if it would be more profitable to hold or buy 
            hold = Math.max(hold, profit - prices[i]);
        }
        return profit;
};
```
Visual Studio Code Tips in 2 minutes - How to highlight current line
Tags: typescript, webdev, dotnet, vscode
Published: 2021-03-22 04:22:58

---
title: Visual Studio Code Tips in 2 minutes - How to highlight current line
published: true
description: Visual Studio Code Tips in 2 minutes - How to highlight current line
tags:  typescript, webdev, dotnet, vscode
---

In this video, I am going to show you a tip about highlighting current line visual studio code. It can be done via "workbench.colorCustomizations". There are other tons of options provided in workbench color customizations I will talk about that in upcoming videos.


Here is the code the same.

`
"workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#e9f2fa",
        // "editor.lineHighlightBackground": "#171a1a",
        "editor.lineHighlightBorder": "#9292ac"
    }
`


For more details please do watch my video.

{% youtube xKuf_j_GqNA%}



If you like this video and wanted to see a similar kind of video then, please subscribe to my you tube channel at - https://bit.ly/codewithjv.

Also, Please comment about what content you want to see in my YouTube channel.
【Tips】Connect Host OS proccess by localhost from within Docker container
Tags: docker, tips
Published: 2021-03-22 04:09:03

Tips for connecting Host OS process by `localhost` from within Docker container.

This is used when the container is running without using `docker-compose` for each process.

```bash
$ docker run -it --rm --add-host=localhost:$(ipconfig getifaddr en0) IMAGE
```
Incidentally, if you don't use `localhost` and you are using Docker Desktop for Mac, you can connect using the DNS name `host.docker.internal`.
Cat Lover - Day 2
Published: 2021-03-22 04:01:03

So, yesterday was my Day 2 of #100DaysOfCode, I made a cat generator, which generates a cat every time a user clicks on the generate cat button, it is an awesome beginner friendly project for javascript developers like us.

Hope you guyzz like it. 

Do check it on GitHub: https://github.com/ashuydv/cat-generator
For testing it online: https://ashuydv.github.io/cat-generator/
Let start ! we need to improve our problem solving skills
Tags: javascript, webdev, programming, algorithms
Published: 2021-03-22 03:47:18

Join with me on this journey. I will post 1 Question . Yes that's right only one question a day and we will try to find all possible solution for that one FUCKING question.

STEPS are 

1] You need to post your answer for that question under Questions thread.

Example:  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo8jd7uzgigjy095o5a2.PNG)



That's it guys we will be going from simple programs to COMPLEX SHIT !



Join the Slack Channel -> https://join.slack.com/t/learning-javascripthq/shared_invite/zt-nnif2icl-F98k48FMlunsI2CgHaaWaA
Create a runtime hierarchical config engine in 5 minutes using Java
Tags: java, database, computerscience, tutorial
Published: 2021-03-22 03:35:07

One of many things Kiara DB can do.

Please provide feedback and help this open source project improve. Here is a 2 minute read blog post.

https://www.kapoorlabs.com/make-a-runtime-hierarchical-config-engine-with-kiara-in-5-minutes/
AWS CloudFormation Outputs
Published: 2022-12-09 14:09:32

---
title: AWS CloudFormation Outputs
published: true
date: 2021-03-14 12:31:44 UTC
tags: 
canonical_url: https://blog.niradler.com/aws-cloudformation-outputs
---

My favourite way to deploy resources on AWS is to use Cloudformation (cf), I'm using CDK/Serverless/SST to create my Cloudformation templates.

often you will want to share data between stacks, the recommended way will be stack outputs, to use this output in build (CI/CD) time I needed an easy tool to pull the output into a machine-readable file, for this task I created [cfexport](https://github.com/niradler/cfexport) npm module.

let's look at the following example, we have cf template that deploys our API to AWS APIgateway service, next we have a pipeline to build our client code and upload it to s3, during the build we want to transfer our APIgateway URL to the client build script.

let's look at how we do that with cfexport

```
npm i cfexport

```

next, let's update our scripts filed in `package.json`

```
"pre-build":"cfexport compile -v --file \"./.env.template\" --region us-east-1 --output \"./.env\" --format \".env\""

```

and create our template file `.env.template`

```
REACT_APP_APPLICATION_URL=DEV-APIGATEWAY-URL // you can use --prefix DEV- and then just put APIGATEWAY-URL
REACT_APP_IGNORE_PARAM=!dont-change // value starting with ! will be ignored.

```

running `npm run pre-build` will create `.env` file, and replace `DEV-APIGATEWAY-URL` value with the export value (export name should be = `DEV-APIGATEWAY-URL`), values starting with ! will be ignored and ! will be removed.

```
REACT_APP_APPLICATION_URL=https://{restapi_id}.execute-api.{region}.amazonaws.com/{stage_name}/
REACT_APP_IGNORE_PARAM=dont-change

```
Zuri Training experience
Published: 2021-03-22 03:29:36

Being a trainee at the Zuri training program has really opened my eyes to the tech world. For the past few days, since the training began, I have been able to talk to various mentors and they have opened up about their tech/coding journey. Meeting new people, developers, who are willing to learn and share their knowledge has been a great motivation throughout the journey so far.
What is localStorage?
Tags: webdev, javascript, codenewbie, programming
Published: 2021-03-22 03:28:29

Local Storage let us save the data which is stored in the browser even when a user **refreshes** or **closes a page**. Let's know more about what is Local Storage in JavaScript. 

--- 

Local Storage holds **2 - 100MB+** data. Saved all data in `string(JSON) format`. It is also useful for web interface data. It is also used for offline storage of data. 

#### It has 3 three types of methods

- Read Data
- Write Data
- Delete Data

---

## Methods

- **setItem(k,v)** - Add key and value to local storage
- **getItem(k)** - Retrieve a value by the key
- **removeItem(k)** - Remove an item by key
- **clear()** - Clear all storage

---

#### setItem()

```javascript
let itemsArray = {
   id: "OWUAIJFNSOTEKSMJUFTHDSUQ", 
   name: "Rahul"
 }
 localStorage.setItem('items', JSON.stringify(itemsArray)); 
```

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616382616442/iT9v2-QEn.png?auto=compress">

### getItem()

```javascript
const data = JSON.parse(localStorage.getItem('items')); 
console.log(data); 
```

Note: `JSON.parse()` is used to covert the contents of `localStorage` back into something which we can work with later in the data variable. 

<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616382640286/EInxP1muJ.png?auto=compress">

### removeItem()

When **passed a key name**, the removeItem() method will remove that key from the storage if it exists. If there is no item associated with the given key, this method will do nothing. 

```
localStorage.removeItem('items'); 
```


---

### clear()

This method, when invoked, clears the entire storage of all records for that domain. It does not receive any parameters. 

```
localStorage.clear(); 
```

--- 

## Limitations

- Do not store **sensitive** user information in localStorage. 
- It is not a substitute for a server-based database as information is only stored on the browser. 
- localStorage is limited to 5MB across all major browsers. 
- localStorage is **quite insecure** as it has no forms of data protection and can be accessed by any code on your web page. 
- localStorage is **synchronous**, meaning each operation called would only execute one after the other. 

--- 
Originally at =>  [https://rahulism.tech/article/complete-guide-to-local-storage/](https://rahulism.tech/article/complete-guide-to-local-storage/) 

😀Thanks For Reading | Happy Coding😎

<a href="https://buymeacoffee.com/rahxuls" target="_blank">
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1616209806065/A24KTdOi6.png?auto=compress">
</a>
Make your Rails application SEO friendly by setting meta tags
Tags: rails, webdev, seo, optimization
Published: 2021-03-22 03:03:07

![SEO](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qedj43qm3nzfa11hoju.jpg)<figcaption>Designed by roserodionova / Freepik</figcaption>

##SEO and meta tags##
Search engine optimization (SEO) is the practice of increasing the quality and quantity of traffic to a website from search engines. Sharing your website on social media has become crucial to improve the SEO of your websites.

Meta tags are a type of HTML tag that provide search engines with information about a webpage (metadata). It is not displayed on the page itself. Search engines use this metadata to understand additional information about the webpage for crawling and indexing.

##Open Graph protocol##
Open Graph is a protocol that allows developers to control the previews of their websites on social media when they are shared. It has been very common to see rich previews of websites with appealing images and catchy descriptions on social media these days.

##Implementation##
####Install [`meta-tags`](https://github.com/kpumuk/meta-tags) gem####
Add the `meta-tags` gem to your `Gemfile`:
```ruby
gem 'meta-tags'
```
And run bundle install command.

####Congfiguration####
```ruby
# app/helpers/application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'MyMovies.dev',
      title: 'MyMovies',
      reverse: true,
      separator: '|',
      description: 'The most popular movie website in the world',
      keywords: 'action, horror, drama',
      canonical: request.original_url,
      noindex: !Rails.env.production?,
      icon: [
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'MyMovies.dev',
        title: 'MyMovies',
        description: 'The most popular movie website in the world', 
        type: 'website',
        url: request.original_url,
        image: image_url('login-page.png')
      }
    }
  end
end
```
The image file should be placed in `app/assets/images`. The standard size of the Open Graph image is 1200×627px.
####Add meta tags to views####
Add this to the main layout to set meta tags:
```erb
# app/views/layouts/application.html.erb

<head>
  <%= display_meta_tags(default_meta_tags) %>
</head>
```
This will display the default meta tags we configured in `app/helpers/application-helper.rb`. This is necessary especially when you don't set meta tags for each page of your website.

Now, let's set meta tags for individual pages. In the beginning of the `html.erb` file:
```erb
<% set_meta_tags title: 'Contact page', description: 'Contact us from...' %>
```
You don't need to place it inside the `<head>` tag if you have the `<head>` tag shared in `app/views/layouts/application.html.erb`.
***
This is it! If you want to check how the meta tags are set, go to your website and view page source.