teleren/devto huggingface dataset:
Exploring Backend
Published: 2021-12-24 17:05:50


**Node js**

Node Js is not a programming language, It is a javascript runtime which runs on the server side. It provides an event driven, non-blocking(asynchronous) input-output and cross-platform runtime environment for building highly scalable server-side applications using javascript. 


**SQL and Nosql database**

Differences between sql and nosql database:
SQL database relational database, NoSQL database is non-relational 
SQL database uses structured query language and it has predefined schema, NoSQL database has dynamic schemas for unstructured data.
SQL databases are vertically scalable, NoSQL databases are horizontally scalable.
SQL databases are better for multi-row transaction, NoSQL databases are better for unstructured data documents or JSON



**Relational Database**

A relational database is a collection of data items with pre-defined relationships between them. RDMS tables with columns and rows. Tables are used to hold information about the objects to be represented in the database. Each column in a table holds a certain kind of data and a field stores the actual value of an attribute. The rows in the table represent a collection of related values of one object or entity. Each row in a table could be marked with a unique identifier called a primary key, and rows among multiple tables can be made related using foreign keys. This data can be accessed in many different ways without reorganizing the database tables themselves.




**Express js**

Express. js is a Node. js web application server framework, designed for building single-page, multi-page, and hybrid web applications. Express is a node js framework that makes using node js easy. It helps to navigate routes so easily that we can run all the data easily. Express gives us different types of middleware to integrate with json data and make node file module systems easy.



**CRUD Operation**

CRUD stands for Create, Read, Update, and Delete, which are four primitive database operations. This operation is most frequently used.

Create: Create operation makes new data in database.
Read : This data is visible to the website view. Use pagination, sorting and filtering to navigate big lists
Update: This operation helps to update an existing data in the database and sometimes creates new one.
Delete: Delete operation removes data from the database.
AWS Athena SAM Policies
Tags: howto, aws, security
Published: 2024-03-02 12:20:58

---
title: AWS Athena SAM Policies
published: true
date: 2021-12-24 17:04:07 UTC
tags: HowTo,AWS,HowTo,Security
canonical_url: https://bliskavka.com/2021/12/24/aws-athena-sam-policies/
---

AWS Athena provides SQL queries over S3 data. The service depends on S3, Glue, and Athena itself so getting permissions set up can be tricky. Here is what worked for me.

```yaml
StartQueryFunction:
  Type: AWS::Serverless::Function
  Properties:
    Handler: src/lambda/search.start
    Policies:
      - S3ReadPolicy:
          BucketName: !Ref DataBucket
      - S3CrudPolicy:
          BucketName: !Ref AthenaResultsBucket
      - AthenaQueryPolicy:
          WorkGroupName: !Ref AthenaWorkGroup
      - Statement:
        - Effect: Allow
          Action:
          - glue:GetTable
          Resource:
          - !Sub arn:aws:glue:${AWS::Region}:${AWS::AccountId}:catalog
          - !Sub arn:aws:glue:${AWS::Region}:${AWS::AccountId}:database/${GlueDatabase}
          - !Sub arn:aws:glue:${AWS::Region}:${AWS::AccountId}:table/${GlueDatabase}/*

GetResultFunction:
  Type: AWS::Serverless::Function
  Properties:
    Handler: src/lambda/search.results
    Policies:
      - S3CrudPolicy:
          BucketName: !Ref AthenaResultsBucket
      - AthenaQueryPolicy:
          WorkGroupName: !Ref AthenaWorkGroup
```

Cheers!
Typewriter Effect with CSS and JS 
Tags: html, css, javascript, tutorial
Published: 2021-12-24 17:03:47


Using JavaScript and CSS let's create a typewriter effect

## Code

### HTML

First let's create the interface, we'll do something simple, using just HTML.
```HTML
<h1 id="elementEl">Walter Nascimento Barroso</h1> 
```
Let's just add an h1 with an id elementEl, so it's easier to identify in both css and javascript

### CSS

```CSS
#elementEl::after {
  content: '|';
  margin-left: 5px;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
```

In css we take elementEl and add a slash after our h1 and finally we add the blink effect so the added slash will be blinking 

### JS
```JavaScript
'use strict';

function typeWriter(el) {
    const textArray = el.innerHTML.split('');
    el.innerHTML = '';
    textArray.forEach((letter, i) =>
        setTimeout(() => (el.innerHTML += letter), 95 * i)
    );
    setInterval(() => typeWriter(el), 8000);
}

typeWriter(elementEl);
```

Here in our javascript we just have a function called typeWriter, which receives our elementEl.

Inside our function we have a constant that divides the text of our element letter by letter, then we clear the element content and loop through our array of letters and for each letter we add we wait for the time of 95 multiplied by the index and so we have a letter at a time added

Finally, we call setInterval again to call our typeWrite function again.

ready simple like that. 

## Demo

See below for the complete working project.

{% codepen https://codepen.io/WalterNascimento/pen/NWdebJP %}

_if you can't see it [click here](https://codepen.io/WalterNascimento/pen/NWdebJP) and see the final result_

## Youtube

If you prefer to watch it, see the development on youtube.

{% youtube lBefm1GtsZA %}

***

## Thanks for reading!

If you have any questions, complaints or tips, you can leave them here in the comments. I will be happy to answer!

😊😊 See you later! 😊😊

***

## Support Me

[Youtube - WalterNascimentoBarroso](https://www.youtube.com/channel/UCXm0xRtDRrdnvkW24WmkBqA)
[Github - WalterNascimentoBarroso](https://github.com/walternascimentobarroso)
[Codepen - WalterNascimentoBarroso](https://codepen.io)
Some common content of backend or node.js
Published: 2021-12-24 16:50:10

1. CRUD Operations stands for create, read, update and delete, CRUD is necessary to implement a persistent storage application. Create operation creates a service or data. Read operation is used to read or display data from the backend. Update operation is used to update the value or data from the backend. Delete operation is used to delete any data from the  backend.
2. JWT or JSON Web Token, is an open standard used to share security information between two parties — a client and a server. Each JWT contains encoded JSON objects, including a set of claims. JWTs are signed using a cryptographic algorithm to ensure that the claims cannot be altered after the token is issued.
3. Mongoose provides a lot of convenience in the creation and management of data in MongoDB. On the downside, learning mongoose can take some time, and has some limitations in handling schemas that are quite complex. However, if your collection schema is unpredictable, or you want a Mongo-shell like experience inside Node.
4. Relational database (MySql) is an assemblage of relational data that is structured or organized in the form of tables, columns, and rows, where tables represent the objects, columns represent the fields and rows represent the records.
5. Express is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.
How to create Custom Mutilevel stepper with progress bar using angular12?
Tags: angular, typescript
Published: 2021-12-24 16:32:40

Hi All,
I have recently started working on angular12 and I am trying to add multi-Stepper with progress bar to my angular code but I am unable to get how to do this. Also I want to add a sub stepper on each step. 


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

How to add progress bar shown in attached image in header of the page using angular?
Thank You.
Pegasus -  A web based REST Client built with MongoDB Atlas
Tags: atlashackathon
Published: 2021-12-24 16:19:09

[Instructions]: # (To submit to the MongoDB Atlas Hackathon on DEV, please fill out all sections.)


### Overview of My Submission

<p style="text-align: justify">Pegasus is a web REST application built specifically for testers and developers to have a holistic view of what changes are breaking the Front End Code. Most of the time Backend changes key pairs which causes app crash. Pegasus is specifically designed to solve problems such as :<p>
 
  * Code Break due to key changes in API.
  * Check specific key updates with line highlighting.
  * Get Realtime updates to your desktop if any API construct has changed.
  * In-App notifications.
  * Hyper runners to run project specific APIs after new builds.

## Features 💡

- Compare Response Feature - Compare responses of the same API once response structure changes
- Add or remove API Endpoints - Add and remove API endpoints from EndPoints tab
- Search Endpoints - Search through your API Endpoints with Smart Search
- Sign In Feature - Sign In to save all your api
- Notification Switch - Switch On/Off Notifications
- Generate Code - Generate Code from your API constructs
- More Personalised Settings - More Personalised Settings Feature
- IndexDB Support - Localised data now saved in IndexDB for more storage

Link to GitHub: 
https://github.com/Rajdeepc/pegasus

Live: https://pegasus-fly.herokuapp.com/

README: https://github.com/Rajdeepc/pegasus/blob/master/README.md


### Submission Category: 

This product is not for a specific themes as listed but I wanted to make this to solve a specific problem on the development and for the testers. Whenever there are any breaking changes in the API comes developers and testers are not aware of its impact so this product helps to assess as well make the team aware of any breaking changes in the app due to API changes.


### Link to Code

https://github.com/Rajdeepc/pegasus


### Additional Resources / Info

Screenshot of the dashboard:

![Screenshot of the dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lmvpihogjhsxpv77owec.png)

## Built with 🔧

- ReactJS - Front-end
- Database - MongoDB Atlas
- NodeJS - Backend Service
- Socket.IO - Real Time Communication
Relational Database: MySQL
Published: 2021-12-24 16:16:02

A relational database (RDB) is a collective set of multiple data sets organized by tables,
records and columns. RDBs establish a well-defined relationship between database tables.
Tables communicate and share information, which facilitates data searchability, organization
and reporting.
RDBs use Structured Query Language (SQL), which is a standard user application that
provides an easy programming interface for database interaction.
Relational databases are based on the relational model, an intuitive, straightforward way of
representing data in tables. In a relational database, each row in the table is a record with a
unique ID called the key. The columns of the table hold attributes of the data, and each
record usually has a value for each attribute, making it easy to establish the relationships
among data points.
Benefits of Relational Databases:
● Data Consistency
● Commitment and Atomicity
● Stored Procedures and Relational Databases
● Database Locking and Concurrency

MySQL is open-source relational database. MySQL is written in C and C++. The base was
developed by the Swedish company in 1995. One of the main pluses of such type databases
is that they are cross-platform. They may be launched on OS MAC, Linux, and Windows.
Performing web application testing, the specialists may work with various database
management systems among which there are Oracle, DB2, Microsoft Access, and many
others. But, rather often, software testing company faces exactly MySQL and all because of
the range of advantages which this system possesses.
What Are the Main MySQL Pluses?
● MySQL may support various database engines while other system types do not
maintain such function.
● In comparison with other relational bases, MySQL is characterized by high
performance.
● Economically, MySQL is a rather effective base. It is much cheaper than some other
bases of relational type. Besides, the license price for the commercial version is also
not so high.
● MySQL is a cross-platform base.
Earlier, the default type of the data storing in MySQL was MyISAM which was very easy to
use and notable for high performance. Nowadays it is used InnoDB (version 5.5) which
supports the external keys for the referential integrity.
What is Local Storage?
Tags: html, css, javascript, webdev
Published: 2021-12-24 16:14:58



localStorage is a way of saving the key-value pair in the web browser and the best part about it is that there is no expiration date meaning that data will still be there in the browser even if you reload the page.

### How does localStorage work?

to storage the localStorage in your web application, you can use five methods:

1. setItem() : adds key value to localStorage
2. getItem() : retrieve the items you entered in localStorage
3. clear(): to clear the local storage


### Where is localStorage stored?

it depends upon the browsers that how and where they are storing it, for example, Firefox stores localstorage in `webappsstore.sqlite` file in the *profile* folder.

### What is window.localStorage?

 localStorage is available via the windows.localStorage property which is a part of the Window interface in Javascript that represents the window containing the DOM Document. 

### setItem()

it is a method to store the values in localStorage object

it takes two parameters: key and a value 

```json
window.localStorage.setItem('name', 'Ansub Khan')
```

over here you can see that ‘name’ is basically a key that stores the value ‘Ansub Khan’, now the thing is that localStorage only stores String but what if we have to store data of different data types like an array? 

for that we use a method called JSON.stringify() before passing it to setItem(). 

```json
const person = { 
	name: "Ansub Khan", 
	age: 21
}

window.localStorage.setItem('user', JSON.stringify(person));
```

### getItem()

it is used to access the data that you have stored in the localStorage using setItem() method.

```jsx
window.localStorage.getItem('user')

// this is going to give us

'{"name":"Ansub Khan","age":21}'
```

now to use this value as an object you need to convert it back to an object,  if you remember localStorage stores data in String format, that’s why we used JSON.stringify(), now to convert it back to object we are going to use **JSON.parse()**

```jsx
JSON.parse(window.localStorage.getItem('user'));
```

### clear()

it is used to delete the data that we saved in local storage, you can see the localStorage in Chrome, open inspect element, and then click on the application, there you are going to find the local storage as seen in the image below
![local-storage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h186ojh36ainepxee4qt.png)

on using this method

```jsx
window.localStorage.clear()
```

it will get empty like it was before.

###  localStorage has some limitations tho:

- 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 form of data protection and can be accessed by any code on your web page
Everybody Struggles
Published: 2021-12-24 15:42:52


Hi Everyone!

This is the second blog of my Outreachy series. It has been three weeks since my internship started at KernelCI and I am really enjoying the learning process.

This week I will be writing on my struggles so far and introduce an open source vocabulary term that I didn't know before.

So, coming down to the vocabulary term, let's see what a Github Action is !

> GitHub Actions is a continuous integration and continuous delivery (CI/CD) platform that allows you to automate your build, test, and deployment pipeline. You can create workflows that build and test every pull request to your repository, or deploy merged pull requests to production.

Although I am not really a newcomer in the CI/CD world, but I have not written a workflow before. I have worked with projects that have workflows in them mainly on Bitbucket. 
Writing my first workflow was thrilling, as I got to understand better how CI/CD works. 

## The Struggles 😭
My second and third week has been challenging. When I started contributing to KCIDB, I had very little knowledge of shell scripting, Google Cloud Platform and Kernel development. I had a lot to take in and figure out. Coming from a pure python and web background, it was a real struggle working on KCIDB project that required at least moderate knowledge of shell scripting and a good grasp of Kernel development. 

## My little safe place
I was initially very hesitant to ask for help because I'm afraid of asking stupid questions. But I realised that it is better to ask for help than to get stuck.

## In conclusion...

I’m thankful to my mentor Nikolai who patiently explain things to me whenever I get stuck. He is super supportive and amazing and ready to answer all the questions I have no matter how pointless I think it might be. 


No matter the challenges you face, Please do not give up!
Be adventurous in your journey of searching for knowledge and improving your skills. 

I will leave you with this quote from Outreachy

> It's important to remember that no one starts out being an "expert". Even your mentor was a newcomer to open source at one time. We all start out knowing nothing. We all learn, practice, and grow.
> Learning can be hard! We may struggle to understand something. We may make a lot of mistakes when we practice new skills. And that's okay, because everyone struggles
Please forget the colon of python
Tags: python, javascript, programming, beginners
Published: 2021-12-24 15:57:00

Colon is an important character in Python. You should end some statements with colon.

Any modern IDE code editor adds that colon automatically. I had used old IDE Geany. That feature is not available in that IDE.

Python is a beginner friendly programming language thanks to the syntax sugar of python. But this colon can confuce very beginners.

Some people says that colon improves the readability. But I don't know. It looks same for me without the colon.

With colon
```py
if 'Unv is awesome!':
    print('Hello World!')
# keep editing for live results
```
Without colon
```py
if 'Unv is awesome!'
    print('Hello World!')
# keep editing for live results
```

So I thought to create my own programming language. It is named Unv. You can play with the [playground](https://unv.vercel.app/playground) or read the [docs](https://unv.vercel.app/) to understand it.

Please give me a 🌟 on github you love this project.
{% github https://github.com/unvlabs/unv %}

Also I need your help to build this language. Please convert your thoughts to comments.

Follow me for more article about this language.

Thanks for reading 💞
5 Programming Games To Improve Your Coding Skills
Tags: programming, javascript, css, beginners
Published: 2021-12-24 15:30:19

In this article I will discuss about the **5 best coding games** that can improve your skills. We love challenges. So These coding game challenges will increase your interest in coding. 

## Untrusted

Untrusted is an **online adventure game for coders**. You can practice your Javascript skills. You have to use javascript commands to play the game and win the game. 

## Robocode

Robocode is also a **programming battle ground game**. Here you have to develop tanks using Java and .NET to battle against other tanks. You have to write AI codes for the robots to make them understand what to do and how to reacts with the events happening in the battle. 

## CheckIO

CheckIO is a **coding game** which helps you to develop your coding skills in Python and Typescript. If you are a beginner you can play the game. The game contains many levels. As you increase your leves your coding challenges get harder. 

## Screeps

Screeps is an **online real time strategy game**. If you are a beginner in programming you can play this game. Here you have to create your colony in a particular world shared with all players. The colony will be able to mine resource, build unites etc. 

## CSS Dinner

CSS dinner is a** programming game** where you can practice and master your CSS skills. You will learn CSS properties and selectors from this game. It also contains levels. As levels ups you challenges get harder. 

If you want to be a good programmer it is not necessary to play these games. But you want to improve your skills in fun way then you can join any platform.
REACT
Published: 2021-12-24 15:30:14

 PropTypes:
PropTypes is React's internal mechanism for adding type checking to components. React components use a special property named propTypes to set up type checking. When props are passed to a React component, they are checked against the type definitions configured in the propTypes property.
JSX :
JSX stands for JavaScript XML. It is simply a syntax extension of JavaScript. It allows us to directly write HTML in React (within JavaScript code). It is easy to create a template using JSX in React, but it is not a simple template language instead it comes with the full power of JavaScript.

Context API?:
The React Context API is a way for a React app to effectively produce global variables that can be passed around. This is the alternative to "prop drilling" or moving props from grandparent to child to parent, and so on. Context is also touted as an easier, lighter approach to state management using Redux.
Context API is a (kind of) new feature added in version 16.3 of React that allows one to share state across the entire app (or part of it) lightly and with ease.
React.createContext() is all you need. It returns a consumer and a provider. Provider is a component that as it's name suggests provides the state to its children. It will hold the "store" and be the parent of all the components that might need that store. Consumer as it so happens is a component that consumes and uses the state. More information can be found on React's documentation page.