teleren/devto huggingface dataset:
Want to Learn Web Development and Like YouTube Videos? Read This!
Tags: webdev, youtube, javascript, react
Published: 2020-05-16 15:24:53

This post is a short one but I just wanted to drop this post and let you know that **I have started my own web development YouTube channel** and you should [check it out](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw)!

I have been writing blog posts to my blog [codepulse.blog](https://codepulse.blog) for over two years now. In that time I have written many posts and tutorials about things related to modern web development.

I have really enjoyed the fact that I can take my years of experience about web development and use it to help others learn web development faster and easier. I hope I can now do the same with videos also and that’s why I decided to start my web development [YouTube channel](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw).

The channel is web development YouTube channel, so I upload videos and tutorials mostly about the same things I have been blogging; things related to web development. For beginners and also more advanced web developers too.

So I encourage you to [check the channel out](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw)! And if you are a web developer or interested in web development, whether you are a beginner or pro, definitely [subscribe](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw?sub_confirmation=1) so you stay up to date on the new content since I upload new content regularly.

Here is couple of the videos I already uploaded on the channel!

{% youtube gDWoQwyI4Vk %}
{% youtube gbONLMqrUxI %}
{% youtube WotbsEIjqrs %}

-----------
_Originally published at [codepulse.blog](https://codepulse.blog/want-to-learn-web-development-and-like-youtube-videos-read-this/?utm_source=devto) on May 16, 2020._
Tuples in Swift
Tags: swift, ios, programming
Published: 2020-05-16 15:20:05

I recently started to dive into the world of IOS development. As I was taking a tour on the [documentation](https://docs.swift.org/swift-book/GuidedTour/GuidedTour.html) website, I came across a data type I've never heard before. "What's a tuple???", I asked myself. 

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

For context, I was reading a section on functions to get familiar with the syntax. The following code is a function that calculates the minimum, maximum, and sum of a given array of integers. 
```swift
func calculateStatistics(scores: [Int]) -> (min: Int, max: Int, sum: Int) {
    var min = scores[0]
    var max = scores[0]
    var sum = 0

    for score in scores {
        if score > max {
            max = score
        } else if score < min {
            min = score
        }
        sum += score
    }

    return (min, max, sum)
}
let statistics = calculateStatistics(scores: [5, 3, 100, 3, 9])
print(statistics.min, "the minimun")
// Prints "3 the minimum"
print(statistics.sum, "the sum")
// Prints "120 the sum"
print(statistics.1, "the max")
// Prints "100 the max"
```

A Tuple is defined by Swift's documentation as **a comma-separated list of types, enclosed in parentheses** and is commonly used to return multiple values. The above code uses dot notation to call the variables placed in the tuple and can be called by name or index. To me, this resembles a mashup of a Javascript `Object` and an array.

You can also name the elements inside of a tuple like so: `var aTuple = (age: 24, name: "Lei")` and reference them with `aTuple.age` which will return 24. 

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

A tuple can contain zero or more types. [Andyy Hope](https://medium.com/swift-programming/swift-tuple-328aecff50e7) states an interesting fact on tuples over on his blog that `void` is just a `typealias` for an empty tuple. 

As I'm journeying through the language of Swift, I'm sure I'll many more gems that make Swift uniquely great.
Deploying React Js portfolio application to heroku
Tags: react, heroku, git, herokucli
Published: 2020-05-16 15:18:02

If you have your application code in vs code or any text editor.

step 1: Open command prompt
step 2: Give command git init (This will initialize a git repository in your 
        project folder)
step 3: Open Github.com
step 4: Create a new repository
step 5: open gitbash and go to your project folder
step 6: Generate ssh keys.
        give command : ssh-keygen -t rsa -b 4096 -C "your mail id"
        press enter for all question asked.
step 7: To make sure our app is running give command : eval "$(ssh-agent -s)"
step 8: To register the file we need to give the command: ssh-add -K 
        ~/.ssh/id_rsa
step 9: copy the remote origin link from your github repository 
        example: git remote add origin https://github.com/keshri1/NodeJs.git
step 10: Generate ssh keys in git bash,copy it and add to github settings.
         give command : cat ~/.ssh/id_rsa.pub  t(to geneate ssh keys in 
         gitbash)
step 11: To check whether our key has been set up successfully or not give 
         command:  ssh -T git@github.com
step 11: Now give command 
         git push -u origin master

Now your code has pushed to git hub.
Next Download heroku cli.
open vs studio command prompt do the following steps:
go to project folder
login to heroku website
give command : 
	heroku keys:add
this will automatically take ssh key of the project
Next give command to create heroku application
	heroku create my-portfolio
Next give command to publish to heroku
       git push heroku master

Thats all.
Thank you

2nd method:

1. From Visual studio command prompt give command 
   Git init
2. git add .
3. git commit -m "initial commit"
4. Open heroku.com and login/Signup 
5. Download heroku cli
6. Give command
   heroku create
7. It creates two links, the first one is the address we need to give whwnever we need to visit our application.The second link is our deployment target, a git repository where we can push our local server 
8. copy second link and give command
   git remote add heroku second link
   Its okay if you get this msg (fatal: remote heroku already exists.)
9. Give command
   git push heroku master
10. Now give heroku open which opens your project in browser.
Build a Complete Solution with Django,React, React Native, AWS, Heroku
Tags: django, react, javascript, python
Published: 2020-05-16 15:12:27

Hey guys, 
It has got to the point where I have a good number of technologies I can work with comfortably but I feel like having to make all of this work together and deploying them when they're tied together is something I haven't done.

So here's the plan,
I have already built out a simple warehouse management solution in django.
In the next few weeks, 

1. I'll be working on a **react frontend** which means I have to build out an api with *django rest framework** for the already built out backend.

2. Build a React Native client 

3. Deploy django backend on Heroku and react frontend on S3

###Extra perks
1. Add Graphql
2. Add a caching layer with Redis 

Here's  a preview of the UI

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gl1ylklhiegp5fuckmzv.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/t4eewisrshm5wbk0hx90.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m60quk032kyxlh1ciaff.png)
![Authentication](https://dev-to-uploads.s3.amazonaws.com/i/q2kekks3ggrgefefkhy7.png)

Let's do this!
I'll add a link to my repository in the next one.
UI Calendar Icon
Tags: css, uiweekly, ux, beginners
Published: 2020-05-16 14:58:24

The calendar is the most important part for everyone to show date and all but, the most important part is user-interface. So here we designed a simple and minimal interface of the calendar with the help of HTML and CSS.



In this element, we used basic HTML heading tags and simple paragraph tags. Also, we used CSS to make this element attractive and user-friendly. Here we used one simple box with the help of heigh and width and also used box-shadow properties. We used some simple colors and border-radius properties to make box rounded on the corner-sides.

[Get Source Code](https://w3hubs.com/ui-calendar-icon/)
Laravel Cheat Sheet - Resource Controllers
Tags: laravel, php
Published: 2020-05-16 14:50:47

### Controllers

Import the Model class for easier usage

```
use App\BlogPost
// Now it can be used like this
BlogPost::all();
// Instead of 
\App\BlogPost::all();
```

Group code by responsibility, separate controllers for 2 simple static pages (HomeController), another for displaying blog posts (PostController).

#### Resource Controllers

Use (per) resource controllers

```
Route::resource('posts', 'PostController');
```

Instead of

```
Route::get('/posts', 'PostController@index')->name('blog.index');
Route::get('/posts/{id}', 'PostController@show')->name('blog.show');
```

Generating a new resource controller with all the resource methods

`php artisan make:controller PostController --resource`

Resource methods table

|Verb		  | URI      |Action        |Route Name |
|--------   |--------  |--------      |--------   |
|GET	|/posts	      |index          |posts.index |
|GET	|/posts/create	|create	     | posts.create |
|POST	|/posts	|store	               |posts.store |
|GET	|/posts/{photo}	|show	        |posts.show |
|GET	|/posts/{photo}/edit	|edit	  |posts.edit |
|PUT/PATCH	|/posts/{photo}	|update |posts.update |
|DELETE	|/posts/{photo}	|destroy	  |posts.destroy |

To enable only certain routes

```
Route::resource('posts', 'PostController')->only(['index', 'show']);
```

To disable specific routes

```
Route::resource('posts', 'PostController')->except(['create', 'store', 'edit', 'update', 'destroy]);
```

*Both examples above will result in the same routes - posts.index and posts.show*

#### Fetching a single model

Model can be fetched using `BlogPost::find($id)`

To display a 404 Not Found page when model cannot be found, use `BlogPost::findOrFail($id)`

#### Route Model Binding

Those 2 examples are equivalent

```
PostController extends Controller {
	public function show($post) {
		return view('post.show', ['post' => BlogPost::findOrFail($id)]);
	}
}
```
Above, we manually try to fetch the BlogPost model. `findOrFail` will show a 404 page if model is not found.

```
PostController extends Controller {
	public function show(BlogPost $post) {
		return view('post.show', ['post' => $post]);
	}
}
```
Above we use **Route Model Binding**. If the method parameter name matches the route segment, eg. route is `/posts/{post}` the variable name has to be `$post`. Then `type hinting` (specyfying the argument type) as the Eloquent model `BlogPost`, tells Laravel to try and fetch this object by `id`.

To customize the property by which the model is fetched, add the `getRouteKeyName()` method to the model.

```
public function getRouteKeyName()
{
    return 'slug';
}
```

With the example above, Laravel would try to find a `BlogPost` model by `slug` property.

Source: [Laravel Cheat Sheet](https://simplecheatsheet.com/tag/laravel-cheat-sheet/)
Laravel Cheat Sheet - Models Eloquent
Tags: laravel, php
Published: 2020-05-16 14:48:42

### Laravel Tinker

Tinker is a console program that allows you to play around with Laravel models and execute arbitraty PHP command directly from your command line

Starting the console

```
php artisan tinker
```

#### Solving a problem with Tinker (for PHP 7.3 or newer) when it quits after every command

Modify the php.ini by adding this option

```
pcre.jit=0
```

On Mac php.ini can be usually found in `/Applications/XAMPP/xamppfiles/etc/php.ini`

To be sure where it is, run `php -i | grep 'php.ini'` in Terminal

On Windows it's in your XAMPP folder `C:\xampp\php\php.ini` or `C:\xampp\etc\php.ini`, depending on location of XAMPP itself


### Eloquent Model

Generating a new model

```
php artisan make:model BlogPost
```

Generating a new model with migration

```
php artisan make:model BlogPost --migration
// or
php artisan make:model BlogPost -m
```

By convention, Laravel assumes the table name is "snake case" plural model name. For example:

| Model name      | Table name        |                    
| --------        |-------------      |                              
| BlogPost       | `blog_posts`         |                                                          
| Blogpost		 | `blogposts`			  |
| VeryLongTrain  | `very_long_trains`   |

To define a custom name, add (override) the protected `$table` model property

```
class BlogPost extends Model
{
    protected $table = 'blogposts';
}
```

By default, all models are stored inside the `App` namespace, eg. `App\BlogPost`

#### Acessing and modifying properties

You can read and modify model properties (row columns) using properties

```
$post = App\BlogPost::find(1);
$title = $post->title;
$content = $post->content;

$post->title = 'New title';
$post->content = 'New content';
// Always call save() to create the record and UPDATE the existing one
$post->save();
```

Property name corresponds 1:1 to the column name of the table

### Querying

Retrieving all models as *collection*

```
$posts = App\BlogPost::all();
```

Retrieving single model by primary key (usually, by `id` property/column)

```
// Fetch BlogPost with id 10
$post = App\BlogPost::find(10);
```

Fetching *collection* of models by id

```
$posts = App\BlogPost::find([1, 2, 3]);
```

Collections are iterable (eg. using foreach)

```
$posts = App\BlogPost::all();

foreach ($posts as $post) {
	echo $post->title;
}
```

Getting first element of the collection of models

```
$posts = App\BlogPost::all();
$post = $posts->first();
```

Creating and saving (creating a database row) a new model

```
$post = new App\BlogPost();
$post->title = 'Title';
$post->content = 'Content';
$post->save();
```

Source: [Laravel Cheat Sheet](https://simplecheatsheet.com/tag/laravel-cheat-sheet/)
Laravel Cheat Sheet - Database
Tags: laravel, database, php
Published: 2020-05-16 14:44:55

### Configuring database

The database connection parameters are stored inside .env file (on development environment).

On production environment store it in VirtualHost configuration or .htaccess file. To store variables in .htaccess file VirtualHost must contain the `AllowOverride All` directive.

Reading environment variable

```
$value = env('DB_HOST', '127.0.0.1');
```

*Where first value is the name of the variable, and second is the default value (if env variable is not defined).*

### Connecting to the database server

#### Using phpMyAdmin

Visit [http://localhost/phpmyadmin](http://localhost/phpmyadmin) if you are using XAMPP

Source: [Laravel Cheat Sheet](https://simplecheatsheet.com/tag/laravel-cheat-sheet/)
Laravel Cheat Sheet - Controllers
Tags: laravel, php
Published: 2020-05-16 14:43:07

### Controllers

Controllers are an alternative to Closures for defining the application logic

Generating a new Controller

`php artisan make:controller ControllerNameController`

Controllers are stored inside the `app/Http/Controllers` folder

An example controller class

```
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class HomeController extends Controller
{
    public function index()
    {
        return view('home');
    }
    
    public function contact()
    {
        return view('contact');
    }
}
```

Controllers do not have to extend the base `App\Http\Controllers\Controller` class, but it provides some convienience methods.

Route definition for the above controller (routes/web.php):

```
Route::get('/', 'HomeController@home');
Route::get('/contact', 'HomeController@contact');

```

We don't have to specify the full controller namespace in `web.php`. It's enough to specify everything after `App\Http\Controllers`.

RouteServiceProvider will is responsible for prepending the `App\Http\Controllers` namespace to controller names in routes.

### Single Action Controllers

For controllers that handle just a single action:

```
<?php

namespace App\Http\Controllers;

use App\Http\Controllers\Controller;

class HomeSingleController extends Controller
{
    public function __invoke()
    {
        return view('home');
    }
}
```

Route definition (routes/web.php)

```
Route::get('home', 'HomeSingleController');
```

Generating a single action controller

`php artisan make:controller HomeSingleController --invokable`

The `__invoke` is a magic PHP method that allows the object to be called like a function, eg.

```
$controller = new HomeSingleController();
$controller();

```

### Routing

Route for controller action

```
$url = action('HomeController@home');
```

Source: [Laravel Cheat Sheet](https://simplecheatsheet.com/tag/laravel-cheat-sheet/)
Laravel Cheat Sheet - Routes Views
Tags: laravel, php
Published: 2020-05-16 14:41:52

### Inside route definition file (routes/web.php)

Defining a route using closure

```
Route::get('/', function () {
    return view('welcome');
});
```

Defining a route that only renders a Blade template

```
Route::view('/home')
Route::view('/home', ['data' => 'value'])
```

Route with a required parameter

```
Route::get('/page/{id}', function ($id) {
    return view('page', ['page' => $id]);
});
```

Route with an optional parameter

```
Route::get('/hello/{name?}', function ($name = 'Guest') {
    return view('hello', ['name' => $name]);
});
```

Named route

```
Route::view('/home')->name('home');
Route::get('/blog-post/{id}', function ($id) { return view('blog-post', ['id' => $id]); });
```

Generating url to the named route

```
$url = route('home');
// Generates /home
$blogPostUrl = route('blog-post', ['id' => 1]);
// Generates /blog-post/1
```

### Inside Blade template
Defining a section

```
@section('content')
	<h1>Header</h1>
@endsection
```
Rendering a section

`@yield('content')`

Extending a layout

`@extends('layout')`

Function to render a view

`view('name', ['data' =>‚ 'value'])`

Rendering data inside a Blade template

`{{ $data }}`

*By default data is escaped using `htmlspecialchars`*

Rendering unescaped data

`{!! $data !!}`

Including another view

`@include('view.name')`

*Included view will inherit parent view data*

Passing additional data to included view

`@include('view.name', ['name' => 'John'])`

Generating a URL inside view

```
<a href="{{ route('home') }}">Home</a>
```

Source: [Laravel Cheat Sheet](https://simplecheatsheet.com/tag/laravel-cheat-sheet/)
Screen sharing with Debian 7 + XFCE4 + VNC
Tags: debian, remotedesktop, vnc, xfce4
Published: 2020-05-16 14:38:04

Currently, I use a very old Linux computer as a TV driver. As this not have at this time any TV-like player, I had to reach physically the computer to next movies, shutdown the "TV", ... I had to wake up from my bed to pass to the next video. It should be solved ASAP.

So, until my TV-like player is installed, I've installed a remote screen sharing. There is a lot of tutorials about remote desktop, but not a lot for screen sharing. Here is how to achieve it.

Firstly, install vino:
```
# apt-get install vino
```

Then, configure it:
```
$ vino-preferences
```

Finally, activate it on startup:
```
$ xfce4-session-settings
```

If `vino` is not dispayed on it, just add a new task having this startup command:
```
/usr/lib/vino/vino-server
```

This should be working with other Debian based OS, but I only tested it with Debian 7 + XFCE4.
Unix Linux Cheatsheet
Tags: unix, bash, ksh
Published: 2020-05-16 14:04:49

<b>Memory and File System Storage differences</b>
Memory (short term storage - mostly RAM) gets erased when you restart your computer. It is used for things like browsing the web. Where as File System storage (log term storage) stays stored when you restart your computer. An analogy is a desk top and the draw underneath. The desk top is for quick access to items, but is limited in space. The desk top is cleared at the end of the day. The draw underneath can hold more storage and does not get cleared out at the end of the day. 

<b>Commands</b>
`cd ~` or `cd` Takes you to home
`grep -r “string” *` Searches for a string within the folders of directories. -r makes it look in the subfolders
`du -sh *` Finds the size of every directory in your current directory. 
`df -h` Finds the file storage space left on your machine (long term memory) 
To view the free short term memory in readable format:
`free -h`
`ls -lrt` lists a directory in updated at order.
`ls -lrt NAME*` to do a wild card search 
`| pipe` - allows you to pipe one  command into another
`ping computer-name` find out IP address on the some LAN.
`/bin` holds all of the compilers you have installed such as csh, ksh and bash.
`crontab -l` to view a crontab 
`crontab -e` to edit a crontab with your default editor 
`nano file` to edit a file in the nano editor 

<b>Vi editor commands</b>
vi filename edits or creates a file
i is insert mode
v is visual mode - which also allows you to delete characters
x is delete character and dd is delete line 
Esc to exit a mode
:wq to write and quit a file
:q to quit a file

Use the instructions in the following link to see how to search for executable files:
https://kb.iu.edu/d/acec
How to Install Deno JS and try the sample JS APP
Tags: deno
Published: 2020-05-16 13:54:15

---
title: How to Install Deno JS and try the sample JS APP
published: true
description: What is Deno? How to install and try sample JS app with it.
tags: deno
---

## What is Deno?
Deno is a secure runtime environment for JavaScript and TypeScript and the same time it lets create Webassembly applications out of the box.

## Built in Security
Deno uses security flats like — allow-net:example.com, — allow-read:example.com every time you run ( compile, build and run ) the application.

## Install Deno on Windows 10/8/7
Launch Windows PowerShell and run the following command to install Deno on Windows 10/8/7

`iwr https://deno.land/x/install/install.ps1 -useb | iex`

## Install Deno on Linux and MacOS
Launch terminal and run the following command to install Deno on Linux and Mac

`curl -fsSL https://deno.land/x/install/install.sh | sh`

### Watch me Install and Try sample app with Deno

{% youtube HTe_AKTRJtk %}

### You Might Like
* [How to Install NodeJS, NPM, NPX on Windows 10](https://tubemint.com/install-nodejs-npm-npx-yarn/)
* [How to Install VS Code extensions for ReactJS](https://tubemint.com/vs-code-reactjs-extension/)
* [How to Add Bootstrap to ReactJS App](https://tubemint.com/bootstrap-to-create-react-app/)