teleren/devto huggingface dataset:
Redux vs Mobx in React state management in 2020
Tags: react, redux, mobx
Published: 2020-11-11 02:55:58

Wow, I just tried to tag this post with `mobx`, but no suggestion..

I want to make a comparison between Redux and Mobx. Here are my contrived simple apps showing **notifications**.

- [Redux one](https://codesandbox.io/s/react-redux-examplecomparison-with-mobx-kxv4x?file=/src/store.js)
{% codesandbox react-redux-examplecomparison-with-mobx-kxv4x %}
- [Mobx one](https://codesandbox.io/s/mobx-lite-state-management-example-6ie7w?file=/src/NotificationList.js:165-178)
{% codesandbox mobx-lite-state-management-example-6ie7w %}

```javascript
// shapes
type Store = {
  notifications: Notification[],
  setNotifications(notifications: Notification[]): void,
  prependNotification(notification: Notification): void,
}
type Notification = {
  content: string,
}
```

![react_redux_example_comparison_with_Mobx__-_CodeSandbox](https://dev-to-uploads.s3.amazonaws.com/i/w36cpirh7slpza2kl5t1.png)

As shown above, the shape of main store and the display is very simple and contrived.
The app is showing all the notifications with contents. 
Two behaviours:
1. set initial notifications
2. get the latest notification and show on the top

## Mobx solution
The key here is `useNotifications` hook which exports `useContext` result with an observable managed by MobX magic
```javascript
const store = observable({
  notifications: [],
  setNotifications: action((notifications) => {
    store.notifications = notifications;
  }),
  prependNotification: action((notification) => {
    store.setNotifications([notification, ...store.notifications]);
  })
});
```
It's very easy to think of and use. Just simply call `useNotifcations` hook anywhere you want to get hold of the actions or notifications data.

### Only thing you want to keep in mind
Use `observer` to wrap your component otherwise the component will not react to the change! like `observer(NotificationList)`

## Redux solution
I think we should skip the setup part like wrapping the app with `Provider` and combining reducers.

The key part here is notification reducer and how to change the state via actions. That said, we have to keep the `action -> reducer -> state` in mind all the time while using redux. That's something I don't like.

To make all things working, boilerplate is needed. You have to setup actions in unique names, setup big switch statement to distribute the reducer logic.

To fire an action in component, it's much easier now. The only thing you need is `useDispatch()`.

To use a state in component, simply use `useSelector()` to get hold of the piece you want from root reducer.

## My recommendation
Use MobX, it's much easier and straightforward. You define the shape you want in store, then easily get hold of and easily make change of it.

By using Redux, you need to have the action, reducer flow in mind. Also if you're using typescript, oh.. you might need to have a lot more boilerplate.

Maybe Redux does have a larger community which may provide more support and maybe more tools for Redux. But still, I like MobX more.
hackto
Tags: hacktoberfest
Published: 2020-11-11 02:48:42

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->


### [Intro Heading]
<!-- If you are new to the DEV community, introduce yourself and share a bit about why you joined DEV and decided to participate in Hacktoberfest this year.  --> 
### Background

<!-- Are you brand new to open source? What about coding in general? Tell us about how you got here →

### Progress

<!-- Share a bit about where you’re at in your Hacktoberfest journey. What stage are you at? How has the process been?  -->

### Contributions

<!-- This is where you can list the contributions you made and explain why you chose the projects you did. Don’t forget to add links!  -->


### Reflections
<!-- Overall, how has your Hacktoberfest 2020 experience been? If you’re a first-timer, will you participate again? What have you learned? Have you made any interesting connections? What is your next step in open source?  -->
Target .NET 5 in Azure App Service
Tags: azure, webdev, dotnet, tutorial
Published: 2020-11-11 02:40:31

---
title: Target .NET 5 in Azure App Service
published: true
description: It is now possible to target the .NET 5 runtime in Azure App Service. Let's see how.  
tags: azure, webdev, dotnet, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/56iq4bhyk9sxs12cazwg.png
---


Today is a big day: .NET 5 has officially been released as part the [.net conf](https://www.dotnetconf.net/). Awesome!

What's more awesome is that we can now deploy .NET 5 applications on Azure App Service. And what's more than "more awesome" is that we can do that for both Windows and Linux App Services. Isn't that awesome? ;)


# Targetting .NET 5 in an App Service
If you create a new web app and check the list of available runtimes, you'll see `.NET 5 (Early Access)` under the `.NET` category:

![.net 5 in azure app service](https://dev-to-uploads.s3.amazonaws.com/i/u3jn4cqos9q1txve0vxp.png)


# Early access ?!
Early access is a new feature of Azure App Service that will allow us to rapidly have access to the latest releases of various runtimes and SDKs without having to wait for an App Service release cycle to include that support. This is not only for .NET but also for other supported programming languages such as Python and Node.

As of today (November 10, 2020), Early access has some limitations, one of which is that Application Insights is not supported for .NET 5 applications.

To learn more about Early access, visit: https://github.com/Azure/app-service-linux-docs/blob/master/Runtime_Support/early-access.md


# What about existing web apps?
If you're running a Linux-based App Service, go to `Configuration` then to `General settings` and, under `Stack settings`, select `.NET` and you'll be targetting .NET 5 (both `Major version` and `Minor version` will adjust to use .NET 5). Don't forget to hit `Save`:

![existing linux app service: switch to .net 5](https://dev-to-uploads.s3.amazonaws.com/i/bvu458r1wcnrg021n0e4.png)

If you're running a Windows-based App Service, the procedure is slightly different. Go to `Configuration` then to `General settings` and, under `Stack`, select `.NET` and under `.NET Framework version`, select `.NET 5`:

![existing windows app service: switch to .net 5](https://dev-to-uploads.s3.amazonaws.com/i/9pjqjui6bzf0cnngkpb4.png)

It's interesting to note that when switching runtimes, the `Early access` suffix isn't mentioned...

# In conclusion
Starting today, we can use all the goodness provided by .NET 5 in our Azure App Services and it's as easy as selecting .NET 5 as our App Service's runtime.

# Let's keep in touch
You can reach me on [Twitter](https://twitter.com/tidjani_b) or [LinkedIn](https://ca.linkedin.com/in/tidjani-belmansour-ph-d-98460912).

See you soon !
Custom Device Paths with UDEV rules
Tags: linux
Published: 2023-01-06 01:13:14

---
title: Custom Device Paths with UDEV rules
published: true
date: 2020-11-11 01:58:37 UTC
tags: Linux
canonical_url: https://brandonrozek.com/blog/customudev/
---

I wanted to create a rule so that when I plug in my rtlsdr, a symlink to the device will appear in `/dev/rtlsdr`.

To do this, first we need to get some uniquely identifying information about the SDR.

```
❯ lsusb
Bus 001 Device 002: ID 8087:8001 Intel Corp. Integrated Hub
Bus 001 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub
Bus 003 Device 001: ID 1d6b:0003 Linux Foundation 3.0 root hub
Bus 002 Device 017: ID 0bda:2838 Realtek Semiconductor Corp. RTL2838 DVB-T
Bus 002 Device 001: ID 1d6b:0002 Linux Foundation 2.0 root hub

```

The part we care about here is the ID field. It is structured as `ID vendor:product`.

Now we can create a UDEV rule in `/etc/udev/rules.d/` that says “when we see this specific USB plugged in, create a symlink called `rtlsdr`”

(/etc/udev/rules.d/rtlsdr.rules)

```
SUBSYSTEM=="usb", ATTR{idVendor}=="0bda", ATTR{idProduct}=="2838", SYMLINK+="rtlsdr"

```

Tell udev to reload its rules

```
sudo udevadm control --reload

```

Now once you have your device plugged in, you should be able to see it under `/dev/rtlsdr` or whatever you specified your symlink as.
Adding Score and Reset to Angry Birds - like Game
Tags: angrybirds, physis, box2d, zimjs
Published: 2020-11-11 01:46:01

We had a request to add scores and resets to the Angry Bird - like game so here is Part D  

{% youtube PFiP1SzBNFE %} 

---

Sorry these Five Minutes got added up a little... code in 25 minutes! #Canvas #JavaScript #CreateJS #Box2D #ZIMjs

See the rest of the story at: https://dev.to/zimlearn/angry-birds-like-physics-game-in-15-minutes-with-zim-9al

---

If you have not checked out the Canvas recently - you simply must!  Here is the [ZIM&nbsp;Dev&nbsp;Site](https://dev.zimjs.com) and some [In-depth&nbsp;Guides](https://drabstract.medium.com/) by Dr&nbsp;Abstract including [Your Guide to Coding Creativity on the Canvas](https://drabstract.medium.com/your-guide-to-coding-creativity-on-the-canvas-ada0996298f6).
Three ways to create an object in JavaScript
Tags: javascript, fundamentals, object, beginners
Published: 2020-11-11 01:38:06

In JavaScript, there are three ways to create your own objects. Taking into account that almost everything in JS It’s an object.

## Object literals

The simplest way to create an object in JS it’s through curly brackets `{ }`. 

Define and create a single object in one statement

```
const person = {
    name : 'Freddy',
    sayHello() {
        return `Hi ${this.name}`
    }
};

console.log(person.sayHello()) // Hi Freddy
```

## New operator

Using the new operator is the same thing as creating objects literally. It’s recommended to use object literals, instead of this, for simplicity and execution speed.

```
const person = new Object()
person.name = 'Freddy'
person.sayHello = ()  => {
   return `Hi ${this.name}`
}

console.log(person.sayHello()) // Hi Freddy
```

Also, you can create an object through a constructor function. In this case, the new operator returns an instance of the function, if the function has not an explicit return statement it’ll “this “

```
function Person (name) {
    this.name = name
    this.sayHello = function() {
        return `Hi ${this.name}`
    }
}
const person = new Person('Freddy')
console.log(person.sayHello()) // Hi Freddy
```

## Object.create() method

In order to define and create a new object through the create 
method, we have to use the prototype from another one.

```
const person = Object.create(Object.prototype)
person.name = 'Freddy'
person.sayHello = function sayHello() {
     return `Hi ${this.name}`
}


console.log(person.sayHello()) // Hi Freddy
```
JS: Functions inside Constants, When, How, and Why to use them
Tags: javascript
Published: 2020-11-10 23:35:46

As I have been working on my [EMXI Pure JS Library](https://emxi.js.org), I have been putting Functions inside of constants. It's not a difficult thing to do, but I feel like they should be used more often. So how do you make one, how do you call one, and why are they so valuable?

## Putting The Function inside the constant.
To make one of these, it's quite simple. You simply open your `whatever.js` file, open a constant, and throw in a function, just like this:

```js
const myConstant = {
    myFunction: function(argument1, argument2){
        // Your code here
    }
}
```

You then simply call it by:

```js
myConstant.myFunction(1,2)
```

## When could this be useful?
Well if you are like me and making a library with multiple similar functions, this becomes your best friend. I really am not too sure when else this could be super useful, other than maybe making multiple functions under the same name. Let's say you need to have a function for the perimeter of the square and another function for the area of the square, this works well for that kind of stuff.

I mostly see this as a library-centric approach though. Let's take the area/perimeter of a square idea. In [EMXI](https://emxi.js.org) for example, the functions are `area.square()` and `perimeter.square()`. This could save time for users of a library, but when making an application its use is a lot more limited. You could just name your functions `perimeterOfSquare()` and `areaOfSquare()`. 

Every situation is different, but this is just a short little thing for you to know one more (small but important) feature in programming languages like JavaScript.
How I Use VSCode
Tags: vscode, ruby, rails, discuss
Published: 2020-11-11 01:30:15

I’m about to overhaul my settings and plugins in VSCode so this is my “before” shot. 

I recently updated and shared my [Visual Studio Code settings](https://howivscode.com/andrewmcodes) on [How I VSCode](https://howivscode.com).

Check them out and share yours as well!

Really loving this tool because now I can always point people towards tools I like without having to copy it from a gist somewhere or be on my computer. 

What plugins are you really enjoying? Any new ones? Which ones do you no longer need as the software matures?

Happy (VS) Coding!
Five Things You Should Know About .NET 5
Tags: net5, dotnet
Published: 2020-11-11 00:39:51

What's new in .NET 5? Learn how .NET Core and .NET Framework evolve into the new cross-platform framework.
[Read more](https://auth0.com/blog/dotnet-5-whats-new/?utm_source=content_synd&utm_medium=sc&utm_campaign=dotnet_5)
Release 3.0 P-2
Published: 2020-11-10 23:34:33

For Release 3.0 we needed to create two pull requests, one to an external repository and one internal to Seneca College, this blog is about my pull request to an internal repository.

During my work on the external pull request requirement of this Release, user c3ho on our Slack team posted an issue involving UI changes. I thought this was going to be easy enough and decided that I would like to give it a shot as my first pull request to the Telescope program. The issue can be found [here](https://github.com/Seneca-CDOT/telescope/issues/1276) and you can find the pull request that I made [here](https://github.com/Seneca-CDOT/telescope/pull/1306)

Basically, I was tasked with creating a UI that would explain to the user how to use the new Search Query functionality created in pull request [#1275](https://github.com/Seneca-CDOT/telescope/pull/1275)

Starting up my development enviorment was very easy considering that I had to set everything up in a previous lab, so it was as simple as running the command
```bash
npm run develop
```
Which I found in the Telescope [deployment docs](https://github.com/Seneca-CDOT/telescope/blob/master/docs/environment-setup.md)

After this I got straight to work and started researching on the best way to develop this feature, I decided that it would be best to keep true to the design that the previous developers created and I didn't want to do anything out of the ordinary that would draw away from the attention of the page. My fix was a hoverable info icon that has a popout that would explain all the new key symbols that users can use when searching.

[![Image from Gyazo](https://i.gyazo.com/e551919ced5612adb5639e91625b786a.png)](https://gyazo.com/e551919ced5612adb5639e91625b786a)

It looks nice and clean and doesn't create to much of a difference in UI design from the previous developers that worked on this page.

I had to do a lot of research about material UI & react which I never used before, primarly I had to choose between all of [these different tooltips](https://material-ui.com/components/tooltips/) but I settled on the [HtmlToolTip](https://material-ui.com/components/tooltips/) because this would give me the most freedom to choose how I would like the design to be once the user hovered over the info button.

The biggest take away was the use of Material UI which seemed to be incredibly useful as my first 30minutes was trying to just use basic HTML inside the component. There is an abundance of tools that will be at your disposal when working with Open Source projects and you can't be scared to learn new skills if you want to create good pull requests.
useIpAdrress()
Tags: react, typescript, customhooks, hooks
Published: 2020-11-11 00:29:09

`useIpAddress.ts`
```typescript
import axios from 'axios';
import { useCallback } from 'react';

/**
 * Hook para retornar o IP do usuário.
 *
 * @example
 * const [ipAddress] = useIpAddress();
 * ip_address: await ipAddress(),
 *
 * @return String com o endereço de IP do usuário
 */

const useIpAddress = () => {
  const ipAddress = useCallback(async () => {
    const { data } = await axios.get('https://ipv4.icanhazip.com');

    return data;
  }, []);

  return [ipAddress];
};

export { useIpAddress };

```
`Component.tsx`
```typescript
import { useIpAddress } from 'hooks/useIpAddress';

const [ipAddress] = useIpAddress();

const data = { ip_address: await ipAddress(), ...rest};
```
Custom hook useScroll.tsx ::  React TypeScript
Tags: react, typescript, hooks, customhooks
Published: 2020-11-11 00:24:53

Esses dias precisei usar o custom hook useScroll() que tinha feito em um projeto JavaScript. Porém, esse novo projeto está todo em TypeScript. Ambos ReactJs.

> Esse hook serve para rolar a página até a posição de algum elemento específico.

Esse foi o resultado. Qualquer sugestão de melhoria, manda pra nós!

`useScroll.ts`
```typescript
import { useRef } from 'react';

export type UseScrollResult = [() => void, React.RefObject<HTMLDivElement>];

const useScroll = (): UseScrollResult => {
  const htmlElementRef = useRef<HTMLDivElement | null>(null);

  const executeScroll = () => {
    if (htmlElementRef && htmlElementRef.current) {
      const { offsetTop } = htmlElementRef.current;

      offsetTop && window.scrollTo(0, offsetTop - 32);
    }
  };

  return [executeScroll, htmlElementRef];
};

export { useScroll };

```

`SomeComponent.tsx`
```typescript
import { useScroll } from 'hooks/useScroll';

const [executeScroll, htmlElRef] = useScroll();

const someActionAndScroll = () => {
    //...

    executeScroll();
  };

return (
<Container>
   <TargetContainer ref={htmlElRef} />
   <Header />
   <List />
   <Button onClick={someActionAndScroll} />
</Container>
)
```

O hook useScroll exporta uma função que executa o scroll `[executeScroll]` até posição recebida pela referência que colocaremos no elemento alvo `[htmlElRef]`.
How to convert numbers to exponential form in JavaScript?
Tags: javascript
Published: 2020-11-11 00:00:00

---
  title: How to convert numbers to exponential form in JavaScript?
  published: true
  tags: JavaScript
  date: Wed Nov 11 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/convert-number-to-exponential-form-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-6308c2a0732140ee22859a58eb9cfd1a.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/convert-number-to-exponential-form-javascript)
  
To convert any number to exponential form, you can use the `toExponential()` Number method in JavaScript.

Consider this number,

```js
// number
const num = 45678;
```

Let's convert this to exponential form using the `toExponential()` method like this,

```js
// number
const num = 45678;

// convert to exponential form
const expNum = num.toExponential();

console.log(expNum); // "4.5678e+4"
```

The method also accepts an optional argument to specify the number of digits to show after the decimal point. Suppose if we want only `2` digits to show after the decimal point, we can pass that `2` as an argument to the method like this,

```js
// number
const num = 45678;

// convert to exponential form
// pass 2 to show 2 digits after
// decimal point
const expNum = num.toExponential(2);

console.log(expNum); // "4.57e+4"
```

Now the output looks like this: `4.57e+4`.

See this example live in [JSBin](https://jsbin.com/puxapizadi/1/edit?js,console).

- ✅ One important thing to note here is that the `toExponential()` number method returns the value as a `string` type and not as a `number` type.

### Feel free to share if you found this useful 😃.

---
Azure Functions University - Blob Lesson (.NET Core)
Tags: azure, serverless, programming, dotnet
Published: 2022-03-16 20:01:44

---
title: Azure Functions University - Blob Lesson (.NET Core)
published: true
date: 2020-11-11 00:00:00 UTC
tags: azure, serverless, programming, dotnet
canonical_url: https://blog.marcduiker.nl/2020/11/11/azfuncuni-blob-lesson-dotnet.html
series: Azure Functions University
---

![Blob Lesson .NET Core](https://blog.marcduiker.nl/assets/2020/11/11/AzureFunctionsUniversity_Blob_Lesson_dotnetcore.png)

Hi serverless friends, we have a new Azure Functions University lesson for you! In this lesson we will learn how to use the Blob trigger and bindings in Azure Functions written in .NET Core 3.1.

<!--more-->
## Lesson

You can find the lesson on GitHub: [Blob Trigger & Bindings (.NET Core)](https://github.com/marcduiker/azure-functions-university/blob/main/lessons/dotnetcore31/blob/README.md).

And you can watch the video on YouTube:
{% youtube z5AQdk-43ZI %}

The lesson consists of the following exercises:

| Nr | Exercise |
| --- | --- |
| 1 | Using the Microsoft Azure Storage Explorer and Storage Emulator |
| 2 | Using `string` Blob output bindings |
| 3 | Using `CloudBlobContainer` Blob output bindings |
| 4 | Using `dynamic` Blob output bindings |
| 5 | Using `Stream` Blob input bindings |
| 6 | Using `CloudBlobContainer` Blob input bindings |
| 7 | Using `dynamic` Blob input bindings |
| 8 | Creating a Blob triggered function |
| 9 | Homework |
Why did you decide to study Software Engineering?
Published: 2020-11-10 23:58:52

Two years ago I decided I wanted to pick up a new skill, HTML and CSS seemed like the perfect skill. Web pages had always interested me so it seemed like the perfect thing to try and pick up.

I started working on my HTML and CSS skills and was able to get a project to work on from a coworker at the time. My job was to work on the design of a baby clothing website. Working on this website in my free time made me start to question the marketing path I was considering going down. I was trying to teach myself coding, however I was having a hard time moving on from HTML, CSS and JavaScript. I continued to maintain that front end for about a year. I got a different job and put coding on the back burner.

Earlier 2020, I tried to go the route of self-teaching again. This once again was difficult because I could not figure out a curriculum that worked for me. I would start different routes but something else always seemed like the better path.

So finally after 2 years I decided to finally give Flatiron Bootcamp a go. After spending 2 years working on my career, doing marketing operations, I started learning about different roles at my current company that I was more interested in. I spoke to many Software Engineers at my company to understand what they worked on, and what path they took to learn software engineering and this really solidified that was what I wanted to spend my time working on. 

I am really looking forward to be taking this next step in my coding journey!