teleren/devto huggingface dataset:
JS: How to Check if a password is valid and make your site more secure
Tags: javascript, tutorial, webdev, codequality
Published: 2021-02-08 08:01:57

`Hello World!` The height episode of the series  - A CSS/JS trick in 5 minutes.
My first ever [Dev.to article](https://dev.to/devlorenzo/the-fabulous-list-of-all-form-input-types-48ig) was about HTML forms, in the last part, I explained you how to check if a password is valid. I will do the same here while going a little bit deeper.

--- 

We can have a lot of different types of password blockers. From the narrowest to the freest.

We first can just have  a length validator:
```
function CheckPasswordLength (password) {
  if(password.length < 8 or password.length > 16) {   
     return false;  
  }  else {
     return true;
}
```


Then we can use regex for a more advanced test:
```
function checkPassword (password) { 
  var paswd =  /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{8,16}$/;
  if(password.value.match(paswd)) { 
   return true;
  } else { 
   return false;
  }
} 
```
This condition will check for numbers, special characters, uppercase, lowercase and length.

if you don't know how regex work, check this:
>  A JavaScript Regular Expression (or Regex) is a sequence of characters that we can utilize to work effectively with strings. Using this syntax, we can search for text in a string, replace substrings in a string or extract information from a string.
> Check [this article](https://itnext.io/javascript-fundamentals-understanding-regex-fd81891375e0) to learn more about regex.

---

I also highly recommend you to add a code to check that the two passwords inserted are the same:
```
function checkMatching(password, confirmationPassword) {
  if (password.value === confirmationPassword.value) {
    return true
  } else {
    return false
  }
}
```
---
If you need it I also did [an article on how to check if an email is valid](https://dev.to/devlorenzo/js-check-if-an-email-is-valid-23m4).

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

[Check this article about how to write CSS like a pro!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)
Elixir: Handy debug chain-able pretty-print function
Tags: elixir, todayilearned, showdev, debug
Published: 2021-02-08 08:01:51

I picked up Elixir last year at work. While some debugging tools are good to casual debug things in Elixir, `IO.puts/2` and `IO.inspect/2` are sometimes much faster to show what I wanted to see in the console log output.

The drawback of `IO.puts/2` is that it can only take a strings. It will fail if you pass in anything else, try a map or list! Using `IO.inspect/2` is nice and all but I found that a lot of times the output just got lost in the logs.

I came up with a simple way to format the output so that it could be found easily in the logs by giving it a different color than the typical green or blue output text and set a label to each output so that in the cases I have more than one output at a time, I would know which one is for which.

In the example below, you can see how simple it is to use. I’m using it with a map in this case. I named the function `D.pp\2` (in the `D` module in my project by the way.)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7t09k7de8tz8ny20gumc.png)

As you can see it returns the map to be chained:

```elixir
%Membership{}
|> changeset(params)
|> put_assoc(:stakeholders, [])
|> D.pp("Changeset after put assocs stakeholders") #<-------
|> touch(user)
|> Repo.insert()
```

In the example above, `D.pp/2` is put in between the pipes to show the value of the changeset after put_assoc so I could see what is the changeset value at that exact point, and wouldn’t mess up the data in the workflow.

Or I could use it in tests:

```elixir
response = build_conn()
|> as_user(context.regular)
|> get(context.path)
|> D.pp("after get") #<--------
|> json_response(200)
|> D.pp("received response") #<---------
```

Here is the function!

```elixir
def pp(what_to_print, debug_message \\ "") do
  IO.puts("#{IO.ANSI.yellow()} START #{debug_message} ====================")
  IO.puts(IO.ANSI.yellow() <> inspect(what_to_print, pretty: true, limit: :infinity))
  IO.puts("#{IO.ANSI.yellow()} END   #{debug_message} ====================\n\n")
  what_to_print
end
```

Maybe the next step is to create its own module and allow users to configure settings for each project for color, infinity limit, etc…? You can simply put this in your project in a module named D or Debug and call it like how I call it D.pp

Please let me know in the comment if you have any question and if you find it useful in your project, please help me out by letting me know here, mention me somewhere and/or hit that love button! Thank you.
Find Me Here
Tags: social, websites, github
Published: 2021-02-08 07:59:37

[repl.it](repl.it/@alpinstang)
[alpinstang.com](alpinstang.com)
[alpinstang.github.io](alpinstang.github.io)
[dev.to](dev.to/alpinstang)
[Stack Overflow](https://stackoverflow.com/users/4379163/john-m)
[Twitter](https://twitter.com/jmcdonald91)

<center>Send Doge
![DGxBQsB3RcNWeWoLgDPDqpyckErXzER2UL
](https://dev-to-uploads.s3.amazonaws.com/i/gl0bx8sf8qxzb8r41ihm.png)
</center>
<div>--------------------------------------------------</div>
<center>Send Bitcoin
![33AG7c7gsW6fa4kK4hH474Yhw48VfJePdy](https://dev-to-uploads.s3.amazonaws.com/i/5o07sfenm5t4w3k7z9k2.png)
</center>
Build full UI for Live Streaming App
Published: 2021-02-08 07:51:40

In this App i design full UI with functionality related to UI. and add firebase authentication for google and facebook.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/92s9dcqfi7p43q5ux87p.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4wf0tesvjedic251wyrw.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/88j5ft781yrlkq6x8rhe.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/4im88ts9xf1p8qgpb543.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bgqj617nppinlke1jq8k.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a1xxxbm30pxij198qpo8.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h2dsxluewm3g5o0cc77p.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/x4yw8vpck7bhe91axasn.png)
Why do we need Longtail Keywords for SEO?
Published: 2021-02-08 07:47:47

Long-tail keywords are low volume, hyper-focused keywords that people use when searching, especially when they’re ready to buy or want answers to concrete questions on a subject. Best Keyword research tool for getting higher rank in search engines.

Drive more organic traffic
Have less competition
Target a specific audience
Have higher conversion rates
It's easier to rank
Rule of thumb: let vs. before
Tags: rspec, ruby, testing
Published: 2021-02-08 07:45:32

Sometimes I see code like this:
```ruby
describe ".active" do
  let!(:active_accounts) { create_list(:active_account, 2) }
  before { create_list(:pending_account, 3) }

  it "returns only active accounts" do
    expect(described_class.active).to match_array(active_accounts)
  end
end
```

This spec is a bit misleading. Why we create some dependencies in `let` and some in `before`? What is hidden here? What is the purpose of those accounts created in `before`? Usually the answer is this: we are not accessing inactive accounts in the test, so we don't need a variable, we just create them in `before`.

To make test clear, it is better to always stick to the rule: use `let` to create and specify dependencies, and `before` - to bring the system under test to the desired state:

```ruby
describe ".active" do
  let!(:active_accounts) { create_list(:active_account, 2) }
  let!(:pending_accounts) { create_list(:pending_account, 3) }

  it "returns only active accounts" do
    expect(described_class.active).to match_array(active_accounts)
  end
end
```
CSS: Border animations that can make your sites more professional and good looking
Tags: css, tutorial, webdev, html
Published: 2021-02-08 07:44:32

`Hello World!` The seventh episode of the series  - A CSS/JS trick in 5 minutes.
I did [an article about CSS gradient animations](https://dev.to/devlorenzo/css-how-to-make-a-gradient-animation-3a63) and I wanted to do a follow-up. In reality, I think I will do three or more. In this one, I want to explain to you how to do a slow border animation. 

--- 

We do not need to excessively style our container, we just give it padding, a border, and if you want (recommended) a border-radius. You can after insert everything you need in the div (or make it act as a button):
```
#container {
  border: 5px solid blue;
  border-radius: 10px;
  padding: 35px;
  width: 380px;
  animation: borderSpin 5s ease infinite;
}
```
In that part of the animation you can change duration time in seconds and type after that. 

Then we have the animation:
```
@keyframes borderSpin {
  0% {
    border-color: #bdc3c7;
  }
  25% {
    border-color: #2c3e50;
  }
  50% {
    border-color: #c33764;
  }
  75% {
    border-color: #1d2671;
  }
  90% {
    border-color: #141e30;
  }
  100% {
    border-color: #6dd5ed;
  }
}
```
Border will slowly change color until he reaches the end. Then after a quick change, it will return to the first color. You do not absolutely need to add this much breakpoint, just three (0%, 50% and 100%) should be enough.  

---

I did 4 different colors examples for you who can be easily copied on [this codePen](https://codepen.io/DevLorenzo/pen/zYoBObq).

[Live preview:](https://codepen.io/DevLorenzo/pen/zYoBObq)
{% codepen https://codepen.io/DevLorenzo/pen/zYoBObq %}

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

Remember to check [this link](https://dev.to/devlorenzo/css-how-to-make-a-border-animation-part-2-46fm) for part 2 (more advanced and cool animations).
Permission denied (publickey). fatal: Could not read from remote repository.
Tags: github
Published: 2021-02-08 07:44:23

When you get this error from your git cli, this means your local machine has a problem with github's shh keys so the solution is: 
1. Open the .git folder in your project directory(its a hidden folder so make sure to check that you are able to view hidden files and folders on your computer)
2. Use your favorite text editor like vscode to open the file named **config**
3. edit the line with 
**url = git@github.com:username/repo**
and replace it with your repository url(can be found on github under https when you click the green "code" button). it should look like this
**url = https://github.com/username/repo**
save then try to push your code to github. this will prompt you to login and that should fix the issue since your ssh keys have been updated. Cheers
Also, chat on [twitter](https://twitter.com/CoucoSeth)
MongoDB: $graphLookup & Aggregate
Tags: mongodb, graphlookup, aggregate, andreacarratta
Published: 2021-02-08 07:42:56

🍀 MongoDB in ambito produttivo come idea

❓ L'idea di usare MongoDB è buona, ma abbiamo un problema ...

Venerdì pomeriggio durante una chiamata col mio collega stavamo parlando di MongoDB per un lavoro ed è uscito in prima analisi uno scenario di lavoro interessante che -abituati a lavorare in SQL Server- ci lasciava spiazzati e con qualche timore.

❓La domanda che ci siamo posti era semplice ed è la seguente:  come fare a riprodurre le CTE recursive in MongoDB?


📜 Il quesito non ha superato il weekend e con una sessione di studio sono riuscito a risolvere il tutto adattandolo concettualmente al nostro caso. 

L'inizio è buono e come soluzione non mi dispiace per nulla. La parte divertente sara' quella di capire come spostare una logica SQL al mondo NoSQL un passo alla volta.

[Link Articolo Completo](https://blog.devandreacarratta.it/mongodb-graphlookup-aggregate/?utm_source=devto&utm_medium=coding-tips&utm_campaign=mongodb&utm_content=mongodb-graphlookup-aggregate)
Let's learn Flexbox!
Published: 2021-02-08 07:37:02

> CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. It is in the W3C's candidate recommendation stage. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size.

### Category Image Box with Image Zoom Effect Using Flex
While building an ecommerce website I needed a front page that really showcased the products and grabbed the potential customer's attention. Using a beautiful image with elegant category text and a smooth animation really did the trick. I've put the markup and css up on CodePen. I wrote the css in [SASS](https://sass-lang.com/).

[CodePen Example](https://codepen.io/alpinstang/pen/xxEzepB)

In the process I found a great image placeholder site. Rather than placeholder.com style gray boxes, it provides nice pretty sample images. I recommend it for prototyping and placeholder image content in development. Check it out here: [Lorem Picsum](https://picsum.photos/)

*Happy coding!*

_John_
Making a Twitch bot to connect to GitHub • Pair Programming
Tags: twitch, opensource, github
Published: 2021-02-08 07:34:52

When you want to learn something, doing it with a friend is so much easier. A colleague is also a perfect fit. That's what myself and [Bdougie](https://github.com/bdougie) did on our recent Open Source Friday live stream.

Since we both work on the Developer Relations team at GitHub, we thought this would be the perfect opportunity to learn and showcase awesome GitHub features simultaneously. Brian has been working with the GitHub API for a long time and I have been doing a lot of streaming. What better way to work together than use the GitHub API to make Twitch integrations and use them for the [GitHub Twitch channel](https://twitch.tv/GitHub).

## Twitch bot and the GitHub API

Making a Twitch bot and using the GitHub API is no trivial task. Luckily, Bdougie has been doing some work on it already. He put together an [open source repo](https://github.com/bdougie/git-twitch) which utilises webhooks to talk to Twitch. By forking this repo and following the instructions, you can make the Twitch bot work for your channel.

{% github bdougie/git-twitch %}

This is exactly what we did on the live stream. We took it from the top and showed viewers how to fork a repo, use various editors to make changes, and then add to OBS. We showed off [Codespaces](https://github.com/features/codespaces), [GitHub Desktop](https://desktop.github.com/), and how to use (plus hide) secrets.

If you missed the stream you can watch the full recording:

{% youtube yv69xX9_IaI %}

## Open Source Fridays

Does this type of content sound really cool to you? Do you like the idea of pair programming? Want to learn more about open source projects? Come along to our Open Source Friday live streams. We go live on the [GitHub Twitch Channel](https://twitch.tv/GitHub) most Fridays. Join the [Meetup Group](https://www.meetup.com/en-AU/pro/github-virtual-meetup) to stay up to date and see the topics each week. Join the conversation from last week's stream on our [GitHub Community Forum](https://github.community/t/attended-making-twitch-bots-that-talk-to-the-github-api-let-s-chat/159453/2).

See you next stream, and in the meantime: happy coding. Don't forget to fork [Bdougie's repo](https://github.com/bdougie/git-twitch) to make your own bot and play around with some open source code.
CUDA, CuDNN, and Tensorflow installation on windows and Linux.
Tags: python, linux, deeplearning, machinelearning
Published: 2021-02-08 07:28:23

Deep learning task especially computer vision requires hardware for training purpose. Tensorflow-Gpu enables GPU for training using the CUDA.

We are going to install CUDA11.0 on windows and Linux.  Before starting the tutorial please check if your GPU Cuda enabled also install a GPU driver for your pc. Visit Here for Check CUDA GPUs | NVIDIA Developer  

## 1. For Linux Users( Ubuntu, Debian based)

Installation on Linux is quite easy compared to windows. Before installation please check the Nvidia GPU driver is installed properly.

You have to install 3 things.

1. Cuda 11.0 Update 1
2. Cudnn 8.1 

It will show the Driver details.

```bash
$ nvidia-smi
```

Download the Cuda 11.0 from [CUDA Toolkit 11.0 Update 1 Download | NVIDIA Developer](https://developer.nvidia.com/cuda-11.0-update1-download-archive?). We are installing “Cuda ToolKit 11.0 Update 1”.

After Downloading the File Run the below command to install Cuda.

![cuda installation](https://dev-to-uploads.s3.amazonaws.com/i/nimge7mbq7paaavv6ln9.png)

```bash
$ sudo sh Downloads/cuda_11.0.3_451.82_win10.exe
```

For downloading the Cudnn you need to create an account there. And then you can download the cuDNN. For downloading click here.

![cuDNN installation linux](https://dev-to-uploads.s3.amazonaws.com/i/9gllat53q3d4fl9szuy2.png)

Download all three files Developer, Runtime, and sample. Then run the following command.

```bash
$ sudo dpkg -i <path-to-dev-file>
$ sudo dpkg -i <path-to-runtime-file>
$ sudo dpkg -i <path-to-samples-file>
```

After installing Reboot your Pc then Run the following command to install Tensorflow-GPU.

```bash
$ pip install tensorflow-gpu
```

## 2. For Windows 10 users.
Installation on windows is a little bit tricky. You need some tools before starting the tutorial. 

    • Nvidia Graphis Driver
    • Visual Studio 2019
    • Microsoft Visual C++ 

Download the Cuda 11.0 from CUDA Toolkit 11.0 Update 1 Download | NVIDIA Developer. We are installing “Cuda ToolKit 11.0 Update 1”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/my9vo5jtxving6b9p9c6.png)
Download the cuDNN Library for Windows (x86).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/drvfhepoemg6bd20rf7y.png)

Extract the CuDNN library in the Download Folder. Under the extracted Folder There will be 3 Folders “include”, “bin” and “lib/x64”. Go to the "C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.0"

and Copy the content to extracted Folders to the CUDA/11.0 Respective Folder. There will be folder names include, bin and lib/x64.

After installing Reboot your Pc then Run the following command to install Tensorflow-GPU.

$ pip install tensorflow-gpu

## 3. Test the installation

For testing, the whole installation on windows and Linux are the same.
Open your terminal/cmd/powershell and type.

```bash
$ python
$ import tensorflow as tf
$ tf.test.is_gpu_available()
```

![test your tensorflow installation](https://dev-to-uploads.s3.amazonaws.com/i/gj44xvimzvte96rgzpyq.png)

It will show True and import some libraries.
Resort near Bangalore airport
Tags: hotel, accomodation, restaurant, swimmingpool
Published: 2021-02-08 07:21:22

Chairman’s Resort aims to combine business with leisure, recreation and fitness for it's members by providing a wide and comprehensive range of facilities and services exclusively for its valued members. The variety of amenities available, such as, accommodation, bar and restaurants, sports, conferencing and recreation facilities, and the provision to host both corporate and private functions. The resort is uniquely tailored to suit the lifestyle demands of today’s world.
Laravel 8 Tutorial -  Layouts Using Blade Routing with Controller
Tags: laravel8layouts
Published: 2021-02-08 06:39:03

Laravel 8 Tutorial - Layouts Using Blade Routing with Controller.
<a href="https://www.youtube.com/watch?v=QQyDsKUuNqk" target="_blank"><img src='https://i9.ytimg.com/vi/QQyDsKUuNqk/mqdefault.jpg?time=1613531700000&sqp=CLSUsoEG&rs=AOn4CLAEpz-_ZgcQ6YVmbtdDsxIy0Sm4aQ' /></a>
A simple and easy way to use the Blade templating engine to get a fully ready layout system.
We will create a few site pages (home, about, projects, contact). Here is a table of the pages that we will use and the layouts that they will use.
In this video can help you.Please click this link <a href="https://www.youtube.com/watch?v=QQyDsKUuNqk" target="_blank">Video</a>  .

Finally, we are done, hope this explains it very well, in case you miss anything or you did not follow all through, here is the code on my Github or My <a href="https://www.youtube.com/channel/UC80IlhuAl36zQdMSOyb3qgA" target="_blank">Youtube Channel</a>  . 
You can leave a comment, suggestion for improvement or corrections, don’t forget to follow me.
Laravel 8 Auth Registration and Login using Laravel Breeze 
Tags: laravelbreeze
Published: 2021-02-08 06:28:12

Hello,in this video can help you please click this link <a href='https://www.youtube.com/watch?v=O36PNJr8UJg'>Video</a>.I am going to show how to do user authentication in laravel 8.And how to solve npm run dev error.
<a href='https://www.youtube.com/watch?v=O36PNJr8UJg'><img src='https://i9.ytimg.com/vi_webp/O36PNJr8UJg/mqdefault.webp?time=1613531700000&sqp=CLSUsoEG&rs=AOn4CLDeGmkHZ4kMhyt5T9e1plMzdT4pWQ'/></a>
Laravel 8 Auth (Registration and Login)

Basic Laravel Login and Registration using Laravel Breeze

Customize Laravel Auth (Laravel Breeze Registration and Login)

Customize Laravel Jetstream (Registration and Login)

Finally, we are done, hope this explains it very well, in case you miss anything or you did not follow all through, here is the code on my Github or My <a href="https://www.youtube.com/channel/UC80IlhuAl36zQdMSOyb3qgA" target="_blank">Youtube Channel</a>

You can leave a comment, suggestion for improvement or corrections, don’t forget to follow me.
End-to-End MongoDB GraphQL Database, Chainlink External Adapter, and Oracle Contract on Ethereum
Tags: solidity, decentralization, ethereum, database
Published: 2021-02-09 07:10:26

---
title: End-to-End MongoDB GraphQL Database, Chainlink External Adapter, and Oracle Contract on Ethereum
published: true
date: 2021-02-08 06:12:43 UTC
tags: solidity,decentralization,ethereum,database
canonical_url: https://medium.com/coinmonks/end-to-end-mongodb-graphql-database-chainlink-external-adapter-and-oracle-contract-on-ethereum-2f2c5b8df6ce
---

[![](https://cdn-images-1.medium.com/max/2600/1*TRQ09ssP4Am7xlJqNlmNeA.jpeg)](https://medium.com/coinmonks/end-to-end-mongodb-graphql-database-chainlink-external-adapter-and-oracle-contract-on-ethereum-2f2c5b8df6ce?source=rss----721b17443fd5---4)

Learn how to set up MongoDB Atlas, GraphQL API Endpoint in Realm, Chainlink External Adapter and Job Spec, and Solidity Oracle Contracts.

[Continue reading on Coinmonks »](https://medium.com/coinmonks/end-to-end-mongodb-graphql-database-chainlink-external-adapter-and-oracle-contract-on-ethereum-2f2c5b8df6ce?source=rss----721b17443fd5---4)
VueJS in addition to HTML and CSS
Published: 2021-02-08 05:23:05

# VueJS? What's that?

VueJS is a framework for JavaScript. It is very easy to implement Vue into your code. All you have to do is create a script with the src pointing to the Vue library which can be found online. After that, you are able to use any and all elements of the VueJS framework within your own code.

# How I used VueJS with my resume: 

My thought process behind implementing VueJS was that I wanted to create a business card that would be easy to put on any website. I used the CSS grid style to my advantage with this and placed each element of the card on different parts of the grid. I then created the Vue elements that would be necessary for the card, like a first and a last name. I did this and added it to my h1 element in the html code. I utilized the loop functionality on two parts of the card to get information across easily and effectively. I added both an applications and skills section to the bottom left and bottom right of the card. Since it is easier to put these elements under bullet points, I used "li" and "ul" (I have to use "" instead of <> because markdown will actually create a list in this post) in the html code and pulled the information from the Vue component. Overall, I think it is beneficial to use VueJS in order to improve readability and lessen the amount of code that you have to use in html. I think that you can do more with less (in terms of code) with the framework and it lessens the amount of headaches you'll have trying to implement different types of code across html.

# Links

[Video explaining how I used VueJS](https://youtu.be/KkI5fIwtwA0)

[Codepen source of my business card](https://codepen.io/intuitive-tech/pen/gOLrVrp)