teleren/devto huggingface dataset:
Fundamentos de TypeScript 🦆| #8: Tipos Literales
Tags: typescript, webdev, spanish, beginners
Published: 2022-01-18 16:37:12

Como vimos ya TypeScript soporta la unión de tipos para que una variable pueda tener varios tipos de datos diferentes.

Los Tipos Literales son básicamente lo mismo, pero lo limitamos por lo general, a valores concretos, por ejemplo:


```ts
let operaciones:string = "suma";
```

> *`operaciones` soporta cualquier `string`, es este caso la cadena "suma"*

En el último ejemplo `operaciones` puede contener "resta", "multiplicacion" o "division", como también "manzana", "payaso" o "tomate", todos son cadenas válidas, **pero** no todas son cadenas apropiadas para nuestra variable. Por ello podemos usar Tipos Literales para limitar aun más los valores que puede admitir la variable `operaciones`.

Veamos otro ejemplo:
Tenemos una función `concatOrSumValues` que concatena los valores si son `string` y los suma si son `number`:

```ts
function concatOrSumValues(value1:number | string, value2:number | string, placeholder:string = 'to-sum'):number | string {
  let res;
  if(placeholder === 'to-sum'){
    res = +value1 + +value2
  }else{
    res = value1.toString() +  value2.toString();
  }
  return res;
}

console.log(concatOrSumValues(2,2)); //4
console.log(concatOrSumValues("2","2", 'to-concat')); // "22"
```
La función depende del parámetro `placeholder`, que por defecto es `to-sum` ergo la función sumará los valores por defecto.

Pero `placeholder` puede recibir cualquier cadena, ¿cómo podemos limitarlo a que solo pueda recibir `to-sum` para la suma, y `to-concat` para la concatenación? Acá entran los **Tipos Literales**.

Podríamos hacer algo como esto:

```ts
type StringOrNumber = string | number; //unión de tipos
type PlaceholderOperation = 'to-sum' | 'to-concat' // unión de tipos literales

function concatOrSumValues(value1:StringOrNumber, value2:StringOrNumber,placeholder:PlaceholderOperation = 'to-sum'):StringOrNumber {
  let res;
  if(placeholder === 'to-sum'){
    res = +value1 + +value2
  }else{
    res = value1.toString() +  value2.toString();
  }
  return res;
}

console.log(concatOrSumValues(2,2)); // 4
console.log(concatOrSumValues("2","2", 'to-concat')); // '22'
console.log(concatOrSumValues("3","3", 'to-conca')); // Argument of type '"to-conca"' is not assignable to parameter of type 'PlaceholderOperation'
```

`PlaceholderOperation` solo puede recibir 2 cadenas específicas: `to-sum` o `to-concat`, cualquier otro `string` será un error.

## **Conclusiones**
- Los tipos literales reducen más los posibles valores que puede aceptar una variable.
- Son muy comunes y muy usados para aprovechar al máximo los beneficios de TypeScript.

## **Referencias**
{% youtube BwuLxPH8IDs %}
Google Form countries list dropdown
Tags: googlecloud, tutorial, productivity
Published: 2022-01-18 16:35:54

**In this article I’ll show you how you can add a simple dropdown menu with all countries.**

Google Form hasn’t a default element to show a list of countries, cities, languages or every other useful list of things. To resolve this problem we can simply copy a list of items (for example from another document) in our form editor answers and create it by ourself.

First thing you need a list of countries. You can grab it from Internet but, to make your work easier, I already created one in this Google Sheet:

https://docs.google.com/spreadsheets/u/1/d/1vDD6D0ogBrA4vOTKhttSUB7wcpNApJ7SBM5AX9oyRTw/edit?usp=sharing

Now you need to copy all the list. You can do this by clicking in the small dropdown arrow near the A column letter:

![List of countries](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpnhu6tanlcbgv4uq1l2.JPG)

Click copy.

Now return in the form editor page, click on the first answer of the dropdown and paste all the list.

![Dropdown list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ku7cub1rvx706gy0zq3.JPG)

We created a dropdown menu with all countries.

You can repeat this process with every list you want and you can copy the list in other form elements like checkboxes or multiple choices question.
JavaScript “Promises” — Simply Explained
Tags: javascript, webdev, programming, tutorial
Published: 2022-01-18 16:16:38

JavaScript promises are same as the promises we make in real life. The commitment we make to someone.

**Example:** _“I promise I will code daily.”_

Now this promise has two results.

* You either fulfill it (resolved).
* or You’ll break it. (rejected).

Now, let’s have a look at the syntax.

**Syntax:**
Promise syntax is super easy just like how we create a constructor. But here we pass a function with two parameters resolved(value) and reject(error).

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

**Example:**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/924pffl8wwhx8zoqzwe4.png)

Here, we've made a promise that value of a=1+1 should be 2. If it is 2 then promise is resolved else it is rejected.

Now, let's learn how we can interact with these promises.

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

Here, we will use two methods to check whether our promise has resolved or rejected.

* **then()** will return resolved.
* **catch()** will return rejected. as a callback message.

**Benefits of using "Promises".**

1. Improves code readability.
2. Better handling of Async operations.
3. Provides a better flow of control while defining async logic.
4. Better error handling.

Hope you got the concept of how Promises work. If you did please follow and share.

Even if you didn't, that's fine you can do it anyway .😄
Cumulocity IoT Jan 2022 update
Tags: cumulocity, iot, streaminganalytics, apama
Published: 2022-01-21 13:25:00

---
title: Cumulocity IoT Jan 2022 update
published: true
date: 2022-01-18 16:15:54 UTC
tags: cumulocity, iot, streaminganalytics, apama
canonical_url: https://tech.forums.softwareag.com/t/cumulocity-iot-jan-2022-update/254552
---

The [latest release of Cumulocity IoT, version 10.11](https://cumulocity.com/guides/releasenotes/release-10-11-0/whatsnew-10-11-0/), is now available and it’s all about making IoT easier… Easier to deploy, easier to configure and maintain, easier to build upon, and easier to stay informed!

Visit the [original topic](https://tech.forums.softwareag.com/t/cumulocity-iot-jan-2022-update/254552) in the Software AG Tech Community to check out all the new features, additions, updates, and fixes that came with this release!
Getting Started with Red Hat OpenShift Service on AWS
Tags: redhat, openshift, aws, rosa
Published: 2022-01-18 16:15:01

---
title: Getting Started with Red Hat OpenShift Service on AWS
published: true
description: Getting Started with Red Hat OpenShift Service on AWS
tags: redhat,openshift,aws,rosa
//cover_image: https://direct_url_to_image.jpg
---
A quickstart guide to [Red Hat OpenShift Service on AWS](https://aws.amazon.com/es/rosa/)

Commands, Config & References:

https://gist.github.com/faermanj/a577a8837712d509b81e0744553b98a2

{% vimeo 660883584 %}
Best WordPress Lead Generation Plugins For 2022
Tags: wordpress, webdev, beginners, tutorial
Published: 2022-01-18 16:11:12


![Best WordPress Lead Generation Plugins For 2022](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyuyztgr0n5vame3xy7f.png)
Lead generation plugins give you all the tools you need to grow your email list FAST and skyrocket your marketing results and growth. Lead generation is the process of attracting and turning your potential users into buying customers. It includes making people interested in your products and leading them to buy. In fact, lead generation is everything you do to lead people to purchase something from your business.

##What is lead generation?

Lead generation is how you attract potential clients to your WordPress site and convert them into long-term customers. A good lead generation strategy locates and targets your most valued prospects and initiates their journey through your sales pipeline. 

##Why Use a WordPress Lead Generation Plugin?

When a visitor isn’t ready to convert into a customer, you may need to take a few steps in between before you get them to that stage. By capturing these leads in time, you can convert them into subscribers, members, and potential customers right away.

It’s the marketing strategy to collect contact information like email address, phone number, etc. You can further get a clearer picture from the points below.

##Best Lead Generation Tools for WordPress
1. ConvertPro
2. Bloom
3. WP Subscribe
4. Tawk.To Live Chat
5. WPForms

Which is the Best Lead Generation Plugin for WordPress?

After reviewing the best lead generation tools for WordPress, ConvertPro comes out on top. It has all the features you ever want from a lead generation solution. It’s easy to design professional campaigns that are optimized for conversions.

You can read this type of post in detail from [5 Best WordPress Lead Generation Plugins 2022](https://softcodeon.com/wordpress/wordpress-lead-generation-plugins.htm)

Whether you have an eCommerce store, business website, or a simple blog, you’ll find it super helpful for converting as many visitors into leads and subscribers.

If you’re looking for a WordPress-specific solution that allows you to connect your forms with your email marketing service, then you can use WPForms. With WPForms, you can even display a signup checkbox on your contact forms. This lets you automatically add users to your email list without having to submit another form. Please discuss below if you have any question to improve this post.
How to create your project docs using storybook and host it with github pages
Tags: javascript, github, webdev, typescript
Published: 2022-01-18 15:55:32

I'm a big fan of automatically generated documentation.
Today I want to show you storybook docs. Storybook is great because it let's you develop independently in a sandbox. No dependencies. No more waiting for the backend. Just the code. It is also a good documentation. It can show product managers which components are available for use so that they won't reinvent the wheel for each mockup.

All the mentioned code can be found in my [remotify repository](https://github.com/flodev/remotify).

## Setup storybook
That's easy: execute `npx sb init` in the project root.
Additionally I recommend to install storybook essentials (`npm i -D @storybook/addon-essentials`) which bundles all relevant addons.
Now you need to navigate to the `.storybook/main.js` file and add the essentials addon so that it looks similar to the following:
```js
module.exports = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-essentials',
  ],
  ...
```

Now execute `npm run storybook` and see the results in the browser. You should have a few pre-generated stories already.

## Configure for TypeScript docs

As of version 6 of Storybook zero configuration is needed. 
This is the way :)

The only thing you should taking care of is to declare the component in the default export.

```js
export default {
  title: 'EditToolbar',
  decorators: [ComponentDecorator],
  component: EditToolbar, // <-- important
```

## Configure storybook docs

If you don't have it already in your package.json add the following lines within the "scripts" part.
```json
"storybook-docs": "start-storybook --docs --no-manager-cache",
"build-storybook-docs": "build-storybook --docs -o ./docs",
```
* `storybook-docs` is for development in the browser (similar to `npm run storybook`)
* `build-storybook-docs` is for building the docs. For getting github pages to work using this example I defined the output to `<project_root>/docs` folder

Now start storybook docs with `npm run storybook-docs`. The browser should open and you should see some stories.

Since I already have a few stories in my remotify project it looks this way for me:
![Storybook docs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn4k2w5owv68lmthyuxx.png) 

Now run the second command to build the docs. Then commit the files and push them to github.

## Activate Github pages

Open your github project in the browser and navigate to Settings -> Pages. There activate github pages and select your main branch and the `docs` folder you have previously generated and pushed.

![github pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afstijbqpcwug48xmp0e.png)

Now you should be able to see the docs in your browser. 
For remotify you can find the docs [here](https://flodev.github.io/remotify).
I've also activated a custom domain right under the branch selection which I've named [docs.remotify.place](http://docs.remotify.place).
Happy storybuilding :)
Syllable correction and improvement
Published: 2022-01-16 17:59:24

Today, the third day of the Sankranthi weekend started dark, cloudy and cool. But that did not deter me from LitTech fun and I got extra spirit nourishment with Manjari and Papon crooning soulfully on YouTube continuously.

Spent the day on the discrepancy pointed yesterday by HydRAW member [Nalini Dharanipragada](https://www.facebook.com/nalini.dharanipragada) -- "Hyderabad" is four syllables whereas the program was counting three. You can see it in my previous post's screenshot.

When I checked with RapidAPI, I got four syllables for 'Hyderabad'. So, the immediate fix I did was to use RapidAPI. For each word in the input, check the syllables count with RapidAPI as well as the current algorithm. If RapidAPI gives syllables count for all words and there are no network exceptions for any word, then its result is sent to the user. If my algorithm's syllable count matches that of RapidAPI for every word and there are no network exceptions for any word check with RapidAPI, then the result is displayed as using the current algorithm.

Once the above functionality was done, I proceeded to find why the current algorithm was giving Hyderabad three syllables.
Indeed, there was a check for the character "y".

😎 add one if "y" is surrounded by non-vowels and is not in the last word.

But in converting the code from Python to Ruby, I had goofed up. First, I had to convert the string to an array of characters. I should have used split("") or chars on the word, but I used just split. The code was converting the word string to a single array and not an array of characters. I changed to chars. The second boo-boo was I missed an if condition. Added that too. Now the algorithm counts Hyderabad correctly as four syllables.

The interesting part is that Python enumerate over a list gives index and element whereas Ruby each_with_index gives it in the reverse order: element and index. So, for the main loop, I had to write `| j, i |` instead of `| i, j |`. The three screenshots given below show the original Python code, my error Ruby code and the fixed Ruby code.

I also added code to write words in a file whenever there is a discrepancy between the syllable count given by the self-algorithm and that from RapidAPI. I can use those words to check the algorithm and improve it.

Deployed the latest code on my cloud server. You can access it at -> https://www.mahboob.tech/poetry/

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yk59qs1sjpqbdoz2rago.png)
Free Hosting Services For Your React JS App
Tags: react, javascript, programming, tutorial
Published: 2022-01-18 15:38:54


## 01. Netlify
![Free Hosting Services For Your React JS App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6o4gpee76xq3i0rwmoav.PNG)Netlify is a platform you can use to automatically build, deploy, serve, and manage your frontend sites and web apps. It also provides a variety of other features like form processing, serverless functions, and split testing.
<br><br>


## 02 .GitHub Pages
![Free Hosting Services For Your React JS App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxsk7qrua7bafu0c1skn.PNG)GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files straight from a repository on GitHub, optionally runs the files through a build process, and publishes a website. You can host your site on GitHub's github.io domain or your own custom domain.
<br><br>


## 03 .Vercel
![Free Hosting Services For Your React JS App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8gargac0hwpphh9zgnh.PNG)Vercel is a platform for frontend frameworks and static sites, built to integrate with your headless content, commerce, or database.
<br><br>


## 04 .Heroku
![Free Hosting Services For Your React JS App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t25qytcmoggdgzvvj1r.PNG)Heroku is a cloud platform as a service supporting several programming languages. One of the first cloud platforms, Heroku has been in development since June 2007, when it supported only the Ruby programming language, but now supports Java, Node.js, Scala, Clojure, Python, PHP, and Go.
<br><br>


## 05 .Firebase
![Free Hosting Services For Your React JS App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7c7xl9fshra9nt4gfvp.PNG)Firebase hosting is free service. So, it won't cost you anymore. It by default provides SSL certificate and offers an impressive speed across multiple geographic locations without the need for a separate CDN on top.
<br><br>
Convince me that Web3 is the worst
Tags: web3, webdev, healthydebate, discuss
Published: 2022-01-18 15:37:43

Just for the fun of it, I want to hear everyone's arguments for why Web3 is not, or should not be the future.

In case you need a better understanding of what we're talking about here:

{% link https://dev.to/narottam04/web-10-web-20-web-30-explained-591n %}

{% link https://dev.to/dabit3/defining-the-web3-stack-39ef %}

This shouldn't be personal, or aggressive. Keep it light, and give me your argument.
WEBCode.run Private Endpoints on Observablehq.com Released!
Tags: programming, javascript, webdev, devops
Published: 2022-01-18 15:32:14

---
title: WEBCode.run Private Endpoints on Observablehq.com Released!
published: true
date: 2022-01-18 15:27:20 UTC
tags: programming, javascript, webdev, devops
canonical_url: https://observablehq.com/@endpointservices/webcode-private-endpoint
---

# [WEBCode.run](https://webcode.run) Private Endpoints Released

{% youtube HqITeIFlRXI %}

[WEBCode.run](https://webcode.run) is growing! We have added our first paid feature which will help support it long term. WEBCode is bootstrapped so this is a big milestone!

For those that do not know, [WEBCode.run](https://webcode.run) allows you to run serverless compute workloads from within [Observable](https://observablehq.com) notebooks. Until now, notebooks containing [WEBCode.run](https://webcode.run) handlers had to be public so that WEBCode's compute layer could read the code. Not anymore!

We have added a new feature for Observable [Team](https://observablehq.com/@observablehq/getting-started-with-teams) accounts that allows public access to serverless endpoints while keeping the source code private. We feel this feature best suits commercial teams, and thus, is a perfect fit for a paid tier. Find out more on the [webcode.run website](https://webcode.run) or contact [sales@webcode.run](mailto://sales@webcode.run).

For those that want to use WEBCode to build transparent open source services, they can continue do so at no charge.

As part of the work in providing a paid tier, we have updated the [website](https://webcode.run) significantly. You can also email me at [tom@webcode.run](mailto://tom@webcode.run)!

### Coming soon

[WEBCode.run](https://webcode.run) enables running HTTP services with excellent performance and observability from within a notebook. In the coming months we will demonstrate why this is an important primitive. [WEBCode.run](https://webcode.run) is a connection technology for something larger, it enables completely self documenting projects to be bundled into a single encapsulated artifact. In the coming months the focus will be on delivering preconfigured artifacts you can one click fork to self-host and customize.

In our vision of the future, source level customization and self-hosting at the service level is a single click away. This is only possible when the backend and frontend + all the extras (documentation, monitoring) are a single forkable artifact, [WEBCode.run](https://webcode.run) _with_ [Observablehq.com](https://observablehq.com) are able to deliver this.

### Support us on Product Hunt

We are launching the paid tier and [webcode.run](https://webcode.run) on Product Hunt. Help us get to #1 with some love [here](https://www.producthunt.com/posts/webcode-run)

### Follow the newsletter

I am going to start posting webcode.run updates to a [newsletter](https://webcode.substack.com/), so this is another option you can stay up to date

<iframe src="https://webcode.substack.com/embed" width="480" height="320" style="border:1px solid #EEE; background:white;" frameborder="0" scrolling="no"></iframe>
Tkinter, Creating Forms
Tags: tkinter, python, tutorial, forms
Published: 2022-01-18 15:26:47


##NOTE 

If you are coming here for the first time or have no idea about tkinter, checkout the Getting Started [dev-post](https://dev.to/dhakshinesh/creating-your-first-application-on-python-using-tkinter-131g)

In this tutorial we will be creating a simple signup form which contains some text field, Checkbox, and a submit button.

##Entry Widget
The entry widget is used for creating input fields.
Syntax :

```
#text field : username
Label(root, text="Username").grid(row = 0,column = 0)
Entry(root).grid(row = 0,column = 1)
#text field : password
Label(root, text="Password").grid(row = 1,column = 0)
Entry(root).grid(row = 1,column = 1)
```
Here, I'm using grid placement which allows us to place all items in a tabular manner.

##CheckButton Widget
Using this widget, we can create a simple checkbox which we can toggle on or off.

Syntax:

```
#Checkbox field
Checkbutton(root,text="Remember?").grid(row=2, column=1)
```
The text variable basically replaces the Label widget's role and also acts as a checkbox whenever you click on the text which makes your application more accessible.

##Button Widget
As you already know, the Button widget is basically a button ;)

```
#Submit button
Button(root, text = 'Submit').grid(row=3, column=0)
```
That's it. You can make it more beautiful by making the form centered and then adding some colors to it too.

I've made a GitHub repository too. (feel free to make some PR's) :
[Tkinter-Creating-Forms](https://github.com/dhakshinesh/Tkinter-Creating-Forms)