It looks good out-the-box and super easy to setup, plus it looks good!
After spending several hours playing with it, I went ahead and migrated learn.erik.me to it!
It looks good out-the-box and super easy to setup, plus it looks good!
After spending several hours playing with it, I went ahead and migrated learn.erik.me to it!
First of all, think of yourself as a professional photographer with a Polaroid camera, an album to store the photos you take, and also you having a stage to place things you want to take pictures of. Lastly, you have a time machine!
Now, instead of thinking of files and folder, think of people and houses, respectively. You're the photographer so you can decide what people can wear and how to decorate a home at any time. (Editing files and folders).
When you change someones outfit, you might like it. So after complimenting them you'll want to take a picture of them, however, there's one restriction, you can only take picture of people if they're on the stage. So you need to kindly tell them to do that (git add). Though sometimes you might decide last minute you don't want to take a picture of them, so you can kindly tell all or some of them to get off (git restore --staged).
Assuming you're happy with everyone that is on the stage now you can snap a picture of them (git commit and write a little message on the back of the picture (git commit -m "a little message here"). This picture will be then be stored in your photo album. You can always see the contents of your album (git log). And now that you have an album with some pictures you can travel back in time to whatever picture you want (git checkout <id of picture>!
Now you might have a lot of important pictures in your album and you don't want to lose them. What you can do is make a copy and upload the copy to somewhere else (git push), you decide where and how often to upload copies.
This is the typical pattern of the steps, note that you can go either direction on each step.
Edit files (working area) ↔ add on stage (staging area) ↔ commit ↔ push to remote (optional)
git restore <files or folders> → you didn't like the outfit so you want to put back their previous outfit ↩️git add <files or folders> → you're happy with the outfits so you tell all or some of the people you want to take a picture of to get on a stage in preparation to take a picture of them 👉git restore <files or folders> --staged → you changed your mind, so you have people get off the stage 😏git commit → taking a photo 📸-m "a nice little note" → writing on the photo ✍️git diff → comparing two photos side by side, with new things shown in green and things that were removed shown in red 🧐git status → Provides the answer to "what's going on? 🤔" You can see who's on the stage or who's outfit you've changed, or maybe neither is the casegit log → viewing your full photo album, all the memories 🥹git checkout <reference> → inserting reference data to travel to it. For example you can get a photo from your photo album and place it in your time machine and time travel to it! 🔮git push → upload a copy of your album to a remote location i.e. Github, Gitlab, Bitbucket, etc. ☁️<html lang="en">
<head>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.edges {
display: flex;
justify-content: flex-end;
}
.dot {
background-color: black;
border-radius: 50%;
height: 8mm;
width: 8mm;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.bar {
display: flex;
flex-direction: column;
border: 1px solid black;
height: calc(76.2mm + 8mm);
justify-content: space-between;
width: fit-content;
}
@page {
margin-top: 80mm;
margin-bottom: 80mm;
margin-left: 30mm;
margin-right: 30mm;
}
@media print {
#editor {
display: none;
}
}
</style>
</head>
<body>
<div class="edges">
<div class="bar">
<div class="dot">+</div>
<div class="dot">+</div>
</div>
</div>
<!-- <div id="editor">
<p>You can get most of this info from the packaging where your hardware comes in.</p>
<div>
<label for="">circle size</label>
<input type="text" id="circle-size" value="8">mm
</div>
<div>
<label for="">gap size</label>
<input type="text" id="gap-size" value="76.2">mm
</div>
<div>
<label for="">distance from edge</label>
<input type="text" id="edge-distance" value="30">mm
</div>
</div> -->
<script>
document.getElementById("circle-size").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("dot")).forEach(function (el) {
el.style.height = newSize + "mm";
el.style.width = newSize + "mm";
});
});
document.getElementById("gap-size").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("bar")).forEach(function (el) {
el.style.height = newSize + "mm";
});
});
/*
document.getElementById("edge-distance").addEventListener("input", function() {
const newSize = this.value;
Array.from(document.getElementsByClassName("bar")).forEach(function (el) {
el.style.height = newSize + "mm";
});
});
*/
</script>
</body>
</html>