teleren/devto huggingface dataset:
Section 2.1 - AWS Certified Cloud Practitioner Study Guide
Tags: aws, cloudskills, examprep, cloud
Published: 2022-02-24 18:37:55

**This series is intended to be a personal study guide. Information may not be comprehensive or accurate. I am sharing it in case others find it useful. Please feel free to comment if any information is inaccurate.**

[Return to Exam Guide](https://dev.to/aidutcher/aws-certified-cloud-practitioner-study-guide-exam-guide-outline-233o)

**<u>2.1 Define the AWS Shared Responsibility Model</u>**

[AWS Shared Responsibility Model](https://aws.amazon.com/compliance/shared-responsibility-model/)


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

**Recognize the elements of the shared responsibility model**

- _Customer responsibility_ - security “in” the cloud
     - customer is responsible for securing their own cloud 
     resources and data
- _AWS responsibility_ - security “of” the cloud
     - AWS is responsible for securing the supporting 
     infrastructure
- _Inherited controls_ - customer fully inherits from AWS
- _Shared controls_ - AWS provides infrastructure, customers provide control implementation for services
- _Patch management_
     - AWS - patching infrastructure
     - Customer - patching guest OS and apps
- _Configuration management_
     - AWS - configures infrastructure devices
     - Customer - configures guest OS, databases, and apps
- _Awareness and training_
     - AWS - trains its employees
     - Customers - trains their employees
- _Customer-specific_ - controls which are solely the responsibility of the customer

**Describe the customer’s responsibility on AWS**

- _Describe how the customer’s responsibilities may shift depending on the service used (for example with RDS, Lambda, or EC2)_
- Service determines the amount of configuration work a customer must do
- IaaS such as EC2 requires the customer to perform all of the necessary security configuration and management tasks
     - management of guest operating system
     - security patches and updates
     - application software or utilities
     - configuration of firewall on each instance
- Abstracted services such as storage customers
     - manage the data
     - classify assets
     - apply appropriate permissions

**Describe AWS responsibilities**

- Configure, maintain, and secure physical devices and infrastructure

[Return to Exam Guide](https://dev.to/aidutcher/aws-certified-cloud-practitioner-study-guide-exam-guide-outline-233o)
React testing-library で getByText, expect, debug, を使ってみる
Tags: react, testing
Published: 2022-02-24 18:34:56

## 参考

https://qiita.com/ossan-engineer/items/4757d7457fafd44d2d2f#react-testing-library-%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0

ossan-engineer さんの記事

## プロジェクト作成

```
npx create-react-app ts-jest --template typescript
```

これで作成できる

===

## App.tsx に文字列を書く

```
function App() {
  return (
    <div>App Text</div>
  );
}

export default App;
```

シンプルに App Text を入れる

===

## App Text が入ってるエレメントが Document にあるかテストする

src/App.test.tsx を

```
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';
import App from './App';

describe('App', () => {
  test('renders App Text', () => {
    render(<App />);
    const appTextElement = screen.getByText('App Text');
    expect(appTextElement).toBeInTheDocument();
  });
})
```

describe を使ってブロックを作る
test のストーリーを書いて App コンポーネントを表示
App Text のテキストからエレメントを取得して変数に入れる
それがドキュメントにあるか期待する。

===

## npm test で動かす

```
npm test

 PASS  src/App.test.tsx
  App
    ✓ renders App Text (25 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.566 s, estimated 1 s
Ran all test suites related to changed files.
```

これでテストが通った。

===

## 中身を変えて通らないテストを打つ

```ts
const appTextElement = screen.getByText('App NoText');
```

これで打ってみる

```
    Ignored nodes: comments, <script />, <style />
    <body>
      <div>
        <div>
          App Text
        </div>
      </div>
    </body>

       6 |   test('renders App Text', () => {
       7 |     render(<App />);
    >  8 |     const appTextElement = screen.getByText('App NoText');
         |                                   ^
       9 |     expect(appTextElement).toBeInTheDocument();
      10 |   });
      11 | })
```

しっかりエラーが出てくれる。

===

## debug を使ってみる

```
  console.log
    <body>
      <div>
        <div>
          App Text
        </div>
      </div>
    </body>
    
    /Users/sato-ryo1/ts-jest/src/App.test.tsx:10:12
       8 |     const appTextElement = screen.getByText('App Text');
       9 |
    > 10 |     screen.debug()
         |            ^

      at logDOM (node_modules/@testing-library/dom/dist/pretty-dom.js:89:13)
```

エラーではない形で DOM を出してくれる。

===

次は他の取得方法でエレメントを取得してみる

===
React Context and Hooks: Pass data and update it easily
Tags: react, javascript, webdev, programming
Published: 2022-02-24 18:33:56


In the [previous article](https://dev.to/napoleon039/react-context-and-hooks-an-excellent-way-to-pass-data-252p), we looked at what Context is and how to pass values with it. In this article we will look at updating the Context value from the child component. For our theme example this means clicking the button will now switch the theme between light and dark.

## Updating Context value
In the previous article, we directly passed the theme via the Provider component. Although the value is passed to `ThemeButton.js` and `ThemeWindow.js` components, we cannot update this value.

To switch between the two theme types, we need to pass a function as well. This function will allow us to switch between both themes.

So we need to pass this function along with the dark theme via the Provider component. To do this, we can create a stateful object which will contain both the theme and a function. This way React can keep track of the theme and perform the necessary re-renders when it updates.

![Creating a stateful object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1delo9s2m52ccyc97o69.png)

This is pretty straightforward. A stateful object containing a theme type and a function is passed via the Provider component. While the `ThemeWindow` component only needs minor changes, we do need to implement the function in the `ThemeButton` component.

## Implementing theme switch function
Nothing special needs to be done to implement the function. Calling it when the button is pressed will switch the theme.


![Implementing theme switch function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3bavb7fx2pdvzum1833s.png)

As easy as that. When this button is clicked, the `switchTheme()` function will be executed. This will update the stateful value and thus trigger a re-render. And finally, the updated theme will be rendered in the `ThemeWindow` component.


![Minor changes in ThemeWindow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kabnjypr0b3kdw4eo6ab.png)

## Wrapping up
This was the conclusion to the previous article about React Context. As you have seen, React Context is a powerful tool. 

However, this simple example does not really showcase its power. In complex applications with dozens of components, where values and state need to be passed to several different components, React Context will make this job far easier than regular props.
Setting up Minikube in EC2 - The Easy Way
Tags: minikube, kubernetes, beginners
Published: 2022-02-24 18:31:49

**Minikube** is a tool that lets you run a single-node Kubernetes cluster on your personal computer or in EC2 instance so that you can try out Kubernetes.

### Step 1 : Launch an EC2 Instance using the following configuration.

* AMI : Ubuntu Server 20.04 LTS (HVM), (64-bit x86)
* Instance Type : t2.medium
* Configure Instance Details :
     - In this section scroll to the bottom, there you will find **user data** field, Copy this script and paste it in that field
```
#!bin/bash
sudo apt update
sudo apt upgrade -y
sudo hostnamectl set-hostname minikube
sudo apt-get install -y apt-transport-https ca-certificates curl
sudo apt-get update -y &&  sudo apt-get install -y docker.io
curl -LO https://storage.googleapis.com/minikube/releases/latest/minikube-linux-amd64
sudo install minikube-linux-amd64 /usr/local/bin/minikube
snap install kubectl --classic
sudo apt install conntrack -y
```

* Add Storage : 10GiB
* Add Tags : 
      * Key : Name
      * Value : minikube
* Security Group : Create a New Security Group
      * Type : All Traffic
      * Source : My IP (or) Leave it as 0.0.0.0/0
* Review and Launch : Select or Create a new key pair
      * Launch

### Step 2 : SSH into your EC2 instance
```
$ ssh -i [keypair] ubuntu@[Instance Public IP]
```
### Step 3 : Verify
    
As we already bootstrapped the all necessary installation, Only thing that we need to do is to verify the installed Minikube by checking the version.

```
$ minikube version
```
### Step 4 : Start running Minikube
* Become a root user
```
$ sudo -i
```
* Start the minikube
```
$ minikube start --vm-driver=none
```
* Check Status
```
$ minikube status
```

Thats it!!! Minikube is now running your EC2 instance !.
You can play with kubernetes using this single node kubernetes cluster.
What and How of Random Access Memory
Tags: beginners, programming, codenewbie, interview
Published: 2022-02-24 18:31:00

When a computer is running code, it needs to keep track of variables (numbers, strings, arrays, etc.).

**Variables are stored in random access memory (RAM).**

### Difference between RAM and storage

RAM is not where mp3s and apps get stored. In addition to "memory," your computer has storage (sometimes called "persistent storage" or "disk"). While memory is where we keep the variables our functions allocate as they crunch data for us, storage is where we keep files like mp3s, videos, Word documents, and even executable programs or apps.

Memory (or RAM) is faster but has less space, while storage (or "disk") is slower but has more space. A modern laptop might have ~500GB of storage but only ~16GB of RAM.

### How RAM looks like?

I can't really tell how exactly it looks like, but imagine  it as a long long bookcase, made with many shelves, in which every shelf is numbered, these numbers are it address. 

Each shelf holds 8 bits. A bit is a tiny electrical switch that can be turned "on" or "off." But instead of calling it "on" or "off" we call it 1 or 0. Each shelf has 1 byte of storage, as 1 byte = 8 bits

### Now a question comes, how everything is done?

Processor is the god. Processor does all the real work. It is connected to memory controller, and this memory controller does all the actual reading and writing from and to RAM. **IT HAS DIRECT CONNECTION WITH EVERY SHELF.**

This direct connection allows **Random Access** as it is connected to each shelf from 0 to n. 

Even though the memory controller can jump between far-apart memory addresses quickly, programs tend to access memory that's nearby. So computers are tuned to get an extra speed boost when reading memory addresses that're close to each other. 

Now **Cache** comes in picture. The processor has a cache where it stores a copy of stuff it's recently read from RAM.

This cache is much faster to read from than RAM, so the processor saves time whenever it can read something from cache instead of going out to RAM.

When the processor asks for the contents of a given memory address, the memory controller also sends the contents of a handful of nearby memory addresses. And the processor puts all of it in the cache.

But if the processor asks to read address 951, then address 362, then address 419...then the cache won't help, and it'll have to go all the way out to RAM for each read.

So reading from sequential memory addresses is faster than jumping around.

Thanks for reading this long long blog <3
Will try to keep next ones shorter :)
De-cluttering your screenshot images in the gallery with AI
Tags: azuretrialhack, azure, ai, customvision
Published: 2022-02-24 18:27:50



### Overview of My Submission
Ever taken a screenshot of an important transaction to share with your friend? Or maybe to capture an important map, articles, invoice, medical report, funny meme, or a conversation. Be it anything, eventually, after a while, we tend to forget to remove these images from our phones and as they gather dust and clutter our gallery, they also become dangerous weapons when in the wrong hands.

At times, these can contain personal information which when in the wrong hands can cause us inconvenience or big problems- Think virtual credit card information

So here's quick solution to de-clutter your gallery -

Custom Vision in Azure

This Azure service allows users to push bunch of images as sample data for image classification or object detection.

DIY Guidelines -

- Create your own project on the custom vision portal and upload sample data that summarizes your gallery. (choose project type as classification)
- Label/tag the images into major categories that you observe consuming most space in your screenshots album/gallery folder.
- Add negatives label to handle images that don't categorize into any of the major categories
- Train the sample data with classification model as a single tag per sample and publish that iteration to generate a prediction endpoint

I have classified the images into _Personally identifiable information(PII), Maps, and stock market_. The sample data is small for representation in this example. However, with time and each prediction, we expect the data to grow and the AI predictor to be more and more precise.

Now, we have an AI model, and all we need is this service to be exposed to be used in Android/iOS apps or simple console applications. Even better to integrate this service in an existing gallery app to categories PII data.

The image is identified based on sample data which includes invoices, payment transactions, contact details etc.
The sample application can be improvised to run on entire directory of images to categorise and tag the images at one go.

### Submission Category: 
AI Aces

### Link to Code on GitHub
[github] (https://github.com/TauseefMalik/screenshot-classifier)

### In-Action

Training iteration result - 

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

Unsampled test image -

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

Prediction -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/14yvp306eisrekhcrar5.PNG)
IOS App Ionic Vue Problem with Video
Tags: vue, ionicvue, html, capacitor
Published: 2022-02-24 17:56:13

Hi,
I have implemented an app with ionicvue. 
On one page I want to display mp4-videos with the HTML5 video control, e.g.

video src= https://media.geeksforgeeks.org/wp-content/uploads/20210314115545/sample-video.mp4" .... 

it works on web, on android, but it does not work on iOS. 
There is only a play button with a strike through line 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/co6fq12hwf673lvnf4j9.jpg)
I have tried all of the available option conbinations (controls playsinline webkit-playsinline etc.) but it does not work.
Any Ideas?
Thanks a lot 
Alex
Stacks Resources
Tags: stacks, web3, blockchain
Published: 2022-02-24 17:38:58

Hey there Stacks devs!

In my journey as Dev Advocate for the Stacks Foundation, I constantly come across various resources for learning the basics and intricacies of Stacks.

Stacks is relatively new and can be confusing and contentious for people new to the space. This page is designed to be an ever-growing list of resources both for learning about Stacks itself and for building on it.

Eventually, once a single static blog post becomes infeasible to host all the resources on, I will convert this into a more user-friendly format, but this works for now.

If you come across anything you think should be added to this list, please [reach out to me on Twitter](https://twitter.com/KenTheRogers)!

## Stacks Fundamentals
[Stacks Website](https://www.stacks.co/)
[How Stacks Works](https://www.stacks.co/learn/learning-resources)

## Proof of Transfer
[WTF is Proof of Transfer](https://hackernoon.com/wtf-is-proof-of-transfer-and-why-should-anyone-care-wd2330p9)
[Understanding Proof of Transfer](https://docs.stacks.co/understand-stacks/proof-of-transfer)
[What Kind of Blockchain is Stacks?](https://stacks.org/stacks-blockchain)

### Security and Connection to Bitcoin
[Muneeb Ali Twitter Space](https://twitter.com/muneeb/status/1492246784592302087)

## Developing on Stacks
[Introduction to Full-Stack Web3 Development with Stacks](https://dev.to/krgrs/built-on-bitcoin-an-introduction-to-full-stack-web3-development-with-stacks-me9)
[Clarity Universe](https://stacks.org/clarity-universe)
[Clarity Book *in-progress*](https://book.clarity-lang.org/)

## Smart Contract Examples
[Catamaran Swaps](https://github.com/friedger/clarity-catamaranswaps/blob/main/catamaran-btc/contracts/btc-stx-swap.clar) - Utilizing Bitcoin state in Clarity smart contracts

## Community
[My Twitter](https://twitter.com/KenTheRogers)
[Stacks Twitter](https://twitter.com/stacks)
[Stacks Foundation Twitter](https://twitter.com/stacksorg)
[Stacks Discord](https://discord.gg/bckcRKKdf9)
[Stacks Foundation](https://stacks.org/)
The easy straightforward way to create demo serverless functions on Netlify - with CORS
Tags: netlify, serverless, javascript
Published: 2022-02-24 17:33:55

Want to demo out an SPA? or a JAM site? The best way to demo the API calls is to create a real API sitting somewhere and serving static JSON. Much better than creating dummy data "inside" the application.

### Netlify
Why? because it is the easiest host to deal with. You can also host on a Free host on Azure, or Blaze free tier of Firebase. But the level of simplicity in Netlify is astonishing.

- Create a git project on GitHub, Gitlab, or Bitbucket
- Add a folder: functions
- Add a new file: demo.js

```javascript
const demos = require('./demo.json');
exports.handler = async (event) => {
	return {
		statusCode: 200,
		body: JSON.stringify({data: demos})
	}
}
```
Add a new file: demo.json

```json
[{
	"name": "demo"
}]
```
- Commit and push

In Netlify

- Add a new Site by "**import existing project**"
- Select your Git source and skip everything to "**Advanced**"
- Type "**functions**" as your functions directory
- Save

Now browse to:  
https://[yoursite].netlify.app/.netlify/functions/demo

### Run it locally:

- Run `npm install netlify-cli -g`
- Run `netlify login`
- Run `netlify dev -f functions`

Now browse to **http://localhost:8888/.netlify/functions/demo**

---

#### Extra step

- Create file /netlify.toml
- Add a build segment
```
[functions]
  directory = "functions"
```
- Add also a redirect segment to make your urls... nicer
```
[[redirects]]
  from = "/api/*"
  to="/.netlify/functions/:splat"
  status=200
```
- Commit and push, or run `netlify dev`

Now you can browse to **https://[yoursite].netlify.app/api/demo**

Now in your demo.js file handle all HTTP methods, add and remove to your dummy json, the changes will be reset when you commit, or when Netlify decides to restart the server (I think for free tier of all hosts, the server restarts upon request, and stays alive for couple of hours, not sure though).

And to tighten all loose ends, in the `toml` file, add this
```
[[headers]]
  for = "/*"
  [headers.values]
    Access-Control-Allow-Origin = '*'
    Access-Control-Allow-Headers = 'Content-Type'
    Access-Control-Allow-Methods = 'GET, POST, PUT, DELETE'
```

### UPDATE: CORS issue

Because the javascript functions are written in **async **method (otherwise a callback that looks ugly and I could not find it well documented). The headers in toml file are too late when you go live (at least on free tier). Solution? Always set headers in all responses. Like this
```javascript
const demos = require('./demo.json');

const headers = {
	"access-control-allow-origin": "*",
	"Access-Control-Allow-Headers": "Content-Type",
	// don't ever forget the OPTIONS
	"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS"
};

exports.handler = async (event) => {

	return {
		statusCode: 200,
		headers,
		body: JSON.stringify({data: demos})
	}
    
}
```
Started with Redux Toolkit
Tags: react, redux
Published: 2022-02-24 17:12:22

**What is Redux?**
Redux is an open-source JavaScript library for managing and centralising application state.

**Why is it more preferred?**
While working as a Front-end Developer or Full Stack Developer, many engineers encountered Redux. But Recently Redux Team launched Redux Toolkit, an officially recommended and a SOPE library that stands for Simple, Opinionated, Powerful, and Effective state management library. It allows us to write more efficient code, speed up the development process, and automatically apply the best-recommended practices. It was mainly created to solve the THREE MAJOR ISSUES with Redux:

Configuring a Redux store is too complicated
Have to add a lot of packages to build a large scale application
Redux requires too much boilerplate code which makes it cumbersome to write efficient and clean code.
It also provides the automatic support for Redux Dev-tools Extension and for immer.js library which is a great tool to deal with immutable objects. You can also use the various predefined functions of Redux Toolkit which not only speeds up the process but also saves time.

Dependencies that comes along with Redux Toolkit:

- immer
- redux
- redux-thunk
- reselect


**Purpose**​
The Redux Toolkit package is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux:

"Configuring a Redux store is too complicated"
"I have to add a lot of packages to get Redux to do anything useful"
"Redux requires too much boilerplate code"
We can't solve every use case, but in the spirit of create-react-app and apollo-boost, we can try to provide some tools that abstract over the setup process and handle the most common use cases, as well as include some useful utilities that will let the user simplify their application code.

Redux Toolkit also includes a powerful data fetching and caching capability that we've dubbed "RTK Query". It's included in the package as a separate set of entry points. It's optional, but can eliminate the need to hand-write data fetching logic yourself.

These tools should be beneficial to all Redux users. Whether you're a brand new Redux user setting up your first project, or an experienced user who wants to simplify an existing application, Redux Toolkit can help you make your Redux code better.

**Installation**​
Using Create React App​
The recommended way to start new apps with React and Redux is by using the official Redux+JS template or Redux+TS template for Create React App, which takes advantage of Redux Toolkit and React Redux's integration with React components.

#Redux 
npm install redux

# Redux + Plain JS template:
npx create-react-app my-app --template redux

# Redux + TypeScript template:
npx create-react-app my-app --template redux-typescript


You can also go to the redux documentation page for more knowledge. Here redux inform link: https://redux-toolkit.js.org/introduction/getting-started

#collected from redux toolkit