teleren/devto huggingface dataset:
Introduction to Data Structures and Algorithms With Python. 
Tags: python, beginners
Published: 2022-02-20 19:48:19

**What are data structures? **
Data structures are the fundamental constructs around which you build your programs. Each data structure provides a particular way of organizing data so it can be accessed efficiently, depending on your use case. Python ships with an extensive set of data structures in its standard library. 
Algorithms are a set of instructions executed to get the solution of a given problem. 

## 

1. Dictionaries 

Dictionaries are data structures used to map arbitrary keys to values. 
Dictionaries can be indexed in the same way as lists, using square brackets containing keys. A dictionary can store any types of data as values. 
An empty dictionary is defined as {}. 

2.Lists
Lists are used to store items. 

A list is created using square brackets with commas separating items A certain item in the list can be accessed by using its index in square brackets[]. 

3.Tuples
Tuples are very similar to lists, except that they are immutable (they cannot be changed). 

Also, they are created using parentheses, rather than square brackets .You can access the values in the tuple with their index, just as you did with lists.

An empty tuple is created using an empty parenthesis pair;tp()

4.Sets
Sets are data structures, similar to lists or dictionaries. They are created using curly braces, or the set function. 
Sets differ from lists in several ways, but share several list operations such as len. 

Due to the way they're stored, it's faster to check whether an item is part of a set, rather than part of a list.
Sets can be combined using mathematical operations. 
set() 
<u></u>

 

Array
An array is an index-based data structure, which means every element is referred by an index. An array holds same data type elem
 

Tree: 
A tree is a collection of nodes connected by edges. Each node points to a number of nodes. A tree represents the hierarchical graphic form.
data structure tree diagram

Graph:
 A graph contains a set of nodes and edges. The nodes are also called vertices. Edges are used to connect nodes. Nodes are used to store and retrieve data.

 

Hash table: 
Hash table is a data structure that can map keys to values. A hash table uses a hash function to compute a key into an integer (hash value), which indicates the index of the butckets (aka array). From the key, the correct value can be stored and found. Hash table is one of the most used data structures. 
 

Stack: 
a stack is LIFO data structure in which only the top element can be accessed.  

Queue: 
A queue is FIFO data structure. In this structure, new elements are inserted at one end and existing elements are removed from the other end.
Devops - must have skills
Tags: finops, assetops, secops
Published: 2022-02-20 19:30:15

It is very important for DevOps engineer to have skills in the areas of finops, secops, assetops,and complianceops

- AssetOps is about alignment of provisioned resources to optimally meet business demands.

- FinOps is about acquiring comprehensive visibility that helps you reduce cloud costs without compromising performance.

- ComplianceOps is about ensuring continuous adherence to your industry’s risk rules and procedures.

- SecOps is about setting up and enforcing security mechanisms that safeguard your cloud from vulnerabilities.
How to Avoid Default Props Render Trap in React
Tags: react, javascript, tutorial, webdev
Published: 2022-02-20 18:44:27

### What is it?
Let's say we have a component with a default prop like this
```js
import React, { useEffect, useState } from "react";

const RerenderChild = ({ value = [] }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
     {/* ...component */}
    </div>
  );
};

export default RerenderChild;
```
Whenever the `value` prop is nullish (not set by the calling component), the `useEffect` causes the component to render infinitely. This is the **Default Props Render Trap**. We get something like this in the browser console.
![Infinite Re-rendering in React Component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gqampu7a3lx0wxwipkqs.png)

### Why It Happens
When we don't provide the value for the `value` prop it takes the default value provided as argument, which in our case is `[]`. This triggers the `useEffect` hook which updates the `valueFromProp` state. The state change causes the component to re-render.

Now when the component re-renders, it takes the new prop values which again are the default one's. This again triggers the `useEffect` and the whole cycle repeats. That's why we end up with an infinite loop.

### The Solution
We have to make the default prop values a part of our component definition. We can do that in these ways.

**1. Use defaultProps property.**

We can set the default props value by using the component's **[defaultProps property](https://reactjs.org/docs/typechecking-with-proptypes.html#default-prop-values)**. Our component now becomes

```js
import React, { useEffect, useState } from "react";

const RerenderChild = ({ value }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
      {/* ...component */}
    </div>
  );
};

RerenderChild.defaultProps = {
  value: [],
};

export default RerenderChild;
```

**2. Declare default props as constants.**

We can declare constants outside of our component and set them as our default prop value.
```js
import React, { useEffect, useState } from "react";

const DEFAULT_VALUE = [];

const RerenderChild = ({ value = DEFAULT_VALUE }) => {
  const [valueFromProp, setValueFromProp] = useState([]);

  useEffect(() => {
    setValueFromProp(value);
  }, [value]);

  return (
    <div>
      {/* ...component */}
    </div>
  );
};

export default RerenderChild;
```

Hope this helps you to avoid the infinite loop. Thanks 😊.
This is for myself, dont click :D
Tags: webdev
Published: 2022-02-20 18:28:44

## This is just me writing myself a todo list of 2022-20xx

## Things im gonna be learned:

- English, of course :D
- Functional programming
- Progressive web app
- Block-chain
- Working with docker
- Cloud with Java/Nodejs
- Micro-frontend/Monorepo partterns
- Prepare for my Software Engineer feature :D
A new paradigm
Tags: javascript, programming, architecture, performance
Published: 2022-02-20 18:07:54


![humourous comparison of sun, neutron star and black to the contents of node_modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3fx1ixnhqm9w1wk0ont4.png)

I witnessed the rise of a new paradigm in the world of JS development that surprised me: frugality.

We've all seen enough of the opposite. Pulling a new dependency in our project more often than not takes some time, because it's megabytes of code and uses some more dependencies itself and before you realize it, node_modules fills your disk space faster than unrotated log files.

It's ok, you'll say, it's just tooling, not the code that appears in the user's browser. But wouldn't it be great if everything was just a bit leaner, faster and more self-reliant?

This question is apparently asked by an increasing number of people. A few of them are the authors of the upcoming testing framework [vitest](https://vitest.dev/). While during development they used parts of jest and more heavyweight dependencies, most of them were either replaced by internal code or more lightweight, reusable modules.

Then, there's [goober](https://goober.rocks/), a minimalistic framework-agnostic css-in-js component library. You'll probably find more examples of modern yet frugal tools and libraries.

Less code will statistically also contain less bugs and it is good for performance, too. The less code there's to parse, the faster the startup. I invite you to consider this new paradigm for your own packages, too.
blogpub@v0.4.1: host media on github for your blog posts
Published: 2022-02-20 17:56:37


# blogpub@v0.4.1: host media on github for your blog posts

Hey everyone, this is just a small update on the [blogpub](https://github.com/marketplace/actions/blogpub) action.

## Relative paths

In release [v0.4.1](https://github.com/protiumx/blogpub/releases/tag/v0.4.1) I added support for relative 
paths which means you can now use **github** to host the media you use in your blog posts.
How does it work? Just use relative paths (to the markdown file) and you are ready to go.
E.g.
![magic](https://raw.githubusercontent.com/protiumx/blog/main/articles/blog-002/magic.gif)

The action replaces all relative paths with the **raw content** github urls.
In the example `.magic.gif` is replaced with `https://raw.githubusercontent.com/protiumx/blog/articles/blog-002/magic.gif`.
Check out the code [here](https://github.com/protiumx/blogpub/blob/main/src/parser.ts#L31).

That's all!

What other feature would you find useful for this action?
Let me know in the comments.
Today I received my HacktoberFest 2021 SWAGS!
Tags: hacktoberfest, swag
Published: 2022-02-20 17:55:05

Finally I received the swags from my last Hacktoberfest!

There are a lot of cool things inside!
First of all a t-shirt with the logo of the Hacktoberfest and the logos of the sponsors.
I will be proud to wear it during the events as a speaker and at work. :)

In addition there are a lot of cool stickers for my private laptop.
I use it for events and my side projects and I will be very happy to show them on my pc to the crowd and my friends.
Especially the sticker with the Hacktoberfest logo :)

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

Can't wait to partecipate to the next one in October 2022!

Note: tomorrow I will go to the office for a meeting with my team and I will wear it!
Hooks in React
Tags: webdev, react, reacthooks
Published: 2022-02-20 17:54:14

State management is an important concept in React. For this, we use React Hooks. Hooks are used to manage state also allow you to use React features without writing a class. Hooks do not work inside classes.
**

### 
Why do we use Hooks?
**
We can extract stateful logic from stateful logic for independently testing and reusing it by using hooks. Hooks allow you to reuse stateful logic to other components without changing components' structure.

Types of Hooks

1. useState hook.
2. useEffect hook.
3. useContext hook.
Some others hooks are also available but we will discuss useState and useEffect in this article. And we will talk about useContext in the next article. So let's start.

## UseState Hook
The useState hook allows us to use hooks in our functional components. It takes the initial value of the state and returns an array of two elements, the first value of variable and other function to update the value of the component. Let's take a look at an example.

```
import React, { useState } from 'react';

function StepTracker() {
  const [count, setCount] = useState(0);

  function increment() {
    setCount(count+ 1);
  }

  return (
    <div>
      Today you've taken {count} steps!
      <br />
      <button onClick={increment}>
        Counter
      </button>
    </div>
  );
}
```
Here, count is the state variable whose initial value is 0 and setCount is the function to update the value of state variable.

## useEffect Hook
It allows us to perform side effects in react components. The motivation behind the introduction of useEffect Hook is

To eliminate the side-effects of using class-based components. For example, tasks like updating the DOM.
Fetching data from API end-points.
Setting up subscriptions or timers, etc can be lead to unwarranted side effects.

```
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>
}
```

## Conclusion:
We have discussed useState and useEffect, both are used for state management according to their requirement. In the next article, we will discuss useContext.
Most Famous Javascript Libraries Updates
Tags: javascript, webdev, news
Published: 2022-02-20 17:23:07


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


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



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


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


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


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


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

Disclaimer: It is a pro-bono post as it is. The post author is not affiliated with Dev.to. All gains from you reading this post goes to dev.to owners. If you like the post please upvote it and follow the author.
Tailwindcss UI components
Tags: tailwindcss, nextjs, react, webdev
Published: 2022-02-20 17:18:35

Hey guys I have created a website which has a collection of ui component , and templates .

Looking for feedback on what I should build next.
Are there any specific  components that you need but none of the free component libraries seem to yet have?

[Web-site Link](https://dev-ui.vercel.app/)
Review of DevWeek 2022
Tags: devrel, programming, debug, rollbar
Published: 2022-02-20 17:17:56


Rollbar sponsored DevWeek 2022 it was a lot of fun. So many great connections were made with developers interested in debugging. Finbar Flemming discussed how our tool can offer  fast and accurate information to locate an error in your code. I'm not the most technical but it seems to make sense to the thousands of users around the world. 

If you went to DevWeek 2022 thanks for visiting our booth. Nick Hodges and Finbar Flemming were able to answer some great questions. Don’t forget a Rollbar free account gives you access to 25,000 errors per month forever. We are the best tool for debugging, watch our on-demand demo or request a 1:1 for those of you with very technical questions related to your enterprise tech stack.

Rollbar's next event will be Chaos Engineering March 10, 2022. Checkout our speaking session with Nick Hodges, Developer Advocate at Rollbar he will do a talk about Self Healing Systems.

Join us- [Improve? Your Mean Time To Relax](https://www.conf42.com/Chaos_Engineering_2022_Nick_Hodges_self_healing_systems)
Tools To Help You Improve Your Productivity
Published: 2022-02-20 17:13:19

“You are only as good as the tools you use.”

Every ambitious individual or business goal should be to maximize work productivity while working less. 

Since the pandemic rocked the world, everything has gone online. As a result, People are working from home, and more businesses are embracing remote work.

To make sure that you or your business remain competitive in the current digital economy, you need a set of productivity tools.

Productivity tools will improve your productivity. Productivity is measured as to how efficient your processes are.

When your processes are streamlined, it can dramatically increase your productivity, leading to higher profits as you can deliver the project faster and reduce the time-to-market.

In this article, I want to share with you productivity tools that will help you or your business:

- Improve communication
- Produce better designs
- Produce great content
- Produce marketing content
- Pay and get paid
- Build communities

## 1. Communication/Collaboration Tools

- Slack
- Discord
- Twitter
- Google Meet
- Zoom

I use Slack and discord to communicate with clients and collaborate on projects. Twitter is great for making connections, while I prefer Google Meet over Zoom for online meetings.

## 2. Writing/Content Creation/Marketing Tools

- Google Docs
- Notion
- Grammarly
- Quilbot
- Copy AI

I use google docs to write client articles because it is easy to share, collaborate and get feedback. Notion is excellent for writing on, but Notion has more features to help you organize your life. 

I upgraded to Grammarly premium a few weeks ago, and it is the best investment I have made this year. I have also found Copy AI helpful in creating marketing content. So am planning to upgrade to premium soon.

## 3. Design Tools

- Figma
- Canva
- Smart mockups
- Adobe Photoshop
- Adobe illustrator

I have been using Figma to design website templates and article banners. Recently, I started using Canva to create a cover for my upcoming Technical Writing ebook together with Smart mockups.

Here is the ebook I designed using Canva and [Smartmockups](https://a.paddle.com/v2/click/19214/140840?link=783)

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

## 4. Content Management

- Tweet hunter
- Notion
- Hypefury
- Feedhive

I use Notion to manage my content, such as articles like this one and creating workflow databases. These other tools you can use to schedule content on different social platforms such as Twitter.

## 5. Payment Tools

- Paypal
- Wise
- Stripe

I use Paypal to receive and send payments. You can use Wise if Paypal or Stripe is unavailable in your country.

## Conclusion

Productivity tools make it easier to set goals, assign tasks, track progress, create reports, and communicate with the employees in real-time. For instance, using communication tools can ensure smooth communication between your team and your clients.
API Gateway append custom data to mapping template input.json
Tags: aws, apigateway, mapping, template
Published: 2022-02-20 17:11:03

### Requirement:
- AWS API Gateway has a AWS Lambda integration.
- Append custom data to input json via mapping template.
- Event json sent to Lambda should be simple json (Not a nested json).
- Please Note: Nothing wrong in passing nested json to Integrated Lambda. This post discussing about a requirement to pass only simple json to the Lambda.

**API Gateway user provided input json.**
```
{
  "name": "John",
  "phoneNumber": "1231231231"
}
```
### Expected json output 
**after appending Custom data: ("code" : "abcd")**
```
{
  "name": "John",
  "phoneNumber": "1231231231",
  "code": "abcd"
}
```
**Solution option1: (Not meeting requirement)**
AWS Console -> API Gateway -> Select a Resource -> Integration Request -> Mapping Templates -> "When thee are no templates defined" -> Content Type: application/json -> provide below template
```
{
"body": $input.json('$'),
"code": "abcd"
}
```
AWS Lambda event appears as below:
```
{
  "body": {
    "name": "John",
    "phoneNumber": "1231231231"
  },
  "code": "abcd"
}
```
The above json is not meeting with expected json format mentioned in our requirements stated above.

**Solution option2: (meets the expectation):** 
AWS Console -> API Gateway -> Select a Resource -> Integration Request -> Mapping Templates -> "When thee are no templates defined" -> Content Type: application/json -> provide below template
```
#set($elem = $util.parseJson($input.json('$')))
{
#foreach($elemKey in $elem.keySet())
    "$elemKey": "$elem.get($elemKey)"
    #if($foreach.hasNext),#end
,
"code": "abcd"
}
```
AWS Lambda event appears as below:
```
{
  "name": "John",
  "phoneNumber": "1231231231",
  "code": "abcd"
}
```

## Conclusion:
In real scenario the custom data can be output of Lambda authorizer data getting appended to input json and passed on to Integrated AWS Lambda as event.

Image by <a href="https://pixabay.com/users/geralt-9301/?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2933029">Gerd Altmann</a> from <a href="https://pixabay.com//?utm_source=link-attribution&amp;utm_medium=referral&amp;utm_campaign=image&amp;utm_content=2933029">Pixabay</a>
Welcome to my Blog
Tags: welcome
Published: 2022-02-20 17:03:42

Hello everyone i am Griphcode a full stack developer that likes to build software and cool things for the Web, I really enjoy programming i find it very calming. I have programmed for over 2 years and my main focuses has been python & JavaScript. I currently working on a code editor called "Griphitor" and will be able to do anything your normal code editor could. I am very active on GitHub so if you are interested in any of my work be sure to check it out [here](https://github.com/griphcode) . I will be very active here on Dev.to so if you see anything that catches your eyes be sure to check it out.
Enable auto-completion for AWS Step Functions in Visual Studio Code
Tags: vscode, aws, ide, json
Published: 2022-02-20 16:28:02

**TL;DR:** Add the following configuration to your `settings.json` file and enjoy auto-completion when authoring Step Functions in files ending with `.states.json` or `.states.yml`:

```json
{
    "yaml.schemas": {
        "https://unpkg.com/asl-validator@2.0.0/src/schemas/state-machine.json": "*.states.yml"
    },
    "json.schemas": [{
        "fileMatch": ["*.states.json"],
        "url": "https://unpkg.com/asl-validator@2.0.0/src/schemas/state-machine.json"
    }]
}
```

AWS Step Functions have been around since 2016 but only recently started to gain attention after they added over 9,000 AWS APIs directly into the states language. This, and the addition of the formidable [Workflow Studio](https://aws.amazon.com/about-aws/whats-new/2021/announcing-workflow-studio-a-new-low-code-visual-workflow-designer-foraws-step-functions/) have made Step Functions a serious alternative to Lambda functions.

My workflow for building a new Step Function starts with the Workflow Designer. It's interface lets me browse all available integrations and I can simply drag-and-drop them in the right location. Then, I export the Step Function, convert it to YAML and stick it into my code repository. I prefer YAML over JSON because it allows me to add comments, use [anchors and aliases](https://yaml.org/spec/1.2.2/#anchors-and-aliases), multi-line syntax and generally prefer the more concise presentation.

My editor of choice is Visual Studio Code and I was trying to find a basic schema validator and auto-completion for Step Functions. None of the options on the VSCode Marketplace offered this so I looked for a JSON Schema and came across [asl-validator](https://github.com/ChristopheBougere/asl-validator) by [Christophe Bougere](https://github.com/ChristopheBougere). This was a great starting point as VSCode and the [YAML extension](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml) support JSON schema out of the box. A [few changes](https://github.com/ChristopheBougere/asl-validator/pull/76) were necessary to make it play nice with VSCode over a remote URL but that's all it took.

After registering the schema with the editor via the `json.schemas` and `yaml.schemas` properties I was able to use auto-completion and basic validation for my step functions.

**Limitations:** At this point, the schema is limited to the [Amazon States Language](https://states-language.net/spec.html) itself. It doesn't include all possible values for the task resource parameter, nor does it validate the `Parameters` property passed to a task like `arn:aws:states:::aws-sdk:dynamodb:getItem`.