teleren/devto huggingface dataset:
Full React JS Training | 30 Hours Course
Published: 2020-07-21 16:42:31

---
title:  Full React JS Training | 30 Hours Course 
published: true
description: Full React JS Training | 30 Hours Course 
tags: 
cover_image: https://i.ytimg.com/vi/ZWqfADc-0K8/hqdefault.jpg
---

Full React JS Training | 30 Hours Course 
Link Here --> 
https://www.youtube.com/playlist?list=PLIGDNOJWiL19gSS77cxozYBGpxeSYKmxz


https://www.youtube.com/watch?v=ZWqfADc-0K8&list=PLIGDNOJWiL19gSS77cxozYBGpxeSYKmxz&fbclid=IwAR2AtsDPhxHkTKgW2vASeyd4frF9pr4Mqzy3sbEFSyp8Xt4hVnz7Ju9ZtMM 

React JS 30 Hours Course 

I am covering Everything about React JS
Should you learn django rather than node ?
Published: 2020-07-21 16:40:16

This is a topic that many wouldnt get without trying it out first but I would like to save you some time by saying that you should learn node and let me explain why. While I was developing on Django there are certain pros for eg the inbuilt admin console auth services database etc but the problem is that for doing anything in django you have to do it a particular way the Django way node on the other hand is the exact opposite almost has nothing built-in but you can do everything your own way. And the main reason i'd choose node over Django is cause node uses JS which means it is the one language to rule them all in WEB DEV and inspite of all this if you have a lot of time and resources to put into it then Django is the option for you.
Liman eklenti yapısı
Tags: limanmys, eklenti, gelistirme, dev
Published: 2020-07-21 16:12:25

Bu yazıda Liman'da kullanılan eklentilerin genel yapısı hakkında bilgiler verilecektir. 

İlk olarak Liman'a eklenti geliştirmek için Liman'ın dosya yapısında bulunan /liman/server/.env dosyasındaki EXTENSION_DEVELOPER_MODE kısmı true yapılmalıdır.

```
EXTENSION_DEVELOPER_MODE = true
```
Bu işlemden sonra *Sistem Ayarları > Eklentiler* sekmesinden yeni butonunu kullanarak eklenti ismini belirledikten sonra oluştur diyebiliriz. Liman eklenti dosyalarını otomatik olarak /liman/extensions/eklenti_adı dizinine oluşturmaktadır.

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

Klasör yapısında bulunan scripts klasöründe eklentide çalıştırabileceğimiz Python betikleri veya Windows betikleri tutulur. Views klasöründe ise varsayılan olarak index.blade.php ve functions.php dosyaları bulunmaktadır. Bu dosyalardan index.blade.php dosyası aslında eklentinin front-end kısmıdır. Eklentinin ana sayfasını oluşturmaktadır. Eklentinin back-end kısmı için ise functions.php dosyası kullanılır. Eklentinin bilgileri ve ayarları db.json dosyasında tutulmaktadır. Örnek db.json içeriği aşağıda verilmiştir.

```
{
    "name": "Devto",
    "publisher": "Administrator",
    "version": "0.0.1",
    "database": [],
    "widgets": [],
    "views": [
        {
            "name": "index",
            "scripts": ""
        }
    ],
    "language": "php",
    "status": 0,
    "service": "",
    "supportedLiman": "1.1.7a",
    "support": "administrator@liman.app",
    "icon": ""
}
```

Genel anlamda yeni bir eklentinin klasör yapısı bu şekildedir.
In this lockdown, what new skills have you learned?
Tags: git, challenge
Published: 2020-07-21 16:39:33

They say we should be able to put new things on our resume every 6 months. What skills have you learned since March? Have you utilized this time to update your skills?
For me:
1. C (on the way)
2. Git
3. I finished a few online courses provided by google & TCS. 
5. Attended some advance Angular training. 
6. DS (on the way) 
7. Finally, I decided to start working on my portfolio.
8. I joined twitter so that daily I can learn new things from twitter dev family too.

If you didn't add any new skills in your resume please start today. Not too much daily try to learn at least two new things. Before sleeping just ask yourself what you learned today? Keep practicing. 

Happy Learning, Keep Learning .....
Transparent Caching Wrapper for Node
Tags: node, redis, typescript
Published: 2020-07-21 16:32:20

A simple transparent caching wrapper for Node. Wrap a function with it and call it like normal. And the cache stays warm with background updates, so it's always fast.

> Available on [GitHub](https://github.com/ehacke/transparent-cache)

Previously I covered a more sophisticated [caching solution for Firestore](https://asserted.io/posts/simplified-firestore-with-redis). However, you don't always need something that complex.

Sometimes you just want an expensive function call to be cached for 5 or 10 minutes to reduce load. This is often the case for read-focused operations where it's ok if the results are a little stale. Especially things like search results, image caching, certain computationally expensive operations, etc.

For that purpose I built this transparent caching wrapper.

## Features

- The cache is periodically updated in the background without blocking the primary call. So it's always fast.
- Simplicity. Just wrap any function and it becomes cached on the next call.
- Includes both local LRU cache and Redis cache levels. This improves speed and as a bonus minor network interrupts don't effect serving from the local cache.

## Use

In the most basic case, you can just supply the redis configuration, and then wrap the function.

{% gist https://gist.github.com/ehacke/175e8cb0fde60e0d427bb63f2307df13.js %}

Beyond that, you can specify global defaults for cache sizes and TTL.

{% gist https://gist.github.com/ehacke/80c746e3ef3bd0eed4958fa0bd89e115.js %}

And you can override any defaults at the moment the function is wrapped.

{% gist https://gist.github.com/ehacke/9afa50dca16eb8251fda192a4d4a33da.js %}

That's it! A simple caching solution for read-heavy operations.
COVID19 ContactTracing
Published: 2020-07-21 16:29:16

Hello Folks,
A couple of friends and I together developed a mobile application by the end of March 2020, while the number of COVID-19 cases was just started increasing.
We developed the app in just 8 days. After that, we tried to reach out to many Government officials and we spoke with many media channels but it was not of any use.
Everyone gave appreciation but never supported us, did not even check what we did. We wasted 2 months of time until then.
We had agreed to give the source code for free and we did not want to monetize it.
Nevertheless, We now felt to share it with the community and open-sourced the project on Github so that anybody interested can use it for the welfare of the society.

I have attached the Github link where you can find the technical details, pros, and cons of the project and the working demo of the application.
The Android version of the application is ready, Kindly PM me if you would like to have a look at and test our application.
Kindly feel free to Like or Share with your network if you feel it is worth sharing.

Github link: https://lnkd.in/e-_7-Cr

What are we trying to solve: https://lnkd.in/eSjcP5H

App working demo: https://lnkd.in/e2HQ-MY

#COVID19 #Pandemic #ContactTracing #StayHomeStaySafe #react-native #react #javascript #python #career
Email Validation API
Published: 2020-07-21 15:24:07

Twilio SendGrid created an email validation API to help companies verify their email addresses. This would help them keep their reputation and reduce their bounce rates. Harsh bounces that are caused by sending too many invalid email addresses are negative indicators that ruin the efficiency rate and reputation of a company. These email verification services correct typos, syntax, duplicates, invalid domains, and other errors as well as prevent firms from sending emails to invalid email addresses. Firms that receive these sort of risky email addresses or send emails to the wrong ones risk putting themselves and the company in jeopardy. This is why the platform Twilio SendGrid created as well as others are a must have in the business world. Not only are they a must, but they are the key to success and protection.

An Alternative: Verimail
Gmail, Microsoft Outlook, Yahoo, Apple and other well-known and successful platforms all have specific inbox algorithms in detecting falsifications, errors, or threats in email addresses.
Taking Verimail as an example, it uses not only  API, but also the bulk method to verify emails. Having multiple methods and options encourages users to try the tool. The service runs multiple checkups to monitor and check for the following errors:


Syntax
Duplicates
Invalid domains
Catch-all
Typos
Disposable
SMTP
Anti-greylisting

 
Why are email verification services like Verimail important in the business world?
Verimail is one of the essential email verification services that companies need to get used to using frequently to increase the efficiency and effectiveness of their marketing channels, reduce their bounce rates, avoid spams and risky email addresses, keep track of their customer base, and protect their data. With a tool like this one, all services are encrypted end-to-end encouraging users to make the most out of it.
Getting to know about React Native
Tags: beginners, reactnative, android, ios
Published: 2020-07-21 16:25:49

These days I find android apps very fascinating and learning it is my next target. As a web developer, I thought picking up React Native would be a great idea as it is based on my favorite library React. In this blog, I will be providing my opinions on React Native.

#Introduction
React Native is a framework that is built on React for the development of android and ios apps for native look and feel. It was released in 2015 and is being used by major companies since then. It can be used to build both ios and android apps. But it has its own shortcomings.

![](https://dev-to-uploads.s3.amazonaws.com/i/9mb18disjvhj199dvr5h.jpg)

#React Native vs Native Languages such as Java/Kotlin 
It is very obvious that Java/Kotlin being used for android development for a relatively long period of time than React Native. So it has great community support and it's quite easy to get into. And for React Native it's kind of a compulsion to know React or Javascript in general. But on the other hand React Native can develop apps on both the platforms android and ios.

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

#React Native vs web view technologies such as Cordova
Cordova is a technology used to convert basic web application into android and ios. But the disadvantage here is the app we develop in Cordova looks like a website Captured in a frame. And as React Native is also based on Javascript and also provides a native look It holds an advantage here.

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

#React Native vs Flutter
Flutter is similar to React Native but is released 2 years after it. It is quite new to the app development world but has gained its popularity soon after its introduction. It is written in dart which leads to the learning of a completely new language rather than using the existing languages. It's said that it is better than React Native because it overcomes various shortcomings that are being faced by React Native.

#My opinions on React Native
As a react developer I obviously like React Native as I can build android apps with my current skill set. But in the future, I would like to work on Flutter and also the native languages. I am happy that the development community is rising very fast to provide us the most interesting technologies around and I would like to explore more in the future.
#For Beginners
I would suggest if you are comfortable with React or Javascript in general then go for React Native otherwise learn any native language such as Kotlin or Swift. And another option is Flutter which is in my opinion by far the best option to learn a new language and build really good native apps.
How to write Netlify lambda function?
Tags: serverless, api, javascript, devops
Published: 2020-07-21 16:13:49

[Netlify](https://www.blog.guidefather.in/2020/07/how-to-publish-website-on-netlify.html) is an awesome service that offers Webhosting, Analytics, Free SSL, Netlify lambda functions, etc.
Today I will demonstrate Netlify lambda functions. [Netlify lambda functions](https://www.blog.guidefather.in/2020/07/how-to-publish-website-on-netlify.html) is a serverless backend service which can be used to perform any serverside task. Under the hood, it uses AWS lambda functions, but Netlify removes all the complexity and gives an easy to use interface and the best part it has a great free tier.
Before proceeding, I assume that you know how to deploy your website in Netlify, If not check out my article [How to use Netlify](https://www.blog.guidefather.in/2020/07/how-to-publish-website-on-netlify.html) on [GuideFather](https://www.blog.guidefather.in).
##Steps to write Netlify lambda functions
- To create a lambda function create a folder with any name you want (I am using API), inside that folder create a JS file( I am creating getJoke.js). keep in mind that the folder and file name will be the URL.
- Add the following code to the JS file (getJoke.js)
{% gist https://gist.github.com/guide-father/173e534b3a37ed07959163c477ac3f71.js %}
- Create a **netlify.toml** file and add the following code. This file will indicate which one is the function directory and what command to run
{% gist https://gist.github.com/guide-father/31508547712433be91e9dcfe79d493af.js %}
- Commit and push the code to GitHub, If the continuous integration is activated then your functions will be automatically deployed. You can verify the functions in the functions tab
![Function URL](https://dev-to-uploads.s3.amazonaws.com/i/w9k0cjd73t0xbzz2yfzx.png)
Netlify will provide you an URL from which you can access the code
For more info check my [article](https://www.blog.guidefather.in/2020/07/how-to-publish-website-on-netlify.html)

**Thank you for reading**
Liman üzerinde sunucular sayfasına yeni sekme eklenmesi
Tags: liman, dev, gelistirme
Published: 2020-07-21 16:12:01

Bu yazıda Liman MYS'de bulunan bir Linux sunucu üzerindeki kullanıcının, sudo yetkisinin kontrolü nasıl yapılır onu anlatacağım.

İlk olarak sunucular sayfasına yeni bir tab sekmesi eklenir. Ancak eklerken dikkat edilmesi gereken nokta sunucu tipinin Linux olduğu kontrol edilmelidir. Liman'da bu kontrol aşağıdaki gibi yapılmaktadır.

```
@if(server()->type == "linux_ssh" || server()->type == "linux_certificate")
```

Ardından if içeriğine tab sekmesi oluşturulur. Onclick özelliğine javascript fonksiyon ismi yazılır. 

Bu javascript fonksiyonunda bir request gönderilir. Request'in gönderimi aşağıda verilmiştir.

```
let data = new FormData();
request('{{route('server_user_permission')}}', data, function (response) { }
```

Bu request isteği aşağıdaki gibi sunuculara ait route işlemi ile kullanacağımız controller sayfası ve fonksiyonu belirterek gerekli fonksiyona yönlendirme yapılır. Aşağıda route işlemi gösterilmiştir.

```
Route::post('/sunucu/userpermission', 'Server\OneController@getUserPermission')->name(
    'server_user_permission'
);
```

Gerekli controller sayfasına giderek kullanacağımız fonksiyonu oluştururuz. Fonksiyon aşağıda verilmiştir.

```
public function getUserPermission(){

    $output = server()->run(
        sudo() . "-v"
    ); 
    if(empty($output)){
        $output =  true;
    }else{
        $output = false;
    }

    return [
        "result" => 200,
        "data" => $output,
    ];
}
```

Aldığımız sonucu javascript'te işleyerek kullanıcının sudo yetkisinin olup olmadığını arayüze aktarırız.

```
let output = JSON.parse(response);
if(output.data){
    result = "Server kullanıcısının sudo yetkisi vardır"
    classname = "alert alert-success"
}else{
    result = "Server kullanıcısının sudo yetkisi yoktur"
    classname = "alert alert-danger"
}
$('#serverUserPermissionDiv').html(result);
$('#serverUserPermissionDiv').addClass(classname);
```
Sonuç olarak aşağıdaki çıktı elde edilir. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l32n8xopcr3qhqyyn9al.JPG)
GitHub Profile README
Tags: github, git, jovan, jovanneves
Published: 2020-07-21 16:09:52

Sabemos que cada vez mais o GitHub se torna importante para desenvolvedores, tanto no quesito de repositório de código, quanto para ser usado em critério de análise de perfil para empresas.
Recentemente o GitHub disponibilizou um novo recurso muito interessante para nós usuários do GitHub e desenvolvedores, basicamente consiste em você poder criar um repositório para usá-lo como perfil pessoal da sua página do GitHub.
 
Com esse novo recurso você pode usar um arquivo README.md para criar um perfil para sua página inicial do GitHub, onde você pode inserir as principais informações de perfil público para a comunidade.

Como criar um GitHub Profile README?

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

1- Logado no seu GitHub clique em novo repositório.
2- Informe o nome do repositório “deve ser o mesmo nome do seu login”.
3- Selecione as opções “Public” e “Initialize this repositor with a README”.
4- Crie o repositório.
 
5- Após realizar a criação do repositório altere o arquivo README.md para sua necessidade.

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

6- Concluindo, realize o commit das alterações.

Simples assim, além de ter um repositório de código disponível para a comunidade, você pode deixar seu perfil mais agradável.

Contatos:
GitHub: https://github.com/jovanneves
Linkedin: https://br.linkedin.com/in/jovanneves
Free Kubernetes Consultancy Session (30 mins)
Tags: devops, architecture, codenewbie
Published: 2020-07-21 16:00:09

Are you working with Kubernetes or migrating to it?

Schedule a free one-to-one call with one of the volunteers of GetAdvice

https://getadvice.github.io/christian.melendez.html

Disclaimer: I'm the guy behind GetAdvice (volunteers are needed!!). This is a way to promote getadvice.github.io and get more volunteers and users into the site too.
hackerEnv - An Automation Tool That Quickly And Easily Sweep IPs And Scan Ports, Vulnerabilities And Exploit Them
Published: 2020-07-21 15:41:55



hackerEnv - An Automation Tool That Quickly And Easily Sweep IPs And Scan Ports, Vulnerabilities And Exploit Them
 3 HRS AGO  8:30 AM | POST SPONSORED BY FARADAYSEC | MULTIUSER PENTEST ENVIRONMENT
 ZION3R
      
 
 


hackerEnv is an automation tool that quickly and easily sweep IPs and scan ports, vulnerabilities and exploit them. Then, it hands you an interactive shell for further testing. Also, it generates HTML and docx reports. It uses other tools such as nmap, nikto, metasploit and hydra. Works in kali linux and Parrot OS. Do not run it in Qterminal, works in gnome-terminal, terminator and tmux. I am adding features and vulnerabilities exploits consistently. Also, soon there will be a GUI version. This tool was NOT coded by a professional, "I do not know what i am doing". By running this program, you are agreeing on NOT running it against any public, corporate or unauthorized networks. Performed only when you have authorization to do. Greetz to @R2k4n
TypeScript generics
Tags: typescript, beginners, tutorial
Published: 2020-07-21 15:39:19

One of the most essential aspects of software development is writing reusable code. Your code must work with variable X and even with variable Y.
One of the most common ways you might know is writing methods. A well-written method without generics will only work with one specified type. For example this piece of code only works with integers.
``` typescript
function isEven(num: number): boolean {
  if (num % 2 == 0){
    return true;
  }
  return false;
}
```
 But what if we want to use more types for the same method? That's what generics are used for. During our journey of learning TypeScript, you might have come across snippets like this: 
``` typescript
let list: Array<number> = [1, 2, 3];
```
This Array type is using generics to only accept a certain type selected by you
### But what is this **< >** thing?
We can use this syntax to give types to generics.

### How can I create generic methods or classes?
We need a way of capturing the type of the argument in such a way that we can also use it to denote what is being returned. Here, we will use a type variable, a special kind of variable that works on types rather than values (we mostly call this variable "T"). 
``` typescript
function getRandomItem<T>(items: T[]): T {
  return items[Math.floor(Math.random() * items.length)];
}
```
### Challenges
* **[Easy]**: Write a generic method that swaps two values
* **[Medium]**: Write a generic method to count the number of elements in a collection that have a specific property (for example: odd integers, prime numbers, etc..).
* **[Hard]**: Write a linked list implementation with generics.

#### If you want more write a comment and follow me, thanks!
#### Follow me on [twitter](https://twitter.com/tzalan15)
Elm with Laravel
Tags: elm, laravel, functional
Published: 2020-07-21 15:38:22

I have been messing around with Elm the past week or so. Especially because of the potential to get a brainf*ck when getting started with Frontend development these days. Elm offers something really attractive. Simpler eco-system. Maybe I am drunk. But this is too attractive to not consider, especially for someone like me who is predominantly a backend developer.

After digging around, I wanted to do an experiment and try to see how I can get a small Elm component to render on one of my existing apps. This was surprisingly easy. 

I started by:

1. Creating an Elm file for the test component using the counter [example](https://guide.elm-lang.org/install/elm.html)

```elm
import Browser
import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

-- MAIN

main =
  Browser.sandbox { init = init, update = update, view = view }

-- MODEL

type alias Model = Int

init : Model
init =
  0

-- UPDATE

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
  case msg of
    Increment ->
      model + 1

    Decrement ->
      model - 1

-- VIEW

view : Model -> Html Msg
view model =
  div []
    [  div [] [text "My fancy counter"]
        , button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt model) ]
    , button [ onClick Increment ] [ text "+" ]
    ]
```

Once I have this, I added another file to create the element and mount it.

```js

import { Elm } from "./Counter.elm";

Elm.Main.init({
    node: document.querySelector("counter"),
});

```

Lastly, I added the newly created element `<counter></counter>` to my view.

```blade
@extends('layouts.app')

@section('content')
<counter></counter>
@endsection

```

Since I was using [parcelJS](https://parceljs.org/elm.html), I didn't have to anything just had to make sure the js file was an entry point to the build command.

```
parcel build resources/assets/js/*.js --out-dir public/dist --public-url ./
```

So this is the final outcome, this is no way production-ready. But it helps me experiment with Elm for some parts of the application. 

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