teleren/devto huggingface dataset:
How to install erlang on macOS with asdf
Tags: erlang, asdf, macos, elixir
Published: 2020-02-12 05:02:08

---
title: How to install erlang on macOS with asdf
published: true
description: Compile erlang with asdf on macOS Catalina
tags: erlang, asdf, macos, elixir
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xux5b5h96sp7tpu6fzij.jpg
---

# The problem

Currently some errors are happening when we try to compile/install erlang on mac OS Catalina with any method. Looking for the solution on the web, I found a way that finally worked for me.

# The solution

We have to already have installed [asdf](https://asdf-vm.com/), the [asdf-erlang](https://github.com/asdf-vm/asdf-erlang#asdf-erlang) plugin, and also [homebrew](https://brew.sh/).

## Install dependencies

Let's install some mandatory dependencies.

```shell
brew install autoconf wxmac openssl
```

*I recommend to install other packages too*.

```shell
brew install autoconf wxmac openssl fop coreutils automake libyaml readline libxslt libtool unixodbc unzip curl
```

## Set environment variables

Once installed these packages, we need to set two environment variables before to install asdf.

```shell
export CFLAGS="-O2 -g -fno-stack-check"
```

```shell
export KERL_CONFIGURE_OPTIONS="--disable-hipe --with-ssl=$(brew --prefix openssl)"
```

*If you haven't installed Java (or you don't want to install it), then set the second variable like this*:

```shell
export KERL_CONFIGURE_OPTIONS="--disable-hipe --without-javac --with-ssl=$(brew --prefix openssl)"
```

## Install erlang

Now you can install the erlang version you need. In my case, I was needing to install the specific version `20.3.8.7`.


```shell
asdf install erlang 20.3.8.7
```

I hope this method also work for you :wink:.

# Source link

I found the solution to my problem in [this comment](https://github.com/kerl/kerl/pull/326#issuecomment-546080476).
jQuery Animation Effect Methods / Functions
Tags: javascript, jquery
Published: 2020-02-12 04:53:47

<!-- wp:heading {"level":4} -->
<h3>jQuery Animation Effect Methods / Functions</h3>
<!-- /wp:heading -->

<!-- wp:yoast/faq-block {"questions":[{"id":"faq-question-1555127038687","question":["Display Effects",{"type":"br","props":{"children":[]}},""],"answer":["Hide Effect",{"type":"br","props":{"children":[]}},"Show Effect",{"type":"br","props":{"children":[]}},"Toggle Effect"],"jsonQuestion":"Display Effects","jsonAnswer":"Hide EffectShow EffectToggle Effect"},{"id":"faq-question-1555127173108","question":["Fading Effects",{"type":"br","props":{"children":[]}},""],"answer":["Fadein",{"type":"br","props":{"children":[]}},"Fadeout",{"type":"br","props":{"children":[]}},"FadeToggle",{"type":"br","props":{"children":[]}},"FadeTo"],"jsonQuestion":"Fading Effects","jsonAnswer":"FadeinFadeoutFadeToggleFadeTo"},{"id":"faq-question-1555127228492","question":["Sliding Effects"],"answer":["SlideDown",{"type":"br","props":{"children":[]}},"SlideUp",{"type":"br","props":{"children":[]}},"SlideToggle"],"jsonQuestion":"Sliding Effects","jsonAnswer":"SlideDownSlideUpSlideToggle"},{"id":"faq-question-1555127266792","question":["Other Effects",{"type":"br","props":{"children":[]}},""],"answer":["Animate",{"type":"br","props":{"children":[]}},"delay"],"jsonQuestion":"Other Effects","jsonAnswer":"Animatedelay"}]} -->
<div class="schema-faq wp-block-yoast-faq-block"><div class="schema-faq-section"><strong class="schema-faq-question">Display Effects<br/></strong> <p class="schema-faq-answer">Hide Effect<br/>Show Effect<br/>Toggle Effect</p> </div> <div class="schema-faq-section"><strong class="schema-faq-question">Fading Effects<br/></strong> <p class="schema-faq-answer">Fadein<br/>Fadeout<br/>FadeToggle<br/>FadeTo</p> </div> <div class="schema-faq-section"><strong class="schema-faq-question">Sliding Effects</strong> <p class="schema-faq-answer">SlideDown<br/>SlideUp<br/>SlideToggle</p> </div> <div class="schema-faq-section"><strong class="schema-faq-question">Other Effects<br/></strong> <p class="schema-faq-answer">Animate<br/>delay</p> </div> </div>
<!-- /wp:yoast/faq-block -->

Read more https://www.tutsmake.com/jquery-effect-methods-list/
Nullish coalescing with React and TypeScript
Tags: react, typescript
Published: 2020-02-12 04:26:15

---
title: Nullish coalescing with React and TypeScript
published: true
description: What is nullish coalescing and how to use it in React and TypeScript apps
tags: react,typescript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/5vw3tjxpf29any5ra2sm.png
---

The [last post](https://carlrippon.com/optional-chaining-with-react-and-typescript/) went through how we can use optional chaining in React and TypeScript apps to shorten our code. [Nullish coalescing](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator) is another excellent new JavaScript feature that helps us improve our React and TypeScript apps. Let's find out what this feature is and how it's useful in React and TypeScript apps.

## A simple component

Let's start with a simple component:

```jsx
type Person = {
  name: string,
  subscription?: Subscription
};
type Subscription = {
  amount: number
};
type Props = {
  person: Person
};
const PersonCard: React.FC<Props> = ({
  person
}) => {
  return (
    <div>
      <div>
        <span>Name: </span>
        <span>{person.name}</span>
      </div>
      <div>
        <span>Subscription amount: </span>
        <span>
          {person.subscription?.amount}
        </span>
      </div>
    </div>
  );
};
```

We are using optional chaining so that we don't get an error when rendering the subscription amount. However, let's say we want to render _"No subscription"_ if the person has no subscription. We may use something like this:

```jsx
<span>
  {person.subscription?.amount ||
    "No subscription"}
</span>
```

However, what if the person has a subscription, but it is free? - i.e. `person.subscription.amount` is `0`. In this case, _"No subscription"_ would be rendered because `0` is a falsy value.

## Using nullish coalescing

A nullish coalescing approach looks very similar:

```jsx
<span>
  {person.subscription?.amount ??
    "No subscription"}
</span>
```

Notice the nullish coalescing operator (`??`). This renders the right-hand operand if the left-hand operand is `null` or `undefined`. So, it's more precise than `||` and does precisely want we want in our case, resolving the free subscription bug.

## Can I use nullish coalescing now?

Yes, if you are running recent versions of React and TypeScript:

- **TypeScript 3.7** supports nullish coalescing
- **Babel 7.8.0** supports nullish coalescing
- Projects created with **create react app 3.3.0** supports nullish coalescing as well!

*Originally published at [https://www.carlrippon.com/nullish-coalescing-with-react-and-typescript](https://www.carlrippon.com/nullish-coalescing-with-react-and-typescript/) on Feb 11, 2020*.
Anyone who interested in the product for remote workers?  
Published: 2020-02-12 03:55:52

I made a product in private beta. I want to let remote teams be just as productive as if they were sitting in the same room. 

If that sounds, you can briefly review the product and give me some feedback. That will be super helpful! 🤎

https://beecanvas.com 

![Teaser](https://dev-to-uploads.s3.amazonaws.com/i/db7krm304ah2b18vz67f.gif)
Embeded Speakerdeck Slide in Gatsby Post
Tags: speakerdeck, ggatsby
Published: 2020-02-12 03:00:38

There are many ways to embeded different media type contents in Gatsby, here is the easiest one which just leverages the iframe wrapper.

Step 1. Install gatsby-remark-responsive-iframe official plugin

  >Check [here](https://www.gatsbyjs.org/packages/gatsby-remark-responsive-iframe/) for instruction.

Step 2. Get url of your Speakerdeck slide which you want to share

![](https://bryanpfliu.github.io/static/step2-f618b618216117dc6fdc38548efe5218-48538.png)

Step 3. Get embeded html code from [iframely](https://iframely.com/embed)

![](https://bryanpfliu.github.io/static/step3-c54518ca125531a88331c2d9b07683a4-b75b8.png)

Step 4. Paste the generated code in your index.md
```javascript
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.1972%;">
  <iframe src="https://speakerdeck.com/player/cf04f08b30f54c41ad76d0b180effd0b?slide=9"
    style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;"
    allowfullscreen scrolling="no" allow="encrypted-media">
  </iframe>
</div>
```
Step 5. Run your site in Gatsby develop mode and check the result!

```shell
  $ gatsby develop
```

**P.S.** This is not for publishing Speakerdeck slide to dev.to!!

<a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a>This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
Should I focus on Data Structures and Algorithms or Programming Languages?
Tags: beginners, datastructures, computerscience, algorithms
Published: 2020-02-12 02:47:21

Data Structures along with Algorithms is a core key of computer science so we should focus on both.

## Data Structures and Algorithms

Data Structures and Algorithms is the heart of Computer Science and it is inevitably being used in almost all domain of the computer science industry.

`Arrays.binarySearch()` method in Java.

```java
Arrays.binarySearch(array, searchElement);
```

It does a search with a given array and searchElement. But what we usually don't know is that how binary search works internally, we end up using DSA everyday.

A lot of methods/functions we use daily in any programming languages is implemented in the most efficient way using DSA.


## Programming Languages and Frameworks

Pretty sure we can't develop an application just using only DSA we really need some kind of programming languages, frameworks and tools to implement it.

Assume that we want to build a web application it required a front-end, a back-end, and a database.

At front-end can be built using some kind of scripts, programmings and tools as below:

1. HTML
2. CSS
3. Bootstrap, Material UI, Tailwind
4. ReactJS, AngularJS, VueJS, PreactJS, SvelteJS

At back-end can be built using some kind of programmings and framework as below:

1. PHP (Laravel)
2. Ruby (Ruby on Rails)
3. Java (Spring)
6. Erlang (Chicago Boss)
4. Go (Gin)
5. Python (Django)
6. Node (Express)
7. Deno

All the above points give us a clear understanding that knowing only DSA won't help us build a full-fledged application.

Data Structures and Algorithms is used to make the implementation more efficient in terms of time and space. Programming Languages is used to implement and build applications and make the friendly user interface.

Both are very important for developing a full-fledged and efficient application for the users.

With real world example of building Google maps:

Google Maps is being used by millions users. Google Maps has a very friendly UI and it is very easy to use and running so fast. But how? because the engineers at google made it so efficient by applying DSA, distributed servers, architecture and programming languages. They are really very important.

## To be a Good Programmer

* Experiences in developing various applications in various businesses using various programming languages.
* Have good knowledge of data structures and algorithms.
* Have good knowledge of database related concepts.
* Have good knowledge of the basic networking concepts.
* Have good knowledge of microservices architectures.
* Have concepts of making friendly user interface.

## Summary

Technology changes fast. Don't get left behind. Learn as much as we can.

Thanks for reading ❤ Say Hello! <a href="https://github.com/bunlong">Github</a> | <a href="https://www.linkedin.com/in/bunlongvan">LinkedIn</a> | <a href="https://twitter.com/bunlongvan">Twitter</a>
What to consider when creating a new site?
Tags: discuss, career, website, codenewbie
Published: 2020-02-12 01:41:23

---
title: What to consider when creating a new site?
published: true
tags: discuss, career, website, codenewbie,
---

Hope you're great ☺️!

Let's help those who wanted to create a site as a portfolio/marketing etc! No matter what level of coding you're in, let's share your thought! 😄

*What do you have to consider when creating a new blogging site, personal website, company website etc?*

In terms of:

##Development
1) The stack you use (MEAN stack, MERN stack, LAMP stack etc)
2) Serverless or not
3) Web design ideas

##Marketing
1) Search Engine Optimization (SEO)
2) Google Adwords
3) How do you reach your audience and promote your site?

And anything you would like to add! 

Let's help each other out, happy coding! ☺️

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n4u4jquzg9bts7nia1ei.png)
Creating websites with txt files! | Proof of concept | Would love to hear your feedback!
Tags: webdev, productivity, beginners
Published: 2020-02-12 01:40:19

# Can programming be more accessible?


[Proof of Concept](https://thatgoodcompany.com/)

I believe so!, but first... Why should programming, or technology creation be more accessible? 

The answer (at least for me) lies on the fact that there are so many creators out there that want to make so many things and have great ideas but they find themselves in front of a very steep road to do so. And we as engineers haven't made the path much smoother over time. In fact even many experienced developer can have a rough time on SO answers or reddit forums. 


# How?


There are many people and great companies working on democratizing technology for everyone with all sorts of different approaches. Myself took the approach of making it text based, as if you were taking notes.

The first idea was to configure a JSON file to change colors, add products and so on, and even though JSON is really human friendly is not human enough for people just getting started. 

So I came up with this approach, where you basically put the name of a property, a colon and the value without { [ " which might and surly has scared a lot of people in the past. 


# Sample


```
name: My product!

price: 19.99

description: 

My Awesome product is awesome

lorem ipsum
```

Just like that you would create a product and have it ready on a predefined template. 

# Future & Present

I have no idea if this would actually increase productivity of a lot of people or if this is not something that would actually help someone. It even could be used from any note taking app out there, Notion was a big inspiration for this as well 

I really hope it does, as the same mechanism could be used for making blogs, or even APIs where programers could use it as a headless CMS... but I'm getting ahead of myself. If you have some time I would definitely love to hear your thoughts and suggestions.
Mistakes made and lessons learnt - bash to zsh
Tags: bash, zsh, mac, android
Published: 2020-02-12 01:19:10

## Bash to zsh

Recently, I migrated from using `bash` go `zsh` as most of us did. 

`chsh -s /bin/zsh` easy right :) 

But somehow I managed to break my terminal in the process of setting up `AndroidStudio`.  I am not a `shell pro` but I like to keep couple of `adb` and `git` commands as `alias`, so that I can use `AndroidStudio Terminal` or `System Terminal` to perform quick actions. All, I wanted to do was to add the path to `android-sdk` and `platform-tools` to the system path so that all the adb commands would be recognized and life would be simple. But somehow I managed to break it. 

These are the steps I took to kind of migrate everything my `.bash_profile` had over to `zsh`. 



## Setting up Android SDK and platform path

* create `.zshrc` file -> `nano ~/.zshrc` 

* add the path to `zshrc` . We can open and edit this file in `TextEditor` or edit it in the terminal itself like:

  * `vi ~/.zshrc` ,then press `i` for `insert`, paste the path, then `:wq` for `write and quit`. 

  * something like below:

```sh
export PATH='$PATH:/~YOUR_HOME/Library/Android/sdk'
export PATH='$PATH:/~YOUR_HOME/Library/Android/sdk/platform-tools'
```

  * At this point, most of you might already notice the `mistake` in the above snippet. Somehow, having the `quotes` broke everything and nothing worked. When I say nothing, I mean the `cd`, `ls`, `cd ..` etc. commands from the system's `zsh` (`/bin/zsh`) also didn't work. Once, I delete these two lines, everything would work and I would be where I started, i.e. `adb` commands wouldn't work.

  * The key to this was to `remove` the `quotes` surrounding the path. Once I removed those, everything started working fine. 

```sh
export PATH=$PATH:/~YOUR_HOME/Library/Android/sdk
export PATH=$PATH:/~YOUR_HOME/Library/Android/sdk/platform-tools
```

  * One way to verify this is to check the path in the terminal, and the path now should include path to `android-sdk` and `platform-tools`, this is the command `echo $PATH`. 



### Setting up `.zprofile`  corollary to `.bash_profile` 

* create `.zprofile` file -> `nano ~/.zprofile` 
* add the `aliases` to `.zprofile` . We can open and edit this file in `TextEditor` or edit it in the terminal itself like:
  * `vi ~/.zprofile` ,then press `i` for `insert`, paste the path, then `:wq` for `write and quit`. 



## Bonus - some aliases that I use

```sh
# Git Commands
alias gf='git fetch'
alias gp='git pull'
alias gs='git status'
alias gcd='git checkout develop' #or master if you have master

# Gradle Commands
alias at='./gradlew assembleDebug assembleAndroidTest'
alias allTest='./gradlew assembleDebug testDebugUnitTest'
alias cbc='./gradlew cleanBuildCache'
alias build='./gradlew build'
alias stop='./gradlew --stop'
alias status='./gradlew --status'

# ADB Commands
alias devs='adb devices'
alias kill='adb kill server'
alias restart='adb restart server'
```

Please comment if there better ways of doing this and feel free to add more helpful `aliases`. 

Thank you!
1 month deep into boot camp + capstone project
Tags: ruby, productivity, webdev, career
Published: 2020-02-12 01:18:19

Dear **DEV**s,

###**Summary:**
We are heading into the second month of the **Flatiron Software** Engineering boot camp. The second module mainly focuses on SQL( and extensions), ORMs and ActiveRecord, HTML and CSS(SCSS), and Sinatra. Essentially this module is going to end with a creation of an MVC project using the listed stacks above.

That being said, we've come to the end of the **first module** which means a **capstone project** is due. It had to be a CLI application using object-oriented Ruby.


![nba player idea](https://media.giphy.com/media/XHqLCH0ljA2YxYHGj4/giphy.gif)
###**Idea:**
Basketball and the NBA have always been a big part of my life, so my idea was inspired by the professional basketball league. I wanted to list all the thirty teams with their current roster, each team's general information (for example their arena name or the year when the franchise was founded), and a few paragraphs about the NBA itself.

I wanted to make sure, that the **user** is able to navigate the app easily, it has multiple choices, and it displays enough information about not only the content but myself as well. This was all up to my CLI class.

###**Execution:**
With a graphical appearance idea in my head and an execution plan, I was ready to build. I would scrape the team list from wikipedia.com create thirty instances of teams using the scraped data. Scrape the rosters from nba.com and the team properties with universal scraping methods that could be used for any team that is passed in.

I also made a very simple **wireframe** based on how I imagined the user interface.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/oimoulrdpyax7nc2e1yb.png)

[Here is a demonstration on YouTube about navigating and using the app!](https://www.youtube.com/watch?v=itNH5zSdhQU)

You can try it if you click [here](https://nba-fam.oliverfeher.repl.run/) or shown with source code below:
*// I recommend using the "here" link due to the small embedded repl window //*
{% replit @oliverfeher/NBA-FAM %}

One of my **biggest obstacles** while creating this app was the thirty different urls for the teams. With the help of my technical coach we were able to find a way, and pair-program this solution.
```ruby
def update_from_wiki                                     
   url = "https://en.wikipedia.org/wiki/#{name.split(' ').join('_')}"
   hash_from_wiki = Scraper.get_team_info(url)
   update_from_hash(hash_from_wiki)

   #https://en.wikipedia.org/wiki/Atlanta_Hawks
   #https://en.wikipedia.org/wiki/Boston_Celtics etc.   
end
```
The urls are all the same except the very end where the team name sits. I used the team instances name property (team.name) passed it into the url via interpolation.

###**Conclusion:**
I am very satisfied with the final product. I believe, I was able to fulfill all the project requirements and did a little extra. I am always up for new challenges because essentially those what we learn from.

Thank you for reading,
Olly
How to setup TSLint and Prettier for TypeScript projects
Published: 2020-02-13 07:09:38

---
title: How to setup TSLint and Prettier for TypeScript projects
published: true
date: 12/02/2020
tags: 
canonical_url: https://darraghoriordan.com/2020/02/11/setup-tslint-prettier-typescript-projects/
---

TSLint will help us identify potential issues in our code by examining how we use language features.

Prettier will format code consistently but needs some configuration to work with TSLint.

Together they make code-reviews easier and faster because if you run both of them you will identify many common code review errors before pushing your code.

There needs to be some configuration to have both work together. Here is my cheatsheet for setting this up on a project.

<!-- end excerpt -->
## Setup Prettier and TSLint in your project

Add the `tslint.json` file and any configs you need. here are mine.

```
{
  "extends": [
    "tslint:recommended",
    "tslint-eslint-rules",
    "tslint-microsoft-contrib",
    "tslint-consistent-codestyle",
    "tslint-config-prettier"
  ]
}
```

Next we add the package(s) to support our configuration above.

```
yarn add --dev tslint tslint-consistent-codestyle tslint-eslint-rules tslint-microsoft-contrib tslint-config-prettier
```

## Setup VScode to use prettier for formatting

Install the TSLint plugin and prettier extensions for VSCode.

With the TSLint plugin VSCode will highlight and offer suggestions for typescript issues.

Now when you format the file (`Shift-Alt-F`) you will be asked which formatter you want as a default formatter. Choose Prettier.

## Set VSCode to autoformat on save

Now set VSCode to auto format on save:

1. `Ctrl-Shift-P` and search for “Settings”.
2. Open the “Settings:UI” option.
3. In the settings UI search for “Format On Save”.
4. Tick the box!
Hints For Managers During Outages
Tags: sre
Published: 2020-02-12 00:49:01


* If you talk to another engineer privately about *our problem* while I am on-task I will consider the problem assigned to someone else and find another chore. If you talk to another engineer about *me* privately, expect both of us to waste valuable time arguing with each other instead of fixing something.

* If you say "can we X?" when you mean "Do X." I will start considering everything you say to be a conversation starter instead of an instruction.

* If you drop off our outage call to attend to another regularly scheduled meeting "our" problem will lose urgency.

* If you schedule a group status call and then fail to join it because you were informed out-of-band I will assume law of the jungle and feel free to update your manager about my progress directly.

* If you miss the group status call without explanation and then ask for a status, please expect little.

* *Your* decision did not retroactively become *our* decision because something broke.