teleren/devto huggingface dataset:
Dev Tools To Get started On MacOs
Tags: homebrew, macos, bash
Published: 2021-09-20 22:10:51

---
title: Dev Tools To Get started On MacOs
published: true
description: 
tags: homebrew, macOS, bash
---

### Must have Homebrew tools for MacOS

I am one of those folks that always rebooting my machine and always forget my must have tools. So this is my list to get my dev tools quick using `homebrew` to avoid downloading  every app from a website.  [Homebrew](https://brew.sh)  makes it easy to get project installed and running in a matter of seconds.

Install Homebrew using the following script:

*Paste that in a macOS Terminal or Linux shell prompt.
*

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

### What is Homebrew?

It decleraes itself `The Missing Package Manager for macOS (or Linux)` and I do agree as it allows me to bulk install programs and all it takes is copy and paaste links and run them once to install and also update in bulk if need to.

Here is a list of commands:


```
brew install arp-scan
brew install asciidoc
brew install brew-cask-completion
brew install cmake
brew install composer
brew install docbook-xsl
brew install ghostscript
brew install git
brew install highlight
brew install imagemagick
brew install lastpass-cli --with-pinentry --with-doc
brew install nmap
brew install node
brew install openssl
brew install php72
brew install php-cs-fixer
brew install phplint
brew install pkg-config
brew install python3
brew postinstall python3
brew install thefuck
brew install vassh
brew install vim
brew install wget
brew install wrk
brew install zsh-syntax-highlighting

``` 

### Homebrew Cask

Some programs don’t exist in Homebrew, usually the apps that you use with a GUI, as opposed to command line tools. For these there is
Homebrew Cask, an extension of Homebrew for the software that doesn’t exist in core.

```
brew cask install alfred
brew cask install arduino
brew cask install boostnote
brew cask install calibre
brew cask install cleanmymac
brew cask install dropbox
brew cask install etcher
brew cask install evernote
brew cask install firefox
brew cask install google-chrome
brew cask install imageoptim
brew cask install iterm2
brew cask install nordvpn
brew cask install owasp-zap
brew cask install qlcolorcode
brew cask install qlmarkdown
brew cask install qlprettypatch
brew cask install qlstephen
brew cask install quicklook-csv
brew cask install quicklook-json
brew cask install sequel-pro
brew cask install signal
brew cask install skype
brew cask install slack
brew cask install spectacle
brew cask install sublime-text
brew cask install suspicious-package
brew cask install telegram
brew cask install transmit
brew cask install vagrant
brew cask install virtualbox
brew cask install vlc
brew cask install webpquicklook
brew cask install caskroom/fonts/font-source-code-pro

```

Hope  this helps folks 🍺
Firestore for Unity and C++
Tags: webdev, javascript, beginners, podcast
Published: 2021-09-21 00:19:11


Original: https://codingcat.dev/podcast/1-14-firestore-for-unity-c-plus-plus

{% youtube https://www.youtube.com/watch?v=0Ju6klQ9k58 %}

## Questions

1. What is Unity?
2. What games or other apps are written in C++?
3. What is Cloud Firestore?
4. Wasn’t Cloud Firestore already available for Unity and C++?
5. What kind of games can be created using Firebase?

## Links

* [https://firebase.google.com/games](https://firebase.google.com/games)
* [https://github.com/firebase/quickstart-unity](https://github.com/firebase/quickstart-unity)
* [https://github.com/google/mechahamster](https://github.com/google/mechahamster)
* [Firebase Games](https://firebase.google.com/games)
* [Firebase Realtime vs. Firstore Database](https://firebase.google.com/docs/database/rtdb-vs-firestore)
* [Open Match 1.0](https://cloud.google.com/blog/products/gaming/open-match-1-0-ready-for-deployment-in-production)
* [https://www.cocos.com/en/creator](https://www.cocos.com/en/creator)
* [https://phaser.io/](https://phaser.io/)
* [https://www.cocos.com/en/creator](https://www.cocos.com/en/creator)
* [https://phaser.io/](https://phaser.io/)
Creating a Learning Platform
Tags: webdev, javascript, beginners, podcast
Published: 2021-09-21 00:17:17


Original: https://codingcat.dev/podcast/1-13-creating-a-learning-platform

{% youtube https://www.youtube.com/watch?v=FMFJcYRXYtA %}

## Questions

1. When did you first decide to create your own Learning Platform?
  1. Was there a reason behind starting Level Up Tutorials?
2. Did you ever consider just using something like Udemy?
3. You have been through several iterations of hosting, code base… 
  1. For someone getting started right now (like us), what would you suggest we consider?
  2. You just moved off of Meteor, what caused the move?
  3. Why do you use CRA over something like Next.js?
4. How did you build your audience?
  1. Was it a specific tutorial that helped you really get started?
5. Where do you get ideas for your courses?
  1. Do you look for popular tech to create your content or just do what is exciting for you?
6. Would you say that it is more important to get a single course "perfect", or to focus on having a large variety of courses available?
7. You release your courses on a monthly basis, what happens if you had just a little bit more that you want to add to that Course?
Agility CMS
Tags: webdev, javascript, beginners, podcast
Published: 2021-09-21 00:14:51


Original: https://codingcat.dev/podcast/1-12-agility-cms

{% youtube https://www.youtube.com/watch?v=oOr-11AO9ms %}

## Questions

1. Agility is a Headless CMS correct?
2. How does this differ from WordPress?
3. Would you compare Agility CMS to Contentful, or something more like Sanity.io?
4. Is Agility CMS Open Source?
5. What is DXP vs CMS?
6. Do you host your own UI or is this taken care of by Agility?
7. Does a customer working with Agility CMS focus on content first?
8. Before something like design?
9. Before development?
10. How does Agility CMS fit into Jamstack?
11. Can you build both static and dynamic?
12. Does Agility work with Gatsby & Nextjs?
13. What about Eleventy?
14. How does Agility fit in with platforms like Vercel & Netlify
15. What about hosting in Azure or AWS?
16. Does Agility allow you to create content for apps?
17. Is the Agility Dashboard built in Vue.js?
18. Can you extend the Dashboard?
19. Is the CMS mainly written in .Net?
20. Editors often feel powerless, how does Agility CMS give this back?
21. Is this key for marketing?
22. [Why would a developer want Agility CMS vs. using the entire database](https://agilitycms.com/resources/posts/why-you-as-a-developer-should-be-using-a-cms)?
23. Any interesting workshops coming from Agility CMS?
24. Joel to talk about our workshop on Virtual events with Vercel / Next.js
React dialog box library
Tags: react, javascript, npm
Published: 2021-09-21 00:08:39

# react-js-dialog-box

> simple react.js modal box

[![NPM](https://img.shields.io/npm/v/react-js-dialog-box.svg)](https://www.npmjs.com/package/react-js-dialog-box) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Intro
<p align="center">
  <img src="https://media.giphy.com/media/9AhXVa4v9eef7avcWl/giphy.gif">
</p>

## Install

```bash
npm install --save react-js-dialog-box
```

## Usage

```jsx
import React from 'react'
import { ReactDialogBox } from 'react-js-dialog-box'
import 'react-js-dialog-box/dist/index.css'

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      isOpen: false
    }
  }

  openBox = () => {
    this.setState({
      isOpen: true
    })
  }

  closeBox = () => {
    this.setState({
      isOpen: false
    })
  }
  render() {
    return (
      <div>
        <button onClick={this.openBox}>Open ReactDialogBox </button>

        {this.state.isOpen && (
          <>
            <ReactDialogBox
              closeBox={this.closeBox}
              modalWidth='60%'
              headerBackgroundColor='red'
              headerTextColor='white'
              headerHeight='65'
              closeButtonColor='white'
              bodyBackgroundColor='white'
              bodyTextColor='black'
              bodyHeight='200px'
              headerText='Hearder '
            >
              <div>
                <h1>Dialog Content</h1>
              </div>
            </ReactDialogBox>
          </>
        )}
      </div>
    )
  }
}

export default App
```

  <img src="https://raw.githubusercontent.com/abodmicheal/react-js-dialog-box/main/dialog-library.PNG">
  
## License

MIT © [abodmicheal](https://github.com/abodmicheal/react-js-dialog-box)
Husky with commitlint and lint-staged
Tags: husky, lintstaged, eslint
Published: 2021-09-21 00:03:15

In this post, I'll show you how to improve your husky workflow, using pre-commit to trigger error checking on your code before uploading it to the repository.

Start husky with the following command:
```sh
npx husky-init
```

Verify that the husky information has been entered into your package.json:
```json
{

  "scripts": {
    ...
    "prepare": "husky install"
  },
  "devDependencies": {
    ...
    "husky": "^6.0.0"
  }
}
```

Install husky in your project:
```sh
#yarn 
yarn; npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ""'

#npm 
npm install; npx husky add .husky/commit-msg 'npx --no-install commitlint --edit ""'
```

Checking `.husky/commit-msg` file you might find the following bash script:
```sh
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx --no-install commitlint --edit ""
```

Let's add the commit-lint package to the lint confirmation messages:
```sh
#yarn 
yarn add @commitlint/config-conventional @commitlint/cli --dev

#npm 
npm install @commitlint/config-conventional @commitlint/cli --dev
```

Create the `commitlint.config.js` file in the root of your directory and insert the following contents:
```js
module.exports = { extends: ['@commitlint/config-conventional'] };
```

Now we will install lint-staged:
```sh
#yarn 
yarn add lint-staged --dev

#npm 
npm install lint-staged --save-dev
```

In package.json insert the following script for running lint-staged into our project:
```json
 {
   "scripts": {
     ...
     "pre-commit": "lint-staged",
     "prepare": "husky install"
   }
}
```

We will create the `.lintstagedrc` file to run eslint and prettier at commit time:
```js
{
  "src/**/*.+(js|json|ts|tsx)": ["eslint"],
  "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": ["eslint --fix", "prettier --write"]
}
```

Inside `.husky/pre-commit` insert the following script:
```sh
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn run pre-commit
```

Finally, run the command that created the 'prepare-commit-msg' file:
```sh
#yarn
npx husky add .husky/prepare-commit-msg 'exec < /dev/tty && node_modules/.bin/cz --hook || true'; yarn

#npm
npx husky add .husky/prepare-commit-msg 'exec < /dev/tty && node_modules/.bin/cz --hook || true'; npm install
```

That's it! Now test everything we have installed.
Do your developers write tests?
Tags: qa, automatedtests, tdd
Published: 2021-09-23 12:24:54

---
title: Do your developers write tests?
published: true
date: 2021-09-21 00:00:00 UTC
tags: qa,automatedtests,tdd
canonical_url: https://jhall.io/archive/2021/09/21/do-your-developers-write-tests/
---

**A quick reminder:** September 23 at 17:00 CET (Europe) / 8:00 AM PT (USA), I’ll be doing a free, live video Q&A session answering your DevOps career questions. Space is limited! [Sign up now](https://www.crowdcast.io/e/tiny-devops-qa-focus-on/register)!

* * *
There's a good chance you have some sort of automated testing in your software delivery lifecycle. And of course there are many \_kinds\_ of automated tests, from unit tests to API tests to end-to-end tests.

But who on your team _writes_ these tests?

I’ve worked with teams that have dedicated QA personnel writing automated tests.

I’ve worked with teams where only developers wrote tests.

I’ve also worked with teams that do a combination of the two.

Which of these three scenarios do you expect produces the best results?

Quoting again from [_Accelerate_](https://amzn.to/3klbvCq), (emphasis added):

> The following practice predict(s) IT performance:
> 
> **Developers primarily create and maintain acceptance tests**. It’s interesting to note that having automated tests primarily created and maintained either by QA or an outsourced party is not correlated with IT performance.

Note that this is _not_ saying there’s no room for dedicated QA personnel in IT. It’s only saying that when test writing is removed from code writing, there’s no observed benefit in IT performance.

Or if I can add my own interpretation: Writing tests in a silo is an anti-pattern.

* * *
_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 set more than one type for a variable in TypeScript?
Tags: typescript
Published: 2021-09-21 00:00:00

---
  title: How to set more than one type for a variable in TypeScript?
  published: true
  tags: TypeScript
  date: Tue Sep 21 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/set-more-than-one-type-variable-typescript
  cover_image: https://melvingeorge.me/_next/static/images/main-db1dc3c405d8b624ed87ede490684ec2.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/set-more-than-one-type-variable-typescript)
  
To set more than one type for a variable, we can define a union type for the variable.

Union types contain more than one type separated by the `|` symbol (vertical slash).

### TL;DR

```ts
// union type declaration
let nums: string | number;

// assign a string value
nums = "1000"; // ✅ allowed

// assign a number value
nums = 200; // ✅ also allowed

// try to assign a value which is
// neither a string nor a number type
nums = true; // ❌ not allowed. Type 'boolean' is not assignable to type 'string | number'.
```

For example, Let's say we have a variable called `nums` and want to hold values of both the `string` type and the `number` type. To do that we can use a union type of both the `string` and the `number` type.

It can be done like this,

```ts
// union type declaration
let nums: string | number;
```

Now let's try to assign the value `1000` of `string` type and also the value of `200` of number type to the `nums` variable like this,

```ts
// union type declaration
let nums: string | number;

// assing a string value
nums = "1000"; // ✅ allowed

// assign a number value
nums = 200; // ✅ also allowed
```

As you can see that the TypeScript compiler allowed us to assign both the `string` and `number` value one after the other and doesn't show an error. This is because of the union type we have declared which is made out of the `string` type and the `number` type.

Now let's also try to assign a value of `boolean` type which is not declared in the above union type like this,

```ts
// union type declaration
let nums: string | number;

// assign a string value
nums = "1000"; // ✅ allowed

// assign a number value
nums = 200; // ✅ also allowed

// try to assign a value which is
// neither a string nor a number type
nums = true; // ❌ not allowed. Type 'boolean' is not assignable to type 'string | number'.
```

As you can see that the TypeScript showed us an error saying that `Type 'boolean' is not assignable to type 'string | number'.` which is what we want to happen.

See the execution of the above code live in [codesandbox](https://codesandbox.io/s/set-more-than-one-type-to-a-variable-in-typescript-uulsm?file=/src/index.ts).

That's all 😃!

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

---
Phase 2
Published: 2021-09-20 23:32:24

Moving from Phase 1 to Phase 2 was challenging because now we are adding so much information in a short amount of time and putting it all together. It was nice to learn how everything all tied together. I had the most challenging time remembering to call everything the same name so that I could link to it in my erb folders. I am excited to move forward and start with Ruby on Rails since it will simplify a lot of what we are doing in the Phase of the learning.
CPAN Release of TooMuchCode 0.17
Tags: perl, cpan
Published: 2021-09-20 23:05:15

---
title: CPAN Release of TooMuchCode 0.17
published: true
description: 
tags: perl, cpan
---

[Perl::Critic::TooMuchCode][TooMuchCode-cpan] is a set of policy addons that generally checks for dead code or redundant code.

I feel grateful that this small project starts to draw some attention and endorsement and now it is receiving pull-requests from the Perl/CPAN community.

In version 0.17 we improved the policy ProhibitDuplicateLiteral and now it we can whitelist strings and numbers in configurations. If you somehow really need to use number 42 and "forty two" literally in the code many times, you list them in `.perlcriticrc`:

```
[TooMuchCode::ProhibitDuplicateLiteral]
whitelist = "forty two" 42
```

Thanks to [@ferki][ferki] from project [Rex][rex-home]! 

Rex is an automation framework, or remote-execution framework. In a sense, similar to Ansible. It's a simple way of telling machine what to do, with some code named Rexfile -- a task manifest. which is also perl code. Within which you'd repeat some strings literally such as:

```
service 'apache2',  ensure => 'started';
service 'mysql',    ensure => 'started';
service 'memcached, ensure => 'started';
```

... and that is OK. Because those manifests should be direct instead of indirect/abstract with the use of variables / constants to just hold the string `'started'`. Doing such is an unnecessary level of indirection since the purpose of task manifests is to tell machine what to do and we do not want to make human readers read twice just to understand what those statement means. After all, repeatition by itself isn't necessarily the problem.

Well, apparently in the context of coding Rexfile, some repetition are allowed. In general, perhaps repetition are OK in any DSL code. DSL itself already reduce some repetition by hiding the details and DSL keywords tends to be high-level constructs that are designed to be easily understandable for human readers. Repetition of DSL keywords almost never leads to be unreadable or "bad small".

I might have repeated the word "repetition" too many times.

[TooMuchCode-cpan]: https://metacpan.org/dist/Perl-Critic-TooMuchCode
[ferki]: https://github.com/ferki
[rex-home]: https://www.rexify.org/

----

Originally posted at: [gugod's blog -- CPAN Release of TooMuchCode 0.17](https://gugod.org/2021/09/cpan-release-of-toomuchcode-0.17/)
unsafe react hooks
Tags: react, javascript
Published: 2021-09-20 23:01:20

One of the biggest driving forces behind React 17 is asynchronous rendering which aims to improve both the user and developer experience.

In React v16.3 the React team introduced few new lifecycles and deprecated some of the old ones. 

Not due to security, these lifecycles will be more likely to have bugs in future versions of React, especially once async rendering is enabled.

To allow asynchronous rendering, there has to be a change in the component lifecycle and this involves deprecation of lifecycle methods which were introduced without async rendering in mind.

* componentWillMount → UNSAFE_componentWillMount
* componentWillReceiveProps → UNSAFE_componentWillReceiveProps
* componentWillUpdate → UNSAFE_componentWillUpdate

React 16.9 did not contain breaking changes, and the old names continue to work in this release. But you will now see a warning when using any of the old names. These warnings provide better alternatives to these lifecycle methods.

#### Easily Renaming UNSAFE Methods
To allow easy renaming for projects where one may not have adequate time to migrate to the recommended lifecycle methods, the React team recommended a script from [codemod](https://medium.com/@cpojer/effective-javascript-codemods-5a6686bb46fb) that automates this process.
```
cd your_project
npx react-codemod rename-unsafe-lifecycles
```

## Conclusion
Asynchronous rendering is driving into version changes. To prevent bugs in future once async rendering is enabled.

To allow asynchronous rendering involves deprecation of lifecycle methods without async rendering in mind.

* componentWillMount → UNSAFE_componentWillMount
* componentWillReceiveProps → UNSAFE_componentWillReceiveProps
* componentWillUpdate → UNSAFE_componentWillUpdate

Now warnings provide better alternatives to these lifecycle methods.


Few new lifecycles was introduced too.

React Team has introduced one new lifecycle method named `getDerivedStateFromProps()` to achieve the same functionality as `UNSAFE_componentWillReceiveProps` will provide.

Replacement in Functional Component is no complete 1:1  but still we can achieve or use different Hooks at different scenarios to achieve the same result. 

`useMemo()` React hook specify all the props in an array that are dependent, it will run before everything whenever the props change. 

Together `getSnapshotBeforeUpdate(prevProps, prevState)` with `componentDidUpdate`, this new lifecycle should cover all use cases for the legacy componentWillUpdate.
Bitmap Message
Tags: python, programming, computerscience, beginners
Published: 2021-09-20 22:57:20

![Console Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rnbw1wdi5ptgu3d37qn0.png)
```python
# bitmap_message.py
#   Displays a text message according to the provided bitmap image.
# by: Scott Gordon

import sys

bitmap = '''
....................................................................
   **************   *  *** **  *      ******************************
  ********************* ** ** *  * ****************************** *
 **      *****************       ******************************
          *************          **  * **** ** ************** *
           *********            *******   **************** * *
            ********           ***************************  *
   *        * **** ***         *************** ******  ** *
               ****  *         ***************   *** ***  *
                 ******         *************    **   **  *
                 ********        *************    *  ** ***
                   ********         ********          * *** ****
                   *********         ******  *        **** ** * **
                   *********         ****** * *           *** *   *
                     ******          ***** **             *****   *
                     *****            **** *            ********
                    *****             ****              *********
                    ****              **                 *******   *
                    ***                                       *    *
                    **     *                    *
....................................................................
'''
print('***** Bitmap Message *****')
print('Enter the message to display with the bitmap.')
message = input('> ')
if message == '':
    sys.exit()

for line in bitmap.splitlines():
    for i, bit in enumerate(line):
        if bit == ' ':
            print(' ', end='')
        else:
            print(message[i % len(message)], end='')
    print()
```
Photo by <a href="https://unsplash.com/@marjan_blan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Marjan Blan | @marjanblan</a> on <a href="https://unsplash.com/s/photos/map?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>