Unmerging a git branch, keeping post-merge commits

sahilthakare — Thu, 08 Apr 2021 14:39:24 +0000

push your code Everyday to git?

After several commits on the merged master, the client wants the work done on the commit removed, but not the commits done after the merge.

Say there are three branches master, branch-A and branch-B.

I work on branch-A, a friend on branch-B. Once things are finalized, we merge branch-A and branch-B with the master.

After several commits on the merged master, the client wants the work done on branch-B removed, but NOT the commits done By branch-A after the merge.

How can we do it?

Basically, you git unmerge the commits :

Checkout to the master branch

git checkout origin master

View the commit history

git log

$ git log
commit ca82a6dff817ec66f44342007202690a93763949
Author: Sahil <sahil@gee-mail.com>
Date:   Mon Mar 17 21:52:11 2021 -0700

    Commit by Branch-A

commit 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7
Author: Sahil <sahil@gee-mail.com>
Date:   Sat Mar 15 16:40:33 2021 -0700

    Commit by Brach-B

commit a11bef06a3f659402fe7563abf99ad00de2209e6
Author: Sahil <sahil@gee-mail.com>
Date:   Sat Mar 15 10:31:28 2021 -0700

    Initial commit

The commit we need to unmerge is
commit 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7

git revert <hashOfMergeCommit>

in our case

git revert 085bb3bcb608e1e8451d4b2432f8ecbe6306e7e7

If you need to reference numerous commits in the revert command, eg:

git revert <hashOfMergeCommit1> <hashOfMergeCommit2> <hashOfMergeCommit3>...

Congratulations!

You've segregated the code you need, but don't stop there. Continue exploring and see what you can commit.

React Maps without Google Api key or Javascript

sahilthakare — Tue, 06 Apr 2021 11:42:03 +0000

You’re a developer that recently landed on the React ecosystem. There’s so much going on that you have no idea where to start.
tried React-maps? Why isn’t it working?

One thing that I found is that being part of the ecosystem is the quickest way to understand it.
We’ll be using npm and Mapbox to ship compact and idiomatic React code.

What is Mapbox?

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles. It is part of the Mapbox GL ecosystem.

Mapbox uses access tokens to associate API requests with your account. This token will prevent the abusive use of the map.

Add the Mapbox GL JS module

The instructions below assume you are compiling your JS with Webpack, Browserify, or another module bundler.

1.Install the npm package

npm install mapbox-gl --save

Include the GL JS CSS file

Include the GL JS CSS file in the <head> of your HTML file.

<link href='https://api.mapbox.com/mapbox-gl-js/v2.1.1/mapbox-gl.css' rel='stylesheet' />

2.Import XMapbox

You can get an access token from Mapbox after creating an account. Mapbox is free unless you have high traffic to your map (more than 50,000 requests per month).
An access token can be provided to as an attribute: access-token.

import { XMapbox } from "elements-x/dist/mapbox";
XMapbox.accessToken =
  "pk.eyJ1Ijoic2FoaWx0aGFrYXJlNTIxIiwiYSI6ImNrbjVvMTkzNDA2MXQydnM2OHJ6aHJvbXEifQ.z5aEqRBTtDMWoxVzf3aGsg";

What’s `<x-mapbox>`?

<x-mapbox> is one of the custom elements from Elements-X.

3. Display Map With a Marker

By adding <x-marker> in <x-mapbox> and Built-in geocoding by providing an address or longitude and latitude.

app.js

      <x-div>
        <x-mapbox>
          <x-marker id="marker" lnglat="Toronto, Canada" center>
            Looking For Here?
          </x-marker>
        </x-mapbox>
      </x-div>

you can see a map:

By default, map displays in terrain mode, but you can switch to satellite mode by clicking an icon in the top-right corner.

Help yourself with the source code- stackblitz

Congratulations!

You've installed Mapbox GL JS, but don't stop there. Continue exploring and see what you can build.

DEV Community: sahilthakare

Unmerging a git branch, keeping post-merge commits

push your code Everyday to git?

How can we do it?

Basically, you git unmerge the commits :

Congratulations!

React Maps without Google Api key or Javascript

What is Mapbox?

Add the Mapbox GL JS module

1.Install the npm package

Include the GL JS CSS file

2.Import XMapbox

What’s <x-mapbox>?

3. Display Map With a Marker

Congratulations!

What’s `<x-mapbox>`?