teleren/devto huggingface dataset:
[Video] High-performance and compile-time logging source generation in .NET 6
Tags: csharp, dotnet, aspnetcore
Published: 2021-11-21 16:59:13

---
title: [Video] High-performance and compile-time logging source generation in .NET 6
published: true
date: 2021-11-21 16:30:00 UTC
tags: csharp,dotnet,aspnetcore
canonical_url: https://blog.codingmilitia.com/2021/11/21/high-performance-and-compile-time-source-generation-dotnet-6/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/660oururiztyn6mgle5k.jpg
---

Hey folks!

Quick little video about an interesting new logging related feature coming in .NET 6, compile-time logging source generation, as well as related high-performance logging features, which were already present but probably not very well known.

{% youtube uh0ZL-NBJYw %}

Here come a bunch of related links:

- [GitHub repository](https://github.com/joaofbantunes/CompileTimeLoggingSourceGenerationSample)
- [Compile-time logging source generation](https://docs.microsoft.com/en-us/dotnet/core/extensions/logger-message-generator)
- [High-performance logging with LoggerMessage in ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/fundamentals/logging/loggermessage?view=aspnetcore-6.0)
- [Andrew Lock’s awesome post: Improving logging performance with source generators](https://dev.to/andrewlocknet/improving-logging-performance-with-source-generators-exploring-net-core-6-part-8-1lg4-temp-slug-296477)

Thanks for stopping by, cyaz!
Vue 3: Options API vs Composition API
Tags: javascript, vue
Published: 2021-11-21 16:16:55

I used to use Vue to create my FrontEnds and, after one year and a half without using it, I'm re-learning it.

The first thing that hit me, was that Vue 3 finally was a reality. I used the 2nd version, now I'm learning the 3rd.

Right now I'm learning about the Composition API and I have a few questions that I would like to solve by Vue3 users:

1) Do you use Composition API in your day to day?
2) If yes, in which cases do you use Composition API? In which ones, the Options API?
3) What are the drawbacks of the Composition API over Options? And benefits?
WhatsApp Clone MasterClass using WebSockets,PHP,MySQL
Tags: php, webdev, tutorial, websockets
Published: 2021-11-21 16:09:41

In this video,I am going to walk you through what we are going to create.

{% youtube TipxFQGn2_A %}

Wanted to build your own REAL TIME messaging system just like  whatsapp and don't know where to start from? Don’t worry, this Course will show you step by step how to create your own WhatsApp clone using WebSockets,PHP and MySQL. Yes, we will be using websockets in PHP along with MySQL, Javascript.

It doesn't matter if you're a beginner or an experienced programmer, just you have to know the basics of PHP, MySQL, HTML ,CSS and JQuery.

This course will be greatly and highly beneficial to you. And by the end of this course you will be capable of creating your own real time messaging system Just like WhatsApp not only this you will also be more than competent with skills WebSockets , Ratchet, PHP, PDO, OOP, MySQL and jQuery.


You can highlight the site you create in this course, If anyone who sees this project in your portfolio might want to hire you because from this course you will gain skills which help you to understand the main concept used in the Real Time Communication system. So get the ULTIMATE guide to create a REAL TIME Chat Application Like WhatsApp Using Websockets and PHP.

Who this course is for:
Beginner PHP developer curious about Real Time Communication
Beginner PHP developer curious about WebSockets
Beginner who wants to learn to create Real-Time chat application
New to Java, my journey so far...
Tags: java, programming, webdev
Published: 2021-11-21 16:06:13

# Introduction
Talked to few senior backend engineers before my dive into Java. One valuable suggestion was to learn `Class`, `Abstract class` and `Interface`. Some of good articles are:
- [Designing with interfaces](https://www.infoworld.com/article/2076841/designing-with-interfaces.html)
- [ICU Internationalization (i18n)](https://phrase.com/blog/posts/guide-to-the-icu-message-format/)
19th weekly post, tracking and kerning. Also, mock integration.
Tags: typography, aws, serverless
Published: 2021-11-21 15:59:44

## Items of the week

- **Typography** - it affects first impressions because even when users don't read copy, they scan it. Approaches to adjust spacing between characters include tracking (horizontal spaces between words) and kerning (spaces between two individual letters). [UX Planet has a UI typography beginner guide that explains these and more](https://uxplanet.org/typography-in-ui-guide-for-beginners-7ee9bdbc4833).

- **AWS API Gateway** - we can utilise mock integration to generate a response without integrating with any other services, got this from chapter 7 of [Serverless Architectures on AWS](https://www.goodreads.com/en/book/show/29970427).

- **On the week 46 of 2021**, we saw the beta release of Serverless framework version 3, there were a lot of highlights on the new CLI but it's also noteworthy that many features deprecated in version 2 are not removed. More information available on the [announcement blog post](https://www.serverless.com/blog/serverless-framework-v3-beta).

This is a weekly bite-sized post on web app development from JavaScript to UX and technology in general. Thank you for reading and have a nice day!
Open Source powered snippets archive!
Tags: opensource, showdev, programming
Published: 2021-11-21 15:53:21

We've always relied on a lot of sources to fabricate our code. So, me and an awesome open-source powered team of programming enthusiasts created a website called [codes](https://codes.snowflakedev.org/).
Our main motive was to compete in the [hackoctoberfest](https://hacktoberfest.digitalocean.com/) but at the same time, to create a snippets archive that was contributed by the open source community.

The website is pretty much a trademark of our organisation ![cool website](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rlmqowjktg8q6auenw73.png)

We've let everyone contribute, in any language they possibly wish & I just mentioned this because you might see the ![hell_world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c887plwmfrf7lk4ojg8r.png)

We've also let people do contributions like a whole express application, and if you're curious how we rendered it, I'll tell you that in simple terms **we just didnt**. 

A simple `ISDIR` and we redirected the user to the directory in the github repository.
  
Thanks to [`react-syntax-highlighter`](https://google.com) and a group of talented individuals we were able to render each language's syntax with ease.
![syntax](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x8f65hqeh4fb94j4lwyc.png)

In about a month's time we have around a 100 contributors, 138 forks and 56 stars, which is awesome!
![contributors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjtqwh0wp2swpt68xb4w.png)

And thanks to the awesome contributors we had over **200** snippets by the end of the month.
 
The power of open source is just incredible 🚀!

[You go contribute to it now!](https://github.com/DevSnowflake/code-examples)
Or [star](https://github.com/DevSnowflake/code-examples) the project! Helps a lot!
Simple and Fun Sinatra Project
Tags: ruby, sinatra, programming, rails
Published: 2021-11-21 15:38:24

My Weather BE  Sinatra Project

As I like weather Stuff, my Sinatra project was an extension and improvement of my CLI Project. I kept working in refactoring the code and also adding some cool API's. 

The scope was to create a good user experience and great look. So the app allows you to check the weather at your location and find and update to any other location in the world. Also give you News of the day and a gallery of photos from the city you are connected. Once you Sign in and create an account you will be able to add different locations, modify and also delete them. 

[Check it out](https://github.com/JcBonassin/Weather_real) and have a look at the code. It might be fun.

![Screenshot 2021-04-06 at 08 47 56](https://user-images.githubusercontent.com/72950188/122404437-d862a000-cf44-11eb-94fa-24f94010aaac.png)

What I learn: 

- APIs are fun to work with and also a great source of interesting data. 
- You can add some JS script if you dare to improve the user experience.
- Sinatra is simple to use and friendly. It was hard to find a lot of info online though. 
- It is kind of cool to work out of your comfort zone and add new stuff like JS. It will help you for your future projects.

Thanks for reading ..
Quovery- the worst behaviour from a company
Tags: aws, beginners, node, github
Published: 2021-11-21 15:37:42

Not a target post or something. Just sharing my experience which i faced today


https://discuss.qovery.com/t/hey-i-got-banned-from-discord-for-asking-help/819?u=why-serious-bro

https://github.com/Qovery/engine/issues/501#event-5649956303

https://te.legra.ph/file/552a969b196d60d80e802.jpg - screenshot of the issue i posted in thier GitHub and they deleted and banned me from thier too

Hey i got an account before i have created one using GitHub account. This is the account which i created, its been 2 months since i created it and for some unknown reasons i didnt came to quovery until 1 week back. I came and asked for help in discord to approve me as i have been waiting since week even after filling the forum which they gaved. So i came yesterday and asking help to login my account in quovery discord server and my comments are getting deleted and after asking why do i need to wait for weeks even if i have an account then some ambassador banned me without any notice 

Just because i questioned i got a bann even without doing anything bad. I just want JUSTICE. 

It seems they also deleted my posts in their forum and github too, they like a dictator

 I just want to use website for my bot which is not against any rules or terms of service but without helping me or telling me what to do some ambassador straight banned me

I dont know if that ambassador got any issues or got grudge. I just want JUSTICE its my right to use website if i didn't do ANYTHING wrong

people who faced my situation please share and also join me to help this UNJUSTICE which companies are doing once they reached some popularity
#iwantjustice #quovery
Leetcode grind - Remove duplicates from a sorted linked list
Tags: python, leetcode, codinginterview
Published: 2021-11-21 14:52:29

This one is pretty simple if there is just one duplicate, but if there are multiple, using just one pointer won't work, because we need to skip multiple duplicates.

Going on solution from z3r0gravity7 from here https://leetcode.com/problems/remove-duplicates-from-sorted-list/discuss/1589369/Python3-intuitive-O(n)-solution-with-seeking-pointer-faster-than-98-(with-explanation) ->
```
def deleteDuplicates(self, head: Optional[ListNode]) -> Optional[ListNode]:
        if head == None or head.next == None: # handle edge cases where linked list has no or one nodes
            return head
        
        p = head # initialize current node pointer
        while p.next: # until we have reached the last node (where next pointer is None)
            seek = p.next # seek pointer is initialized to the node after current node (guaranteed to be not None by while loop condition)
            while p.val == seek.val: # while the seeking pointer points to a duplicate of the current node
                seek = seek.next # keep seeking
                if seek == None: # if the seeking pointer has reached the end of the LL
                    p.next = None # then all nodes after the current node are duplicates, can truncate the LL after the current node
                    return head
             
			# the seeking node is at the first non-duplicate node (may not have moved at all, if there were no duplicates)
            p.next = seek # skip over all duplicate nodes (if any) by forwarding the next pointer of the current node to the seeked to node
            p = p.next
            
        return head
```
We can make it a bit more readable using suggestions from Elements of Programming interviews, and then we get:

```
    def deleteDuplicates(self, head: Optional[ListNode]) -> Optional[ListNode]:
        first = head
        
        while first:
            second = first.next
            while second and first.val == second.val:
                second = second.next
            # skip over all duplicate nodes
            first.next = second
            first = first.next
            
        return head
```
In the end it's kinda simple.

As usual it's really best to just work out the whole thing on paper, code will just get in the way.

I'm new to the grind, the hardest thing so far is to just stick to it.
This javascript code doesn't validate. And I would like to understand why !
Tags: javascript, beginners
Published: 2021-11-21 14:36:33

I am trying to understand why this Javascript code is not validating. And I'm turning in circles...

If someone can explain me ? Here is the code

```Javascript
function testAjax() {
    "use strict";

    /*jslint browser: true*/
    /*jslint devel: true*/

    var xhr = new XMLHttpRequest(),
        data = [],
        contenu = {},
        p = {},
        element = {},
        str = '',
        url = 'https://jsonplaceholder.typicode.com/users';

    function outputUsers(str) {
        data = JSON.parse(str);
        contenu = document.querySelector('#contenu');
        data.forEach(function (element) {
            p = document.createElement('p');
            p.textContent = element.id + ' ' + element.name;
            contenu.appendChild(p);
        });
    };

    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status === 200) {
                console.log(xhr.responseText);
                // document.getElementById('proprio').textContent = xhr.responseText;
                outputUsers(xhr.responseText);
            }

            if (xhr.status === 404) {
                console.log('File or resource not found');
            }
        }
    };

    xhr.open('get', url, true);
    xhr.send(null);

    console.log(xhr.readyState);

}
```

and here are the errors reported :


Sr	Line	Character	Description
1	23	6	Missing space between '}' and ';'.
};
2	11	9	Unused 'element'.
element = {},
3	12	9	Unused 'str'.
str = '',

Thanks for the help.
Visually Review HTML file changes introduced on a Pull Request with Comment Webpage Screenshot GitHub Action
Tags: actionshackathon21, github, python, opensource
Published: 2021-11-21 14:22:56


## My Workflow

Comment Webpage Screenshot is a GitHub Action that **captures screenshots of webpages** and **HTML files** located in the repository, uploads them to an Image Upload Service and **comments the screenshots** on the **pull request** that triggered the action.

This action helps maintainers **visually review** HTML file changes introduced on a Pull Request by adding comments with the screenshots of the latest HTML file changes on the Pull Request


## Submission Category: 

Maintainer Must-Haves

## Yaml File or Link to Code

Here are the links for Comment Webpage Screenshot

**GitHub repository:**

{% github https://github.com/saadmk11/comment-webpage-screenshot %}

**Marketplace:**
https://github.com/marketplace/actions/comment-webpage-screenshot


## Additional Resources / Info

### Example: Capture Screenshots for Static HTML Pages built with TailwindCSS

If your repository contains **only static files** and does **not require a server**. You can just put the **file path** of the **HTML files** you want to capture screenshot of.


In this Example I'll show you how I used `saadmk11/comment-website-screenshot` GitHub Action to Visually Review Static file Changes.

**WorkFlow:**

```yaml
name: Capture Webpage Screenshot

on:
  pull_request:
    types: [opened, synchronize]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Capture Webpage Screenshot
        uses: saadmk11/comment-website-screenshot@v0.5
        with:
          upload_to: github_branch
          # Capture Screenshots of Changed HTML Files
          capture_changed_html_files: yes
          # Comma separated paths to any other HTML File
          capture_html_file_paths: "index.html"
```

**Output Screenshot:**

![comment-webpage-screenshot Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f0hm2wu92ionitnrv0va.png)

**The HTML Template Shown in this Example was Taken from Tailwind UI**
Tailwind UI Provides Awesome Pre-Built TailwindCSS Components. Check them out here: https://tailwindui.com/

**Example Pull Request:** https://github.com/saadmk11/static-page-screenshot-demo/pull/2

**Demo Repository:**
{% github https://github.com/saadmk11/static-page-screenshot-demo %}


### Note

You can also use this for Dynamic Web Applications. See the [saadmk11/comment-webpage-screenshot](https://github.com/saadmk11/comment-webpage-screenshot) documentation for more examples.


## Conclusion

I think this action will be really helpful for Open Source Maintainers to provide quick reviews on UI changes. If anyone is interested please try [saadmk11/comment-webpage-screenshot](https://github.com/saadmk11/comment-webpage-screenshot) out and leave some feedback :)
How to use Preact with Astro
Tags: javascript, webdev, jamstack, react
Published: 2021-11-21 14:13:13

I recently tried to use Preact with Astro. Since I found no decent tutorial on how to use those two together, I decided to write one.

If you don't know [Astro](https://astro.build), you should definitely check it out. Astro is a new modern static site builder that allows us to use React/Preact, Svelte and Vue components all together, while shipping only the absolute necessary client-side JavaScript, using a technique called "Partial Hydration". That results in really fast sites with less JavaScript. They just released v0.21.0, which introduced a new, faster compiler written in Go a new build engine powered by Vite.

[Preact](https://preactjs.com) is a "Fast 3kB alternative to React with the same modern API". It's smaller than React but shares most of it's features (Hooks, Context), so you can write normal React code but benefit from better performance.

## So how can I use Preact components with Astro?

*The fastest way to do this, is to select Preact as your framework in the Astro CLI when you setup a new project. This tutorial presupposes that you want to add Preact to an existing Astro project.*

First you need to install a *renderer* for Preact, and the Preact library itself.

```bash
npm install --save-dev @astrojs/renderer-preact preact 
```

Then you need to add the just installed renderer to the Astro config file, astro.config.mjs. When you open it, the `renderers` property should be an empty Array. Add the `@astrojs/renderer-preact` package to the Array.

```javascript
renderers: ['@astrojs/renderer-preact']
```

That's all you need to setup Preact with Astro! 🎉

Now you can write your Preact components as .jsx or .tsx files and import them to your Astro pages.

For example, this is how you would write a simple Counter component in TypeScript (.tsx):

```javascript
// /src/components/Counter.tsx

import { useState } from 'preact/hooks'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div className='counter'>
      <button onClick={() => setCount(count - 1)} disabled={count === 0}>
        -
      </button>
      <h2>{count}</h2>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  )
}
```

You can import the component like this:

```jsx
---
// /src/pages/index.astro

import Counter from '../components/Counter.tsx'
---

<Counter client:load />
```

Tip: The `client:load` snippet you see above comes from Astro's Partial Hydration. If we leave this away, Astro would only render the components markup, without any interactivity, to ship less client-side JavaScript. You can learn more about Partial Hydration in the official [Astro Docs](https://docs.astro.build/core-concepts/component-hydration/)

Happy hacking!
Responsive Navbar Using HTML & CSS
Tags: html, javascript, webdev, beginners
Published: 2021-11-21 13:53:22

Hello,

How are you all I am writing this post after so long break. Today I Created a simple responsive header menu using HTML & CSS I hope you like this also comments about your thoughts. also For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you 🙂!

{% codepen https://codepen.io/NikhilBobade/pen/jOLyypp %}
Api for Instrumental background Music 
Tags: flutter, webdev, programming, android
Published: 2021-11-21 13:33:57

Hello we need a recommendation on the one application .

we are developing  and app like star maker for personal now its early stage idea .

can anyone know or suggest which api we can use for the sing a song with musical instrumental tune same as Star maker.


So any idea on this particular music api for the app . Spotify not used for this 

Thanks and waiting for recommendation
Display interactive 3D models in Web/AR
Tags: javascript, webdev, augmentedreality, tutorial
Published: 2021-11-21 13:17:33

Easily display your 3D elements on Web or in AR.

**Prerequisites:** You must be aware of the basics of HTML, CSS and JavaScript(ES6).
 
**Approach:**
1. Start with an index.html file.
2. Then we have to add `<model-viewer>` tag and script link in `<script>` tag as shown in example.

> Here `<model-viewer>` is not default tag. It imported from script with type module not text.

**Example:**
It uses glTF & GLB extension models for rendering. *You can zoom and rotate it.*
{% codepen https://codepen.io/aniket_chauhan/pen/XWaxdJQ default-tab=html,result %}

Check out [<model-viewer website](https://modelviewer.dev) for more information.

Try out your glTF & GLB models with `<model-viewer>` [Editor](https://modelviewer.dev/editor).

**Browser Support:** `<model-viewer>` is supported on the last two major versions of all evergreen desktop and mobile browsers, plus the last two versions of Safari (on MacOS and iOS).

Comment below if you have any query or suggestion. I hope you’ll find this helpful, Thanks for reading 🙂
Git and GitHub basics Tutorial
Tags: github, git, opensource
Published: 2021-11-21 13:14:59


Welcome to the Git and GitHub tutorial. In this tutorial, we are going to go through the basics of git and GitHub. Also, we will be covering all the main concepts of git and GitHub that will get you started on your GitHub journey.

https://aryanirani123.medium.com/git-and-github-tutorial-aryan-
irani-61b9c34ec855