teleren/devto huggingface dataset:
A list of useful git resources + cheat sheet
Tags: git, sourcecontrol, cheatsheet
Published: 2021-08-04 13:33:37

I’ve been collecting a list of usefull resources to learn, and get better in useing, git. And I thought I would share it with you. I also created a cheat sheet with the commands I use the most. I keep both the list and the cheat sheet in a github repository – feel free to add to them if you know about some good resources that I havn’t mentioned here.

I will try to keep this blogpost up to date, but you can [always find the newest version on github](https://github.com/Eli-Schei/resource-sheets/tree/main/git).

## Resources
_Note: Resources that cost money are marked with 💰. I’m not sponcored by any of these. These are resources I found usefull myself._

**Websites**
* [An intro to git and github for beginners](https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners) (Hubspot)
* [How to write a git commit message](https://chris.beams.io/posts/git-commit/) (Chris Beams)
* [Confusing terms in the git terminology](https://dev.to/pragativerma18/confusing-terms-in-the-git-terminology-1578) (dev.to by Pragati Verma)

**Books**
* [Commit guidelines](https://www.git-scm.com/book/en/v2/Distributed-Git-Contributing-to-a-Project#_commit_guidelines) (git-scm.com book)
* [Git essentials](https://www.packtpub.com/product/git-essentials/9781785287909) (Ferdinando Santacroce) 💰

**Videos**
* [Learn Git In 15 minutes](https://www.youtube.com/watch?v=USjZcfj8yxE) (Colt Steele)
* [Learn GitHub in 15 minutes](https://www.youtube.com/watch?v=nhNq2kIvi9s) (Colt Steele)

**Podcasts**
* [git fundamentals](https://open.spotify.com/episode/3E9rAq4OUO5KNH9dEFVony?si=8LiF43NqSHOWsF05sE4hnQ) (Syntax fm)
* [git rebase explained](https://open.spotify.com/episode/0Sxv86yBWWA9RJRisMUj7C?si=4XnZkeYIR66PdX3vl5EhGw) (Syntax fm)
* [git and github](https://www.ladybug.dev/episodes/git-and-github) (Ladybug podcast)

## Cheat Sheet
![A git cheat sheet that shows my most used git commands](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ne3nqq3szxg52befu9tq.jpg)
[Click here for the image in full size](https://elischei.com/wp-content/uploads/2021/06/git-cheat-sheet-large-scaled.jpg). Or here for [the markdown version](https://github.com/Eli-Schei/resource-sheets/blob/main/git/git-cheat-scheet.md).
3D Button with Shading (Experiment)
Tags: codepen, css, html, design
Published: 2021-08-04 13:32:42

<h1>Experimenting 3D Button with Shading</h1>

<p>I'm just experimenting with shading, and coloring.</p>

<p>I used the colors in "assets" for the colors of these buttons.</p>

<p>The colors of the buttons are just inspired by most of the CSS frameworks out there. As well as the naming of the classes.</p>

<p>This list is the allowed class name for the buttons</p>

<ol>
<li><code>btn</code></li>
<li><code>btn btn-info</code></li>
<li><code>btn btn-success</code></li>
<li><code>btn btn-warning</code></li>
<li><code>btn btn-error</code></li>
<li><code>btn btn-dark</code></li>
</ol>

<p>I just did similar shading technique with my <a href="https://codepen.io/takaneichinose/pen/rNjgyRv">previous pen</a>. Please check it if you haven't yet.</p>

<p>The font <code>color</code>, <code>background-color</code>, and the <code>border-color</code> is customizable by adding class attribute on the HTML element, or by setting it on the CSS class.</p>

<p>As of now, I allowed these 3 variables to be customizable:</p>

<ol>
<li><code>color</code></li>
<li><code>background-color</code></li>
<li><code>border-color</code></li>
</ol>

<h2>Example usage</h2>

<pre style="white-space: pre-wrap;"><code class="html">&lt;!--This is the default usage, where we can use the prepared color by its class name--&gt;
&lt;button class="btn btn-info"&gt;Information button&lt;/button&gt;

&lt;!--This is the altered usage, by setting the style attribute of the HTML element--&gt;
&lt;button class="btn" style="--background-color: green;"&gt;Information button&lt;/button&gt;
</code></pre>

<h3>IF YOU WANT TO USE THIS STYLE, PLEASE READ THIS</h3>

<p>This is written in SCSS. If you would like to use the CSS, you may compile the code, then use the CSS style on your own project.</p>

<p>Please take note that the code above the block of comment:</p>

<p><code>STYLES RELATED TO EXPERIMENT BUTTONS</code></p>

<p>is just for the styling of the page. These are not related to the styles of the buttons. So after compiling to CSS, you may just take the part on or below the said block of comments.</p>

<p>You may also customize the colors of the buttons, or actually add a new class for the buttons, by editing the $btn-type map before compiling the source code into CSS.</p>

{% codepen https://codepen.io/takaneichinose/pen/KKmxwmb %}
cheat sheet, Git Stash
Tags: git, stash
Published: 2021-08-04 13:18:47

###Git Stash
####Short introduction:
Git stash allows you to save changes without interfering with commits.

#####For the list of all stashs:
```
  git stash list
```
#####To create a stash(no reference):
```
  git stash
```
#####To retrieve and delete the last stash:
```
  git stash pop
```
#####To retrieve and keep the last stash:
```
  git stash apply
```
#####To create a stash with identification:
```
  git stash save nome_do_stash
or
  git stash save 'nome do stash'
```
#####To retrieve and maintain a specific stash:
```
  git stash apply stash@{n}
or
  git stash apply n
```
#####To retrieve and delete a specific stash:
```
  git stash pop stash@{n}
```

#####To delete a specific stash 
```
   git stash drop stash@{n}
or
   git stash drop n
```
50 git short commands you should know which pro uses... 😉
Tags: productivity, webdev, git, github
Published: 2021-08-04 13:15:18

Here's 50 git commands for better productivity in your work.

Git Cheat Sheet codes

1. `g `– git

2. `gst` – git status

3. `gl` – git pull

4. `gup` – git pull --rebase
5. `gp` – git push
6. `gd `– git diff
7. `gdc` – git diff --cached
8. `gdv` – git diff -w "$@" | view -
9. `gc `– git commit -v
10. `gc!` – git commit -v --amend
11. `gca` – git commit -v -a
12. `gca!` – git commit -v -a --amend
13. `gcmsg – git commit -m
14. `gco ` – git checkout
15. `gcm` – git checkout master
16. `gr` – git remote
17. `grv` – git remote -v
18. `grmv` – git remote rename
19. `grrm` – git remote remove
20. `gsetr `– git remote set-url
21. `grup` – git remote update
22. `grbi` – git rebase -i
23. `grbc` – git rebase --continue
24. `grba` – git rebase --abort
25. `gb` – git branch
26. `gba` – git branch -a
27. `gcount` – git shortlog -sn
28. `gcl` – git config --list
29. `gcp` – git cherry-pick
30. `glg` – git log --stat --max-count=10
31. `glgg` – git log --graph --max-count=10
32. `glgga` – git log --graph --decorate --all
33. `glo` – git log --oneline --decorate --color
34. `glog` – git log --oneline --decorate --color --graph
35. `gss` – git status -s
36. `ga` – git add
37. `gm` – git merge
38. `grh` – git reset HEAD
39. `grhh` – git reset HEAD --hard
40. `gclean` – git reset --hard && git clean -dfx
41. `gwc` – git whatchanged -p --abbrev-commit --pretty=medium
42. `gsts` – git stash show --text
43. `gsta` – git stash
44. `gstp `– git stash pop
45. `gstd` – git stash drop
46. `ggpull` – git pull origin $(current_branch)
47. `ggpur` – git pull --rebase origin $(current_branch)
48. `ggpush `– git push origin $(current_branch)
49. `ggpnp` – git pull origin $(current_branch) && git push origin $(current_branch)
50. `glp` – _git_log_prettily

If i forgot something please write in comment. i appreciate your effort. Thanks 🙏
Create docker image on Apple Silicon M1 Mac 
Tags: devops, docker, apple, m1
Published: 2021-08-04 13:13:04

My biggest pain while moving to Apple Silicon M1 chip mac book was to create a docker build that would work on all the machines. It took some time for me to figure out how I can create docker images and share on docker hub that would work across different platforms.

By default Docker on M1 macbook would create `linux/arm64` images, which would work only on the machines that are using [ARM](https://en.wikipedia.org/wiki/ARM_architecture) architecture. But intel based machines uses [AMD](https://en.wikipedia.org/wiki/Advanced_Micro_Devices) architecture. As a result docker images built on m1 macbook might not work on intel based machines.

>It might not even work on gcloud / aws k8s clusters 😄

But the good part is that m1 chip macbook supports `linux/amd64` images, so we might only need to build docker images using `linux/amd64`.

Let me demonstrate an [example](https://github.com/lakhansamani/docker-demo) here:

Consider you have a Golang Application and you need Docker image for that

So your Dockerfile might look like

```docker
FROM golang:1.16-alpine as builder
WORKDIR /app
COPY . .

RUN go build && \
    chmod 777 docker-demo

FROM alpine:latest
WORKDIR /root/
COPY --from=builder /app/docker-demo .
CMD [ "./docker-demo" ]
```

> Note this is just an example you can have any Dockerfile😄

Now the command to build should add `--platform` flag with the correct platform that you want to build docker image for.

Example

```shell
docker build --platform linux/amd64 -t lakhansamani/docker-demo .
```

Thats all 😅
Now you can publish your docker image on docker hub and share with people.

You can find demo code on this [github](https://github.com/lakhansamani/docker-demo) repository
PyThaiNLP 2.4.0-dev0
Tags: opensource
Published: 2021-08-04 13:11:46

PyThaiNLP is a Python package for text processing and linguistic analysis, similar to NLTK with focus on Thai language.
![PyThaiNLP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tbqa21t8lyu1rwro3zb8.jpg)

Now, PyThaiNLP released PyThaiNLP 2.4.0-dev0.

PyThaiNLP v2.4.0-dev0 is The first development release of PyThaiNLP 2.4 (For development only).

Read more about PyThaiNLP v2.4.0-dev0: https://github.com/PyThaiNLP/pythainlp/releases/tag/v2.4.0-dev0
cheat sheet, Git Stash
Tags: git, stash
Published: 2021-08-04 13:10:47

###Git Stash
####Introdução resumida:
O git stash permite guardar alterações sem interferir com os commits.

#####Para obter a lista de todos os stashs:
```
  git stash list
```
#####Para criar um stash(sem referencia):
```
  git stash
```
#####Para recuperar e apagar o ultimo stash:
```
  git stash pop
```
#####Para recuperar e manter o ultimo stash:
```
  git stash apply
```
#####Para criar um stash com identificação:
```
  git stash save nome_do_stash
ou
  git stash save 'nome do stash'
```
#####Para recuperar e manter um stash especifico:
```
  git stash apply stash@{n}
ou
  git stash apply n
```
#####Para recuperar e apagar um stash especifico:
```
  git stash pop stash@{n}
```
A short introduction, what next?
Tags: react, javascript, node, webdev
Published: 2021-08-04 13:07:33

Hi all! I'm a Software Engineer at medusa-commerce. We are building a headless open-source e-commerce engine! We are launching the product in late August along with multiple blog posts and guides.

Primarily I use React (+ Gatsby.js) and node.js in my day to day life, which I'm also planning on posting about. But I also want to do posts about Web Vitals, analytics, design and higher-level subjects. 

But I'm also curious if there are specific things you guys would be interested in since there already exist tons of guides on various subjects. Maybe you are looking for a specific guide, maybe you aren't satisfied with what you already found? 

Comment about your interests below :D
A lightweight markdown + WYSWYG editor by elastic UI
Published: 2021-08-04 13:05:19

[editor-link](https://elastic.github.io/eui/#/editors-syntax/markdown-editor#base-editor)

I am very impressed with this editor, i was looking for such an editor for a very long time. 

I want to use this in a project, but it dose't available as standalone editor. 

Does anyone knows such an standalone editor??
Native apps are slowly taking over
Tags: programming, computerscience
Published: 2021-08-04 12:46:34

![Alt Image Text][2]
*Image copyright of [devblogs.microsoft.com][1]*

Back then when we had fewer options of choosing what to do and and how we go about doing it, things have become way more easier as the web seems to be taking over. But is this the climax of our long known native apps? Most users prefer to visit a page where they can see the data they need and afterwards, that's all about it. 'The whole thing should just go away'. As we continue to use web apps daily, we continue to abuse it also, talking in the aspect of a software developer. We make apps which are supposed to be native apps, a web app, mostly, because that's the technology we know, but the end users are also watching.

It's more difficult for a user to remember the site he saw an info on than him reluctantly snooze into his native app to grasp what he wants at any time. Yes tell me that the browser history is there, and how easy has it been for you trying to find info from a long list of history for a site you don't know it's name? You must have gone into a deadlock when you ended up wasting your time.

Most sites now provide a web version and a native version, be it mobile or desktop. Companies are beginning to discover the willingness of a user to open a native app which they frequently see, sitting on their device than trying to remember and frequently typing the same address or even worse a long  URL which is impossible to cram.

Not every user is interested in bookmarking your page, moreover of how much importance is the page to him? Most users do not use the browser bookmark, the little that do, how many of them want to pollute their browser with so many saved pages on their welcome screen?

Think about it if really that all should be a web app or a native app. If you're targeting high visits and usage of your platform then you should consider that native option, whether it will be good for your target users
[1]:https://devblogs.microsoft.com/dotnet/announcing-net-maui-preview-4/
[2]:https://devblogs.microsoft.com/dotnet/wp-content/uploads/sites/10/2021/05/maui-weather-hero-sm.png
Upcoming event: Live AMA with Jason & Kishore, Typesense
Published: 2021-08-04 12:45:07

Typesense is a modern, privacy-friendly, open-source search engine built from the ground up using cutting-edge search algorithms that take advantage of the latest advances in hardware capabilities.

**Why should you join?**

1) Typesense is on a mission to democratize search with an Open Source, out-of-the-box, easier-to-use alternative to Algolia and Elastic search.

2) Typesense is built specifically for decreasing the "time to market". It is a lightweight yet powerful & scalable alternative that focuses on Developer Happiness and Experience with a clean well-documented API, clear semantics and smart defaults.

3) Typesense has been built from scratch to offer a delightful search experience with minimal effort using cutting-edge search algorithms that take advantage of the latest advances in hardware capabilities

**Let’s talk about Search engines, Open-Source and everything in between.**

✍ Join and ask all your questions in the comments

Join Here 👉🏻 https://bit.ly/3ypFE8s 👈🏻

Save the date: 📆**Friday, Aug 6th, 2021**  

**Part I**

🚩Jason & Kishore, Maintainer, Typesense.Time-**7 PM IST  (Asia)**

**Part II**

🚩Jason & Kishore, Maintainer, Typesense.Time-**7 PM PST (North America)**
Tailwind Katas - Rebuilding OS Components
Tags: tailwindcss, css, javascript, education
Published: 2021-08-04 12:24:43

Ever wanted some ideas of ways to improve and test your understanding of a tool such as Tailwind?

One great way to is to rebuild daily tools that we're all familiar with to understand the nuances, limitations and strengths of our toolset.

Recently Simon Swiss of the Tailwind team recently [recorded a video of him rebuilding the iOS lock screen](https://www.youtube.com/watch?v=eSzNNYk7nVU) using just Tailwind which has sparked many other users around the web completing similar ideas.

Everybody who is interested (Tailwind not required!) to try out the challenge and wants to share what they've created - Share below!

I'll start with a (non production ready) macOS Calculator! Some of it even works!

{% codepen https://codepen.io/owenmelbz/pen/oNWdeXG default-tab=result %}

Looking forward to seeing what everybody else shares below!

✌🏼
10 GitHub repos based on HTML
Tags: webdev, programming, codenewbie, html
Published: 2021-08-04 12:21:05

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

### 1. html5-boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites.

🔗https://github.com/h5bp/html5-boilerplate

### 2. HTML5-Reset

A simple set of best practices to get HTML5 projects off on the right foot.

🔗https://github.com/murtaugh/HTML5-Reset

### 3. html5-device-mockups

HTML5 mockups of popular devices, to showcase your portfolio and spice up your website.

🔗https://github.com/pixelsign/html5-device-mockups

### 4. Awesome-html5

A curated list of awesome HTML5 resource

🔗https://github.com/diegocard/awesome-html5

### 5. html-minifier

Javascript-based HTML compressor/minifier (with Node.js support)

🔗https://github.com/kangax/html-minifier

### 6. shower

Shower HTML presentation engine

🔗https://github.com/shower/shower

### 7. html-dom

Common tasks of managing HTML DOM with vanilla JavaScript.

🔗https://github.com/phuoc-ng/html-dom

### 8. material-design-lite

Material Design Components in HTML/CSS/JS

🔗https://github.com/google/material-design-lite

### 9. tabler

Tabler is free and open-source HTML Dashboard UI Kit built on Bootstrap

🔗https://github.com/tabler/tabler

### 10. framework7

Full featured HTML framework for building iOS & Android apps

🔗https://github.com/framework7io/framework7

### The end

_I hope found this useful and if you did please let me know. If you have any question feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
Self-Hosted Password Manager (Laravel 8 + PHP 8 + MySQL 8)
Tags: php, passwordmanager, laravel
Published: 2021-08-04 12:12:03

---
title: Self-Hosted Password Manager (Laravel 8 + PHP 8 + MySQL 8)
published: true
description: A self-hosted Password Manager APP in Laravel 8, PHP 8 and MySQL 8
tags: PHP, PasswordManager, Laravel
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd9cntwlz01chosh5c14.jpg
---

I have published my personal Password Manager as self-hosted and open source project.

https://github.com/eusonlito/Password-Manager

Technologies are Laravel 8 + PHP 8 + MySQL 8.

Can be used as personal and company.

Main features are:

* Users Management.
* Teams management.
* Access to applications limited by teams.
* Multiple types of data records.
* Encryption in database.
* Authentication by certificate and double factor with Google Authenticator.
* Using certificate, you can to disable password auth.
* Logged every time a user accesses, consults or updates an application.
* Allows private or shared applications.
* It has a chrome extension that connects via API and directly accesses the credentials of the web you are visiting.

This project has an extension for Google Chrome that you can download at https://github.com/eusonlito/Password-Manager-Chrome

You can start with english README https://github.com/eusonlito/Password-Manager/blob/master/readme.md

What do you think?
Enjoy Programming-Themed Humor? Here's today's daily developer joke!
Tags: jokes, dailydeveloperjokes, watercooler
Published: 2021-08-04 12:00:20

---
title: "Enjoy Programming-Themed Humor? Here's today's daily developer joke!"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes, #watercooler
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e125969479bf.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ What did XHR say to AJAX when it thought it was being a Mean Girl?

___A:___ Stop trying to make fetch happen!
 -->
2021 CS50x - WEEK 8 2nd Update
Tags: computerscience, html, css, javascript
Published: 2021-08-04 11:45:15

Well I'm still in the problem set of Week 8 in Harvard's CS50x, this has been the longest I've spent on a problem(almost a week i think) in this course.

```RECAP: The problem set tasks you with using HTML, CSS, Js, Bootstrap to build a website about anything that interests you. You have to learn those technologies yourself and complete the task. This is my first time working with Web Dev so it's new territory for me.```
Specifications for the task:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gb158uimsq8a4insh2f.png)

I just want to create something simple and at the same time fulfill the specifications they provided. So far I've used HTML, CSS, and Javascript. I think I've used Bootstrap when I turned a link into a button like this:
```<a id="" class="btn btn-success" href="" target="_blank">Text</a>```

But my major problem is how to make the site look a particular way on mobile phones and computers of different screen size. So if you have any tips on how I could do that or even some Bootstrap tricks, drop a comment.

I'm taking freeCodeCamp's Web Design course but it seems a bit long.

Here's my progress so far with the page(Didn't even know what to do):
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hzgishcx92mq4vm9z8g9.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0x5ug9o12ge1rxd2qy83.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/acmvwomakvrh3nyso94x.png)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q34miuz1levh1i2nrq3g.png)
Drop tips on how to make it look good on different screen sizes