teleren/devto huggingface dataset:
Get lazy with lazygit
Tags: git, productivity, terminal, cli
Published: 2021-11-23 14:32:04

As a developer, my assumption is:
```
You are working with Git literally every hour.
```
But I wonder, how many times you felt the necessity of a tool that makes the repetitive commands/steps a bit more convenient for the things like:

- Seeing the diff
- Quickly stage/unstage files
- Seeing the logs
- A tool to quickly open PR regardless of your SCM

Well, that's when [lazygit](https://github.com/jesseduffield/lazygit) comes to the rescue. It's a terminal UI for git commands written in [Go](https://go.dev/).



Just install it following the instruction from the official repository. Then optionally you can set an alias in your shell configuration to quickly open lazygit. In my case, it's `lg`.


![alias preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnw0yb2e96g4ahbn3mf9.png)


> Here are the features I use most of the time from this tool.
> - Stage/unstage like bullet
> - Open a PR with a single keypress
> - Search through commits

### Stage/unstage like bullet

Every time performing these type of commands is really a bit painful when a tool like lazygit exists:
  - `git add foo.go`
  - `git add bar.js`
  - `git logs`
  - `git diff foo.go`

With [lazygit](https://github.com/jesseduffield/lazygit) you can quickly see through the changed files and stage/unstage them accordingly. As well as, you can see the changes on each file very easily.

### Open a PR with a single keypress

This is my favorite feature of this tool. Because every time I commit something and want to create PR/MR, I have to do a bunch of repetitive clicks here and there. On top of that, sometimes I have to work with GitHub, sometimes GitLab. So even if I wanna use the GitHub CLI tool [`hub`](https://github.com/github/hub) or GitLab CLI tool [`glab`](https://glab.readthedocs.io/en/latest/), I am ending up using two different tools. So it's nice when I can open PR/MR just by a shortcut within a second or two regardless of what SCM I am on.


### Search through commits

When I have to search through a bunch of commits, lazygit comes very handy. Altho there are other tools that exist as well. But I end up utilizing this tool a lot in this case it's I don't have to open another tool or even VS Code for this.



[lazygit](https://github.com/jesseduffield/lazygit) is open-source. And easy to download and install, so definitely give it a go!
Alternative Lightweight JavaScript libraries that could replace jQuery
Tags: javascript, jquery, webdev, beginners
Published: 2021-11-23 14:28:34

Sometimes we need to move on, learn new things and tools to improve our workflow and productivity. You may ask, frameworks like React, Vue is too much for simple use cases like small websites or landing pages. We found  two simple, lightweight JavaScript alternatives to jQuery you might find helpful 

### Alphine JS

Alpine.js is for developers who aren’t looking to build a single page application (SPA). It’s lightweight (~7kB gzipped) and designed to write markup-driven client-side JavaScript.

The syntax is borrowed from Vue and Angular directive. That means it will feel familiar if you’ve worked with those before. But, again, Alpine.js is not designed to build SPAs, but rather enhance your templates with a little bit of JavaScript.
It’s like a replacement for jQuery and JavaScript, but with declarative rendering

## Sample Code:

``` 
<script src="//unpkg.com/alpinejs" defer></script>

<div x-data="{name:''}">
  <label for="name">Name:</label>
  <input id="name" type="text" x-model="name" />
  <p x-text="name">
</div>

```

[Link](https://alpinejs.dev/)



### Petty-Vue

petite-vue is indeed addressing a similar scope to Alpine, but aims to be small and more vue compatible.  It provides the same template syntax and reactivity mental model with standard Vue. However, it is specifically optimized for "sprinkling" small amounts of interactions on an existing HTML page rendered by a server framework.
petite-vue is around half the size of Alpine.


petite-vue has no transition system (maybe this can be an opt-in plugin). It can also be used without a build step. Simply load it from a CDN:


## Sample Code:

```

<script src="https://unpkg.com/petite-vue" defer init></script>

  <div v-scope="{ likes: 0, disLikes: 0 }">
    <p>
     <button @click="likes++" style="color:green;">&#128077;  {{ likes }} </button>
     <button @click="disLikes++" style="color:red;">&#128078;   {{ disLikes }} </button>
    </p>

  </div>

```

[Link](https://github.com/vuejs/petite-vue)
Changelog #0002 — 🗂️ Tabs
Tags: devtools, api, testing, httpie
Published: 2021-11-23 14:20:08

---
title: Changelog #0002 — 🗂️ Tabs
published: true
description: This week we shipped a new tabs feature, local persistency, and more.
tags: devtools, api, testing, httpie
cover_image: https://httpie.io/Images/Share/blog-changelog-0002.png
canonical_url: https://httpie.io/blog/changelog-0002
---

It’s Friday again, and it’s our second week of changelogs. Check out what’s new this week 👇

## HTTPie for Web & Desktop

Our mission is nothing smaller than to provide the best experience to anyone working with APIs. With the initial milestone of the [private beta](https://httpie.io/beta) reached—feature parity with the [terminal version](https://httpie.io/cli)—we’re moving on to the next items on the roadmap.



### 🗂️ Tabs

Tabs have been around almost since GUIs became a thing. For a good reason, they’re great for organization and for juggling multiple things at once. And HTTPie now has them too!

![tabs](https://httpie.io/Blog/changelog-0002/tabs-SRBFFGAS.png)

Use them to create several requests in a single window. You can then compare them or just save them for later, up to you.


### 🪨 Persistency

About saving requests for later, we’ve taken a big step towards this goal: HTTPie now persists your data in local storage. The chances are that you’ll close the app by mistake or need to refresh it somehow, some-when. It would be best if you didn’t lose the requests you’ve spent time crafting when that happens. And now you won’t!

### ✨ Improvements

- We’ve listened to your feedback and made the preview hidden by default. It’s still there, just a click away.
- Remember the *dirty* badge on the preview we told you about [last time](https://httpie.io/blog/changelog-0001)? We found a better place for it: it is now in the title of the tab.
- The basic auth fields now expand to multi-line. Go ahead and use event the longest username and password; they won’t get out of sight.

### 🪲 Fixes

- HTTP Start-Line color highlight was all over the place. Now it’s nice and uniform.


## HTTPie for Terminal

We’ve improved the [development version](https://github.com/httpie/httpie) of [HTTPie for Terminal](https://httpie.io/cli) as well.

- We now preserve individual headers with the same name included in responses. They don’t get converted into a comma-separated list anymore. ([#1208](https://github.com/httpie/httpie/pull/1208))

## Happy testing, and see you next week!

- 💁🏻‍♀️ If you’re not on the private beta yet, you can [join the waitlist here](https://httpie.io/beta).
- 👉 You can also follow [@httpie](https://twitter.com/httpie) and join our [Discord community](https://httpie.io/discord).

---

Originally published on [HTTPie blog](https://httpie.io/blog/changelog-0002).
Taking control of privacy using NextDns
Tags: privacy, dns, nextdns
Published: 2021-11-23 10:16:27

![NextDNS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pebn4vuu0k1p3jqfftpp.png)

### The Problem
We use a lot of apps and websites everyday on different devices and operating systems. We don't have control on what data is being send to these services. OfCourse, in Android and iPhone we can have some permissions in place but it is very limited. 

There is no way you can control privacy for all of your devices from a central place.

### What is NextDNS
It is a firewall which can be setup at network (router) level or at individual devices. It protects you from all kinds of security threats, blocks ads and trackers on websites and in apps and provides a safe and supervised Internet for kids — on all devices and on all networks. It gives you full control of the your privacy.

### Features
All of the features are optional and can be enabled or disabled based on needs.

#### Configuration Features
>* Multiple configuration - you can have one or more configurations which can be used for each or group of devices.
>* Works using DNS - All you need is to configure a DNS provide by the configuration to have blocking in place. Once you configure DNS on device, blocking works regardless of network.

#### Security Features
>* Google Safe Browsing - Block malware and phishing domains
>* Cryptojacking Protection - Prevent the unauthorized use of your devices to mine cryptocurrency.
>* DNS Rebinding Protection - Prevent attackers from taking control of your local devices through the Internet.
>* Typosquatting Protection - Block domains registered by malicious actors that target users who incorrectly type a website address.
>* and a lot more

#### Privacy Features
>* Blocklists - Block ads & trackers using the most popular blocklists using pre-configured open source blocklists can be enabled/disabled.
>* Native Tracking Protection - Blocks wide spectrum trackers at operating system level.
>* Affiliate & Tracking Links - Blocks affiliate & tracking domains common on deals websites, in emails or in search results.
>* and a lot more
> ![Blocklists](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b39oawz93n4h5yg5ap8c.png)
 

#### Parental Controls
>* Block websites, apps and games. 
>* Block based on categories
>* Block based on day and time of the day
>* Enforce safe search
>* YouTube restricted mode

#### Optional Logs & Analytics
> When enabled, it gives complete picture of the network and devices including resolved queries, blocked queries, block reason, traffic destination by countries, % of encrypted DNS queries etc.
> ![Query Insights](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h57a6n0fbaaps8rz7ej.png)
 

### Pricing
* Sandbox - This is free environment for 7 days to try NextDNS.
* Free - Once you signup, you can save settings. This tier is limited to 300,000 queries per month for all devices under the account.
* Paid - Gives you unlimited queries per month for $2/month.

### Getting Started
* [Sandbox](https://my.nextdns.io/start)
* [Free](https://nextdns.io/?from=bq3pk9f5)
Beeping out portions of an audio file using ffmpeg
Tags: beginners, ffmpeg
Published: 2021-11-23 13:37:42

I'm trying to use ffmpeg to beep out sections of an audio file (say 10-15 and 20-30). However only the first portion(10-20) gets beeped, whilst the next portion gets muted.
```
ffmpeg -i input.mp3 -filter_complex "[0]volume=0:enable='between(t,10,15)+between(t,20,30)'[main];sine=d=5:f=800,adelay=10s,pan=stereo|FL=c0|FR=c0[beep];[main][beep]amix=inputs=2" output.wav
```
Using [this](https://stackoverflow.com/a/59937864/13639008) as my reference, but not able to make much progress.
Levelling as a Developer with Content Creation and Community Building #DevRel
Tags: devrel, career, discuss, opensource
Published: 2021-11-23 13:33:21

# Join Developer Relations Expert at New Relic Pachi Parra for her amazing talk on Content Creation and Community Building! Join [Git Commit Show](https://gitcommit.show) #season03

Get your **FREE Tickets** [here]( http://push.gitcommit.show/) _Fill the form_ 👈

**Why Building a strong community is important?** 

Community is pretty much a group of people having similar interests coming together, either be it for creating ideas, working together, or personal growth. Why is it important? Because when people come together they bring in ideas together, collaborate and create amazing possibilities. Coming to collaborate together can lead to better ideas, and what not? How many creative ideas, upon which companies have been created formed in such communities when people/friends together came in to form ideas and learn! 

We're inviting you people to our Community of Developers, "Git Commit Show" so that we can learn, collaborate and participate together so that we all can learn and create more opportunities for everyone of us! 

About Pachi:-

Pachi works as Developer Relations Engineer at New Relic and is a Streamer and Co-Founder of Feministech, an online community for Brazilian women and non-binary people who share and learn tech with live coding. Her passions include community building, hyping her friends and live coding on Twitch.

Join Git Commit Show [here](https://gitcommit.show/)

Join our [Discord](https://discord.gg/JFWP8c2gPG) for more information! 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73wopj8r03xvw1of2ox6.png)
Cyberpunk 2077 on Linux
Tags: linux, lutris, proton
Published: 2021-11-23 13:28:28


I picked up *Cyberpunk 2077* on [GOG](https://www.gog.com/) at 50% off for black friday. I had a bit of trouble getting it to work on Linux ([POP!_OS](https://pop.system76.com/)), here are my steps in case it helps someone else. 

First, I spun up [Lutris](https://lutris.net/) and the game downloaded and installed fine. But when I tried to launch it, it first crashed, then on second launch it played but felt like I was watching a stop motion video. 

After googling, I found [proton-tkg](https://github.com/Frogging-Family/wine-tkg-git) which is a patched version of Steam's proton. Downloaded: 
```
wget https://github.com/Frogging-Family/wine-tkg-git/releases/download/6.17.r0.g5f19a815/proton_tkg_6.17.r0.g5f19a815.release.tar.gz
```
Unpacked it
```
tar xf proton_tkg_6.17.r0.g5f19a815.release.tar.gz
```

Then I linked it to the runners and restarted Lutris.


```
ln -s /home/<user>/Downloads/proton_tkg_6.17.r0.g5f19a815.release/files/ /home/<user>/.local/share/lutris/runners/wine/proton
```

Selected the proton item under the Runner Options:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7fz6pyqzc57azjfxleaa.png)

I've been playing for an hour now, it's smooth and hasn't crashed. YMMV


**Good Luck Have Fun!**

If you liked this post:
[![Buy Me A Coffee](https://cdn.buymeacoffee.com/buttons/default-black.png)](https://www.buymeacoffee.com/dyslexicjedi)
Most Essential Concepts You Should Know about React
Tags: beginners, react
Published: 2021-11-23 13:25:54

## What is JSX?
JSX stands for *JavaScriptXML*. It is a javaScript Extension syntax  allows us to write HTML  and javaScript together in React. It comes with all the feature and full power of javaScript. JSX is faster than regular javaScript. 

## What is Class Component And Funtional Component?

* Class Component:-
A Class component requires you to *extends* from *React.Components* and create a *Render* function that returns a React Element. A class component is called as *statefull* class component. Whenever the state of the components changes the render method will call.

* Functional Component:-
A Functional component accepts *props* as an argument and returns a React Element. There is no render method used in funtional component. A function component is called as *stateless* functional component. It render the user interface based on props.

## What is Props?
Props Stands for *properties*. Props are nothing but a variable or object. Basically props are used to pass some data from one component to another component in react. The data flow between components is from paraent to child only.

## what is State?
State is a kind of object which allow components to manage their own data in react. It control the behaviour of the component. The component re-render when the state of the object chnages.

## What is React LifeCycle?
React LifeCycle has three main phase: **Mounting**, **Updating**, and **Unmounting**.

* Mounting:-
Mounting means putting elements into the DOM.
React has four methods that gets called in the given order, when we mount a component:-
`constructor()`
`getDerivedStateFromProps()`
`render()`
`componentDidMount()`

* Updating:-
A component is updated whenever there is a change in the component's state or props.
React has five methods that gets called in the given order when a component is updated:-
`getDerivedStateFromProps()`
`shouldComponentUpdate()`
`render()`
`getSnapshotBeforeUpdate()`
`componentDidUpdate()`

* Unmounting:-
when a component is removed from the DOM, or unmounting as React likes to call it.
React has only one ethod that gets called when a component is unmounted:-
`componentWillUnmount()`

## What is hooks?
Hooks are a new feature to React. It allows you to use state and other features without a class. It works with functional components. Hooks are nothing but a functions which *hook into* React state and lifecycle features from functional components.
Code Smell 105 - Comedian Methods
Tags: poo, naming, cleancode, codesmells
Published: 2021-11-23 13:17:19

*Use professional and meaningful names*

> TL;DR: Don't be informal or offensive

# Problems

- Readability

- Unprofessional work

# Solutions

1. Choose good and professional names.

# Context

Our profession has a creative side.

Sometimes we get bored and try to be funny.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/fe5ba2b148a1b9b5f11cd7022b059fe6)
```javascript
function erradicateAndMurderAllCustomers();

//unprofessional and offensive
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/19ae535002ea19708c13334a1171af37)
```javascript
function deleteAllCustomers();

//more declarative and professional
```

# Detection

[X] SemiAutomatic 

We can have a list of forbidden words.

We can also check them in code reviews. 

Names are contextual, so it would be a difficult task for an automatic linter.

Naming conventions should be generic and should not include cultural jargon.

# Tags

- Naming

# Conclusion

Be professional in the way you name things in your code. 

Don't be try to be a comedian by giving a variable a silly name. 

You should write production code so future software developers (even you) should easily understand.

# Relations

{% post https://dev.to/mcsee/code-smell-38-abstract-names-34ng %}

# More Info

- [What is in a name](https://dev.to/mcsee/what-exactly-is-a-name-part-i-the-quest-61k)

# Credits

Photo by <a href="https://unsplash.com/@stewartmunro">Stewart Munro</a> on <a href="https://unsplash.com/s/photos/comedy">Unsplash</a>
  
* * *

> This ‘users are idiots, and are confused by functionality’ mentality of Gnome is a disease. If you think your users are idiots, only idiots will use it.

_Linus Torvalds_
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
Animated content card with HTML CSS
Tags: css, tutorial, webdev, beginners
Published: 2021-11-23 13:01:38

{% youtube fdE02AJaRL8 %}

How to create animated content card using only html and css

In this video, 
I will show you how to create responsive animated content card using only html & css,
And you also learn how to pause the animation with a single line of code.

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)
🕐 New videos Every Friday & Tuesday

---

📹 Recommended Videos
-----------------------------
[How to use ionicon](https://youtu.be/TTrYjLOJeKs)

---

🔗 Essential links
-----------------------------
[Font - Poppins](https://fonts.google.com/specimen/Poppins?query=poppins#standard-styles)
[Ionicon](https://ionic.io/ionicons)
[Source Code](https://www.patreon.com/codewithsadee)

---

📹 Others Videos
-----------------------------
[Loopstudios Landing Page](https://youtu.be/lDHspzUov88)
[Clipboard Landing Page](https://youtu.be/ATRQj60Q3S0)
[Personal Portfolio Website](https://youtube.com/playlist?list=PLasZMtSCguZbYYb7uzDMAC0rg49A8XOsS)
[Toggle Button with 3d Effect](https://youtu.be/OpbbPLPqSDc)
[Awesome Card Design for Website](https://youtu.be/g9VdvKx8fuM)

---

💙 Like - Follow & Subscribe Me
-----------------------------
Twitter : https://twitter.com/codewithsadee
Github : https://github.com/codewithsadee
YouTube : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
Buy Me A Coffee : https://www.buymeacoffee.com/codewithsadee
Patreon : https://www.patreon.com/codewithsadee

---

[![Buy Me A Coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kn6vwn4mulhsx6o69is.png)](https://www.buymeacoffee.com/codewithsadee)
Released v1.4.9-alpha14 of the GitLab HA Scaling Runner Vending Machine for AWS! 
Published: 2021-11-23 12:30:00

Released v1.4.9-alpha14 of the GitLab HA Scaling Runner Vending Machine for AWS! 

Lots of security improvements, Docker BuildX, configure subnets, security groups and EBS size. Multiple bug fixes. Thanks to our 6 community contributors! Check It Out: https://url2go.to/fle
Rapport de stage, conclusion.

Tags: wordpress, php, webdev
Published: 2021-11-23 12:09:33

#5.CONCLUSION 
 
###Quand tu prends confiance en la confiance, tu deviens confiant. 
![jcvd](https://i.imgur.com/wCqGWGY.png)<center>*Jean-Claude Van Damme. Acteur, Artiste, Homme d’affaire, Philosophe.*</center> 
<br> 
Sacré Jean-Claude. Mais a-t-il tort ? 
Dans la vie comme en programmation, lorsqu’on part perdant, il y a de fortes chances que ça finissent en eau de boudin.  
J’ai souvent tendance à me dire que telle ou telle tâche va être trop compliquée voire impossible, à paniquer et à me sentir perdu. Ce stage n’a pas fait exception à la règle, surtout lors des premières semaines, je me suis senti parfois comme une andouille, parfois comme un cornichon. Une alternance constante entre des boyaux de porc et une cucurbitacée.  

Pas génial. 

C’était sans compter la bienveillance infinie de toute l’équipe du BIFFF, mais surtout celle de JD, qui malgré sa faible disponibilité due à son emploi du temps équivalent à celui d’un ouvrier dans une usine de plexiglas lors du premier déconfinement, a su trouver les mots pour apaiser mon cœur de son ardeur impétueuse.  
Grâce à cette atmosphère bienveillante, j’ai pu prendre confiance en moi et progresser jour après jour.  
Les tâches qui me semblaient impossibles au début, me paraissaient au fil des jours de plus en plus accessibles, pour arriver à la réalisation qu’au final, ce n’était pas si terrible que ça.  
A la grande joie de mes professeurs, de mon maître de stage et de mes camarades de classes (Salut Alan et Adri !), je suis passé d’un déferlement de messages, de questions et de captures d’écrans, par tranche de dix-sept secondes lors de la première semaine, à plus ou moins une toutes les deux heures pour les semaines suivantes. Ce qui est quand même une amélioration notable.  
Plus sérieusement, ce stage, au-delà des connaissances techniques qu’il m’a apportées (comme par exemple une expertise beaucoup plus poussée du moteur de WordPress, des fonctions liées à celui-ci mais également une bonne dose de PHP vanilla) m’a fait réaliser plusieurs choses : 
1.	Je ne suis pas un cornichon. 
2.	C’est en forgeant qu’on devient forgeron. 
3.	J’ai besoin d’un environnement de travail « bienveillant » pour pouvoir m’épanouir. 
4.	WordPress c’est un peu le bordel. 
5.	Le télétravail c’est cool, mais attendre 48h pour une réponse ça l’est moins. 
 
J’avais comme ambition de mesurer mon niveau « scolaire junior » par rapport au monde professionnel, et s’il m’a fallu dans un premier temps un recentrage mental pour éviter la première vague de panique, je dirai que le pari est tenu.  
Les tâches qui m’ont été confiées ont été terminées et validées, j’ai appris énormément de choses sur WordPress et ses fonctions, j’ai pu me servir des notions apprises en cours pour accomplir mes objectifs et en bonus j’ai rencontré de chouettes personnes. 
Qu’espérer de plus pour un stage ?  
…Pardon ?  
Une rémunération ?! 
Et puis quoi encore ! Ici on code par amour !