teleren/devto huggingface dataset:
The ng-sq-ui project is back more customizable than ever! + Brand new Rewards Program
Tags: javascript, angular, showdev, typescript
Published: 2021-05-08 14:25:13

# Some exciting component enhancements ✨
This project was started with the idea of being flexible when it comes to styling; it allows the developer to opt-out of the pre-packaged theme, without leaving the theme-specific classes in the markup.

Staying true to its original intent, the latest version - 1.3.1 - now comes with form controls that are not only style-independent but also allow custom templating.

Here is an example of the above with the `TagsInputComponent`: 

{% stackblitz sq-tags-input-custom-template-different-style-preview view=preview %}

The component was enhanced to employ the `ngTemplateOutlet` directive to allow the developer to customize the markup for the entered tags. Additionally, no themes were included in the `angular.json` file - all the CSS responsible for the look can be found in `styles.css`.

## The other components that you can now customize are:
* [TypeaheadComponent (sq-typeahead)](https://sq-ui.github.io/ng-sq-ui/#/form-elements-module?id=sq-typeahead)
* [DropdownComponent (sq-dropdown)](https://sq-ui.github.io/ng-sq-ui/#/form-elements-module?id=sq-dropdown)
* [CheckboxComponent (sq-checkbox)](https://sq-ui.github.io/ng-sq-ui/#/form-elements-module?id=sq-checkbox)
* [RadiobuttonComponent (sq-radiobutton)](https://sq-ui.github.io/ng-sq-ui/#/form-elements-module?id=sq-radiobutton)

Clicking on a list item will take you to the component docs with its corresponding StackBlitz example. If you want to check them out in production action, you can do so by [visiting our site](https://ng-sq-ui.xyz/#/sq-ui).

# Our team is on the lookout for bounty hunters! 🕵️
We would like to reward people who put in effort to help develop this project further with DEV tokens! You can be rewarded up to 5 DEV tokens depending on your contribution - issuing a feature request, completing a feature or fixing bugs. Be sure to take a look at our [Rewards Program T&C](https://sq-ui.github.io/ng-sq-ui/#/bounty-program).

# And last but not least...
We would like to thank anyone who supports us by [starring our repo](https://github.com/SQ-UI/ng-sq-ui) or [staking on our project](https://stakes.social/0x014f98F05c0BeD44B4Cf0532a93312a2135afaB8)! If you have a burning question or just want to drop us a line, feel free to join our [Slack channel](https://join.slack.com/t/sq-ui-kit/shared_invite/zt-6sfsgfgm-NVIG8lgR~205VjxsuSG8Gg)!
Power of JS: reduce
Tags: javascript
Published: 2021-05-08 14:22:16

//  You will be given an array of several arrays that each contain integers and your goal is to write a function that will sum up all the numbers 
// in all the arrays. For example, if the input is [[3, 2], [1], [4, 12]] then your program should output 22 because 3 + 2 + 1 + 4 + 12 = 22. 
// Solve without and with reduce.


//without reduce


const sumofsubarray = (arr) =>{

    let result = 0;
    arr.map((elem)=>{

    // console.log(elem)
    elem.map((eleme)=>{

        result+=eleme;
    })


    })

    return result


}


// console.log(sumofsubarray([[3, 2], [1], [4, 12]]))



//with reduce function

const arr = [[3, 2], [1], [4, 12]]

console.log(arr.reduce((t,e)=>t.concat(e)).reduce((t,e)=>t+e))
Generate random hex color with vanilla javascript
Tags: javascript, webdev, devops
Published: 2021-05-08 14:20:17

this video is describes that how you can generate random hex color with vanilla javascirpt ! and it's mainly focused on intresting javascript part ! just go through the link hope you will enjoy the video :) ! 

https://www.youtube.com/watch?v=r6Mx_7iMg3s&t=7s
Data types in C
Published: 2021-05-08 14:04:38

A data type specifies the type of data that a variable can store such as integer, floating, character, 
etc.
C Data Types
There are the following data types in C language.
Types Data Types
Basic Data Type int, char, float, double
Derived Data Type array, pointer, structure, union
Enumeration Data Type enum
Void Data Type void
Basic Data Types
The basic data types are integer-based and floating-point based. C language supports both signed 
and unsigned literals.
The memory size of the basic data types may change according to 32 or 64-bit operating system.
Let's see the basic data types. Its size is given according to 32-bit architecture
Data 
types
Memory 
size
Range
char 1 byte -128 to 127
Signed char 1 byte -128 to 127
Unsigned
char
1 byte 0 to 255
short 2 byte -32,768 to 32,767
Signed short 2 byte -32,768 to 32,767
Unsigned 
short
2 byte 0 to 65,535
Int 2 byte -32,768 to 32,767
Signed int 2 byte -32,768 to 32,767
Unsigned int 2 byte 0 to 65,535
Short int 2 byte -32,768 to 32,767
Signed short 
Int
2 byte -32,768 to 32,767
Unsigned
short int
2 byte 0 to 65,535
Long int 4 byte -2,147,483,648 to
2,147,483,647Signed long
int
4 byte -2,147,483,648 to
2,147,483,647
Unsigned long 
int
4 byte 0 to 4,294,967,295
How to convert html table to CSV file
Tags: html, javascript, table, csv
Published: 2021-05-08 13:59:55



To convert a table to csv file you have to create html table and then give the table tag an id for referencing the table.

```html
<!DOCTYPE html>
<html>
<head>
  <title>how to convert table to CSV file</title>
</head>
<body>
      <table style="width:100% "id="id1">
   

 <tbody>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
    <tr>

     <td>orange</td>
     <td>#210</td>
    </tr>
   

    <tr>

      <td>apple</td>
      <td>#400</td>
    </tr>

    </tbody>

</table>

<button onclick="download_table_as_csv();">Convert To CSV File</button>

```

now we'll now create js code that will convert the table to csv file

```html
<script >
              function download_table_as_csv(table_id="id1", separator = ",") {
                // Select rows from table_id
                var rows = document.querySelectorAll("table#" + table_id + " tr");
                // Construct csv
                var csv = [];
                  //looping through the table
                for (var i = 0; i < rows.length; i++) {
                    var row = [], cols = rows[i].querySelectorAll("td, th");
                       //looping through the tr
                    for (var j = 0; j < cols.length; j++) {
                       // removing space from the data
                        var data = cols[j].innerText.replace(/(\r\n|\n|\r)/gm, "").replace(/(\s\s)/gm, " ")
                         // removing double qoute from the data
                        data = data.replace(/"/g, `""`);
                        // Push escaped string
                        row.push(`"` + data + `"`);
                    }
                    csv.push(row.join(separator));
                }
                var csv_string = csv.join("\n");
                // Download it
                var filename = "export_" + table_id + "_" + new Date().toLocaleDateString() + ".csv";
                var link = document.createElement("a");
                link.style.display = "none";
                link.setAttribute("target", "_blank");
                link.setAttribute("href", "data:text/csv;charset=utf-8," + encodeURIComponent(csv_string));
                link.setAttribute("download", filename);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            }

             </script>
</body >
</html>
```


when you click on the Convert To CSV File button the table will convert to csv file
<br>
Am always ready to learn, for any addition feel-free to comment
Interview Related Discussion On JavaScript.
Published: 2021-05-08 13:58:47

 Further information: List of current sovereign monarchs, List of current reigning monarchies, and List of current constituent monarchs
Part of a series of articles on
Monarchy
Heraldic royal crown
Central concepts
Types
People
History
Related topics
Politics portal
vte
Currently (as of 2016), fifteen kings are recognized as the heads of state of sovereign states (i.e. English king is used as official translation of the respective native titles held by the monarchs).

Most of these are heads of state of constitutional monarchies; kings ruling over absolute monarchies are the King of Saudi Arabia, the King of Bahrain and the King of Eswatini.[6]
How pageExtensions helped me migrate from CRA to NextJS
Tags: nextjs, react
Published: 2021-05-08 13:56:47

I had the following file structure for pages in my Create React App Project.

```javascript
/components
  /Navbar
    index.js
    Navbar.js
    Navbar.scss

/pages
  /Home
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.scss
    index.js
    Home.js
    Home.scss

  /About
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.scss
    index.js
    About.js
    About.scss
```

We use a components directory inside pages directory to nest all page related components inside the `pages/<page-name>/component` directory as they are only going to be used in that particular page and not intended to be reused by other pages. This is more for modularity than reusability.
For reusable components, we use the top level components/ directory. For components such as `Navbar`, `Footer`, `Button`, etc. 

While migrating to NextJS, this pattern will be an issue because NextJS by default will create a route based on the directory structure you have inside the pages directory.
So by default, NextJS will build a page for route `localhost:3000/Home/components/HeroSection` which isn't really what we intend to do here.

Solution :- 
Use `pageExtensions` in your `next.config.js`

```javascript
// next.config.js
module.exports = {
  pageExtensions: ['page.js']
};
```
What we are doing here is letting NextJS know that all our pages will be suffixed with `page.js`. So our pages will now be `index.page.js`

Now directory structure in NextJS will update to :-
```javascript
/components
  /Navbar
    index.js
    Navbar.js
    Navbar.module.scss

/pages
  /home
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.module.scss
    index.page.js <-- UPDATED
    Home.js
    Home.scss

  /about
    /components
      /HeroSection
        index.js
        HeroSection.js
        HeroSection.module.scss
    index.page.js <-- UPDATED
    About.js
    About.module.scss

  _app.page.js
  _document.page.js
```

Keep in mind that when you do this, you will also need to update your `_document.js` and `_app.js` to `_document.page.js` and `_app.page.js`, respectively.

Another thing I had to update is use css modules for component level styling. More on that in another post.
Some tricky JavaScript questions you should know
Tags: javascript, beginners, trick
Published: 2021-05-08 13:50:51

Hello, all!!! Hope you guys are safe. Today I'll talk about some tricky parts of JavaScript which you should definitely know to increase your knowledge in JS.

**Truthy & Falsy Values**

Let's start with the easy one. Sometimes you may write conditions where you would need to define if a variable is true theb it might do something and if it is false it might do something else. Here's an example 

```
const age=4
if(age>0){
console.log('True')
}
else{
console.log('False')
}
```
Here you declared a variable called age and gave a condition that if `age>0` then it will print `True` otherwise it will print `False`. Pretty straight right? Even if you don't write `age` instead of `age>0` it will still print `True`(Try yourself in a IDE). It's happening because as variable age has a value other than 0 ,assigned to it it will always return `True` . So 0 here is called a `Falsy` value in JS.

So can you guess what should happen if I create a variable named `name`and assign `empty string` to it . What will be answer?

```
const name=''
if(name){
console.log('True')
}
else{
console.log('False')
}
```
If you ran the code you know the result. The answer is `False`.So, you may already have a guess that JS basically treats any empty or null value as `Falsy` values. So you might be asking what about empty arrays and objects? Both of them are `Truthy` values because when you initiate an array or object without a property you are still creating a object. Objects are considered `True` in JS. Array is also a type of Object. 

Below here is a list of `Truthy` and `Falsy` values in JS. Please also check them by yourselves in your IDE.

**Falsy Values**
```
number = 0
string = "" (no white space)
undefined
null
NaN
False

```

**Truthy Values**
```
'0'
string = " " ( white space)
[] (empty array)
{} (empty object)
true
'false' (It's a string)
```
finding max and min using divide and conquer rule
Published: 2021-05-08 13:39:37

#include<conio.h>
#include<stdio.h>
int main()
{
int i,j,a[100],max=0,min=1000,mid,n,max1,max2,min1,min2;
printf("enter the size of the array");
scanf("%d",&n);
printf("enter the elements of the array");
for(i=0;i<n;i++)
{
scanf("%d",&a[i]);
}
j=n-1;
int p=0;
if(p==j)
{
max=min=a[p];//wen der is only one element in array
printf("max is:%d and min is :%d",max,min);
}
else if(p==j-1)
{
if(a[p]<a[j])
{
max=a[j];
min=a[p];
}
else
{
max=a[p];
min=a[j];
}
printf("max is:%d and min is :%d",max,min);
}
else
{
mid=(int)((p+j)/2);
for(i=0;i<mid;i++)
{
if(a[i]>max)
{
max=a[i];
}
if(a[i]<min)
{
min=a[i];
}
}
max1=max;
min1=min;
printf("\nmax1 is :%d\n",max1);
printf("\n min1 is :%d\n",min1);
max=0;
min=1000;
for(i=mid;i<n;i++)
{
if(a[i]>max)
{
max=a[i];
}
if(a[i]<min)
{
min=a[i];
}
}
max2=max;
min2=min;
printf("\nmax2 is :%d\n",max2);
printf("\n min2 is :%d\n",min2);
if(max1<max2)
{
max=max2;
}
else
max=max1;
if(min1<min2)
{
min=min1;
}
else
{
min=min2;
}
printf("\nmaximum is:%d\n",max);
printf("\n minimun is:%d\n",min);
}
getch();
return 0;
}
Türkiye Açık Kaynak Platformu Çevrim İçi Pardus Yarışması Projeleri
Tags: pardus, acikhack
Published: 2021-05-08 13:39:04

# AçıkHack 2021 - Çevrim İçi Pardus Yarışması
Ben ve ekibimizden arkadaşlarımızın mentör olarak görev yaptığı, Türkiye Açık Kaynak Platformu'nun düzenlediği "Çevrim İçi Pardus Yarışması" kapsamında 2 haftalık eğitim ve yarışma süreçleri sonucunda projeler halka açık olarak duyuruldu. İlgili projelere aşağıdaki bağlantılardan ulaşabilirsiniz.

## takım-1

https://kod.pardus.org.tr/kataliz/pardus-kataliz

## takım-2

https://kod.pardus.org.tr/muhammedogz/cizgirgec-basit-ekran-goruntusu-programi-parya

## takım-4

https://kod.pardus.org.tr/mesirmacunu/mouse-position-analyzer-pardusacikhack

## takım-5

https://kod.pardus.org.tr/mert/zabit

## takım-6

https://kod.pardus.org.tr/tugbaficici/mangala

## takım-7

https://kod.pardus.org.tr/ozgur/pertev

## takım-8

https://kod.pardus.org.tr/nyx/oyun-parki-ui

## takım-9

https://kod.pardus.org.tr/rumeysakara/quickly-web-manager

## takım-12

https://kod.pardus.org.tr/yesilyurtismail/Pars

## takım-13

https://kod.pardus.org.tr/turker.tunali/ufuk
HTML Basics from a Newbie: Part 1
Published: 2021-05-08 13:37:08

###Learn the basics of Hyper Text Mark-Up Language from *A Code Newbie*
---
##HTML Introduction

####What is HTML?
- HTML stands for Hyper Text Markup Language
- HTML is the standard markup language for creating Web pages
- HTML describes the structure of a Web page
- HTML consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc.

####A Simple HTML Document Example
```html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>
```

###Example Explained
1.  The `<!DOCTYPE html>` declaration defines that this document is an HTML5 document
2.  The `<html>` element is the root element of an HTML page     
3.  The `<head>` element contains meta information about the HTML page
4.  The `<title>` element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab)      
5.  The `<body>` element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
6.  The `<h1>` element defines a large heading
7.  The `<p>` element defines a paragraph

---

###What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag:

- `<tagname>`Content goes here...`</tagname>`
The HTML element is everything from the start tag to the end tag:
```html
<h1>My First Heading</h1>
<p>My first paragraph.</p>
```
---
###HTML Tags
HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

- All HTML tags must enclosed within `< >` these brackets.
- Every tag in HTML perform different tasks.
- If you have used an open tag `<tag>`, then you must use a close tag `</tag>` (except some tags) for example `<br>` & etc

**Examples of tags to name a few**

| Start tag | Element content |	End tag |
|-----------|-----------------|---------|
|`<h1>`     |My First Heading |`</h1>`  |
|`<p>`      |My first paragraph|`</p>`  |
|`<br>`     |	none           |none    |

---
**_Happy Coding To My Fellow Newbies_**
>"Coding Becomes easier when you understand how things works under the hood" - Frank the Code Newbie
All About Switching Branch In Git 🚀
Tags: git, github, webdev, beginners
Published: 2021-05-08 13:35:32

Whether you're an open-source contributor, project manager, or even a normal github user for personal projects maybe, you need to know how to Switch Branches In Git. 

So let's get started!!

## How to create a new branch
Normally you use `git checkout` with a `-b` flag and pass a name for the branch.

If you are on the branch called `master`, this will be the case for you:
```
$ (master) git checkout -b new-branch
Switched to a new branch 'new-branch'
$ (new-branch)
```

## How to switch to an existing branch
To switch to an existing branch, you can use `git checkout` but without the `-b` flag and pass the name of the branch you want to switch to, something like this:

```
(new-branch)$ git checkout master
Switched to branch 'master'
(master)$
```

## Bonus:
There is a shortcut to return the previous branch you were in, you can just use `-` after `git checkout`
```
(master)$ git checkout -
Switched to branch 'new-branch'
$ (new-branch)
```

**PLEASE FOLLOW, LIKE, SHARE, AND COMMENT**

Follow me on [Dev](https://dev.to/garvitmotwani) and [Twitter](https://twitter.com/GarvitMotwani)

You should also check:
{% link https://dev.to/garvitmotwani/8-javascript-tips-tricks-that-no-one-teaches-24g1 %}

{% link https://dev.to/worldindev/200-js-resources-to-master-programming-3aj6 %}

{% link https://dev.to/worldindev/6-python-tips-tricks-that-no-one-teaches-4j73 %}

Subscribe to our [newsletter](https://worldindev.ck.page/)
Writing mathematical formulas in HTML
Tags: webdev, html, tutorial, tip
Published: 2021-05-08 13:33:30

Hello, today we are going to learn how to write mathematical formulas in HTML, for example, to insert them on a website. 


### How to use letters in a calculation ?
The first and most important thing to learn when doing calculations with letters is to write them in such a way that they can be distinguished from the text. Thanks to HTML you can directly write letters as variables with the `<var>` tag. We notice that the letters are slightly italicized and slightly bolded.

{% codepen https://codepen.io/clement-gaudiniere/pen/MWpYdYN %}


### The exhibitors
For exhibitors, HTML allows you to directly exhibitors an element without necessarily using a cascading style sheet. To do this, we will use the variable `<sup>`.
To repeat the previous example :

{% codepen https://codepen.io/clement-gaudiniere/pen/ExWaJqV %}


### The roots
After having seen the exponents, we will learn the roots, which are not necessarily easy to write. To achieve it, you must necessarily go through the CSS.
You can for example copy the code below :

{% codepen https://codepen.io/clement-gaudiniere/pen/qBrEGZR %}

The problem with this code is that the horizontal bar of the square root is realized with the border property. So in some cases, if the display window is too small, the formula may be distorted. This is why many sites prefer images to handle square roots.


### The fractions
First we will look at fractions, which can be problematic to create in HTML. There is no ready-made tag to create fractions, so we have to use CSS. The code is available below :

{% codepen https://codepen.io/clement-gaudiniere/pen/jOBERJX %}

### The vectors
Vectors are particularly useful in physical sciences, you will see later that the code is not very complicated.
For this example, I took the fraction seen before and I applied arrows on the letters.
The vectors for capital letters are designated by the class: `oncapital` and the vectors for small letters by the class: `onsmall`.

{% codepen https://codepen.io/clement-gaudiniere/pen/gOmbVRm %}

### The sum
To make a sum in HTML and CSS :

{% codepen https://codepen.io/clement-gaudiniere/pen/QWpwemx %}

### The integrals
To make an integral in HTML and CSS :

{% codepen https://codepen.io/clement-gaudiniere/pen/zYZxgag %}


I hope you enjoyed this tuto, feel free to suggest other tips in comments.