teleren/devto huggingface dataset:
It's 2021 and I still don't know the best way to write this in TypeScript.
Tags: typescript, javascript
Published: 2021-02-10 07:27:53

Below I have three *things* they're not the same, but they're not that different. They all actually have their own set of pros and cons. I wish it was actually much simpler to choose between them, and there was one way to do it that had the simplicity and brevity all in one. 

If you know a **better** way to describe this data, please do tell.

# Function

Functional and simple, but kind of hard to create a return type, unless you want that defined separately or use `ReturnType<typeof person>`. 😢

```ts
const person = (name: string) => {
  const initial = name.charAt(0);
  const length = name.length;
  const initialRegex = new RegExp(initial, 'g');
  const initialOccurance = (name.match(initialRegex) || []).length;
  return { initial, length, initialRegex, initialOccurance};
}
```

## Class With Getters

Class based approach with getters, in my opinion the most elegant because it's less redundant, no repetition of the names to export as above. However the caveat (or benefit) of not running everything at runtime is interesting, meaning, at initialization, no properties are processed, however they're not cached either, so everytime you run `this.initial` it has to run that code again and again.


```ts
class Person {
  constructor (public name: string) {}
  get initial () {
    return this.name.charAt(0);
  }
  get initialRegex () {
    return new RegExp(this.initial, 'g');
  }
  get length () {
    return this.initial.length
  }
  get initialOccurance () {
    return (this.name.match(this.initialRegex) || []).length;
  }
}
```

This isn't actually a fair contender because there's no way to get an object with all of these properties. You'd need to add a `.toJSON()` method repetitively building up the properties again.

```js
  toJSON() {
    return {
      name: this.name,
      initial: this.initial,
      length: this.length,
      initialRegex: this.initialRegex
    }  
  }
```

## Class with Initialized Properties

This fixes the caching issue by having all the properties initialized with the constructor, but we get the repetition of having to define the types in the class now. 🙄

```ts
class Person {
  initial: string;
  length: number;
  initialRegex: RegExp;
  initialOccurance: number;
  constructor (public name: string) {
    this.initial = name.charAt(0);
    this.length = name.length;
    this.initialRegex = new RegExp(this.initial, 'g');
    this.initialOccurance = (name.match(this.initialRegex) || []).length;
  }
}
```

Why so many options? Why are none of them good?
TIL some Cocos Creator
Tags: todayilearned, gamedev, cocos
Published: 2021-02-10 07:23:14

2021-02-09

I read this article today: [Occlusion Culling in Unity](https://gamasutra.com/blogs/RubenTorresBonet/20210208/377166/How_to_Use_Occlusion_Culling_in_Unity__The_Sneaky_Way.php). Good write-up. 

I also tinkered a bit with Cocos Creator today. It's hit version 3 and the hype for its 3D features is strong so I took a look out of curiosity. 
![Cocos Editor](https://dev-to-uploads.s3.amazonaws.com/i/xd9ob4bwun376zslfd9q.png)
The setup should feel familiar if you've used Unity. You have the scene hierarchy, asset library, property inspector, scene view and other typical sub-views you might find in similar game editors.

One of the key things I learned rather quickly was if you enter Animation Editing mode, you must close it out or you won't be able to edit your scene.
![Save/close buttons in cocos animation mode](https://dev-to-uploads.s3.amazonaws.com/i/8n196lnpy63npks0t5x1.png)
CSS: How to make a cool border animation 
Tags: css, tutorial, webdev, codequality
Published: 2021-02-10 07:22:22

`Hello World!` New episode of the series  - A CSS/JS trick in 5 minutes. 
I did [an article about CSS slow border animations](https://dev.to/devlorenzo/css-how-to-make-a-border-animation-1kn) and I wanted to do a follow-up. I will now explain to you how to do a more engaging and advanced border animation 

--- 

We do not need to excessively style our container, we just give it padding, a border, and if you want (recommended) a border-radius. You can after insert everything you need in the div (or make it act as a button):
```
#container {
  border-radius: 10px;
  padding: 35px;
  width: 380px;
  overflow: hidden;
  padding: 2rem;
  animation: borderSpin 5s ease infinite;
```

Inside of container style, we add a :after and :before.
```
 &::before {
    content: "";
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #399953;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#399953, #399953),
      linear-gradient(#fbb300, #fbb300), linear-gradient(#d53e33, #d53e33),
      linear-gradient(#377af5, #377af5);
    animation: rotate 4s linear infinite;
  }

  &::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 6px;
    top: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 5px;
  }
}
```
That's a lot of things, just notice that we are giving a colorful background to the container and with the animation we will make the border moving. You can play around with background size, position, colors, calc, radius... 

---
  
In reality the animation part is very easy:
```
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
```
We are just rotating the background. 

---
I have done 8 animation examples for you (**open the link for a complete experience**). 

[Live preview:](https://codepen.io/DevLorenzo/pen/ExgpvJM) - Check quick animation part 
{% codepen https://codepen.io/DevLorenzo/pen/ExgpvJM %}

---

Hope this helped and thanks for reading!

> Please smash that like button to make me understand that you want the series to continue :)

[Check this article about how to write CSS like a pro!](https://dev.to/devlorenzo/how-to-write-css-like-a-pro-4glj)

---

## **[Subscribe to my Newsletter!](https://chipper-motivator-3112.ck.page/05710ea3d3)**
A loooong, and fun, weekly recap for you 
Free PDF version of my articles
Highly customizable inbox
That's --> free <-- and you help me!
How to avoid document.write from this code?
Tags: javascript
Published: 2021-02-10 07:22:07

<script language="Javascript">
        var banglaDigit = {'0': '০','1': '১','2': '২','3': '৩','4': '৪','5': '৫','6': '৬','7': '৭','8': '৮','9': '৯'};
        var dayName = new Array("রবিবার", "সোমবার", "মঙ্গলবার", "বুধবার", "বৃহস্পতিবার", "শুক্রবার", "শনিবার")

        var monName = new Array("জানুয়ারী", "ফেব্রুয়ারী", "মার্চ", "এপ্রিল", "মে", "জুন", "জুলাই", "আগষ্ট",
            "সেপ্টেম্বর", "অক্টোবর", "নভেম্বর", "ডিসেম্বর")

        var now = new Date;

        document.write("আজ " + dayName[now.getDay()] + ", " + now.getDate().toString().replace(/[0123456789]/g, function(s) {
                    return banglaDigit[s];
                }) + " " + monName[now.getMonth()] + " " + now
            .getFullYear().toString().replace(/[0123456789]/g, function(s) {
                    return banglaDigit[s];
                }) + "ইং ")
    
        date = new Date();
        hours = date.getHours();
        mins = date.getMinutes();
        secs = date.getSeconds();

        shift='';
        if (hours == 0) {
            shift = " AM";
            hours = 12
        } else if (hours <= 3) {
            shift = " AM"
        } else if (hours == 12) {
            shift = " PM";
            hours = 12
        } else if (hours >= 13) {
            shift = " PM";
            hours -= 12
        }

        if (mins <= 9) {
            mins = "0" + mins
        }

        document.write("* সময়ঃ " + hours.toString().replace(/[0123456789]/g, function(s) {
                    return banglaDigit[s];
                }) + " টা :" + mins.toString().replace(/[0123456789]/g, function(s) {
                    return banglaDigit[s];
                }) + " মিনিট *");
               

    </script>
Liman Geliştirme Modülü
Tags: liman, linux, development, vscode
Published: 2021-02-10 07:21:52

Liman MYS'nin yapısı gereği eklenti geliştirmek için yüklü olan sunucuda kod yazılması gerekmektedir. Bu nedenden dolayı birçoğumuz kod geliştirirken Visual Studio Code ile birlikte Remote SSH eklentisini kullanmaktayız. 
![image](https://dev-to-uploads.s3.amazonaws.com/i/ouudjum0ye482316ntf5.png)
 
Fakat, bu yeni başlayanlar için bağlantı kurarken vb durumlarda sorun yaratabilmekte. Bu sebeple, Liman MYS'ye yeni bir modül geliştirdim. Bu modül sayesinde Visual Studio Code'u tamamen tarayıcı üzerinden kullanarak olası tüm problemlerden kaçınabilirsiniz.

![image](https://dev-to-uploads.s3.amazonaws.com/i/xeked5wwf61q6woiov62.png)


Modülü kurmak için yalnızca aşağıdaki komutu çalıştırmanız yeterli olacaktır, çalışacak betik ile Code Server paketi indirilip yüklenecek ve Liman MYS tarafındaki gerekli ayarlamalar yapılacaktır.

```
sudo /bin/bash -c "$(curl -fsSL https://git.io/Jt2pK)"
```

Kaynak Kodu:

https://github.com/mertcelen/liman-gelistirme-modulu
Deploy stacks in parallel with AWS CDK Pipelines
Tags: cdk, aws, cloud
Published: 2021-12-09 04:27:28

---
title: Deploy stacks in parallel with AWS CDK Pipelines
published: true
date: 2021-02-10 07:04:24 UTC
tags: cdk, aws, cloud
canonical_url: https://towardsthecloud.com/aws-cdk-pipelines-parallel-deploy
---

The AWS CDK Pipelines is a higher level [construct](https://docs.aws.amazon.com/cdk/api/latest/docs/@aws-cdk_pipelines.CdkPipeline.html) that creates a customized AWS Codepipeline specifically for deploying CDK stacks on AWS Accounts and automatically manages the following:

- Stack dependency order.
- Asset publishing.
- Keeping the pipeline up-to-date as the CDK apps change.
- Using stack outputs later on in the pipeline.

The following [tutorial](https://docs.aws.amazon.com/cdk/latest/guide/cdk_pipeline.html) from the AWS docs helps you with setting up an AWS CDK Pipeline. The default CDK Pipeline contains example code to deploy a stack on a single stage.

**But if you have multiple test accounts, then it would be nice to add them to the same stage in AWS CDK Pipeline.** To do that, you first have to create a stage and add the first account that you want to deploy an application for:

```
    // Create a stage called Test
    const testStage = pipeline.addApplicationStage(
      new PipelineStage(this, "Test", {
        // Deploy to test account
        env: {
          account: process.env.TEST_AWS_ACCOUNT, 
          region: process.env.TEST_AWS_REGION,
        },
        vpcCidr: process.env.TEST_VPC_CIDR,
      })
    );

```

For the deployment of the first application, it does two actions in the stage; "prepare" and "deploy". These are linked to "RunOrder: 1" and "RunOrder: 2" respectively. Next, we need to add the second application that we want to add to the "Test" stage. But before we do we need to update the "RunOrder", otherwise, the actions that are linked to the second application will be triggered sequentially.

```
    // By subtracting nextSequentialRunOrder with -2 we reset the RunOrder back to 1
    testStage.nextSequentialRunOrder(-2);
    testStage.addApplication(
      new PipelineTGStage(this, "Test-tgw", {
        // Deploy to test transit gateway
        env: {
          account: process.env.TEST_TG_AWS_ACCOUNT,
          region: process.env.TEST_TG_AWS_REGION,
        },
      })
    );

```

If we commit the code it will update the CDK Pipelines automatically and the updated stage has two simultaneous stack deploys now:

![AWS Console Codepipeline stage with multiple actions (stacks)](https://cdn.hashnode.com/res/hashnode/image/upload/v1612471741494/xqczxi3OP.jpeg)

* * *

👋 **Enjoyed this article?** Reach out in the comments below or on [Twitter](https://twitter.com/dannysteenman) to let me know what you think of it.

If you found some **value** in reading this, please consider showing your support by [sponsoring me](https://towardsthecloud.com/sponsor). Thanks to your support, I'm able to continue doing what I enjoy the most, which is sharing my learnings with the Cloud Community.
API Testing using vREST NG - How to set up a project
Tags: testing, api, apitesting, vrestng
Published: 2021-02-10 07:04:20

Learn how you may set up a project in the vREST NG Application. And stay tuned to our video series on API Testing using vREST NG.

Video Link: https://youtu.be/rJVEH83Y6ts

Playlist: https://youtube.com/playlist?list=PLmua155_WrDzt1AbB6iV5Lsw_Z7QrzZZ0

Try the vREST NG Application today.

If you found the video helpful then please share it with your friends and colleagues.
Weekly web development resources #61
Tags: weekly, webdev
Published: 2021-02-10 06:56:15



______

##[Free Animated Headers](https://www.finisher.co/lab/header/)
[![Free Animated Headers](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/animated-headers.jpg)](https://www.finisher.co/lab/header/)
A generator for beautiful, animated headers with gradients.

______

##[Archivy](https://archivy.github.io/)
[![Archivy](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/archivy.jpg)](https://archivy.github.io/)
A self-hosted knowledge repository that allows you to preserve content that contributes to your own searchable and extensible wiki.

______

##[SVG Shape Generator](https://www.softr.io/tools/svg-shape-generator)
[![SVG Shape Generator](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/svg-blog-gen.jpg)](https://www.softr.io/tools/svg-shape-generator)
A free SVG shape generator to create SVG blob shapes for your web design with gradient, complexity levels, and more!

______

##[The Complete Guide to Centering in CSS](https://moderncss.dev/complete-guide-to-centering-in-css/)
[![The Complete Guide to Centering in CSS](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/css-center.jpg)](https://moderncss.dev/complete-guide-to-centering-in-css/)
An article about centering in CSS using grid, flexbox, and classic block element layout.

______

##[Free JavaScript Resources](https://www.java5cript.com/)
[![Free JavaScript Resources](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/java5cript.jpg)](https://www.java5cript.com/)
A collection of the latest and up to date resources to learn JavaScript.

______

##[SVG Crop](https://svgcrop.com/)
[![SVG Crop](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/svg-crop.jpg)](https://svgcrop.com/)
A tool to remove blank space from around any SVG instantly.

______

##[CSS Stripes Generator](https://stripesgenerator.com/)
[![CSS Stripes Generator](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/css-stripes.jpg)](https://stripesgenerator.com/)
A generator to create striped backgrounds using only CSS.

______

##[Akar Icons](https://akaricons.com/)
[![Akar Icons](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/akar.jpg)](https://akaricons.com/)
A rounded icon library made for designers and developers.

______

##[React Upload Box](https://cheersmas.github.io/react-upload-box)
[![React Upload Box](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/react-upload.jpg)](https://cheersmas.github.io/react-upload-box)
A minimal Upload component for React.

______

##[Windows 10 calendar effect CSS](https://codepen.io/gubb/pen/PdZqKy)
[![Windows 10 calendar effect CSS](https://wwebdev-images.s3.eu-central-1.amazonaws.com/content/weekly/61/css-calendar.jpg)](https://codepen.io/gubb/pen/PdZqKy)
A codepen for a cool hover effect that looks like the Windows 10 calendar.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Creating a Simple NavBar in React Using Material UI
Tags: react, javascript, webdev, codenewbie
Published: 2021-02-10 06:24:48

In the following 20 minutes video tutorial, you will learn how to `install material-ui` in your react app, `create a simple navbar`, `use makeStyles hook` for custom CSS styles, and more...

Enjoy and support my channel by subscribing 😎👇

{% youtube JN2iCm5OJ3o %}
JS Test #9: Promise.reject + try/catch
Tags: beginners, javascript, codenewbie
Published: 2021-02-10 05:29:36

Will we catch the error in the catch block?	

<!--more-->

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

Regular `try/catch` blocks only catch errors that appear in the synchronous code.

As the `Promise` in the second line doesn’t have its own asynchronous `.catch` block, the rejection will be left unhandled.

An `UnhandledPromiseRejectionWarning` will be raised and the code inside of the regular `catch` block will not be executed.

---

**ANSWER**: The error will not be caught and the message `the error was caught!` will NOT be logged to the console.
Feature Driven Development in SDLC, Feature Driven Development Roles.
Tags: beginners, testing, devops, tutorial
Published: 2021-02-10 05:25:56

What is **Feature Driven Development**?

FDD is an agile software development process. FDD uses a short-iteration model. Along with other industry-recognized best practices, FDD **combines key benefits of other common agile methods. To easily scale to much larger projects and teams, FDD was developed**.

What is a **Feature**?

Limited function explained **in terms valued by the customer**. FDD's **user requirements form**. The characteristics are "small" in the sense that it **will take no more than two weeks to complete them**.
Characteristics that seem to take longer are to be broken up into a series of smaller characteristics.
Note: **The limit is two weeks, with most features taking far less time (1 - 5 days)**.

*Feature naming template*: 
*Action + the result + by/for/of/to + a(n) + object*.

Examples:
1. Calculate the total of a sale.
2. Validate the password of a user.
3. Authorize the sales transaction of a customer.

**Feature Driven Development Roles**:

Class Ownership: Class owner **allocated to a particular developer**. Class owner **responsible for all modifications to new features implementation**.

Collective Ownership: Any developer can change any artifact at any moment, solving the deadlock issue. Class Ownership **does not mean exclusivity, nor liability alone**.

**FDD Primary Roles**:
*Project Manager, Chief Architect, Development Manager, Domain Experts, Class Owners, Chief Programmers.*

**FDD Supporting Roles:**
*Domain Manager, Release Manager, Build Engineer, System Administrator, Tester, Deployer, Technical Writer*.
How to handle user variable in a shell/bash script
Tags: howto, bash, shell, todayilearned
Published: 2021-02-10 14:33:57

---
title: How to handle user variable in a shell/bash script
published: true
date: 2021-02-10 05:00:00 UTC
tags: Howto,Bash,shell,todayIlearned
canonical_url: https://10xlearner.com/2021/02/10/how-to-handle-user-variable-in-a-shell-bash-script/
---

Hello ! I’m Xavier Jouvenot and in this small post, we are going to see how to handle user variable in a shell/bash script.

_Self promotion_: You can find other articles on my [website](www.10xlearner.com) 😉

## Problematic

When creating some shell scripts, you may want to have some parameters accessible to the user, so that he could either pass some inputs to your script, or specify some elements for which you will have set some default value.

There are several ways to do it, but we are going to see the simplest and most powerful solution to me. Hopefully, you will find it convenient too 😉

Let’s dive right in the shell script and see what defining a user variable looks like:

```sh
[-n "$VARIABLE"] || VARIABLE=DEFAULT_VALUE; 

# Rest of the script ...
```

Even if it only take one line, a lot of things happen here. Let’s take a little time to explain exactly what 🙂
In the first part of this line, `[-n "$VARIABLE"]`, we check if VARIABLE is _not empty_. Then, with the operator `||` we indicate that we want to do something if the previous condition is false, which means we want to do something if VARIABLE is not _not empty_, or, if you remove the double negation for clarity, wa want to do something is the variable is empty. And finally, we declare want we want to do in that case, which is to set VARIABLE to the default value that we specified. 😉

Now, all we need is to pass a value to the variable like that:

```sh
script.sh # uses the default value specified in the shell script for VARIABLE
script.sh VARIABLE= # set VARIABLE to an empty value
script.sh VARIABLE=SPECIFIC_VALUE # set VARIABLE to a SPECIFIC_VALUE
```

And voilà now, how to to handle user variable in a shell/bash script 😉

* * *

Thank you all for reading this article, And until my next article, have a splendid day 😉

## Interesting links

- [Documentation of if condition in bash](https://tldp.org/LDP/Bash-Beginners-Guide/html/sect_07_01.html)
Projects you can build after 2 months of learning web
Tags: inspiration, webdev, html, api
Published: 2021-02-10 04:46:55

Today I would like to share a collection of projects built by first-time web developers. These apps were after 2 months of learning web. In these courses, we teach fundamentals with just plain HTML, CSS, JS and no frameworks. Students are encouraged to use 3rd party APIs to power the features of their app and deploy using free hosting services.

# 1. [The Food Bible](https://info-1601-project-foodbible.firebaseapp.com/#!)

![info-1601-project-foodbible.firebaseapp.com_](https://dev-to-uploads.s3.amazonaws.com/i/jgd0bm8idw6p34seyid0.png) 

This app uses [materialize css library](https://materializecss.com/) and [edmam](https://www.edamam.com/) recipe search API so users can search recipes with dietary options.

# 2. [Moosic Social](https://musicapp-1fb91.firebaseapp.com/?path=%2F)

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

While it is was not taught, this group took it upon themselves to learn [react.js](https://reactjs.org/) and use [firebase](https://firebase.google.com/) auth and real-time database to build a social media app.

# 3. [Fun Cookie Clicker](https://interlinked-b9a18.web.app/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/7eouz6avjme90r5jshcj.png)

This charming game lets you score points by simply clicking, you can activate several upgrades to boost your points growth.

# 4 [Gaming World TT](https://gaming-world-tt.web.app/store.html)

![gaming-world-tt.web.app_store.html](https://dev-to-uploads.s3.amazonaws.com/i/7ib3sgimr7dfmmttlfcu.png)

This video game storefront demo is very convincing. Visitors can even login via google.
 
# 5 [Covid-19 Tracker](https://xdj-covid-19-tracker.web.app/)

![xdj-covid-19-tracker.web.app_](https://dev-to-uploads.s3.amazonaws.com/i/fwf4qoyrfyih8wn0ygvr.png)
 
Some groups even worked on solutions around covid-19. This app utilizes a [covid-19 API](https://github.com/mathdroid/covid-19-api) based on the John Hopkins University dataset.

There are dozens of more projects like these and they are all available at [https://dcit-web.web.app/gallery](https://dcit-web.web.app/gallery).

# Final thoughts

Modern web APIs, services and tools have really come far in bringing down the barrier to web development. If you may be interested in learning web dev online or have thoughts about what a web course should contain; please consider filling out this [short survey](https://forms.gle/9RxJYjHAXpGU6bTw9).