teleren/devto huggingface dataset:
Managed async actions in Mobx-State-Tree
Tags: mobxstatetree, mobx, typescript, react
Published: 2021-03-11 20:23:10

In every frontend project I've worked on, dealing with the boilerplate around asynchronous actions was a major pain point. Setting status flags and wrapping api requests in try/catch blocks gets old fast, and doing it in an ad-hoc fashion is messy and error-prone.

Mobx-State-Tree's `flow` provides a solid foundation for dealing with async actions, but we're still left to do all of the bookkeeping ourselves.

Let's look at an example adapted from their docs:

{% gist https://gist.github.com/jetako/d9fe69d6ed52819888cb9b94b077f1ad file=mst-flow-basic.ts %}

There's more lines of boilerplate here than for the actual important stuff. Doesn't seem too bad in isolation, but multiply it by the number of api requests in your app and it starts to build up. Also, this example doesn't really deal with the error. What if you need to present a specific error message to the user? You'd have to keep that in your state as well.

What if your action needs to be cancelable, or you have a chain of async actions, and you want the parent to report if the child failed? Surely you can do this manually, but only with a bunch of extra bookkeeping.

To solve these issues, I wrote a library that records the various states of your async actions and provides control over their lifecycles:

###[mst-async-task](https://github.com/jetako/mst-async-task)

Let's compare with the above example:
{% gist https://gist.github.com/jetako/d9fe69d6ed52819888cb9b94b077f1ad file=mst-async-task-basic.ts %}

No bookkeeping, and looks cleaner, in my opinion. The task runner records the pending/complete/failed state of the action in `fetchProjectsTask`, and an error if thrown. This gives you all the info you need to present the request state to the user.

For more complex use-cases, check out the [README](https://github.com/jetako/mst-async-task).

I hope some of you find this useful. Cheers!
Refactoring Enrollment - Building SaaS #84
Published: 2021-03-11 20:15:04

{% youtube LYvT9OXuGDE %}

In this episode, I decided to redesign a portion of the application flow. I wasn't pleased with how users would enroll students for their grades so I refactored the school year page into a flow that worked better.

Note: My internet connection was not good during this stream. Thankfully, the audio is fine and reading code is very possible because the background doesn't need to change much. My apologies for the low quality.

I started by deleting an "Enroll Student" button on the school year detail page. This involved removing some view context data and associated tests as well.

After I deleted the old method, I added some new context that added a boolean of `has_students` to the grades that display on the school year page. I used this context to control whether to show a call to action to let user's enroll for a grade level.
AzureFunBytes Episode 34 - Intro to @Azure Machine Learning with @hboelman!
Tags: machinelearning, cloud, azure, beginners
Published: 2021-03-11 20:07:50

AzureFunBytes is a weekly opportunity to learn more about the fundamentals and foundations that make up Azure.  It's a chance for me to understand more about what people across the Azure organization do and how they do it.  

As a person who's been in the Ops world for most of his career machine learning and predictive services are still very new to me.  An entire world of data analysis is capable of providing greater insight into what customers want, [live chat bots](https://cda.ms/21n), and make decisions.  [Is machine learning just one big search on a database?](https://cda.ms/21c)  What are models?  How do I integrate AI services into applications I am currently building?  These questions have been top of mind for me when thinking about [Artificial Intelligence](https://cda.ms/21p) and [Machine Learning](https://cda.ms/21q).  

We go through a great demo that asks the question to Azure Machine Learning, ["is this a cat or a llama?"](https://github.com/hnky/amls-pytorch) Henk provides code, information, and helps me get a better understanding of exactly what ML is!

{% youtube Pu1Xql8y-xA %}

To help me get a better understanding of these services and how they work, I've enlisted [Cloud Advocate Henk Boelman](https://twitter.com/hboelman) to come on the show.  Henk and I have been in places across the world helping people understand Azure, but I certainly know that there are things I need a ton more help to understand.  This week Henk will take some of the mystery out of using ML and AI.

Learn about Azure fundamentals with me!

Live stream is available on Twitch at 2 pm EST Thursday. You can also find the recordings here as well:

https://twitch.tv/azurefunbytes
https://twitter.com/azurefunbytes
https://aka.ms/jaygordononyoutube
[Azure DevOps YouTube Channel](https://www.youtube.com/channel/UC-ikyViYMM69joIAv7dlMsA)

Useful Docs:

[Get $200 in free Azure Credit](https://cda.ms/219) 
[Azure Machine Learning](https://cda.ms/21b) 
[What is machine learning?](https://cda.ms/21c) 
[Tutorial: Create a classification model with automated ML in Azure Machine Learning](https://cda.ms/21d) 
[Example pipelines & datasets for Azure Machine Learning designer](https://cda.ms/21f) 
[Microsoft Learn: Create machine learning models](https://cda.ms/21g) 
[Microsoft Learn: Explore and analyze data with Python](https://docs.microsoft.com/learn/modules/explore-analyze-data-with-python/?WT.mc_id=devops-15968-jagord) 
[Deploy a model to an Azure Kubernetes Service cluster](https://cda.ms/21j) 
[Machine learning operations (MLOps)](https://cda.ms/21m)
[Llama or Cat Pytorch demo](https://github.com/hnky/amls-pytorch)
Top 5 DEV Comments from the Past Week
Tags: bestofdev
Published: 2021-03-11 20:06:36

---
title: Top 5 DEV Comments from the Past Week
published: true
description: Highlighting some of the best DEV comments from the past week.
tags: bestofdev
cover_image: https://res.cloudinary.com/practicaldev/image/fetch/s--7VrAA2ln--/c_imagga_scale,f_auto,fl_progressive,h_420,q_auto,w_1000/https://thepracticaldev.s3.amazonaws.com/i/qmb5wkoeywj06pd7p8ku.png
---

_This is a weekly roundup of awesome DEV comments that you may have missed.  You are welcome and encouraged to boost posts and comments yourself using the **[#bestofdev](/t/bestofdev)** tag._



#### Love the sunflower, @monika_roy1! Lots of other great workspace snapshots in [this thread](https://dev.to/xenoxdev/show-off-your-workspace-5a95). 


{% devcomment 1c9mp %}

#### Nice addition to this [custom toggle switch tutorial](https://dev.to/devggaurav/let-s-create-a-custom-toggle-switch-using-html-and-css-33df), @mborgeaud!


{% devcomment 1c726 %}



#### Really nice work, @ilizette! Keep us posted on how the job is going 😊 


{% devcomment 1c6g6 %}



#### We couldn't agree with your thoughts on [@aspittel's #SheCoded post](https://dev.to/aspittel/nevertheless-ali-coded-1e42) more, @benmallinson. ❤️  


{% devcomment 1c89n %}



#### Love this helpful feedback on [@marulucenat's projects](https://dev.to/marulucenat/working-on-my-first-projects-would-love-some-feedback-2dib), @flexonze! This is what DEV is all about.


{% devcomment 1c5jj %}

---


_See you next week for more great comments ✌_
Updating the .NET Core Angular template from Angular 8 to 10
Tags: angular, dotnet, tutorial, webdev
Published: 2021-03-11 19:56:53

Creating a new .NET Core project with the Angular template is pretty handy, but it starts you out on Angular 8. The upgrade process to version 10 is not very straightforward and can cause some serious headaches if you're not sure what to look out for. Thankfully, I recently completed this process and wanted to share the steps I took to perform a successful upgrade.

**Note:** a lot of these steps can be found on Angular's Update Guide here: [https://update.angular.io/](https://update.angular.io/)

> All of the following commands should be run from `<project-directory>/ClientApp`

1. **Update the current version of Angular 8**
  - `ng update @angular/core@8 @angular/cli@8`
2. **Upgrade to version 9**
    - `ng update @angular/core@9 @angular/cli@9`
        - Remove `export { renderModule, renderModuleFactory } from '@angular/platform-server'` from `main.ts`
        - Without removing these exports, the following error will be thrown at startup: `Uncaught SyntaxError: Strict mode code may not include a with statement`
        - More info: [https://stackoverflow.com/questions/60114758/uncaught-syntaxerror-strict-mode-code-may-not-include-a-with-statement](https://stackoverflow.com/questions/60114758/uncaught-syntaxerror-strict-mode-code-may-not-include-a-with-statement)
    - `ng add @angular/localize`
        - This is required since the Angular template seems to rely on Angular's internationalization system (i18n)
    - Change `progress: false` to `progress: true` in `angular.json`
        - Without changing this value, the app will fail to start and the following error will be displayed on startup: `TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 0 seconds`
        - More info: [https://stackoverflow.com/questions/60189930/timeoutexception-the-angular-cli-process-did-not-start-listening-for-requests-w](https://stackoverflow.com/questions/60189930/timeoutexception-the-angular-cli-process-did-not-start-listening-for-requests-w)
    - `npm uninstall @nguniversal/module-map-ngfactory-loader`
        - Remove `ModuleMapLoaderModule` import and reference from `app.server.module.ts`

3. **Upgrade to version 10**
    - `ng update @angular/cli @angular/core rxjs`
4. **Upgrade dependencies**
    - `npm install -g npm-check-updates`
        - This package will help upgrade all dependencies to their latest version
    - `ncu -u`
    - `npm install`
    - `npm update`
    - `npm audit fix`

Voila! You are now running your .NET Core Angular project in version 10. Again, these are just the specific steps for going from version 8 to 10. To upgrade to other versions, check out Angular's Update Guide at [https://update.angular.io/](https://update.angular.io/)
Inspiring the community through lazyness
Tags: opensource, watercooler
Published: 2021-03-11 19:51:55

I have a lot of libraries that show great promise but I'm so fed up of programming after hours and I have decided that this year I'm going to kick back and do less programming.

What I found very amusing about this is that after not replying to a ticket on one of my libraries for quite some time (slap on the wrist) I was then informed that somebody had gone out and wrote their own, my library was original and I am so lazy that I actually inspired them. It's a shame that we can't be friends but as I say, I'm resting a while 🏝️

... On second thoughts we shall see how long I can last without inventing things, I'm really not sure how this stop and relax thing works it's certainly a new thing for me.
How to use optional chaining in JavaScript ES2020?
Tags: javascript, webdev, tutorial, beginners
Published: 2021-03-11 19:12:03

##Why worry about `undefined` or `null` values when optional chaining can be used?

When something comes from the outside but you are not sure if it is defined or you just want to simplify the logic of your app use this solution. 🔽

__Before we start__, I would highly recommend you to check out the __runnable examples__ for the solution on our website:
[How to use optional chaining in JavaScript ES2020?](https://dirask.com/posts/D6BelD)

###Let's start by briefly explaining how the optional chaining operator works.

ES2020 introduced `?.` operator that gives the possibility to avoid testing if an object or property before `?.` notation exists, returning `undefined` value if not. The operator can be used with variables, properties, objects, arrays, functions, etc.

The `?.` operator is similar to the `.` chaining operator, except that instead of causing an error if a reference is `null` or `undefined`, the expression returns `undefined` value.

>📝 Note:

>The `?.` optional chaining operator is supported in the latest Babel compiler and TypeScript by default.

Syntax looks following way:

|    Syntax      |             Description              |
| ---------------|:------------------------------------:|
| `obj?.prop`    | object property access               |
| `obj?.[expr]`  | object property access with brackets |
| `arr?.[index]` | array item access by index           |
| `func?.(args)` | function calling                     |

Simple object example:
```javascript
const user = {
  name: 'Kate',
  age: 25,
};

console.log(user?.name);             // Kate

// console.log(user.address.street)  // causes error
console.log(user.address?.street)    // undefined
```
Various types examples:
```javascript
// accepted: uninitialised, undefined or null

var obj;
var arr = undefined;
var func = null;

console.log(obj?.items);        // undefined
console.log(obj?.['name']);     // undefined
console.log(arr?.[10]);         // undefined
console.log(func?.('Hello!'));  // undefined
```
You can run these examples [here](https://dirask.com/posts/D6BelD)

If you found this solution useful let me know in the comment section or leave a reaction 💗🦄💾.
Thanks for reading and see you in the upcoming posts! 😊🔜
_____________
## Write to us! ✉
If you have any problem to solve or questions that no one can answer related to a React or JavaScript topic, or you're looking for a mentoring write to us on [dirask.com -> Questions](https://dirask.com/questions)

You can also join our [facebook group](https://www.facebook.com/groups/125343696143974) where we share coding tips and tricks with others! 🔥
What components make up ethical design? Answer for the chance to appear on the DevDiscuss podcast!
Tags: discuss, podcast
Published: 2021-03-11 18:35:31

---
title: What components make up ethical design? Answer for the chance to appear on the DevDiscuss podcast!
published: true
tags: discuss, podcast
---

The [DevDiscuss Podcast](https://dev.to/devdiscuss) begins with an interview and ends with commentary from listeners — and we like to feature the actual _voices_ from our community!

To inform an upcoming episode of the show, we'd like to know...

> ### **“How would you define ethical design? What components or considerations are necessary when designing ethical software?”** 
  
For your chance to appear on an upcoming episode, answer the question above by:

- Calling our Google Voice at +1 (929)500-1513 and leave a message 📞

- Sending a voice memo to pod@dev.to 🎙

- OR, leaving a comment here (we'll read your response aloud for you) 🗣

_Please send in your recordings by Wednesday, March 17th at Midnight, ET (9 PM PT, 5 AM UTC)_

_**Voice recordings will be given priority placement**_ 😉 

---

Plus, don't forget to check out the most recent episode of DevDiscuss:

{% podcast https://dev.to/devdiscuss/s4-e5-online-abuse-and-the-future-of-anti-harassment-tooling %}
npm start error - React
Tags: help, react
Published: 2021-03-11 18:28:52

Hey there, I need help in fixing this error. When I run npm start command, I'm getting this error. Please help me out in fixing this.

```
events.js:174
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/swathi_vennela/Documents/Dev/react/dojo-blog/public'
    at FSWatcher.start (internal/fs/watchers.js:165:26)
    at Object.watch (fs.js:1258:11)
    at createFsWatchInstance (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:38:15)
    at setFsWatchListener (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:233:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:429:19)
    at FSWatcher.<anonymous> (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:477:19)
    at FSWatcher.<anonymous> (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:482:16)
    at FSReqWrap.oncomplete (fs.js:154:5)
Emitted 'error' event at:
    at FSWatcher._handleError (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/index.js:260:10)
    at createFsWatchInstance (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:40:5)
    at setFsWatchListener (/home/swathi_vennela/Documents/Dev/react/dojo-blog/node_modules/webpack-dev-server/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    [... lines matching original stack trace ...]
    at FSReqWrap.oncomplete (fs.js:154:5)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! dojo-blog@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the dojo-blog@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/swathi_vennela/.npm/_logs/2021-03-11T18_14_25_594Z-debug.log
swathi_vennela@swathi-Aspire:~/Documents/Dev/react/dojo-blog$ 
```
On .NET Episode: Building microservices with Tye
Tags: microservices, kubernetes, aspnetcore, dotnet
Published: 2021-03-11 18:09:23

Tye is a tool that makes developing, testing, and deploying microservices and distributed applications easier for developers. With very little knowledge of Docker or Kubernetes, developers can run locally orchestrated projects during development, and then publish to a hosted orchestrator of their choice.

In this video, Justin and Amiee come on to talk to us about how Project Tye works. They discuss the problems it solves, show us a few demos, and even talk a little about the future of the project.

{% youtube m4VsOdIT1O4 %}

If you liked this video and would like to see some more of our .NET content, please subscribe to our [.NET Developers YouTube Channel](https://www.youtube.com/channel/UCvtT19MZW8dq5Wwfu6B0oxw).

<ul>
<li><a href="https://github.com/dotnet/tye?WT.mc_id=dotnet-17847-cephilli" target="_blank">Project Tye on GitHub</a></li>
<li><a href="https://github.com/dotnet/tye/tree/master/samples" target="_blank">Tye Samples</a></li>
<li><a href="https://channel9.msdn.com/events/dotnetConf/2020/Developing-and-Deploying-Microservices-with-Tye?WT.mc_id=dotnet-17847-cephilli" target="_blank">Developing and Deploying Microservices with&nbsp;'Tye'</a></li>
<li><a href="https://devblogs.microsoft.com/aspnet/introducing-project-tye/?WT.mc_id=dotnet-17847-cephilli" target="_blank">Introducing Project Tye</a></li>
</ul>
props in React
Published: 2021-03-11 18:06:59

To pass a love letter from your house to your girlfriend's house you need a medium. Same in react you need a medium to pass data from one component to another component.

In function, if we want to pass anything from one function to another function, we use parameter. Example.

```cpp
void printNumber (int number){
 cout<<number<<endl;
}

int main(){
int Number = 28;
printNumber(Number);
return 0;
}
```
In C++, in our printNumber() function we receive data from main function . Here we use "number" use as a parameter .
 
ReactJS are all about components. We need to pass data from one component to another. For this, we need to use props. props is a keyword of react. it stands for properties. props are used for passing data from one component to another. 

But unfortunately, reactJS allows only side love. You can only send data to your girlfriend but you are not allowed to receive it. In react one side love allows us to pass data from parent component to child component. It's called unidirectional data flow. 

Code : 

```javascript
import React from 'react'
const ParentComponentData = "Data From Parent Component";
class ParentComponent extends React.Component {
  render(){
    return (
      <ChildComponent name={ParentComponentData}/> 
    )
  }
};
const ChildComponent = (props) =>{
return <div>I get {props.name}</div>
}

export default ParentComponent ;
```
Here ParentComponent passes data to ChildComponent.  ChildComponent accesses data using {props.name} .

```
 Output: I get Data From Parent Component
```
Hello World!
Tags: general
Published: 2021-03-11 17:12:01

---
title: Hello World!
published: true
description: A brief intro to my new dev blog
tags: general
cover_image: https://aldercode.com/blog/images/post1_featured_image-devto-v2.jpg
canonical_url: https://blog.aldercode.com/hello-world
---
So, what’s this all about? Well, I’ve been learning to code off and on for at least a couple of years already. But despite my best intentions, it has been more a case of ‘off’ than ‘on’, what with life keeping me busy. As someone with a family, a career, post-grad studies, and a long commute (in pre-Covid times at least), it happens to the best of us. And me.

I’ve always read that new coders should write a blog about their learning to code journey for a multitude of reasons. Of course, I knew better 😉. I knew that there are thousands of these types of blogs out there already, with many written by those who are far more adept than I at coding. Does the world really need one more? What could I possibly offer the coding world with my limited HTML and CSS, and VERY limited JavaScript and SQL, knowledge? (Imposter syndrome much?)

Turns out that the answer is… yes. It does. Or to frame the answer better – I need another learn to code blog. For myself. To keep my own progress moving forward. To write about what I learned, to better solidify that knowledge. And if you want to join me on this journey? Great! The more the merrier, I feel. I look forward to meeting all of you!

It’s not a case of me not blogging at all – I launched a blog a couple of weeks ago looking into tech solutions to climate and conservation issues, given that I find the topic fascinating. And I’m thoroughly enjoying that. However, given that the site is branded and marketed as focusing on the aforementioned climate tech content, I’d prefer to keep it that way. I’d rather not dilute that site’s focus, if you will.

This blog, however, is my space to write about a far greater scope of code-related topics. A place where I can write anything from “Why I like commenting descriptions out in HTML” to “Lookit! I made a Flexbox thingy that MOVES!” to “How to use Docker on Beast Mode”.

Can I be honest? I really have no idea what Docker is. I read their description but there were lots of really long words that mean very little to me as of right now. That will change. That’s the point of this blog – documenting that change. I look forward to actually having an idea of what “OS-level virtualization” even means. We’ll get there. Baby steps.

So, I hope you’ll tag along for the ride. And please stop by on [Twitter](https://twitter.com/aldercode) to say Hi!

Until the next time!

Bye.

[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/W7W73WZVX)