teleren/devto huggingface dataset:
OMGit! Git Commands Quick Reference
Tags: git, reference, tips, commandline
Published: 2021-04-03 22:57:18

---
title: OMGit! Git Commands Quick Reference
published: true
description: Git Commands Quick Reference
tags: git, reference, tips, commandline
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2rxsnmjoo9lx0vk40zw.PNG
---

I created a repository dedicated to collect Git commands that I find useful along the way of my development adventures:

[https://github.com/andreia/OMGit](https://github.com/andreia/OMGit)

![Adventure Time!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzp6g547n6c3r2s9qs1j.gif)

I hope you find something useful on it :)

A command I recently learned that you can use to time travel on your local Git repository:

```php
git reset --hard HEAD@{10.minutes.ago}
```

![Time travel with Git](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk5v89ow8g9y8rxk86ki.jpg)

If you have a Git command to share I would love to hear about it!
NodeJS Express Test-Driven API Development (TDD)
Tags: node, showdev, javascript, beginners
Published: 2021-04-03 22:07:45

---
title: NodeJS Express Test-Driven API Development (TDD)
published: true
description: Quick beginner tutorial on how to do TDD with React
tags: node, showdev, javascript, beginners
---

The idea behind Test-Driven Development is quite simple.

1. Write a test BEFORE you implement your next bit of functionality

2. Write the minimal implementation needed to make your test pass

3. Refactor and re-structure what you've written so far as needed 

Then just keep cycling through those 3 steps as you build out the rest of your project!

[In the following video](https://youtu.be/M44umyYPiuo), we learn about the basics of Test-Driven Development (TDD) specifically in the landscape of developing APIs. We use **ExpressJS, Jest, and supertest** as our frameworks of choice here, but the fundamentals that you learn from this video can be applied in almost any scenario, regardless of what NodeJS or testing framework you are using.

{% youtube M44umyYPiuo %}
SemVer vs. CalVer and Why I Use Both
Published: 2023-04-29 22:27:24

---
title: SemVer vs. CalVer and Why I Use Both
published: true
date: 2021-04-03 22:07:00 UTC
tags: 
canonical_url: https://mikestaszel.com/2021/04/03/semver-vs-calver-and-why-i-use-both/
---

"How will people know I released a new version?" I began properly versioning the software I write recently. I'm working on a Python package that I hope others will use. My goal is to iterate and release new features and fixes over time, but I need a way to signal to the world that a new version is available.

### Why You Should Version Your Code

- It's a best practice.
- It makes you think about supporting users of your code.
- It only takes a few extra minutes during the software development lifecycle.
- You should version your code if you ever want to share it with others.

### Why You Should NOT Version Your Code

- It's a personal project. Unless your goal is to learn how to properly version your software, this can be a distraction.
- During the very beginning of a project. Making a decision about versioning should happen when you're ready to share something with others - not before.
- Git and other version control systems version code for you. You can extend this with tags and releases.

## Popular Versioning Schemes

Two popular version schemes are Semantic Versioning and Calendar Versioning. Each have its strengths and weaknesses.

### Semantic Versioning

- Here's the guide - the summary is exceptionally clear: [https://semver.org](https://semver.org/)
- This method is more common and you've seen it. A version number is based on changes in the software.
- Examples of this: 1.0.0, 1.0.1, 1.1.0, 2.0.0.

### Calendar Versioning

- Here's the guide: [https://calver.org](https://calver.org/)
- This method uses the calendar to version software.
- Microsoft is starting to do this with Windows 10 - versions and updates are named after years and months they're released.
- This is a little bit more loosely defined than Semantic Versioning.
- Examples: 2020.6, 2021.01.01, 21.04.

### When to Use Which

- I use both of these approaches depending on what kind of application is being developed.
- Even if you use neither of these approaches, consider using git tags, they're very lightweight and you'll thank yourself later. It's like an easy-to-see snapshot your code at a point in time.

For "rolling" and fast-moving applications, I use CalVer.

- An example of this can be something like an ETL pipeline that's continuously being modified.
- Easier to reason about and set up - it's just a date.
- This is nicer than using only git for version history.

For slower-moving or shared components and libraries, use SemVer.

- Releases happen infrequently.
- Older releases are supported with patches.
- Great for shared libraries.
- Useful for when you want to provide some guarantees about compatibility to others.
What is DNS (Domain Name System)?
Published: 2021-04-03 21:22:58

The internet is made up of computers all over the world that communicate with each other using IP addresses. DNS translates hostnames to IP addresses, when you type in a website address and you’re computer doesn't already have the IP address in cache it will query a DNS server to see if it has the IP address.

There are four main types of DNS servers:

- Resolving Name Server queries other DNS servers if the record isn’t cached
- Root Name Server contains records on TLD Name Servers
- Top-Level Domain (TLD) Name Servers contains records of Authoritative Name Servers within its TLD. examples (.com, .net, .org, ...etc)
- Authoritative Name Server contains DNS records mapping domain names to IP Addresses

Resources Records provide DNS based data about computers on a network:

- (SOA) Start of Authority is a record that contains information about the DNS server responsible for the particular zone. 
- (NS) Name Server indicates the zones authoritative DNS servers. 
- (A) Record that maps a fully qualified domain name (FQDN) to an IP address.
- (PTR) Pointer does the opposite of an A record in which it maps an IP address to an FQDN.
- (CNAME) Canonical Name is an alias for an FQDN that can point traffic headed towards a.website.com to b.website.com instead.
- (MX) Mail Exchange specifies email servers for the zone
- (SRV) Service Record specifies servers for a particular service or protocol

DNS zones contain collections of DNS resource records:

- Forward Lookup Zone converts domains to IP Addresses
- Reverse Lookup Zone converts IP Addresses
- Primary Zone is the primary source of information
- Secondary Zone is a read-only copy of the primary zone, hosted on another server to use if the primary zone is unable to process queries.
- Stub Zone is also a copy of the primary zone however, it only contains records of authoritative name servers and is much less resource-intensive.

There are two different types of queries, recursive and iterative, that define how a DNS server resolves queries. In a recursive query, the DNS server takes responsibility for the full name resolution of a query. In an iterative query, the DNS server responds with a referral to another server from its cache or zone files. Typically your computer will send a recursive query to your internet service provider’s (ISP) DNS Resolver and If your ISP doesn’t have the record in cache it sends iterative queries until resolution.

1.  Local computer -> ISP DNS Resolver
2.  ISP -> Root Name Server
3.  ISP -> TLD Name Server
4.  ISP -> Authoritative Name Server
    1. ISP sores record in cache
5.  ISP -> Local computer
    1. Local computer stores record in cache

 The DNS servers send referrals without attempting to query other servers themselves. When the query is resolved by your ISP the record is cached, sent to your computer to be cached. Finally, the browser can communicate with the IP address of the website.
Stop chrome from pausing when switching desktops
Tags: linux
Published: 2021-04-04 04:52:55

---
title: Stop chrome from pausing when switching desktops
published: true
date: 2021-04-03 21:00:00 UTC
tags: Linux
canonical_url: https://ianmuchina.com/chrome-pauses/
---

Sometimes I switch desktop environments because, why not? Every time I switch between gnome and kde, I face the same issue. Chrome pauses.

When chrome displays the paused sign, it’s an issue with cookies. In this case, the cookies are encrypted, and chrome can’t decrypt them because it’s looking for the decryption key in the wrong keyring.

## Too many keyrings

A keyring is a lot like a password manager. The only difference is that keyrings are meant for programs, and password managers are meant for humans. [For security](https://chromium.googlesource.com/chromium/src/+/master/docs/security/faq.md#does-the-password-manager-store-my-passwords-encrypted-on-disk), chrome stores the key used to decrypt cookies in the keyring.

All major operating systems have some sort of keyring implementation. Windows has one, Mac has one. Linux has several. On Linux, chrome decides the keyring it will use based on the current desktop environment.

When switching desktop environments, chrome will switch keyrings without migrating the keys. This makes chrome forget the key needed to decrypt the cookies.

## Stick with one

The solution is to hardcode the keyring chrome will use. You can do this with the –password-store flag, which has 3 options:

- gnome (to use GNOME Keyring)
- kwallet (to use KDE’s KWallet)
- basic (to use the plain text store. No encryption)

To set the flag, first install menu-libre.

```
sudo apt install menulibre
```

Then using menu-libre, edit chrome’s command.

```
/usr/bin/google-chrome-stable --password-store=kwallet5 %U
```

Hopefully, that works, and you can switch desktops without breaking your browser.

## Further reading

[Benefits of keyrings](https://wiki.gnome.org/Projects/GnomeKeyring/SecurityFAQ)
GLUTTONY - STAY HEALTHY FOR AS LONG AS YOU CAN!
Tags: gamedev, programming, javascript
Published: 2021-04-03 20:56:42

Software development is the most diverse field in the world. Through it I’ve had the opportunity to create chatbots, websites, mobile apps, GUI apps, and even a cryptocurrency for all kinds of purposes. Now I finally created a game too. This is Gluttony, a hyper casual endless game where you have to collect (eat) vegetables and avoid candy, with a progressively increasing difficulty. It’s available for both PC and mobile platforms and you can learn more about it in the links bellow.

https://tethorax.itch.io/gluttony

https://play.google.com/store/apps/details?id=com.panteliskassotis.gluttony

https://github.com/binary-express/gluttony-app
Keeping your forked repo in sync with the remote repo
Tags: github, git, fork, clone
Published: 2021-04-03 20:05:50

While using Git/Github, there's a need to be updated with the latest commits.
###What is a fork and why is it needed?
Forking a repository means creating your **own version** of the repo where you can make whatever changes you want. It's like a personal copy. It won't affect the original product. With forks, you can change/modify whatever you want and experiment around code freely and fearlessly! Cool right?  **_Forking has nothing to do with Git, it is a feature of Github_**. Thanks to this awesome feature otherwise we wouldn't be able to play around with code at such individual levels.

###Cloning
In cloning, the copy of the repository is made at your **local machine** unlike fork where the copy is restricted to a **repository on Github** only. This is the main difference between fork and clone.

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

##Updating your forked repository
You started contributing to a project so you forked it, began working on an issue. In the mean time, other developers of the project pushed changes to the original repo from where you had forked. Now, you're done working and want to open a PR. When you go on Github, you see 

>This branch is 5701 commits behind original:master

Now, you need to update your forked repo
_(Assuming you've cloned already)_
1. Switching to the master branch
`git checkout master`

2. Checking remote versions
`git remote -v`

3. Adding/Setting remote
`git remote add upstream link `
**link** is of the original repo from where you forked!
**upstream** is the master branch of the original repo
                   OR
`git remote set-url origin SSH of original repo`

4. Fetching all the changes from the upstream
`git fetch upstream`

5. Merging
`git merge upstream/master`

6. Finallyy pushing your changes 
`git push`

You're all set to open that PR!
Build Portfolio website with React and ChakraUi
Tags: webdev, react, javascript, productivity
Published: 2021-04-03 19:53:14

## Pages
- About
 - Skills
 - Career
 - Education
- Articles
 - Blog posts
- Open-source
 -  open-source repositories list 
- Projects

## Built with
- Front-end library - [Reactjs](https://reactjs.org/)
- UI components - [Chakra UI](https://chakra-ui.com)
- Icons - [react icons](https://react-icons.github.io/react-icons/)

**Demo Link:** [Portfolio](https://ma-ahmad.github.io/portfolio2)
**GitHub Repo:** [Repo](https://github.com/MA-Ahmad/portfolio2)

---

## Updated Portfolio website

![Portfolio website 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfmll4sk34qa2iled9po.png)

## Pages
- Home Page
 - Intro
 - Highlights
  - Achievements
 - Projects
- Achievements
 - Show progress yearly wise
- About
 - Career
 - Education
- Open-source
 - open-source repositories list (card design)
- Blog
 - Published articles list 


**Demo Link:** [Portfolio](https://mahmad.me/)
**GitHub Repo:** [Repo](https://github.com/MA-Ahmad/portfolio)


## Update
##### [Open-source page](https://mahmad.me/#/open-source)
* Used github rest api to fetch user repositories
* Updated page design with react-stack-grid
* Used skeleton to show loading
Developers secrets 
Tags: feedback, timemanagement, professionalism
Published: 2021-04-03 19:47:52

In order to become a competitive and professional developer, there are some most important secrets to always keep in mind. Based on my experience, I am going to share with you the pivot knowledge of how to become a productive developer.

Firstly, time management. How you feel affects your productivity. That is all that you need to know about managing your time as a developer. Let me make this a bit clearer, I have been writing code for more than 2 years so I would genuinely admit that it is almost impossible to implement a certain feature in a very effective way when feeling tired. Self-awareness and time management are daily developer's assignments that help to plan ahead in terms of knowing when you are energetic and take that time to focus on the most urgent tasks that need maximum effort. 

I've been using that trick for the last 5 weeks, where I had to wake up earlier in the morning and implement half of the feature I was assigned on the Uplus side and finish the other part later in the evening. During the day I would focus on the task force activities. Mainly, I used this approach because in the morning my mind is fresh and it's easier to concentrate and come up with a convenient implementation plan. As a result, I was able to deliver quality work on both sides. 

Effective time management leads to a healthy and productive life as well as less procrastination. The second secret is constantly seeking feedback. Actually, feedback is a gift. Hence, it helps to learn from other's experiences and improve our own way of doing things which saves time and energy.

In short, this week I took mobile app development skills to a new level, thanks to Sam's constructive feedback.
#1 Getting started with Preact - Preact Series
Tags: webdev, javascript, showdev, webperf
Published: 2021-04-03 19:06:54

This is going to be three part tutorial series. In the first part , I will be explaining about Preact and how to get started. 

We will be building a preact app which will make use of API to get the images from unsplash and renders the same on the browser. 

# Preact:

**Preact** is a fast **3kb javascript library**, alternative to React with same ES6 API. Highly optimized **diff implementation** makes it one of the fastest Virtual DOM libraries. 

Since Preact only includes the subset of React's features, it makes the size of library smaller.

With regards to the browser support, all mordern browsers are supported including IE 11. 

# Advantages :

1. **Lightweight , faster and smaller** when compared to React. You can also run performance tests in your browser via [this link](https://developit.github.io/preact-perf/)

2. Official Preact's CLI makes it easier to create projects without babel or webpack configuration. 

3. We can easily migrate from React to Preact with `preact/compat` aliasing. Below is the link to preactjs documentation about switching from react.

[Switching from React to Preact](https://preactjs.com/guide/v10/getting-started#aliasing-react-to-preact)

# What is missing in Preact ? :

1. Proptypes validation.

2. Preact uses browser's native  `addEventlistener` for event handling ignoring the synthetic events. 

**Note:**

**Synthetic events** are wrapper around the browser's native event which forms React event system. 

[Link to Synthetic events](https://reactjs.org/docs/events.html)

Let's create our preact app. 

![giphy](https://media.giphy.com/media/PiQejEf31116URju4V/giphy.gif)

## Installing Preact in local 

Run the below command in your terminal to install `preact-cli`

```shell
npm install -g preact-cli
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617474293938/OvxbGi8lV.png)

You should be able to access the `preact` command after the successful installation of the cli. 

Run the below command to create a new `preact create` project

```
preact create default preact-unsplash
```

The above command will create a preact project named `preact-unsplash` with default settings 


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617474645083/V82RQNgGZ.png)


Now run `yarn dev` and visit [http://0.0.0.0:8080](http://0.0.0.0:8080) the link in your browser. 


![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1617475877286/wkuwklhU9.png)


🎉 Nicely done. Thanks for following along. Let me know in the comments if I have missed something. 

Stay tuned for part #2 of the tutorial series.

Happy Coding 🙂 

![giphy](https://media.giphy.com/media/lOJKLVYkNDWN8GoPoA/giphy.gif)


# Resources:

1. [Official documentation of Preact](https://preactjs.com)
2. [Introduction to Preact](https://blog.logrocket.com/introduction-to-preact-a-smaller-faster-react-alternative-ad5532eb6d79/)
Are junior devs supposed to contribute to production in their first weeks or month?
Tags: junior, onboarding, remote, ci
Published: 2021-04-03 18:39:35

---
title: Are junior devs supposed to contribute to production in their first weeks or month?
published: true
description: If we don’t include junior developers in the entire software development lifecycle, we aren’t training them to succeed.
tags: junior, onboarding, remote, ci
canonical_url: https://rowasc.com/remote-engineers/are-junior-devs-supposed-to-contribute-to-production-in-their-first-weeks-or-month/
//cover_image: https://direct_url_to_image.jpg
---

## Yes. Without a doubt.

Junior developers cannot learn by being isolated from the team, and the most infuriating way in which they get to be isolated is by not being included in day to day team activities. You may be thinking watercooler. I am thinking pushing code and having someone use it.

If we don’t include junior developers in the entire software development lifecycle, we aren’t training them to succeed.

There is no better teacher than shipping.

So if you are a junior developer wondering if pushing code that makes it into production is a reasonable expectation, let me reassure you that it is, and that you should be wary of environments where the code you write isn’t being used.

The company should have enough safety rails to protect junior developers from making terrible mistakes or recovering from them, but other than that, writing code is something we do to achieve a goal, and we cannot achieve the goal of serving users if users don’t get to have the features a junior developer writes, or the bugs they solve.

I advocate for getting a tiny commit into production as early as Day ONE of your new job, but if that isn’t feasible, Week ONE is good enough as a goal.

Learning how code goes from your precious code editor and into users lives is a critical skill for engineers At All Levels while they onboard into a new job.

-------------------------------------------------

This post is part of my series for remote software developers. You can check it out and subscribe here https://rowasc.com/engineers-working-remotely/
Faster Vue App page load by lazy loading youtube and Vimeo embed
Tags: youtube, vue, lazyload, javascript
Published: 2021-04-03 18:17:20

> The goal is to embed YouTube/Vimeo videos on your Vue web page in a fast, lightweight manner that cuts out load time and embedded the video on demand thus reducing the size of your web pages, increases your page speed and Google rank.

Embedding a YouTube video has become a completely easy for anyone engaged with the web; copy, paste, done. However, pulling in an external resource like a YouTube video slow down a web page's load performance, especially if there are two or more videos embedded on the same page.

Single embedded YouTube video equates to 25 HTTP requests with a total of ~899 KB downloaded (see screenshot). These numbers will climb as we embed more videos on the page. And these files are downloaded even before the visitor has clicked the play button.

### Solution: [Vue-Lazytube](https://www.npmjs.com/package/vue-lazytube)

With [Vue-Lazytube](https://www.npmjs.com/package/vue-lazytube)  you can embed a YouTube or Vimeo player easily and lazy load the video to save resources and reduces initial load size. Useful when performance and page size is important or for sites with many embedded videos.

For a simple example page with 10 videos, vue-lazytube will reduce loadtime by 7x and memory usage by 2-3x.

### Features
- reduces initial load size by ~1.1 MB per video
- fully responsive and customizable through `props`
- provides methods to control (`play`, `stop`, `pause` and `reset`) embedded videos
- provide options to set up custom title and preview of embedded videos
- platform supported: Youtube and Vimeo

### Check out the demo below:

{% codesandbox vue-lazytube-hj03y %}

That's all there is to it. You just cut off a second or two off your Google Page Speed Insights score.

Thanks…