teleren/devto huggingface dataset:
Performance Awareness
Tags: dotnet, programming, csharp
Published: 2023-01-09 01:13:44

When considering performance, what you have to care about is having a metric -usually- elapsed time from which you can notice change and identify time consuming data operations. This is something you want to do early in development even on prototypes as it will usually challenge your design overtime.

This will go from design to maintenance on the product cycle because you can always lose performance, so the key here is to measure again and again, without loosing focus on correctly interpreting the results which is as important as measuring in the first place.

A hard thing to grasp here is that performance has layers of complexity, programs are complex and run on even more complex hardware, on top of it you find abstractions (memory, caches, OS, runtimes, garbage collectors, etc). This can be overwhelming with so many thing to be measured plus tools that come along with it.

> What to measure and what relationship among measurements is important, setting goals through metrics.

## .NET Framework
The focus here will be .NET framework, so much of it just works, with .NET you have managed applications which are put on a safe operating environment between the application and the operating system, there is overhead by not having direct access to Windows APIs nor direct access to the processor.
Having this safe net on your program is good but not free, enables you rapid development which most times derives on poor code resulting on slow bloated applications.

Is always easier to just blame the framework for all problems, performant code does not come easy, that's for sure.

Big changes on your code base are always easier to introduce in the form of a design decision due to experimentation rather than trying to change your application when is already big and complex where dependencies have to be take into account.

## FYI
I will try to keep things balanced on how I will approach .NET framework details and IL on the other side, so our focus will be on how to benefit from the .NET framework but also recognize and know when you have to sacrifice so call benefits of .NET as well.

What you get out of your application, making the most of it comes from deep understanding of your own code, the framework, the OS and most important the hardware itself.
React & TypeScript: What is ReactNode and when to use it?
Tags: typescript, react, tutorial, beginners
Published: 2023-01-09 00:56:30

In ReactJS with TypeScript, ReactNode is a type that represents a React element, an array of React elements, or a string, number, or boolean. It is defined in the react module and can be used to specify the type of a variable that can hold any of these types.

Here is an example of how ReactNode can be used in a functional component with TypeScript:

```react
import React, { ReactNode } from 'react';

function MyComponent(props: { children: ReactNode }) {
  return <div>{props.children}</div>;
}
```
In this example, the children prop of the MyComponent function is declared as type ReactNode, which means that it can hold any React element, an array of React elements, or a string, number, or boolean.

ReactNode is useful when you want to specify that a prop or variable can hold any type of content that can be rendered by React, but you don't want to specify a more specific type. For example, you might use ReactNode when you want to allow a prop to hold a string, a number, an element, or an array of elements.

It is important to note that ReactNode does not include the null or undefined values, so if you want to allow these values, you will need to use the React.ReactNode type instead of just ReactNode.
[Want to learn more about React with Typescript ](https://dev.to/elhamnajeebullah/react-typescript-jsxelement-vs-reactelement-and-which-one-to-use-it-with-functional-component-2oa6)

Have any question, please leave a comment.
Where do I even begin?
Tags: gamedev, beginners, writing
Published: 2023-01-09 00:36:42

## What's [Playdate](https://play.date/)?
It's a tiny handheld game system with a bunch of brand new games.

{% embed https://youtu.be/HdF3CnFvxg4 %}

## Why make games?
- To practice prototyping
- To practice design
- To practice coding
- To share
- To have fun

## Why make games for Playdate?
- The constraints: black-and-white screen, six buttons
- The opportunity: the nifty crank on the side
- The accessible tools: [Pulp](https://play.date/pulp/), [SDK](https://download.panic.com/playdate_sdk/PlaydateSDK-latest.zip), [budding community](https://devforum.play.date/)

## Links for my future self and all of you
- [Playdate Developer homepage](https://play.date/dev/)
- [pulp browser game maker](https://play.date/signin/?next=/pulp/)
- [Playdate Developer forum](https://devforum.play.date/c/pulp/46)
- [Itch.io games tagged `Playdate`](https://itch.io/games/tag-playdate)
- [Other useful links for Playdate development](https://play.date/dev/links/)

## Why write this series?
- I have always wanted to make a game
- I have a 3 1/2 year old son for/with whom I am excited to make games
- [Until recently](https://dev.to/rmion/series/16285), I haven't had the confidence to program one myself
- Prior to Playdate, I haven't had an accessible platform with which to build, test and publish a game
- I love to write about my ideas, my progress, my mistakes and my successes
- I hope someone will find this series one day and feel encouraged to design, code and build games - maybe for Playdate, maybe for another gaming device

Next up, playing with [Pulp](https://play.date/pulp/)!
🚀Top 9+ Node.js Templates and Dashboards to Boost Your Workflow🚀
Tags: webdev, opensource, react, flatlogic
Published: 2023-01-09 00:23:01

✨ If you're looking to save time and energy while building rapid, scalable backend and networking applications, then Node.js is the way to go! This open-source, cross-platform runtime environment is based on the V8 JavaScript engine and boasts an event-driven, non-blocking I/O architecture. Plus, it's well-suited for real-time applications and provides a ton of features, including:

👉 Lightweight design: easy for novice developers to learn and use
👉 Scalability: capable of handling a huge number of concurrent connections
👉 High performance: non-blocking execution of threads makes it fast and efficient
👉 A vast collection of open-source packages (over a million in the npm ecosystem)
👉 Multi-platform support: can be used to create SaaS sites, desktop apps, and mobile apps
👉 Maintainability: frontend and backend can be managed using JavaScript

✨  Why start from scratch when you can use a pre-designed template and get started right away? 

✨ Check out these top Node.js templates and dashboards:

👉 [Sofia React NodeJS](https://flatlogic.com/templates/sofia-react-nodejs): a full-featured template with useful components and elements, plus integration with a backend and database.
👉 [Sing App Vue NodeJS](https://flatlogic.com/templates/sing-app-vue-node-js): a complete "frontend + backend" template with log-in methods, authentication, and product management pages already integrated.
👉 [Flatlogic One React NodeJS](https://flatlogic.com/templates/one-react-nodejs): a starting point for building SAAS, CMS, and eCommerce applications, with integration with a NodeJS backend and PostgreSQL database. Try out 30% OFF with discount code APP_NOW 🤯

✨ Get your project up and running in no time with these [Node.js templates and dashboards](https://flatlogic.com/blog/top-node-js-templates/
)!
Removing complexity with container size queries
Tags: css, webdev, responsive, tutorial
Published: 2023-01-09 00:21:01

📦 Container Size Queries in CSS are exceptionally helpful when building dashboards. Especially when they are user configurable. Imagine a scenario where the same component can be placed multiple times, displaying different information and having different column-span settings. Or just being used in the sidebar as well as in the main content area depending on the page.

Here we use the same component in two different places with different column-span. They show us information in different formats:

{% embed https://stackblitz.com/edit/typescript-8ew4k7?embed=1&file=style.css&hideExplorer=1&hideNavigation=1&view=preview %}

Try it out by opening it in a new tab and resizing. It is the exact same component. Of course as a simplified version of a real component in a project.

Up until now, with media queries, we could not have solved this easily. Our styling would apply to all instances of the component on the page equally and could not handle sizing dependent on placement. This would require complex classes that get set or removed and would trigger mobile styling earlier on larger uses..

✅ Lets use a container query and also define the container type. Figuring out where to set a container type like `container-type: inline-size` can be a challenge when creating the component.  
Be careful, as you can not put a container query on the same element you apply the container type to.

```css
.item {
  background-color: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-elevation-medium);
  container-type: inline-size;
}

@container (min-width: 400px) {
  .shipping__line {
    flex-wrap: wrap;
    border: 2px solid #f1cffc;
    border-radius: 6px;
    padding: 1rem;
    gap: 1rem;
    text-align: center;
  }
}
```

Extending this a little bit more we can easily build our multi-use dashboard components – and not worry about device size & adding and removing complex extra classes.

There is also the possiblity to use **style queries** in addition, to offer even more flexiblity to the user without much effort. [Ahmad Shadeed](https://ishadeed.com/article/css-container-style-queries/) has written a fantastic article on that with quite a lot of use cases and examples.

Have you used container queries already or are planning to?
You can find me on [twitter here](https://twitter.com/mojitane/status/1612155035311570945) or on my [blog here](https://www.moji.blog/)
FOSS Spotlight: 📺 Jellyfin
Tags: opensource, csharp, homelab
Published: 2023-01-09 00:17:47

Jellyfin is a well known self-hosted media system and server. It looks great, manages your playlists and makes your media available for watching, listening and reading on the go.

[Jellyfin](https://jellyfin.org) ([code](https://github.com/jellyfin/jellyfin)) makes self-hosted media serving easy. It looks great and manages and serves your media playlist:

![Screenshot of Jellyfin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3yb8lfp7xjtubkpu5ix3.jpg)

Jellyfin is a favorite of self-hosters and people who people with large media libraries that they want to make available on the go.

Jellyfin is available in many different languages and runs on most operating systems (especially when they're equipped with docker) quite easily. There's also [extensive documentation](https://jellyfin.org/docs) to get you started using it.


## Running Jellyfin

Jellyfin is quite docker friendly (the container documentation is where you should start), with an official image ready for use:

```
docker run -d \
   --name jellyfin \
   --user uid:gid \
   --net=host \
   --volume /path/to/config:/config \ # Alternatively --volume jellyfin-config:/config
   --volume /path/to/cache:/cache \ # Alternatively --volume jellyfin-cache:/cache
   --mount type=bind,source=/path/to/media,target=/media \
   --restart=unless-stopped \
   jellyfin/jellyfin
```
React & TypeScript: JSX.Element Vs ReactElement and Which one to use it with functional component.
Tags: typescript, react, beginners, webdev
Published: 2023-01-09 00:07:12

In ReactJS with TypeScript, the return type of a functional component can be specified as either JSX.Element or ReactElement.

JSX.Element is a type alias for a JSX element. JSX is a syntax extension for JavaScript that allows you to write HTML-like code in your JavaScript files. It is a way of representing the structure of a user interface in the form of a tree of nested elements, with each element representing a component.

Here is an example of a functional component with a return type of JSX.Element:

```react
import React from 'react';

function MyComponent(): JSX.Element {
  return <div>Hello, world!</div>;
}
```

ReactElement is a type defined in the react module. It represents a virtual DOM element, which is an object that represents a DOM element and can be passed to the ReactDOM.render function to be rendered to the actual DOM.

And here is an example of a functional component with a return type of ReactElement:

```react
import React from 'react';

function MyComponent(): React.ReactElement {
  return <div>Hello, world!</div>;
}
```

In practice, there is not much difference between the two types, as a JSX element will be compiled to a ReactElement when the code is transpiled. However, using JSX.Element as the return type of a functional component specifies that the component should return a JSX element, while using ReactElement specifies that the component should return a virtual DOM element.

In general, it is recommended to use JSX.Element as the return type for functional components, as it is more semantically meaningful and easier to understand. However, either type is acceptable, and the choice will depend on the context and the specific requirements of your code.

Have any question, please leave a comment.
5 Skills to look for when hiring .NET Core Developer for your Enterprise REST API Project
Tags: outsourcing
Published: 2023-01-12 01:45:51

---
title: 5 Skills to look for when hiring .NET Core Developer for your Enterprise REST API Project
published: true
date: 2023-01-09 00:00:00 UTC
tags: Outsourcing,Outsourcing
canonical_url: https://plakhlani.in/outsourcing/Enterprise-REST-API-Skills/
---

Are planning to start your [Enterprise REST API](https://www.faciletechnolab.com/software-development-technology/dot-net-core-rest-api-development) project in .NET Core in 2023? If yes, we recommend you consider checking these 5 most important skills when you [hire your .NET Core Developers or Team](https://www.faciletechnolab.com/software-development-technology/microsoft-dotnet-or-dotnetcore-development).

## 1. Communication 📱

Good written and verbal communication skills will be needed for requirement understanding, asking questions, reporting status and interacting with other team members.

## 2. RESTful API best practices 📃

Understanding and following RESTFul API best practices will make your APIs consistent and obvious to the consumers. Developers knowing these practices will do things in right way the very first time.

## 3. Securing APIs 🔐

Good understanding of how to secure the APIs is the must have skills not only for a REST API developer but any developer as you must implement security best practices from day 1 of your development.

## 4. Documentation 🗄

Understanding of Open API and automated documentation like Swagger will help create documentation that will reduce huge amount of friction between back-end and front-end teams.

## 5. Testing 🧪

Writing **unit tests** are most important as it will repay once you grow over the period of time. Developer with good understanding of how to write minimal and proper unit tests will be an asset to the team.

## Conclusion

[Enterprise REST API](https://www.faciletechnolab.com/software-development-technology/dot-net-core-rest-api-development) development team requires many other skills, frameworks, tools, best practices, guidelines to make it successful.

> ### Looking to build your Enterprise REST API development strategy?
> 
> [**Connect with me**](%22mailto:lakhlaniprashant+inquiry@gmail.com%22) to get better clarity on your Enterprise REST API Development Strategy!

Subscribe to get latest updates on [Enterprise REST API](https://www.faciletechnolab.com/software-development-technology/dot-net-core-rest-api-development) development related topics right in your inbox.
Questions on Week1 HW
Published: 2023-01-08 23:38:26

1. When trying to simplify our routes, I received an error when creating a new movie. In the controller, we show the "movies/new" template if the movie does not satisfy the requirements (i.e. that there is a title/description). However, when I use `render template: "new"`, I am met with errors when a movie without a title is submitted. If I replace it with `render template: "movies/new"`, or if I say `render "new"`there is no error. Why is the "movies" not implied in the case where I render a template?

- Answer: `render template:` requires the full path (i.e. `movies/new`) whereas `render` is a shortcut that uses the directory corresponding to the controller

2. We learned to replace anchor links with link_to elements. One of our links is an option to delete the movie, and part of the element is `data-method="delete"`. How do we include that in the syntax for the link_to replacement?

- Answer: `<%= link_to "Delete movie", movie_path(@movie), method: :delete %>`
Mark of the web remover
Tags: csharp, dotnet
Published: 2023-01-08 23:32:57

# Mark of the web remover

A utility to remove `mark of the web` from a folder recursively to all sub-folders.

If after downloading and un-zipping a archive file with perhaps a Visual Studio solution the files extracted may have been blocked, with this utility close Visual Studio, run this utility on the folder than re-open Visual Studio.

Current arguments (change to suite your environment)

**Base code**

```csharp
public static void UnblockFiles(string folderName)
{
    if (!Directory.Exists(folderName))
    {
        return ;
    }

    var start = new ProcessStartInfo
    {
        FileName = "powershell.exe",
        RedirectStandardOutput = true,
        Arguments = $"Get-ChildItem -Path '{folderName}' -Recurse | Unblock-File",
        CreateNoWindow = true, 
        UseShellExecute = false
    };

    using var process = Process.Start(start);
    process.WaitForExit();
}
```



##  Tool

Without this tool a developer must right click on each and every file, go to properties and un-check mark of the web and click apply or write a PowerShell script (this tool uses PowerShell).

The only drawback is perhaps forgetting the tool name which is easy here. From a command window or PowerShell window type `dotnet tool list --global` and press <kbd>enter</kbd>.


![screen shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dn5fbgecfn0fcthfnbi.png)

After the tool runs all files that may had mark of the web are devoid of mark of the web including all sub-folders.

### Install/uninstall

```
dotnet tool install --global --add-source ./nupkg MarkOfTheWeb
dotnet tool uninstall -g MarkOfTheWeb
```

#### Run without arguments


![screen shot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gfjm070wihgx9nz29uja.png)


#### Run with arguments

Here a .zip file was downloaded and files extracted which at that point several files had mark of the web.


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


# Install from Nuget

```
dotnet tool install --global MarkOfTheWeb --version 1.0.1
```

# Full source

See the following [GitHub repository](https://github.com/karenpayneoregon/console-apps/tree/master/MarkOfTheWeb).

# PowerShell

For those who want to run in a terminal

```ps
dir -Path [directory path] -Recurse | Unblock-File
Get-ChildItem -Path '[directory path]' -Recurse | Unblock-File
```
Programação Funcional com JavaScript
Tags: functional, programming, javascript, beginners
Published: 2023-01-08 23:26:06

_> Esse post é baseado nas minhas anotações do vídeo de introdução a programação funcional com JavaScript do canal **Fun Fun Function** [Clique aqui!](https://www.youtube.com/watch?v=BMUiFMZr7vk&list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84&index=1) para ver._


**Por que programar com JavaScript Funcional**

Com a programação funcional somos capazes de escrever programas com menos bugs e em menos tempo, por ser um código de fácil interpretação ele produz menos bugs, do mesmo modo, como podemos reaproveitar muito código então gastamos menos tempo. No JavaScript e em outras linguagens de programação, **funções são valores** como podemos ver a seguir:

- **Basic Functions:**
```` js
var triple = function triple (x) {

  return x * 3

} 
```
<p>Assim como strings, funções podem ser atribuidas à variáveis, ou passadas para outras funções, que são conhecidas como High-Order Functions. Mas no que essas funções são boas? Composição o fato de que nós podemos pegar uma função e colocá-la em outra função, nos permite compor várias funções menores em funções maiores. </p>
- **High-Order Functions:**
 ```` js
 var animals = [

  { name: 'Fluffykins', species: 'rabbit' },

  { name: 'Caro', species: 'dog' },

  { name: 'Hamilton', species: 'dog' },

  { name: 'Harold', species: 'fish' },

  { name: 'Ursula', species: 'cat' },

  { name: 'Jimmy', species: 'fish' }

] 

// Método filter (High-order Function)
var dogs = animals.filter(function(animal) {
return animal.species == 'dog'
})

// Filter com loop for
var dogs = []
for(var i = 0; i < animals.length; i++) {
if (animals[i].species === 'dog')
	dogs.push(animals[i])
}

```
<p>Podemos ver que com o método filter usamos bem menos código, mas isso não é apenas pela sintaxe visualmente curta, é porque na verdade estamos realmente escrevendo menos código e lógica. 
A razão pela qual precisamos de menos lógica é porque quando nós escrevemos nosso software em funções pequenas e simples  elas podem ser integradas . O que nos permite reutilizar em diversos lugares no nosso código.</p>
```` js
var isDog = function (animal) {
return animal.species === 'dogs'
}

var dogs = animals.filter(isDog)
var otherAnimals = animals.reject(isDog)
```
<p>Como podemos ver, ao separarmos a função de callback, é possível criar um componente reutilizavel em outras high-order functions como no caso do <code>reject</code>  que é o contrário do <code>filter</code>
Comparando isso ao loop <code>for</code> podemos ver que nós quebramos o problema de forma muito limpa em problemas separados.
Dessa forma somos capazes de pensar, interpretar e corrigir esses problemas separadamente. E isso é muito mais fácil do que quando as soluções estão todas misturadas iguais no loop <code>for</code>. Isso significa que podemos escrever códigos com menos bugs em menos tempo.  </p>