teleren/devto huggingface dataset:
CLI Badges: Generate Badges for your CLI
Tags: typescript, deno, showdev, opensource
Published: 2020-08-29 14:18:13

# CLI Badges

Generate Badges for your CLI.

## Features
- Make Beautiful Badges for CLI 🤩
- Works across all terminals 🦄
- Link support 🔗
- Variety of colors to choose from 🎨
- Written in TS with Deno 🦕

## Usage

```ts
import { badge } from "https://deno.land/x/cli_badges@v0.1.0/mod.ts";

console.log(badge("failed", "2", { msgBg: "red" }));

console.log(badge("success", "2", { msgBg: "green" }));

console.log(badge("skipped", "2", { msgBg: "yellow" }));
```

## Output

![sample_output](https://raw.githubusercontent.com/Delta456/cli_badges/master/img/sample_output.png)

## `badge` function

`badge` function accepts the following arguments:

- `label`: label of the badge
- `msg`: message of the badge
- `opts`: accepts an interface of `BadgeOptions` 

## `BadgeOptions` Interface

```ts
interface BadgeOptions {
  msgBg: string; // default is blue
  labelBg: string; // default is brightBlack
  msgColor: string; // default is white
  labelColor: string; // default is white
  msgStyle?: string; // default is null
  labelStyle?: string; // default is null
  msgWidth?: number; // default is msg length + 2
  labelWidth?: number; // default is label length + 2
  is_8bit?: boolean; // default is false as it uses 24 bits
  hyper_link?: string; // hyperlink for the badge
}
```

## Available Options

### Foreground Colors

- `black`
- `red`
- `blue`
- `green`
- `yellow`
- `magenta`
- `cyan`
- `white`
- `brightBlack`
- `brightRed`
- `brightBlue`
- `brightGreen`
- `brightYellow`
- `brightMagenta`
- `brightCyan`
- `brightWhite`

### Background Colors

- `black`
- `red`
- `blue`
- `green`
- `yellow`
- `magenta`
- `cyan`
- `white`
- `brightBlack`
- `brightRed`
- `brightBlue`
- `brightGreen`
- `brightYellow`
- `brightMagenta`
- `brightCyan`
- `brightWhite`

### Styles

- `bold`
- `italic`
- `inverse`
- `dim`
- `strike`
- `underline`

### Custom Colors

Custom Colors are available and can be used for `msgBg`, `labelmsg`, `msgColor` and `labelColor` only. There are options to make `8 bit` and `24 bit` colors respectively. Set `is_8bit` to true if you want custom 8 bit RGB colors else it will be set to 24 bit RBG colors by default.

**NOTE**: `24 bit` Colors **must** be in a range of `0x000000` and `0xffffff` and `8 bit` Colors **must** in a range of `0x0` and `0xFF`.

### Hyperlink Support

Hyperlink is only supported on [some](https://gist.github.com/egmontkob/eb114294efbcd5adb1944c9f3cb5feda) terminals.

## Acknowledgments

I thank the author of [nombrekeff/cli-badges](https://github.com/nombrekeff/cli-badges) for his original implementation in JS wth Node and also helped me with some Deno issues and giving me guidance on this project as this is my first project with TS.

## GitHub

{%github https://github.com/Delta456/cli_badges %}
Laravel Jetstream: First Look
Tags: laravel, php
Published: 2020-08-29 14:06:26

## What is Laravel Jetstream?
It is a brand new **Scaffolding** package for your Laravel 8 projects. It goes beyond *Authentication Scaffolding*. And, its available as free, open source package by the Laravel team.

For too long we had Bootstrap and jQuery based scaffolding and this change was much needed to be honest.

## What's changed from laravel/ui package?
* [Tailwind](https://tailwindcss.com) for the CSS.
* Choose between [Livewire](https://laravel-livewire.com) or [Inertia.js](https://inertiajs.com) to handle your front-end exactly like we used to choose **preset** in **laravel/ui**.

## How would we choose?
```shell
php artisan jetstream:install livewire
```
or
```shell
php artisan jetstream:install inertia
```
> **Inertia.js** comes with **Vue.js** as default adapter.

# Features 🚀
### 1- User Profile
Jetstream introduces User Profile feature where user can update their information which include:
* Change their profile picture
* Update their name/email/password
* Two Factor Authentication (Recovery codes and QR code) 👌
* User can view their **other Browser Sessions** and also **log out** from them
* User can **Delete** their entire account
* All of this functionality and its **code** is available to developer so that they have full control.

### 2- API Tokens
If your Laravel app exposes an API and you need to give User the ability to generate their own tokens, you can do so by adding a single line of code in your `jetstream.php` config file.
```php
...
'features' => [
         Feature::api(),
],
...
```
And a new page *user/api-tokens* will be added to application. User will also be able to manage **token permissions** on this page. These permissions are defined in `JetstreamServiceProvider`. 

 > Laravel Jetstream uses Laravel Sanctum under-the-hood to generate API tokens.

### 3- Teams
Almost in every SAAS application now-a-days we need **teams** feature. Guess what? It comes out of the box with Laravel Jetstream 🥳
```php
php artisan jetstream:install livewire --teams
```
It will add **teams** entry in `jetstream.php` config file:
```php
...
'features' => [
         Feature::teams(),
],
...
```
Now you will be able to:
* Manage Team
* Create Team
* Switch Team
* Add Members to the Team ( even manage their **Roles** and **Permissions** 🔥 )

Amazing stuff, right?

## When it will be available?
It will be available along with Laravel 8 which is coming out on 8th, September 2020. Or maybe a week/two weeks later.

## Conclusion
Laravel team has basically offered the non-billing part of [Laravel Spark](https://spark.laravel.com) as **Laravel Jetstream**.
> I think it's gonna give you a sick starting point for building modern Laravel applications in 2020 - Taylor Otwell
Side project which became a mind-blowing automated IDE
Tags: javascript, html, webdev, css
Published: 2020-08-29 14:05:25

Hello!

I would love to showcase my project that I have spent the last 6 months of work on. I hope my hard work will not only help beginners to start coding fully reactive web apps, but also more advanced developers/freelancers deliver projects faster to clients.


I would like to point out that using my project is FREE and it does not need any registration or payments after the trial period.
The whole idea is pretty complex and i could talk about it for hours but long story short - it is IDE packed with automation tools and built in Framework connected with Widgets repository (over 60 widgets at the moment).


My aim is 'simple', lower  the tech barrier for beginners and significantly speed up the work of more advanced web developers.


So how does it work?


The IDE is connected with the Widget repository that you can install within a couple of clicks inside your project. It builds prototypes of your web app in a matter of minutes. The Code editor is splitting HTML on smaller parts (slots) and generating isolated CSS files allowing you to edit specific parts of your app without interfering with the rest of it. It's not only helping you find what you need faster in larger projects, but it also makes your code clean and easy to edit. Another plus of this solution is that it eliminates the problem of naming classes. As long as you follow the guidelines of The Framework you can name all 'headers' in the same way, and you will still be able to edit just the one that you would like to. The IDE also generates all the necessary glue code while you create new pages or JavaScript files leaving you with a flat file structure. Another feature is the Reusable Slot', no more repetition. You can implement nav bars, footers, cookie consent notices etc. with just  one line of code.


These are just a couple of the features but I don't want to stop you any longer. Just go and test it yourself.
Here is the project website:

https://www.glue.codes

Here is a repository with a framework that is built in the IDE. Feel free to leave any comments and suggestions at:

https://github.com/gluecodes/gluecodes-framework
Boost Page Speed By Using Only A CSS Property!
Tags: css, webdev, html, tutorial
Published: 2020-08-29 13:50:21

Google just released Chrome 85, the major update for this browser in 2020. Just like those previous major updates, Chrome got a bunch of fixes and new features. Which includes `content-visibility: auto` also.

When we develop a site or page for a browser, it requires several steps to render or to show the page to the users. Browser goes through multiple processes before even it paint its first pixel of our site. After that it does these process for the whole page including the contents or elements that is not visible or not in the viewport yet.

![browser-process-for-rendering-elements](https://dev-to-uploads.s3.amazonaws.com/i/p71gchnmcl4bq1xly10h.jpg)

After publishing of Chrome 85, developers now can easily make this process shorter by using `content-visibility: auto` to an element. This CSS property tells the browser that specific element can be skipped until it has been scrolled to the viewport.

```css
#element {
    content-visibility: auto;
}
```


![effects after applying content-visbility to auto](https://dev-to-uploads.s3.amazonaws.com/i/ubrsilhq5fjyrw5b3985.jpg)


I have already applied it to one my project and the performance boosted impressively than earlier. Previously the Lighthouse speed was 66. But after applying `content-visibility: auto` to the elements that will be scrolled later, made the performance speed to 83. Which is amazing!

So start using it now and discuss your experience in the comments section.
Tiktok : the algorithm
Tags: news, machinelearning, leadership, showdev
Published: 2020-08-29 13:49:07

This is excerpts from vox news / watch video at end:
On August 6, President Trump issued an executive order prohibiting transactions with the video-sharing app TikTok. His order said that because TikTok is owned by the Beijing-based company ByteDance, the app could pose national security and privacy risks to users in the US.

But the Trump administration’s targeting of TikTok marks a departure from America’s traditional position on internet governance and online free speech. And it also comes at a time when the concept of a global internet itself is under threat. 

Today a growing number of countries are pursuing various forms of internet sovereignty — from Russia building a walled-off “intranet,” to India regularly shutting down its internet in areas of social unrest, to some European nations introducing a “right to be forgotten” from search engines. 

All these trends point in the direction of a “splinternet,” where your experience of the internet increasingly depends on where you live, and the whims of the ruling parties there. As we explain in this video, that’s a tough environment for an app like TikTok, which became globally successful almost immediately, and which connects people from around the world in hyper-personalized but often international subcultures. 

{% youtube BAsXGN2OX0c %}


Please comment what you think 🤔
Use FCM with NGSW
Tags: ngsw, fcm, angular, serviceworker
Published: 2020-08-29 13:27:54

Problem:
AngularFireMessaging is not compatible with the Angular Service Worker
https://github.com/angular/angular/issues/34352

Solution:
combining both angularSW and firebaseSW in combinedSW 
file 

Follow up URL:
https://meumobi.github.io/ionic/firebase/2020/01/20/firebase-web-push-ionic.html
Understanding Array.reduce(), JavaScript
Tags: beginners, javascript, typescript
Published: 2020-08-29 13:25:48

_Thanks to Akash Rajpurohit for the [header.](https://akashwho.codes/blog/learn-reduce-method-in-javascript-with-code-examples/)_

Of the number of Array helper functions, the most confusing and rarely used is the `Array.reduce()` function. 

Unlike the other Array helper methods such as `Array.map()` and `Array.forEach()` which takes a single function and processes the content of each element in an array and returns it, `Array.reduce()` does not. 

`Array.reduce()` works like this, it **reduces** the array and returns a single result. It takes an initial value and a callback function and calls the function on the initial with the first element in the array and place the result somewhere and takes another element in the array and runs the function on it with the result and place the new result away. It does it for each individual element and return the final answer when there are no elements left.

## `Array.reduce(callback,initialValue)`

Taking the code example below
```javascript
// Assuming we have an array of numbers
const numbers = [1,2,3,4];

// Then a function to add numbers with two parameters
// which returns the sum of two numbers
const addNumbers = (firstNum,secondNum) => {
  return firstNum + secondNum;
};

// We must set an initial value for the reduce() method.
const initialValue = 0

// Then we use the reduce() helper method on the numbers array
const arrayTotal = numbers.reduce(addNumbers,initialValue)
console.log(arrayTotal) // 10
```
### How does it work?

Array helper methods have one thing in common, they perform some action to each element in the array. `Array.reduce` is no difference. 

The `addNumbers` function we added as a callback takes two arguments. The first number and a second number and returns the sum. Now, when the reduce method starts, the first element of the array has is passed to the function, but the function needs two arguments to add. That's where the `initialValue` comes in. The `initialValue`, which is 0, is passed as the first argument and the first element of the array is passed as the second argument. The function runs and the returned results is now set as the new `initialValue` and passed as the first argument and the next array element is passed as the second argument. The function runs until there are no elements left and the final result is returned.

### Another Analogy
Take the header of this post. The chicken 🍗, popcorn 🍿 and burger 🍔 are taken into the body by calling the `eat` function and they are reduced into a single 💩 and returned by the body.
Let's create a GitHub Action (super simple tutorial)
Tags: tutorial, github
Published: 2020-08-29 13:22:51

Hello everyone!

In this video, I show you how to make a super simple GitHub action. 

Useful links for this video:
https://nodejs.org/en/
https://github.com/kubowania/my-javas...

If you liked this video please do give it a Like and a Subscribe so I know to create more!

My Socials:
https://twitter.com/ania_kubow
https://youtube.com/aniakubow
https://instagram.com/aniakubow

{% youtube COPS4VMfaUc %}
HOW TO SOLVE THE NO VALID EXPORTS ERROR IN NODEJS.
Tags: node, express, nestjs, typescript
Published: 2020-08-29 13:17:11

Recently while running the `sequelize-cli init` command, I ran into an error. The error message was something like `export not found...`. I began to debug and even started placing console.log statements in the .sequelizerc file(lol). I had to open up several other projects I had done with sequelize to see if I was missing something, then checked the sequelize-cli docs if something had changed and everywhere but I still couldn't solve the problem. Funny enough the app was running with(npm run start:dev) so it got me more confused.

It happened again within the same week when I was trying to set up a nestjs project and this time around the same error was pointing to a file in the node_modules folder. The curiosity in me drove me to comment out some lines in the file it was pointing to but the error stayed the same and previous searches yielded nothing helpful till I stumbled upon something that talked about node versions. The problem according to [this](https://github.com/strongloop/loopback-next/issues/5381) issue is that node odd versions seem to be broken so incase you stumble upon such a weird issue, here is how I solved it.


Solution
1. Download nvm(node version manager). It helps to manage node versions locally and you can switch between various node LTS(Long Term Support) versions using nvm.

2. Then install a node version(`nvm install <version number>`) with an even number(v13.14/v14). Most likely, you would currently have an odd number node version(v9.7/v11.15/v13.9) if you check with node -v.

3. Switch to the new version you just installed with `nvm use <version number>` e.g nvm use 10. 

4. Close the project on VSCode and reopen it again then run the command you were trying to run initially and it should work without errors now. If you check the node version now, you will see it's the newly installed version you are currently running on. If you still have any issues, you could delete the node_modules and package-lock.json then run npm install again.

This [article](https://itnext.io/nvm-the-easiest-way-to-switch-node-js-environments-on-your-machine-in-a-flash-17babb7d5f1b) talks about nvm in more detail.

Thanks for coming to my Ted Talk.
Filtering Null Values out of TypeScript Arrays
Tags: typescript, node, javascript
Published: 2020-08-29 13:02:12

## Filtering Null Values out of TypeScript Arrays
Something that stumped me the first time I encountered it in TypeScript was dealing with nullable types in arrays. When dealing with arrays, we often do not want to keep the null values in, or we want to perform a map operation and get yelled at by the compiler about missing properties. I learned a little snippet to deal with this, which I will explain step by step.

First, let's establish the scenario.

```ts
interface DoesntMatter{
  meaningless: (string|null)[]
}
```

Here we have an interface DoesntMatter with a property 'meaningless', which is an array containing either strings or null values. 

Assume that we have an instance of DoesntMatter in our code, and we need to concatenate the strings of the array into one mega-string. Unfortunately, we can't do that without getting rid of all of the nulls first.

```ts
instanceOfDoesntMatter.meaningless.filter((val: val is string) => !!val)
```

The above snippet uses a really cool feature, called a [type guard.](https://www.typescriptlang.org/docs/handbook/advanced-types.html) The type guard will check to make sure val is a string, and if it is, it'll run the function. If it isn't, it won't run the function. Since we only need to filter out nulls, we know that the function will only run if the value is a string already, so we can return true if val, which is what the `!!` is doing. 

The result of this filter is an array which contains nothing but string values. 

Type guards are a very powerful feature, and this is only one small use case of the nearly endless possibilities with them.
Git Repo Sync: Simple Bash script to sync master and develop branches for a classic Git Flow Branching Model
Tags: git, bash
Published: 2020-08-29 13:01:51

I wanna share an useful bash script (at least according to me ;)) that I wrote to make easier the synchronization of one or more repositories in a **git flow branching model** that many of you know and use daily to version your code base (if you don't know what's a **git flow branching model** please refer [this link](https://nvie.com/posts/a-successful-git-branching-model/)).

This script has the goal to synchronize the branches **develop** and **master** from *local* to *remote* repository.

To know how to run the script type : 
````
animus@host:~$./repo.sync --help
```
and  you get the usage of the script and all of possible options.
  
```
usage: repo.sync [OPTION]... DIRECTORY... 
Sync a Git repository for a DIRECTORY (one or more) representing a git repository where is activated a Git Flow branching model.

Options:
--noPushOnProdBranch        Skip git push on production branch
--noPushTagsOnProdBranch    Skip git push tags on production branch
--noPullOnProdBranch        Skip git pull of production branch from remote.
--noPushOnDev       		Skip git push on develop branch
--noPushTagsOnDev   		Skip git push tags on develop branch
--noPushTagsOnDev       	Skip git pull of develop branch from remote.
--mergeProdInDev  			Make a merge from production branch into develop branch (Warning: this breaks git-flow branching model).
--help                  	Display this help and exit
```

You can find the script on [my gist on github](https://gist.github.com/animusna/39178047985d431c8bc86de7be894f8c).  

Suggestions, corrections and improvements are welcome!

See you soon ;)
CSS position fixed vs sticky
Tags: css, html
Published: 2020-08-29 12:46:56

CSS `position: fixed` helped me a lot when I want to make an element inside a web to stay when user scrolling the page. But in some cases, maybe I want that element still scroll along like others but can stay in place when I want it to stay. That's `position: sticky` will helpful.

## ***What's the difference?***
The `position: fixed` mean *fixed to the viewport*. We tell it where to position itself (top, bottom, right, or left) and it will stay there when user scrolling.

Meanwhile, when using `position: sticky` it won't affect until we define offset, like `top: 10px`. So the element will scroll like others until it reaches the offset and then stay on its position. And it stay within its parent, once the parent scroll off the page it leaves with it.

To see it in action, you can check on my [codepen](https://codepen.io/suryawiguna/pen/wvGeqxy)

## ***Which should I use?***
It depends, when you want that element simply doesnt move in your website then use `fixed`. But be careful with `position: fixed`, it can potentially cover other element.

When you want that element scrolling into view and then stop at certain point, use `sticky`. Keep in mind, *when its parent scrolls off page, it gone with its parent*.
Any free and safe proxy servers?
Published: 2020-08-29 12:32:39

---
title: Any free and safe proxy servers?
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
---
I've been learning automation and scraping with python, but I'm constantly stopped by some rate limits websites have put up. Are there any good free proxies I can use?
Today I learned how to merge using the CLI. 🧙‍♂️
Tags: webdev, todayilearned, git, github
Published: 2020-08-29 12:01:25

I've been a member on GitHub for 8 years now, and, as far as I can remember, have always merged branches via the web interface - believing it to be too hard and too confusing to even attempt merging via the command-line.

---

<div align="center">
<img src="https://media.giphy.com/media/BmmfETghGOPrW/giphy.gif" alt="Me looking at the git documentation.">
<em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Me looking at the git documentation.</em>
</div>

---

So I set out to learn it, and boy where my fears overexaggerated, you just need to run `git merge <branch>` from the branch you want to merge into. 🤯

And if you don't want to deal with the clean-up of deleting branches on remote and local, use the [github-cli] and it's one command `gh pr merge` - it accepts more information, such as the pr number, URL or branch to merge, you can view the [documentation on merge].

## TL;DR

Here's the repo I used to learn how to merge using the command-line containing a detailed README of the steps I took, along with my explanation on how I perceive it to work.

{% github thinkverse/merge-via-cli no-readme %}


[github-cli]: https://github.com/thinkverse/merge-via-cli
[documentation on merge]: https://cli.github.com/manual/gh_pr_merge