teleren/devto huggingface dataset:
Getting started with frelancing - Top sites to land you good paying freelance job
Tags: beginners, discuss, career
Published: 2020-06-08 08:57:00

Here are list of sites which would help you land good paying jobs as a freelancer,i have used most of this sites and their really good for getting jobs, all you need is to set up a good profile and portfolio, let's get started.
 
Angel list - They feature jobs from companies and it's a good place to start your journey as a freelance developer 
https://angel.co/

working nomads - 
Job posting are mostly tech related 
https://www.workingnomads.co/jobs

we work remotely - 
With this website you could get quick job opportunities but job listing are not up to other site
https://weworkremotely.com/


jobpresso - 
Only Remote jobs are listed on here 
https://jobspresso.co/remote-work/

remote - 
It gives you futures which allows you search on any job type and it's also easy to get freelance jobs
https://remote.co/remote-jobs/

GitHub jobs - Github has a job board and the listings are basically development because Guthub it self is used mostly by developers to share their code.
https://jobs.github.com/

just remote - 
Gives the opportunity for developers to get their perfect role 
https://justremote.co

pangian -
It's a good place for developers to get jobs and you could also join their community 
 https://pangian.com/

remote ok - has the feature of filtering by experience and mostly development gigs are posted here,it's a good place to get remote jobs 
https://remoteok.io

Remotive - 
It's a good place to get development gig.
https://remotive.io/

outsourqely - 
It connects remote workers with employers seeking for full-time and part-time employees 
https://www.outsourcely.com

Other websites like https://upwork.com , https://fiverr.com, https://indeed.com, 
https://freelancer.com 
https://freelancermap.com are also good websites to get started with.


Cover Image by Ryan Robinson .
Create Token-Based Authentication with Laravel Sanctum for Vue.js Application
Tags: laravel, vue, php, javascript
Published: 2020-06-08 08:44:17

Laravel Sanctum provides a featherweight authentication system. This package provides authentication in two ways, one is "[SPA Authentication](https://dev.to/ellis22/laravel-sanctum-authentication-in-vue-js-spa-application-416l "SPA Authentication")" and the second is "API Token Authentication". We have already seen [SPA Authentication using the Sanctum](https://www.youtube.com/watch?v=8Uwn5M6WTe0 "SPA Authentication using the Sanctum") package. Now In this video, you will learn how to build a token-based authentication system using Vue.js and Laravel Sanctum. We are going to create separate projects for the frontend (in Vue.js), and for the backend (in Laravel), that will interact with one another through a REST API.

Let's dive in!

{% youtube 2bslfjKEAik %}

> [API Token Authentication using Laravel Sanctum & Vue.js](https://www.youtube.com/watch?v=2bslfjKEAik "API Token Authentication using Laravel Sanctum & Vue.js")
Found my old matchbox work. That was my challenge. After a long break, I came back
Tags: gamedev, dev, indie, indiedev
Published: 2020-06-08 08:32:03

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

2014 - created model: SketchUp. Textures taken from the Internet.
2015 - created model: SketchUp. Textures made by photo.
2016 - created model: Blender. Textures made by photo.
2020 - created model: Blender. Texture made by scanning.

https://www.artstation.com/artwork/181wqG
Backend projects ideas
Tags: hiring, career, discuss, opensource
Published: 2020-06-08 08:06:04

Greetings from a backend developer currently learning some front-end technologies like JavaScript and AngularJS in particular.

Since I am new to this platform, I only saw some front-end projects ideas and tutorials but not so many backend. I am consulting students right know and I was wondering what ideas I could use, we are using Python and Java, Django and Spring and NewSQL (no particular primary usage of one or another). 

Also, I could think or google some ideas but what I wanted is something unique and not available or limitingly available anywhere, yeah we could create a shop app or something like that, but I think that this is too basic and would not attract recruiters if they decide to apply somewhere.

Thanks in advance!
📈 Scaling your Startup to 10M+ Users 🚀
Tags: javascript, opensource, startup, tutorial
Published: 2020-06-08 08:05:41

📈 Scaling your Startup to 10M+ Users 🚀

For Startups, Resources are quite limited and they strive for it and try to get the work done in the most efficient and economical way.

When Startups gain some traction and have regular users, Scaling the core technology becomes an essential part. 

Recently, I was working with a startup where I scaled it using AWS EC2 Load Balancers, Auto Scaling, Sharding, Clustering, and some other good techniques.⚡ 

During the process, I collected some of the good resources available on the internet regarding the scaling of startup gradually from 10K to 10 Million+ Users🚀

I created an [Open Source Repository on Github](https://github.com/realabbas/scaling-nodejs) where the whole concept of scaling with pros and cons is available.

The repository is just not limited to Nodejs but it mainly explains the overall measures, benchmarks, and ways to scale in X, Y, and Z-axis using Nodejs Native Modules, PM2, AWS, Load Balancers, AutoScaling, Nginx, Cloudfront.

For Early Stage Startups (Developers), it would be very beneficial to learn to scale. If you're in contact with any startup, do tag them so that they can benefit from this. 

[Github Repository Link](https://github.com/realabbas/scaling-nodejs)

[LinkedIn Post](https://www.linkedin.com/posts/ali-abbas-19b630161_startups-nodejs-business-activity-6675661126727983104-TdFx)

👏 👏 👏 Thank you for reading. 👏 👏 👏
Queues
Tags: algorithms, datastructures
Published: 2020-06-03 00:00:00

---
title: "Queues"
date: "2020-06-03T00:00:00.000Z"
tags: ["algorithms", "datastructures"]
---

A [Queue](https://en.wikipedia.org/wiki/Queue_(abstract_data_type)) is a linear data structure (i.e. its elements form a sequence) and can be modified by the addition of elements at one end of the sequence and removal from the other end. A queue is a <abbr title="First In, First Out">FIFO</abbr> (First In, First Out) data structure.

The queue data structure works in exactly the same way as its real life analogue -- the first element in the queue is automatically at the front, with subsequent elements forming in line behind their precedent.

Queues can be used to control access to shared system resources e.g. a printer queue managing access to a printer on a first come, first served basis. Queues can also feature in any architecture involving asynchronicity e.g. purchasing event tickets online. 

Typically, a queue implementation will provide at least three operations — `enqueue`, `dequeue`, and `peek`.

Enqueuing and dequeuing can be visualised at follows:

![Queue enqueue and dequeue](https://dereklawless.ie/52047a9a7727927fd8666c9338c43d9a/queue.svg)

## Complexity
🔔 Complexity is considered in terms of worst case.

### Time
|Insertion |Removal |Retrieval
|- |- |-
|Θ(1) |Θ(1) |Θ(n)

### Space
| |Notes
|- |-
|Θ(n) |The elements in the queue

## An implementation

Here we're using an array as a backing store for simplicity (although you can of course use a different approach such as a [doubly linked list](https://dereklawless.ie/linked-lists-revisited/) which can provide enqueing and dequeing in Θ(1) time).

Define a `Queue<T>` class with the following methods:

- `dequeue` - dequeues an element, removing it from the queue
- `enqueue` - enqueues an element, adding it to the queue
- `isEmpty` - determines whether the queue is empty
- `length` - returns the number of elements in the queue
- `peek` - returns the front element in the queue without dequeuing it

~~~typescript
// TypeScript
export class Queue<T> {
	private elements: T[];

	public constructor() {
		this.elements = new Array<T>();
	}

	public dequeue(): T | undefined {
		if (this.elements.length > 0) {
			return this.elements.pop();
		}
		return undefined;
	}

	public enqueue(element: T): void {
		this.elements.unshift(element);
	}

	public isEmpty(): boolean {
		return this.elements.length < 1;
	}

	public length(): number {
		return this.elements.length;
	}

	public peek(): T | undefined {
		return !this.isEmpty() ?
			this.elements[this.elements.length - 1] :
			undefined;
	}
}
~~~

[The above code is available on Github](https://github.com/dereklawless/algorithms-and-data-structures-katas/tree/master/src/data-structures/queues)
Difference between Git and GitHub
Tags: github, git, opensource
Published: 2020-06-08 08:01:47

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k2om1yhfm9w2vxc9gem8.png)
What is Git?
"Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency"

Git is a distributed peer-peer version control system. Each node in the network is a peer, storing entire repositories which can also act as a multi-node distributed back-ups. There is no specific concept of a central server although nodes can be head-less or 'bare', taking on a role similar to the central server in centralised version control systems.

What is GitHub?

"GitHub is a web-based Git repository hosting service, which offers all of the distributed revision control and source code management (SCM) functionality of Git as well as adding its own features."

Github provides access control and several collaboration features such as wikis, task management, and bug tracking and feature requests for every project.

Github allows you to:

Share your repositories with others.
Access other user's repositories.
Store remote copies of your repositories (github servers) as backup of your local copies.
Media Query Crash Course
Tags: beginners, mediaquery, responsiveness, developers
Published: 2020-06-08 07:59:21

Media query is an amazing tool in CSS3 that improves the responsiveness of a website. You may be wondering, do I really need it, when there are a lot of CSS frameworks out there that make a website responsive very faster? Yes, but the functionalities are totally different.

CSS Frameworks such as Bootstrap, Bulma and so on are style framework that leverages media queries while Media query allows us to create rules of CSS properties based on various device type.

For instance, there are times the font-size for an element is 45pixels at the desktop view. Obviously, the text will be too large at the phone view. So, it’s advisable you reduce the size. How do you reduce the size? Thankfully, media query helps to achieve that.


####Media query Syntax:

```
@media media-type and (media-expression) {
	
	/* CSS rules go here */
}
```


#####Example 1:
How to change the font-size of an element when the browser’s width is 600px wide or less. 

```
@media screen and (max-width:600px){
	h2 {
		font-size: 14px;
	}
}
```


#####Example 2:
How to change the font-size and color of an element when the browser’s width is more than 600px.

```
@media screen and (min-width:600px) {
	p {
		font-size: 40px;
		color: #333333;
	}
}
```

#####Example 3:
How to change the body text color to blue if the screen is exactly 400pixels.

```
@media screen and (width:400px) {
	body{
		color: blue;
	}

}
```

If you noticed, I made use of only 1 media type (screen) and 3 different media-expression(max-width, min-width, & width). Those are the most commonly used, the complete list is [here](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries), you can read up on it. Thanks.
IIFE (Immediately Invoked Function Expressions)
Tags: iife, javascript, async, function
Published: 2020-06-08 07:58:54

# Introduction

In this post, we'll look at what IIFE (pronounced as 'iffy') is, how to define one, and what benefits it offers by using them.

# What is IFFE?

An IIFE typically looks like this:

```jsx
//Syntax-1
(function(param){
	//Functional Code
}());

//Syntax-2
(function(param){
	//Functional Code
})();
```
Let us look at Syntax-1 a little more closely. You can see that the function is declared within a set of parenthesis (surrounding the function) and thus making it expression and hence the name "function expression". The parenthesis immediately following the closing braces invokes the function immediately and hence the name immediately invoked function expression.

# How to create an IIFE?

Let us first look at a simple function 'sayHello()' as shown below:

```jsx
function sayHello() {
	console.log('Say Hello');
}
```

This function will output the text 'Say Hello' on the console when invoked by calling the function.

If you want to convert the above function into an IIFE, here is what you need to do:

### Step 1:

Remove the function name 'sayHello' and the function turns into an anonymous function.

```jsx
function() {
	console.log('Say Hello');
}
```

The anonymous function above will give you an error since the syntax is not valid. But, we still have not completed defining our IIFE, so don't worry.

### Step 2:

Let us add a set of parentheses to make it a self-invoking function.

```jsx
function() {
	console.log('Say Hello');
}();
```

### Step 3:

The last step is to wrap the function with another set of parenthesis to make it a fully functional IIFE.

```jsx
(function() {
	console.log('Say Hello');
}());
```
# Benefits of using IIFE

One of the important things to note while using IIFE is that all variables and functions declared within the IIFE are local to the block and it is not possible for any code outside the block to access them.

In other words, we can say IIFE provides complete encapsulation of variables and functions.

```jsx
(function() {
	let x = 'Romeo & Juliet';
}());
console.log(x);
```

The above code will give you an error since 'x' is not defined.

```jsx
(function(name1, name2) {
	console.log(name1 + ' & ' + name2);
}("Romeo", "Juliet"));

```

The above example shows how to pass arguments to an IFFE.

# Conclusion

I hope this article gave an overview of what an IIFE is, how to define one, and what benefits it offers. I am a web developer newbie trying to reinforce my understanding by writing short examples of concepts that are more complex in nature.

Thank you for taking the time to read my article. Do let me know your feedback through the comments section.
Tips for JavaScript Developers
Tags: javascript
Published: 2020-06-16 10:44:12

---
title: Tips for JavaScript Developers
published: true
date: 2020-06-08 07:50:32 UTC
tags: JavaScript
canonical_url: https://www.ma-no.org/en/programming/javascript/tips-for-javascript-developers-in-2019
---

Another year is over and JavaScript is constantly changing. However, there are some tips that can help you write in 2019 clean and efficient code that scales. Below is a list of 9 pragmatic suggestions. async / await Are you still trapped in callback hell?Don't use callbacks unless it's completely necessary, such as a library or for performance reasons. Promises are totally fine, but if your codebase gets bigger, they're a little awkward to use.Today, the solution is to implement async / wait, which makes my code much cleaner to read and improve. In fact, you can wait for every JavaScript Promise… !

Read on [📖!](https://www.ma-no.org/en/programming/javascript/tips-for-javascript-developers-in-2019)
OOP Fundamentals: What is an Object ? 
Tags: oop
Published: 2020-06-08 05:23:22

Hello again, reader and fellow Dev. If you've been here before, you know I've been a Flatiron School student for the last few months. It's been some time since I wrote a piece here on dev.to, but I'm back at it now, writing blogs as an alumn! 

I'm actively job hunting at the moment and so it's a great time to review some foundational concepts that will certainly be asked about during the interview process. 

Today, we'll start at the beginning... 

#Why objects? 

Objects, as you might guess, are incredibly important in Object Oriented Programming, otherwise known as OOP. They're important because by creating objects we eliminate the need to write redundant and repetitive code. When we create an object it can be called from anywhere within a program instead of having to be recreated every time it is needed. 

###What are objects, and what do objects have? 
Objects are the basic units of object-oriented programs and have two basic things- state and behaviors. 

The state reflects that objects current state, which is stored in variables. The behaviors associated with that object are typically called methods, and can be called on that object. 

A simple example would be your car. As an object, it has a current state- it can be on, running, or off. Some methods you might be able to call on your car object would be things like:
turnOn(); drive(); reverse(); and so on.

The most important thing about objects is that they are little packages of information. An object knows its own properties and carries its methods with it. Unlike procedural programming, where a variable is declared and a function is written separately from it, in object-oriented programming we are able to call methods on the object itself. Additionally, having objects makes it possible for objects to interact with *other* objects. 

###Next up: Classes. See you soon!
How to send Laravel mail using smtp
Tags: laravel, mail, smtp, php
Published: 2020-06-08 07:40:32

Create Laravel project or if you are beginner in laravel to visit [Laravel Docs](https://laravel.com/docs/7.x/installation) 

### 💥 Setup following variables in your _.env_ file
```env
MAIL_MAILER=smtp
MAIL_HOST=smtp.mailtrap.io
MAIL_PORT=2525
MAIL_USERNAME=sample@example.com
MAIL_PASSWORD=************
MAIL_ENCRYPTION=ssl
MAIL_FROM_ADDRESS=sample@yourdomain.com
MAIL_FROM_NAME="${APP_NAME}"
```
> **Don't use google gmail smtp details**. because that is not a proper method to send emails and it is not working properly.

### 💥 Next you go to your project folder and open terminal run following command to create mail class
```bash
php artisan make:mail Mailer
```

### 💥 Now go to app/mail folder and setup your mail class like this one
```php 
<?php

namespace App\Mail;

use Illuminate\Bus\Queueable;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;

class NewMail extends Mailable
{
    use Queueable, SerializesModels;

    public $details;

    /**
     * Create a new message instance.
     *
     * @return void
     */
    public function __construct($details)
    {
        $this->details = $details;
    }

    /**
     * Build the message.
     *
     * @return $this
     */
    public function build()
    {
        return $this->subject($this->details['subject'])
                    ->view('email.contact')
                    ->from($this->details['from'], $this->details['from']);
    }
}
```

### 💥 After configure mailing class create a view file with _.blade.php_ extension

```php
<h3 class="aligncenter" style="font-family: 'Helvetica Neue',Helvetica,Arial,'Lucida Grande',sans-serif; box-sizing: border-box; font-size: 20px; color: #000; line-height: 1.2em; font-weight: 400; text-align: center; margin: 40px 0 0;" align="center">{{ $details['title'] }}</h3>
```
> Don't Forgot Mailing blade files only accept inline css's

### 💥 Finally set your controller on sending trigger process
```php
public function new_mail(Request $request)
	{

	    $details = [
	    	'to' => $request->to,
	    	'from' => $request->from,
	    	'subject' => $request->subject,
	        'title' => $request->title,
	        "body" 	=> $request->body
	    ];
   
    	\Mail::to($request->to)->send(new \App\Mail\NewMail($details));

	    if (Mail::failures()) {
	        return response()->json([
				'status'  => false,
				'data'    => $details,
				'message' => 'Nnot sending mail.. retry again...'
			]);
	    }
    	return response()->json([
			'status'  => true,
			'data'    => $details,
			'message' => 'Your details mailed successfully'
		]);
	}
```

If you want project source please visit my github [profile](https://github.com/Katheesh) and [clone](https://github.com/Katheesh/Vue-Mailer-API) and refer it.

### 😍 Have a good day.
How to Create a Custom Category in Gutenberg Block Editor
Tags: wordpress, gutenberg, wordpressplugin
Published: 2020-06-08 07:38:39

There are a number of categories for Gutenberg blocks. Suppose you are developing your own blocks or you have a number of custom blocks. Now you need to keep them under a separate custom category. So, you need to create a custom category for your blocks.
```
<?php
function boilerplate_register_block_category( $categories, $post ) {
	return array_merge(
		array(
			array(
				'slug'  => 'boilerplate',
					'title' => __( 'Boilerplate', 'boilerplate' ),
			),
		),
		$categories,
	);
}
add_filter( 'block_categories_all','boilerplate_register_block_category', 10, 2 );
```

If you write the above codes, then go back to your page or post to work with the Gutenberg Block. Now you will find a custom category named My Custom Category.
Reelin' the To-Do's Back to Today
Tags: devjournal, womenintech, codenewbie, codeland
Published: 2020-06-08 07:34:27

_This post was originally published on June 8, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

And Monday rolls around yet again! After a restful and rejuvenating weekend in the countryside, I'm ready to hit the ground running (or at least jogging at a brisk clip)!

I have quite a few things on my to-do list this week, but I'm trying something new in that I'm only going to focus on completing *one* major thing each day. (Note: This is down from *three* things each day.)

The reason here is that I've noticed those three things each day end up snowballing themselves into an avalanche of lots of things to do (I'm workin' on it...!) and I end up losing focus on moving the needle a little bit each day in favor of stressing myself out with perfectionist overwhelm.

On the list for the week: lots of life admin items, submitting materials and slides for my [CodeLand Conference] (https://codelandconf.com/) talk, adding a bit of new/necessary info into the talk itself, finally diving into APIs in my Udemy JavaScript course...

And there I go, getting a little wild with the to-do's... Can you relate?

Okay, reeling it back to today. Today's all about my CodeLand talk and my aim is to get all that's needed complete for that.

Will keep you updated as to how it goes. Cheers and happy Monday!

[Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)