teleren/devto huggingface dataset:
Move commits from one branch to another
Tags: github, git, versioncontrol, devops
Published: 2021-06-11 19:33:18

### Scenario:
You encountered a production issue. Immediately you stopped doing whatever you were working on and started fixing the bug. After fixing the bug you observe that you fixed the bug on a different branch. Now you want to move a certain number of commits from a branch A to branch B.

### Solution
To move a small number of commits from A to B, use the `git cherry-pick` command

Say, you have the following branches

#### Branch A

P ----- Q ----- R ------ S

#### Branch B

F ----- G ----- H

(Note: P, Q, R, S, F, G, H are all commit hashes/ids)

and you want to move commits Q & R to B(in front of H). You can do the following by

```git
git checkout branchB
git cherry-pick Q
git cherry-pick R
```

This will result in

Branch B

F ----- G ----- H ----- Q ----- R

Basically, we first checkout to the branch where we want to add the commits, and cherry-pick the commits we want to move, in the order in which they appear in the first branch. Ensuring that the commits being cherry-picked are in sequential order is important or can result in complications.

Like I said, this method works if the number of commits is small, but to move a large number of commits we can use a better method

```git
git checkout <branchname where commits are to be moved>
git rebase --onto <SHA of most recent commit in branchB> <SHA of the commit before the commit that is to be moved> <SHA of the last commit that is to be moved>
git rebase HEAD <branchname where commits are to be moved>
```

So, for the above example - moving Q & R to branch B, the commands would be

```git
git checkout branchB
git rebase --onto H P R
git rebase HEAD branchB
```

These two tricks should be enough for moving commits between branches.

To read more of such git tips visit my blog - https://pranavjoglekarcodes.web.app/blogs/posts/2021/git_tricks_1/
Online Live Exam App with Artificial Intelligence use by yasir munir for 724.one
Tags: reactnative, 724one, react
Published: 2021-06-11 19:20:27

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l1wnlliuwj610slcar4r.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6724070kay0nqyo4qgt.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgr1g9jom526een4qvko.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5wzlry1prnq2zuv0vpl7.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unagefe8y82hwgy2b9wo.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8ksatq4wtibclwzl63g.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxu1ys7o3rmdbu9ms7lx.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rewx4sphg7renyz25p65.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krxa8mfbl2lwx18vz6qf.png)
The DOM
Published: 2021-06-11 19:03:43

The Document Model Object(DOM) is an inevitable notion in Web programming. 

This concept as important as it is, remained too abstract for me until I apprehend it in a certain way.

The definition which is given to us by the documentation may be at first a little intimidating (and that's an euphemism ).

Here is the definition of the DOM by MDN Docs:

« The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content. »

Well, you maybe have understand this definition but do you really have a clear idea of what exactly the DOM is ? Cause I don't.

So here is how I now understand it:

We have the html code below:

![100 days to learn JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42qi5x7w32bgzk0mqd21.jpg)


What if we want to add some conditions or 'reactions' to our form ? for example show a message notifying the user that his or her form has been sent ? 

How can we do it with JavaScript ? We'll code it of course but the code we will write need to actually access the element we want to modify on the web page right ?

When we visit a website via Chrome or Safari or whatever you want, the browser loads the page (an HTML document) in memory and create a model of it to interpret and render to us.

The set of rules which specifies how the browser must model the web page is the DOM.

These rules are independents of HTML or JavaScript.

To be clear, the DOM is an interface that gives us the  possibility to modify a web page with our scripts.

The browser structures the web page using a certain logic provided by the DOM,  The DOM tree. 

This structure organizes the webpage in parents elements and children that we call nodes just like a tree.
![100 days to learn JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jw3jsrf2y5se2kyzor6y.png)
  
These elements are objects and have properties. I mean that they have some qualities that will give us the possibility to modify/manipulate them with our scripts.
Here is again, the definition provided by MDN Docs:

«The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree. With them, you can change the document's structure, style, or content.»

Does it now seem clear to you? I hope so!


Please feel free to tell me that I'm wrong. I am here to learn
First Contributions & Fig
Tags: fig, github, git, beginners
Published: 2021-06-11 18:35:41

Just worked through the first contributions project to learn the git workflow. To be honest I've been intimidated by git for a very long time but honestly it was very simple.

Clone, branch, change, stage, commit, push, pull

Pull still confuses me a bit via the naming convention, what exactly is being pulled? My changes into the main? Aren't I pushing it?

Anyway, I'd also like to give a huge shoutout to the wonderful people at [Fig.io](https://fig.io/) for letting me be a part of their Early Access. Fig is a wonderful tool that makes the command line much more accessible and is wonderful for beginners such as myself.

Excited to start contributing to some real projects!
RIP Open Shell Taskbar Textures
Published: 2021-06-11 18:27:07

In the new Windows 10 Update (20H2 19042.1052) Microsoft added a new feature. That displays the weather and news when you click or hover it. But oh god Rest in peace Open Shell Textures. It's ruined!

Normal Open Shell:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtir937oe601jnox6ws6.png)
With textures:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zklptqod0wglbjp7dat.png)
 
Oh man... It's R U I N E D.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcgqda4req9dsqfu2ftm.png)
Is there a way on how to add a code directly to the HTML file to detect the browsers and extensions according to it?
Tags: html, extensions
Published: 2021-06-11 18:08:46

Is there a way that you can add a simple code you just add the the index.html file to detect the browsers and the extensions according to it? Or only for chrome-based ones and a system that says move to a chrome-based browser? If you know, please tell me.
React Tutorial For Beginners
Tags: react, webdev, codenewbie
Published: 2021-06-11 18:08:00

In the following tutorial, we will take a look at the core concepts of React in a step by step manner in order to help you understand how React works from the ground up. 

If you have trouble understanding React, then this tutorial is made just for you. Enjoy!

###Check out the video below 👇

{% youtube  LyTpJfRZ0vE %}
Closure set of Attributes and finding Candidate Keys
Tags: database, computerscience
Published: 2021-06-11 17:41:49

**Closure of an Attribute Set:**
-> It is denoted by { }+

**Example 1:**
Let a relation, R(ABCDE)
FDs: {AB->C, C->E, BC->E, B->AD}

Closure of AB, {AB}+ : {A,B,C,E,D}
Closure of C, {C}+ : {C,E}
Closure of CE, {CE}+ : {C,E}

**Example 2:**
Let a relation, R(MNPXZ)
FDs: {MN->PZ, PX->Z, MX->Z, P->M, N->M}

Closure of P, {P}+ : {P,M}
Closure of XZ, {XZ}+ : {X,Z}
Closure of MNP, {MNP}+ : {M,N,P,Z}
Closure of XPZ, {XPZ}+ : {X,P,Z,M}

**How to Find a Candidate Key in a Relation?**
**Example 1:**
Let a relation, R(ABCDE)
FDs: {A->BC, B->C, D->C, AC->D}

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

**Total no. of Possible Candidate Keys: 2^n - 1**
where, n = no. of Attributes

**Short-Cut Method**

**Example 1:**
Let a relation, R(ABCDE)
FDs: {A->BC, B->C, D->C, AC->D}

Find the attributes that are not present in the LHS of the FD, here A and E. Therefore A, E are essential attributes.

(AE)+ = {A,E,B,C,D}  => Candidate Key
(AEB)+ = {A,E,B,C,C}  => Super Key

**Example 2:**
Let a relation, R(PQRST)
FDs: {PQR->T, RSTP->S, P->Q, Q->T, TS->R}

Here P is not on the LHS of any FD, i.e P cannot be derived from any of the FD. Therefore it is an essential Attribute and will be present in all the Candidate Keys.

(P)+ = {P,Q,T}  => Not a Candidate Key

Now take 2-attributes combinations:
(PQ)+ = {P,Q,T}  => Not a Candidate Key
(PR)+ = {P,R,Q,T}  => Not a Candidate Key
(PS)+ = {P,S,Q,T,R}  => Candidate Key
(PT)+ = {P,T,Q}  => Not a Candidate Key

Now check for 3-attributes combinations:
(PQR)+ = {P,Q,R,T}  => Not a Candidate Key
(PQS)+ => Super Key because PS is a Candidate Key already

Total no. of Candidate Keys possible: 2^n-1 = 2^5-1 = 32-1 = 31 

This is how Candidate Keys can be found.

Do let me know if you enjoyed it!
Thank You.
How to read texts from a file using java
Tags: java, io, nio
Published: 2021-07-03 07:33:28

---
title: How to read texts from a file using java
published: true
date: 2021-06-11 17:38:10 UTC
tags: java, io, nio
canonical_url: http://bazlur.com/2021/06/how-to-read-texts-from-a-file-using-java/
---

Reading texts from a file has never been this easy. You have to call `Files.readString()`, that’s it.

Let’s read a text file, remove all the punctuation from it and then count all the unique words.

![100DaysOfProgramming_Day004](http://bazlur.com/img/Day005.png "100DaysOfJava")

for copy/paste pleasure: [https://github.com/rokon12/100DaysOfJava/blob/main/src/main/java/com/bazlur/Day005.java](https://github.com/rokon12/100DaysOfJava/blob/main/src/main/java/com/bazlur/Day005.java)
Kali Linux 2021.2 Review and What's New?
Tags: linux, os, beginners, kali
Published: 2021-06-11 17:15:27

---
title: Kali Linux 2021.2 Review and What's New?
published: true
description: Kali Linux 2021.2 Review and What's New?
tags: linux,os,beginner,kali
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utb47ej0nz67vm4gvqqj.png
---

Hello everyone, 

[Kali Linux](https://kali.org) is geared for users who aim to meet the requirements of professional penetration testing and security auditing. It is completely free and has many amazing new features. Recently, Kali Linux 2021.2 was released. You can upgrade an existing install or start a new install. 

Several notable new items that I wanted to call out in this release are: 

* Releasing Kaboxer v1.0 - Introducing Kali Applications Boxer v1.0! Applications in containers
* Releasing Kali-Tweaks v1.0 - Our way to make it easier to configure Kali Linux to your taste
* Disabled privileged ports - Opening a listener on ports 1024/TCP-UDP and below no longer requires super-user access
* Theme enhancements - We added a way to quickly swap between double & one-line terminal prompt and made Xfce4 Quick launch + file manager tweaks
* Desktop wallpaper & login background updates - Default images have changed with more to choose from
* Parallels support - Kali is fully supported for Apple M1 users who have Parallels

I have created a video to show you all of this awesome stuff together! 

Video (24 mins)

{% youtube ozA7Jld13Uw%}

Conclusion

Stay tuned for [future Twitch streams](https://twitch.tv/mbcrump) as we learn about security and app development or you can watch the condensed version by subscribing to my [YouTube](https://youtube.com/mbcrump). 

Stay connected with me on social platforms for daily software development news.

-[Twitter](https://twitter.com/intent/follow?screen_name=mbcrump) | [Twitch](https://twitch.tv/mbcrump) | [Instagram](https://instagram.com/mbcrump) | [YouTube](https://youtube.com/mbcrump) | [GitHub](https://github.com/mbcrump) | [Website](https://www.michaelcrump.net)
Day 108
Tags: 100daysofcode, programming
Published: 2021-06-11 17:37:30

Day 108/200 of #200DaysOfCode #100DaysOfCode #100daysofcodechallenge 

- Solved two problems on Codewars.

1 - Derivatives of type x^n (6 kyu)
2 - Start with a Vowel (7 kyu)
This Gem is on 🔥🔥 (for AWS signature v4)
Tags: aws, algorithms, ruby
Published: 2021-06-11 17:21:12



If you follow the AWS documentation for signature v4 signing process, you know it requires you to going through alot of steps. :fearful:

Finally I found  [faraday_middleware-aws-sigv4 gem](https://github.com/winebarrel/faraday_middleware-aws-sigv4). 

For me it's a live-saver. :sparkling_heart:

```ruby
conn = Faraday.new(url: API_BASE_URL) do |faraday|
    faraday.request :aws_signers_v4,
         credentials: Aws::Credentials.new(response["access_key_id"], response["secret_key"], response["session_token"]),
          service_name: 'execute-api',
          region: 'us-east-1'
  faraday.adapter Faraday.default_adapter
end
puts conn.headers
response = conn.post('/orders') do |req|
    req.headers['Content-Type'] = 'application/json'
end
puts response.body
```
Creating a custom Array.prototype.filter in javascript
Tags: javascript, programming, node
Published: 2021-06-11 17:09:59

Javascript is a prototype-based language. It means that every _native function_ can receive custom functions or having its original functions modified.

In this article, we will create a custom filter function. For who doesn't know, the _filter_ function is an array prototype function that returns all elements that match against the callback passed as argument. For more information about filter you can check the [MDN Doc](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).

So, without further ado, let's code!

```javascript
const data = [1, 2, 3, 4, 5];

Array.prototype.myCustomFilter = function (fn) {
  const filtered = []; // it will receive all values that match to condition passed in fn callback.

  for (let i = 0; i < this.length; i++) {
    if (fn(this[i])) {
      filtered.push(this[i]);
    }
  }

  return filtered;
};

const filteredData = data.myCustomFilter(function (el) {
  if (el > 2) return el;
});

// using arrow function
// const filteredData = data.myCustomFilter(el => el > 2);

console.log(filteredData); // output [3,4,5]

```

Easy, no? But, what really happened here? 

## Understanding the function

The filter function receives a callback as a parameter. You can find more info about _callback_ [here](https://developer.mozilla.org/en-US/docs/Glossary/Callback_function).

Here, we're saying to Array: "Hey dude, you're gonna get a new function called _myCustomFilter_ and it takes a _callback function_ as parameter".
```javascript
Array.prototype.myCustomFilter = function (fn) {...}
```

The method filter will return all values that match to condition passed in the callback function.

And here is where the magic happens:
```javascript
...
for (let i = 0; i < this.length; i++) {
    if (fn(this[i])) {
      filtered.push(this[i]);
    }
  }
...
```
Once loop has finished, a new array as result is returned containing all values matched to the condition. 

```javascript
const filteredData = data.myCustomFilter(function (el) {
  if (el > 2) return el;
});
```
And finally our output will be:
```javascript
console.log(filteredData); // output [3,4,5]
```

Using the original filter method, our function would become:
```javascript
const originalFilteredData = data.filter(p => p > 2);
console.log(originalFilteredData); // output [3,4,5]
```

We cannot forget to mention it that we have some concepts not covered here as the `context of this` and `arrow functions`. These guys will be discussed in the future.

I hope you enjoy this article!!

That's all, folks!!!

> trying to improve english skills too =D
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-06-11 16:52:47

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there!


**Looking back on your week, what was something you're proud of?**

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Completing a long-running project... or whatever else might spark joy ❤️ 

---

Congrats on your wins this week!

![Kool & the Gang playing "Celebrate Good Times"](https://media.giphy.com/media/fteS9EgXKPx1iCHYDQ/giphy.gif)
Welcome Thread - v128
Tags: welcome
Published: 2021-06-11 16:50:27

---
title: Welcome Thread - v128
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![hi animation](https://media.giphy.com/media/26ufn24Onjz8w7NxS/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Where to find a job you love + my list of services I have known and loved
Tags: career, javascript, react, webdev
Published: 2021-06-11 16:39:41

Hi there!
I'm a senior React.js dev and recently I think more and more about relocating to the US or Europe (I'm from Russia), or at least about starting working remotely with a US/EU company.
There are some great services in RU-net, where you can leave your resume and little by little offers come in: hh.ru, habr.ru. Everything is convenient, you don't need a million confirmations and a million obligatory fields, which make you feel suffocated.

Here's a list of sites I compiled in the course of my exploration. Perhaps it will be useful to someone else:

- [indeed.com](http://indeed.com/)
- [angel.co](http://angel.co/)
- [remoteok.io](http://remoteok.io/)
- [hired.com](http://hired.com/)
- [careerbuilder.com](http://careerbuilder.com/)
- [careerjet.com](http://careerjet.com/)
- [nofluffjobs.com](http://nofluffjobs.com/)
- [arc.dev](http://arc.dev)
- [honeypot.io](http://honeypot.io/)
- [talent.io](http://talent.io/)
- [monster.com](http://monster.com/)
- [workable.com](http://workable.com/)
- [ycombinator.com](http://ycombinator.com/)
- [bergamot.io](http://bergamot.io/)
- [relocate.me](http://relocate.me/)
- [meetfrank.com](http://meetfrank.com/)
- [xing.com](http://xing.com/)
- [justjoin.it](http://justjoin.it/)

What do you guys use?
I don't have anything against Linkedin or Angel List, I just want to know what else is out there.
I'd appreciate suggestions and stories about your own experience of changing jobs.
How to Create a Navbar Menu With Icons | How to Use Font Awesome 5 Icons in HTML | Responsive Navbar
Tags: html, css, javascript, webdev
Published: 2021-06-11 16:38:44

In this tutorial we are going to learn, how to create a Navbar or navigation Menu bar With font awesome Icons and we will also cover How to Use Font Awesome 5 Icons in the HTML Navigation navbar.
Follow these steps to create a navigation menu bar using HTML and CSS:


##Key Points##

1. Create a new HTML file in your code editor named icon-bar.html 
2. To add font awesome icons, Link your HTML file with font awesome website using CDN link
     Website Link:  https://fontawesome.com/
    Font Awesome 5 CDN Link:  https://fontawesome.com/v5.15/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont

3. Create a container div with a class named navbar.
5.  Inside navbar div, create a div with logo class and another div with icon-bar class.
6.  Now, search icons of your choice and paste the HTML code of font-awesome 5 icon inside the HTML anchor tag.
7.  Add CSS (Cascading stylesheet) to style the navigation menu bar.
8.  Add the following CSS flexbox navbar properties to make the navigation bar inline and centered horizontally and vertically.

```CSS 
.navbar{
       width: 100%;
       height: 100px;
       display: flex;
       align-items: center;
       background: linear-gradient(to bottom, white, #dddddd);
     }
```

  

9.  Now, add the following CSS properties for the navbar logo

```CSS
    .navbar .logo{
        font-size: 20px;
        font-weight: 900px;
        margin: 0 20px;
     }
```

10.  Now, Add the following CSS properties for the font awesome icon styling to make the navigation menu items at the center of the parent div, vertically and horizontally.

```CSS
     /* styling icon bar */
      .icon-bar{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center; /* horizontal center */
      }
      /* styling each icon in Icon bar */
      .icon-bar a{
        text-align: center;
        padding: 20px 30px;
        font-size: 25px;
      }
/* Menu items styling */
      .menu-items{
        font-size: large;
        color: black;
        padding-top: 5px;
      }
      /* Mouse hover effects */
      .icon-bar a:hover{
        background-color: rgb(126, 218, 126);
        color: black;
      }

```


**Watch Video Tutorial**
{% youtube 6dw5dDWYtX4 %}

If you have any questions regarding the video tutorial feel free to ask in the comment below!


   Related category searches:

navigation bar with logo w3schools
icon navigation bar css
css sidebar navigation menu
responsive navigation menu css
icons in html
horizontal menu bar in html
hamburger menu icon css
hamburger menu css responsive                


-----------------------------------------------------------
- Please have a look at my website for more details!
         https://hmawebdesign.com
- Place an order for any Web Development work!
         https://www.fiverr.com/haaddison1?up_rollout=true
---------------------------------------------------------------