teleren/devto huggingface dataset:
Typescript When You Should Mix Type Alias And Interface
Tags: webdev, tutorial, programming, typescript
Published: 2022-08-08 03:34:00

let say you want to convert `number` types to `undefined` given arbitrary object literal type, so here is how we do it


```ts
type a = { e: string; f: number; l: boolean }
type b = { e: string; f: number; l: boolean }
type c = { e: string; f: number; l: { e: string; f: number; l: boolean } }

type ABC = { a: a; b: b; c: c }

type ConvertNumberToUndefined<T extends Record<string, unknown>> = {
	[K in keyof T]: T[K] extends Record<string, unknown>
		? ConvertNumberToUndefined<T[K]>
		: T[K] extends number
		? undefined
		: T[K]
}
type newABC = ConvertNumberToUndefined<ABC>

type a_f = newABC['a']['f'] // undefined
//   ^?
type b_f = newABC['b']['f'] // undefined
//   ^?
type c_f = newABC['c']['l']['f'] // undefined
//   ^?
```
[playground](https://www.typescriptlang.org/play?exactOptionalPropertyTypes=true&fbclid=IwAR3dsh-8fNJDqB0Kf-l085hzcQC2mFPicwhA2qyJcwbFjd21GcNmo7TKo0g#code/C4TwDgpgBAhlC8UDeUIC4oGdgCcCWAdgOYDcUAZhgQK4C2ARhDmQDYb0D2HLEMBUAXwBQoSFHoJkqDNnzEylKDQZNW7Ljz6CR4aAGNJKdFlyFSFKnUbMobKcdlmFllTbuduvfgO06xAQQAhAGFDWAwYMnp2Mj0MA2E-aGCOAgA3JmAAOSsmABUOAFUCABMIckIIEoAePNQAD2AIUswoACUIPQ4cGsdiABooagIAawIOAHcCAD5pwyEASABtAGkoQigRiBAOcig8gF0MPNWDhqaW9s7u3tMBodHxqenFhYB+KBT0zJzXAuKyhUCFVaqcXgsFsdTudmiVWsprK8PsNAZUSq8oSsDkJhKJoMCJkFQogvhkcNlcjh-qVymjqkSXklYAB9PaIAlEpYAchgXIO3PIfKgAHphQ9UcD0aKoDKAHpvJn0VmSDkhbn0PkCoXSlG0yVCaVyhV4qB6ZXsiCEtVcvSarksO2Cs46mlAqoGsVGoA)

now let say we want to keep type `b` intact, we don't want to change anything, that is when interface come in handy

```ts
type a = { e: string; f: number; l: boolean }
interface b { e: string; f: number; l: boolean }
type c = { e: string; f: number; l: { e: string; f: number; l: boolean } }

type ABC = { a: a; b: b; c: c }

type ConvertNumberToUndefined<T extends Record<string, unknown>> = {
	[K in keyof T]: T[K] extends Record<string, unknown>
		? ConvertNumberToUndefined<T[K]>
		: T[K] extends number
		? undefined
		: T[K]
}
type newABC = ConvertNumberToUndefined<ABC>

type a_f = newABC['a']['f'] // undefined
//   ^?
type b_f = newABC['b']['f'] // number
//   ^?
type c_f = newABC['c']['l']['f'] // undefined
//   ^?
```

[playground](https://www.typescriptlang.org/play?exactOptionalPropertyTypes=true&fbclid=IwAR3dsh-8fNJDqB0Kf-l085hzcQC2mFPicwhA2qyJcwbFjd21GcNmo7TKo0g#code/C4TwDgpgBAhlC8UDeUIC4oGdgCcCWAdgOYDcUAZhgQK4C2ARhDmQDYb0D2HLEMBUAXwBQhYE3IwAxtHrJUGbPmJlKUGgyat2XHn0FDQkKJIRz0WXIVIUqdRsyhszCy8ptq7mx9u69+A-QNwaABBACEAYVMUGAwYMnp2MkkME2EgowiOAgA3JmAAOU8cABUOAFUCABMIckIIKoAeEtQADzFqzCgAJQhJDhwmxSsAGihqAgBrAg4AdwIAPgXooQBIAG0AaShCKEmIEA5yKBKAXQwSrdO2jqqu3v7BxuHiMYnpucW11YB+KCzcvkihpShVqrV6k1LptTgtvhcrjcIJ0PCDvn8JjU6gQGvCTlchMJDNAcbNwlFEAC8jhCsUypUsZDGuS4RloDAAPrHRCk8nrADkMH5pwF5GFUAA9BLxuDsbipVBFQA9H5sqD0LmmXmRAX0YWi8UK9T2IQK5Wq4nGTU8iBknX8yT6-ksJ1i64KzEQnFVU3S81AA)

just convert `b` to interface and we are done

this is useful when we are dealing with data type that has special meaning, for example Date and Geopoint
I created an anonymous blog posting React app
Tags: react, node, redux
Published: 2022-08-08 03:32:30

**Where did the idea come from?**

So I was looking for options to create a full stack project using technologies I've recently learnt, including React, SQL, MongoDB, Express and some algorithms implemented in order to create a fully scalable [Anonymous blog posting app](http://ikigaii.herokuapp.com/).

![A screenshot of the app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p07whynrc98n9nj34kkf.png)
 
Let's start with the very beginning.

The first step was to setup the Node+React environment. This includes installing [Node.js](https://nodejs.org/en/), and [ReactJS](https://reactjs.org/) starter dependencies on the machine locally. 

Starting with the create-react-app base template, now comes the interesting part.

**Creating the API endpoints**

Create and navigate to the back-end directory and start with `npm init`.

Now, in order to setup the server routes, create different directories for their specific functions. I chose to create one for [database configuration](https://github.com/sambhavsaxena/ikigai/tree/main/backend/config), [Redux controllers](https://github.com/sambhavsaxena/ikigai/tree/main/backend/controllers), [middlewares](https://github.com/sambhavsaxena/ikigai/tree/main/backend/middleware), [models](https://github.com/sambhavsaxena/ikigai/tree/main/backend/models) and [routes](https://github.com/sambhavsaxena/ikigai/tree/main/backend/routes) for the required state management of the application. 

I chose to expose two API endpoints to the server, one for userContext and blogContext each.

I also created a separate directory for creating and salting JSON-Web-tokens (JWTs) in order to authenticate the users.

![Folder structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0so715k76fyl3l95vs46.png)

Do the low-level programming and implement the back-end structure as per your needs. 

**Creating the front-end**

When we start working on a front-end part we have a number of choices to make. What library to start with? What CSS frameworks would suit the best? What icons library and font?

After going through a number of alternatives I finally chose [Bootstrap](https://getbootstrap.com/), as it offers flexibility in choosing the styling frameworks. And with Bootstrap, there are customizable libraries available which results in flexible switching among several themes throughout the web app. 

**Connecting the server and final steps**

After setting up the front-end and back-end directories, connect the web app to the server and proxy the back-end ports through front-end, in order to make the API endpoints secure and publicly inaccessible. 

![Server proxy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqp90fbgggs2j326a9sc.png)

Specify the environment variables in the `.env` file and slurp your coffee.

Your web app is ready to be hosted😇
Hyper-V vs VMware
Tags: vmware, hyperv, webdev, news
Published: 2022-08-08 03:32:00

If you’re considering using virtual machines (VMs) for your organization, It’s time to go of products offered in the market and get to know the difference between Hyper-V and VMware hypervisors.

The virtual machine is basically a computer that runs virtually. Unlike laptops in general, A virtual machine can run multiple operating systems at once in parallel without having any need to restart.


## What is Hyper-V
Hyper-V is a Type 1 hypervisor and virtualization platform that you can use to run and manage VMs. Every VM in a Hyper-V world is an independent virtual computer with its own OS and applications. Hyper-V is a product of Microsoft that runs in Windows environments. 


## What Is VMware
VMware is a virtualization platform that consists of components such as ESXi hypervisor, vSphere Client, VMware Workstation, and vCenter. These products enable you to run and manage your VMware infrastructure efficiently. 
 

## Hyper-V vs VMware
Hyper-V and VMware have some architectural differences. Hyper-V is based on a micro-kernelized hypervisor. The host server, also known as the parent partition, has direct access to hardware and the virtualization stack. There is one parent partition per Hyper-V. 

 

Read the full article here: http://thedigitalhacker.com/software/hyper-v-vs-vmware-which-is-right-for-your-organization/
Sometimes, I Don't Code
Tags: webdev, writing, motivation
Published: 2022-08-08 03:28:00

> # Yet, I still wanna talk about it 👊
_Originally posted on [https://1punchkim.com/sometimes-i-dont-code](https://1punchkim.com/sometimes-i-dont-code)_

I often find myself talking about it and, before I realize, I'm quite deep into explaining something about SEO, agile or even a straight javascript problem to someone who has no idea what they got into because they simply asked the wrong (or right, depending of their interest) question.

So here I am: my name is Kim Min Soo, based in that french-english part of Canada and I'm ready to tackle tech writing. I always wanted to publish, like many others I'm sure, accumulating hundreds of web dev article ideas throughout the years. I hope not to mix this up with Tumblr. Let's see how it goes...

If you don't relate, that's ok. I hope I post something useful to you in the future. Meanwhile, enjoy this meme explaining very well why I chose [hashnode](https://hashnode.com) for my blog.

{% embed https://twitter.com/TheAnkurTyagi/status/1522462918062788611?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1522462918062788611%7Ctwgr%5E1ceb45a2c8f2d55156af4f2200396caffa6aa31f%7Ctwcon%5Es1_&ref_url=https%3A%2F%2F1punchkim.com%2Fsometimes-i-dont-code %}
How to Write Google Apps Script Code Locally In Your Favorite IDE?
Tags: javascript, tutorial, appsscript, googleappsscript
Published: 2022-08-08 03:15:00

Take apps script ID from your project and set up a local Dev Environment with Clasp.



## Install Clasp 

I'll be using Linux for this project but if you're using windows then omit the __sudo__ command, to install the [clasp](https://www.npmjs.com/package/@google/clasp?activeTab=readme) package. 
 

```
sudo npm install -g @google/clasp

# For windows
# npm install -g @google/clasp
``` 

>I'm assuming that you have already installed node, npm, and VS code.

Check the installation result with:

```
clasp -v 
``` 


## Set-Up Project Locally 

Please pick your favorite folder to set up a local project for our apps script project ( You don't have to do it)

```
npm init 

``` 
After that let's create a new folder that will clone the app scripts project. Let's call it src(source). 


```
# Inside the project folder
mkdir src 
``` 
 
## Clone the Project from Cloud to Local 




Now, we'll clone the project from the apps script dashboard to vs code. To do that __App Script ID__ is needed. You can find the ID in __Projects Settings> IDs__(check out the image below). 


![App Script ID Location](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hvzgts3khfw3ld0pkych.png)

Copy the ID then, on the terminal clone the project.
```
clasp clone "ID inside quote" --rootDir src

```

 

Here,
1. We are providing id inside quotes.
2. Asking to clone the project inside the __src__ folder as the root folder. 



## How to push to the cloud?
To push on the google cloud project we can use the following command.



```
clasp -P src/ push
``` 
It'll push everything inside __src__ folder to your apps script cloud project. 

## Prepping To Push To Git Repo

A bonus tip, remember to add the following files inside gitignore, before pushing your project on GitHub.


```
src/.clasp.json

src/appsscript.json
``` 



![Khadka's Coding Lounge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8rg8jpjvtkd47d4j2k3.png)

## Conclusion
So, this was a brief blog on settings for apps script on local computer. Now you can edit your Apps Scripts projects in your favorite IDE. 

Thanks for reading. I am Nibesh Khadka from Khadka's Coding Lounge. We can write add-ons and custom Apps Script for automation for your projects. __Hire Us, Like, Share and Subscribe to the newsletter to get updates on our free content__.

![Like, Share, and Subscribe](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hba3rm0imm8shaorxnn5.png)
Pay As You Go Web Hosting
Tags: huaweicloud, webhost, showdev, webdev
Published: 2022-08-08 02:49:38

Today our team launched Singapore data center pay as you go web hosting - [](https://www.srilankahosting.lk/web-hosting/singapore-hosting)

Cost-effective web hosting with pay-as-you-go pricing models that reduce drastically your upfront investments in favor of usage-based monthly fees.

Whether your traffic and resources grow or shrink, your hosting fees follow the same pattern: pay only for what you use, allowing for massive savings across the board while scaling your operations is never an issue.


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

 Powered By Huawei Cloud
PETS EATABLE APP
Tags: html, javascript, flutter, help
Published: 2022-08-08 02:32:00

Wanted to create app for users that they received and guides them what to feed them to there pets animals. What time to feed and how much to feed each and every thing will be delivered them via app and website is already up and running..
wanted an andriod and ios app for this website [petseatable.com](petseatable.com)
A Game-Theoretic Approach to Substantiating NFTs
Tags: dapp, typechain, solidity, web3
Published: 2022-08-08 01:55:00

Check out my medium article at this link: [Medium Article](https://daniel-warren.medium.com/the-nft-gulag-dapp-cdfd5f9da17d)

Check out the dapp here: [Dapp](https://nftgulag.io)
Scrollable and draggable carousel
Tags: javascript, react, animation, framermotion
Published: 2022-08-08 01:04:00

Hello, stranger. I searched the entire Internet in search of a scrollable and draggable carousel, for three days. Finally decided to create my own. Also decided to share it with you. If you know how to make it event better then let me know in the comments :)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/576aa79b63kqyahjib0r.gif)

[Demo](https://codesandbox.io/s/framer-motion-usescroll-element-scrolling-forked-3n931n)

**Kudos to these original works:**
https://codepen.io/toddwebdev/pen/yExKoj
https://codesandbox.io/s/framer-motion-usescroll-element-scrolling-eg6fm3

**For google users**
"framer motion", "carousel", "draggable", "scrollable", "progress", "typescript", "react"
Typescript WTF Moments 3: Type of Key is `string` if Key is Template Literal `a/${string}`
Tags: webdev, tutorial, programming, typescript
Published: 2022-08-08 01:02:00

---
series: Typescript WTF Moments 
---

```ts
const a = 'a'
const obj = { [a]:1 } // {a:1}

const b = 'b/a' as `b/${string}`
const obj2 = { [b]:1 } // {[x:string]:1}, expecting {[x:`b/${string}`]:1}
```

[playground](https://www.typescriptlang.org/play?exactOptionalPropertyTypes=true&fbclid=IwAR3dsh-8fNJDqB0Kf-l085hzcQC2mFPicwhA2qyJcwbFjd21GcNmo7TKo0g#code/MYewdgzgLgBAhjAvDA5HFAoUlYgEYBWSMA3jANpwC6AXAIwwC+MA9C6XPYxmzHzAD0A-BizhoMPMRR4W6eBBgADWQBIS0AE4BLMAHNGSsThj4CAJmJlyeWg2a8S5AB40tuvXcYAaGAFNnAAc-YCgPUhcaFRZ1d31DLx52fmEgA)

**this is a known widen string deficiency**

it is part of this long going [issue](https://github.com/microsoft/TypeScript/issues/13948#issuecomment-940110068)
First week of my commitment
Tags: 100daysofcode, ruby, beginners, webdev
Published: 2022-08-08 00:36:00

So last week (and last post lol) I've decided to take a serious step and commit to try to study every day a little bit on the technologies I think I should be a master of.

Those are:
* Ruby
* Ruby on Rails
* React

Obviously there's way more, but I wanted to take the first couple of steps focusing on these three technologies, because even though I know them, I'm no way near to be good at them.

Last week I created a sort of roadmap or topics in each one of these technologies that I need to know.

I've studied so far:
* Ruby Blocks
* RSpec (finished an entire course about it and practiced TDD)
* Polymorphic Associations

I know that passive learning isn't the way to go, so I also implemented what I've learned in some projects.

I've used TDD to implement a small project of "migrating" your database schema from a Bubble.io app to a PostgreSQL database, and I'm proud to say it really helped me to implement and it was fun to build. You can look at the repo [here](https://github.com/phezao/bubble-db-writer).

I also revived another project to use polymorphic associations, and I will keep using this project to further my learning in Rails.

From a day-to-day perspective, I felt I was learning so slow and so little, but when I organize things to write this post I can see the progress and how much I've studied and I'm actually happy with how much I've studied this week. Hopefully I can keep this rhythm going.

If you found this post motivating or if you're also studying leave a comment down below or react to this post so we can motivate each other.

Keep coding, keep learning!
Linked List Cycles
Tags: javascript
Published: 2022-08-08 00:24:34

**Instructions**
Describe a function that can detect the presence of loops in a Linked List. Rather than writing an actual function, describe the strategy you would employ.

Input: Linked List
Output: Boolean

Hints
• From JS Data Structures: Linked List (https://codeburst.io/js-data- structures-linked-list-3ed4d63e6571):

A Linked List is an ordered, linear structure, similar to an array. Instead of items being placed at indices, however, they are connected through a chain of references, with each item containing a reference to the next item.

**Solution1**

How it Works
We can keep track of every single node we come across by throwing it into an object. As we go through each node in the linked list, we check our object for its presence. If present, we know we’ve come across it before, indicating a circular list.

Time
The time complexity of this would be: O(n)
 
Space
The space complexity is also:

O(n),
as we have to store potentially every value in the list.

Challenge
Make this function have O(1) space complexity.

**Solution 2**

How it Works
We create two counters which both start at the beginning of the list. They advance forward. The first advances one node at a time and the second advances two nodes at a time.
If there is a null node anywhere, signifying the end of the list, we can return false . Otherwise, the two counters will eventually fall on the same node. If the fast and slow pointer ever converge, this verifies a circle in the list, allowing us to return true.

Time
The time complexity is:

O(n).
If the list isn’t circular, we simply wait for the fast pointer to get to the end. It
has to traverse half the nodes, sD time complexity is o(n)

If the list is circular, the slow and fast pointer will always find each other by
the time the slow pointer has reached the end of the list.

Space
0(1),

since we don’t store any of the nodes.
Tailwindcss intellisense doesn't work in tsx file.
Tags: typescript, tailwindcss, react, nextjs
Published: 2022-08-08 00:07:31

I usuary use tailwind css with vscode. But one day, Tailwindcss intellisense doesn't work in tsx file. I configured some settings like below.

```
// It didn't work.
    "editor.quickSuggestions": {
        "strings": true
    },
    "tailwindCSS.emmetCompletions": true,
    "tailwindCSS.experimental.classRegex": [
        "className=\"([^`]*)" // className="From here
    ],
    "tailwindCSS.includeLanguages": {
        "javascript": "javascript",
        "html": "HTML"
    },

```

My solution was to delete tailwind.config.js and configure it again!!
Watch files/directories changes in Nodejs
Tags: node, javascript
Published: 2022-08-08 00:07:00

The 𝗳𝘀𝗣𝗿𝗼𝗺𝗶𝘀𝗲𝘀.𝘄𝗮𝘁𝗰𝗵 method returns an async iterator that watches for changes on 𝗳𝗶𝗹𝗲𝗻𝗮𝗺𝗲, where 𝗳𝗶𝗹𝗲𝗻𝗮𝗺𝗲 is either a file or a directory.

By default, it uses 𝘂𝘁𝗳𝟴 encoding and keeps the process running as long as the file/dir is being watched.

Optionally, you could pass an 𝗔𝗯𝗼𝗿𝘁𝗦𝗶𝗴𝗻𝗮𝗹 to signal when the watcher should stop.

Keep in mind that this API comes with a few caveats. For example, not being consistent across platforms; the recursive option is only supported on macOS and Windows.

So make sure to check all the caveats..

--------------------------------

Did you learn something new today?

Like and share this post, and follow me for more!

![watch files/dirs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1el8t9harns6yo79098.png)
5 JavaScript Console Methods That will Improve your Debugging Skills🚀
Tags: javascript, webdev, debugging, programming
Published: 2022-08-08 00:02:00

The console is a JavaScript object that grants developers access to a browsers debugging console.

## Shortcuts to open the console in browsers
- Ctrl + Shift + I  (windows)
- Command + Option + K (Mac)

In this post, I've curated 5 console methods that you can use to improve your debugging skills

### ✨ console.error()
This method works just like the _*console.log()*_ method.
It Useful in testing of code. By default the error message will be highlighted with red color
```javascript
// console.error() method
console.log("This is an error");
```
Output
![Console.error Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpefoqtjnagrav76diiz.png)

### ✨ console.dir() method
This is another method that is also almost like _*console.log()*_ except it shows the content in JSON format
```javascript
// console.dir() method
console.log(document.body);
```
Output showing difference between console.log() and console.dir()
![Output for the .dir() method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2or1sosx6c8tvz47h9w.png)
### ✨ console.table() method
This method is used to generate a table inside a console. The input must be an array or an object which will be shown as a table. 
*_It is really a handy method to use if you are fetching data from an API. You can visually see how data is received_*
 Output
![Output for the .table() method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mhq47gtcx40k8u920cx.png)

### ✨ console.group() & console.groupEnd()
group() and groupEnd() methods of the console object allows us to group contents in a separate block and indented.
➩  **.group()** is used to begin a new group, it accepts a label as well as the group name.
by default, the group is opened on the console. use *.groupCollapsed* to close the group be default

➩  *.groupEnd()* closes off the current group, It takes same label as the .group()

Output
![Output for the .group() method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z7kp6yisy5iezns2prr.png)

### ✨ console.time() & console.timeEnd()
These methods are used to determine the amount of time used for a block of code to execute.
Just like the _.group()_ method, this also takes a label which must be same.
 Output
![Output for the .time() method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ubrv2horf6luqhpegxn7.png)

### ✨🚀  console.clear()
.....this method as the name is, its used to clear the console.😅
![Output for the .clear() method](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48vrtdp6xiyqbflert32.png)

You can support me to keep writing more for you😊❤
<a href='https://www.buymeacoffee.com/qbentil' target="_blank">
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jf2285oqld8zpevvsqvt.png)
</a>
 

You know other methods of the console object  which is really useful in debugging, tell us in the comment section👇😊

Follow me for more dev tips🚀
Do you monitor deployments?
Tags: observability, monitoring, alerting, deployment
Published: 2022-09-27 09:59:19

---
title: Do you monitor deployments?
published: true
date: 2022-08-08 00:00:00 UTC
tags: observability,monitoring,alerting,deployment
canonical_url: https://jhall.io/archive/2022/08/08/do-you-monitor-deployments/
---

In the effort to [reduce time to recovery](https://jhall.io/archive/2021/06/05/optimize-for-recovery-time-not-defect-count/), I find it’s often easy to forget some of the most obvious things.

Over the last few weeks, I’ve seen a broken deployment go unnoticed for several hours before it was fixed. While this didn’t mean the service was unresponsive (since the old instances kept running), it did pose a problem, for somewhat obvious reasons.

It at least one case, it made responding to a production issue difficult, because it was impossible to deploy the fix without first fixing the deployment.

So now we’re monitoring deployments. Any failure to deploy creates a Slack alert that everyone on the team will see.

If you’re not already monitoring and alerting for failed deployments, I encourage you to do so today. It’s pretty quick. If you’re using GitHub Actions and Slack, you can use the [Notify Slack Action](https://github.com/marketplace/actions/notify-slack-action). If you’re using some other configuration, spend the 30 minutes it takes to google and configure your solution. You can thank me later 😊

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._