teleren/devto huggingface dataset:
How to use VSCode as your Git editor... only when you call Git from within VSCode
Tags: productivity, git, vscode
Published: 2020-09-23 19:49:37

When I'm using `git` command in the built-in VSCode terminal, for things like editing commit message or proceeding with interactive rebase, it spawns its own, CLI-based editor. That's regular Git behavior but it doesn't really make sense in this context. I have a full-featured editor already open! Why to open another one? It's one of that little insignificant things that annoy me from quite some time, but I never had a motivation to do anything with them. But finally I did! At least that one.

Running an editor within an editor was a bit awkward thing by itself, but what really pushed me to take the action was broken keyboard shortcuts. VSCode doesn't work well with Nano (this is CLI editor I'm using) running inside the built-in terminal. It intercepts `Ctrl+K` combination that cuts the selected line in `Nano` so effectively such a basic feature as copy-paste doesn't work. That really breaks the whole point of interactive rebase as re-ordering commits needs copying and pasting.

Configuring an editor used by Git is easy. `git config --global core.editor 'code --wait'` should do the trick (I found [the hint about a parameter required here](https://stackoverflow.com/a/36644561/1664353)). The thing is, I don't really want to get rid of Nano. It works well when I do things in a standalone terminal. So, is it even possible to set this setting conditionally, depending on where you call `git` commands? To eat a cake and have a cake?

After some digging, I found [quite a surprising answer to a question I'd never ask](https://stackoverflow.com/a/2596835/1664353), as I did it once and simlpy memoized the answer, which apparently wasn't full. It turns out, that if there is no editor set in the config, Git searches environment variables: `GIT_EDITOR` and `EDITOR`. The later is (at least theoretically) used by other CLI programs too, so I decided to use it.

# How to make it work as a charm

1. Open command palette (`Ctrl/Cmd + P`)
2. Type `>Open settings JSON` and confirm with `Enter`
3. Add the following lines to your JSON config, adjusting the operating system name when needed
```json
"terminal.integrated.env.osx": {
  "EDITOR": "code --wait"
}
```
4. Open `~/.gitconfig` file
5. Remove the line containing the configuration of the editor (it was `editor = nano` in my case)
4. Open `~/.bashrc`, `~/.zshrc` or any other file configuring your shell
5. Paste a snippet there (choose whatever editor you've had before in your Git config):
```json
if [[ -z "$EDITOR" ]]; then
    export EDITOR="nano"
fi
```

Et voilà!

![Screen recording showing how VSCode works as a git editor when git rebase -i is called from built-in VSCode terminal](https://dev-to-uploads.s3.amazonaws.com/i/3njxstfhbyjxf6lvkwzy.gif)

In the Terminal app the same `git` command launches Nano, as expected.

![Screen recording showing how Nano works as a git editor when git rebase -i is called from a Terminal app](https://dev-to-uploads.s3.amazonaws.com/i/ugto8wl5zsim6wlcz6rr.gif)

Enjoy 😀
Developer Dictionary: HTTP and TCP/IP
Tags: beginners, computerscience, codenewbie, firstyearincode
Published: 2020-09-23 19:31:21

Where to Begin! There is a lot to say about this Thing named HTTP. It's a protocol, the Hyper Text Transfer Protocol, but you already know what the acronym spells. It's the way for computers to communicate with each other over the Internet. It's part of this other Thing called TCP/IP Stack. It's how you're reading what I typed many computers away — many hops of network cards, Ethernet cables, routers and switches away. Each of these machines along the way contain some component that implements HTTP as well as  other 'layers' of the TCP/IP stack? What does it mean to implement HTTP?

HTTP is a specification. Or in plain English, a document listing out bunch of rules that two or more parties follow in order to play well together and be able to communicate with each other. Computers that want to communicate over The — capital I — Internet have hardware and software that follow these rules. (Side note: But we can also imagine a separate network of computer that choose to communicate in a totally different way using different set of protocols.) 

So far this is a bit abstract. An analogy, coming up! First, we need to look at this TCP/IP stack.

##TCP/IP Stack

Let's look at HTTP in the context of this Thing called the TCP/IP Stack. It is a stack in that it has layers and each layer has some specific role to play in getting a message from computer A to computer B. [keep reading](https://connectthedots.dev/http-tcp-ip/)
Configuring Git
Tags: git, beginners
Published: 2020-09-23 19:04:36

Git is one of the most common tools for developers, but we often learn just enough to get the work done. Below are some optional configurations for git you might not have encountered.

## Tell git your name and email

Git uses this information to say who committed what. After all, software is often a team effort. By default, git will look for this information by asking your system and choose a default, but if you want full control, here is how you set this information.

```shell
$ git config --global user.name "My Name"
$ git config --global user.email "myemail@hello.dev"
```

Note the `--global` flags, meaning these settings will be applied system-wide, as opposed to the user level.

## Type less with aliases

Some git commands can feel long and tedious at times, why not make some aliases? Aliases are nicknames for shell commands. For example, we can tell git that when we run `git st`, we mean `git status`. Here are some reasonable ones from the git docs.

```shell
$ git config --global alias.st status
$ git config --global alias.co checkout
$ git config --global alias.br branch
$ git config --global alias.ci commit
```

Aliases behave the same way as the full command, meaning you can provide them flags and arguments as usual.

## Git auto-correct

Are you always misspelling your git commands? Irritating, I know. Git can take help by guessing what you probably meant and doing it. Git auto-correct setting lets you choose how much time it waits before executing on its assumption.

```shell
$ git config --global help.autoCorrect 30
```

The argument we provided above is an integer representing tenths of seconds. `30` means git waits for 3 seconds. If git got it wrong, cancel the command with `CTRL + C` before the time is up and try again.

---

I hope you learned something new! Be careful with git auto-correct, and thanks for reading!

Photo by [Pradipna Lodh](https://www.pexels.com/@pradipna-lodh-69194?utm_content=attributionCopyText&utm_medium=referral&utm_source=pexels) from Pexels
Create git-graphs easily
Tags: showdev, react, github, typescript
Published: 2020-09-23 19:04:26

## Why?
Have you ever struggled while trying to explain how the git flow on your squad,team or company works to one of you coworkers?

I've already struggled with this situation and back in the time I've created a new folder, started a new git with `git init` and simulated all the flow.
The problem with this approach is that it doesn't have any visualization of the git graph that's been created. And we all know that in the beginning, git is hard and with experience and time, git continues being hard 🙃

## How?
So with that in mind, I found a lib that creates [git graphs in svg](https://github.com/nicoespeon/gitgraph.js) and they already had a [port for React](https://github.com/nicoespeon/gitgraph.js/tree/master/packages/gitgraph-react). 
Then, I just created a website that facilitates the creation of the graph svg by manipulating the gitgraphjs api and here it is.

## Here it is
https://git-graph-creator.netlify.app/

It's under development and there's some improvements that could be made in order to be more complete and make use of full gitgraphjs api. It's also an open source project and I'm open to any feedback that you may give 🤙

[repo link](https://github.com/SamuelPinho/gitgraph-creator)
Unpacking Python lists vs. destructuring Javascript arrays
Tags: javascript, python, webdev, tutorial
Published: 2020-09-23 18:48:47

If you are already using `ES6` you must be pretty familiar with `destructuring` by now. As a refresher, `destructuring` allows us to assign the properties of an array/ object to individual variables, without accessing those properties using the `.` notation.

So instead of doing this: 

```javascript
const someNumbersJs = [3, 6, 9];
const oneJs  = someNumbers[0];
const twoJs = someNumbers[1];
const thereJs = someNumbers[2];
```
... we could do the same thing using a much shorter code:

```javascript
const [oneJs, twoJs, threeJs] = someNumbersJs;
console.log(oneJs); // prints 3
console.log(twoJs); // prints 6
console.log(threeJs); // prints 9
```

In `Python` we can also destructure (`unpack`) items from a `list` (Python doesn't have a native `array` data structure but a list looks identical to a Javascript array). The syntax would look like so:

```python
someNumbersPy = [3, 6, 9]
[onePy, twoPy, threePy] = someNumbersPy 
print(onePy) #prints 3
print(twoPy) #prints 6
print(threePy) #prints 9
```

We can skip items in the list, just like in Javascript. In Python we skip them using an `_` and not a comma (`,`).

Javascript
```Javascript
const [oneJs, , threeJs] = someNumbersJs
```

Python
```python
[onePy, _, threePy] = someNumbersPy 
```

We can also use the `rest` operator - in Python is represented by an `*`, while in Javascript by an ellipsis (`...`):

Javascript

```javascript
const [oneJs, ...restJs] = someNumbersJs;
console.log(restPy); // prints [6, 9]
```
Python

```python
[onePy, *restPy] = someNumbersPy 
print(restPy) #prints [6, 9]
```
**VERY NICE FEATURE:** _Compared to Javascript where the `rest` operator must be the last element in the array, in `Python` we can use it wherever we want, so we could do something like this:_

```python
otherNumbers = [528, 79, 2456, 1203, 74, 1]
[first, *restPy, last] = otherNumbers
print(first) #prints 528
print(rest) #prints [79, 2456, 1203, 74]
print(last) #prints 1
```

Trying to do the same thing in Javascript will throw an error. Pretty neat, right?

_Image source: Christina Morillo/ @divinetechygirl on Pexels_
Starting with CSS,  part 2
Published: 2020-09-23 18:23:23

 Let's continue with ...

### Loading our styles


  There are 3 basic ways to achieve this.
The first is by adding our CSS on the same lines as the HTML elements we are trying to style in the HTML file and it's called **Inline**.


```
<h1 style="color: blue;">
     Title 
</h1>}
```

  It is not recommended though, as it is considered not good practice to include the styling in the HTML file, it should include the structure and the content. It's not very efficient, we would have to add our styling to every single element we mean to manipulate, we cannot use the styling anywhere else. Lastly this method might add to the page's loading time on the browser. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/05i7w3m2dyxisnqxsi0q.png)


 The second method is called **Style Element**.
It's slightly similar to Inline, we have to again include the styling in the HTML file, but this time we are creating all the CSS in the head section of the file.


```
<head>
   <style>
       h3 {
          color: blue;
       }
   </style>
</head>
```


 This is also not recommended because we would have to include a style section in every HTML file, styling is applied only to the page it is included in and not re-usable across our pages, something not efficient or practical. 


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m5fs7gy8xjc165m1qr9t.jpg)


 The third method, **External CSS**
requires as to create separate CSS file or files that will include all our styling and be linked to the HTML pages, through the pages themselves. 


```
<head>
   <link rel="stylesheet" href="style.css" />
</head>
```


 We use the above syntax to link an external file to our HTML.
It requires adding two attributes, first the rel one - we define the relation between the files - rel="stylesheet" will tell HTML this is a stylesheet file. The other one is href - we point to the location of the file - href="style.css" will let HTML know where to look for the file, we can use a relevant (to the location of the HTML) path or a URL as the location. 


This is the recommended method of loading our styles and the one most widely used. It will keep the content/general structure and the presentation/style of that content separate, it allows us to re-use styles through our application and is considered good practice.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e5z1w3uqfcujoqsimtry.jpg)


Thank you for your time, 

In the next part we'll start with some detailed examples and see how we can combine all the concepts we discussed.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7pw2t3vhtc21sab9juys.jpg)
🔥🎉🔥🔨🔥❤️🔥🔨🔥🎉🔥 My GitHub Profile README   🔥🎉🔥🔨🔥❤️🔥🔨🔥🎉🔥
Tags: github, javascript, discuss, career
Published: 2020-09-23 18:18:36

Hi 👋 I've just finished [My Profile README](https://github.com/KonradLinkowski/KonradLinkowski) on [GitHub](http://github.com/KonradLinkowski) and I want to show you how I've done it.

## Stats
You can put your top languages in README using [GitHub Readme Stats](https://github.com/anuraghazra/github-readme-stats) 😎
![top languages](https://dev-to-uploads.s3.amazonaws.com/i/3xvekhd929snuyw4l8u9.png)

## Followers
And show your new followers few times a day using [GitHub Actions](https://docs.github.com/en/actions) 🎾
Follow [me](https://github.com/KonradLinkowski) to be displayed there ❤️
![new followers](https://dev-to-uploads.s3.amazonaws.com/i/tl7e2dwe7d8jizmv3s9f.png)

## Cool contributions graph
I've managed to make my contributions graph [look cool](https://github.com/marketplace/actions/github-contributions-generator) too 🧠
![contributions graph](https://dev-to-uploads.s3.amazonaws.com/i/ni4ug9nsn7wwpknta5f2.png)

## Love
If anyone is interested how to do something like this, you can browse and even use my code if you want to 🖥️

If you have your own [Profile README](https://docs.github.com/en/github/setting-up-and-managing-your-github-profile/managing-your-profile-readme) and want to brag, please put it in the comment below 😂

Remember to follow me ❤️ on GitHub and share 🔗

Have a nice day 😄

<sub><sub>Yes, I've just used random emojis xd</sub></sub>
Embracing Developer Productivity Engineering in Android [Video Series]
Tags: android, performance, productivity, gradle
Published: 2020-09-23 18:13:36

---
title: Embracing Developer Productivity Engineering in Android [Video Series]
published: true
description: 
tags: android, performance, productivity, gradle
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/qg7jozrs9vg2r5iavmx7.jpg
---

**Developer Productivity Engineering** is fast becoming an integral part of the development & release process in the Software Engineering world today. The benefits of investing in Productivity Engineering significantly outweigh the cost and frustration of inactivity in this space.

In this [video series](https://www.youtube.com/watch?v=yftd0YFTx-0&list=PLCZ2ZIqMhTUYX7_lFPwmqGEej9NmgVWfy), we will cover the importance of productivity engineering and explore why Android developers & teams should embrace productivity engineering as part of their development lifecycle.

We will cover the following key topics:
1. Tips to improve your Gradle builds by achieving faster, stable, and reproducible builds.
2. Importance of Build Scans in solving build problems & improving team collaborations.
3. Build Caching to significantly speed-up builds.
4. Impact of Build Cache Node Replication on your builds.
5. How to make a compelling, data-focused case for Productivity Engineering to your team and manager.


I will take you through a real-life example of using Gradle Enterprise to diagnose builds, improve the build experience, and make a business case for a focus on Productivity Engineering. 

**Gradle Enterprise** is a paid service that scans every developer & CI build and provides a remote cache for unchanged builds & tests artifacts. Gradle Enterprise gives you the data and tools to shrink wasted build time by up to **90%**.

Some of the key Gradle Enterprise features we will look into are:
1. **Build Scans and Scan Comparisons** - Gaining access to Root Cause Analysis Data.
2. **Trends and Insights** - Enables you to Practice Continuous Learning & Improvement.
3. **Build Cache & Distributed Testing** - To Reduce Build & Test Times Up to 90%.
4. **Failure Analytics** - Eliminate Flaky Tests and Other Avoidable Failures.
5. **CI Build Cache & Resource Profiling** - To Optimize CI Cost & Resource Efficiency.


We'll cover important build optimization properties and walkthrough several plugins to help diagnose and fix build issues.

Lastly, we will highlight the value proposition of Gradle Enterprise and other open-source tools to make data-driven decisions to continuously improve your build process and developer productivity.

> My goal for you is to gain a better understanding and appreciation for Productivity Engineering. 

If there's anything specific I haven't mentioned above that you would like me to cover, feel free to mention it in the comments section below.

## Special thanks
Thanks again to [Nate Ebel](https://twitter.com/n8ebel) for reviewing an early draft.
From zero to hero - becoming a game developer in 1 year with no previous coding experience
Tags: beginners, gaming, career
Published: 2020-09-23 18:09:43

In this video, I'm chatting with Jordan, an indie game developer and the creator of Haiku The Robot!

A bit over a year ago, he didn't know anything about game development or coding in general, but now he's in the middle of creating his own game. We talk about various topics like getting started with game development, what's the process around it, what is it like to jump into programming and fundraising money through Kickstarter.

[Check out the video in my YT channel called DeveloperHabits](https://youtu.be/dTMRKtHX9EI).
{% youtube dTMRKtHX9EI %}

---

Oh and...! If you are interested in coding, growth mindset and are willing to share your experiences, ideas, then please do PM me on Twitter :)!

**DeveloperHabits**
📷 Youtube: [developerHabits](https://www.youtube.com/channel/UCJLZwePkNHps5Bv7VwISyTA)
👉 Twitter: [https://twitter.com/developerHabits](https://twitter.com/developerHabits)
👉 IG: [https://www.instagram.com/developerhabits](https://www.instagram.com/developerhabits)
How do you structure your css (media queries)?
Tags: discuss, question, webdev, css
Published: 2020-09-23 18:09:01

---
title: How do you structure your css (media queries)? 
published: true
description: 
tags: discussion, question, webdev, css
//cover_image: https://direct_url_to_image.jpg
---
I've been building basic websites for a while. Mostly I've been using Ui frameworks, i.e bootstrap, and co. So all i did was change colors here and there. For a while now, I've been trying to find an efficient way to write my CSS with responsive websites in mind. So my goal is to write my CSS either mobile-first ( i usually start with big screens then trickle down) or Large screen first. Often, I find myself over-writing a lot of CSS as well as specificity problems. So How do you structure your CSS? And if possible code snippets are welcomed.
Help Needed - How long do you think it would take you to complete this work-sample?
Tags: help, discuss, programming
Published: 2020-09-23 18:08:33

---
title: Help Needed - How long do you think it would take you to complete this work-sample?
published: true
description: 
tags: #help #discuss #programming 
cover_image: https://images.unsplash.com/photo-1516321497487-e288fb19713f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80
---

Hi everyone, the company I'm working with has been doing a "simple" work-sample for new recruits for quite some time now, but something we've never quite been able to narrow down is how long it actually takes to do it. 

So rather than constrain our estimates to my own (and me actually doing it), and the small set of recruits we've had, I thought I'd try and tap into the Dev.to hive mind if you don't mind...

![Work Sample Instructions](http://andershammervald.com/WorkSampleWhatToDo.png) [Link to full size image](http://andershammervald.com/WorkSampleWhatToDo.png)

To simplify the response gathering process I've created a [small survey](https://aweform.com/view/641139437908000769/time-estimate-work-sample/).

( If you'd rather just write your estimate in a comment below I'll add that to the survey my self and then report back with the aggregate so others may benefit from this as well. )

Thanks in advance for your contributions =)
My GitHub Org. qxresearch got 1.5k views in 3 days
Tags: python, codenewbie, github, motivation
Published: 2020-09-23 17:57:45


I've created a GitHub Organization named qxresearch which is officially part of Mozilla Campus Club. Being the lead of the club I've arranged a event on 10-projects-10-Lines-of-Code.

The aim the event was to prove that we can built something really cool with the programming knowledge we've. It won't take thousands of lines of code to make GUI based python app. 

I made tutorial video explaining how the code works and how we can use those to solve real-life problems, and finally That event created a good impression on all the members in our group(280) and our repository got 1.5k+ views and 270+ unique views in 3 days. 

GitHub Org : qxresearch(https://github.com/qxresearch/qxresearch-event-1)
YouTube Playlist : QX Research(https://www.youtube.com/watch?v=B0_0gK_CUpM&list=PLK_zxbpEUfmVPsXnl1wx1s6BD8eBUjuOM) 

If you want to join @qxresearch | Mozilla Group : 
- Join Telegram Group : qxresearch(https://t.me/qxresearch)
- Join Mozilla Group : qxresearch(https://community.mozilla.org/en/groups/qx-research/)
- Subscribe for future Events : QX Research(https://www.youtube.com/channel/UCX7oe66V8zyFpAJyMfPL9VA)

tags : #success #motivation #github #opensource #python #coding #pythonprojects
expertrec.com
Published: 2020-09-23 17:49:07

Expertrec's WordPress search module replaces the standard WordPress search gadget and includes autocomplete, spell right, PDF search, picture search, and voice search capacities to your WordPress site. For more data visit Expertrec.com 

This custom inquiry module is exceptionally adaptable and extremely quick. It additionally includes channels and query items pages for a superior inquiry experience to your guests. 

You can construct and design your own WordPress search UI with no coding. If you don't mind note this is a paid module (plans start at 9$ every month) and that you may evaluate a free demo for a span of 14 days. Be that as it may, you can keep utilizing the voice scan highlight for nothing even after the time for testing. 

Highlights: 

#Super-quick. 

#Free voice search. 

#Image search. 

#PDF search. 

#Relevant and better-indexed lists 

#No Ads. 

#Search Filters and Facets. 

#Custom Search motor standards. 

#Synonyms. 

#Full authority over the UI (no coding required). 

#Quick and simple arrangement. 

#Fast type ahead autocomplete search recommendations. 

#Advanced word coordinating and grammatical error adjustment. 

#Learning search calculation that constantly shows signs of improvement. 

#Highlighting Search term. 

#Responsive – works overall gadgets (portable, tablet, work area, android application). 

About 

ExpertRec makes delightful quest encounters for WordPress destinations. To take our web crawler to live, you can adhere to the directions in this article How to introduce expertrec's WordPress search module

To know everything click....https://blog.expertrec.com/create-javascript-search-box-for-your-website/