teleren/devto huggingface dataset:
Flyout and Tab Icon States in .NET MAUI
Tags: dotnet, programming
Published: 2022-06-21 16:30:55

Most [.NET MAUI](https://dot.net/maui) apps will use a flyout, a sidebar (fixed flyout), or tabs (top or bottom) to move between content views. A key UX principal is [wayfinding](https://www.uxmatters.com/mt/archives/2013/04/information-wayfinding-part-1-a-not-so-new-metaphor.php), helping the user understand the structure of the application (or information), especially where they are within that structure.

And so, flyout items and tabs support normal and selected visual states by default in .NET MAUI. But what if you add an image? 

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

```
<FlyoutItem Title="Home" FlyoutIcon="tab_home.png">
  <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
</FlyoutItem>
```

Now your selected state isn't any different than your normal state because you only have the one look. By using state triggers, we can easily provide a style that swaps out the normal images with a selected image. A `FlyoutItem` is an alias to `ShellItem` with the property `IsChecked` that will update when the user navigates with the flyout. A [trigger](https://docs.microsoft.com/dotnet/maui/fundamentals/triggers) watches the property and fires anytime it changes.

```
<Style TargetType="FlyoutItem" x:Key="HomeFlyout">
    <Style.Triggers>
        <Trigger TargetType="FlyoutItem"
                    Property="IsChecked" Value="False">
            <Setter Property="FlyoutIcon" Value="tab_home.png"/>
        </Trigger>
        <Trigger TargetType="FlyoutItem"
                    Property="IsChecked" Value="True">
            <Setter Property="FlyoutIcon" Value="tab_home_on.png"/>
        </Trigger>
    </Style.Triggers>
</Style>
```

Now you can remove the fixed image assignment and specify the style.

```
<FlyoutItem Title="Home" Style="{StaticResource HomeFlyout}">
  <ShellContent ContentTemplate="{DataTemplate page:HomePage}"/>
</FlyoutItem>
```

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

Much better! Some text labels would be another beneficial element to include.

{% embed https://github.com/dotnet/maui-samples %}
Math.random
Published: 2022-06-21 16:21:51


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


Bora, entender algumas coisas importantes sobre esse código.

**Math.random**

A função Math.random => gerá um número decimal aleatório, nesse caso multiplique por 100 para sair das casas decimais.

**While**

**parte 01 **

`var numero = Math.random() * 100;`
`while (numero < 90){}`


Enquanto, meu número aleatório for menor que 90 a função será realizada. Então, primeiro é gerado um número aleatório na variável que estabeleci. 

Depois, esse número aleatório, vai bater no bloco que defini. E vai  perguntar para o bloco do while " eu atendi a condição que você estabeleceu ?". Se a condição da variável atender a condição definida no while, então roda o bloco de código.

**Parte 02** 

```
while (numero < 90){
    console.log(numero);
    numero = Math.random()  100;
}

```

Cumprida a condição que o número sorteado deve ser menor que 90. A primeira coisa, que meu bloco de código vai fazer é imprimir o número sorteado. A segunda coisa, que meu bloco de código irá fazer é sortear novamente um número e comparar com a condição estabelecida no while para verificar se está dentro ou forá do bloco while.

**Parte 03 (aqui tá a grande sacada)**

`console.log(numero);
console.log("acabou");`

Se meu o número sorteado for maior que 90, percebe que não vai ser aplicada a função do bloco while. Então, você coloca forá da estrutura blocada do while, um console.log(numero) para verificar o número que foi sorteada e não atende a condição.

Também coloquei um console.log("acabou") só para mostrar o fim do código.
how to use web3.js instead of Ethers in react Dapp and connect to hardhat node
Tags: hardhat, web3, truffle, react
Published: 2022-06-21 16:14:19

i created a repository that is the same as a truffle react box however i use web3.js instead of ethers and functional components and hardhat instead of truffle, just follow the steps in this repository [repository](https://github.com/revoltez/hardhat-react-box)
Important Meta Tags that you should have on your website
Tags: webdev, javascript, nextjs
Published: 2022-06-21 16:01:04

Hello Friends, Today in this short post I will be mentioning the important meta tags that you should have on your website to improve SEO. You can do it simply or you can do this with a simple trick which I will mention in the end of this post. Lets get started.

Please read this post in our website
[Important Meta Tags that you should have on your website](https://codewithmarish.com/post/important-meta-tags-that-you-should-have-on-your-website)

Generate your meta tags for free using our tool.
[Meta Tag Generator](https://codewithmarish.com/products/meta-tag-generator)


Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Build PWA (Progressive Web App) with Next JS under 1 minute
Tags: pwa, webdev, nextjs, javascript
Published: 2022-06-21 15:57:25

Hello friends, Today in this post we will learn how to create a PWA(Progressive Web Application) with NEXT JS. I also followed this same procedure to make my website a PWA. PWA or Progressive Web Apps are web application that provides the user with a native app-like experience. It provides features such as installing the web app into your device, the ability to work offline, send push notifications, etc. So let’s get started.

Please read this post in our website
[Build PWA (Progressive Web App) with Next JS under 1 minute](https://codewithmarish.com/post/build-pwa-with-nextjs-under-1-min)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Flowchart editor UI
Tags: design, webdev, ux, tooling
Published: 2022-06-21 15:54:05

Designing an interface is interesting. It is like a puzzle. Here’s what happens for [Dgrm.net](https://dgrm.net/).

Dgrm.net is a flowchart editor
 - works on PC, tablets and mobile
 - no extra buttons
 - quick
 - free

## The editor opens diagrams from pictures

![Fig 1. Dgrm.net opens flowcharts pictures](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6wnlwy8cn3abqvnurysn.gif)
_Fig 1. Dgrm.net opens flowcharts pictures_

No need to store the source, the picture is the source.

For example: we send the scheme by mail. A month later, the letter is returned — we immediately correct the picture from the letter, we do not look for the source code.

## Connecting lines are pulled out, not added as a separate shape

![Fig 2. To connect the shapes, pull out the arrows](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/93j3cmdquoihngqifp0g.gif)
_Fig 2. To connect the shapes, pull out the arrows_

## Entry points are highlighted in advance when approaching a figure

Figure 3 shows hidden contours.

![Fig 3. Entry points are highlighted in advance when approaching a figure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cu1rkow5hju87v2qqdcj.gif)
_Fig 3. Entry points are highlighted in advance when approaching a figure_

## Shapes automatically adjust to text length
No need to manually resize.

The figures do not increase smoothly, but in steps. So that the diagram does not ripple from different sizes.


![Fig 4. Shapes automatically resize based on text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lwmhu8u8pqosp3y7ij9.gif)
_Fig 4. Shapes automatically resize based on text_

## Minimum controls
The possibilities of the editor are deliberately limited.

 - Only 4 shapes;
 - The menu has 5 items. No choice of save format.

## Large controls
On phones, the controls are getting even bigger.

![Fig 5. Large controls on phones](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/59o4evlugwia502rztpo.gif)
_Fig 5. Large controls on phones_

## Future plans
 - Group dragging shapes. Right now, only one shape can be dragged.
 - Change the color of shapes.
 - Zoom in/zoom out.
 - Short links to diagrams.
 - “Save as” dialog. Now saves in “Downloads” without the ability to specify a file name.
 - Copying a diagram from the editor to Word.
 - Dragging a diagram from the editor into Word.

## Other articles about dgrm.net
 - [JavaScript SVG diagram editor 3.9 KB (open source library)](https://dev.to/alexboyko/javascript-svg-diagram-editor-39-kb-open-source-library-2eh)
 - [JavaScript diagram editor that renders diagrams from PNG images (open source)](https://dev.to/alexboyko/javascript-diagram-editor-that-renders-diagrams-from-png-images-open-source-a63)
 - [JavaScript text editor for SVG](https://dev.to/alexboyko/javascript-text-editor-for-svg-13aa)
 - Flowchart editor UI
 - [JavaScript: Zoom like in maps for SVG/HTML](https://dev.to/alexboyko/javascript-zoom-like-in-maps-for-svghtml-2m3b)

[Dgrm.net](https://dgrm.net/) | [GitHub](https://github.com/AlexeyBoiko/DgrmJS)
Is It Worth Using Tags With Few Subscribers?
Tags: discuss, webdev, career, writing
Published: 2022-06-21 15:53:51

There's a lot of articles in topics like React and it's fairly easy to get attraction when writing about that. Meanwhile, when writing articles about less common subjects my impression is that very few people read the articles. 

What is your experience? Is it worth writing articles about topics that isn't as popular as others? 

I don't know where to see the amount of subscribers for a topic, but I would guess it correlates quite well with the [amount of posts each tag has](https://dev.to/tags).

For comparison, my article about [IaaS, PaaS and Saas](https://dev.to/perssondennis/iaas-vs-paas-vs-saas-for-dummies-3i5p) and [serverless hosting](https://dev.to/perssondennis/professor-prolog-explains-serverless-hosting-2022-37go) did get less than 100 views. That's **a lot less** than other articles I write with other tags. Count away some of my followers and it's effectively 0 views from the feed. 

Do you have similar experiences to share?
How to improve the load and response time of your websites.
Tags: webdev, programming, javascript, react
Published: 2022-06-21 15:53:34


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/45coi1sbvs9yhrv9slp4.jpeg)

This can be done by done by adding a cache layer and shifting all your static content like javaScript, css, images and video files to the content delivery network which is also known as CDN.

**What is Cache ?**

Cache helps us to store data so that when we make request for that data later it can be served faster. We can use it store the result of expensive responses or frequently accessed data in memory. Every time you load a web page one or more database calls are executed to fetch data. The application performance is greatly affected by calling the database repeatedly. Cache can help us eliminate this problem.

Cache is a temporary data store and it is more faster than the database. The advantages of using cache is to reduce the workload of the database and to improve the performance of the application.

**How does it work ?**

When a web server receives a request it first checks if the response exists in the cache if it does it sends the response back to the client. How about if it does not exist? Then it queries the database for the response when it gets the response it saves the response in the cache before sending the response back to the user.


**Content Delivery Network(CDN)**

CDN servers is used to cache static web content like css, javaScript, images and video files e.t.c. When a user visits a websites a CDN Server closer to the user will deliver all the static contents. if the CDN server are far from the user the slower the website will load. The closer you are to the CDN server the faster you get contents.

**How does it work ?**

When user A tries to get an image.png if the CDN server does not have image.png in the cache the CDN server request the file from the web server the web server now returns the image to the CDN server which include http headers and TTL which describes how long the image is cached then the CDN caches the image and returns it back to the user. Now if user B wants the same image the image is returned from the cache instead of from the server which a lot faster.

Thanks for reading and God bless us all.
How to create a contact form in Next JS and Firebase?
Tags: webdev, javascript, nextjs, firebase
Published: 2022-06-21 15:53:03

Hello friends, Today in this post we will see how to create a contact form in NEXT JS and Firebase. By doing this contact form you will learn about Form handling, integrating NEXT JS application with firebase, adding data into firestore, etc. So Let's Started.

Please read this post in our website.
[How to create a contact form in Next JS and Firebase?](https://codewithmarish.com/post/how-to-create-a-contact-form-in-nextjs-and-firebase
)
Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Bisecting data, data structures, algorithm and computer programs.
Tags: algorithms, programming, python
Published: 2022-06-21 15:49:38

## intro
Let's start with appreciating this tool I am using to edit this article (Google Chrome), a program also known as computer program.
**A computer program** is a collection of instructions to perform a specific task. For this, a computer program may need to store data, retrieve data, and perform computations on the data.
A **data structure** is a named location that can be used to store and organize data. And, an **algorithm** is a collection of steps to solve a particular problem.
## What is **data,** you may ask?🤦‍♀️
so data is the collection of different numbers, symbols, and alphabets to represent information. Note that this information is unordered, hence might not have meaning.

### is data structure really important?
Absolutely, the choice of a good data structure makes it possible to perform a variety of critical operations effectively. An efficient data structure also uses minimum **memory** space and execution **time** to process the structure.Learning data structures and algorithms allow us to write efficient and optimized computer programs.
### Nice 😄 tell me more
Now that you have a glimpse, we have 2 types of data structure, namely:
1. **Linear data structures**-think of them as  data structures where elements are arranged in a single dimension i.e. lists/arrays, stack, queue etc
2. **Non-Linear Data Structure.** - Opposite of linear, elements are arranged in many dimension i.e. one-many relationship, many-many relationship or many-one relationship. Examples of these data structures are: tree, graph, table, etc.

### Sounds interesting, can you give some examples 🤔
We know how to classify data structures, so far so good. Here is a list of most used data structures:
1. Array/lists
2. Linked-lists
3. Dictionaries
4. Stacks
5. Queues
6. Binary trees
7. Heaps

### summary and next steps
Today we have learned what is data, data structure and a computer program. What are different types of data structures and their examples. Next article we will take a look at most used data structures.
How to create a responsive navbar in NEXT JS?
Tags: webdev, nextjs, css, javascript
Published: 2022-06-21 15:44:04

Hello friends today in this post, we are going to learn on implementing a responsive navbar in your NEXT JS Application. As navigation is one of the important part of your website which allows the visitors to explore your website, so better implementation of this navbar in desktop, tablet, mobile will help you improving accessibility of the website which in turn retains your website visitor. I will show how I implemented on my my website [https://codewithmarish.com](https://codewithmarish.com) which is built on NEXT JS, let's get started.

Please read this post in our website
[How to create a responsive navbar in NEXT JS?](https://codewithmarish.com/post/how-to-create-responsive-navbar-in-next-js)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Upcoming Update
Tags: webdev, php, showdev
Published: 2022-06-21 15:40:46

## Thank you all for for an overwhelming response of 40 stories ❤️.
First of all, thanks to everyone out there who tried out padmat and dropped a word to your fellow mates.

## Tool Update
There's a minor update being shipped out over this weekend, which basically improves the URL of the stories you publish.

Earlier when a story was published the URL to the same would be something like

####**https://padmat.ga/story-[title]**

With this update, the URL's to the stories now would be

####**https://padmat.ga/[title]**


#####PS: Still working on a fix for the emoji being parsed at the backend!



## Thank you again and do support Padmat :)
Guard Clauses Technique
Tags: flutter, softwaredevelopment, dart, mobile
Published: 2022-06-21 15:40:10

Let’s be honest, how many times you found yourself in situations like this:
```dart
void someMethod() {
	if (condition1) {
		if (condition2) {
			if (condition3) {
				doSomething();
			} else {
				debugPrint('Problem 3');
			}
		} else {
			debugPrint('Problem 2');
		}
	} else {
		debugPrint('Problem 1');
	}
}
```

Countless times, perhaps even worse than that, especially at the beginning of our developer careers. The more conditions you nest, the more your code will get like this:
```dart
void someMethod() {
	if (condition1) {
		if (condition2) {
			if (condition3) {
				if (condition4) {
					if (condition5) {
						if (condition6) {
							if (condition7) {
								if (condition8) {
									doSomething();
```

It can get pretty ugly and make the code reading process very frustrating. There is a better, more intuitive and read-friendly way to do it.

## Guard Clauses
A guard clause consists of an expression that must evaluate whether code execution should continue. In a nutshell, instead of nesting multiple if conditions one inside another, we create guard clauses that individually checks if there is a problem before executing the main code. Let’s have a look at the transformation from the example above to the guard clauses technique:
```dart
void someMethod() {
	if (!condition1) {
		debugPrint('Problem 1');
		return;
	}
	if (!condition2) {
		debugPrint('Problem 2');
		return;
	}
	if (!condition3) {
		debugPrint('Problem 3');
		return;
	}
	
	doSomething();
	return;
}
```

Much more readable right?

Now is much simpler to add new conditions without messing up the code.

For more articles, follow me here on DEV.TO, on [Flutter in a Nutshell](flutterinanutshell.com) and [Twitter](https://twitter.com/flutternutshell).
Create a Tic Tac Toe Game using NEXT JS
Tags: webdev, nextjs, react, javascript
Published: 2022-06-21 15:40:10

Hello friends, Today in this post we are going to see how we can create a tic tac toe game using NEXT JS. Tic Tac Toe is an excellent project for beginners to get started with learning NEXT/REACT JS, doing this project will help you learn basic concepts such as lifecycle methods, useEffect & useState hooks, functional component, etc. A Basic HTML, CSS & Javascript is enough to follow up with this tutorial. So get ready with your vscode and let's get started.

Please read this post in our website
[Create a Tic Tac Toe Game using NEXT JS](https://codewithmarish.com/post/create-a-tic-tac-toe-game-using-next-js)

Also please don’t forget to subscribe to our youtube channel codewithmarish for all web development-related challenges.

[Code With Marish | Youtube](https://www.youtube.com/channel/UCkPYmdVz8aGRH6qCdKMRYpA)

Posted with ❤️ from somewhere on the Earth
Embedded services have many advantages over traditional code
Tags: embedded, microservices, luos, opensource
Published: 2022-06-21 15:39:18

Embedded services have many advantages over traditional code. You can write reusable code for different devices, deploy it on one or more microcontrollers.

⏩ https://www.luos.io/blog/embedded-services

Let’s see with this blog post how to get the most out of embedded services. #opensource #microservices #embedded #edge #luos


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hliu8066xp8hq2sh3f4b.png)
Describe Block Formatting Context and how it works.
Tags: webdev, css, html, beginners
Published: 2022-06-21 15:39:00

**Block Formatting Context** is a type of CSS formatting context. It is set by the values of type for **outer** and **inner** displays of a block element.

For example,

```CSS
.some-class {
     display: inline-block;
}
```

The outer display type determines the rules for the element's participation in the **Flow Layout** and the inner type sets the layout rules for its children.

There are numerous ways a Block Formatting Context is formed. And BFCs can be created for serving various purposes while creating CSS layouts. We'll point out some commonly used examples below.

**The Initial Block Formatting Context**
For an HTML document, the first Block Formatting Context is established by the `<html>` element itself. It is called the **Initial Block Formatting Context** and it sets the default **flow layout** of the document to be composed of **block** and **inline** elements. The flow layout is also called the **Normal Flow**. So, an HTML document begins with having a Block Formatting Context -- with its content following the normal flow. And the normal flow allows its content to have any or both of Block and Inline Formatting contexts.

**With Out-of-flow Elements**
A Block Formatting Context is created when an element is **made to move out of normal flow**. This is typically done when `position` of the element is set to `absolute` or `fixed`, or when an element is floated.

```CSS
.some-class {
     position: absolute;
}

p { float: left; }
```

With any of these rules, the element is moved out of flow of the document and it forms its own BFC.

Floating an element comes with the risk of **collapsing margins** and disrupting a layout. So, it should be contained within the layout by creating a new Block Formatting Context in its parent element. There are various ways of achieving this. One involves using `display: flow-root`, as mentioned below.

**With `display: flow-root;`**
Using `display: flow-root` creates a new Block Formatting Context. This is especially useful for clearing a float and keeping it inside its container, eventually keeping it in-flow.

Floating an element itself creates a BFC that disrupts the layout of the container. So, setting the `display` value of the floating element's container to `flow-root` creates a BFC, similar to the one at `<html>`, the root. This makes the float follow normal flow.

There are many other instances when a BFC can form, and they are worth considering individually because of their broader scopes and usage. For example, when `overflow` value is set to anything other than `visible` and `clip`. And when `display` is `flex` or `grid` or any `table-*` values, etc.

---
References
1. [Introduction to Formatting Contexts - Block formatting contexts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Intro_to_formatting_contexts#block_formatting_contexts)
2. [Block formatting context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context)
3. [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display)