teleren/devto huggingface dataset:
Write beautiful and Elegant Javascript code with short-circuit evaluation.
Tags: javascript, codenewbie, beginners, programming
Published: 2022-04-10 18:41:42



*Article posted using [bloggu.io](https://bloggu.io). Try it for free.*

Imagine the scenario where you have a variable supposed to be an array and you want to get its length. But the variable could also be `null` or `undefined` for some reason that doesn’t depend on you. 
If the variable is not an array, trying to access its length will raise an exception: 

`Uncaught TypeError: Cannot read properties of null (reading 'length')`. 

A very nasty thing for our end users to see. As we are good devs, we know we should prevent unexpected exceptions to be raised. To fix this one we might first try to verify if the data supposed to be an array is really an array, before accessing its length. Like this:
```javascript
let length = 0
if (Array.isArray(arr)) {
	length = arr.length
}
```

And that is not bad. It's even the normal way to do it.

But look at this instead:

```javascript
let length = (arr || []).length
```

You agree with me, that is more **beautiful**, **short** and **elegant**. And that is **short-circuit evaluation**.

Note: We could also solve the issue with others javascript features like this:
```javascript
let length = arr?.length ?? 0;
```
But as the purpose of this is article is to talk about `short-circuit evaluation` let's consider the first solution.
_________________________

Now let's dive into it.


We already know about logical operators in Javascript:
- logical **AND** (&&)
- logical **OR** (||)
- logical **NOT** (!)

But we can use them to do some tricks:

## Return the first expression evaluated to `false`
You can use `&&`.
Here are some examples:

```javascript
50 && true && 1 && false // Return: false
1 && 0 // Return: 0
```

If all expressions are evaluated to `true` then it returns the last expression:
```javascript
5 && 6 && true && 100  // Return: 100
```

## Return the first expression evaluated to `true`

Then you can use `||`.
Here are few examples:

```javascript
0 || false || 10 // return: 10
```

We can use it to display default value when trying to access attribute that might not exist, might be null or undefined.

So, instead of:
```javascript
message = 'There is no information available'
if (website.data) {
    message = website.data
}
```
we can do this:
```javascript 
message = website.data || "There is no information available"
```

________________________

We are at the end. I hope you liked this article. Follows me for more tricks and tips about Javascript, Python, Django and React.
Week one complete...
Tags: devjournal, beginners, javascript
Published: 2022-04-10 18:37:15

I have completed week one of [Month 4](https://dev.to/taepal467/month-4-of-my-coding-journey-1clc) of my journey.

## What I learned

- How to build a project using jQuery. I completed the [interactive rating component](https://taepal467.github.io/interactive_rating_component/). I know it's not used as much today but I was able to get better results using jQuery. 

- I learned about using [Hyper Terminal](https://hyper.is). From my understanding, it's supposed to be faster than the terminal that's already installed on Mac. And also, it's built on HTML,CSS and JavaScript. You can even download themes and plugin!

- I completed the debugging section on FreeCodeCamp. 

## What I need to work on
- Using JavaScript DOM since that's widely used instead of focusing on jQuery.

- **My layout skills!** Now this is where I really struggle. Getting the web page to look the same on different browsers and also making the web pages mobile friendly.
Add MetaMask Login to Your Web Application - Laravel
Tags: laravel, php, webdev, database
Published: 2022-04-10 18:36:49

I found this article from the wonderful freecodecamp platform that shows us Add a MetaMask Login to Your Laravel Web Application and wanted to share it with you if any of you want to use it in your next projects.

- https://www.freecodecamp.org/news/add-a-metamask-login-to-your-laravel-app/

I hope you enjoyed with me and I adore you who search for everything new.
Verlängerung der Puppet CA
Published: 2022-04-10 17:59:33

Puppet verschlüsselt Verbindungen mit einer selbst-signierten OpenSSL basieten CA.
Diese hat üblicherweise eine Laufzeit von 5 Jahren. Bei der initialen Installation kann man dies über eine Konfigurationseinstellung ändern:

`puppet config set --section server ca_ttl 10y`

Bei Bestandsinstallationen kann man die CA im laufenden Betrieb verlängern.
Im Slack Puppet Community Channel hat Neeloy z.B. ein Script veröffentlicht:

```
cd /etc/puppetlabs/puppet/ssl/ca
(openssl rsa -noout -modulus -in ca_key.pem  2> /dev/null | openssl md5 ; openssl x509 -noout -modulus -in ca_crt.pem  2> /dev/null | openssl md5 )
# Generate new CSR
openssl x509 -x509toreq -in ca_crt.pem -signkey ca_key.pem -out ca_csr.pem
# Sign
cat > extension.cnf << EOF
[CA_extensions]
basicConstraints = critical,CA:TRUE
nsComment = "Puppet Ruby/OpenSSL Internal Certificate"
keyUsage = critical,keyCertSign,cRLSign
subjectKeyIdentifier = hash
EOF
cp ca_crt.pem ca_crt.pem.old
openssl x509 -req -days 3650 -in ca_csr.pem -signkey ca_key.pem -out ca_crt.pem -extfile extension.cnf -extensions CA_extensions
openssl x509 -in ca_crt.pem -noout -text|grep -A 3 Validity
chown -R puppet: ./*
cd /etc/puppetlabs/puppet/ssl
cp -a ca/ca_crt.pem certs/ca.pem
```
Alternativ kann man das [Puppet ca_extend Modul](https://forge.puppet.com/modules/puppetlabs/ca_extend) verwenden, welches die CA Verlängerung mit Hilfe von Bolt Tasks und Plans realisiert.

Viel Erfolg bei der weiteren Nutzung von Puppet.
Customizing the godawul MS Teams
Tags: msteams, electron, javascript, teams
Published: 2022-04-10 17:45:40

---
title: Customizing the godawul MS Teams
published: true
description: PoC MS Teams customization tool
tags: msteams, electron, javascript, teams
//cover_image: https://direct_url_to_image.jpg
---

So, I recently got a new job, and we use Teams for communication. Instead of the way better alternatives like Slack, for example.

I got fed up with how much "M$ Teams" sucks and decided to look into customizing it.

The result of one weekend of hacking is a proof of concept tool which allows you to enable debugging of the Teams app and even inject Javascript/CSS (this functionality is pretty limited ATM).

The whole project needs **a lot** of help, currently.

So, fellow developers, that suffer from having to use the super shitty Teams, **please take a look at and hack at it.**

Source: https://github.com/Alia5/MS-Teams-Customize
NPM: https://www.npmjs.com/package/msteams-customizer

If you want to help and have any questions, feel free to reach out via [twitter](https://1-3-3-7.dev/u/twitter)
How '@use' like '@import' (Sass new syntax) 🤔
Tags: sass, webdev, tutorial, syntax
Published: 2022-04-10 17:36:00

So, Sass has a new set of rules that come to replace the old '_@import_' syntax. **But**, the new '_@use_' and '_@forward_' rules isn't just replacing and working exactly has their old ones.

</br>
###⚠ The problem 

If you are trying to import a '_variables.scss_' to other Sass file and just replace your '_@import_' with a '_@use_', you will find that your variables **still aren't reachable**.
![Code without *](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yuu0i27w3ba8v7zxtmnd.png)

![Code error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e8pfaz9178rk8gc1zo2c.png)

</br>
</br>
###❓ Why this happens?

The new rules are here to fix a lot of bugs from conflict between files that may happen sometimes with the variables import. 

The new syntax makes that you only import the variables of a file using some _modular stylesheet_ way. And this is:

- **Adding the name of the file you are importing in front of _each variable_ you use:**
![Styling with name of file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9d051rl8nae3a5h9epl8.png)

</br> 
For me and a lot of people who been using Sass, one of the biggest advantages of this CSS preprocessor, is that syntax is almost the same as plain CSS, but with super powers. 

The old way of styling your files was that (beside the $ instead @), we could use the same way of import vars between files on CSS. This new way makes that one of the biggest advantages of Sass syntax, as deprecated.

</br>
</br>
###✔ How to fix this? 

Instead of adding the name of your Sass variables file in front of _every single vars in your file_, you just need to add **👉🏽 'as *'** in the end of your import:

`@use "../SassFolder/SassFile" as *;`
![Styling with as *](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usj8u93hpj7yzwd47wlq.png)  
_And yeah, just with 3 characters, you can use the new '@use' syntax without any more pain._


</br>
###👨🏻‍💻📚 Special thanks & credits to:
[Pixel Rocket](https://www.youtube.com/channel/UCn07jnZoflIMSdGWUkRqzsQ) and his awesome [Sass Crash Course](https://youtu.be/BEdCOvJ5RY4), that helped a lot of solving this headache; 

Other devs on Stack Overflow who faced the same problem &/or helped to find solutions. ✌🏼
The Weekly Dev - 202215
Published: 2022-04-10 17:35:12

---
title: The Weekly Dev - 202215
published: true
description: 
tags: 
//cover_image: https://direct_url_to_image.jpg
canonical_url: 'https://kevwe.com/weekly/202215'
---
Technical Wisdom

If you have been coding for a long time, chances are that you will have transitioned into managing teams, or maybe designing architectures.

Or maybe not.

Both options are probably fine, there is so much to know in order to keep current with the latest technologies.

Also, some critical sense is useful in order to realize that not all the latest technologies are the greatest:

https://kevwe.com/weekly/202215
What are some things that folks might not be aware of about TypeScript?
Tags: typescript, discuss
Published: 2022-04-10 17:15:46

I’ve been following Matt Pocock for a while and he started TypeScript tip tweets on Twitter a while ago. I’ve found them super informative and it’s what prompted this post. Here’s the latest one.

{% embed https://twitter.com/mpocock1/status/1512388535692652547 %}

So wonderful devs, what are some things that folks might not be aware of about TypeScript? If you can link to a [TypeScript Playground](https://www.typescriptlang.org/play) example or an example in your favourite online editor, even better!
Contains Duplicate
Tags: leetcode, blind75, array, hash
Published: 2022-04-10 17:06:53

---
title: Contains Duplicate
published: true
description: Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct.
tags: leetcode,blind75,array,hash
//cover_image: https://direct_url_to_image.jpg
---

### Given an integer array nums, return true if any value appears at least twice in the array, and return false if every element is distinct

---

**Brute Force Approach**
*Time Complexity* : O(n^2)
*Space Complexity* : O(1)

**Sort Approach**
*Time Complexity* : O(nlogn)
*Space Complexity* : O(1)

**Optimized Approach via hash**
```javascript
var containsDuplicate = function (nums) {
    let hashMap = {};
    for (let num of nums) {
        if (num in hashMap) {
            return true;
        }
        hashMap[num] = 1;
    }
    return false;
}
```
*Time Complexity* : O(n)
*Space Complexity* : O(n)
[FFmpeg] Play streaming videos
Published: 2022-04-10 17:06:43

## Intro
When I tried playing videos what were gotten from web applications, I could play them only after finishing downloading.

* [[Express][TypeScript] Downloading files](https://dev.to/masanori_msl/express-typescript-downloading-files-1n61)

This time, I will try playing streaming videos again.

## WebM
Actually, I can play streaming just by using the WebM videos I created last time.

* [[TypeScript] Save MediaStream by MediaRecorder](https://dev.to/masanori_msl/typescript-save-mediastream-by-mediarecorder-13hh)

* [The WebM Project](https://www.webmproject.org/)

#### PlayVideo.cshtml
```html
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Play Video</title>
        <meta charset="utf-8">
    </head>
    <body>
        <video controls muted autoplay>
            <!-- Play published static files -->
            <source src="/video/sample.webm" type="video/webm">
        </video>
    </body>
</html>
```

### Play on Unity applications
I also can play on Unity applications by "VideoPlayer".
It only can play specific video and audio codec for WebM.

* Video Codec: VP8
* Audio Codec: Vorbis

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6l54pboez27gf3hcr6k7.png)

* [VideoPlayer - Unity Documentation](https://docs.unity3d.com/ja/2019.4/ScriptReference/Video.VideoPlayer.html)

## Convert to WebM
To do this, I want to convert mp4 files to WebM files.
This time I use FFmpeg.

* [FFmpeg](https://ffmpeg.org/)
* [FFmpeg-Builds - BybN](https://github.com/BtbN/FFmpeg-Builds/releases)

It converts video files with options.
I think the easiest way is adding "-lossless 1".

```
ffmpeg -i "./wwwroot/video/sample.mp4" -c:a libvorbis -lossless 1 ./wwwroot/video/sample_vp8_mp4_lossless.webm
```

But the converted file size becomes more than 10 times larger.

* [Convert mp4 to webm without quality loss with ffmpeg - Video Production Stack Exchange](https://video.stackexchange.com/questions/19590/convert-mp4-to-webm-without-quality-loss-with-ffmpeg)

So I 
```
ffmpeg -i "./wwwroot/video/sample.mp4" -c:v libvpx -c:a libvorbis -crf 10 -b:v 100M -g 300 ./wwwroot/video/sample_vp8_mp4.webm
```

* -c:v => Video codec
* -c:a => Audio codec
* -crf => For a constant quality mode(range 4-63)
* -b:v => For setting bit rate on average(I set 100MBit/s).
    If I set this value larger, the quality will become higher.
    But the file size also will become larger.
* -g => GOP size(add 10 intra frames per second at 30fps)

* [ffmpeg Documentation](https://ffmpeg.org/ffmpeg-all.html)
* [Encode/VP8 - FFmpeg](https://trac.ffmpeg.org/wiki/Encode/VP8)
* [Encode/VP9 - FFmpeg](https://trac.ffmpeg.org/wiki/Encode/VP9)
Top fun🤩 Linux cmd🔥to try right now ✅
Tags: linux, bash, ubuntu, beginners
Published: 2022-04-10 16:52:44

This is my favorite command to have fun when using linux.

## 1. cmd **_sl_** ⚡

- How to install ?
> Ubuntu : 
```
sudo apt install -y sl
```
> Centos :
```
sudo yum install -y sl
```
- How to use ?
```
sl
```
or
```
while true; do sl ; done;
```
![sl_cmd_gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmu5pu029rhf38gg276g.gif)


## 2. cmd **_lolcat_** ⚡

- How to install ?
> Ubuntu : 
```
sudo snap install lolcat-c
```
> Centos : (install snap with `sudo yum install -y snapd` if you don't have)
```
sudo snap install lolcat-c
```
- How to use ?
This command take the output from another command and adds rainbow coloring to it.
```
echo "Ubuntu > 2*Windows 11" | lolcat
```
or you can try that with the cmd **_sl_**
```
while true; do sl | lolcat ; done;
```
_Don't work with older version of lolcat._
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s087iib6v7q0jpd41p86.gif)


## 3. cmd **_cmatrix_** ⚡

- How to install ?
> Ubuntu : 
```
sudo apt install -y cmatrix
```
> Centos :
```
sudo yum install -y cmatrix
```
- How to use ?
```
cmatrix
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/onkc071snj9hh2w4cf1u.gif)


## 4. cmd **_aafire_** ⚡

- How to install ?
> Ubuntu : 
```
sudo apt install -y libaa-bin
```
> Centos :
```
sudo yum install -y aalib
```
- How to use ?
```
aafire
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qb5fklwgshz8s4rxm61j.gif)


## 5. cmd **_cowsay_** ⚡

- How to install ?
> Ubuntu : 
```
sudo apt install -y cowsay
```
> Centos :
```
sudo yum install -y cowsay
```
- How to use ?
```
cowsay I love DevOps | lolcat
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yxnzzh45wj0xrbhq4sh0.png)


## 6. cmd **_asciiquarium_** ⚡

- How to install ? (install snap with `sudo apt install -y snapd` in Ubuntu or `sudo yum install -y snapd` in Centos if you don't have)
> Ubuntu : 
```
snap install asciiquarium
```
> Centos :
```
snap install asciiquarium
```
- How to use ?
```
asciiquarium
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/en0yq1jq2a9131txyfa5.gif)


## 7. cmd **_figlet_** ⚡

- How to install ?
```
sudo snap install figlet
```
- How to use ?
```
figlet Linux is Fun
```
or with **_lolcat_**
```
echo -e "Don't touch \nmy Laptop" | figlet | lolcat
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xt5ot8hgzwf7dz9186uv.png)

> _**Don't forget to try that right now🤨!!!**_
UI vs UX
Published: 2022-04-10 14:25:48

If you have been curious about the difference between UI and UX, this article will help you in understanding the difference.

## User Interface (UI)

UI designers deal with the visual aspect of a product.

They are responsible for the look and feel of a website. They deal with things like typography, white space, and colors to make a website look good They focus on having a contrast between text and other elements on a page to ensure readability and accessibility. They think about the layout of the website like which is the best area to place a piece of text or an image or a button. They make designs for multiple screen sizes like laptops and mobiles. They integrate the brand's identity into the whole design by using brand colors and brand-specific graphics. They ensure that the design of the different pages is consistent.

## User Experience

UX designers are responsible for designing and optimizing the user experience of a product.

UX designers think about how to enhance a product and make it more user-friendly. They analyze whether interacting with the product is straightforward or not. Is the experience smooth or clunky? They map out and optimize the user journey which is all the possible ways a user can interact with a product. They take care of things like how many steps is it taking to do a particular task. They try to reduce complexity. They talk to users, see the analytics data, and critically think about ways to improve the experience of a product.

## Now, let's go over a few examples

### Example 1

Suppose you have a quotes website where you have curated the quotes from the best authors and celebrities in the world.

The UX designer discovers that what people often do is that they copy a quote by selecting the desired text manually and then send it to their friends. The UX designer proposes the addition of a copy button to allow users to copy the text with a button click. The UX designer came up with a solution to improve the user experience.

The UI designer will now think about where to place the copy button, what icon to use for it, and what should be the color for it.

### Example 2

You have a gaming news website

The UX designer discovers that people are coming to the signup page but only a small percentage of people finish signup. The designer investigates and finds that the signup form is long. It's asking for Full Name, Email, Password, Gender, Address, and Preferences. Users don't like this and don't signup. The designer proposes that we only ask for the full name, email, and password and after a user logs in, we can get the other details eventually.

Now, the UI designer makes the desired changes to the form and ensures that the design still looks good.

In this example also, the UX designer identified the area of improvement and proposed a solution for it. The UI designer made the necessary visual changes and ensured that the new design is consistent with the rest of the design.

So, that’s it in a nutshell. I hope you got an idea of the difference between UI and UX.
React SketchBoard DevLog #2 - Zoom, fix bugs and improve code quality.
Tags: webdev, javascript, typescript, react
Published: 2022-04-10 16:50:49

This is a second video in a series of making a react library for drawing stuff in a browser. We'll look at how to implement zooming, make it work with a mouse wheel, fix a couple of bugs and refactor the code a bit.

For the project I'm using react and typescript.

{% youtube d_ZU9tx9R_c  %}
#26 Guess The Output ???
Tags: javascript, webdev, programming, beginners
Published: 2022-04-10 16:41:08

⭐ Reply with correct answer & Bonus points for explanation ⚡

💡 Correct answer with detailed explanation will be updated in comments after 48 hours.


![#26 Guess The Output ??? ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w4v1qah0ujxad93dw7dj.png)


Code - 

```
function foo1() {
  return {
    bar: 'Hello'
  }
}

function foo2() {
  return
  {
    bar: 'World'
  }
}

console.log(foo1());
console.log(foo2());
```
EduCity
Tags: swift, discuss, ios, mobile
Published: 2022-04-10 16:34:58

So right now, I'm in the process of making an app for Apple (IOS and MacOS), with the programming language Swift.
It's been about a week since I started making it.
It's going have simple games for studying, like right now I have addition, multiplication and division.
The addition stage 3 page looks like this:

![addition stage 3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki1mypal0og89p9qqrn1.png)

Do you like how it looks so far?
Do you think it is a good idea?
Would you recommend it to people when I publish it on App Store?


![EduCity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysi1uhk65gmrrkzywpao.png)

Thanks for reading!
DeepDubber - Dub Videos in ANY language, in seconds, automatically! ✨
Tags: hackwithdg
Published: 2022-04-10 16:32:44

### Overview of My Submission
DeepDubber Dubs videos - Generates the subtitles, translates them and speaks them out


### Submission Category: 

Accessibility Advocates


### Link to Code on GitHub

{% github https://github.com/Dhravya/DeepDubber %}


### Additional Resources / Info

[Here's the output video](https://github.com/Dhravya/DeepDubber/blob/master/assets/output.mp4)

![Terminal styling powered by rich](https://github.com/Dhravya/DeepDubber/blob/master/assets/terminal.png?raw=true)
React-Native Vs React-JS
Published: 2022-04-10 16:10:32

As we all know that React-Native and ReactJS are part of Facebook and React-Native is used for Hybrid-App Development and ReactJS is used for Web-App Development.
Also, React-Native is same as ReactJS. But despite being similar, there are some dissimilarities as well  that every Developer should know.
So let's discuss these :

- 
 React-Native is a framework, while ReactJS is a JavaScript Library.


- 
 ReactJS renders HTML tags in its user interface. React components can include simple HTML tags.But React Native renders JSX in its user interface. React Native supports specific JSX tags which are used.

For Example  :
In ReactJS :

```
<div>
 <p>Happy Coding !!</p>
</div>
```
In React-Native :

```
<View>
<Text> Happy Coding !!</View>
</View>
```


- 
 In ReactJS, we can use CSS, SCSS, Bootstrap etc. but it React-Native we use StyleSheet Object like :

```
const style = StyleSheet.create({
 color :"orange",
 height: 100%,
})
```


- 
 ReactJS uses Virtual DOM, a tool that allows for easy interaction with DOM elements. But React-Native uses its API to render code for mobile applications.


- 
 ReactJS has comparatively higher security than React-Native. One of the reason is React-Native uses Android Shared Preferences for Android (which is not secure by default).


- 
 Companies that use ReactJS are Facebook, Netflix, Medium, Udemy etc. and companies that uses React-Native are Uber, Shopify, Instagram, Walmart etc.


- 
 In precised form :
ReactJS :

```
React = Vanilla JS + ES6 + HTML + CSS = JSX = Web Apps(Front end) 
```
React-Native :

```
React-Native = React (Vanilla JS + ES6 + Bridge between JS and Native code) + Native(iOS, Android) = Mobile Apps(Android, iOS, also supported web but have some limitations)

```