teleren/devto huggingface dataset:
Let's Learn .NET - Blazor Hybrid - July 28th 2022 - Free Live Stream Event
Tags: dotnet, blazor, dotnetmaui, csharp
Published: 2022-07-27 17:44:00

[Let's Learn .NET](https://aka.ms/letslearndotnet) is a monthly beginner series that walks through the fundamentals of using C# and .NET. This month, we are looking at Blazor Hybrid and how to use it to **build hybrid apps for desktop and mobile with .NET MAUI completely in C# using modern web technologies**.

In a Blazor Hybrid app, Razor components run natively on the device. Components render to an embedded Web View control through a local interop channel. Components don't run in the browser, and WebAssembly isn't involved. Razor components load and execute code quickly, and components have full access to the native capabilities of the device through the .NET platform. Join us as we explore Blazor Hybrid together!

{% youtube iI058EA_maE%}

## When
**Thursday, July 28th at 8:30 AM - 10:30 AM Pacific**

## Where

Streaming live for FREE on [Microsoft Learn TV](https://docs.microsoft.com/learn/tv/?WT.mc_id=dotnet-17847-jasingl) or on [YouTube](https://www.youtube.com/watch?v=iI058EA_maE). Sign-in, ask questions, and learn how to start building accessible apps.

## What
Come learn something new and leave with something that we all built, together, live with experts. Here is the agenda for the event:

**Introductions (5 mins):**
- Meet the team!

**Fundamentals (20 mins):**
- Blazor Hybrid 101 
   - What is Blazor? 
   - What is Blazor Hybrid
   - What is .NET MAUI
- Pre-requisites & installation  

**Workshop (60 mins):**
- [Build a mobile & desktop app with Blazor Hybrid](https://docs.microsoft.com/learn/modules/build-blazor-hybrid/?WT.mc_id=friends-0000-jamont)

**Q&A (10 mins):**
- Get your questions answered live!

## RSVP Today
Head to [aka.ms/letslearndotnet](https://aka.ms/letslearndotnet) to RSVP today!

## Looking for more?
- [Blazor resources](https://www.theurlist.com/letslearndotnet-blazor-hybrid)
- [.NET 101 Videos](http://dot.net/videos)
Low-code Framework Concept for Node.js 🥑
Tags: showdev, node, lowcode, backend
Published: 2022-07-27 17:34:00

We've launched a project that it can automate data and logic in Node.js, so that it can organically reduce code lines.

Nucleoid Low-code Framework works with underlying declarative runtime environment that re-renders very same JavaScript codes makes a connections in the graph and eventually save the JavaScript state so that it doesn't require external database.

**Hello World**

```javascript
app.post("/test", () => {
  var a =  1
  var b = a + 2;
  var c = b + 3;
})

app.get("/test", () => {
	return b;
})
```

This 👆 will save and return variables without external database even if the program restarted.

The Nucleoid runtime environment tracks JavaScript state like variables, object, class, etc. that it can control all technical codes like pooling, connections, in meanwhile, developers can focus to build up business logic with vanilla JavaScript.

Example with actual objects:

```javascript
class User {
  constructor(name) {
    this.name = name;
  }
}

app.post("/users", () => new User("Daphne"));

app.get("/users", () => {
  return User.filter((user) => user.name === "Daphne")
});
```

## Theory
> Applying declarative programming at the runtime gives us ability to include data management in the same process.

In different words, the main objective of the project is to manage both of data and logic under the same runtime, at the same time, we can also stream/export data to external database like NoSQL.

## How it works

```javascript
nucleoid.run(() => {
  var a = 1;
  var b = a + 2;
  var c = b + 3;
});
```

Once a variable is defined like ` var a = 1`, the runtime does 3 major things. First, it places the `var a` in the graph and makes the connection between dependent variables.

![Variable Graph](https://cdn.nucleoid.com/media/variable-graph.drawio.png)

Second, updates state with new values in order get affect

|         | State |
| ------- | ----- |
| `var a` | 1     |
| `var b` | 3     |
| `var c` | 6     |

However, actual execution is different since variables are tracked in the graph.

```javascript
state.a = 1;
state.b = state.a + 2;
state.c = state.b + 3;
```

and finally stores statements in the runtime-managed `fs`.

## IDE (OpenAPI Editor)

The framework works with Express.js, we also made small UI that builds up the very same codes with OpenAPI, package and run on CodeSandbox.

[Go to Nucleoid IDE](https://nucleoid.com/ide/)

![Screenshot](https://cdn.nucleoid.com/media/screenshot-1.png)

---

This paradigm is still a part of the declarative programming, but applied at the runtime unlike Prolog or Haskell. As we are still discovering what we can do with this powerful programming model, please join us with any types of contribution!

<center>
  Learn more at <a href="https://github.com/NucleoidJS/Nucleoid">https://github.com/NucleoidJS/Nucleoid</a>
</center>

[![Nucleoid Logo](https://cdn.nucleoid.com/media/icon.png)](https://nucleoid.com)
Want To Be Rich? Do What A Billionaire Does.
Tags: podcast, jokes, prank, nft
Published: 2022-07-27 17:17:08


It's another episode of Council Of The Wise Developers!

First, hear EXCLUSIVE audio of Entrepreneur Toby Bee @ BeeCon 2022!

Then Head of the Council, Enoch Wise, shows you how he closes BIG deals and wins the tough negotiations, by walking the walk!

https://rss.com/podcasts/councilofthewisedevelopers/
In which way do you guide me ?
Tags: flutter, react, security, django
Published: 2022-07-27 16:58:24

hello dears 👋🏼

These days I wanna try new things about programing but I got confused to choose which one of them. 🤔
I have 3 options:

**  1. Django
  2. React
  3. Flutter
  4. Security roadmap ♥**

I know we cant say which one is best! but it is my pleasure to share your opinion and experiences about options above (specially 4).
Love you all and hope you best 😘
5 Flutter Dart Tips.
Tags: dart, beginners, programming, javascript
Published: 2022-07-27 16:56:32

## 1) .any
This is a list of Languages

![.any](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16kka9ue6koth018fe3p.png)
 
And you can use the `.any` to check whether any elements of this iterable to satisfy the test.

In this example we verify if any language starts with the letter D or B

The first one is true and the second one is false.

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

## 2) .padRight .padLeft
You can add characters before or after a string if you use the padLeft or padRight.

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

This number is the total amount of character you will have and

![total](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0jb5qlmcbsm8s5rgfep.png)
 
This is what will be added inside your string

![string](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t71cti44r164875gquen.png)
 
You can do the same thing with the padRight.

## 3) .shuffle()
It is sometimes useful to randomize items inside the list

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

For this you can use the shuffle and you can see that everything is now randomized.
![ran](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uyy7xxelvi73opb81t3n.png)
 

## 4) String Multiplication
It is possible to use string multiplication with dart.

This example will print x times your string.
![String Multiplication](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jfvev84do9ekab8n9ws9.png)
 

## 5) .toSet()
If you have a list of repeated items.

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

You can use the `.toSet()` to remove all the duplicates and this is the final result.

![res](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xwmrr6a93movoi9xlfu.png)
EXPO vs CLI, Which is preferrable for building ReactNative Mobile Apps
Tags: reactnative, javascript, react, expo
Published: 2022-07-27 16:41:46

**Background :: **

I am a FullStack javascript developer and i'm trying to maximise the application of javascript to every area of interest, from web(frontend & Backend), desktop and mobile application development and also TV apps in the future.  

I Currently build web applications frontend and backend using Javascript, but i need to extend it to mobile devices because of this one issue. i used ionic in the past, but my love for react has made me adapt all my applications to the react-application structure. 

**Problem **
I need your opinions on which is better with reasons, i tried Expo a while ago, and it had tons of advantages, but a lot of issues while building and running the application.

Even when i ran into certain issues i went online and most developers couldn't provide resources for all the issues mentioned, so i resorted to not using it except it had been fully proven. 

I also saw opinions of other developers saying CLI is a bit cumbersome with its processes but most of the issues are based on the advantages when using Expo. 

I need opinions from other developers on the WHY's if there's any of whether EXPO is better and if i should resort to it, or if CLI is better and if i should remain there.
Avoiding large ternary operator statements in React
Tags: javascript, react
Published: 2022-07-27 16:22:37

---
title: 'Avoiding large ternary operator statements in React'
date: '07-27.2022'
tags: ['javascript', 'react']
published: true
summary: 'How to avoid long ternary operator statements inside render methods by using React.Children and compound components pattern'
---

## Introducing the problem

Often when writing React applications, you are conditionally rendering some piece of UI based on some state.
This condition can be as simple as a binary boolean condition, or it can be a more complex ternary operator with multiple nested statements.

Let's imagine that we are calling an API using react-query and that we are displaying different UI depending on the API
call status.

```tsx
const Example = () => {
  const { data, status } = useQuery('users', fetchUsers)

  return (
    <Page>
      {status === 'loading' ? (
        <LoadingView />
      ) : status === 'error' ? (
        <ErrorView />
      ) : (
        <SuccessView data={data} />
      )}
    </Page>
  )
}
```

These kinds of conditions can get hard to read sometimes.

Leveraging compound components and `React.Children.map` function, we can write a cleaner solution by moving condition logic into a wrapper component.

```tsx
const Example = () => {
  const { data, status } = useQuery('users', fetchUsers)

  return (
    <Page.Wrapper status={status}>
      <Page.Loading>
        <LoadingView />
      </Page.Loading>
      <Page.Error>
        <ErrorView />
      </Page.Error>
      <Page.Success>
        <SuccessView data={data} />
      </Page.Success>
    </Page.Wrapper>
  )
}
```

## Page component implementation

```tsx
const PageWrapper = ({ children, status }) => {
  const renderChildren = useCallback(() => {
    return React.Children.map(children, (child) => {
      if (child?.type === Page.Loading && status === 'loading') {
        return child
      }
      if (child?.type === Page.Success && status === 'success') {
        return child
      }
      if (child?.type === Page.Error && status === 'error') {
        return child
      }
      return null
    })
  }, [children, status])

  return <>{renderChildren()}</>
}

export const Page = {
  Wrapper: PageWrapper,
  Loading: ({ children }) => children,
  Success: ({ children }) => children,
  Error: ({ children }) => children,
}
```

Originally published at: https://www.danilothedev.com/blog/avoiding-large-ternary-statements-in-react
Dart Stream の使い方
Tags: dart, stream, async
Published: 2022-07-27 16:17:41


## Stream とは？

https://dart.dev/tutorials/language/streams

公式サイトにはこう書いてある。

* 非同期の一連の実行
* `await for` か `listen()` を使うことで Stream を使える
* Error も出せる
* 単一契約と放送の 2 種類の Stream がある。

## サンプルをうごかしてみる

```dart
Future<int> sumStream(Stream<int> stream) async {
  var sum = 0;
  await for (final value in stream) {
    sum += value;
  }
  return sum;
}
```

Future (関数の型？) で steam の中身を足し続ける？
関数をmain から実行してみると

```dart
void main() async {
  sumStream(10)
}
```

```php
Error: The argument type 'int' can't be assigned to the parameter type 'Stream<int>'.
 - 'Stream' is from 'dart:async'.
  sumStream(10)
            ^
Error: Compilation failed.
```

stream でないと受け付けないと出る。

TS のように型さえつければよいのかと
Stream + int 型をつけて
それを引数に渡して実行してみる

```dart
  var: Stream<int> number = 10;
```

しかし、Stream 型で 変数を定義することはできなかった。


---

## StreamController を作ってみる

https://qiita.com/JunichiHashimoto/items/7ca7ec6cd2c9af0714eb

調べると、StreamController を使って変数を作り
その中に sink で中身を入れて
stream で中身を取り出すらしい。

```dart
import 'dart:async';

main() {
  final controller = StreamController();
  controller.sink.add(1);
  controller.sink.add(2);
  controller.sink.add("Tidus");

    
  controller.stream.listen((value){
    print(value);
  });
}
```

```php
1
2
Tidus
```

DartPad で動作確認ができた。

dart:async を import することで
StreamController は使えるようになって

これは Stream なので、変数なのにドンドン追加することができて
型は何でも入るらしい。

そして、steam.listen すると入れた順番で出力してくれる。
このように解釈できた。

## 非同期関数処理をみてみる

https://qiita.com/JunichiHashimoto/items/7ca7ec6cd2c9af0714eb#stream%E3%82%92%E8%BF%94%E3%81%99%E9%96%A2%E6%95%B0%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B

同じ記事で非同期関数処理の説明をみると

関数に async* をつけると普通の int で取った引数を返り値として Stream に変更できて

無印の async をつけると Stream で受けとった引数を Feature  の返り値として扱える

と解釈できる。

---

## まとめ

StreamController を使えばなんでも入る Stream の変数をつくれる。

Stream の変数には sink で追加できる

Stream の変数に listen を打つと中身を全て吐き出す

非同期で Stream を受け取る Future 関数を async で作ると、普通の int や string の変数を渡しても動かない。

int や string の変数を Stream に変換する Future 関数を async* で作ると int や string で受け取って Stream に変換できる中間パイプの注ぎ口が作れる。
So you want to implement a visitor/viewer count without crashing your server?
Tags: javascript, webdev, beginners, programming
Published: 2022-07-27 16:05:10


Ashmeet will show you how on this weeks Pusher hAPI Hour! 

Join us on Twitch now!

📺 https://twitch.tv/pusherdev 

Spoiler: there will be pandas 🐼
tsParticles React and Vue packages are changing!
Tags: javascript, react, vue, webdev
Published: 2022-07-27 15:52:00

## Changing? Why?

Starting from today the official tsParticles React.js and Vue.js (2.x and 3.x) packages have a new name.

Don't worry, the previous packages are still maintained and updated, until tsParticles version 3.x, but that's another story.

So what has changed?

## React.js

`react-tsparticles` becomes `react-particles`, same version (starting from `2.1.3`, the latest version that you should use 👀), you can just remove the `ts` from the package and you're done.

## Vue.js

### 2.x

`particles.vue` becomes `vue2-particles`, one major version down. If you are using the version `3.1.3` (the latest, and I really hope you are using this 👀), you have to downgrade that version to `2.1.3` (so it's the exact version of `tsParticles`)

`particles.vue` had a major version change when tsParticles was still in `v1` because of a major change.
Since `vue2-particles` is a fresh package, I decided to keep its version aligned with the main package.

### 3.x

`particles.vue3` becomes `vue3-particles`, same version (starting from 2.0.3, but I recommend using always the latest version, at the moment is 2.1.3). 

## Recap

A small recap to be clear in few lines:

`react-tsparticles` -> `react-particles`, starting from `2.1.3`, no different version numbers

`particles.vue` -> `vue2-particles`, starting from `3.0.3`/`2.0.3`, they'll have a different major version, but they share the same code

`particles.vue3` -> `vue3-particles`, starting form `2.0.3`, no different version numbers

A migration is really suggested, since the "old" packages could become obsolete in the future.

## Another thing...

I've launched the tsParticles official sub reddit here: https://www.reddit.com/r/tsParticles

You can also see a full list of tsParticles official components here

{% reddit https://www.reddit.com/r/tsParticles/comments/w9hjoj/all_tsparticles_official_components/ %}

---

{% github matteobruni/tsparticles %}
☁ Kubernetes is awesome. And we automated it further.
Tags: webdev, devops, cloudnative, productivity
Published: 2022-07-27 15:49:00

Kubernetes is one of our very loved open sourced applications. I believe a lot more developers out there benefits from Kubernetes in their automated deployment, scaling, and management of containerized applications. So do we.

Inspired by Kubernetes, we've created Tin out of scratch and ... Tada, we made the whole deployment process TONs easier without much hassle coding.

To grasp what Tin might be, it is a SaaS cloud service that generates executable applications instantly **without manual environment configuration**. Users can run projects directly in the cloud.

I've created a short tutorial on **How Tin Clones and Runs Jenkins Server**:

1) Check out the clone link for Jenkins Server: https://www.teamcode.com/tin/clone?applicationId=270270854740733952
You can sign up for an account to clone the Tin application to your workspace.


2) Name your application and clone it to your workspace.

![Clone Jenkins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s3u48ei698d5fskeflrs.png)

3) Click on "RUN NOW" to initiate the application.

> **Note:** Free monthly quotas will be available for new users. After using up all the free trial quota, the Tin app will stop working automatically. You will not be charged for the whole process. 

![Run Application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv3iu1cua7cp33x2gy04.png)

4) Click on the "Endpoint" on the left panel and access Jenkins from the public network.

![Access to Jenkins through Public Network in Endpoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rj9w3q7u6u2l891ui9z8.png)

5) Jenkins would now be able to log in.

![Jenkins Deployment Successful](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qisdpec27o3mw6orfj0f.png)

Beside cloning from an available resource, developers could also build their very own projects from Git or Docker repositories.
Build custom apps using Google Sheets
Tags: nocode, webdev, react, typescript
Published: 2022-07-27 15:43:00

[Frontly](https://www.frontlyapp.com/) is a no-code automation tool that you can use to create and launch custom apps in minutes with only a Google Sheet and absolutely no-code required. Whether you're a business owner or work in sales, marketing, IT, real estate, etc., Frontly lets you build a powerful app with all the features you need with just Google Sheets as the backend. Using our pre-designed components, design your interface and connect to your data in minutes.


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

Give your employees and clients a secure login to view and edit only the data you want them to access, without giving access to your spreadsheet. Pull data from multiple sheets into one page or app.

The best way to start reaping the benefits of no-code automation is to [try Frontly for free](https://www.frontlyapp.com/). 🚀
5 Top Open-source features and API for embedded systems and edge
Tags: opensource, microservices, api, luos
Published: 2022-07-27 15:37:47

Open source has opened the gate to a new way of thinking in the embedded domain. Breaking away from the monolithic vision to focus on microservices is a choice that has many advantages.

Let's talk about 5 top open sources features and APIs for embedded systems and edge!

⏩ https://www.luos.io/blog/5-top-open-source-features-and-api-for-embedded-systems-and-edge
Is Web designer same as Web developer?
Published: 2022-07-27 15:34:00


As a beginner to programming one would fall in a confused state of web development and web designing. Most of the people think both are similar to each other, But the answer is **NO**. Web designing is completely different from web development.

**<u>Web Designing:</u>**
                 Web designer is the graphic artist who design the layout of the web page like how the webpage look, when the heading, sections, buttons should be placed. It is basically creating the visual appearance of the website, just like architect of web site. These persons must be familiar with Figma, Adobe photoshop, Adobe XD, Typography, Color Theory etc; 

**<u>Web Development:</u>**
                 Web developer is the person who actually builds the website and maintains it. If we compare with building construction web developer is the civil engineer of the website who develops the working model of website in which he develops the button functionality, dynamic content representation etc; He is also responsible for the site's technical aspects, such as its performance and capacity, which are measures of a website's speed and how much traffic the site can handle.

**Can a web designer also be a web developer?**
               **Yes**, Web designer can also be a web developer. Web design and web development are equally important and closely connected aspects of the website creation process. This is why web designers and web developers often share similar abilities and skills, including 3D graphics design and proficiency in HTML/CSS and JavaScript languages.

Share your thoughts on scope and career as a web developer or designer..