teleren/devto huggingface dataset:
TypeScript Declaration Merging
Tags: webdev, programming, typescript, beginners
Published: 2023-03-12 15:58:25

TypeScript is a popular programming language that is widely used by developers around the world. It provides static typing, enhanced error checking, and other useful features that make it a powerful tool for building complex web applications. However, as with any programming language, there are certain tricks and techniques that can help developers work more efficiently with TypeScript. In this post, we'll explore one TypeScript lifehack that can help you write better code in less time.

The lifehack we're going to discuss is called "TypeScript Declaration Merging." This technique allows you to merge multiple TypeScript interface or class declarations into a single declaration. This can be particularly useful when you're working with third-party libraries that don't have proper TypeScript definitions.

To use TypeScript Declaration Merging, you simply create a new declaration file that contains your merged declarations. For example, let's say you're working with a third-party library called "awesome-library." This library has a class called "AwesomeClass," but it doesn't have any TypeScript definitions. To create your own definitions, you can create a new file called "awesome-library.d.ts" and add the following code:

```
declare module 'awesome-library' {
  export class AwesomeClass {
    // Define your class properties and methods here
  }
}
```


This code tells TypeScript that the "awesome-library" module has a class called "AwesomeClass" with the specified properties and methods. You can then import the "awesome-library" module and use the "AwesomeClass" class in your TypeScript code as if it had proper TypeScript definitions.

One of the biggest benefits of TypeScript Declaration Merging is that it allows you to work with third-party libraries more easily. Instead of spending time manually creating TypeScript definitions for every class and interface in a library, you can simply create a single declaration file that contains all of the necessary definitions. This can save you a lot of time and effort in the long run, especially if you're working with large or complex libraries.

In conclusion, TypeScript Declaration Merging is a powerful lifehack that can help you work more efficiently with TypeScript. By merging multiple class and interface declarations into a single file, you can save time and reduce errors when working with third-party libraries. Give it a try in your next TypeScript project and see how much it can improve your development workflow!
Difference between let, var and const with examples.
Published: 2023-03-12 15:56:08

## Introduction
In JavaScript, let, var, and const are three types of variable declarations that allow programmers to store values and reuse them later in their code. Each has its own characteristics, and the main difference between them lies in their scope and mutability.

var is the oldest type of variable declaration and was used in earlier versions of JavaScript. let and const were introduced in ES6 (ECMAScript 2015) and are considered more modern.

## Here are the main differences between let, var, and const:
### 1. Scope
var variables are function-scoped, while let and const variables are block-scoped. This means that variables declared with var are accessible anywhere within the function in which they are declared, while variables declared with let and const are only accessible within the block in which they are declared.

#### Examples:

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

### 2. Mutability
Variables declared with let can be reassigned new values, while variables declared with const cannot be reassigned. Variables declared with var can also be reassigned.

#### Examples:

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

### 3.Hoisting
var declarations are hoisted to the top of their scope, while let and const declarations are not hoisted. This means that you can use a var variable before it is declared, but you cannot do the same with a let or const variable.

#### Examples:

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

### Conclusion
In summary, let is used to declare variables that are block-scoped and can be reassigned, const is used to declare variables that are block-scoped and cannot be reassigned, and var is used to declare variables that are function-scoped and can be reassigned.
Selecting the best widget toolkit (part 1 of 7)
Tags: toolkit
Published: 2023-03-12 15:52:42

This post is a first one in a series in which I pretend to try different widget toolkits the select which is the most suited for your purposes. I'll be avaliating each one based in the following criteria:
- Ease of use
- Development speed
- Learning curve
- Portability
- Best Features
- Code length
- Use of hardware resources (size of executable, CPU usage, and average RAM used on execution)

For the execution of the software developed I'll be using the following systems:
- PC Windows 10 with Celeron N4000 with 4 GB RAM
- PC Windows 11 with Amd Ryzen 5 with 10 GB RAM
- PC Linux Ubuntu 22 in an Intel Core i3 with 4 GB RAM
- Mac Mini M2 with 8 GB RAM

The development is made in the two Windows PCs and the Mac, since the Linux based one the access is done remotely, but the majority of the code writing and test is made in the PCs, with the Mac and Linux used for compilation and execution.

The purpose of the software to be created in the different toolkits is the same: write an app launcher (a lite like a start menu), accessible through an icon in the systray or the precesence of the app in the task bar (Dock, in mac). Double clicking on an entry in the launcher list view will launch the app. It´s possible to add program items to the list preferebilly through drag and drop. In the case the toolkit lacks this funcionality, the editing will be made through context menus, or in last resource, top dropdown menus. For inspiration, I´ll be using the [ASuite app launcher](https://github.com/salvadorbs/Asuite), very useful if you need a custom launcher to execute desktop applications stored in an external USB disk. This one, according to its author, SalvadorSoftware, [was developed](https://github.com/salvadorbs/ASuite/blob/master/BUILD.md) in the Lazarus IDE in Free Pascal.
![Asuite, the model I intend to replicate](https://codehouse.digfish.org/wp-content/uploads/2023/03/asuite_x64_CGH0hSh7ee-181x300.png).
![file](https://codehouse.digfish.org/wp-content/uploads/2023/03/image-1678635069626.png)
For the toolkits, I chosed this ones:
- Tkinter
- Autohotkey
- Windows Forms
- Free Pascal
- Qt
- WxWindows

Some of these come with ther own IDEs, which is the case for Autohotkey, Windows Forms, and Free Pascal. I´l be using this ones for each toolkit. In the case the toolkit lacks one, I´ll resort to VS Code. 


*Article posted using [bloggu.io](https://bloggu.io). Try it for free.
zk Newbie - What did I get into
Tags: zkproofs, privacy, blockchain
Published: 2023-03-12 15:45:18

As I do a deep dive into web3, anything security related gains my attention. 

I saw a tweet about Zero Knowledge proofs and off I went down the rabbit hole. That's how I found the Zero Knowledge Proofs MOOC.

MOOC - a course of study made available over the internet without charge to a very large number of people. "anyone who decides to take a MOOC simply logs on to the website and signs up"

I signed up. I joined the Discord channel. Let the games begin.

Week 1-2 - Great intro

Week 3 - My favourite week as we had two tutorials to complete.

1. CIRCOM - The circom compiler and its ecosystem of tools allows you to create, test and create zero knowledge proofs for your circuits.

2. ARKWORKS - is a Rust ecosystem for zkSNARK programming. Libraries in the arkworks ecosystem provide efficient implementations of all components required to implement zkSNARK applications


I documented the tutorials:-

https://docs.google.com/document/d/1iZ7X8ZOHSD15XNr6n638d28MiEOUpPZ66e4ml_YUBkU/edit?usp=sharing
Java str into obj w/o func
Published: 2023-03-12 15:31:27

<! DOCTYPE html>
<html>
<body>
<h2>Converting a string into a Function. </h2>
<p id="demo"></p>
<script>
const text='{"name":"Munira","age":"function() {return 19}","city":"Vadodara"}';
const obj=JSON.parse(text);
document.getElementById("demo").innerHTML=obj.name+","+obj.age;
</script>
</body>
</html>
Java str into func
Published: 2023-03-12 15:28:41

<! DOCTYPE html>
<html>
<body>
<h2>Converting a string into a Function. </h2>
<p id="demo"></p>
<script>
const text='{"name":"Munira","age":"function () {return 19}","city”: “Vadodara"}';
const obj=JSON.parse(text);
obj.age=eval("("+obj.age+")");
document.getElementById("demo").innerHTML=obj.name+","+obj.age ();
</script>
</body>
</html>
Java str into obj data ex
Published: 2023-03-12 15:26:53

<!DOCTYPE html>
<html>
<body>
<h2>Converting a string into a date object.</h2>
<p id="demo"></p>
<script>
const text='{"name":"Munira","birth":"1986-1-11","city":"Vadodara"}';
const obj=JSON.parse(text);
document.getElementById("demo").innerHTML=obj.name+","+obj.birth;
</script>
</body>
</html>
Convert java str in obj
Published: 2023-03-12 15:25:59

<! DOCTYPE html>
<html>
<body>
<h2> Creating JSON String into Object</h2>
<p id="demo"></p>
<script>
const txt='{"name":"Munira","age":19,"city":"Vadodara"}'
const obj=JSON.parse(txt);
document.getElementById("demo").innerHTML=obj.name+","+obj.age;
</script>
</body>
</html>
Modify value in json object
Published: 2023-03-12 15:25:15

<!DOCTYPE html>
<html>
<body>
<p>How to modify values in JSON object.</p>
<p id="bca"</p>
<script>
var myObj,i,x="";
myObj={
"name":"l",
"age":19,
"vehicle":
{
"car1":"I10",
"watercraft":"ships",
"aircraft":"airplanes"
}
}
myObj.vehicle.car1 = "Mercedes";
for( i in myObj.vehicle)
{
x +=myObj.vehicle[i]+"<br>";
}
document.getElementById("bca").innerHTML =x;
</script>
</body>
</html>
Access nested obj
Published: 2023-03-12 15:24:12

<!DOCTYPE html>
<html>
<body>
<p>How to access nested JSON object.</p>
<p id="bca"></p>
<script>
var myObj={
"name":"u",
"age":19,
"cars":{
"car1":"Ford",
"car2":"BMW",
"car3":"Audi"
}}
document.getElementById("bca").innerHTML += myObj.cars.car2 + "<br>";
document.getElementById("bca").innerHTML += myObj.cars["car2"];
</script>
</body>
</html>
Loop json
Published: 2023-03-12 15:22:28

<!DOCTYPE html>
<html>
<body>
<p>How to loop through all properties in a JSON object.</p>
<p id="bca"></p>
<script>
var myObj, x;
myObj = {"name":"Munira","age":19,"car":null};
for(x in myObj){
document.getElementById("bca").innerHTML += x + "<br>";
}
</script>
</body>
</html>
Square bracket json
Published: 2023-03-12 15:21:19

<!DOCTYPE html>
<html>
<body>
<p>Access a JSON object using dot notation.</p>
<p id="bca"></p>
<script>
var myObj, x;
myObj = {"name":"Munira","age":19,"car":null};
x=myObj["name"];
document.getElementById("bca").innerHTML = x;
</script>
</body>
</html>
Dot notation json
Published: 2023-03-12 15:20:37

<!DOCTYPE html>
<html>
<body>
<p>Access a JSON object using dot notation:</p>
<p id="bca"</p>
<script>
var myObj,x;
myObj = {"name":"Munira","age":19,"car":null};
x=myObj.name;
document.getElementById("bca").innerHTML = x;
</script>
</body>
</html>
Json in tabular form
Published: 2023-03-12 15:18:45

<!DOCTYPE html>
<html>
<body>
<p> Access a JSON </p>
<p id="sybca"></p>
<script>
var data, x;
data={name:"Munira",age:19,city:"Vadodara"};
x="<table border=2px>"+
"<tr>"+
"<th>Name</th>"+
"<td>"+data.name+"</td>"+
"</tr>"+
"<tr>"+
"<th>Age</th>"+
"<td>"+data.age+"</td>"+
"</tr>"+
"<tr>"+
"<th>City</th>"+
"<td>"+data.city+"</td>"+
"</tr>"+
"</table>";
document.getElementById("sybca").innerHTML = x;
</script>
</body>
</html>
Json type
Published: 2023-03-12 15:16:44

<!DOCTYPE html>
<html>
<body>
<p> Access a JSON </p>
<p id="yourf"></p>
<script>
var data, x;
data={name:"yourdadaf",age:199,city:"ahmd"};
x=data.name + "<br>" +data.age+ "<br>" +data.city;
document.getElementById("yourf").innerHTML = x;
</script>
</body>
</html>
From Cafe to Website: Exploring SSR and SSG through Metaphors
Tags: webdev, ssr, ssg, beginners
Published: 2023-03-12 14:47:49

As a developer, you may have heard the terms "SSR" and "SSG" thrown around, but what do they actually mean? In this article, we'll provide a high-level overview of both concepts using metaphors that are easy for beginners to understand.

## SSR: The Custom-Made Coffee

Imagine you're at a cafe, and you order a coffee. The barista takes your order and starts making your coffee from scratch, using fresh beans and milk. This is similar to Server-Side Rendering (SSR). When you request a web page that uses SSR, the server generates the HTML content for that page on-the-fly, right there in response to your request. This can be useful for web pages that have dynamic content that needs to be personalized for each user.

## SSG: The Pre-Made Coffee

Now imagine you're at the same cafe, and you notice that there are pre-made coffees sitting on the counter, ready for customers to grab and go. This is similar to Static Site Generation (SSG). When you build a website using SSG, the server generates all the HTML pages in advance, based on your source code and content. These pre-made pages are then served to users as they request them. This can be useful for websites that have static content that doesn't change often.

## Which One is Right for You?

So, which approach should you use? It depends on the needs of your website. If you have a website with dynamic content that needs to be personalized for each user, then SSR may be the way to go. On the other hand, if your website has static content that doesn't change often, then SSG may be a better choice.

## Conclusion

In summary, Server-Side Rendering (SSR) is like a custom-made coffee at a cafe, where the web page is generated on-the-fly as the user requests it. Static Site Generation (SSG), on the other hand, is like a pre-made coffee that's waiting for you at the counter, based on the website's source code and content. By using these metaphors, we hope you now have a better understanding of these web development concepts, and can choose the right approach for your own website.
What Is Storybook in React Native?
Tags: reactnative, storybo, javascript, react
Published: 2023-03-12 14:37:49

If you’re a developer working with React Native, you may have heard of Storybook. It’s a tool that allows developers to create and test UI components independently, outside of the main app. But what exactly is Storybook, and how can it be used in React Native development?

In this post, we’ll take a closer look at Storybook in React Native, including its benefits and how to set it up.

What Is Storybook?

Storybook is a UI development environment that allows developers to create and test UI components independently. It provides a separate environment for developers to build and test components, which can be used in different projects or across multiple applications.

In Storybook, each UI component is a “story”, which is a visual representation of the component’s different states and variations. Developers can create stories for each component, which can be viewed and interacted with in isolation.

What Are the Benefits of Using Storybook in React Native?

Using Storybook in React Native development can offer several benefits, including:

Faster development: By creating and testing components independently, developers can work more efficiently and avoid delays caused by dependencies on other parts of the app.
Consistent design: Storybook can help ensure that design is consistent across the app, by providing a foundation for achieving coherent design.
Fewer errors: Testing components in isolation can help catch errors and bugs early on, before they affect the main app.
Better collaboration: Storybook allows designers and developers to work together more effectively, by providing a shared environment for testing and discussing components.
How to Set Up Storybook in React Native

Setting up Storybook in React Native is straightforward. Here are the basic steps:

Install Storybook: Install Storybook using npm or yarn.
Create a configuration file: Create a configuration file for Storybook in your React Native project.
Define stories: Define stories for each UI component that you want to test.
Start Storybook: Start Storybook using the command line interface.
Once Storybook is set up, you can begin creating and testing components independently, and use them in your React Native app as needed.

Conclusion

Storybook is a powerful tool for React Native development, offering benefits such as faster development, consistent design, fewer errors, and better collaboration. By setting up Storybook and using it to create and test components, developers can work more efficiently and effectively, and create better apps as a result.
Why Use Sass with React Native?
Tags: reactnative, sass, react, javascript
Published: 2023-03-12 14:36:09

If you’re a React Native developer, you’ve probably heard of Sass, the popular CSS preprocessor. Sass can be a powerful tool for creating maintainable and reusable styles in your React Native apps. In this post, we’ll explore how to use Sass with React Native and some of the benefits it can provide.

Sass provides several benefits when used with React Native. Here are a few:

1. Modularity
Sass allows you to break down your styles into smaller, more manageable pieces. This makes it easier to organize your styles and reuse them throughout your app.

2. Variables
Sass allows you to define variables that can be used throughout your styles. This makes it easy to make global style changes by simply updating a variable value.

3. Nesting
Sass allows you to nest your CSS rules, making it easier to write and read your styles. This also helps you avoid conflicts and keeps your code organized.

4. Mixins
Sass provides mixins, which are reusable blocks of code that can be included in your styles. This can help you reduce repetition and keep your code DRY (Don’t Repeat Yourself).

How to Use Sass with React Native
Using Sass with React Native is easy. Here’s how to set it up:

Install the node-sass package using npm:
`npm install node-sass --save-dev`
2. Create a .scss file and write your styles using Sass syntax:

```
$primary-color: #007aff;

.button {
  background-color: $primary-color;
  border-radius: 4px;
  padding: 10px;
  color: #fff;

  &:hover {
    background-color: darken($primary-color, 10%);
  }
}
```
3. Import your .scss file in your React Native component:

```
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles.scss';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, world!</Text>
      <Button title="Click me" style={styles.button} />
    </View>
  );
};
```

export default MyComponent;
4. Use the node-sass package to compile your Sass styles into regular CSS:

`npx node-sass styles.scss styles.css`
5. Add your compiled CSS file to your React Native project:

```
import React from 'react';
import { View, Text } from 'react-native';
import styles from './styles.css';

const MyComponent = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, world!</Text>
      <Button title="Click me" style={styles.button} />
    </View>
  );
};
```

export default MyComponent;And that’s it! You can now use Sass with React Native and enjoy all of its benefits.
And that’s it! You can now use Sass with React Native and enjoy all of its benefits.

Conclusion
Using Sass with React Native can help you write more maintainable and reusable styles. Sass provides several features, including variables, nesting, and mixins, that can help you write cleaner and more organized styles. By following the steps above, you can easily set up Sass in your React Native project and start enjoying its benefits.
Javascript bilan tanishuv
Published: 2023-03-12 14:17:28

## 1. **JavaScript nima va u bilan nima qila olamiz?**

JavaScript - bu veb-saytlarni interaktiv va ulardan foydalanishni harakatga keltiradigan dasturlash tili. saytga foydalanuvchi tugmani bosganda, shaklni to‘ldirganda yoki sahifani pastga aylantirganda nima qilish kerakligini aytadigan ko‘rsatmalar to‘plamiga o‘xshaydi.

JavaScript yordamida veb-ishlab chiquvchilar to'g'ridan-to'g'ri veb-brauzerda ishlaydigan qalqib chiquvchi oynalar, animatsiyalar va o'yinlar kabi narsalarni yaratishi mumkin.

## HTML, CSS VA JAVASCRIPT O'RTASIDAGI FARQ:

![HTML, CSS VA JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7q46jzie4kciobthoe58.jpg)

## 2. **Javascriptda Hello World**

```javascript
console.log("hello world")
```
Kotlin fundamentals Part I: variables & constants
Tags: kotlin, android, programming, beginners
Published: 2023-03-12 14:13:58


Variables are the building blocks to know when you learn a new programming language. In today's article we are going to talk about variables in Kotlin.

## Declaring variables: val and var

To declare a variable in Kotlin we use the keyword **val** or **var**. If declared with val, a variable is immutable. It means that once set the value of that variable can't be changed throughout the execution of the program. On the other hand, if a variable is declared with the keyword var, its value can change during the execution of the program.

```kotlin
val age = 18 // value can't change
var name = "Lionel Messi"
```

When using the val keyword to declare a variable, you must set the initial value for that variable.

Kotlin is a statically typed language which means that every variable should have a specific type. To specify a type when declaring a variable, you put a semicolon and the type after the variable name

```kotlin
val age: Int = 18
val salary: Double = 3500.5
var name: String = "David"
var isAdmin: Boolean = false
```

Kotlin has built-in types like other programming language:

- Int for integers
- Double for floating numbers
- Boolean for boolean value
- String for text

Although, you are not forced to specify the variable type thanks to a mechanism called "type inference". It means that Kotlin can infer (or simply guess ) the type of the variable

```kotlin
val country = "Madagascar"
```

In the example, Kotlin will assume the the variable country is a String due to the presence of the double quotes

## Define a constant

To define a constant in Kotlin you need to define a dedicated class and a companion object inside the class

```kotlin
class Constants {
    companion object {
        const val NUMBER_OF_DAYS_IN_YEAR = 365
    }
}
```

To use that constant in your code, you need to import it like shown in the example below

```kotlin
import Constants.Companion.NUMBER_OF_DAYS_IN_YEAR
fun main() {
    println("One year has $NUMBER_OF_DAYS_IN_YEAR")
}
```

## Working with String

To create a string you can call the String constructor and assign it to a variable

```kotlin
val myString = String()
```

Or by assigning a value when creating the variable

```kotlin
val myString = "Hello Kotlin"
```

To get the length of a string, use the length property

```kotlin
val myString = "Kotlin"
myString.length
```

Many methods are available for string manipulation

```kotlin
val myString = "Hello World"
myString.uppercase() // "HELLO WORLD"
val position = myString.indexOf("W") // 7
myString.substring(position) // "World"
```

Like in Java, you can build a string using the StringBuilder class

```kotlin
var builder = StringBuilder("Hello EveryOne ")
    builder.append("Kotlin is cool")
```

It will create the string "Hello EveryOne. Kotlin is cool"

That's all for today. See you in my next article