teleren/devto huggingface dataset:
How To Get Make Target Tab Completion in Vim
Tags: vim, make, linux
Published: 2021-08-08 04:26:09

---
title: How To Get Make Target Tab Completion in Vim 
published: true
description: Make target tab completion in Vim
tags: vim, make, linux
//cover_image: https://direct_url_to_image.jpg
---

## Table of Contents

- [Problem](#problem)
- [Solution](#solution)
- [Improved](#improved)

## Problem

If you use `make` frequently, you may be aware that you can tab complete targets in bash. For example, `$ make cl<TAB> ins<TAB>` may autocomplete to `clean` then `install`.

In vim, however, if you type `:make <TAB>`, by default, vim attempts to autocomplete file names.

This blog post will show you how you can get vim to autocomplete `<TAB>` with target names from your `Makefile` instead.

## Solution

I recently came across [this](https://unix.stackexchange.com/questions/230047/how-to-list-all-targets-in-make) StackOverflow question, _How to list all targets in make?_, in which the answer is bash's completion logic: 

```sh
make -qp |
    awk -F':' '/^[a-zA-Z0-9][^$#\/\t=]*:([^=]|$)/ {split($1,A,/ /);for(i in A)print A[i]}' |
    sort -u
```

This will print out a newline-delimited list of possible targets from the Makefile in your current working directory.

With this set of commands, we can write a custom vimscript function that executes them and returns the output as completion candidates for a vim command:

```vim
function! MakeCompletion() abort
	return systemlist('make -qp | awk -F'':'' ''/^[a-zA-Z0-9][^$#\/\t=]*:([^=]|$)/ {split($1,A,/ /);for(i in A)print A[i]}'' | grep -v Makefile | sort -u')
endfunction

command! -nargs=* -complete=customlist,MakeCompletion Make !make <args>
```

This alone is a great accomplishment. If you type `:Make <TAB>`, you can cycle through all the possible make targets!

However, you may notice that if you type part of a target name and hit `<TAB>`, vim will ignore the partial input and cycle through from the beginning of the list.

## Improved

If you read `:help :command-completion-customlist`, you will discover that the function can take 3 arguments:

```text
The function arguments are:
	ArgLead		the leading portion of the argument currently being completed on
	CmdLine		the entire command line
	CursorPos	the cursor position in it (byte index)
```

So let's modify our `MakeCompletion()` function to support filtering results based on `ArgLead`:

```vim
function! MakeCompletion(A,L,P) abort
	let l:targets = systemlist('make -qp | awk -F'':'' ''/^[a-zA-Z0-9][^$#\/\t=]*:([^=]|$)/ {split($1,A,/ /);for(i in A)print A[i]}'' | grep -v Makefile | sort -u')
	return filter(l:targets, 'v:val =~ "^' . a:A . '"')
endfunction

command! -nargs=* -complete=customlist,MakeCompletion Make !make <args>
```

Now, when you type `:Make cl<TAB> ins<TAB>`, it will successfully auto-complete to `:Make clean install`.

I hope you find this short vim tip helpful.

For more vim goodies, check out my [vimrc](https://github.com/pbnj/dotfiles/blob/main/vim/.vim/vimrc).

Happy hacking!
The "I can't tell" software testing heuristic.
Tags: testing, ux
Published: 2021-08-08 03:25:03

As a tester, I would have my Dev Tools Network tab open at all times. As a software user, I don't. 

Sometimes when testing, I'll act completely as a user would, and report that I can't tell whether or not I have saved a form, for example.

That's because we have expectations about software. One of them is about forms should behave, formed by years of using forms, and finding some easier to navigate, and others harder to navigate. 

There are any one of at least three ways to know that a form hasn't saved
- An error message appears somewhere you can see it when you click the submit button
- You cannot click the submit button
- There is no success message

If you don't see one of these, are you really confident that the saved or didn't save? Users should be feel comfortable when they use software,

What makes a minimum viable product? I think it's the minimum USABLE product. It's more viable, if you know for sure what you did, and that it's done. Even when it's internal, even ESPECIALLY when it's internal, it's important that it's obvious how to  use it.
Preguntas de Entrevista JS
Tags: javascript, spanish, programming, webdev
Published: 2021-08-08 02:43:49

## 1. Hoisting

El hoisting significa que el compilador de JS, pone las declaraciones y las funciones en memoria primero, es decir, podemos llamar a una función incluso si su inicialización está después de la llamada.

Ojo, esto funciona para declaraciones y funciones, no inicializaciones de variables.

En el código debajo, podemos observar una función multiplicar y una variable sumar2. En el proceso de compilación, JS nota que existe una función y automáticamente la pone de primero en memoria. Y posteriormente ejecuta todos los demás bloques de código. **Por lo cual, la llamada a la función multiplicar() puede ejecutarse antes o después de la inicialización de la función.**

```jsx
multiplicar(10,10); //Se ejecuta

function multiplicar(a,b){
    //Se pone de primero en memoria
    console.log(a*b);
}

//Expresion de la función
sumar2(); 
const sumar2 = function() {
    console.log(3+3);
}
```

## Hoisting en acción

```jsx
/* Funciones y declaraciones de variables 
Lo primero en asignar en memoria
*/
function multiplicar(a,b){
    console.log(a*b);
}

const sumar2;

//Lo que se ejecuta después
multiplicar(10,10); //100

sumar2();  //Error
const sumar2 = function() {
    console.log(3+3);
}
```
##2. ForEach & Map

#### En que escenarios deberías usarlo.

Cuando necesites mostrar algo en consola y por HTML debes de hacerlo por **foreach**.
 
Cuando necesites crear un nuevo arreglo, con lo que quisieras 
retornar debes de usar **map**.

##3. Load & DOMContentLoaded


### Load (Event)

Espera que el js, y los archivos que dependen del html estén completamente descargados para ejecutarse.

### DOMContentLoaded

Únicamente espera que se instale el HTML puro, no le importa el js. Ni las imágenes, únicamente el esqueleto del sitio web.

#### ¿Cuál usar?

Por lo general DOMContentLoaded, ya que no necesitamos que se carguen las hojas de estilo primero ni lo demás. Únicamente el HTML, así se ejecuta mas rápido el código JS.
如何为GitHub Pages网站自定义域名
Published: 2021-08-08 02:37:03

每一次部署后，都无法用CNAME绑定的域名访问，在GitHub后台重新设置以后就没有问题，直到再次自动部署。

发现在后台设置绑定域名以后，实际上是在web的根目录增加了一个``CNAME``文件，文件内容就是绑定的域名，需要在hexo项目 build的时候，将这个文件复制到public的根目录下。

实际操作，只要在``source``目录下创建``CNAME``这个文件，跟``_posts``目录并列，build的时候，会自动将这个文件复制到public目录中。

#### References
* https://hexo.io/docs/asset-folders.html
如何基于浏览器获取包含权限的GitHub Token？
Published: 2021-08-08 02:33:16


参照[Hexo这篇文档](https://hexo.io/docs/github-pages)，准备将Hexo生成的网站，通过Github Actions部署到Github Pages，在``git push``的时候，提示下面错误。

```
Enumerating objects: 9, done.
Counting objects: 100% (9/9), done.
Delta compression using up to 8 threads
Compressing objects: 100% (5/5), done.
Writing objects: 100% (8/8), 957 bytes | 957.00 KiB/s, done.
Total 8 (delta 2), reused 0 (delta 0), pack-reused 0
remote: Resolving deltas: 100% (2/2), completed with 1 local object.
To https://github.com/cuimingda/cuimingda.github.io.git
 ! [remote rejected] source -> source (refusing to allow an OAuth App to create or update workflow `.github/workflows/pages.yml` without `workflow` scope)
error: failed to push some refs to 'https://github.com/cuimingda/cuimingda.github.io.git'
```

查了一下，貌似git默认会从系统中获取github的token，而这个token是没有oauth权限的，一种解决方法是在GitHub上生成一个新的token，并更新到系统中。

但是更好的办法，是在需要获取token的时候，通过浏览器直接获取当前登录用户的token。

为了实现这个效果，需要安装一个组件，安装过程会需要输入管理员密码：

```
brew tap microsoft/git
brew install --cask git-credential-manager-core
```

安装这个组件以后，再次执行``git push``，这个时候就会让你选择到底是跳转到浏览器认证，还是输入用户名密码认证，不管哪种方式，都可以获取到包含正确作用域的token，之后就一切正常了。

#### References
* https://hexo.io/docs/github-pages
* https://jessehouwing.net/cannot-push-to-github-without-workflow-scope/
Read nested files too in NodeJs
Tags: node, javascript
Published: 2021-08-08 02:24:04

```js
import fs from "fs";

// preset -> base path + new path
function readFiles(preset, paths, files) {
    paths.forEach(path => {
        if (fs.lstatSync(preset + path).isFile()) {
            files.push(preset + path);
        } else {
            const dirs = fs.readdirSync(preset + path);
            readFiles(preset + path + "/", dirs, files);
        }
    });
}

// base -> base path
function readAllFiles(base) {
    const files = [];
    const dirs = fs.readdirSync(base);
    readFiles(base, dirs, files);
    return files;
}

// read files
const files = readAllFiles("./");

// print files
files.forEach(file=>{
    const content = fs.readFileSync(file,{encoding:"utf-8"});
    console.log({
        [file]:content
    })
})
```
Most popular icon for Mobile and web 2021
Tags: webdev, beginners, angular, react
Published: 2021-08-08 02:04:00

The world's most popular and easiest to use icon set. More icons. More styles. More Options.

#Icons
- https://github.com/showcases/icon-fonts
- https://creativemarket.com/PictoFoundry/10494-850-Vector-Stroke-Icons
- http://stackicons.com
- https://useiconic.com
- http://line25.com/articles/roundup-best-free-icon-fonts-web-design
- http://colebemis.com/feather
- http://mariodelvalle.github.io/CaptainIconWeb
- http://thenounproject.com
- http://graphicburger.com/tag/icon/

#Free Material Icons
- https://icons8.com/icon/new-icons/androidL
- https://www.iconshock.com/material-design-icons/

#Market
- https://www.uplabs.com/posts/c/all/market/icons
- http://www.streamlineicons.com
- http://www.streamlineicons.com/ux/
- http://www.webalys.com/nova/

#Style
- http://codepen.io/jasonspeaking/pen/xHfhJ

#SVG
- http://css-tricks.com/icon-fonts-vs-svg
- https://github.com/shakyshane/gulp-svg-sprites
- https://github.com/ben-eb/gulp-svgmin
Tools
- http://icomoon.io
- https://aminkodaganur.github.io/iconplus/
React- how to begin
Tags: react, javascript, ubuntu
Published: 2021-08-08 01:29:24

Hello everyone, welcome back to my blog! Or, if you haven't been here before, welcome! This blog is all about react. I'll be showing you the basics of how to begin an application through react. So hang on tight, it's gonna be a bumpy ride. Just kidding, the start up is actually pretty simple to understand!

First off, we need to create the react app in the first place. This is done by going to a handy dandy place called the terminal. Mine is called "Ubuntu" but there are many to choose from. If you are working with ubuntu you are going to navigate to where you want your project to be located. For example, I want mine under "sheridan-codes" so I am going to type "cd sheridan-codes" it should look something like this :
![Terminal Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2osnx5zacht5y78cn2k8.png)

Once we are in the location we want, we can create our actual project. How exciting! Once in the location, type in "npx create-react-app (what my app is named)" this basically means create a react app that is called something. Let's say for example we want it to be called "practice-app". We would then write npx create-react-app practice-app. Easy enough right? See you're halfway there! This step will look something like this: 
![Terminal Example Two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8zgrw939ciuto6hs9j0.png)

Now just a heads up, this step will take a minute to work it's magic, don't be alarmed if it takes a minute or two to say it's done. Once it's completed the installation of the files you can run the usual "code ." to open your project.

Congratulations, you have officially created a project in react! Now you're ready to begin creating components and designing an awesome application. To start kicking butt and taking names. To show Tom, who thinks he is hot stuff and likes to show off, who is boss!

One final disclaimer I feel I need to mention before I leave you. If this is your first project do not, I repeat, do not change or alter the HTML file! Trust me, I have made that mistake before and I had to begin the whole project over again, which was not fun. This is the file you should stay away from:
![HTML File](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oijl9j33hxds2cmwjmos.png)
 
I hope this information was helpful to you, thank you so much for reading and allowing me to lead you on this journey. Good luck coders, you got this!
.NET 6 + LINQ: conhecendo as principais novidades
Tags: dotnet, csharp, webdev, aspnet
Published: 2021-08-08 00:38:05

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

Neste post agrupo conteúdos que vendo produzindo e que cobrem as principais novidades relacionadas ao uso de **LINQ no .NET 6** (o qual no momento da publicação deste artigo se encontra no **Preview 6**). Pretendo dentro do possível manter este material atualizado, acrescentando sempre que necessário outras novidades que abordarei.

Em uma **live recente** do [**Canal .NET**](https://www.youtube.com/canaldotnet/) demonstrei em exemplos práticos diversas das novidades envolvendo **LINQ** (disponíveis a partir de [**1:26:46**](https://www.youtube.com/watch?v=_Ia-XvgCClQ&t=5206s) no **vídeo** a seguir):

{% youtube _Ia-XvgCClQ %}

Também descrevi diversas novidades na prática nos seguintes artigos:

[**Novidades do .NET 6: melhorias em LINQ - Index e Ranges**](https://renatogroffe.medium.com/novidades-do-net-6-melhorias-em-linq-index-e-ranges-7c8880163ca2)

[**Novidades do .NET 6: melhorias em LINQ - Chunk e Zip**](https://renatogroffe.medium.com/novidades-do-net-6-melhorias-em-linq-chunk-e-zip-42bf3b2e8524)

[**Novidades do .NET 6: melhorias em LINQ - ExceptBy e DistinctBy**](https://renatogroffe.medium.com/novidades-do-net-6-melhorias-em-linq-exceptby-e-distinctby-37de3d8bb348)

[**Novidades do .NET 6: melhorias em LINQ - FirstOrDefault, LastOrDefault e SingleOrDefault**](https://renatogroffe.medium.com/novidades-do-net-6-melhorias-em-linq-firstordefault-lastordefault-e-singleordefault-93b3bec50b40)

[**Novidades do .NET 6: melhorias em LINQ - UnionBy e IntersectBy**](https://renatogroffe.medium.com/novidades-do-net-6-melhorias-em-linq-unionby-e-intersectby-9cb4fe5b761a)

[**Novidades do .NET 6: melhorias em LINQ - MaxBy e MinBy**](https://renatogroffe.medium.com/novidades-do-net-6-melhorias-em-linq-maxby-e-minby-c9d5dd9adbc3)
Universal (Vue) Application Portal
Tags: vue
Published: 2021-08-08 00:20:38


**Combine select parts of web applications into a single, seamless system - quickly and easily.**

Introducing the CloudHaven Universal Application Portal which, via a "Dynamic Vue Rendering Engine" can host Vue components from any organization, each with their own back-end, making possible cross-organization composite applications that appear like a single seamless application. This platform has a common user base and handles the authentication and user management for CloudHaven-hosted applications.

## Why the Universal Application Portal?
Problems working with separate web applications from different organizations:
1. The systems don’t work well together
2. There are too many logins or portals to maintain or use
3. You’re repeatedly registering with the same information
4. Your data is scattered everywhere and thus both greatly exposed and difficult to keep updated
5. There are two many separate and different ways to communicate or collaborate
6. Application development is needlessly difficult due to re-inventing anything user-related 

##Solution: Universal Application Portal
CloudHaven's unique architecture naturally solves such problems while making it possible to create **"Composite Applications"** composed of UI components and associated backend logic from multiple organizations, all appearing like a single seamless application.

Applications and components can be loaded dynamically on the Universal Application Portal (UAP), each registering a URL to access a corresponding remote "backend" for application logic and data storage.

The enabling technology is a **Dynamic Vue Rendering Engine** which takes a json text blob and dynamically renders it into a Vue component.

** The UAP also simplifies and accelerates application development, makes multiple applications easier for people to use, and improves control and management of personal data - with the following features:**

* Common user management and authentication
(single registration and login for all applications)

* User-oriented tools tightly integrated with applications
(messaging, workflow & calendar with embedded applications)

* Centralized control and management of personal data
(easing HIPAA and GDPR compliance)

Now new applications can rapidly build MVPs without having to deal with:

1. Authentication
2. User Management
3. Vue front-end toolchain (node, webpack, babel, etc.)

**Another way to look at the Universal Application Portal (for software engineers):**

**The Universal Application Portal takes the “User Entity” (registration, authentication, user-related data and even low-level UI presentation) implemented redundantly in thousands of applications, extracts that and consolidates it into a single entity on a platform that any application can plug into and leverage.**

More info: [CloudHaven.net](https://www.cloudhaven.net)
Live System: [Universal Application Portal](https://system.cloudhaven.net)
[YouTube Intro/Quick Start Videos](https://www.youtube.com/channel/UC6j-ZAhp7DpcodtAatfu7zg)
The psychological benefits of Continuous Deployment
Tags: continuousdeployment, cicd
Published: 2021-08-12 09:44:12

---
title: The psychological benefits of Continuous Deployment
published: true
date: 2021-08-08 00:00:00 UTC
tags: continuousdeployment,cicd
canonical_url: https://jhall.io/archive/2021/08/08/the-psychological-benefits-of-continuous-deployment/
---

We hear a lot about the potential beneifts of Continuous Deployment, which usually focus on faster feedback cycles and shorter delivery timeframes.

While these can be great benefits, there’s another benefit that I think gets far too little attention, and that is the psychological change that developers feel when they know that their code will be live within minutes of hitting that **Merge** button.

Speaking for myself (but confirmed independently by many other devs I’ve spoken to), when I know there’s a delay between hitting **Merge** , and my changes appearing live in front of customers, I tend to put less weight into the decision of when or if to hit **Merge**.

To a degree this can make intuitive sense if there are additional manual checks that happen (such as a manual QA stage) after hitting merge. But even when there is no additional checking, the psychological weight feels lower when there’s a delay.

This is one of the biggest advantages of implementing CD, even when using manual QA or other manual gatekeeping steps, as I advocate in my [Lean CD](https://jhall.io/lean-cd-bootcamp/) approach. But making **Merge** synonymous with **Go live to the customer** , we can put the onus on the developer for quality. Even with no other changes, this will give each developer a bit stronger feeling of responsibility and ownership, and I have seen it result in an observable improvement in the quality of the end product.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to map an application port number to the docker container port number?
Tags: resource
Published: 2021-08-08 00:00:00

---
  title: How to map an application port number to the docker container port number?
  published: true
  tags: Resource
  date: Sun Aug 08 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/map-application-or-host-port-number-to-docker-container-port-number
  cover_image: https://melvingeorge.me/_next/static/images/main-75481ae969ad5787242adc1d446b2f2b.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/map-application-or-host-port-number-to-docker-container-port-number)
  
To map the application or the host port number to the docker container port number, you can use the `docker run` command followed by the `-p` flag (port number flag) and then the docker port number followed by a `:` (colon) and then the application port number and then the name of the docker image to use.

### TL;DR

```bash
# Map application or host port number
# to docker container port number
docker run -p <DOCKER_PORT_NUMBER>:<APPLICATION_PORT_NUMBER> docker/getting-started


# Example:
# --------

# docker run -p 3000:80 docker/getting-started
```

For example, let's say we want to run a docker container on port `3000` in which the original application port number is running on port number `80`.

To do that we can use the `docker run` command like this,

```bash
# Map application or host port number
# to docker container port number
docker run -p 3000:80 docker/getting-started
```

- After running the above command the docker container which is using the `docker/getting-started` image can be accessible at `localhost:3000` even though the original application port number is `80`.

And like that, we have successfully mapped the docker container port number to the application or the host port number 🎉.

If you want to try out the docker commands online, see the [Play with docker lab website](https://labs.play-with-docker.com/) to test out the commands.

That's all 😃!

### Feel free to share if you found this useful 😃.

---
Super Short Introduction to Rem & Em
Tags: css, beginners
Published: 2021-08-07 23:09:23

## Rem
**Root element's font size**. In other words, it is the font size of the html element. 
If no font size is specified on the html element, it is determined by the browser's font size setting which has a default of 16px.
## Em
**Current element's font size**. For example, let's say you have a button with a font size of 20px. If you define the padding to be 2em, the size of the padding will be 40px.
Is Tech Interview Pro Worth It?
Tags: seo
Published: 2021-08-07 22:44:36

A good number of us know Techlead, [Patrick Shyu](https://guruscoach.com/techlead-patrick-shyu/), the popular Ex-Google and Ex-Facebook software engineer that runs a show on youtube.

Techlead's course, Tech Interview Pro, is rated as one of the top tech interview courses to take when attending interviews to secure a better job.

But is the course worth it? Is Tech Interview Pro worth it? Although I've done a [review on Tech Interview Pro](https://guruscoach.com/tech-interview-pro-review/), but I will summarize my thoughts on Tech Interview Pro here.

"## Do I Recommend Tech Interview Pro?

Yes, I do.But maybe not for everyone as the price is quite expensive and might not be within the reach of some to get

Besides, I don't suggest spending that much on a course when you're tight on budget. However, in terms of course content and Patrick's experience in the industry, it is worth the price.

Now, let's get into what is offered in the course and the detailed reasons I recommend it.

1. Lifetime Access
The fact that the steep price gives you access to the course and group for lifetime, makes a lot of sense.

The longer you're participating in the group and its members, the cheaper the course will appear.

A lifetime access makes it affordable compared to other courses or programs that limit their students to a year access.

2. Invite-Only Facebook
The influence of others on us should not be underrated. If just for the group, the price is worth it.

A Facebook group of likeminds mean a lot as you can achieve nearly everything by building the right connections. With the right connections, you can meet your future co-founder, team members, and also rob minds with better programmers.

3. Bi-Weekly Personal Sessions
The Techlead, Patrick Shy, offers Bi-weekly live sessions with his students to help attend to questions his students might have.

This is an opportunity to talk about personal professional issues you're worried about. You can ask questions on areas you don't underrstand.