teleren/devto huggingface dataset:
Else Statements
Tags: javascript, devops, beginners, tutorial
Published: 2021-04-20 17:36:45

#### Introducing Else Statements
When a condition for an if statement is true, the block of code following it is executed. What about when that condition is false? With an else statement, an alternate block of code can be executed.
* Example:
```
function test(num) {
  var result = "";

if (num > 5) {
    result = "Bigger than 5";
  }

  if (num <= 5) {
    result = "5 or Smaller";
  }
  return result;
}
test(4);
```
* This is your basic if statement
```
function test(num) {
  var result = "";

 if (num > 5) {
    result = "Bigger than 5";
  } else {
    result = "5 or Smaller";
  }
  return result;
}
console.log(test(4)); // will display 5 or Smaller
```
* Here we combined the if statements into a single if/else statement.



* If you have multiple conditions that need to be addressed, you can chain if statements together with else if statements.
```
function testElseIf(num) {
  if (num > 10) {
    return "Greater than 10";
  } else if (num < 5) {
    return "Smaller than 5";
  } else {
    return "Between 5 and 10";
  }
  
}
console.log(testElseIf(7)); // will display Between 5 and 10
```
* Logical Order in If Else Statements

Order is important in if, else if statements.

Take these two functions as an example.

* Here's the first:
```
function logical(num) {
  if (num < 10) {
    return "Less than 10";
  } else if (num < 5) {
    return "Less than 5";
  } else {
    return "Greater than or equal to two";
  }
}
```
And the second just switches the order of the statements:
```
function logic(num) {
  if (num < 5) {
    return "Less than 5";
  } else if (num < 10) {
    return "Less than 10";
  } else {
    return "Greater than or equal to two";
  }
}
```
Now sure these two functions look identical but if we pass a number to both we get different outputs.
```
console.log(logical(4)); will display Less than 10
console.log(logic(4)); will display Less than 5
```
Setting Docker build context to CWD with Compose
Tags: docker, compose
Published: 2021-04-20 17:36:25

The problem is rather contrived so the solution is rarely needed. But if you'll ever find yourself in this situation apparently it's easy to get out. :smiley:

Suppose you want to run the same `docker-compose` with the same `Dockerfile` but from several subfolders and you don't like duplication. So you fave a folder structure like this:
```
project
  |- subproject1
    |- the_file.txt
  |- subproject2
    |- the_file.txt
  |- Dockerfile
  |- compose.yml
```

Now you'd like to run `docker-compose -f ../compose.yml up` from each of `subproject1` and `subproject2` and for `docker-compose` to set the context for the `Dockerfile` to each of the folders respectively.

You do it with `$PWD` as follows:
```yaml
version: "3.9"
services:
  assignment:
    build:
      context: $PWD
      dockerfile: ../Dockerfile
    ports:
      - "8080:8080"
    depends_on:
      - "database"
  database:
    image: "mariadb:10.5"
    restart: "always"
    environment:
      MYSQL_ROOT_PASSWORD: "secret_pass"
```
in the `compose.yml` file. For the sake of argument we pretend we need a separate service with a database in each case.

Then you write your `Dockerfile` as usual:
```
FROM node:15

# Create app directory
WORKDIR /app

RUN npm install -g http-server

# Bundle app source
COPY . .

EXPOSE 8080
CMD [ "http-server", "-p", "8080" ]
```

And now for the `subproject1` you should have the first text file exposed over the Web interface, and for the `subproject2` the second text file.

Yep, as I told you from the start this is rarely needed because you rarely have two (or more) subprojects built with exactly the same `Dockerfile`. In the end it turned out I myself don't need this setup. But I spent surprisingly long time figuring (Googling) out the right config, so we all have it now laid out in the case we ever need it. :smiley:
Intrinsic calibration of a camera in ROS-1
Tags: robotoperatingsystem, robotics, ubuntu, calibration
Published: 2021-04-20 17:08:50

Here's the link to my first blog regarding the calibration of intrinsic parameters of USB Cameras in ROS-1.

Calibration is necessary to match the true values of the camera frame with the real world. Beginners often skip the part of understanding the background of the calibration process. 
Hence, this blog will get you covered with the right procedure to calibrate the camera using the right choice of chessboard pattern based on application. 

Link- https://reachpranjal19.medium.com/camera-calibration-in-ros-melodic-a0bf4742d636
F# Web Backend: Rationale
Tags: fsharp
Published: 2021-04-20 17:07:15

F# is an ML-family language on .NET platform. If you are happy with your C#, or Node.js, or PHP, or Python, you don't need F#. You gotta have certain wanderlust to drift away from established mainstream.

What I consider strong points of F#:

- Functional, but not pure. Allows to flexibly opt into mutability and OOP.
- Decent interoperability with .NET platform and C#. All good that there is about modern .NET is available.
- Sophisticated type system, e.g. union types.
- Type inference is phenomenal.

Vs Rust:

- Better tooling and ecosystem.

Vs Scala:

- Maybe more FP feel, but very close competitor.
nodejs authentication written in TypeScript
Tags: help, node, authentication, typescript
Published: 2021-04-20 17:01:49

Please advise, which library can be used for nodejs authentication written in TypeScript? One of the most popular libraries I know is PassportJS. But it is written for Express-like application. I would like such a library to use the modern capabilities of ES2015+, such as Promise, async/await... and ideally if it is used TypeScript for its source code.
New Bash Alias: Git Out
Tags: git, bash, opensource, showdev
Published: 2021-04-20 16:59:55

Up until now, we only had `git commit` and `git push`. But what about `git out`? If you know what it feels like to be left out, you should empathize with this command. Even though it is a part of this legendary trio, it is never actually used.

But not today, Not anymore!
Let's right the wrongs of this society!
So, if you are with me!

Open Your `.bashrc` File!

```Bash
nano ~/.bashrc
```

<br>

Add This Line! & Save it! (ctrl+x, y, return)

```bash
git() { if [[ $@ == "out" ]]; then command "exit"; else command "git $@"; fi; }
```

<br>

And Finally! Source it!

```bash
source ~/.bashrc
```



Good job! Be Proud! Because of you, there is one less lonely command!

PS: Feel free to share any meme command out there.
Reactor – How to Combine Publishers (Flux/Mono)
Tags: reactor, flux, mono
Published: 2021-04-20 16:51:36

https://grokonez.com/reactive-programming/reactor/reactor-how-to-combine-flux-mono-reactive-programming

Reactor – How to Combine Publishers (Flux/Mono)

In this tutorial, <a href="https://grokonez.com">JavaSampleApproach</a> introduces ways to combine two or more Reactor Publishers (Flux/Mono).

<!--more-->
<h2>I. Ways to combine Publishers</h2>
<h3>0. Initialization</h3>
<h4>0.1 Reactor installation in Maven</h4>
- First, import the BOM by adding the following to <strong>pom.xml</strong>:
<pre><code class="language-html">&lt;dependencyManagement&gt;
	&lt;dependencies&gt;
		&lt;dependency&gt;
			&lt;groupId&gt;io.projectreactor&lt;/groupId&gt;
			&lt;artifactId&gt;reactor-bom&lt;/artifactId&gt;
			&lt;version&gt;Aluminium-SR1&lt;/version&gt;
			&lt;type&gt;pom&lt;/type&gt;
			&lt;scope&gt;import&lt;/scope&gt;
		&lt;/dependency&gt;
	&lt;/dependencies&gt;
&lt;/dependencyManagement&gt;</code></pre>
- Next, add dependency:
<pre><code class="language-html">&lt;dependencies&gt;
	&lt;dependency&gt;
		&lt;groupId&gt;io.projectreactor&lt;/groupId&gt;
		&lt;artifactId&gt;reactor-core&lt;/artifactId&gt;
	&lt;/dependency&gt;
&lt;/dependencies&gt;</code></pre>
<h4>0.2 Declare & Initialize Publishers</h4>

More at:

https://grokonez.com/reactive-programming/reactor/reactor-how-to-combine-flux-mono-reactive-programming

Reactor – How to Combine Publishers (Flux/Mono)
10 Figma Tricks I Wish I Knew Earlier
Published: 2021-04-20 16:34:45

I’m consistently impressed by all the useful features Figma has baked into their app. What used to be a workaround in Sketch is now a thought out feature in Figma — a breath of fresh air.
I frequently stumble upon time-saving features that I wish I knew about sooner — hopefully, some of these are as exciting for you as they were for me when I discovered them.
1. The easiest progress ring you’ve ever made in your life

Maybe it’s just me, but I had no idea about the arc tool until I randomly dragged it one day and had my mind blown. It makes for some really simple and beautiful progress rings.
2. Use the scale tool to avoid distortion

Keep your designs pixel perfect with the scale tool — simply select what you want to scale, then pressing K on the keyboard, drag, and voila.
I was always reluctant to scale designs in the past because something always broke, and I’d have to make adjustments. With the help of the scale tool, those worries are no more — everything scales perfectly and maintains its proportions with no rework needed.
3. Drag objects outside of a frame while keeping them inside it

Hold spacebar while dragging an object outside of a frame for it to remain inside the container. You can also turn off “clip contents” for the frame that contains the object so you can still see it when it’s outside of the container — you can also press CMD (CTRL)+ Y to reveal the outlines.
4. Tidy up, swap position, and organize grid

Tidy up your designs by clicking the grid icon in the corner after selecting multiple objects in an array. This makes all spacing between objects equal, and you can then drag objects to re-arrange them and adjust their spacing.
5. Duplicate the last action

CMD + D to duplicate your previous action. CMD + D will also duplicate objects, frames, and anything else.
6. Preview a color with the eyedropper

When using the eyedropper tool (i) hold down instead of tapping to preview different colors.
7. CMD + / unlock all objects

CMD + / has a ton of useful quick actions that will save you tons of time in your workflow. If you’re not using it, I highly recommend seeing what’s available in the menu. An action I use a lot is quickly unlocking all my objects and changing fonts.
8. Easily drop images inside placeholder shapes

CMD + Shift + K to replace the fill of shapes or frames with a bunch of images.
9. More tricks with spacebar

Drag a selection area and then hold space to increase the selection size of your pointer.

If you’re drawing a shape, you can also hold space to move the object while drawing it.

And if that’s not enough, you can also hold spacebar to override Figma from automatically nesting objects inside frames or auto-layouts — spacebar is very handy!
10. Content Reel + Unsplash

Content Reel and Unsplash have been two indispensable plugins to save time and avoid “John Doe” as the name I use for every user. With Content Reel, you can plug avatars, lorem ipsum, names, addresses, and so much more into your design with one click. Unsplash is a library of high-quality graphics free to use.
How to Create an Input Autocomplete with HTML
Tags: html, webdesign, tutorial
Published: 2021-04-20 15:45:57

HTML Autocomplete Input - In this article I will share tips and tricks on how to make autocomplete input or you can also live search with HTML. In this experiment we will only use pure HTML.

At a glance, autocomplete input is used to make it easier for users to input data on the input form from the data that has been provided.

How do I make an input autocomplete with HTML ? Here are the short steps.

First we will create a new HTML file that will be used in this experiment. Here I will create an HTML file named index.html, then friends can copy the starter code below and paste it in the HTML file that was just created.

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomple Input with HTML</title>
</head>
<body>
    
</body>
</html>
```
Here we already have the HTML 5 starter code, and if we save and try to open it in the browser the result will be empty, because we don't have anything in the `<body> </body>` tag yet. Now then, add the code below so you can see what we are going to make.

```html
<h1>Autocomplete Input with HTML</h1>
    <input list="regionList" placeholder="Input Your Region">
    <datalist id="regionList">
        <option value="Jawa Timur">
        <option value="Jawa Tengah">
        <option value="Jawa Barat">
        <option value="DI. Yogyakarta">
        <option value="Bali">
    </datalist>
```
Add the additional code above inside the `<body> </body>` tag. A brief explanation of the code above, so we will add the H1 Autocomple input with HTML label which we will function as a title. Then we add the input form with the list id regionList, where when we input text on the input form it will automatically look for the data registered in the datalist with the id regionList (the same as the input list id). In the datalist there are several data options that have value, now this data will be searched for when we input text in the input form.

{% codepen https://codepen.io/hilmihidayat/pen/gOgBxWz %}

Now try to save or save and try opening it in the browser, then try to input some text characters on the form. From here we have succeeded in making autocomplete input or it can also be used as a live search with HTML.

For the next step we will add a bootstrap to enhance the appearance. Read more (in Indonesian) at [https://codelapan.com/post/cara-membuat-autocomplete-input-dengan-html](https://codelapan.com/post/cara-membuat-autocomplete-input-dengan-html)
M1 기반 Mac에서 안드로이드 에뮬레이터 사용하기
Tags: android, arm64, m1, mac
Published: 2021-04-20 15:28:34

___2021/05/21 추가:___

___4월 말에 이루어진 안드로이드 스튜디오(Android Studio)의 업데이트로 인해, 기존에 잘 작동하던 system-image가 먹통이 되어버렸습니다. 안드로이드 스튜디오를 최신 업데이트를 진행하시거나, 최신 버전으로 설치하실 경우 아래의 방법으로 에뮬레이터 설치 및 에뮬레이터 자체의 실행은 가능하나, 에뮬레이터를 이용한 디버깅은 되지 않을 것입니다.___

https://stackoverflow.com/questions/67230200/emulator-appearing-offline-on-m1-mac-after-the-last-update-of-arm64-v8a

위 링크의 답변을 참고 하셔서, 이전 버전의 시스템 이미지를 다운로드 받아서 안드로이 스튜디오가 설치된 경로 안의 system-image 폴더에 붙여넣기 하시면 됩니다.
(API 버젼 S의 시스템 이미지가 설치되어 있어야 합니다. 설치 방법은 아래의 방법을 따라하시면 되겠습니다.)

<hr/>

저번주에 M1 칩셋 기반의 MacBook Air를 구입했습니다. 출시 당시부터 성능 때문에 이슈가 되어서 그런지, 새로운 ARM 아키텍쳐 기반의 칩셋을 사용했음에도 제가 구매한 21년 4월 현재 x86 기반에서 구동되는 거의 모든 프로그램을 M1 Mac에서도 사용할 수 있습니다.
(모든 프로그램이 리스트에 포함되어 있진 않지만, 아래 링크에서 어떤 앱이 M1 Mac에서 native로 지원되는지 살펴보세요.
https://isapplesiliconready.com/)

하지만, 모든 앱이 그런 것은 아닌데요. 아쉽게도 안드로이드 스튜디오(Android Studio)는 현재 Rosetta(x86 기반의 프로그램을 M1 Mac에서 구동시켜주는 가상화 도구입니다)를 거쳐야만 구동이 됩니다.

이래저래 검색을 해보니 역시나, 안드로이드 스튜디오를 IDE로서는 사용하는데 문제가 없으나, 안드로이드 스튜디오에서 제공하는 안드로이드 에뮬레이터는 아직 사용할 수 없다고  하더라구요.

출시된지 시간이 좀 지났으니, 비공식적인 루트로라도 에뮬레이터가 있지 않을까 해서 검색을 했더니 M1 Mac에서 구동되는 안드로이드 에뮬레이터의 초기 개발 단계 버전이 등장합니다.

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

작년 12월부터 업데이트가 계속 됐을 것 같아서, 최신 버전을 사용해보려고 깃헙 저장소를 더 뒤적거려보니 이런 문구가 눈에 띕니다.

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

최신 버전의 안드로이드 스튜디오를 사용하고 있다면, SDK Manager에서 M1 기반의 에뮬레이터를 다운로드할 수 있다네요!

안드로이드 스튜디오는 최신 버전으로 설치되어 있으니 SDK Manager를 찾아봅니다.

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

안 보이죠? 오른쪽 하단의 옵션에서 Show Package Details를 체크해줍니다.

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

그럼 이런 화면이 나옵니다.

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

위 이미지에서 제가 빨간색으로 표시해두었죠? 그게 제가 설치한 M1 기반의 에뮬레이터입니다. 저 에뮬레이터 이외에도 'Google APIs ARM 64 v8a System Image'라고 표시된 버전이 있는 에뮬레이터를 설치하셔도 됩니다.

그러면

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

짠, 이렇게 작동됩니다!

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

디버깅도 정상적으로 되는군요.

SDK Manager가 아니라 AVD Manager에서 에뮬레이터를 선택하셔도 됩니다.

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

표시해둔 것처럼 AVD Manager에서 Other Images 탭 선택 > ABI가 arm64-v8a로 된 것을 선택해서 설치하시면 됩니다!

그런데 이상하게도 저는 **안드로이드 누가(Nougat, version 7.1.1)도 똑같이 표시된 버전이 있길래 설치했는데, 에뮬레이터가 실행만 되고 검은색 화면을 띄운 채, 멈추더라고요..** 참고하시기 바라요.
The NEW Match-Case Statement in Python 3.10
Tags: python, programming, news, datascience
Published: 2021-04-20 15:10:07

{% youtube 2qJavL-VX9Y %}

Python 3.10 is beginning to fill out with plenty of fascinating new features. One of those, in particular, caught my attention - structural pattern matching - or as most of us will know it, switch/case statements.

Switch-statements have been absent from Python despite being a common feature of most languages.

Back in 2006, PEP 3103 was raised, recommending the implementation of a switch-case statement. However, after a poll at PyCon 2007 received no support for the feature, the Python devs dropped it.

Fast-forward to 2020, and Guido van Rossum, the creator of Python, committed the first documentation showing the new switch-statements, which have been named Structural Pattern Matching, as found in PEP 634.

Python switch-statements are not just switch-statements, they are much more powerful thanks to their structural pattern matching capabilities.

Let's take a look at how this new logic works.
A function in PHP for generate Ramdom strings 
Published: 2021-04-20 14:50:28

If you need a function for generate ramdom strings, you can use this small fraction of code:

```php
 <?php
<?php
    function generateRandomString($length = 10) {
    $characters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $charactersLength = strlen($characters);
    $randomString = '';
    for ($i = 0; $i < $length; $i++) {
        $randomString .= $characters[rand(0, $charactersLength - 1)];
    }
    return $randomString;
?>
```
Accessing default system locations in .NET Core
Tags: csharp, dotnet, 5days5blogposts
Published: 2021-04-20 14:42:31

During my work as a software maintainer, I often find myself writing code not as a part of my regular work, but rather to automate tasks that by definition are done manually. As I wrote last time, I despise repetitive tasks, so I created few tools to automate things like checking status of data I've sent to being processed.

## Why do I need to use locations like Desktop?

While coding one of those automation tools, I often found myself using locations like a desktop or my home directory to store some data needed by my console applications, which are run either by task scheduler or are added to my context menu and used on a specific directory. 

One time I specifically decided to use Desktop, but I was worried that if I have to run it on a different computer (say, company will give developers new laptops) it would stop working and require recompiling. That's when I discovered a beautiful thing in .NET: 

```csharp
System.Environment.SpecialFolder
```

This is just a simple enum with fields like Desktop, Cookies, Fonts and others. It allows you to access any directory from this enum by simply choosing one of those fields in another Environment class method:

```csharp
Environment.GetFolderPath(Environment.SpecialFolder.Desktop);
```

which returns string with path to a given directory. Keep in mind, that SpecialFolder is just an Enum, so **by itself it will only return a number, not a path!**

Note that some paths from this Enum will work only on Windows, while others might return confusing results on Linux systems - so your experience might be different from mine.

## Summary

- If you need to quickly get a path to a place like Desktop or user home directory, you can use Environment.SpecialFolder to make it easier.
- You can check the full list of SpecialFolder fields on its [Microsoft page](https://docs.microsoft.com/en-us/dotnet/api/system.environment.specialfolder?view=net-5.0).
- If you're deploying it on different OS than Windows, always check what kind of results you can expect using SpecialFolder.
- You can find some more information about using SpecialFolder on Linux on this [blogpost](https://developers.redhat.com/blog/2018/11/07/dotnet-special-folder-api-linux/). Note: It's for .NET Core 2.1
Building a Professionally Designed Website Episode 2 - CSS Framework, Baseline Grid, NextJS Structure 
Tags: typescript, nextjs, javascript, webdev
Published: 2021-04-20 14:38:04

### This is Episode 2 in a series that takes you through how to build a high-end website from a design agency's perspective using [Payload CMS](https://payloadcms.com), TypeScript, and statically rendered NextJS. 

If you missed the first episode, I'd highly recommend going back and watching that one before jumping in here. In that first episode, we covered a lot of ground, including the setup of the entire Payload CMS needed to drive the content of the website. 

In that first episode, we defined all [Collections](https://payloadcms.com/docs/configuration/collections) and [Globals](https://payloadcms.com/docs/configuration/globals) necessary as well as went in-depth with layout-building [Block](https://payloadcms.com/docs/fields/blocks) definitions.

Now, in Episode 2, we're ready to start work on the frontend. In this episode, we dive into how to build a lightweight but powerful CSS framework that we'll rely on through the entire site. We'll define breakpoints, media queries, typography, colors, a global reset, and finally - a really awesome way to build a baseline grid using `rem`s.

{% youtube N8PCZxJlz5w %}

### Table of Contents

- [0:00​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=0s) - Intro
- [2:01​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=121s) - React JSS + NextJS setup
- [4:27​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=267s) - Writing our first global styles
- [10:27​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=627s) - The baseline grid - in CSS rems
- [17:10​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=1030s) - Reusable values (breakpoints, colors)
- [19:37​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=1117s) - Typography
- [22:48​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=1368s) - CSS media queries
- [27:24​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=1644s) - Installing dependencies (CSS grid, Modal, Window Info)
- [35:15​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=2115s) - First component - GridContainer
- [42:47​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=2567s) - Testing our grid, discussing NextJS page folder
- [47:48​​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=2868s) - Stubbing out the Template, Header and Footer components
- [55:22​](https://www.youtube.com/watch?v=N8PCZxJlz5w?t=3322s) - Outro

### Give Payload a shot

If you're a JS / TS developer and haven't heard of [Payload](https://payloadcms.com) yet, you should give it a shot. Its developer experience is second to none and it just feels _right_ to build sites and apps with it.

### Feedback welcome

As always, let us know what you think about the video - and about Payload!