teleren/devto huggingface dataset:
Why Vercel & Next are a dream team
Tags: nextjs, webdev, javascript, react
Published: 2021-05-13 16:15:19

#### What is Vercel?
​Vercel is a deployment and collaboration platform **for frontend developers**. ​Vercel puts the frontend developer first, giving them comprehensive tools to build high-performance websites and applications.

​Vercel enables developers to host websites and web services that deploy instantly and scale automatically – all without any configuration.

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

#### What is NextJS?
Next is a React Framework that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

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

#### Next and Vercel - The Incredible Duo
* The Easiest Way to Deploy Next.js Apps
* Vercel, built by the same team that made Next.js, provides production-grade hosting for Next.js websites with zero configuration.

* After experiencing how easy it is to get up and running with these two well integrated, the developer can get a continuous deployment setup with a repo as easy as with a few clicks on the screen.

* It gives us a vast amount of templates to choose from directly from the [Vercel](https://vercel.com/new/templates) page such as:

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fsr1chcm7xgew2vhybuz.png)
  
It is one of the most pleasant development experiences I have had so far. 

I bought a domain through their site for $20. This process was easy to set up and had a running homepage within a minute along with continuous deployment when I push a change to the selected branch.

I have to say using these two together has shown me how fun sometimes development can be when you get to choose the tools you wanna use and you get that AHA moment that you found your stack.

#### Summary
I am still new to this platform but I am keen and happy to explore it, thinking about what great apps I can build with such a great developer experience. 

If someone has any tips for me concerning these two let me know in the comments below.

Follow me on Twitter at [@CodesNine](https://twitter.com/CodesNine)	and on Instagram at [@nine_codes](https://www.instagram.com/nine_codes)
Use State in functional component of React                
Tags: react, javascript
Published: 2021-05-13 16:08:45

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uf90qv0dwtvwtvvydy1.png)
##Introduction

This post to understand how to use state in functional component of React. As we know React has functional and class components and we usually using the **Class Components** whenever we require to use state of components: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6ypcwlcxzjpeirlokojl.PNG)
But we also able to use [React Hooks](https://reactjs.org/docs/hooks-intro.html) to add state into **Functional components**

##React.useState Hook
The function of <code>useState</code> is hook that allow you add and maintain state within the **Functional components**. First of all, you need to import <code>useState</code> from React 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tze6r3z93h8m0ibme0hl.PNG)

Then here we have <code>dog</code> as state variable and <code>setDog</code> as the function to update the <code>dog</code>. The <code>useState</code> Hook only allow one state variable being declare at once, in other words if you have multiple state, you should create multiple variables.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9y8sxyzneuwo8he0v9iq.PNG)

##Update state
Like we using setState in **Class components**, we are going to use <code>setDog</code> in **Functional components** to updated the value of <code>dog</code>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1mysy79i3jokw2affrm.PNG)

####*References*:
https://reactjs.org/docs/hooks-intro.html
Amazing Window Object With JS (Part 1)
Tags: html, beginners, javascript, webdev
Published: 2021-05-13 15:56:47

#Window Object :

The window object represents an open window in a browser. The window object is very useful in javascript also you can do many things with the window object.
We have many properties in the window object. An object of the window is created automatically by the browser.

##### 1.Window Confirm :

Window confirm is used for displays a dialog box with a specified message, along with an OK and a Cancel button.
A confirm box is often used if you want the user to verify or accept something.

Example :
```JS
confirm("Press the button");
```
Output :
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd8dbt4h7aevreno9btn.png)

##### 2.Window focus :

The window focus method is also used to focus the thing in the browsers or website.
Means for example you want to focus on a specific thing or tracking purpose so you can be use window focus.

##### Example
```JS
var myWindow = window.open("", "", "width=200, height=100");   
myWindow.document.write("<p>A new window!</p>");         
myWindow.focus();  
```
##### Output

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6f8m9b1idc44zn1mmhab.png)


##### 3.Window Local Storage:

The localStorage is also a window property this is very useful to store data in the browser and sessionStorage properties allow saving key/value pairs in a web browser.

The localStorage object stores data with no expiration date. The data will not be deleted when the browser is closed and will be available the next day, week, or year.

##### 4.Window getComputedStyle:

The getComputedStyle() is a very useful property i also use this propety a lot getComputedStyle() is gets all the actual (computed) CSS property and values of the specified element.

##### Example

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kd3kokei93f6q6vi22e.png)

##### 5.Window Print:

The window print is a very important and useful dom element in the javascript. The print() method prints the contents of the current window.

##### Example

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05p8oellocvsqa10hdk5.png)

I hope you like this also comments about your thoughts.

For more content follow me on Instagram  [@developer_nikhil27](https://www.instagram.com/developer_nikhil27/).

Thank you.
linked list
Published: 2021-05-13 15:35:46

A linked list is a set of data structures linked together by connections.
A Linked List is a list of objects that is made up of a series of links. Each link is connected to a different link. After series, the linked list is the most commonly used data structure. The following are some key words to know in order to grasp the idea of Linked List.
1)Link − Each link of a linked list can store a data called an element.
2)Next − Each link of a linked list contains a link to the next link called Next.
3)Linked List − A Linked List contains the connection link to the first link called First.
Linked List Representation
Linked list can be visualized as a chain of nodes, where every node points to the next node
The first connection element in a Linked List is named first.
Each connection has a data field(s) as well as a next link field.
Each connection is connected to the next link via the next link.
To indicate the end of the list, the last connection has a null link.
Types of Linked List
Following are the various types of linked list.
1)Simple Linked List − Item navigation is forward only.
2)Doubly Linked List − Items can be navigated forward and backward.
3)Circular Linked List − Last item contains link of the first element as next and the first element has a link to the last element as previous.


Basic Operations:

Following are the basic operations supported by a list.
•	Insertion − Adds an element at the beginning of the list.
•	Deletion − Deletes an element at the beginning of the list.
•	Display − Displays the complete list.
•	Search − Searches an element using the given key.
•	Delete − Deletes an element using the given key.
Insertion Operation: Adding a new node to a linked list is a multi-step method. This will be taught using diagrams. Build a node with the same structure and locate the position where it should be inserted first.
Deletion Operation:
Deletion is also a more than one step process. The left (previous) node of the target node now should point to the next node of the target node-LeftNode.next −> TargetNode.next; This will remove the link that was pointing to the target node. Now, using the following code, we will remove what the target node is pointing at TargetNode.next −> NULL.
Reverse Operation:
This operation is a thorough one. We need to make the last node to be pointed by the head node and reverse the whole linked list.
Regex: Fix duplicate slashes without affecting protocol
Tags: beginners, php, javascript, regex
Published: 2021-05-13 15:34:48

Let’s say you want to fix a URL that looks like:

```
https://www.example.com/my/path//to-file.jpg
```

Using a string replace or a simple regex could incorrectly “fix” the double slashes following the protocol. We can fix that by using a negative lookbehind.
```
(?<!:)/+
```

### For PHP:
````
<?php
$url = 'https://www.example.com/my/path//to-file.jpg';
$str = preg_replace('#(?<!:)/+#im', '/', $url);
// https://www.example.com/my/path/to-file.jpg
```

### For Javascript:
```
let url = 'https://www.example.com/my/path//to-file.jpg';
url.replaceAll(/(?<!:)\/+/gm, '/');
// "https://www.example.com/my/path/to-file.jpg"
```
How to connect React js with Django
Tags: django, react, python
Published: 2021-05-13 15:33:39

Hello Everyone, in this post you'll learn how to connect react js with Django in simple steps.
As you guys know React js is a very powerful and famous frontend js library and some people suggest react as a framework. 

Today we connect react js with one of the most powerful backend framework Django. 

Step1:- Create a django project 
```
django-admin startproject backend
```
Step2:- Now Create a virtual environment
```
virtualenv envrec
```
 Step3:- Install Django Rest Framework in a virtual environment.
```
pip install django djangorestframework
```
Step4:- Now make a frontend app.

```
django-admin startapp frontend 
```
Step5:- Now add this app and rest framework in Installed Apps:-
```
INSTALLED_APPS = [
     
    'rest_framework',
    'frontend',
]
```
Step6:- Now write some URLs in your project urls.py
```
from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('frontend.urls')),
]
```
Step7:- Now create some urls in your app
```
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index)
]
```
Step8:- Now write a basic command in your app views.py file

```
from django.shortcuts import render
def index(request):
    return render(request, 'build/index.html')
python manage.py runserver
```
Now finally run this command and your Django project start running on your localhost server

Now we set up react project.

for Setting up a react project install Node js and some other requirements in your pc.

Open a terminal and run this command.
```
npx create-react-app frontend
```
 After running this command your project will be created successfully.

Now run the react project

```
npm run build
```
Final Steps for connection.
Write the react app path in settings.py DIR

```
'DIRS': [os.path.join(BASE_DIR, '../frontend')],
```
and for serving static files paste this command at the bottom in settings.py

```
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, '../frontend/build/static'),
]
```
that's it. your settings and connection is done now run the project.

```
python manage.py runserver
```
Future of AEROSPACE Engineering
Published: 2021-05-13 15:28:45

By the development of other technologies like electronics, communication, material science, etc. The aerospace engineering sector also achieved significant development. In modern times the industry is going for a leap to the next level.

The civil, commercial transportation, and the logistics sector are highly dependent on the development of flying vehicles. The majority of current jobs do not exist in the future due to the emergence of smart technologies like artificial intelligence and robotics.

The future development of both atmospheric and space vehicles may be integrated with these kinds of smart technologies. The futurists are predicting that the emergence of smart drones will wipe out ninety percent of the delivery jobs in the logistics sector.
Choosing a career in any of these distractible technologies will help you in future survival. The following are some of the modern trends in the aerospace sector and this will speak why aerospace engineering is a good choice for a career in the future.

Building materials of an aircraft or any flying vehicles is important. The strength to weight ratio should be at its optimum to achieve maximum fuel efficiency and performance.

The recent development in composite materials made the aircraft materials more efficient and reliable. In earlier days almost seventy percent of an aircraft was build using aluminum the recent development in composite material like carbon fiber reinforced polymer and other advanced material made the percentage of aluminum to twenty.

Rigorous researches are going on the aerospace field to find adequate material for space flight also, so the material science sector in aerospace engineering has a prosperous future.
Laravel Validation Dimensions Example Tutorial

Tags: laravel, php, programming, tutorial
Published: 2021-05-13 15:13:21

<p>Hi Dev, </p>

<p>In this tutorial, i will explicated to the Laravel Validation Dimensions Example in your laravel project.Laravel provide incipient image dimensions validation option for image upload and you are able to utilize this dimensions validation in laravel 6, laravel 7 and laravel 8 project.Laravel Validation Dimensions Example is so facile to utilize.so you can just follow my step by step and learn Laravel Validation Dimensions Example.</p>

<p>So, let's get start to the example and follow to the my all step.</p>

<strong class="step">Dimensions Rules:</strong>  
<pre class="prettyprint">
<strong>1)width</strong>    
<strong>2)height</strong>    
<strong>3)min_width</strong>    
<strong>4)min_height</strong>    
<strong>5)max_width</strong>    
<strong>6)max_height</strong>    
<strong>7)ratio</strong>    
</pre>

<p>In this Dimensions option through we can set fine-tune width and height, if invalid width and height of image then it will return error. Same way we can set validation min and max height width on your validation.</p>

<p>Few days ago i posted image upload with validation post in Laravel 5.3, you can optically discern here : Laravel 5.3 Image Upload with Validation example..</p>

<p>In this post i used simple validation with mime type and max size like as bellow :</p>


<strong class="step">Step 1: Create Route</strong>
Last step to create a route in web.php file and use this code.

<b>Route :routes/web.php</b>
<pre class="prettyprint">
&lt;?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('dimention/form', [UserController::class, 'dimentionForm'])->name('dimention.form');
Route::post('dimention/store', [UserController::class, 'dimentionStore'])->name('dimention.store');

</pre>

<strong class="step">Step 2: Create a UserController Controller</strong>

if you want to see full example follow this link..

https://codingtracker.blogspot.com/2021/05/laravel-validation-dimensions-example.html
Transition path to web/cloud software development and architecture from C/embedded domain(13 yrs experience)
Tags: help, transition, path, careeradvice
Published: 2021-05-13 14:51:47

Hi. Apologies if that title looks too naive to you. I have been a developer for the last 13 years working with a large product company. Throughout my career, I have coded in C in the job, though I do know some of the non-fancy languages/frameworks used in the electronics software domain. Other than that I do know C++/STL etc. Basically, I have been feeling disconnected for a long time now with my job and looking to make a transition. I entered this domain as the money was good but need/greed did not make me think what I really want. I know it's going to be difficult path to really make a transition with that much experience but staying in a job/domain you don't love anymore is frankly doing more harm than good to my career and life. My end goal is simple, making applications and products that I would love to build. Designing and developing applications like whatsapp or even a browser extension excites me. I want to continuously learn and improve and be happy doing so. As of now, I'm just looking to learn web and cloud technologies and develop some hobby projects to learn and showcase my abilities. Any senior developers/architects (working for companies like Netflix/Uber/Amazon etc) if seeing this post, can you please share the path I can follow for an year or longer, if required, to make such a transition. I mentioned above roles and companies as I think that can highlights my needs but if anyone can share views, please do so. Thanks allot.
SVGs with MithrilJS and Webpack
Tags: javascript, mithril, svg, webpack
Published: 2021-05-13 14:50:31

Add the following to `webpack.config.js`

```
module: {
  rules: [{
    test: /\.svg/,
    type: 'asset/source'
  }]
}
```

Import your SVG into your component

```
import svgIcon from './svgs/mySvgIcon.svg';
```

Use `m.trust` to render it.

```
m.trust(svgIcon)
```
Easy Cassandra Driver
Tags: database, node, cassandra, npm
Published: 2021-05-13 14:46:41

I made a cassandra driver but easier than cassandra-driver

Souce Code: [Click Me!](https://github.com/Raksix/cassandra-driver)

Npmjs Page: [Click Me!](https://www.npmjs.com/package/raksix-cassandra)

if you want usage execute:
connection.client.execute("SELECT * FROM <simple table>")

İf you find a bug/issue please report [Report/Issue Link](https://github.com/Raksix/cassandra-driver/issues/new)

Simple Usage: 
```js
const cassandra = require("raksix-cassandra")

// connect config payload
const config = {
    secure_path: "./secure-zip-path",
    client_id: "client_id",
    client_secret: "client_secret",
    keyspace: "keyspace"
}

// connect cassandra-driver
const connection = cassandra.connect(config.secure_path, config.client_id, config.client_secret, config.keyspace)

// table payload
const data2 = {
    id: "text PRIMARY KEY",
    name: "text",
    email: "text",
    password: "text"
}


// create table method
connection.create_table("test", data2)


// insert payload
const data3 = {
    id: "1",
    name: "furkan",
    email: "furkan@gmail.com",
    password: "1234"
}


// insert method
connection.instert("test", data3)


// find method
connection.find("test", { name: "furkan" }).then(rs => {
    // result
    console.log(rs.rows)
})
// find all
connection.find_all("test").then(rs => {
    //  result
    console.log(rs.rows)
})

// update method
connection.update("test", { name: "furkan" }, { email: "raksix@raksix.wtf", password: "12346" })
```
I Love Free Games & Giveaways so I Made an API to Track Them!
Tags: showdev, api, webdev
Published: 2021-05-13 14:44:47

I'm having fun collecting free games from Epic Games Store, Steam and other places. It's just crazy how my games collection has grown. So it just made sense to build a dedicated gaming platform coded from the ground up to track all these cool giveaways, and that's how [GamerPower](https://www.gamerpower.com/) was born.

For my surprise, right after the GamerPower launch, I got several emails asking for an API. To be honest, that was not on my initial plans, but I must admit it was a very interesting idea, and now it´s a big part of the project. 

The GamerPower API (Aka [Game Giveaway Tracker API](https://www.gamerpower.com/api-read) can be found via this link. It´s entirely free to use without any restrictions, plus it´s easy to use, no keys or accounts necessary.

Please note this is still working in progress, I would love to get some feedback and suggestions from the community!
Counting the queued Celery tasks
Tags: django, celery, redis, bash
Published: 2021-05-13 14:44:31

If you are using Redis for your Celery queues, there's a way to count the number of queued tasks grouped by the task without the need for an external tool. Note that this approach assumes that you're using the JSON serializer for your tasks.

Using a Redis-client of your choice, I chose [redli](https://github.com/IBM-Cloud/redli) (which supports tls), use `LRANGE` to get a list of all tasks, pipe them through `jq` to query `headers->task`, `sort` and make them `uniq` / count them:

```bash
> redli [your connection parameters] lrange celery 0 30000 | jq '.headers.task' | sort | uniq -c

 533 "devices.adapters.lorawan.tasks.run_lora_payload_decoder"
   2 "devices.adapters.particle.tasks.run_particle_payload_decoder"
  92 "devices.tasks.call_device_function"
8556 "devices.tasks.ping_device"
9682 "devices.tasks.process_device_field_rules"
   5 "devices.tasks.send_device_offline_email"
   2 "dzeroos.tasks.call_command"
   8 "dzeroos.tasks.flush_command_queue"
   1 "dzeroos.tasks.publish_device_config"
   1 "dzeroos.tasks.publish_protobuf_config"
```

## Bonus: statistics on task details

In my case, I needed to get some insights on one of the parameters of one task (I was investigating a loop that caused a long queue). This required some more `jq` and bash-magic and probably doesn't fit your use-case, I just paste it here for reference:

```bash
> redli [your connection parameters] lrange celery 0 1000 | jq -c '. | select(.headers.task | contains("taskname")) .body' | while read -r line; do echo "$line" | tr -d '"' | base64 -D | jq '.[0][0]'; done | sort | uniq -c

  15 "04576f6e-d5d1-45f4-8eef-a17e015335f4"
   9 "05264cc7-ae60-4f4f-9a18-2451e8d83f65"
  25 "4e240129-b84e-4e70-9f85-0e06f7a01875"
 224 "6c6a9aeb-10c7-417f-a928-791399d8adb9"
```