teleren/devto huggingface dataset:
🤩 JS(ES11) Optional chaining & Nullish Coalescing Operator
Published: 2021-03-13 00:23:17

> 📝 궁금한 모든 것을 기록합니다.
> 😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
> 🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

## 😍 Optional chaining 
```js
const avengers1 = {
  title: 'Tony Stark',
  pet:{
    cat: {
      name: 'Jarvis'
    }
  }
}; 

const avengers2 = {
  title: 'Captain America',
}; 


function printCat(person){
  console.log(person.pet.cat.name);
};

printCat(avengers1); // ??
printCat(avengers2); // ??
```
위와 같이 작성한다면 어떤 일이 일어날까? 
![](https://images.velog.io/images/gunwooko/post/132dc4a7-2ae6-47d8-96d6-90dd99134a04/js1.png)

두번째 함수 호출때에 에러가 발생하게 된다. 여기 문제를 해결하기 위해선 조건문을 사용할 수도 있고, 삼항연산자를 사용할 수도 있고, 또는 && 연산자를 사용해서 해결할 수도 있다. 그러나 이와 같이 해결하게 되면 가독성도 않좋고, 코드가 불필요하게 반복되는 것을 확인할 수 있다. 
```js
function printCat(person){
  console.log(person.pet && person.pet.cat && person.pet.cat.name);
};
printCat(avengers2); // undefined
```

그러나 이제 ES11의 새로운 기능인 Optional chaining를 활용하면 이렇게 직관적이고 짧은 코드로 문제를 해결할 수 있다. 🤩
```js
function printCat(person){
  console.log(person.pet?.cat?.name);
};
```

## 😎 Nullish Coalescing Operator 
OR(||)연산자를 보게되면 false, '', 0, null, undefined 등은 false로 간주되어진다.  
```js
// OR 연산자를 아래와 같이 사용하면 앞에 있는 값이 false인 경우 뒤의 값이 출력된다. 
const name = 'Hulk';
const userName = name || 'Guest';
console.log(userName); // Hulk 가 나온다. 

// 만일 null과 같은 falsy한 값이 할당되면, name의 값이 false이므로 'Guest'가 출력된다.
const name = null;
const userName = name || 'Guest';
console.log(userName); // Guest 가 나온다.
```

여기서 OR 연산자를 잘 이해하지 못하고 사용하면 다양한 문제가 발생할 수 있는데, 
```js
// 만일 사용자가 자신의 이름을 빈공백으로 등록하고 싶다면?
const name = '';
const userName = name || 'Guest';
console.log(userName); // Guest 가 나온다. 

// 만일 숫자 0을 등록하고 싶다면?
const num = 0;
const crimeRecord = num || 'Undefined';
console.log(crimeRecord); // Undefined 가 나온다.
```

이러한 문제를 예방하고 조금더 명확한 코드를 작성하고 싶다면 Nullish Coalescing Operator를 사용하면 된다. 😍
```js
// 만일 사용자가 자신의 이름을 빈공백으로 등록하고 싶다면?
const name = '';
const userName = name ?? 'Guest';
// name이란 변수에 값이 있다면 name을 사용하고, 없다면 'Guest'를 사용하자
console.log(userName); // '' 가 나온다. 

// 만일 숫자 0을 등록하고 싶다면?
const num = 0;
const crimeRecord = num ?? 'Undefined'; 
// num이란 변수가 값이 있다면 num을 사용하고, 없다면 'Undefined'를 사용하자
console.log(crimeRecord); // 0이 나온다.
```
milkway | The Intergalactic lab for milkshakes
Published: 2021-03-13 00:18:55

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

&nbsp;

Recently I've been studying Next.js and GraphQL with Node.js, and as usual I have built a project to put everything into practice. And for this project, I've built a Web App to explore and share Milkshake recipes, as we are always at home, let's cheer up with a nice cold drink 😋

On the Front-end, I used Server Side Rendering and Static Site Generation with Next.js, along with some other libraries like SWR to handle data fetching and to enable a great user experience out-of-the-box.

For the Back-end, I have a GraphQL API with Prisma ORM, running with a PostgreSQL database. I also used the TypeGraphQL framework, as I have Typescript in development mode.

Both repositories are available for any contribution, so send your pull request. I will sure review and merge it 😄

Thank you for your time. 

Happy Coding! 

[milkway](https://github.com/vinisaveg/milkway)

[milkway-api](https://github.com/vinisaveg/milkway-api)

[Design on Figma](https://www.figma.com/file/rL0HWh1ErucMwH86l1W4wp/milkway?node-id=0%3A1)
Roll with the changes
Tags: rollback, cicd, release, devops
Published: 2021-03-13 11:49:49

---
title: Roll with the changes
published: true
date: 2021-03-13 00:00:00 UTC
tags: rollback, cicd, release, devops
canonical_url: https://jhall.io/archive/2021/03/13/roll-with-the-changes/
---

In my dreams, every new feature I develop is amazing. Customers love it, and they receive great value from its use.

Yesterday I explained why [rolling back is dangerous](https://jhall.io/archive/2021/03/12/the-two-big-dangers-of-rolling-back/) in these situations. Today I present you with my preferred alternative:

**Rolling forward**

The idea is fairly simple. When a critical failure occurs, rather than rolling back to a previously-built version of the software, we revert the broken change in git (or other VCS), then build and deploy a new version of the software.

In such a case, our scenario looks something like:

1. Service version 1.2.4 is released to production. A serious bug is discovered.
2. The broken commit or pull request is immediately reverted in git, then a new version, 1.2.5 (which is likely functionally identical to 1.2.3) is built and deployed to production.
3. Ongoing work by other developers or teams continues as usual, unhindered, and versions 1.2.6, 1.2.7, etc, are released.
4. Eventually the bug fix is applied, and version 1.2.8 (or 1.3.79 or whatever) is released.

With this approach, the project continues to enjoy the [benefits of continous deployment](https://jhall.io/posts/benefits-of-cd/) even while solving a production-critical bug. Of course, this assumes that the team is using [_real_ continuous integration](https://jhall.io/whatisci), and continuous deployment—if your team isn’t, you should start considering that change first!

* * *

If this is something you and your team could benefit from, you’ll find my video course [_Ship better code faster_](https://jhall.io/sbcf) valuable. Use coupon code **DAILYMARCH** to save 50% through the end of March.
How to disable an input tag using HTML?
Tags: html
Published: 2021-03-13 00:00:00

---
  title: How to disable an input tag using HTML?
  published: true
  tags: HTML5
  date: Sat Mar 13 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/disable-input-field-html
  cover_image: https://melvingeorge.me/_next/static/images/main-e48b8087c02e7df0463e9a5445087623.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/disable-input-field-html)
  
To disable an input field, you can pass an attribute called `disabled` to the tag in HTML.

```html
<!-- Disable `Input` Tag in HTML -->
<input type="text" disabled />
```

- Adding the `disabled` attribute to the `input` tag will restrict the user to enter text or content to the `input` and will have a grayed-out color unless you specify a color for the disabled state in CSS.

For example, let's set a value in the `input` tag using the `value` attribute and then disable the input tag.

```html
<input type="text" value="I'm a value which can only be copied" disabled />
```

That's all! 😃

See the above code live in [JSBin](https://jsbin.com/yejiniqosi/2/edit?html,output)

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

---
Gamedev.js Jam 2021 starts next month
Tags: gamedev, competition, jam, itchio
Published: 2021-03-13 15:52:11

---
title: Gamedev.js Jam 2021 starts next month
published: true
date: 2021-03-13 00:00:00 UTC
tags: gamedev, competition, jam, itchio
canonical_url: https://enclavegames.com/blog/gamedevjs-jam-2021/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xwu3qrbnz3441ob65oei.png
---

We’re starting the countdown to [Gamedev.js Jam 2021](https://gamedevjs.com/jam/2021/) - an online competition for HTML5 game developers, running for thirteen days between April 13th and 26th. It’s the second edition after the [Gamedev.js Jam 2020](https://end3r.com/blog/2020/05/gamedev-js-jam-2020-post-mortem/) hosted last year.

The [first Jam](https://itch.io/jam/gamedevjs-2020) was organized and [announced](https://gamedevjs.com/competitions/join-gamedev-js-jam-2020/) only a few days before the actual start, yet we managed to get **220 participants** submitting **44 entries** , and an incredible amount of **683 votes** in the judging process. [This year’s edition](https://gamedevjs.com/jam/2021/) preparations are beginning right now, one month before the start.

We will announce the **prizes** in the coming days, and there might also be some new, extra **categories** , or **challenges** - make sure to [join the Jam on Itch.io](https://itch.io/jam/gamedevjs-2021), follow the competition on [Twitter](https://twitter.com/Gamedevjs), and visit [our Discord server](https://discord.gg/URWvCwv) to not miss a thing!
Helper modules are okay
Tags: apidesigne, codequality
Published: 2021-03-12 23:41:04

A module containing a loose collection of mostly unrelated functions, that would be my definition of a Helper module. The name `helpers` kind of gives it away, it shows we weren't able to find a terse expression of the module's purpose.

Maybe their haphazard construction makes helper modules a bit unlikeable. They don't have great designs. But I like them anyway, because I think they fill an important niche in the wider ecosystem that is a codebase. They allow us to remove duplication without doing any api design work, at least not yet.

Api design is hard ([I wrote about this before][api-design-for-code-quality]), and doing a good job requires plenty of example usages, to test our design as we create it. When we first spot some duplication it is unlikely to already be so pervasive that enough data for a good design exists. Given insufficient data, [duplication is better than a bad abstraction][bad-abstraction]. And after duplication, adding a helper might be the next least-worst option.

What happens next depends on usage of the helper. If it grows we might at some point design that abstraction using all the example use cases we now have. If usages remain constant we'll likely never look at the helper again. And if usage drops to a single callsite we can move the helper back to the module where it is called. One fewer helper, and one fewer layer of indirection!

[api-design-for-code-quality]: https://dev.to/jwoudenberg/api-design-for-code-quality-4aml
[bad-abstraction]: https://sandimetz.com/blog/2016/1/20/the-wrong-abstraction
Testing With Elixir Part 0
Tags: elixir, testing
Published: 2021-03-12 23:13:43

This is the first of what I hope will be many posts on testing in Elixir.

This is part 0, and not Elixir-specific. Just the basics of testing.

### Given, When, Then

Every (unit) test should be able to be broken down into these parts.

1. **Given** some context or situation
2. **When** I invoke the function I am trying to test
3. **Then** I get the expected result

Let's take a trivial example. I am writing a function to capitalize every other letter of a string.

```elixir
def spongebob_case(string) do
 # ???
end
```

Our **given** is the various cases we are trying to put under test.

```elixir
cases = [
  "lorem ipsum dolor sit amet, consectetur adipiscing elit",
  "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
  "Ut enim ad minim veniam",
  "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
]
```

Our **when** is invoking the function with each case. We store this into a variable called _actual_.

```elixir
actual = Enum.map(cases, fn kase ->
  spongebob_case(kase)
end)
```

Our **then** is making the assertion against our expected result

```elixir
expected = [
  "lOrEm iPsUm dOlOr sIt aMeT, cOnSeCtEtUr aDiPiScInG ElIt",
  "sEd dO EiUsMoD TeMpOr iNcIdIdUnT Ut lAbOrE Et dOlOrE MaGnA AlIqUa"
  "uT EnIm aD MiNiM VeNiAm",
  "qUiS NoStRuD ExErCiTaTiOn uLlAmCo lAbOrIs nIsI Ut aLiQuIp eX Ea cOmMoDo cOnSeQuAt"
]

assert actual == expected
```

The full test looks like this:

```elixir
defmodule SpongebobTest do
  use ExUnit.Case
  import SpongeBob, only: [spongebob_case: 1]

  test "spongebob_case/1 makes every letter other letter upper case" do
    cases = [
      "lorem ipsum dolor sit amet, consectetur adipiscing elit",
      "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua",
      "Ut enim ad minim veniam",
      "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat"
    ]

    actual =
      Enum.map(cases, fn kase ->
        spongebob_case(kase)
      end)

    assert actual == [
             "lOrEm iPsUm dOlOr sIt aMeT, cOnSeCtEtUr aDiPiScInG ElIt",
             "sEd dO EiUsMoD TeMpOr iNcIdIdUnT Ut lAbOrE Et dOlOrE MaGnA AlIqUa",
             "uT EnIm aD MiNiM VeNiAm",
             "qUiS NoStRuD ExErCiTaTiOn uLlAmCo lAbOrIs nIsI Ut aLiQuIp eX Ea cOmMoDo cOnSeQuAt"
           ]
  end
end
```

Generally we want to start with 1 simple case, then add more cases, (including edge-cases) as we build out the actual implementation.

Edge cases in this example would be:

1. What if there is an integer in the input? an emoji? You can't upper case those.
2. What if the input isn't a string?

Exactly how you handle those edge-cases is usually a product question. As the engineer writing tests, however, it is important that you think about them, and make sure that they are under test.

In future parts, we will talk about how to test GenServers/Processes. Dynamically generating tests, as well as looking at other assertions.

Thanks for reading.
How to Deploy Docsify to China?
Tags: docsify, javascript, devops, china
Published: 2021-03-12 23:11:04

---
canonical_url: https://www.21cloudbox.com/solutions/how-to-deploy-docsify-project-in-production-server.html
---
# What is Docsify?
Docsify is a Javascript-based static site generator.  It is widely used with markdown document generation sites.

21YunBox provides a very simple Docsify deployment method within China. You can deploy on the 21YunBox in a **static site** environment.

# How to Deploy Docsify in China?
1. Register as a [21YunBox member](https://www.21yunbox.com/u/signup/)  
1. Fork [Docsify example](https://gitee.com/eryiyunbox-examples/hello-docsify) on Gitee
2. Create a **cloud service** on 21YunBox, and allow 21YunBox to access your code base
3. Create with the following configuration


| Environment       | `Static Site`   |
| ----------------- | :-------------: |
| Build command     |                 |
| Release Directory | **`./docs`**    |

# Why Choose 21YunBox?

> 21YunBox is a Cloud Service Platform based out of Beijing, China. We specialize in modern web hosting and automation solutions. This enables you to set up websites instantly.  

> **Have questions about hosting and deploying in China? Let us know, we are happy to help!** <21YunBox@gmail.com> 

To learn about the differences between 21YunBox and these foreign (outside of China) cloud service platforms, please refer to:

* [21YunBox vs Heroku](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-heroku-in-china.html)
* [21YunBox vs Netlify](https://launch-in-china.21yunbox.com/blog/solutions/alternatives-to-netlify-in-china.html)
* [21YunBox vs Vercel](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-vercel-in-china.html)
* [21YunBox vs Gatsby Cloud](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-gatsby-cloud-in-china.html)
* [21YunBox vs Github Pages](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-github-pages-in-china.html)
* [21YunBox vs Surge.sh](https://launch-in-china.21yunbox.com/solutions/how-to-speed-up-surgesh-in-china.html)
* [Compare in terms of function and price: 21YunBox vs Heroku, Netlify, Vercel](https://www.21yunbox.com/compare-others/)

<br>
*This article's content originated [here](https://launch-in-china.21yunbox.com/solutions/how-to-deploy-docsify-project-in-production-server.html)*

*For additional detail and future modifications, refer the original post.*
Why isn't my Preprocessor Macro working?
Published: 2021-03-12 22:53:32

We have a hybrid Objective-C/Swift app.  All of the new classes are written in Swift, but we still update the Objective-C code for bug fixes and feature enhancements.  In our app, we define Preprocessor Macros and use it for build configuration specific logic e.g. `#if DEBUG`.  

Recently, we had to add support an enterprise build in our app.  An enterprise build is a build where the IPA is stored on the company's internal secure network and served from there.  I added a new configuration, "Enterprise" to our app.  I added the macro under "Apple Clang - Preprocessing" --> "PreProcessor Macros"
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cic6xo1f7365d0ulj4f.png)

However, after making this change and adding the logic to our Swift code nothing happened.  I spent hours trying to see if there was any issue with our logic.  Was there any typos in the variable name?  Had I set the macro in the wrong configuration? Was it a cache issue?  The answer to all these questions were no.  It turns out that the Swift compiler doesn't include a preprocessor.  It takes advantage of compile-time attributes to accomplish the same functionality. We must define them under "Swift Compiler - Custom Flags" --> "Active Compilation Conditions".
![alt text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1tsac06rhvz8bscntnjb.png)
 
After adding the the custom flags, my code worked as expected.  One thing to keep in mind is that if you have both Objective-C and Swift classes relying on a macro, you will need to add it to both places.
Day 328 : Get Up
Tags: hiphop, code, coding, lifelongdev
Published: 2021-03-12 22:45:43

_liner notes_:
- Professional : Pretty chill day. Had a meeting with my manager's manager. He was the one who interviewed and hired me. He's going to be leaving to build a whole other Developer Relations from scratch at another company. It was good to catch up with him and see what he'll be doing. I'm sure he will spectacularly there! Basically rest of the day worked on a demo application for an upcoming blog post and presentation.

- Personal : Last night, I went through a bunch of tracks for the radio show. After that, I worked on the admin dashboard.

![Overhead view of a beach with the ocean and waves at the top, below that the beach and below that a lot of palm trees.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f07soq35z309ye1qe187.jpg)

Got a couple of more things I want to button up on my demo project. Then get up and take another lap around the park. Head to my spot and work on the radio show for tomorrow. Probably end the night with some coding on my side project. Can't believe it's Friday!

Have a great weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube IClkH_lFtiI %}
Using sessions in a stateless protocol
Tags: ruby, sinatra, sessions, stateless
Published: 2021-03-12 22:36:37

So in building my first web application with Sinatra, I quickly realized that enabling sessions has many more use cases than just handing out cookies and signing users in and out. After all, the HTTP is a stateless protocol and that means sometimes you desperately need a way to pass arguments between different routes when it makes sense to do so. Enter, the session hash.

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

So you begin by enabling sessions and setting a session secret to keep our session data safe (although sessions will still work without a session secret, it's normally a good idea to use a randomly generated string of characters generally between 24 to 32 bytes long in order to help prevent malicious attacks).

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

Once you've done that, the most common practical use is for handling the login/logout process of a user. Once we've authenticated a user, we log that person in by creating a key inside the session hash and storing that user's ID as its value.

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

This is important because each time we need to check whether a person is logged in, we can simply see whether we can find that user in the database based on the user ID that's stored inside the session hash.

But just because that's what it's most commonly used for it doesn't -- or shouldn't -- limit how we use our session hash.

For instance, perhaps you need to store foreign keys and use that data when necessary to create associations where needed:

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

Or perhaps you need to store a message to show the user that an action was properly executed:

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

So you see, it doesn't really matter WHAT you store. Whatever information you need persisted between each request can be stored in the session hash and utilized accordingly. This opens up and provides numerous ways in which the application can function more flexibly even as we navigate through a stateless protocol.
CYBER-ATTAQUES – Quelles sont les attaques informatiques les plus fréquentes ?

Tags: cyberattaque, cybersecurite, bestpractices, staysafe
Published: 2021-03-12 22:16:05

Aujourd’hui, le numérique fait partie intégrante de nos vies personnelles et professionnelles.
De notre tablette à notre ordinateur 💻, en passant par nos smartphones 📱, personne n’est à l’abri d’une cyber-attaques 🕵🏼‍♀️ qui peut avoir des conséquences graves et parfois irréversibles.
[Article Blog Digicactus.com](https://digicactus.com/cyber-attaques-quelles-sont-les-attaques-informatiques-les-plus-frequentes/)
Le but de cet article est d’une part de vous informer sur les types d’attaques possibles. D’autre part, vous donner quelques bonnes pratiques applicables au sein de votre entreprise ou dans votre vie personnelle afin de réduire les risques d'attaque et assurer votre cyber-sécurité 🛡️ .
#cyberattaque #cybersecurite #bestpractices #staysafe #hackers #anssi
Video: How Would You Explain DevRel To Your Grandparents?
Tags: devrel
Published: 2021-03-15 17:18:20

---
title: Video: How Would You Explain DevRel To Your Grandparents?
published: true
date: 2021-03-12 21:56:50 UTC
tags: DevRel
canonical_url: https://maxkatz.org/2021/03/12/video-how-would-you-explain-devrel-to-your-grandparents/
---

Someone asked me this question recently:

**How would you explain what you do to your grandparents?**

I thought this is a great question. It can also be rephrased as:

**How would you explain DevRel to your grandparents?**

You will find many definitions for Developer Relations. Some of them are long or even full articles. What I like about this question is that the answer needs to be clear and short.

Check out my answer in this video:

{% youtube qietoV5sd-s %}

This video is based on [this blog post](https://dev.to/maxkatz/how-would-you-explain-devrel-to-your-grandparents-4014).
5 Python Code Snippets For You
Tags: python, freebies, snippets
Published: 2021-03-12 21:43:36

Python represents one of the most popular languages that many people use it in data science and machine learning, web development, scripting, automation, etc.
Part of the reason for this popularity is its simplicity and easiness to learn it.

In this article, we will briefly see 30 short code snippets that you can understand and learn in 30 seconds or less.

**All unique**
The following method checks whether the given list has duplicate elements. It uses the property of set() which removes duplicate elements from the list.

```python
def all_unique(lst):
    return len(lst) == len(set(lst))


x = [1,1,2,2,3,2,3,4,5,6]
y = [1,2,3,4,5]
all_unique(x) # False
all_unique(y) # True
```

**Anagrams**
This method can be used to check if two strings are anagrams. An anagram is a word or phrase formed by rearranging the letters of a different word or phrase, typically using all the original letters exactly once.

```python
from collections import Counter

def anagram(first, second):
    return Counter(first) == Counter(second)


anagram("abcd3", "3acdb") # True
```

**Memory**
This snippet can be used to check the memory usage of an object.

```python
import sys 

variable = 30 
print(sys.getsizeof(variable))
```

**Byte size**
This method returns the length of a string in bytes.

```python
def byte_size(string):
    return(len(string.encode('utf-8')))
    
    
byte_size('😀')
byte_size('Hello World')
```

**Print a string N times**
This snippet can be used to print a string n times without having to use loops to do it.

```python
n = 2
s ="Programming"

print(s * n) # ProgrammingProgramming
```