teleren/devto huggingface dataset:
Redux
Published: 2022-03-04 17:21:35

Redux is an open-source JavaScript library used to managed State. Redux Architecture
The three main part is State, Action, and Reducers Redux declared State for defines and  Store is a place where the entire state of your application is listed, and also manages the status of the application and has a dispatch Function. and also Action is plain JavaScript objects that have a type field. Action is sent or dispatched from the view which are payloads that can be read by reducers. it's a pure object created to store the information of the user event. And another Redux main part is Reducer basically Reducers are functions that take the current state and an action as arguments and return a new state.

Redux has the most powerful state management tool and you can use it with any other JavaScript framework or library. And also redux is lightweight you can redux use big projects that’s why every redux project is not bigger.

context API and Redux are very similar. Basically, context API is prompted a re-render on each update of the state and re-renders all components regardless. And the other hand redux is only re-renders the update components.
TypeScript
Tags: javascript, programming, react, typescript
Published: 2022-03-04 17:07:25

**<u>What is TypeScript?</u>**
TypeScript is a strongly typed programming language that builds on JavaScript. It is a superset of JavaScript created by Microsoft. It is an updated version of JavaScript. TypeScript is an Open Source Project, and the source code for it is available on GitHub.

**<u>Why do we use Typescript:</u>**
TypeScript solves the largest issue in JavaScript. JavaScript shows an error or problem in runtime when we are trying to find our bug in the whole JavaScript code. JavaScript can't directly show the exact error. TypeScript removes this problem by checking for any issue at compile time.

<u>**The main advantages of TypeScript:**</u>
1. Strict typing
Everything stays the way we define it. Need a variable to always be a number? It’ll always be a number, then.

2. Structural typing
Indispensable when you care about fully defining the actual structure you use. JavaScript allows for a lot of strange things to be done, so relying on a specific structure is a much safer solution.

3. Type annotations
A handy way of saying explicitly what type should be used.

4. Type inference
Implicit typing performed by TypeScript itself, so that your developers don’t need to provide types where the compiler can find them on its own.

<u>**Typescript benefits:**</u>
The main benefit of typescript is showing errors before runtime and we can select the type. Its supports modern features of JavaScript. TypeScript additional syntax catches errors early in your editor. Its code converts to JavaScript, which runs anywhere like JavaScript browser, on Node.js or Deno, and in your apps.
What is RESTFUL API ?
Tags: api, php, graphql, restful
Published: 2022-03-04 17:05:54

RESTFUL api stand for representational state transfer is the name of the method used to communicate with the apis. as the name suggests, it is stateless. in other words, the services do not keep the state that transferred, so if you call api sending data, the same api will not remember the data next time you call it. The state is kept by the client. a good example of this is when a user is logged in and the user is able to call a specific method, so it is necessary to send the user credentials (username and password or token) every time.
creating a restful apis will be easier for you and the consumers if you follow some conventions in order to make them happy. i have been using some recommendations on restful apis and the results were really good. they help to organize your application and its future maintenance needs. also your api consumers will thank you when they enjoy working with your application.

security in your restful api is important, but it is especially important if your api is going to be consumed by people you do not know, in other words, if it is going to be available to everybody.
use ssl everywhere it is important for the security of your api.
there are many public places without an ssl connection and it is possible to sniff packages and get other peoples credentials.
use token authentication, but it is mandatory to use ssl if you want to use a token to authenticate the users. using a token avoids sending entire credentials every time you need to identify the current user. if it is not possible, you can use oauth2.

in your restful api is important to follow this standards:-
- use json everywhere. avoid using xml. if there is a standard for restful apis, it is json. it is more compact, can be easily loaded in web languages and easy to understand by humans.
- use camelCase instead of snake_case; it is easier to read.
- use http status code errors. There are standard statuses for each situation, so use them to avoid explaining every response of your api better.
- include the versioning in the URL, do not put it on the header. The version needs to be in the url to ensure browser exploitability of the resources across versions.
- use Http Method for each situation ( POST, GET, PUT, PATCH, DELETE ).
- avoid using session or save state in the server.
- avoid using bool flages to show success or failed requests, replace it with http status codes.
Python For Everyone: Mastering Python The Right Way
Tags: beginners, programming, python, codenewbie
Published: 2022-03-04 17:00:38

"The joy of coding Python should be in seeing short, concise, readable classes that express a lot of action in a small amount of clear code — not in reams of trivial code that bores the reader to death."     - Guido van Rossum

In recent years, Python has become by far one of the most popular programming languages on the planet. So, you might be wondering what all the hype is about. A side from its elementary-level simple syntax, Python is as versatile as potatoes. No seriously, it can do almost anything in the programming paradigm. From Artificial Intelligence, to machine learning, to web development. The applications are endless. If you don't believe me, ask your favorite FAANG company (or is it MAANG).

> Python is used by Intel, IBM, NASA, Pixar, Netflix, Facebook, JP Morgan Chase, Spotify, and a number of other massive companies. It's one of the four main languages at Google, while Google's YouTube is largely written in Python. Same with Reddit, Pinterest, and Instagram. 

 — brainstation.io

The best investment you can make for future you, after buying a bunch of NFTs of course, is learning Python today!

**How To Master Python** 

- **Practice! Practice! Practice!**
I cannot emphasize enough the importance of practice. It has a compounding effect on any skill you can imagine. If you work on something for an hour everyday, it doesn't matter whether you;re flipping pancakes or shooting basketballs. You will get good at it!
> "Don't practice till you get it right, practice till you can't get it wrong" — Anonymous


- **Utilizing Resources**
One of the most underrated educational resources i have found is YouTube! A plethora of free tutorials all over. It's amazing! There's literally more content there than you can consume. Did i mention it was **FREE**. Udemy is another very resourceful platform for anyone learning programming. It has both free and paid courses.


- **Build in Public** (not on the streets, on social media) 
Well, I feel like a hypocrite for suggesting this (because i work in private), but learning and working on projects in public will attract like-minded people in the tech space and probably even mentors. This also solves the infamous problem of tutorial hell. You know, when you're stuck binge-watching tutorials and not making any real progress. Make use of platforms like LinkedIn, Twitter and DEV.


Ultimately, mastering Python is an achievable feat. it only asks for your discipline and consistency. 

Thanks for Reading. Code Away!
Hash and Hash table
Tags: javascript, tutorial, programming, css
Published: 2022-03-04 16:51:12



# Hash

A hash function takes data (like a string, or a file’s contents) and outputs a hash, a fixed-size string or number.

For example, here’s the MD5 hash (MD5 is a common hash function) for a file simply containing “cake”:

 ` DF7CE038E2FA96EDF39206F898DF134D`

And here’s the hash for the same file after it was edited to be “cakes”:

  `0E9091167610558FDAE6F69BD6716771`

# Hash Table

Other names:
hash, hash map, map, unordered map, dictionary

A hash table organizes data so you can quickly look up values for a given key.

## Strengths:

Fast lookups. Lookups take O(1)O(1) time on average.

Flexible keys. Most data types can be used for keys, as long as they're hashable.

## Weaknesses:

Slow worst-case lookups. Lookups take O(n)O(n) time in the worst case.

Unordered. Keys aren't stored in a special order. If you're looking for the smallest key, the largest key, or all the keys in a range, you'll need to look through every key to find it.

Single-directional lookups. While you can look up the value for a given key in O(1)O(1) time, looking up the keys for a given value requires looping through the whole dataset—O(n)O(n) time.

Not cache-friendly. Many hash table implementations use linked lists, which don't put data next to each other in memory.

## Hash maps are built on arrays

Arrays are pretty similar to hash maps already. Arrays let you quickly look up the value for a given "key" . . . except the keys are called "indices," and we don't get to pick them—they're always sequential integers (0, 1, 2, 3, etc).

Think of a hash map as a "hack" on top of an array to let us use flexible keys instead of being stuck with sequential integer "indices."

All we need is a function to convert a key into an array index (an integer). That function is called a **hashing function.**

## Hash collisions

What if two keys hash to the same index in our array? 
This is called a hash collision. 

## When hash table operations cost O(n)O(n) time

**Hash collisions**
**Dynamic array resizing**

# Sets

A set is like a hash map except it only stores keys, without values.

Sets often come up when we're tracking groups of items—nodes we've visited in a graph, characters we've seen in a string, or colors used by neighboring nodes. Usually, we're interested in whether something is in a set or not.

Thanks for reading <3
Hope you got good idea of hash and hashmap
VirtualBox 6 and OpenBSD 7.0: How to create a vm
Tags: virtualbox, openbsd, virtualization, vm
Published: 2022-03-04 16:49:32

## Summary

The post is about how to create a [OpenBSD](https://www.openbsd.org/) vm with [Oracle VM VirtualBox](https://www.virtualbox.org/) briefly with some screenshots.

## Tutorial

### Create a new machine

Start VirtualBox and click "New".

![create a new machine 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/akod81a2pgnbljb06yax.jpg)

Enter detail of the machine. (Besides, I used "Expert mode" instead of "Guided mode".)

![create a new machine 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4hdskwg3oonfr6tyabi.jpg)

Click "Create".

![create a new machine 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q87xc0d1ox4yqwvc4v8.jpg)

Defining the machine has been completed.

### Attach installer media in settings

Next, let's prepare for installation of OpenBSD. You have to [download](https://www.openbsd.org/faq/faq4.html#Download) the IOS image beforehand.


Go to "Settings" of the machine.

![attach installer media 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz3bnbca7nynujvzsvc3.jpg)

Attach the ISO to "Storage".

![attach installer media 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0boxj5g7vd7yfg3jvgl.jpg)

![attach installer media 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xya0zk0ktzowkbmlgfv9.jpg)

OK. Ready.

### (Optional) Configure others such as network if necessary

For example, Port forwarding in Advanced enables SSH or [FTP](https://obsd.solutions/en/blog/2022/02/19/openbsd-ftpd-70-ftp-server/index.html) with NAT network easily.

![configure network](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdwrw5inrj3gjiaojxvh.jpg)

### Start vm to install

At last the time to install it has come.

![start vm to install 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ii6qst0v100j6ykfmw8.jpg)

The procedure is almost the same to another way.

![start vm to install 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jma22rd01ksnj5brwexr.jpg)

### Detach media when installation completed

When the installation is finished, reboot and power off the vm. Then detache the ISO.

![media detached](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9lht6ip7zmp745v6wei7.jpg)

Then restart the vm. You will see sweet output and nice greetings from them.

### Enjoy your vm

![OpenBSD vm is running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98mzzn5vdsyszoanb9bd.jpg)

Happy virtualizing 😊
Keyoxide proof
Published: 2022-03-04 16:41:54

This is an OpenPGP proof that connects [my OpenPGP key](https://keyoxide.org/8FFF2DB22CEF80B01BED330D44A8D7D9A54DF4D9) to [this dev.to account](https://dev.to/jorgeyp). For details check out https://keyoxide.org/guides/openpgp-proofs

[Verifying my OpenPGP key: openpgp4fpr:8FFF2DB22CEF80B01BED330D44A8D7D9A54DF4D9]
Tips to improve your CSS skills
Tags: css, beginners, webdev, javascript
Published: 2022-03-04 16:40:06

Hello fellow readers, in this blog I will be sharing some tips to improve CSS.

I have seen many developers struggling with CSS, and I know CSS can be a little intimidating. Learning about all the properties at once might be difficult. I too felt the same when I was learning CSS. I took some break in between and continued later. 

Here’s are some tips on how to improve your CSS: 

### Make Projects

Yes, you heard it right! Make projects, there is a high possibility that you might not be doing the task in the most efficient or best manner. But, building projects from scratch allows you to think and develop your skills. No matter how many tutorials you binge, unless and until you code it or try it, there’s no way will improve.



### Learn Flexbox

So, you might be thinking, why is flexbox on the list and not other CSS properties? The reason is simple, we all learn the basic fundamentals like color, background, padding, margin, etc. But many developers face issues in alignment, adjusting `<div>`. I love using flexbox, it is simple and easy. Forget about grid and float, you can learn them later. Learning flexbox will save you loads of time and a feeling of control.  


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

### Googling is the key

One of the most used things, when I sit down to work on web development projects is to google. Believe me, I literally google how to remove style on `<ul>` tag. Even though, you might not remember each and every property, Google if you want to find some property before giving up.  


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

### Experiment 

I feel experimenting with your skills is important. Not just making the copy of websites that a Youtuber or Course teacher taught you, you should try to build websites on your own. 
For eg: I tried copying the Youtube website, it was really unique compared to other websites. 

During this project, I learned how to style scrollbars and more about position, flexbox, height properties. It was an amazing experience! Once you build something on your own, your confidence increases and you build amazing things.  

### Youtube and blogs

Previously I told you not to be completely dependent on youtube and blogs. I stand with my previous point, but here’s the catch. Don’t binge watch content! Learning through youtube and blogs is awesome

* You see experienced developers code and learn from it
* You learn new tricks and tips 
* You get inspired and try to replicate


![learn](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0stlyv17xxtcxi8qw0t.gif)

### Connect

I hope this blog benefited you if you are stuck with CSS or are looking forward to learning it.
It felt great to share my experience with the community and hope we all become better developers 😄! 

I would love to connect with you:

* [LinkedIn](https://www.linkedin.com/in/fidal-mathew-82aba7200/)
* [Twitter](https://twitter.com/fidalmathew10)
* [Github](https://github.com/FidalMathew)
Pwnkit (CVE-2021-4034): Local Privilege Escalation in Polkit Package
Tags: cybersecurity, linux, pwnkit
Published: 2022-03-04 16:09:52

This blog is a walkthrough for exploitation and remediation of the extremely widespread **Pwnkit** vulnerability in the Polkit package.

Hope the readers find this blog exciting and insightful and please give your feedback so that I can improve myself in the future.

Share it widely to make the world aware and the community a safer place. Follow [Scientyfic World](https://scientyficworld.org/) for more exciting content like these.

[**Click here to read the blog.**](https://scientyficworld.org/pwnkit-cve-2021-4034-local-privilege-escalation-in-polkit-package/)

> _“This vulnerability is one of our most beautiful discoveries; to honor its memory, we recommend listening to DJ Pone’s “Falken’s Maze” (double pun intended) while reading this advisory. Thank you very much!”_ ~Qualys
MDSveX: The bridge between Markdown and Svelte
Tags: javascript, webdev, svelte, mdx
Published: 2022-03-04 16:02:19

A few days ago, I was looking around for tools to write my blog. I knew about [MDX], but I wasn't really good at React and friends, which seemed to be the only frameworks supporting MDX painlessly (correct me if I'm wrong!)

But after a bit of research, I found...

## Enter MDSveX

MDSveX is MDX in svelte. It allows you to write code similar to MDX but in svelte. It integrates perfectly with SvelteKit, too!

The coolest thing is that MDSveX hooks into [remark] and [rehype], which provides [a](https://github.com/florianeckerstorfer/remark-a11y-emoji) [whole](https://github.com/JS-DevTools/rehype-toc) [ecosystem](https://github.com/remarkjs/remark-directive) [of](https://github.com/luk707/rehype-truncate) [plugins](https://github.com/wataru-chocola/remark-extended-table) to choose from.

This makes for the perfect combo of the comfort of MDX, the efficiency of Svelte, and the ecosystem of remark.

Your usual MDSveX component looks like this:

```mdx
---
title: My blog post
date: 2020-01-01
summary: This is my first blog post

---

<script>
	import PieChart from '$lib/Pie-Chart.svelte'
</script>

## {title}

Here's a cool Pie Chart:

<PieChart
	data={[
		{ label: 'give you up', value: 10 },
		{ label: 'let you down', value: 10 },
		{ label: 'run around and desert you', value: 8 },
		{ label: 'make you cry', value: 5 },
	]}
/>
```

Pretty cool, eh? Notice how we can reference the `{title}` in the content. MDSveX automatically parses your frontmatter and makes it available in the content.

## Layouts

If you put this markdown file at `src/routes/blog/my-blog-post.svx`, the content would be rendered at `/blog/my-blog-post`, just like the Svelte compiler renders pages. However, it only renders the content markdown by default. Usually, you would like to have some sort of metadata, navigation, and stuff on a blog page.

Enter layouts. Layouts are just regular Svelte components. They can be used to change the way a `.svx` file is shown. Here's what a sample MDSveX layout would look like:

```svelte
<script>
	export let title;
	export let date;
</script>

<h1>{title}</h1>
<p>{date}</p>

<slot> <!-- content goes here -->
</slot>
```

You can even set up different layouts for different files! To learn all the details, check out [the docs](https://mdsvex.com/docs#layouts)

## Quickstart

You can install MDSveX by using the [`svelte-add`](https://npmjs.com/package/svelte-add) package to easily set up MDSveX:

```bash
$ npx svelte-add mdsvex
```

This will create a `mdsvex.config.js` file in your project root, which you can use to configure your site.

## The end

MDSveX helped me find a siiimple way to convert my Svelte app into a full-blown CMS-like website, all without the overhead of an actual CMS. For basic blog sites, it's perfect!

In my next post, I'll show you how to make a simple blog using MDSveX. Stay tuned!

[MDX]: https://mdxjs.com/
[remark]: https://github.com/remarkjs/remark
[rehype]: https://github.com/rehypejs/rehype
RouteManager UI coding patterns: Redux Saga
Published: 2022-03-04 15:59:00


> This is a non-exhaustive list of the coding patterns the [WorkWave RouteManager's](https://www.workwave.com/route-manager/) **front-end** team follows. The patterns are based on years of experience writing, debugging, and refactoring front-end applications with **React and TypeScript** but evolves constantly. Most of the possible improvements and the code smells are detected during the code reviews and the pair programming sessions.

*(please note: I do not work for WorkWave anymore, these patterns will not be updated)*


*(last update: 2022, March)*

- [Prefer linearity over side effects](#prefer-linearity-over-side-effects)
- [Use call only to allow mocking the called function](#use-call-only-to-allow-mocking-the-called-function)
- [Create frontend-oriented requests](#create-frontendoriented-requests)


## Prefer linearity over side effects

Sagas triggered as a result of a side effect are hard to follow and lead to a lot of unwanted effects.

```ts
// ❌ don't
function* foo() {
  yield put({
    type: 'baz',
  })
}
function* bar() {
  yield put({
    type: 'baz',
  })
}
function* baz() {
  while (true) {
    yield take(takeBazAction)
    doBaz()
  }
}
// ✅ do
function* foo() {
  doBaz()
}
function* bar() {
  doBaz()
}
```

## Use call only to allow mocking the called function

Pure/simple functions that do not trigger side effects or read data from external sources should not be `call`'ed, since controlling them from the tests require useless boilerplate.

```ts
// ❌ don't
function* foo(clientId: string) {
  const serverId = yield call(createServerId, clientId)
  const serverEntity = yield call(requestEntity, serverId)
  return yield call(createClientEntity, serverEntity)
}
// ✅ do
function* foo(clientId: string) {
  const serverId = createServerId(clientId)
  const serverEntity = yield call(requestEntity, serverId)
  return createClientEntity(serverEntity)
}
```

## Create frontend-oriented requests

Requests should be frontend-oriented, even when the backend uses different names or a single API for multiple purposes.

```ts
// ❌ don't
function* geocode(address: string) {
  yield call(geocodeAddresses, address)
}
function* reverseGeocode(latLng: LatLng) {
  yield call(geocodeAddresses, latLng)
}
function* geocodeAddresses(param: string | LatLng) {
  yield call(executeRequest, 'Geocoding.geocodeAddresses', param)
}
// ✅ do
function* geocode(address: string) {
  yield call(geocodeRequest, address)
}
function* reverseGeocodeRequest(latLng: LatLng) {
  yield call(geocodeAddresses, latLng)
}
function* geocodeRequest(address: string) {
  yield call(executeRequest, 'Geocoding.geocodeAddresses', address)
}
function* reverseGeocodeRequest(latLng: LatLng) {
  yield call(executeRequest, 'Geocoding.geocodeAddresses', latLng)
}
```
Appendix: Security (Incident Response) - AWS Well-Architected Framework Study Guide
Published: 2022-03-04 15:56:55

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)

[<u>Appendix: Security</u>](https://docs.aws.amazon.com/wellarchitected/latest/framework/a-security.html)

**How do you anticipate, respond to, and recover from incidents?**

- Identify key personnel and external resources
- Develop incident management plans
- Prepare forensic capabilities
- Automate containment capability
- Pre-provision access
- Pre-deploy tools
- Run game days

[Return to Well-Architected Framework Guide](https://dev.to/aidutcher/aws-well-architected-framework-study-guide-introduction-fjg)