teleren/devto huggingface dataset:
Publish to NPM: React component library - the easy way
Tags: react, tsdx, library, npm
Published: 2021-05-06 13:16:50

If you have ever thought about publishing a react/typescript package to NPM and found it a complicated task, this video is for you :)

In this video I show the easiest and fastest way I know to create and publish a react component library to NPM. The "magic" sauce for this is tsdx! 

{% youtube aVFasPXkyRE %}
PHP Enum - get rid of boilerplate mappings
Tags: php, enum, types, constants
Published: 2021-05-06 13:06:05

Hey there. Just decided to put together a small package, that will help me to get rid of boilerplate mappings like `public function getAll(): array // returns some static array of strings`.

You just need to define constants, and my `Enum\Enum` class will do the rest for you, thanks to Reflection API.

Here is an example:
```php
<?php
namespace App;

use Enum\Enum;

class Status extends Enum
{
    const ACTIVE   = 'active';
    const INACTIVE = 'inactive';
    const BLOCKED  = 'blocked';
}

$status = new Status();

$status->toArray(); // will return [ 'active' => 'active', 'inactive' => 'inactive', 'blocked' => 'blocked' ]
$status->hasValue('active'); // will return boolean
$status->hasKey('blocked'); // will return boolean
```

`Enum`'s constructor has 2 parameters: `$caseLower=true` and `$caseUpper=false`.

If you want the case of array keys to be same as constants case - pass `false` as `$caseLower`.

```php
$status = new Status(false);
```

If you want the case of array keys to be uppercase - pass `false` as `$caseLower` and `true` as `$caseUpper`. 

```php
$status = new Status(false, true);
```

We just created our custom type `Enum`. Now I can even use it to have better typed properties in my classes. For example:

```php
<?php

namespace App;

use Enum\Enum;

class Person
{
    public int $identifier;
    public string $name;
    public Enum $status;
}
```

Now I know exactly what type has my `$status` and I know exactly how I should work with that type. I find this much better than using some raw arrays.

GitHub repo:

{% github c0d3b0t/phpenum %}

Have a nice day!
Pen Note - A Flutter Markdown Editor
Tags: flutter, markdown, sideprojects, 100daysofcode
Published: 2021-05-06 13:05:14

# Pen Note
##### A multi-platform markdown editor, created using Flutter

Hey guys it's been awhile but I'm here I've started working on a markdown editor in Flutter for web/mobile so you can follow along on my GitHub [here](https://github.com/MeshaMakes/PenNote)

Home Screen             |  Settings Screen
:-------------------------:|:-------------------------:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up276o3ov0gpwdkhio0v.jpg)  |  ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/54syo7sf6h6dle0dvld7.jpg)

#### The Idea

The basic idea I had with this is that I would be a minimal markdown editor where you are able to sync on your different devices and edit as you go. I chose to go with flutter as it's the framework I'm currently working with extensively so I thought it may be good practice. 

I plan to have it released for the public and then in the future maybe have it be open source where you guys can add your own touch to it. I've been working on it for just a little over three days so code you view may not be final it will change in the future.

I am not sure how quickly I can push updates as I'm currently in college right now and assignments are excessive but I will do my best, feel free to leave any comments or questions down below.

Follow me on GitHub and check out my projects maybe star a few if you feel like it and I appreciate any donations that you may be willing to give.


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


![Thank you image](https://steamcdn-a.akamaihd.net/steamcommunity/public/images/clans/32193639/37697d2c0376739048f5e612f1ed837dd4f62075.jpg)
What are the different validators in ASP.NET?
Tags: dotnet, controls, anonymous
Published: 2021-05-06 13:00:04

ASP.NET validation controls validate the user input data to ensure that useless, unauthenticated, or contradictory data don’t get stored.


The validation control is used to implement a page level validation in server controls.

There are 6 types of ASP.Net Validation Control:
- RequiredFieldValidator
- RangeValidator
- RegularExpressionValidator
- CompareValidator
- ValidationSummary
- CustomValidator

Check out in details here:https://rlogicaltech.medium.com/what-are-asp-net-validators-7990b53aaead
Calling out developers for help fighting COVID-19 in India
Tags: webdev, help, typescript, python
Published: 2021-05-06 12:56:08

We have made an app to *Geolocate Covid Resources*  
[Covid Find](https://covi-find.in/)

Most of the similar apps we found did not geolocate the resources, making it tough for people to find the nearest help. We are getting our data from government websites and is updated hourly.

Currently, we have a few cities and states. We will be continuously adding more cities as well as resources. 

If you would like to help out in this initiative and know the following stack :

- Web scraping: Beautifulsoup, Pandas, Requests
- Backend: Flask
- Frontend: Next.js + TypeScript + Chakra UI

Please join the Discord server to join the initiative.
[Link](https://discord.gg/QWPxEzwfHa)

Feel free to check the github repo [here](https://github.com/Rohithgilla12/covi-find).

Thanks,
Rohith Gilla

P.S: Stay home, stay safe and get vaccinated if your turn comes.

P.P.S: Let me know if you want to know about how I built the frontend of the application, will be more than happy to write a blog post on that.
Functions in Heap
Published: 2021-05-06 12:49:55

Functions in Heap :

The following functions are:

heapq.heappush(heap, item)

Move the value object onto the heap, retaining the invariant heap.

heapq.heappushpop(heap, item)

On the heap, push the object, pop and return the smallest item from the heap.

heapq.heapify(x)

Transform list x into a heap in linear time, in-place.

heapq.heapreplace(heap, item)

Pop the smallest item from the heap and return it and push the new item as well.The heap size doesn’t change. If the heap is empty, IndexError is raised.

This one-step operation is more successful than heappop(), followed by heappush(), and when using a fixed-size heap, it can be more suitable.

An element from the heap is always returned by the pop/push combination and replaced with an object.

The returned value may be greater than the added object.If that isn’t desired, instead, consider using heappushpop().The smaller of the two values is returned by its push/pop combination, leaving on the heap the larger value.

heapq.merge(*iterables, key=None, reverse=False)

Combine different sorted inputs into one single sorted output(for example, merge timestamped entries from multiple log files).Returns an iterator over the values sorted.

Code : 
def heapsort(iterable):
     h = []
     for value in iterable:
        heappush(h, value)
     return [heappop(h) for i in range(len(h))]

 heapsort([1, 3, 5, 7, 9, 2, 4, 6, 8, 0])
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
How to make Javascript code neat and clean
Published: 2021-05-06 12:24:46

Curly Braces
If there is a block then we use curly braces. We should use a space before the bracket like this:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twijmor9p3stjr296mus.JPG)
So do we have to use curly braces if there is one conditional line?
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjry1dvrfcqyyi9k31pk.JPG)
Well, using curly braces is safe and good practice but you can write without a curly brace if there is only one line in the condition.

Line length
No one likes to read along the horizontal line it’s better to split them into small lines.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwamocizdfmk3c34dlb3.JPG)

Indents
There are two types of indents
Horizontal indents: 2 or 4 space
A horizontal indentation is made using either 2 or 4 spaces or the horizontal tab symbol(key Tab)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlhjujpf00mlvd4hi62u.JPG)
Vertical indents: empty line for splitting codes into logical blocks
Even a single function can often be divided into logical blocks. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uch6emaei2jdivdlsyk.JPG)

Semicolons 
A semicolon should be present after each statement, even if it could possibly be skipped.

There are languages where a semicolon is truly optional and it is rarely used. In JavaScript, though, there are cases where a line break is not interpreted as a semicolon, leaving the code vulnerable to errors. 

Nesting level
Try to avoid nesting code too many levels deep.
For example, instead of adding a nested if/else we can use a return conditional like this:
Option-1:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2ff81tne93so9hfji4l.JPG)
Option-2:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1a7vp94xft7jb6hol1x.JPG)
Function placement
The most preferable method is code first then function
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9oanab3qw0xnzg2xitcn.JPG)
Summary 
The main point of this writing is to make code readable. We should concern about that is our code readable and easy to understand.
We can read popular style guides to keep up to date about coding style trends and best practice.
dynamic method problem
Published: 2021-05-06 12:24:35

Problem
How to display and calculate the sum of n numbers by using dynamic memory allocation function in C language?

Solution
Following is the C program to display the elements and calculate the sum of n numbers by the user by using dynamic memory allocation functions. Here, we also try to reduce the wastage of memory.

Example
 

#include<stdio.h>
#include<stdlib.h>
void main(){
   //Declaring variables and pointers,sum//
   int numofe,i,sum=0;
   int *p;
   //Reading number of elements from user//
   printf("Enter the number of elements : ");
   scanf("%d",&numofe);
   //Calling malloc() function//
   p=(int *)malloc(numofe*sizeof(int));
   /*Printing O/p - We have to use if statement because we have to check if memory has been successfully allocated/reserved or not*/
   if (p==NULL){
      printf("Memory not available");
      exit(0);
   }
   //Printing elements//
   printf("Enter the elements : \n");
   for(i=0;i<numofe;i++){
      scanf("%d",p+i);
      sum=sum+*(p+i);
   }
   printf("\nThe sum of elements is %d",sum);
   free(p);//Erase first 2 memory locations//
   printf("\nDisplaying the cleared out memory location : \n");
   for(i=0;i<numofe;i++){
      printf("%d\n",p[i]);//Garbage values will be displayed//
   }
}
Output
When the above program is executed, it produces the following result −

Enter the number of elements: 4
Enter the elements:
23
45
67
89
The sum of elements is 224
Displaying the cleared out memory location:
7410816
0
7405904
0
6 website to find stock videos
Tags: webdev, javascript, html
Published: 2021-05-06 12:21:03

#Pixabay
Discover The Best Source For Free Images And Videos. Free For Commercial Use ✓ No Attribution Required.

link:- https://pixabay.com/videos/search/

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kn50mpaw65v2uxinbq1.png)

#Pexels
Pexels Videos Makes It Easy To Find Free Stock 
Footage For Your Website, Promo Video Or 
Anything Else. All Videos Are Free For Personal A
Nd Commercial Use.

link:- https://www.pexels.com/videos/

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pcxhfgiuueuorretvig.png)

#Videvo
Videvo Offers Free Stock Videos And Motion 
Graphics For Use In Any Project

link:- https://www.videvo.net/

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

#Videezy
Videezy Is A Community Of Videographers Who 
Download And Share Free HD Stock Video!

link:- https://www.videezy.com/ 

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

#Vidsplay
Download Free Stock Video Footage In High 
Definition (HD). Completely Free No Cost 
Video Footage.

link:- https://www.vidsplay.com/ 

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

#Splitshire
What Would You Do If You Had Amazing Royalty 
Free Photos? Download Free Stock Photos With 
No Copyright Restrictions And Real Look.

link:- https://www.splitshire.com/

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

**Note:-** visit my youtube channel for frontend tutorials

**subscribe to my youtube channel :-** https://www.youtube.com/channel/UCR64vQptythbJ1SmI-ub0Rg

**Resent post :-** 
{% link https://dev.to/innocentcoder/age-calculator-javascript-project-with-source-code-52a0 %}
Travelling salesperson problem
Published: 2021-05-06 12:08:19

Let G=(V,E) be a directed graph with edge cost cij.  The variable cij is defined such that cij>0 for all  i and j and cij=∞ if (i,j) ∉ E.

A tour of G is a directed simple cycle that includes every vertex in V.
The cost of the tour is the sum of the edge costs in the tour.
The travelling salesperson problem is to find a tour of minimum cost.

Let us assume for simplicity out tours starts at vertex 1.  Every tour consists of an edge (1,k) for some k ∈ V-{1} and a path from k to vertex 1. 
Let g(i,S) be the length of a shortest path starting at vertex i, going through all vertices in S, and terminating at vertex 1.

Then we need to find g(1, V-{1}) to get the optimal sales person tour.

 

Generalizing we obtain (for i∉S )

                 

clearly  




Problem:
 

Solution:  

g(2, ɸ)=c21=5
g(3, ɸ)=c31=6
g(4, ɸ)=c41=8

g(2,{3})= c23+g(3, ɸ)=9+6=15
g(2,{4})=c24+g(4, ɸ)=10+8=18
g(3,{2})=18
g(3,{4})=20
g(4,{2})=13
g(4,{3})=15

g(2,{3,4})=min{c23+g(3,{4}), c24+g(4,{3})
                = min{9+20,10+15}=25
g(3,{2,4})= min{c32+g(2,{4}), c34+g(4,{2})}
                =min{13+18,12+13}=25
g(4,{2,3})=23
g(1,{2,3,4})=min{c12+g(2,{3,4}), c13+g(3,{2,4}), c14+g(4,{2,3})}
                   =min{10+25,15+25,20+23}=35

So the tour of minimum cost is 1-2-4-3-1, tour cost is 35
Expressions
Tags: help, healthydebate, javascript
Published: 2021-05-06 12:06:48

There are many questions javascript can't answer. As if you want to know about weather , javascript wont be abele to answer it . But there are some questions that javascript can answer it, or you can say javascript would make you happy by answering your questions. This tipe of questions have a name , it calls expressions. Let's see some example:
if we ask the  expressions 2+2 javascript will answer with value 4.
CONSOL.LOG(2+2); // 4
one thing you shuld know that, EXPRESSIONS is a questions that javascript can answer , and it always result in a single value.
What Developers NEED to know when working with designs (video)
Tags: ux, prototyping, uxpin, tutorial
Published: 2021-05-06 12:02:46

In this video, I show you how an app design is made Designer first, then Developer first. We will be using UXPin as this is a platform that will show us how to do both - http://bit.ly/UX-pin​.
In this crash course, we will go over what a Developer needs to know about prototyping in a small to large Company, and how to make the designer-developer handoff, as well as all the iterations much smoother.

{% youtube T9yGcmJi99M %}


0:00​ - Introduction
0:59​ - Working Designer first - the flow
3:49​ - Working Developer first - the flow
5:18​ - Creating Designs in UXPin
9:19​ - Commenting and collaborative work
10:43​ - Generating code from Designs
12:43​ - Designing Interactions
13:26​ - Importing coded U.I Components into UXPin Merge
14:47​ - Arranging Components
17:18​ - Passing props
19:37​ - GitHub Repositories
20:15​ - Conclusion

___
In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool​

If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow​

Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips​

You can also find me on:
Twitter: https://twitter.com/ania_kubow​
Instagram: https://instagram.com/aniakubow​
What is problem reliability design
Published: 2021-05-06 12:01:17

We are to design 3 stage systems with devices D1, D2, D3. The costs are $30, $15, $20 respectively. The cost of the system to be no more than $105. The reliability of each device type is 0.9, 0.8, and 0.5 respectively.

Cost	Reliability	Max number of devices
D1	30	0.9	2
D2	15	0.8	3
D3	20	0.5	3

Total cost used= 30+15+20=6530+15+20=65
Avalialbe amount = 105-65=40105−65=40
(c-(c1+c2+c3))/c2=1+1(c−(c1+c2+c3))/c2=1+1

Maximum number of additional D1 devices we can purchase= 40/30=140/30=1
Maximum number of additional D2 devices we can purchase= 40/15=240/15=2
Maximum number of additional D3 devices we can purchase= 40/20=240/20=2
Let S0={(1,0)}
S11 ={ (0.9,30)}S11=(0.9,30)

Malfunction of D1 device = 1-0.9=0.1

Relialbility of two D1 devices = 1- 0.1 * 0.1=0.99

S21= { (0.99,60)}

S1={ (0.9,30), (0.99,60)}
S12={(0.72,45), (0.792,75)}S12=(0.72,45),(0.792,75)

Relialbility of two D2 devices=1-(1-0.8)2=0.96

S22={(0.864,60)}

The tuple (0.9504,90) is eliminated as with the remaining amount of $15 we cannot purchase a D3 device. Reliability of three D2 devices=1-(1-0.8)3=0.992

S32= {(0.8928,75)}

The tuple (0.792,75) is eliminated as the tuple (0.864,60) dominates (0.792,75).

S2={(0.72,45), ((0.864,60), (0.8928,75)}
S13={(0.36,65), (0.432,80), (0.4464,95)}S13=(0.36,65),(0.432,80),(0.4464,95)

Reliability of two D3 devices = 1-(1-0.5)2 =0.75 S32={(0.54,85),(0.648,100)}

Rliability of three D3 devices = 1-(1-0.5)3 =0.875 S33={(0.63,105)}

The tuple (0.63,105) is dominated by (0.648,100) and the tuple (0.4464,95) is dominated by (0.54,85)

S3={(0.36,65), (0.432,80),( 0.54,85),(0.648,100)}}
Tracing back through Si’s we can determine that 1 D1 device, 2 D2 devices, and 2 D3 devices give the highest reliability.
Daily Developer Jokes - Thursday, May 6, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-05-06 12:00:20

---
title: "Daily Developer Jokes - Thursday, May 6, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20May%206%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1259b9b89f4.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What do you call optimistic front-end developers?

___A:___ Stack half-full developers.
 -->
ALGORITHM of Infix to Postfix Conversion Using Stack.
Tags: algorithms, postfix
Published: 2021-05-06 11:52:11

Postfix expression: The expression of a b op. when an operator is followed for every pair of operands.


Infix expression: The expression of the from a op b. when an operator is in between every pair of operands


ALGORITHM


step1: First we should scan the infix expression from left to right


step2: If scanned character is an operand ,we should get the output.


step3:Else,pop all the operators in the stack which are greater than or equal to in precedence than that of the scanned operator to the stack


step4: If the scanned character is an ’ ( ', push it to the stack.


step5 : If the scanned character is an ‘)’,pop the stack an output it until it is encountered, and discard both the parenthesis.


step 6: Repeat steps 2-6 until infix expression is scanned.


step7: print the output


step 8: pop and output from the stack until it is not empty
Tableau file types?
Tags: tableau, visualisation, analytics
Published: 2021-05-06 11:46:04

Tableau is a widely used data analytics and visualization tool that many consider indispensable for data-science-related work. Its drag-and-drop interface makes it easy to sort, compare, and analyze data from multiple sources, including Excel, SQL Server, and cloud-based data repositories.

Types:
Tableau Workbook(.twb):
Stores a visualisation without source data.

Tableau Data Source(.tds):
Stores the server address, password and other information required to access a data source.

Tableau Bookmark(.tbm):
Stores a connection to a worksheet in another tableau workbook.

Tableau Extract(.tde):
Stores tableau data as a filtered and aggregated extract.

Tableau Packaged Workbook(.twbx):
Stores extracted data and visualisations for viewing in Tableau or Tableau reader. It also stores the original data files.

Finally, what's new in Tableau 2020?
1)Animate mark transitions.
2)Add phone layouts to new dashboards.
3)Automatically update using dynamic parameters.
4)Calculate and display buffer regions on a map.
RabbitMq Queue Durability and Persistent MessageDelivery | SpringBoot
Tags: rabbitmq, queue, springboot, messagedelivery
Published: 2021-05-06 11:42:53

https://grokonez.com/spring-framework/spring-amqp/rabbitmq-queue-durability-persistent-messagedelivery-springboot

RabbitMq Queue Durability and Persistent MessageDelivery | SpringBoot

In the tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> will show you how to work with <strong>RabbitMq Queue Durability and Persistent MessageDelivery</strong>.

Related posts:
- <a href="https://grokonez.com/java-integration/distributed-system/rabbitmq-create-spring-rabbitmq-publishsubcribe-pattern-springboot">RabbitMq – How to create Spring RabbitMq Publish/Subcribe pattern with SpringBoot</a>

<!--more-->
<h2>I. Technologies</h2>
– Java 8
– Maven 3.6.1
– Spring Tool Suite – Version 3.8.1.RELEASE
– Spring Boot: 1.5.7.RELEASE
– RabbitMq
<h2>II. RabbitMq Queue Durability and Persistent MessageDelivery</h2>
RabbitMq Queue has 2 kind of durability: {<strong>Durable</strong>, <strong>Transient</strong>}.
- <strong>Durable</strong> queue is a solution for re-declared <strong>persistent messages</strong> during broker restarts if broker is taken down.

<img src="https://grokonez.com/wp-content/uploads/2017/10/springboot-rabbitmq-durable-queue-architecture.png" alt="springboot rabbitmq durable queue - architecture" width="585" height="238" class="alignnone size-full wp-image-8536" />

Scenarios with above design:
- When sending 2 messages {<strong>a persistent message</strong>, <strong>a trasient message</strong>} to exchange <strong>X</strong>, all messages will be
delivered to 2 queues {<strong>Q1</strong>, <strong>Q2</strong>}.
- Stop RabbitMq service, then re-start it -> just <strong>a persistent message</strong> will be re-declared in durable queue <strong>Q1</strong>.

With Spring framework, default message is <strong>PERSISTENT</strong> mode:

<pre><code class="language-java">
package org.springframework.amqp.core;
...

public class MessageProperties implements Serializable {
	...
	
	public static final MessageDeliveryMode DEFAULT_DELIVERY_MODE = MessageDeliveryMode.PERSISTENT;
	...
	
}
</code></pre>

We can change the delivery mode as below:

More at:

https://grokonez.com/spring-framework/spring-amqp/rabbitmq-queue-durability-persistent-messagedelivery-springboot

RabbitMq Queue Durability and Persistent MessageDelivery | SpringBoot