teleren/devto huggingface dataset:
Common Vscode Shortcuts
Tags: shortcuts, vscode, navigation
Published: 2021-06-08 12:23:29

```
Have you ever been in the middle of a tutorial and wondered how the tutor copied and pasted lines of code in just one click? 👋
```

## Shortcut: the time saver
> As a developer, *our focus* should be on the applications and solutions we want to provide. In a bid to achieve this, it is pertinent to remove every hurdle that slows our performance while coding. A good example is finding the tilde key for as low as **4 seconds**. This process when cumulated can hamper productivity and wear us down quickly. Time is precious, we want to work smart and waste it wisely👨‍💻.

> Our focus today will be on **Visual studio Code** 

![vscode](https://cdn.jsdelivr.net/gh/chocolatey-community/chocolatey-coreteampackages@00a000c7e5d8cc0d8416468e164eef281f843bff/icons/vscode.png)


## Visual Studio Shortcuts_


## Accessing Pallete and settings
```
ctrl + shift + p open the command palette
ctrl + , Accessing global settings
ctrl + w to close a tab
```
### Sidebar, terminal and split screens
```
ctrl + b to open and close sidebar
ctrl + shift + E to focus on the sidebar
ctrl + ` to open and close terminal
Hold down ctrl + enter to split-screen
```
### Window navigation
```
ctrl + shift + N to open a new window
ctrl + shift + W to close entire window
```

### Files and Folders
```
open a folder ctrl + down
close a folder Ctrl + up
to open a file ctrl + down
ctrl + n to create a new file
ctrl + o to open files in explorer
```

### Switch tabs
```
ctrl + tab to switch tabs and press tab to choose
ctrl + shift + t to open recently closed tabs
```

### Zoom 
```
ctrl + or - to zoom in and out
```
### Cursor navigations
```
ctrl + left arrow or right arrow to jump to the front or end of the line 
alt + left arrow or right arrow to move the cursor by words
ctrl + down or up to go to the end and beginning of the line
alt + up arrow or down arrow to move lines up and down
```

##Copy, cut and paste
```
shift + alt + down to copy a line down
shift + alt + up to copy a lineup
shift + ctrl + k to cut a line
```
### Matching brackets
```
shift + ctrl + / to jump to matching bracket
```

### Comments
```
ctrl + / comment
shift + alt + a (for multi-line comment)
```

### Selecting next matching words
```
ctrl + d to select next match
alt + click at the different lines insert multiple cursors
```

### Action point: 
```
- [x] Don't aspire to cram the shortcuts at one go (this is practically impossible).
- [x] Instead, have snippets of your favorite vscode shortcuts saved in your notepads on your PC or phones.
- [x] Practice conscious learning and refer to the snippets when you are stuck or trying to trigger an action the long way.
``` 
Drop your favorite shortcut below

📫 How to reach me **abayomiogunnusi@gmail.com**
Overview of the test plan in manual testing
Tags: testing, tutorial, devops, beginners
Published: 2021-06-08 12:22:41

**What is Test Plan?**
A project's test plan is a document that is created at the project level. It dictates which work items will be tested, how they will be tested, and how test types will be distributed among testers.

A test plan is a document that describes a software testing effort's scope, approach, objectives, resources, and schedule.
It's the document that defines out a testing project's what, when, how, and who.

**Activities for Test Planning:**
1. To define the scope and dangers that must be examined, as well as those that must not be examined.
2. Creating a Test Strategy Document
3. Taking a look at the test estimate.
4. Planning when and how to test, selecting how to evaluate test results, and setting a test exit criterion.

**Test Plan components:**

1. Test plan identifier: Unique identifying reference.
2. Introduction: A brief overview of the project as well as the document.
3. Test items: A test item is a software program that represents the application being tested.
4. Features to be tested: A feature that needs to be tested on the software.
5. Features not to be tested: Identify the features and the reasons why they were not included in the testing.
6. Approach: Details on the overall testing strategy.
7. Item pass/fail criteria: Everything was documented whether a software program passed or failed its test.
8. Test deliverables: Test plans, test specifications, and test summary reports are examples of deliverables that are delivered as part of the testing process.
9. Test Environment: Defining the environment's requirements, including hardware, software, operating systems, network setups, and tools.
10. Responsibilities: Lists the team members' duties and responsibilities.
11. Staffing and training needs: The actual workforce requirements, as well as any specialized skills and training requirements, are captured.
12. Schedule: Indicates major project deadlines and critical milestones.
13. Risks and Mitigation: High-level project risks and assumptions, as well as a plan to reduce each risk.
14. Approvals: All document evaluated and the results, their titles, and the sign-off date are recorded.
Writing Bubble Sort in Go from Scratch
Tags: go
Published: 2021-06-17 12:46:57

---
title: Writing Bubble Sort in Go from Scratch
published: true
date: 2021-06-08 12:22:40 UTC
tags: Golang
canonical_url: https://qvault.io/golang/bubble-sort-golang/
---

 ![bubbles in water](https://qvault.io/wp-content/uploads/2021/06/bubbles-in-water.jpg "bubbles in water")

The post [Writing Bubble Sort in Go from Scratch](https://qvault.io/golang/bubble-sort-golang/) first appeared on [Qvault](https://qvault.io).

Bubble sort is named for the way elements “bubble up” to the top of the list. Bubble sort repeatedly steps through a slice and compares adjacent elements, swapping them if they are out of order. It continues to loop over the [slice](https://qvault.io/golang/golang-make-maps-and-slices/) until the whole list is completely sorted.

## Full example of the bubble sort algorithm

```go
func bubbleSort(input []int) []int {
    swapped := true
    for swapped {
        swapped = false
        for i := 1; i < len(input); i++ {
            if input[i-1] > input[i] {
                input[i], input[i-1] = input[i-1], input[i]
                swapped = true
            }
        }
    }
    return input
}
```

## Using the algorithm in code

```go
func main() {
    unsorted := []int{10, 6, 2, 1, 5, 8, 3, 4, 7, 9}
    sorted := bubbleSort(unsortedInput)

    // sorted = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
```

## Why use bubble sort?

Bubble sort is famous for how easy it is to write. It’s one of the slowest sorting algorithms, but can be useful for a quick script or when the amount of data to be sorted is guaranteed to be small. If you need a sorting algorithm to use in a production system, I recommend [not reinventing the wheel and using the built-in sort.Sort method](https://qvault.io/golang/sorting-in-go-dont-reinvent-this-wheel/).

## Bubble sort Big-O complexity

While bubble sort is considered fast and easy to write, its actually one of the slowest sorting algorithms out there. Because bubble sort needs to move through the entire list for each element in the list, which in code is a nested [for-loop](https://qvault.io/golang/golang-for-loop/), bubble sort has a complexity of `O(n^2)`.

Thanks for reading, now take a course!

Interested in a high-paying job in tech? Land interviews and pass them with flying colors after taking my hands-on coding courses.

[Start coding now](https://qvault.io)

### Questions?

Follow and hit me up on Twitter [@q\_vault](https://twitter.com/q_vault) if you have any questions or comments. If I’ve made a mistake in the article be sure to [let me know](https://qvault.io/contact/) so I can get it corrected!

[Subscribe](https://mailchi.mp/5c7f5c281bbe/qvault-newsletter-subscribe) to my newsletter for more coding articles delivered straight to your inbox.
Day 20/30 : Animated Search Bar using HTML and CSS
Tags: html, css, webdev, tutorial
Published: 2021-06-08 12:15:50

Welcome to Day 20 of this [Challenge](https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1). This is what I created today. 

**➜ Here is the Demo :**
![Animated Search Bar using HTML and CSS](https://1.bp.blogspot.com/-jCh5fwlOx04/YKi259rOtrI/AAAAAAAAAGk/PGRPq4Zown8i13LVLSdZYzaAMgAY1vHZACLcBGAsYHQ/s600/20.gif)

**➜ Video Tutorial :**

{% youtube 96YFUIStTUk %}
**➜ Source Code :**
https://www.futurecodersweb.com/2021/06/animated-search-bar-using-html-and-css.html


**➜ Instagram Post and Reel for Day 20 :**
[See Post and Reel](https://www.instagram.com/future_coderss/)

------------------------------------------------------------------

Hey, If You don't know what is happening here. Don't Worry, I am doing a crazy challenge 😅. Read More about it from the post below.

{% link https://dev.to/somanathgoudar/30dayschallenge-30-days-extreme-html-css-challenge-50k1 %}

**Support Me :**
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)

------------------------------------------------------------------
Laravel Alert Messages
Tags: laravel, programming, php, tutorial
Published: 2021-06-08 12:07:18

![Laravel alert](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7iyqh3g6uxvz2t4foset.png)

In this post i am going to explain about creating beautiful alert message by using bootstrap alert component.

Let's Create a Common Blade File Called alert.blade.php
```php
{{-- Message --}}
@if (Session::has('success'))
    <div class="alert alert-success alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert">
            <i class="fa fa-times"></i>
        </button>
        <strong>Success !</strong> {{ session('success') }}
    </div>
@endif

@if (Session::has('error'))
    <div class="alert alert-danger alert-dismissible" role="alert">
        <button type="button" class="close" data-dismiss="alert">
            <i class="fa fa-times"></i>
        </button>
        <strong>Error !</strong> {{ session('error') }}
    </div>
@endif
```

Now Use This alert blade file anywhere you want to use.

```php
@include('common.alert')
```

To Pass the Alert Message in View File you can use.
```php
return redirect()->route('users.index')->with('success', 'User Deleted successfully.');
```

You can access this code on [TechTool India Github Repo](https://github.com/TechTool-India/ExampleProject/tree/user-management).

You can watch the explanation video for more clarity.

{% youtube kK9wFbEOPxI %}

To Read about Laravel User Management read below
[Part - 1](https://dev.to/shanisingh03/laravel-user-management-1-5ha1)
[Part - 2](https://dev.to/shanisingh03/laravel-user-management-2-1cgn)
[Part - 3](https://dev.to/shanisingh03/laravel-user-management-3-2g7h)

Thank You for Reading

In case of any query related to LARAVEL.
Reach Out To me.
[Twitter](https://twitter.com/shanisingh03)
[Instagram](https://www.instagram.com/shanisingh03/)
[TechToolIndia](https://youtube.com/techtoolindia)
Daily Developer Jokes - Tuesday, Jun 8, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-06-08 12:00:01

---
title: "Daily Developer Jokes - Tuesday, Jun 8, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Tuesday%2C%20Jun%208%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12591e45d64.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why didn't the `<div />` get invited to the dinner party?

___A:___ Because it had no class!
 -->
What should I learn to start applying for front-end jobs?
Published: 2021-06-08 11:59:47

![homer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4g4pgmnwxm7vslfua9ax.png)

Is React alone enough? Do you need HTML and CSS too? Why are there still so many courses on jQuery? Should I learn Redux? What is the best way to learn front-end? How to not get caught in tutorial hell?

I see these questions asked a lot. There is one underlying pain behind all of them. It is **a desire for structure**.

---

## Feeling lost

One of the main things stopping you from progressing forward is information overload. If you ask any of the questions above on the dev forum, you will likely get an overwhelming amount of contradictory answers. As a result, you will feel even more anxious and lost than before you asked the question.

---

## Junior dev position

Remember, the main goal is to get your first job. Always keep that in mind. It's easy to get lost in the intricacies of CSS or weird parts of Javascript. The question of what framework to chose is so complex it can easily make you quit. Do not allow that to happen. Do not consume more information than you need.

---

## The best way to learn

Keep your learning process structured. To do that, **pick one learning resource and stick to it till the end**. Whether it's a video course, a Bootcamp, or anything else, pick something and stick to it.

---

## How to pick the best front-end course?

It should fully cover your journey from where you are now to getting your first job. Don't pick a course that only covers one part of the front-end (like javascript framework). Instead, focus on courses that cover all parts of front-end development. Remember, you need a structure to get to your goal. By learning just one framework, you focus on one block inside a complex system that you don't yet understand.

---

## Any particular course recommendations?

We are all different. What works for one person may not work for another. You will have to find something that works for you. Most of the video courses and online Bootcamps have introduction videos. Use it to evaluate a teacher on your own. Do you like their presentation? How about their tone of voice? Do you think you can trust them? The answers to these questions will vary from person to person.

For starters, you can check **Frontend Masters online Bootcamp** and **front-end courses on Udemy**. Remember, go through introduction videos and pick one that feels better for you.

---

## Don't spend too much time choosing the course

Don't get into the trap of information overload. Just pick one that feels better to you and stick to it till the end. When you finish, start applying for junior positions. If you do that, you have better chances of getting your first front-end job than most people. Good luck!

---

Originally published at [alexsidorenko.com](https://alexsidorenko.com)
Js Interview : Bind , Call , Apply ?
Tags: javascript, programming
Published: 2021-06-08 09:47:49


***What is call and apply ? and why we need them ?***

I know this is the first question which comes to our mind🤯 


Lets understand this with an example

```javascript
let personOne = {
  firstName: "Vipin",
  lastName: "Chandra"
  sayHi: function () {
    console.log(" Hey myself " + this.firstName + " " + 
    this.lastName);
  }
};
let personTwo = {
  firstName: "Kunal",
  lastName: "verma",
  sayHi: function () {
    console.log(" Hey myself " + this.firstName + " " + 
    this.lastName);
  }
};

personOne.sayHi() // Hey myself Vipin Chandra
personTwo.sayHi() // Hey myself Kunal verma


```
We have `sayHi()` method in two person object separately ,Now imagine how many times we have to write the same function again and again for every new person object.

***Waste of time right ?***

**`call( )` is a built-in method to a function which helps us to call a function with given context (this).**

what will happen if we take `sayHi( )` out of person object ?
It will not work obviously.

```javascript
let personOne = {
  firstName: "Vipin",
  lastName: "Chandra"
  
};
let sayHi = function() {
    console.log(" Hey myself " + this.firstName + " " + 
    this.lastName);
  }
sayHi();
// error // this is undefined or refer to window object here.
```
By using `call( )` we can add a context(this) to the function `sayHi( )`

**Syntax of call( )**

`method.call(refrence*,arg,arg)`

```javascript
sayHi.call(personOne);
//Hey myself Vipin Chandra 
// you can call it multiple time by just changing the refrence
sayHi.call(personTwo)
//Hey myself Kunal verma
```
And this worked.

***`apply( )` is just the same as `call( )` the only little difference between them is the way the argument get passed.***

**Syntax of apply( )**

`method.apply(refrence*,[arg1,arg2])`

```javascript

let sayHi = function(state , city) {
    console.log(" Hey myself " + this.firstName + " " 
    this.lastName +" from "+state + " , " + city);
  }
sayHi.call(personOne,"uttarakhand","almora")
//Hey myself Vipin Chandra from uttarakhand , almora 
sayHi.apply(personOne,["uttarakhand","almora"])
// The array get destructured state = uttarakhand ,city = almora
//Hey myself Vipin Chandra from uttarakhand , almora 
```

**`Bind( )` work the same as call and apply but it does not call the function immediately instead it returns a function with fixed context(this) and fixed arguments if provided** 

```javascript
let introOne = sayHi.bind(personOne,"uttarakhand","almora");
// call it later on
introOne( ) 
//Hey myself Vipin Chandra from uttarakhand , almora 
// it will get executed in context of personOne object

```   

***Function cannot be Rebound***

```javascript
let introOne = sayHi.bind(personOne,"uttarakhand","almora").bind(personTwo,"punjab","jalandhar");
introOne( );
// //Hey myself Vipin Chandra from uttarakhand , almora 
```

Thanks for your Read.
You can also check out my other blogs on javascript.
NoSQL vs. SQL: 12 Datastores for Your Application
Tags: database, cloud, distributedsystems
Published: 2021-06-08 11:51:42

How do you choose a database? Maybe, you assess whether the use case needs a Relational database. Depending on the answer, you pick your favorite SQL or NoSQL datastore, and make it work. It is a prudent tactic: a known devil is better than an unknown angel.

Picking the right datastore can simplify your application. A wrong choice can add friction. This article will help you expand your list of known devils. It covers the following:

* **Database constituents** that define a datastore’s characteristics.
* **Datastores categorized** by **data types**: unstructured, structured (tabular), and various semi-structured (NoSQL) types.
* **Datastores** specialized for various **use cases**.
* **Decision flow chart** to navigate the landscape of on-prem and on-cloud alternatives.

[Continue reading » ](https://www.ml4devs.com/articles/datastore-choices-sql-vs-nosql-database/)
How to auto-document the database schema of your Rails app
Tags: rails, database, techtalks
Published: 2021-06-08 11:46:33


I’m wrapping up my [RailsConf 2021](https://www.railsconf.org/) presentation recap today. Check out [Part 1](https://dev.to/appland/we-need-a-better-way-to-communicate-and-explain-our-code-decisions-1nic), [Part 2 ](https://dev.to/appland/how-to-auto-document-end-to-end-flows-with-appmap-41d2) and [Part 3](https://dev.to/appland/how-to-auto-generate-swagger-openapi-doc-for-your-web-services-3npn) in case you missed them! This final post recaps the demo I gave on how to auto-document database schemas with a gem called `rails-erd`.

An entity relationship diagram (ERD) shows the tables, columns and relations in a relational database schema. To auto-generate an ERD for a specific version of your code directly from the database, you can use the `rails-erd` gem. It does this by: 

*   Gathering database meta data through active record (it uses ActiveRecord so it’s database independent).
*   Analyzing the schema and then generating a DOT file, which can be processed into a PDF.
*   Bundling all of this up into a rake task, which you can use to update the ERD when you modify the schema.

In the ERD PDF file, you can see a detailed diagram of your database schema. This is useful for analyzing the data model of an app and identifying features such as nullable and not nullable columns, column types, primary keys, foreign keys and the different types of relationships. 

You can also get other insights from looking at the schema, such as security information. In my demo, for instance, I was able to see that the password remember and reset token were all stored as a one-way digest. So, if an attacker was able to obtain access to this database, I know they wouldn’t be able to obtain these secrets.  

You can watch this portion of my RailsConf talk in the video clip above. If you want to follow along in the code or look it up later, I’ve created a branch called `erd` within the `land-of-apps` fork of the Rails Sample App. Check it out here: 

[http://github.com/land-of-apps/sample_app_6th_ed/tree/erd](http://github.com/land-of-apps/sample_app_6th_ed/tree/erd)  

I’d love to hear your comments, suggestions and questions in [Discord](https://discord.com/invite/N9VUap6)! And feel free to explore the other two types of code design docs that I demoed how to auto-generate, including:

1. [AppMap covering end-to-end data flows](https://github.com/land-of-apps/sample_app_6th_ed/tree/eager-loading)
2. [Swagger covering web services and APIs](http://github.com/land-of-apps/sample_app_6th_ed/tree/swagger )
JavaScript v TypeScript
Tags: javascript, typescript, watercooler, healthydebate
Published: 2021-06-08 11:45:44

JavaScript. By far one of the most famous programming languages for its applications in scripting, gamedev and most notably web apps 🌐. Then its brother, TypeScript. Famous for being statically typed. It adds more features to JavaScript. Which one is better? 🤔 I guess today we find out.

#### Disclaimer
What follows is going to be my opinion inferred from fact. This may or may not be true. Please read this article accordingly.

## JavaScript
JavaScript has many features, scripting, web apps and is even supported in some game engines. To sum it up nicely:

- ✔&nbsp; Dynamically typed (beginners don't mix up typing)
- ❌ No optional parameters
- ❌ No interfaces
- ✔&nbsp; Some game engine support
- ✔&nbsp; Compiled not transpiled
- ❌ No TS file imports

## TypeScript

TypeScript has similar syntax to JavaScript but with a few features added.


- ❌ Statically typed
- ✔&nbsp; Optional parameters
- ✔&nbsp; Interfaces
- ❌ Transpiled
- ✔&nbsp; Both TS and JS imports
- ✔&nbsp; Most JS frameworks support TS

Based on all of this, and my experience using both languages. I would say that TypeScript is better than JavaScript. You may disagree however. If you do, please comment 💬! I would love to hear your opinions!