Git tips The key to solve conflicts: see the two conflicting diffs by
Ciro Santilli 40 Updated 2025-07-16
The key to solve conflicts is:
You have to understand what are the two commits that touched a given line (one from master, one from features), and then combine them somehow.
These are good free newbie GUI options:
sudo apt install meld
git mergetool --tool meld
sudo apt install kdiff3
git mergetool --tool kdiff3git-tips-2.sh
#!/usr/bin/env bash
set -eux
add() (
rm -f f
for i in `seq 10`; do
printf "before $i\n\n" >> f
done
printf "conflict 1 $1\n\n" >> f
for i in `seq 10`; do
printf "middle $i\n\n" >> f
done
printf "conflict 2 $2\n\n" >> f
for i in `seq 10`; do
printf "after $i\n\n" >> f
done
git add f
)
rm -rf git-tips-2
mkdir git-tips-2
cd git-tips-2
git init
for i in 1 2 3; do
add $i $i
git commit -m $i
done
add 3 4
git commit -m 4
add 5 4
git commit -m 5
git checkout HEAD~2
git checkout -b my-feature
add 3 6
git commit -m 6
add 7 6
git commit -m 7 Git tips But which commit from master did we conflict with exactly? by
Ciro Santilli 40 Updated 2025-07-16
git rebase does not tell you that, and that sucks.We only know which commit from the feature branch caused the problem.
Generally we can guess or it is not needed, but
imerge does look promising: stackoverflow.com/questions/18162930/how-can-i-find-out-which-git-commits-cause-conflictsOld cheat on separate repo: web.
Now moving to either:
- separate files under: web-cheat/ for the boring stuff
- subsections under this section for the more exciting stuff!
Examples under:
Examples:
- html/min.html: minimal valid HTML document. It is insane however.
- html/min-sane.html: minimal sane HTML document. There are smaller valid ones, but they are insane.
- html/img.html
- html/img-broken.html: stackoverflow.com/questions/22051573/how-to-hide-image-broken-icon-using-only-css-html
- html/img-load-lazy.html: stackoverflow.com/questions/2321907/how-do-you-make-images-load-lazily-only-when-they-are-in-the-viewport/57389607#57389607
- html/iframe.html. Uses: html/iframe2.html, html/hello.txt and html/hello
- forms
- YouTube embeds
- css/code-block.html
- css/img-table-vertical-center.html
- css/viewport-height.html: a div that is a tall as the viewport, and does not generate a toplevel scrollbar
- css/responsive-image-max-height.html: here we try to create an image that is never wider than the screen. If the screen is less wide than the image, then the image scales down proportionally. Otherwise, the image has a user determined fixed by the CSS or the HTML
heightproperty. Related:TODO I'm unable to do this....... stackoverflow.com/questions/69964332/how-to-set-the-default-height-of-responsive-images-when-screen-is-wide-and-have The objective was to implement: github.com/ourbigbook/ourbigbook/issues/168 - css/top-navigation.html
Other examples include:
- css/flex-fill-vertical.html: minimal setup for a editor: docs.ourbigbook.com/editor
That example calculates and displays the final widths via JavaScript, making it easier to understand the calculations being done.
The more of their syntax gets merged into mainline Cascading Style Sheets, the better the world will be.
- js/confirm-close.html: stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes
- web-cheat/js-image-load.html: load an image from JavaScript dynamically: stackoverflow.com/questions/226847/what-is-the-best-javascript-code-to-create-an-img-element
- web-cheat/js-image-load-viewport.html: load an image from JavaScript dynamically when it would become visible on the viewport: stackoverflow.com/questions/2321907/how-do-you-make-images-load-only-when-they-are-in-the-viewport
- html/img-load-lazy.html: stackoverflow.com/questions/2321907/how-do-you-make-images-load-lazily-only-when-they-are-in-the-viewport/57389607#57389607
- web-cheat/esm.html: ESM modules
- js/keydown.html: stackoverflow.com/questions/16006583/capturing-ctrlz-key-combination-in-javascript
External libraries
- Text editors
- Interactive HTML table sorting
This example shows how you could manually include the
dist/index.js that is output from webpack into your index.html.This is generally not what you want to do, because what you actually want to do is to use a Js output name with a hash in it, so that browsers only need to refetch when the name changes.
And to do that, we have to let webpack dynamically inject that unpredictable hash as done in webpack/template with:
new HtmlWebpackPlugin({
filename: 'index.html',
// Inject the include to our hashed filename,
// since it is not deterministic due to the hash.
inject: true,
template: path.resolve(__dirname, 'index.html'),
}),This shows how to produce a minimized fully embedded CSS file with webpack from a sass:That example produces a
cd webpack/sass
npm install
npm run build
xdg-open index.htmldist/main.css file which is a compresesd combination of:- webpack/sass/main.scss
- normalize.css, added to the project as a regular
node_modulespackage
Pinned article: Introduction to the OurBigBook Project
Welcome to the OurBigBook Project! Our goal is to create the perfect publishing platform for STEM subjects, and get university-level students to write the best free STEM tutorials ever.
Everyone is welcome to create an account and play with the site: ourbigbook.com/go/register. We belive that students themselves can write amazing tutorials, but teachers are welcome too. You can write about anything you want, it doesn't have to be STEM or even educational. Silly test content is very welcome and you won't be penalized in any way. Just keep it legal!
Intro to OurBigBook
. Source. We have two killer features:
- topics: topics group articles by different users with the same title, e.g. here is the topic for the "Fundamental Theorem of Calculus" ourbigbook.com/go/topic/fundamental-theorem-of-calculusArticles of different users are sorted by upvote within each article page. This feature is a bit like:
- a Wikipedia where each user can have their own version of each article
- a Q&A website like Stack Overflow, where multiple people can give their views on a given topic, and the best ones are sorted by upvote. Except you don't need to wait for someone to ask first, and any topic goes, no matter how narrow or broad
This feature makes it possible for readers to find better explanations of any topic created by other writers. And it allows writers to create an explanation in a place that readers might actually find it.Figure 1. Screenshot of the "Derivative" topic page. View it live at: ourbigbook.com/go/topic/derivativeVideo 2. OurBigBook Web topics demo. Source. - local editing: you can store all your personal knowledge base content locally in a plaintext markup format that can be edited locally and published either:This way you can be sure that even if OurBigBook.com were to go down one day (which we have no plans to do as it is quite cheap to host!), your content will still be perfectly readable as a static site.
- to OurBigBook.com to get awesome multi-user features like topics and likes
- as HTML files to a static website, which you can host yourself for free on many external providers like GitHub Pages, and remain in full control
Figure 3. Visual Studio Code extension installation.Figure 4. Visual Studio Code extension tree navigation.Figure 5. Web editor. You can also edit articles on the Web editor without installing anything locally.Video 3. Edit locally and publish demo. Source. This shows editing OurBigBook Markup and publishing it using the Visual Studio Code extension.Video 4. OurBigBook Visual Studio Code extension editing and navigation demo. Source. - Infinitely deep tables of contents:
All our software is open source and hosted at: github.com/ourbigbook/ourbigbook
Further documentation can be found at: docs.ourbigbook.com
Feel free to reach our to us for any help or suggestions: docs.ourbigbook.com/#contact







