teleren/devto huggingface dataset:
AWS Storage Gateway
Tags: aws, storage, hybridit, cloudskills
Published: 2022-09-02 04:49:26

   AWS Storage Gateway is a hybrid cloud storage service that allows on premise systems access to virtually unlimited cloud storage on AWS. 

   Storage gateway allow you to link on prem applications to AWS and cashing data locally for low latency access.

With Storage Gateway, it is easy to simplify storage management and drastically cut cost by going hybrid. It can also  be used as Disaster Recovery  strategy by  making sure that backups are stored somewhere else and can be recovery in case of a disaster.

 It is important to mention that storage gateway is nota free service. For more information regarding storage gateway prices , please check the link [here ](https://aws.amazon.com/storagegateway/pricing/)


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

 AWS Storage Gateway offers three different types of gateways: File Gateway, Volume Gateway and Tape Gateway.

1.	**File Gateway** store files as block on amazon S3 using NFS or SMB protocol.

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


2.	**Volume Gateway** is used to backup volume data as EBS snapshots in Amazon S3 using the Iscsi protocol. It has 2 types of volumes: Store Volumes and Cash Volumes.

- a.	**Cache Volume** store all on prem data on S3 and only keep recently accessed data locally. 
- b.	**Store Volume** store the primary data locally while it is backups that data as EBS snapshot into S3.


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

3.	**Tape Gateway** (VTL) allow on prem orgs that already have a Tape Library to back up their virtual dates in S3


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

 On the next post, I will be going into the details and also show how it is implemented.
Build a simple HTTP Server in GoLang
Tags: go, http, html
Published: 2022-09-02 04:39:20

Hi this is Akshay Rao. I wanted to learn Go language, so thought of building a simple project. In this project ,I have built a simple a HTTP server which gives a html Response in the web browser when the paths are changed.

**Let's Start**
1. We will have to specify the package, I am main because the package "main" instructs the Go compiler to build the package as an executable application rather than a shared library. Our executable application will launch from the "main" function in the package.
2. Create a file name it as .go extension like I have named as “project.go”.
3. GoLang has packages for all the commands, so we will have to import packages .
1. fmt- will help in printing out the results and getting        inputs from users.
3. - html - to print the html response on the web browser. 
4. - log- if there is any error while running the serverit will log the error in terminal. 
5. - net/http - to create a server.
4. Create a function main.
5. Call the HandlerFunc from the http api, which will call the function specified in it fro the specified path.
6. At last we will  run the server with the help of ListenAndServe at 8080 and set the error message as nil.
7. Wrap the ListenAndServe in log.Fatal to the show the error if it occurs.
8. Then run “go run /folder name/.go”

![Image 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iiovg9cji5o9h7hv95gg.png)
Open localhost:8080 in your web browser

![Image 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbu2n5qtflkp1waebwg9.png)
Add /home to the url

![Image 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j82cfarqmporpbftzyhv.png)
Thank you
Using setTemplate to change a template file in layout
Published: 2022-09-02 04:21:07

If a phtml file includes $block->getChildHtml, sub blocks are being defined in layout files. It will be too risky to redefine a set of blocks using referenceBlock tag.

` <referenceBlock name="header-content">
    <action method="setTemplate">
        <argument name="template" xsi:type="string">Paboda_Sample::html/header.phtml</argument>
    </action>
</referenceBlock>`
Darken image with tailwind css.
Tags: tailwindcss, css, webdev, codenewbie
Published: 2022-09-02 04:09:18

Sometimes making the background image darken becomes difficult for the newbies.

Let us simplify that even with a css framework like tailwind css.

Considering the following 
**code:**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jq2b00dgs6ztytty5j0l.png)
**snapshot:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h87yjdp7jh3zipcywtwv.jpg)


Now let us make this darken by adding **brightness filter**.
**code:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dm6hetpok5ftl49bii8l.png)
**snapshot:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dnc2oe9ohtelym0hixv.png)




As simple as that. This is more than easy.
Replace Elements with Greatest Element on Right Side
Tags: javascript, leetcode
Published: 2022-09-02 04:02:58

```


let replaceElements = function (arr) {
  let arrayLength = arr.length;
  let max = Number.NEGATIVE_INFINITY;

  for (let i = 0; i < arr.length; i++) {
    max = Number.NEGATIVE_INFINITY;
    for (let j = i + 1; j < arrayLength; j++) {
      if (max < arr[j]) {
        max = arr[j];
      }
    }
    arr[i] = max;
  }
  arr[arrayLength - 1] = -1;
};

var replaceElements_2 = function (arr) {
  let max = arr[arr.length - 1];

  for (let j = arr.length - 2; j >= 0; --j) {
    let curr = arr[j];
    arr[j] = max;
    max = Math.max(max, curr);
  }

  arr[arr.length - 1] = -1;
  return arr;
};

console.log(replaceElements([17]));
console.log(replaceElements_2([17, 18, 1, 3, 4, 5, 6]));

```
NEARCON HACKATHON - $140K+ in Prizes
Tags: hackathon, javascript, rust
Published: 2022-08-31 15:58:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vi0t7mrj0u6z7n56nft2.png)
## Building a multi-chain, open web future.

NEAR is inviting hackers to join us during NEARCON this year, Sep 11-14, in Lisbon, for an intensive 48 hour IRL hackathon. Win prizes, get onstage for a live “Dragon’s Den” with crypto titans, and most importantly… have fun building!

The hackers are expected to build on NEAR and present an MVP of a product that focuses on one of the 7 NEARCON’s panels:

- Future of finance – DeFi apps and features

- Sustainability – blockchain solutions for green tech and environment
- Governance – decentralizing NEAR protocol; making DAO useful in real world
- Future of work – edu tech on blockchain; job market solutions for Web3 professionals and beyond
- Web2 to Web3 – bootstrapping “traditional” apps and tools on blockchain
- Technical content – tooling, documentation and tutorials
- Creators – utility on top of NFTs

Teams of size 1-5 from all backgrounds are welcome to apply. As space is limited, priority will be given to early applicants with clear credentials, strong intentions to attend in person, and produce a great Web3 hack! Let’s build!



https://irlnearconhackathon.splashthat.com/
https://nearcon-irl-hackathon.devpost.com/
Valid Mountain Array
Tags: javascript, leetcode
Published: 2022-09-02 03:04:32


```
const validMountainArray = function (arr) {
  let maxHeight = Number.NEGATIVE_INFINITY;

  if (arr.length == 1 || arr.length === 2) {
    return false;
  }

  for (let i = 0; i < arr.length; i++) {
    maxHeight = Math.max(maxHeight, arr[i]);
  }

  const peakIndex = arr.indexOf(maxHeight);

  if (peakIndex === 0 || peakIndex === arr.length - 1) {
    return false;
  }
  // check up hill..
  for (let i = 0; i < peakIndex - 1; i++) {
    if (arr[i] >= arr[i + 1]) {
      return false;
    }
  }

  for (let i = peakIndex; i < arr.length; i++) {
    if (arr[i] <= arr[i + 1]) {
      return false;
    }
  }

  return true;
};

console.log(validMountainArray([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]));

```
Conditional Component Rendering Tips
Tags: react, typescript, javascript, jsx
Published: 2022-09-02 02:41:36

---
title: Conditional Component Rendering Tips
published: true
description: 
tags: react,typescript,javascript,jsx
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

How do you write a code if you want to render a component by some conditions?

Following is a my way. 

It's TypeScript friendly!

```typescript
 const If = <T extends string>(props: { 
   type: T, 
   [key in T]: ReactNode, 
   else: ReactNode 
 }) => {
   return <>{props[props.type] || props.else}</>
 }
```

# Usage
```typescript
type UserRole = 'admin' | 'developer' | 'manager' 
 export const UserRoleView = (props: { role: UserRole }) => (
   <If 
   	type={props.role} 
   	admin={<div>admin</div>} 
   	developer={<div>developer</div>} 
   	manager={<div>manager</div>} 
   	else={<div>No role</div>} 
   />
 )
 
```
What to Include in Your Cookie Policy?
Tags: beginners
Published: 2022-09-02 02:14:37

Websites use cookies to store data about your interactions and preferences as you browse the internet. This enables them to modify their content and give you a more tailored experience.

It is always a good idea to read a website's privacy policies or get in touch with it directly if you have questions or concerns about how cookies are used on that particular website.

You can easily setup a unique cookie policy for your website using a [Shopify cookie policy generator](https://www.enzuzo.com/shopify-cookie-banner-generator). What is cookie policy? Find out by reading on!

## **What Is Cookie Policy?**

A set of guidelines that control how cookies are used on your website is known as a cookie policy. It details the data being tracked about the user, its use, and the locations to which it will be delivered. 

Regulations governing cookies must include information on how to refuse them. The user will be able to change their preferences or decide they no longer want to participate in a survey by visiting the website in person or by filling out an online form.

It's crucial to establish a cookie policy for two reasons: first, so that people are aware of how you use cookies, and second, so that you can adhere to privacy regulations.

## **What to Include in Your Cookie Policy?**

Although each cookie policy is unique, all policies should cover these fundamentals. When drafting your own policy, bear the following in mind:

- From every page of your website, visitors should be able to identify and access your cookie policy. 

- Your policy should be written in simple, basic English that everyone can understand. A good place to put it is in the footer, together with your other legal documents. Avoid using complex language and technicalities.

- Your policy should provide a comprehensive list of all the cookies that your website utilizes, as well as details on their use and destination. If consumers may opt out or have their data deleted, you should also mention so.

- Your cookie policy must contain an easy-to-understand explanation of how user data gathered by cookies will be handled in order to be in compliance with GDPR rules. If appropriate, you should additionally give consumers a way to opt out.

- Your cookie policy might also include details on how you utilize data other than cookies, including IP addresses or query strings. Although the GDPR does not require this, including this information in your policy may be beneficial.

- To keep the content current and accurate, your cookie policy should be constantly updated. Every time you make changes to your website that can alter how cookies are used, it's a good idea to review your policy
.

## **Conclusion**
A precise and updated cookie policy is crucial for website owners. This not only enables you to abide by privacy regulations like the GDPR but also lets your users know how you use cookies on your website. 

It's critical to provide complete details on all of the cookies your website utilizes as well as information on how user data will be handled in order to build a cookie policy that works.
Top Ten Times JavaScript is Mentioned in Moby Dick
Tags: javascript, kotlin, devops, mobydick
Published: 2022-09-02 02:10:45

Sometimes, In this modern day, we forget our humble origins. To bless your weekend, here are some classic references to JavaScript in Herman Melville's classic Novel "Moby Dick"

“It is not down on any Map(); true places never are.”

 “As for me, I am tormented with an everlasting itch for things JavaScript. I love to sail forbidden seas, and land on barbarous coasts.” 

“Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people's hats off - then, I account it high time to get to JavaScript as soon as I can.” 

“I try JavaScript, I achieve what I can.” 

“Ignorance is the parent of JavaScript.”

“JavaScript is the parent of fear.”

“Consider the subtleness of the JavaScript; how its most dreaded creatures glide under water, unapparent for the most part, and treacherously hidden beneath the loveliest tints of azure. Consider also the devilish brilliance and beauty of many of its most remorseless tribes, as the dainty embellished shape of many species of sharks. Consider, once more, the universal cannibalism of the JavaScript; all whose creatures prey upon each other, carrying on eternal war since the world began.

Consider all this; and then turn to the green, gentle, and most docile Kotlin; consider them both, the JavaScript and the Kotlin; and do you not find a strange analogy to something in yourself? For as this appalling ocean surrounds the verdant Kotlin, so in the soul of man there lies one insular Tahiti, full of peace and joy, but encompassed by all the horrors of the half-known life. God keep thee! Push not off from that isle, thou canst never return!” 

“Talk not to me of blasphemy, JavaScript; I'd strike the sun if it insulted me.” 

“...to the last I grapple with thee; from hell's heart I stab at JavaScript; for hate's sake I spit my last breath at JavaScript.”

“Call me JavaScript.”
what should I learn in the next few years?
Tags: beginners
Published: 2022-09-02 01:14:37

I'm a 12-years old interested in programming. I've learned Python and just began to learn C++. My question is what should I learn next? How should I learn it--buy a book or take a lesson? What should I put in my most effort and time? Would like to hear you advice, and thank you for your time and effort.
Overflow and Underflow in Solidity
Tags: blockchain, solidity, ethereum, hacks
Published: 2022-09-02 00:50:06

It is important to be grounded in the basics of any technology you decide to play for the long term. In this article, we will be looking into Underflow and Overflow in solidity.


# Overflow
Overflow is a state a uint (unsigned integer) reaches its byte size, the next element added will return the first variable element (default variable value). The byte size of uint Is 255 which means once it gets to the max it resets to 0.

*Illustrated Below:*
```
uint16 number = 65535;
return number++;
// this returns 0 because it has gotten to the max
```

# Underflow
Similar to overflow, underflow is a state where an uint16 if subtracted by 1 equals 0, it will show 65535 (because uints are unsigned in solidity, and therefore cannot be negative)

*Illustrated Below:*
```
uint16 number ; // number here is equal to 0
return number--;
// this returns 65535 because it has gotten to the Minimum
```

Overflows are very common in solidity and must be checked for with control statements such as:
```
if(a + c > a) {
  a = a + c;
}
```

Now you understand the Overflow and Underflow concepts, you need to pay attention while writing your codes, and also keep in view what values the variable will hold because once a smart contract is deployed, it is immutable.

An easier alternative is to use OpenZeppelin's SafeMath library ([Docs](https://docs.openzeppelin.com/contracts/3.x/api/math) & [Github](https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/utils/math/SafeMath.sol)) which automatically checks for overflows in all the mathematical operators. The resulting code looks like this:
```
a = a.add(c);
```
If there is an overflow, the code will revert.

I hope this has helped you to gain an overview of Overflows and Underflow in Solidity and navigate better in these scenarios!
understanding ArrayList
Tags: arraylist, dsa, beginners, programming
Published: 2022-09-02 00:39:06

# Understanding the concept of ArrayList :

> Authors : Divyansh Pratap Singh ([twitter](https://mobile.twitter.com/dev_pratap3250/))

# Array List vs Array :

| Array List | Array |
| :--- | ---: |
|they have variable size| they have fixed size|
|they have non-continous memory allocation | they have continous memory allocation |
|they can store only objects | they can store primitive data-types ex. int , float |

# Implementing ArrayList

 
        `import java.util.ArrayList;
        public class arrayy_list{
            public static void main(String[]args){

                ArrayList<Integer> list = new ArrayList<Integer>();

            }
        }
       `
> Similarly for declaring String

`ArrayList<String> name = new  ArrayList<String>();`


# Adding element  in ArrayList

> we use add function to add an element in ArrayList

`ArrayList<Integer> list = new ArrayList<Integer>();
list.add(3);`

> Adding elements 3,2,5,0 --> below is the complete code for adding element
'''
import java.util.ArrayList;
        public class arrayy_list{
            public static void main(String[]args){

                ArrayList<Integer> list = new ArrayList<Integer>();

                list.add(3);
                list.add(2);
                list.add(5);
                list.add(0);
            }
        }
`

# Accessing elements of ArrayList :

> to access element in ArrayList we  use get function . Inside get function we  pass the index position of the element .


`list.get(0);`



> Gives us : 3

# Adding element in middle of ArrayList : 

 > add  function adds an element at the end of the ArrayList ; to add element at any position in ArrayList we use add function and pass 2 parameters ;


`list.add(<indexposition><element>);`

`list.add(0,9);`

> Result : [9,3,2,5,0]

# Changing element in ArrayList :

> to change a value in ArrayList we  use set function . The function takes  2 parameters ;  1st is the index position of the element you want to change and the 2nd parameter is the new element.


`list.set(0,8);`

> Result : [8,3,2,5,0]

# removing an element from ArrayList :

> to remove a element from ArrayList we use remove function and pass the element index position as the  parameter.


`list.remove(0);`

> Result : [3,2,5,0]

# printing complete ArrayList


`System.out.println(<ArrayList name >);
System.out.println(list);`
> Result : [3,2,5,0]
get-npm-assets for an easier installation
Tags: npm, node, productivity, devops
Published: 2022-09-02 00:36:48

It's easy enough to do a post install in your npm package. But, after a while, package after package, the shell scripting gets tedious.

I have some packages that install executable node.js scripts in the npm global bin directory. Then, I had to go fishing around for a template for the config file. I just wanted a command that would get the stuff for me. And, I needed the command to run for a particular script in the bin directory.

Maybe it's out there. But, it seemed easy enough to make and pass on. So, today, I made [get-npm-assets](https://www.npmjs.com/package/get-npm-assets).

You can read the Read.me to see how to make use of it. 

Just to give you a highlight, I have already put it to use for one of my other packages [copious-endpoints](https://www.npmjs.com/package/copious-endpoints).  For that, I made a **asset-map.json** file.  This file maps the bin scripts released by copious-endpoints to the files that are needed to run each program.

Here is the file contents:

```
{
    "copious-contacts" : "contact-service.conf",
    "copious-user" : "relay-service.conf"
}
```

This is file relates to the bin field in package.json. Here is the bin field from the module's package.json file:

```
  "bin" : {
    "copious-user" : "./bin/endpoint-user.js",
    "copious-contacts" : "./bin/endpoint-contacts.js",
    "add-mini-links" : "./bin/add-mini-links.js"
  },
```

So, to use one of the programs released the user will need to call something like this:

```
$copious-user relay-services.conf
```

But, where is that file? What should it look like? If I knew once, what if it changed?

But, I could call **get-npm-assets** as follows:

```
$get-npm-assets copious-user
```

Now, as a user, I don't have to look into the module directory to get an example. And, this version of the command will get the relay-services.conf instead of contact-service.conf.

You an also set up an assets directory and have the whole directory copied into a local assets directory that **get-npm-assets** will make for you.

Enjoy. Please leave issues in the github repository.
Chrome插件开发 - Popup page modifications
Published: 2023-08-13 02:14:33

---
title: Chrome插件开发 - Popup page modifications
published: true
date: 2022-09-02 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/translate/build-chrome-extensions/Popup-page-modifications
---

通过插件修改网页

当点击扩展选项的时候，网页颜色跟着改变

<video
  src="https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/modify-page_rux0n9.webm"
  autoPlay
/>

修改`manifest.json`

```json diff
{
  "permissions": [
    "alarms",
    "notifications",
    "storage",
    + "activeTab",
    + "scripting"
  ]
}
```

新增权限解释

- `activeTab`允许修改和检索活动标签
- `scripting`允许向浏览器注入脚本

修改`src/App.jsx`，向弹窗页面增加按钮

```jsx
import React from 'react'

export default function Colorize() {
  const colorize = async () => {
    const [tab] = await chrome.tabs.query({active: true, currentWindow: true})
    chrome.scripting.executeScript({
      target: {tabId: tab.id},
      function: changeColor
    })
  }

  const changeColor = () => {
    chrome.storage.sync.get('color', ({color}) => {
      document.body.style.backgroundColor = color
    })
  }

  return <button onClick={colorize}>Colorize 💖</button>
}
```

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/page-modifications)
Blog: 2022-09-02: Content & Tooling Team Status Update
Tags: puppet, content, updates
Published: 2022-09-09 14:47:38

---
title: Blog: 2022-09-02: Content & Tooling Team Status Update
published: true
date: 2022-09-02 00:00:00 UTC
tags: puppet, content, updates
canonical_url: https://puppetlabs.github.io/content-and-tooling-team/blog/updates/2022-09-02-status-update/
---

## Farewell Peter!

Sadly early next week [Peter](https://github.com/petergmurphy) will be finishing up his internship with us in preparation to return to University and complete the final year of his degree. He has been a great sport and such a valuable asset to the team. We want to say thank you for all of your hard work. Peters work ethic has been nothing but excellent and we will most definitely miss his fun, hardworking and can do attitude. We want to wish you all the luck in the world with your final year, but as always we know you will do amazing.

## Community Contributions

We’d like to thank the following people in the Puppet Community for their contributions over this past week:

- [`puppetlabs-kubernetes#568`](https://github.com/puppetlabs/puppetlabs-kubernetes/pull/568): “Support Debian 11”, thanks to [deric](https://github.com/deric)
- [`puppetlabs-ntp#647`](https://github.com/puppetlabs/puppetlabs-ntp/pull/647): “SMF service instance change in Oracle Solaris 11.4 SRU 45.119.2”, thanks to [Kristijan](https://github.com/Kristijan)

## New Module / Gem Releases

The following modules were released this week:

- [`puppetlabs-ntp`](https://github.com/puppetlabs/puppetlabs-ntp) (`9.2.0`)