teleren/devto huggingface dataset:
What You Need About WebComponents 
Published: 2020-03-30 03:10:02

Web components is now available in almost every browser (and those where it’s not innately included, polyfills can be used). Web components is not just one specific thing, but rather refers to myriad of technologies. These include Custom Elements, Shadow DOM, ES Modules, and HTML Templates. 

The benefits of utilizing web components is very beneficial for businesses. For starters web components are very difficult to build from the ground up, since the current process has be revised and updated through users libraries. Its known that utilizing a library isn't quite necessary for web components but it makes the process easier to manage for efficiency depending on your needs.    

To concluded, web components are vital to large business that uses many webpages, such as Youtube, Epic games and verizon. the copy & paste snippets feature in order for the site to run efficiency. The web component features allows users to copy and paste the code into the browser. Hopefully, in the near future building sites will be more efficient and be compatible utilizing code without  rewriting code from the start.

Youtube: https://youtu.be/jyqAiXdDg9o
Stuck with Authentication For Your New Product/Website?
Tags: go, authentication, jwt, security
Published: 2020-04-01 17:59:07

Authentication is one of those things that I've seen almost everybody struggle with. Whether you're using 3rd party services like Firebase Auth or developing your in house solution using something like Passport.js, everyone seems to be reinventing the wheel (although just partially).

I am one of those who tried to build an in-house solution. And after realizing how painful it can be, I decided to turn it into a microservice for anyone to use.

### A Quick Introduction
The service itself is written in Golang and use MongoDB for database. It's built using goa ([https://github.com/goadesign/goa](https://github.com/goadesign/goa)). It's main purpose is to handle all the things around authentication such as signup and login, token management, session management etc. It uses JWTs as primary authentication mechanism.

It also has support for multiple social-media logins out of the box. These are Google, Instagram, Facebook, LinkedIn, and Twitter. You can selectively choose to use some or all of them or none at all.

It also has a robust logger, and a request rate-limiter as well, which again can be disabled easily if you like.

### Using The Service
It is basically an independent microservice that you can fork and modify for any custom features, or just clone and deploy to start using in your projects. 

Doesn't matter what client you want to use it with, you can simply use the [openapi-generator](https://openapi-generator.tech/) to generate direct SDKs that take care of most of the implementation details of the service.

For verifying tokens in other backend services, you may simply use the same JWT Public and Private Keys to decode the token and get the claims, or just use the provided endpoint for the same,  whichever works better for you.

The steps to setup the service after cloning and running locally are mentioned in the README on GitHub repo.


There are certain things that are still not complete yet, none of them would stop you from using the service though.

### TODO:
- Add Tests
- Implement service stubs for Email and SMS
- Add email notifications for user actions

**You may find the repo [here](https://github.com/anshap1719/authentication)**

Feel free to fork/contribute and use it for your own projects any way you'd like.

P.S. It's my first post on Dev. I've been writing on Medium, but wanted to switch. Find my other blogs [here](https://medium.com/@anshap1719)
Arquivo YAML – O que é e para que serve?
Tags: tech, markup, yaml, yml
Published: 2020-04-04 21:01:45

---
title: Arquivo YAML – O que é e para que serve?
published: true
date: 2020-04-01 17:52:46 UTC
tags: Tech,markup,yaml,yml
canonical_url: https://marquesfernandes.com/arquivo-yaml-o-que-e-e-para-que-serve/
---

Você provavelmente se deparou com um arquivo com a extensão `.yaml` ou `.yml`, e está se perguntando o que é esse tipo de arquivo. YAML é um acrônimo recursivo em ingles e significa _Ain’t Markup Language_ (Não é uma linguagem de marcação). Segundo o website oficial: _YAML é uma serialização de dados amigável para humanos e padrão para todas as linguagens de programação._

Juntando com algumas outras definições que podemos encontrar na internet, podemos concluir que o YAML é um padrão de dados hierárquicos e legível por humanos que pode ser usado em conjunto com todas as linguagens de programação, e usualmente é utilizado para armazenar arquivos de configuração.

YAML foi proposto por [Clark Evans](https://pt.wikipedia.org/w/index.php?title=Clark_Evans&action=edit&redlink=1) em 2001 e no início de seu desenvolvimento significava “Yet Another Markup Language” (“Mais outra linguagem de marcação”), isso para distinguir seu propósito centrado em dados e não de documentos marcados. Isso significa que o YAML não propõe marcações e tags, apenas formatações e identificadores mínimos, focando realmente nos dados. Não se preocupe se você ainda não entendeu, ficará mais fácil de entender o que isso significa quando compararmos com algumas linguagens de marcação conhecidas.

## Exemplo de um arquivo YAML

```
nome: Henrique Marques Fernandes #Textoidade: 28 #Númerointereses: #Matriz - javascript - docker - flutterendereco: #Objeto pais: Brasil estado: São Paulo
```

Como podemos ver, não existem tags predefinidas, as próprias propriedades delimitam os dados, diferentemente do XML que possuí tags explicitas, o YAML se baseia na indentação e marcações mínimas para definir as informações.

Pontos Principais

- YAML é uma linguagem orientada a dados que possui recursos derivados de Perl, C, HTML e outras linguagens.
- O YAML é um superconjunto derivado do [JSON](https://marquesfernandes.com/o-que-e-json-e-para-que-serve/) que vem com várias vantagens internas, como comentários, auto-referência e suporte para tipos de dados complexos.
- Vários pacotes de software implementaram o YAML para criar poderosas ferramentas de gerenciamento de configuração.
- Infraestrutura de alto desempenho

Você pode ver mais informações técnicas sobre o YAML em seu [site oficial](https://yaml.org/) ou no site de referência da [Ansible – RedHat](https://docs.ansible.com/ansible/latest/reference_appendices/YAMLSyntax.html), ambos em inglês.

O post [Arquivo YAML – O que é e para que serve?](https://marquesfernandes.com/arquivo-yaml-o-que-e-e-para-que-serve/) apareceu primeiro em [Henrique Marques Fernandes](https://marquesfernandes.com).
Styling in Gatsby
Tags: help, gatsby, javascript
Published: 2020-04-01 17:49:57

---
title: Styling in Gatsby
published: true
description: 
tags: help,gatsby,javascript
---

I'm new to Gatsby so this may be silly question but here goes. I'm building a site with some pages created from markdown with createPages API all setup and working as it should but I have a question around styling. 

I have few pages in the main navbar and I'd like to style each with a different colour just to differentiate between them. Is there a way to do this? If so how? This is the template I setup to create the pages:

```javascript
import React from 'react'
import Layout from '../layouts/baselayout'
import { graphql } from 'gatsby'

const pagesTemplate = ({ data }) => {
  const page = data.markdownRemark
  return (
    <Layout>
      <div> <-- add something here to change colour??  -->
        <h2 style={{ textTransform: `uppercase` }}>{page.frontmatter.title}</h2>
        <div dangerouslySetInnerHTML={{ __html: page.html }} />
      </div>
    </Layout>
  )
}

export default pagesTemplate

export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`
```

Would I need to create separate layouts? Or could I use some JS to say if page title is home `color:red` if contact `color: blue` etc

On a separate note has anyone ever used Tailwind with Gatsby?

Any suggestions would be appreciated.
Material Elevate in SASS
Tags: sass, scss, material, elevate
Published: 2020-04-01 17:46:48

```scss
$box-shadow-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
$box-shadow-2: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
$box-shadow-3: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
$box-shadow-4: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
$box-shadow-5: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
$box-shadow-6: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
```


```css
.whatever-element{
box-shadow: $box-shadow-4
}
```
100daysofcode Flutter
Tags: flutter, 100daysofcode
Published: 2020-04-01 17:37:08

day 23/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

 Prepare for new App (Shop App), n latihan beberapa widget untuk membuat aplikasi
https://github.com/triyono777/100-days-of-code/blob/master/log.md
Web Components.
Published: 2020-04-01 16:57:11


Web components are a set of web platform API's tht allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. This means for a small organisation that has the ability to scale up it is easy to use the same button or template for all webpages with a few lines of code that can be copied and pasted which will save the coder multiple hours of coding. It also means that your website will have the exact same custom layout no matter where it is within the website. To see web components in use right click on a page and inspect the page. This will bring up the code behind the webpage and to see what line of code relates to which button it will highlight the line of code when you hover over the button, link or logo. Youtube is easy to spot their web components as the line of code starts with "yt" and is under the "ytd-app" within the body of the page. Websites that have millions of users and have a brand to upkeep need these web components so that they can keep the same quality over all pages. 
Gmail on the other hand does not have pretty code and instead uses 47 layers of divs which for a coder is hard to read and a misuse of HTML. 
IN conclusion web components are here to help us and not hinder us and will make creating a uniformed website easy and simple for beginners but also makes the website easy to scale up when the company does eventually does grow. 
https://www.youtube.com/watch?v=c49Tkjl-kGU
LeetCode: Unique Binary Search Trees II
Tags: leetcode, algorithms
Published: 2020-04-09 16:24:18

---
title: LeetCode: Unique Binary Search Trees II
published: true
date: 2020-04-01 14:36:00 UTC
tags: LeetCode,Algorithms
canonical_url: https://coderscat.com/leetcode-unique-binary-search-trees-ii
---

How to generate all the unique binary search trees with given values [1, N].

## [Challenge Description](https://leetcode.com/problems/unique-binary-search-trees-ii/)

## Depth-first search

We iterate each element in the array, use current element(suppose as k) as root node, construct left subtrees with [1, k-1], and construct right subtrees with [k+1, N].

This is a depth first search algorithm:

```cpp
class Solution {
public:
    vector<TreeNode*> generateTrees(int n) {
      vector<TreeNode*> empty;
      return n == 0 ? empty : dfs(1, n);
    }

    vector<TreeNode*> dfs(int begin, int end){
        vector<TreeNode*> res;
        if(begin > end){
            res.push_back(NULL);
            return res;
        }

        if(begin == end){
            TreeNode* pre = new TreeNode(begin);
            res.push_back(pre);
            return res;
        }

        for(int i=begin; i<=end; i++){
          vector<TreeNode*> left = dfs(begin, i-1);
          vector<TreeNode*> right = dfs(i+1, end);
          for(int m = 0; m < left.size(); m++){
            for(int n = 0; n < right.size(); n++){
              TreeNode* pre = new TreeNode(i);
              pre->left = left[m];
              pre->right = right[n];
              res.push_back(pre);
            }
          }
        }
        return res;
    }
};
```

## Optimization with memo

When we iterate the ranges, there are some duplicated computations could be cached.

For example, dfs(1, 2) is computed when 3 is root, it will be computed again when 4 is root.

So we could add a `map` to cache the result:

```cpp
public:
    map<pair<int,int>, vector<TreeNode*> > hmap;
    vector<TreeNode*> generateTrees(int n) {
      vector<TreeNode*> empty;
      return n == 0 ? empty : dfs(1, n);
    }

    vector<TreeNode*> dfs(int begin, int end){
        vector<TreeNode*> res;
        pair<int, int> key(begin, end);
        if(hmap.count(key))
            return hmap[key];

        if(begin > end){
            res.push_back(NULL);
            return res;
        }

        if(begin == end){
            TreeNode* pre = new TreeNode(begin);
            res.push_back(pre);
            hmap[pair<int, int>(begin, end)] = res;
            return res;
        }

        for(int i=begin; i<=end; i++){
          vector<TreeNode*> left = dfs(begin, i-1);
          vector<TreeNode*> right = dfs(i+1, end);
          for(int m = 0; m < left.size(); m++){
            for(int n = 0; n < right.size(); n++){
              TreeNode* pre = new TreeNode(i);
              pre->left = left[m];
              pre->right = right[n];
              res.push_back(pre);
            }
          }
        }
        hmap[key] = res;
        return res;
    }
};
```

The post [LeetCode: Unique Binary Search Trees II](https://coderscat.com/leetcode-unique-binary-search-trees-ii) appeared first on [Coder's Cat](https://coderscat.com).
UI Data table component library similar to Shopify's Polaris?
Published: 2020-04-01 16:36:05

Shopify provides a fairly spectacular set of UI components with really nice support for data tables (and "Resource lists" - fairly similar) with integrated support for filters and all the other bells and whistles that you'll usually find in a modern web app. 

https://polaris.shopify.com/components/lists-and-tables/resource-list#all-examples (select "Resource list with all of its elements" from the dropdown)

![Example](https://dev-to-uploads.s3.amazonaws.com/i/xy8hhifl50gx5q0d251v.png)



Only problem is we're not building a Shopify app, so the license prevents us from using it, but we love the library. The main react data table libraries I've found (react-table, etc) seem much better than building our own from scratch. Is there anything similar to Shopify's library out there?
Python sockets
Tags: python
Published: 2020-04-01 16:31:32

A socket lets you connect on the network byte level. The name in English comes from the electricity socket.

<a href="https://docs.python.org/3.8/library/socket.html">socket is Python module</a> you can use to fiddle around with the network. It lets you connect to a <a href="https://en.wikipedia.org/wiki/Server_(computing)">server</a> (or <a href="https://en.wikipedia.org/wiki/Peer-to-peer">p2p</a> node) and interact between the computers.

You can create a client or server at byte level, meaning you can implement your own protocols.

You can do this for a server too. This article is about the server side.

To start a server, it's as simple as (<a href="https://gitpress.io/@natamacm/socket-example-server1">source</a>)

```python
#coding: utf8
import socket

s = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
s.bind(('127.0.0.1', 1024))
s.listen(10)

conn, addr = s.accept()

r = conn.recv(1024)
print(r)

# s.send('hi client, this is greeting from server')

conn.close()
s.close()
```

You import the socket module, then define the port to listen on (1024), wait for connection and then communicate with the client.

A client can be an existing app (<a href="https://en.wikipedia.org/wiki/Web_browser">web browser</a>, ftp client, telnet) but this depends on what protocol your server application supports.

Telnet can be used to test the server:

```python
 telnet
telnet> o 127.0.0.1 1024
Trying 127.0.0.1...
telnet: Unable to connect to remote host: Connection refused
telnet> 
```

In this case the server is not running, otherwise you'd be able to run it. If you are implementing an existing protocol, it makes sense to test with existing software (client/server) to eliminate bugs that way.

Uncomment the line below to receive a message on the client.

```python
# s.send('hi client, this is greeting from server')
```

If you want to connect more than one client, you need to use multi-threading. But for a simple test single threading is fine.
Free Frontend NanoDegree for 30 days
Tags: beginners, news
Published: 2020-04-01 16:23:00

[Nano Degree Udacity](https://www.udacity.com/course/front-end-web-developer-nanodegree--nd0011)

I found this recently and its free for 30 days.

Program Overview
The goal of the Front End Web Developer Nanodegree program is to equip learners with the unique skills
they need to build and develop a variety of websites and applications. A graduate of this Nanodegree
program will be able to:
● Construct responsive websites using CSS, Flexbox and CSS Grid
● Develop interactive websites and UI (User Interface) applications using JavaScript and HTML
● Connect a web application to backend server data using JavaScript
● Automate application build and deployment using Webpack
● Improve offline performance of websites using Service Worker
This program includes 4 courses and 5 projects. Each project you build will be an opportunity to
demonstrate your growing web development skills and will help you demonstrate those skills to potential
employers or customers.
Estimated Length of Program: 4 months
Frequency of Classes: Self-paced
Prerequisite Knowledge: A well-prepared learner is able to:
● Layout a simple webpage using HTML
● Style a website element using CSS
● Write and test software with JavaScript
● Inspect websites using Developer Tools on a modern web browser (Chrome, Firefox, or Edge)
● Debug and troubleshoot errors and failures in JavaScript programs
Here is a [link to online syllabus](https://d20vrrgs8k4bvw.cloudfront.net/documents/en-US/Front+End+Web+Dev+-+nd0011+-+syllabus.pdf)
Hope this helps!
Get Live with Hacking 101 — Pilot
Tags: introduction, hacking, coursesandtraining, cybersecurity
Published: 2020-04-02 14:13:26

---
title: Get Live with Hacking 101 — Pilot
published: true
date: 2020-04-02 19:45:56 UTC
tags: introduction,hacking,courses-and-training,cybersecurity
canonical_url: https://medium.com/@ambermishra3011/get-live-with-hacking-101-pilot-90d59953283f
---

### Get Live with Hacking 101 — Pilot

Have you ever dreamt of sitting in a dark room wearing a hoodie? A room where you can only see laptops, PCs and bigger screens with red and green lights surrounding you. Yes! cutting the lost story short, have you ever thought of being a hacker? If your answer is YES! Then this coming thread is for you.

![](https://cdn-images-1.medium.com/max/1024/1*yy3OxD2QuqoVe9TX-tfmGw.png)<figcaption>Source: Avast</figcaption>

Hello reader, I’m Amber Mishra and I’ll be taking you on a roller coaster ride where the hacking concepts won’t be a dream for you anymore. I’ll be introducing you to the concepts of Vulnerable Assessments and Penetration testing.

This thread will be well-curated from the basics to everything that you want to know for the same. So, this is going to be a journey that will take you from being a noob to a chieftain in the domain.

![](https://cdn-images-1.medium.com/max/1024/1*V4n8KJtAjre4zFcGNR0WpQ.jpeg)<figcaption>Source: Incognito Forensics</figcaption>

I’ll be covering the following topics in this:

1) Footprinting and Reconnaissance

2)Scanning and Enumeration

3)Vulnerability Analysis

4)Malware Threats

5)Sniffing and Social Engineering

6)Denial-of-Service

7)Session Hijacking

8)Bypassing IDS, Firewalls, and Honeypots

9)Hacking Web servers

10) Hacking Web Applications

11)SQL Injections

12)Hacking Wireless Networks

13)Hacking Mobile Platforms

14)IoT hacking

15)Cloud Computing

16)Cryptography

Before starting with these topics I would also like to introduce you to the basic concepts of Networking, and terms that will be handy for you to go through the coming up threads. If you want me to address something more, feel free to mention it in the comments sections.

Starting with — Setting up Kali, MAC Spoofing, IP spoofing

PS- These threads will be just for the awareness and I don’t take responsibility for any of the stale use of it. I do not promote any wrong use of it.

-Amber Mishra
This is Really Bad
Published: 2020-03-21 09:42:21

There has recently been a huge development in the open-source world I refuse to stand for. A disturbance in the force, NPM was acquired by GitHub. This is a really bad deal. Now yes I am a common open-source advocate but I am fine with proprietary software as long as it chooses to be compatible. NPM joining GitHub is the worst thing to happen to open source, as NPM is then also owned by Microsoft as they own GitHub. 

I don't care that much about Microsoft, and this is NOT the first thing they bought or made that is open source and will most likely keep it open-source. I have seen worries that *"they can't be trusted"* because of things like the new Xbox using proprietary cards. No, that isn't what worries me. What worries me is that Microsoft will almost now own the world of JavaScript development. Not that just NPM is the largest JavaScript tool, but things are much much worse. TypeScript, a technology that has a high amount of love and a huge userbase. PYPL putting them at 11th place, higher than Golang at 14th place, and not far behind other languages like Kotlin and C/C++. The 2019 Stack Overflow survey shows that TypeScript is on the top 3 most loved languages, far above JavaScript itself.

The ownership of GitHub affects millions of developers, then there is TypeScript, then there is Visual Studio Code, and now NPM. This puts a very severe strangle-hold on JavaScript and if Microsoft wants to monopolize it, there is nothing stopping it. *"But Node isn't owned by Microsoft!"* you might say, and that is true. It is owned at least in part by the Linux Foundation and in full with the OpenJS Foundation. However we are talking about Microsoft, owners of TypeScript, F# (at least in part), C#, and a thing called Verona which seems to be a Rust clone, what's to say they won't just make their own version of NodeJS? Or that they won't just buy it?

Right now all we can do is speculate, watch, and prepare. We do not know what will happen, and we might be able to trust them, we just don't know, and that is why this is bad. It is not that we can't trust them, we don't know if we can.