teleren/devto huggingface dataset:
Local Storage Running in Observer
Published: 2021-11-14 15:47:56

Called **localStorageObserver** this is a simple storage library for JavaScript, get inspire from **localForage** but running as **Observer**. This library support TypeScript, and EasyTo-Use.

Problems why created this library:

```js
window.addEventListener('storage', () => {})
```

> This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects. [https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event)

## How to use

To use localStorageObserver, just drop a single line into your app:

```ts
import localStorageObserver from 'local-storage-observer'
```

See more [real example](https://github.com/natserract/local-storage-observer/tree/master/examples).

Download the [latest localStorageObserver from GitHub](https://github.com/natserract/local-storage-observer), or install with npm:

```terminal
npm install local-storage-observer
```

## Configuration

You can set several configuration with the `config()` method. Avalaible options `description`, `storeName`, and `version` (use for future, currently isn't some affect in your app).

Example:

```ts
localStorageObserver.config({
  storeName: 'local_storage_observer',
})
```

Note: you must call `config()` before you interact with your data. This means calling `config()` before using `get$()`, or `set$()`.

## Get Item

Gets an item from the local storage and supplies the result to a subscriber. If the key does not exist, get\$() will return `null`.

```ts
localStorageObserver.get$(key).subscribe((next) => {
  console.log('Result', JSON.parse(next))
})
```

> Note: localStorageObserver doesn't store the value null / undefined.

## Set Item

Saves data to local storage.

```ts
localStorageObserver.set$(key, values).subscribe((next) => {
  console.log('Step two, set$', next)
})
```

You can store the following types of JavaScript objects:

- `Array`
- `String`
- `Number`
- `Object`

## Remove Item

Removes the value of a key from the local storage.

```ts
localStorageObserver.remove$(key).subscribe({
  next: (message) => console.log('Message: ', message),
  error: (error) => console.error('Error: ', error),
})
```

## Clear Item

Removes the value of a key from the local storage.

```ts
localStorageObserver.clear$().subscribe((message) => {
  console.log('Message: ', message)
})
```

## Unsubscribe

Cleanup a subscription

```tsx
useEffect(() => {
  ...

  return () => {
    localStorageObserver.destroySubscription$()
  }
}, [])
```

Install package on: [https://www.npmjs.com/package/local-storage-observer](https://www.npmjs.com/package/local-storage-observer)
My Top 5 YouTube Channels to Improve as a Developer
Tags: motivation, programming, video, youtube
Published: 2021-11-14 15:34:00

I am an extremely heavy user of YouTube and I decided to pay for YouTube Premium since last month (one of the best decisions that I have ever made). There are tons of great resources and contents on YouTube for picking up a new technology, or diving in deeper to the topics. Among all of my subscribed channels, there are a few that I do really want to recommend to you as they have accommpanied me a lot through countless days and nights.
<br>

##[Web Dev Simplified](https://www.youtube.com/c/WebDevSimplified)

For whoever just got into the space of web development, this is definitely my number one recommended channel. This channel provides great and indeed "simplified" explanation towards some topics that a lot of beginners are struggled with. The playlist that I loved the most is the "CSS Tutorials". I am just amazed by how one can make learning web development so much effortlessly.

##[Corey Schafer](https://www.youtube.com/c/Coreyms)

If you ask me for a great source of learning Python for FREE, I would definitely recommend this channel. This is where I learned most of my Python knowledge from. Again, another channel that makes great explanation from basics to more advanced topics for Python. Other than that, Django or Flask tutorial playlists are also available, if you planned to pick up any of them. 

##[Coding Tech](https://www.youtube.com/c/CodingTech)

I love listening to some tech conference talks when jogging or having a walk. Here is a great place that gathers a lot of amazing conference events (both live and webinar), around different topics, such as Web design, Javascript, Blockchains and even financial topics for developers. This is the channel that I would recommend, if you are not looking for some hardcore coding tutorials.

##[Kevin Powell](https://www.youtube.com/channel/UCJZv4d5rbIKd4QHMPkcABCw)

And we have this channel where I got to learn a bunch of amazing CSS tricks. People call him the "King of CSS" although he had made a video that claiming he is not one. In spite of him being the "King of CSS" or not, this is still my top channel to go to for picking up CSS knowledge.

##[Academind](https://www.youtube.com/c/Academind)

Last but not least, if you are looking for a code-along project to pick up new stacks, this is the channel that you are looking for. I have personally bought their courses on Udemy, however they also produce great contents on YouTube for absolutely FREE.

<br>
Other than these 5, there are other great resources such as **freeCodeCamp**, **Computerphile** and etc., that really benefit the whole community. 

Take at least one hour from your everyday, learn something new and become a better developer | engineer | programmer.

**Do follow me for more future articles on web design, programming and self-improvement** 😊

[Follow me on Medium](https://dylanoh.medium.com)
Creation of a Defi or crypto exchange Swap - Dex.
Published: 2021-11-14 15:06:49

I am developing an exchange with an already registered trademark, something similar to pancake.
With some doubts and defects to be resolved.
Be willing to collaborate on this project, leave comments or follow me to discuss it together.
I have some contracts: https://bscscan.com/token/0x25811dff043b6f17e681358b283e36b1cf33b4de
Web: https://onlimake.com
Twitter:@OnlimakeProyect
Github: https://github.com/OnlimakeFinance/
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p2f9sw8x5mdql8bdz78l.png)
Working with modules in JavaScript.
Tags: javascript, webdev, programming, tutorial
Published: 2021-11-14 14:58:47

Hello Everyone,

In this post we will explore the modern way of using modules in JavaScript.

There are several ways to use modules in JavaScript:

- AMD: One of the most ancient module system.
- CommonJS: The module system created for Node.JS server.
- UMD: Suggested as universal system. Compatible with AMD and CommonJS.
- Language level module system (import / export): The modern way to use modules in JavaScript.

In this post we will only cover the last one as the first three are part of history, seen in older scripts.

## What is module?
A module is just a file. To manage a large codebase different scripts are separated into different modules. Modules let's you call function of one script from another script.

- **export**: Variables and functions labled with `export`, are accessible from outside the current script.
- **import**: Allows to use functionality of other script in current script.

For instance:

`sayHello.js`
```js
export function sayHello(user) {
  console.log(`Hello, ${user}`);
}
```

`main.js`
```js
import { sayHello } from "./sayHello.js";

sayHello("Swastik");

// Running main.js consoles "Hello Swastik".
```

> Modules work only via HTTP(s), not locally.
If you try to use modules via **file://** protocol, import / export directives don't work. It only works via HTTP(s) protocol.

The code snippet in last example don't actually work, in order to make it work, we need to tell JavaScript that we are using modules. There are two ways to do that.

1. Use **.mjs** as script file extension instead of **.js**.
2. Specify **"type": "module"** in package.json.

## Export and Import
Now, let's see some most common patterns and ways to use import / export in our scripts.

### 1. Name Export:

`Export`
```js
export const name = "Value";
```

`Import`
```js
import { name } from "...";
```

### 2. Default Export:

`Export`
```js
export default "Value";
```

`Import`
```js
import anyName from "...";
```

### 3. Rename Export

`Export`
```js
const name = "value";
export { name as newName };
```

`Import`
```js
import { newName } from "...";
```

### 4. Export List + Rename

`Export`
```js
export {
  name1,
  name2 as newName2
}
```

`Import`
```js
import {
  name1 as newName1,
  newName2
} from "...";
```

---------------------------

That's it for this post.

I run a newsletter where I share epic content on building your skillset. Read the previous issues here https://swastikyadav.com

Thank You!
The problem with callbacks depending on state inside useEffect you might not be aware of!
Tags: react, javascript, tutorial, webdev
Published: 2021-11-14 14:48:03

While writing React code. I have come across an issue that was *really* hard to figure out why it happened, but had a really fix, and so I thought I'd publish it for future devs to be aware of!

## The setup
So you might have a react functional component that uses the `useState` hook, some `useEffect`s and that has some complicated logic inside a listener, and so you've placed the logic inside a callback that references the state:

```tsx
const MyComponent = () => {
	const [myState, setMyState] = useState()

	const myHelper = () => {
		/* does stuff based on myState in here*/
	}

	useEffect(() => {
		addListener(myHelper())
	}, [/* some dependencies */])
	
	return (<div/>)
}
```

What you might notice is, when the state changes, the handler being executed by the listener still uses the old state!

It seems like the it *captures* its environment and uses that!

This can be really confusing to figure out why it does this.

## The solution

To solve this, you need to do two things:

* add the state to the dependency array
* remove the listener on state change


```tsx
useEffect(() => {
    // store the listener to be able to remove it later
	const listener = addListener(myHelper);
	return () => {
        // actually remove the listener in the cleanup
		listener.remove();
	};
    // add myState to the dependencies              
}, [myState, /* other dependencies*/])
```

And that's it!

## Conclusion

This might seem obvious at first, add all the states that the `useEffect` depends on inside the dependencies array.

But the tricky part here is, you might have more dependencies than you think at first!

It's not just the states directly used inside the `useEffect` hook, but it's also all the states used by functions that are called in here!

So the next time you think of what dependencies need to go in the dependency array, don't just look at what states are used inside the hook, but also at which ones are used in functions inside the hook!
PHP Match statement
Tags: php, webdev, programming, beginners
Published: 2021-11-14 14:23:22

PHP 8 introduces match expression which is similar to switch. Let's look into the differences between these two:

![Match statement](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5xv71q6mr6a6uvid334.png)

##More strictness

Match compares values strictly (===) instead of loosely (==) as the switch statement does.

In Match Unknown values cause errors, so if you forget to check for a value and you don't have a default value PHP will throw an UnhandledMatchError exception

##Returns value

Match returns value so you have to It once instead in each case like in switch statement, which make code much shorter

##Combining conditions

Match arms do not fall-through to later cases the way switch statements do, but you can combine conditions on the same line, separated by commas to achieve the same effect

![multiple conditions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/30maztb3ktppz49jqsoz.png)

##Single-line expressions

Only single-line expressions are allowed in Match statement. In switch you can have multiple expression till the 'break' statement

##Summary
In my opinion Match is better option than switch in situations where you don't need multiple-line expressions.

And what do you think about this "new" feature?
Next.js 12 SCSS module resolution problem when importing other SCSS files.
Tags: nextjs, issue, scss
Published: 2021-11-14 14:11:26

Just to note it down in case I forget about this issue (AGAIN).

Next version: `12.0.3`

## Issue description
When importing the scss source of `bootstrap` in my own global scss file, there seem to be some path resolution problems in the latest Next.js and I got these errors:
```
wait  - compiling...
error - ./styles/globals.scss:4:0
Module not found: Can't resolve '../node_modules/bootstrap/scss/forms/data:image/svg+xml,<svg xmlns='http:/www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke=''

Import trace for requested module:
./styles/globals.scss
./pages/_app.js

https://nextjs.org/docs/messages/module-not-found
```
globals.scss
``` scss
@import 'bootstrap/scss/bootstrap.scss';
...
```

## Current Solution
Then I found [This issue.](https://stackoverflow.com/questions/69890513/use-bootstrap-in-next-js-12-with-scss) Exactly the same one.
So I simply down-grade Next.js to ^11, and it works.

## Follow up
https://github.com/vercel/next.js/pull/31134
It seems that the fix has been merged, so we can just wait for the releases to include it.
Banker Learning C: Part 0
Tags: beginners, programming, c, tutorial
Published: 2021-11-14 14:10:22

## Premise
![Mode change from Banker to Hacker Cat](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6c3oo99nyd1i31t01xj.png)
### Background
Let's start with embarrassing myself. I am Nowshed H. Imran. I have completed my BBA and MBA in Banking and started my career in a commercial bank, and currently working in the Central Bank of country(Entry level obviously). 

### Say, what?
You might ask yourself, what is this atrocity doing here? I am here for the love of open source. I have been using various Linux based Operating Systems for more than 5 years, and along with various open-source software programs. 

### Why C, not …?
I also sense that a vast portion of financial organization is bound to shift towards Data Science. Thus, I started learning **Python**, **R**, and even **Julia**. I learned a bit and pieces here and there, but I was in a limbo(You may relate to this part). After contemplating a lot, I have decided to learn **C**. It neither low level like **Assembly** nor very high level like **Python**. I won't kill me and if I can get through this, It might be the foundation that I need. As a bonus, there is no end to **C** related problems whose solution is not already available.

### Resources
Here are the resources I will be following to complete this trail, I guess!

#### Online Tutorial
A well curated program in **Udemy** to have a class lecture like interaction. 

#### Books 
1. **_C Programming Absolute Beginner's Guide_** by **Greg Perry and Dean Miller**
I will follow this book primarily, as it is targeted towards beginner and explained very thoroughly.
2. **_The C Programming Language(2nd Ed.)_** by **Brian W. Kernighan and Dennis M. Ritchie**
For reference purpose only.

#### IDE
**Vscode**. Please listen before throwing the rock. **Codeblocks** looks hideous in KDE. **Neovim** still a stretch for me yet. Learning the language comes first, perfect IDE will reveal itself.

### Why, this?
The motivation is simple, after reading a ridiculous amount of blogs, it became apparent to me writing while learning is very important. I will learn and write blogs that might help someone like me.

### Disclaimer
I am really not a novice in this. By using Linux based Operating Systems for a couple of years, I am well versed in **terminal**, **commands**, and some technical terms. I am also familiar with the basics **Python** and **R** and so, it is easier for me to grasp some concepts. I will try to do my best to tone it down when necessary.
Open Source Hackathon Experience
Published: 2021-11-14 14:04:46

Yesterday, I Participated in Hackathon and first time made a web application in just 4-5 hours. Please check out my project and give your reviews in comment. Your suggestion would help me to  make it more better.
Here is my repository link:
https://devmindtk.github.io/COLLEGE-MANAGEMENT-SYSTEM/

Screenshots of my projects:


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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6wb0g2hfoxdy05cr1ip.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n6v30gjnm6vybwu1uanl.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9nh0d2mq5oajinefv6y.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/foozldlcekjiu2w8vfa7.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/atdwpbenxqgx5be8ft0k.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hca3rwywj6d2ydj2dkpy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j6inh89lr6kzpd3hpu8a.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5ul7r0u1pt3e612qpti.png)![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2q9ff0p32cpan2f160n.png)
18th weekly post, pager and comments. Also, Hydrogen.
Tags: git, javascript
Published: 2021-11-14 14:00:43

## Items of the week

- **Git** - the `--no-pager` option can prevent git from piping output to a pager, this option could be useful for logging in a CI environment, e.g. `git --no-pager log`. More info available on [git documentation page](https://git-scm.com/docs/git#Documentation/git.txt---no-pager).

- **JavaScript** - the block comment syntax `/* */` comes from the PL/I language. The pairs were used in PL/I because their occurrence is unlikely but they can appear in JS regex literals, thus making them unsafe for commenting out blocks of code. Got this from chapter 2 of [JavaScript: The Good Parts](https://www.goodreads.com/book/show/2998152-javascript).

- **On the week 45 of 2021**, we saw the release of developer preview of Hydrogen - a React-based framework from Shopify focused on building custom storefronts, it ships with built-in components and Tailwind CSS. More info can be found on [its announcement post on Shopify blog](https://www.shopify.my/partners/blog/hydrogen-developer-preview).

## A little note

Looking at the reviews and benchmarks of the new MacBook Pro with M1 Pro/Max, the single core performance improvement over the much cheaper M1 MacBook Air seems negligible. So, other hardware features aside, they are only better options (performance-wise) if you need more performance cores or much, much faster graphics. That's all for this week's post, thank you for reading and have a nice day!
TOP 3 SITES FOR PROGRAMMERS 👩‍💻
Tags: programming, webdev, javascript, python
Published: 2021-11-14 13:57:47

Hello everyone, 
We all need help when we are programming and we as a programmer are always waiting to be in a community where we can help other or get help whenever we need but apart from this, there are many things, 
we can discuss on ideas, program together and many more things. 
So today **i am going to tell you about top 03 sites for programmers**

* [Topcoder](#https://www.topcoder.com/challenges/?pageIndex=1)

![Top coder](https://i.pinimg.com/originals/83/84/c3/8384c3c30ffcb969d155076e2657a8b4.png)

TopCoder is one of the original platforms for competitive programming online. It provides a list of algorithmic challenges from the past that you can complete on your own directly online using their code editor. Their popular Single Round Matches are offered a few times per month at a specific time where you compete against others to solve challenges the fastest with the best score.

The top ranked users on TopCoder are very good competitive programmers and regularly compete in programming competitions. The top ranked user maintains his own blog titled Algorithms weekly by Petr Mitrichev where he writes about coding competitions, algorithms, math, and more.

* [Dev.to](#https://dev.to/)
![Dev.to](https://thepracticaldev.s3.amazonaws.com/i/6hqmcjaxbgbon8ydw93z.png)

Where you are, yes right now. Dev.to is a very good place for developers, you will find tons of articles based on the tags you follow, you will find new stuff daily, and most of the time you will learn something new, so check it out now.


* [Indiehackers](#https://www.indiehackers.com/)
![Indie Hackers](https://pbs.twimg.com/media/FCAKlvZXEAAQxc7.jpg)
The next website is Indiehackers. 
**This is a website by developers for developers.**
It's focus is on talking about the journey that developers go to, when they create there own companies or freelance or start their own company. here you will found stories of success and failure, you get to see the numbers and statistic of people who launch there own products, Like how many people visited, how many people bought there product and even how much they made. so check it out.

Make sure to check them out and love this post if u find them interesting 😜😜

** HAVE A NICE LIFE **
Why Windows uses \r\n newlines instead of \n
Tags: windows, history
Published: 2021-11-14 13:44:57

You may have noticed that Windows has a different way of storing newlines than Mac and Linux. A newline on Windows is encoded as `\r\n`, which symbolizes a Carriage Return (CR) followed by a Line Feed (LF). By contrast, Mac and Linux simply use a `\n`.

Why does Windows do its own thing, and why does it use two characters to signal the start of a new line?

{% youtube mYhtwSH-Dks %}

To understand why Windows does what it does, we have to travel back in time to typewriters. Think of them as printers that have a keyboard. Whenever you typed a letter, a hammer would smash ink against paper. In the early 20th century - before the internet - people figured out how to connect typewriters over a wired telephone network so that companies could send each other direct messages across the country. One of these connected typewriter brands was Teletype.

In the 1960s, a new Teletype model came out that could be controlled from a computer. Problem was, if you let your computer send a `\n` character to the Teletype, the typewriter didn't always return to the start of the next line fast enough for the next character to be printed. That could lead to smudged letters being printed halfway your previous line.

The workaround was to always send a `\r` character before sending a `\n` character. The `\r` would return to the start of the current line while the `\n` pushed the paper up one line. This sequence of two characters gave the typewriter enough time to catch up before the first character of the next line had to be processed.

Our second player in this story is CP/M, a popular operating system from around that time. CP/M wanted to make it easy to interact with Teletype machines, and device drivers weren't a thing yet, so its engineers adopted Teletype's newline sequence as CP/M native newline sequence for compatibility reasons. Microsoft's competitor MS-DOS, in its turn, wanted to be compatible with CP/M. Therefore, MS-DOS also sided with the `\r\n`. MS-DOS would later evolve into Windows over the 80s and 90s, and the rest is history.

Microsoft could choose to migrate Windows files to `\n`. Mac actually did the same thing around in 2001, when it successfully retired its `\r` newline sequence in favor of `\n` with the launch of Mac OS X 10.0. Nowadays, Teletype is out of the picture and device drivers are mature. There doesn't seem to be much reason to continue using two newline characters – other than wasting disk space. Then again... if it ain't broke, does it need to be fixed?