teleren/devto huggingface dataset:
TypeScript vs JavaScript
Tags: typescript, javascript, webdev
Published: 2020-12-11 15:28:53

## Why typescript?

TypeScript is an open source programming language, created and maintained by the Microsoft team that reinforces the shortcomings of JavaScript by giving it superpowers.

Those familiar with C # will find the use of TypeScript very familiar and this is because in both projects the administrator is Anders Hejlsberg.

TypeScript extends the features of object-oriented programming and makes it a typed language; that is, we can specify the type of our data.

for example:

```typescript
let name: string = "JheysonDev";
let age: number = 15;
let isDev: boolean = true;

console.log(`${name} ${isDev ? "is a developer" : "not is a developer"} ${age} year old`)
```

As we can see in the example, unlike in javascript, a `:` after the declaration of a variable, a function is added and then a word like `number` that means the data type

typescript also helps to detect errors before being interpreted as has been demonstrated in companies like google, facebook or Microsoft and in projects like vue or angular

## Why javascript?
JavaScript was originally developed by Netscape's Brendan Eich under the name Mocha, which was later renamed to LiveScript, finally becoming JavaScript. The name change roughly coincided with the time when Netscape added support for Java technology in its Netscape Navigator web browser in version 2002 in December 1995. The naming caused confusion, giving the impression that the language is an extension of Java , and has been characterized by many as a Netscape marketing strategy to gain prestige and innovate in the realm of new web programming language.

JavaScript is an interpreted programming language, dialect of the ECMAScript standard. It is defined as object-oriented, prototype-based, imperative, weakly typed, and dynamic.

Unlike typescript, javascript is easier for beginners since adding types has a higher learning curve.

There are also some modules that, despite having been on the market for many years, typescript are still not compatible with it.

## Conclusion
Using typescript can become somewhat tedious, especially if you are learning and do not know javascript very well but it also rewards us with a type system that helps us create better software, however both can coexist together in a project because in the end typescript depends on javascript to work
🚀10 Trending projects on GitHub for web developers - 11th December 2020
Tags: react, typescript, css, javascript
Published: 2020-12-11 15:28:16

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

### 1. Nest

A progressive Node.js framework for building efficient, scalable, and enterprise-grade server-side applications on top of TypeScript & JavaScript (ES6, ES7, ES8) 

{% github nestjs/nest %}

---

### 2. Elastic UI Framework

The Elastic UI Framework is a collection of React UI components for quickly building user interfaces at Elastic. Not using React? No problem! You can still use the CSS behind each component.

{% github elastic/eui %}

---

### 3. Awesome Advent of Code

A collection of awesome resources related to the yearly Advent of Code challenge.

{% github Bogdanp/awesome-advent-of-code %}

---

### 4. NextAuth.js

NextAuth.js is a complete open source authentication solution for Next.js applications. It is designed from the ground up to support Next.js and Serverless.

{% github nextauthjs/next-auth %}

---

### 5. AR.js - Augmented Reality on the Web

AR.js is a lightweight library for Augmented Reality on the Web, coming with features like Image Tracking, Location-based AR and Marker tracking.

{% github AR-js-org/AR.js %}

---

### 6. Typed.js

Typed.js is a library that types. Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.

{% github mattboldt/typed.js %}

---

### 7. react-i18next

Internationalization for react done right. Using the i18next i18n ecosystem.

{% github i18next/react-i18next %}

---

### 8. Tachyons

Functional CSS for humans. Quickly build and design new UI without writing CSS.

{% github tachyons-css/tachyons %}

---

### 9. useAuth

useAuth is designed to be quick to setup. You'll need an account with Auth0 or Netlify Identity and the appropriate access keys.

{% github Swizec/useAuth %}

---

### 10. Weather Icons  

Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons!

{% github erikflowers/weather-icons %}

---

Trending Projects is available as a weekly newsletter please sign up at [www.iainfreestone.com](https://www.iainfreestone.com) to ensure you never miss an issue.

If you enjoyed this article you can [follow me](https://twitter.com/iain_freestone) on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.
From Swing to Compose Desktop #6
Tags: java, kotlin, ux
Published: 2020-12-11 15:14:55

Welcome to the 6. post about my journey of transforming a Java Swing app to Compose for Desktop. Today I will focus on deployment. That is, how to create a ready-to-run app. Luckily, this is very simple:

```kotlin
compose.desktop {
    application {
        mainClass = "com.thomaskuenneth.tkdupefinder.MainKt"
        nativeDistributions {
            targetFormats(TargetFormat.Dmg)
            packageName = "TKDupeFinder"
            version = "0.1-SNAPSHOT"
            description = "Find duplicate files"
            copyright = "© 2020 Thomas Kuenneth. All rights reserved."
            vendor = "Thomas Kuenneth"
        }
    }
}
```

If you add this snippet to your *build.gradle.kts* file, you can initiate the creation of native executables like this:

![Creating native executables](https://dev-to-uploads.s3.amazonaws.com/i/5fu4cjobypleqnozo94c.png)

My example above creates a *.dmg* file which looks like this (when it is opened):

![A beautiful disk image](https://dev-to-uploads.s3.amazonaws.com/i/9ec1pmvgs1h18qou2rva.png)

You can find these artifacts in *build/compose/binaries/main*, assuming your module is called *main*. The *.dmg* file is in, you guessed it, *dmg*. Duke certainly is lovely, but you may want to replace him with an individual app icon. It needs to be provided in OS-specific formats, namely *.icns* for macOS, *.ico* for Windows and *.png* for Linux. Update your build file like this:

```kotlin
nativeDistributions {
  macOS {
    iconFile.set(project.file("app_icon.icns"))
  }
  windows {
    iconFile.set(project.file("app_icon.ico"))
  }
  linux {
    iconFile.set(project.file("app_icon.png"))
  }
}
```

Files named accordingly need to be located in the project base directory. Opening your app produces a nice looking menubar with an about dialog:

![A copyright box](https://dev-to-uploads.s3.amazonaws.com/i/tsfsnnu0gu314q46nkvc.png)

As you can see, all relevant info is grabbed automatically from the build file, even the app name and copyright info are set accordingly. The only thing I seem to not be able to set is the name for **About** and **Quit**. Did you find out how to do this. Please tell me in the comments.

---
[From Swing to Jetpack Compose Desktop #1](https://dev.to/tkuenneth/from-swing-to-jetpack-compose-desktop-1-12kf)
[From Swing to Jetpack Compose Desktop #2](https://dev.to/tkuenneth/from-swing-to-jetpack-compose-desktop-2-4a4h)
[From Swing to Compose Desktop #3](https://dev.to/tkuenneth/from-swing-to-compose-desktop-3-23ck)
[From Swing to Compose Desktop #4](https://dev.to/tkuenneth/from-swing-to-compose-desktop-4-35c1)
[From Swing to Compose Desktop #5](https://dev.to/tkuenneth/from-swing-to-compose-desktop-5-4ehc)
caret-color CSS property
Tags: css
Published: 2020-12-12 02:15:05

---
title: caret-color CSS property
published: true
date: 2020-12-11 15:11:53 UTC
tags: css
canonical_url: https://phongduong.dev/blog/caret-color-css-property/
---

Caret is a cursor in the `input`, `textarea` elements. It shows where the next typed character will be inserted. `caret-color` property sets the color of the caret. It can also be used for the elements with `contenteditable` attribute. The default value of this attribute is `auto`. It will take `currentcolor` and usually black. 

```pug
input
```

```css
input {
	color: red;
}
```

When you type the text in the input, the text color is red. `caret-color` will take the value of `color` property. 

```pug
textarea(rows="5")
```

```css
textarea {
	caret-color: transparent;
}
```

`caret-color` can take `transparent` value but it is hard to see where the cursor is especially when you are inserting in between the text.

```pug
p(contenteditable="true") Please click this text and edit it

```

```css
p[contenteditable="true"] {
	background: black;
	color: yellowgreen;
	caret-color: tomato;
}

```

Although `caret-color` takes the value of `color` property by default, you can set a different value to ensure good visibility.

Here is the full example

{% codepen https://codepen.io/phongduong/pen/pobVQbY %}
Network Request Failed/Network Error in React Native using Laravel API and Android emulator
Published: 2020-12-11 14:54:39

If you are currently working on an app with React Native and you are using Laravel as your backend, you have probably encountered this problem.
And this article will help you solve this problem with just <b>ONE SIMPLE TRICK.</b>

<h1>SOMETIMES THIS PROBLEM IS CAUSED BY HOW YOU START YOUR LARAVEL APP</h1>
We all know how to start a Laravel server with the simple php artisan serve command and that’s the problem.
By starting your Laravel app like that it creates a link for your app which is <i>localhost:8000</i> (the port may be different for you, it might be <i> 3000, 8080 </i> or anything else but we will use <i>8000</i> for this tutorial).
When making an HTTP Request with React Native, there is some kind of conflict because your Android app is run on an emulator which uses localhost too, and instead of sending the request to the localhost on your computer, it sends the request to the phone itself but with a different port and that is why you are getting this error.

<h1>THE TRICK THAT HELPED ME</h1>
```
Microsoft Windows [Version 6.3.9600]
(c) 2013 Microsoft Corporation. All rights reserved.

D:\xampp\htdocs\projects\laravel\blog>php artisan serve --host 10.10.10.2 --port="8000"
Laravel development server started: http://10.10.10.2:8000
```
Just start the server by giving an IP address and a port
It’s just that simple! Start your app as usual but don’t forget to give an IP address and a port, this will help you solve the Network Request Failed error.

NOTE: Replace <i> 10.10.10.2 </i> with your own IP Address, this is just an example.

```
//with axios
await axios.post('http://10.10.10.2:8000/api/user/login', data, headers)
    .then(res => {
      console.log(res.data)
    })
//with Fetch
await fetch('http://10.10.10.2:8000/api/user/login', {
method: "POST",
headers: headers //put your headers,
body: body //put the body here
})

```

And on your mobile app, make sure to use the correct URL in your request.
Make sure that CORS is enabled in your backend to avoid errors related to CORS. Next time I will make make a detailed post about how to enable it and how to solve issues related to CORS.

<h1>CONCLUSION</h1>

Start your Laravel app and enter your IP address and a port
Use the URL in your HTTP Request.
That’s it, I hope this post was useful to you and happy coding!
December 11th, 2020: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-12-11 14:27:08

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![Information flowing through your brain](https://media.giphy.com/media/qKltgF7Aw515K/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-k8n %}

<center>

![Price is Right contestant celebrating](https://media.giphy.com/media/gF29UEqBhSoDY8LHKg/giphy.gif)
</center>
Strictly Typed Functional Programming for Roblox
Tags: functional, hypatia, roblox, lua
Published: 2020-12-11 14:14:07


---
title: Strictly Typed Functional Programming for Roblox 
published: true
description: I managed to get Hypatia, an Elm and PureScript like typed Functional Programming language that compiles to Lua, running in Roblox.
tags: functionalprogramming, hypatia, roblox, lua
canonical_url: https://jessewarden.com/2020/12/strictly-typed-functional-programming-for-roblox.html
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/eurqzfdi27tjr5f6izq6.jpeg
---

I managed to get [Hypatia](https://github.com/kindl/Hypatia), an [Elm](https://elm-lang.org/) and [PureScript](https://www.purescript.org/) like typed Functional Programming language that compiles to [Lua](https://www.lua.org/), running in [Roblox](https://www.roblox.com/). Roblox is a 3D game engine that has a ton of already built games and editor where games are built in Lua. My kids spend way too much time and our money in it. I couldn’t get [Amulet](https://amulet.works/), another similar language, too compile, but Hypatia “spoke to me” more. [Advent of Code 2020](https://adventofcode.com/) this year taught me dealing with no types and race conditions is painful. I really wanted to explore what other language options there are that compile to Lua.

The workflow is you write in Hypatia, compile, make the compiled Lua require statements to the Roblox version, and [Rojo](https://rojo.space/), a [Rust](https://www.rust-lang.org/) built development tool, will sync your Lua directly into Roblox. You can then call the exposed functions directly from other Lua (i.e. Buttons, events, etc). I’m thinking of automating that require change with Python… or maybe Lua.

Compiling Hypatia required a couple of smart [Haskell](https://www.haskell.org/) devs at work to help me compile. [Cabal](https://www.haskell.org/cabal/) didn’t work but [Stack](https://docs.haskellstack.org/en/stable/README/) worked no problem on my Mac M1. Hypatia might compile JavaScript too, not sure.

Anyway, still need to figure out side effects (still learning what the heck a f -> Unit is), and how to deal with coroutines and various other side effects since Hypatia doesn’t handle them like Elm does, but super excited to continue exploring this.

![](https://jessewarden.com/wp-content/uploads/2020/12/1607567400967.jpeg)![](https://jessewarden.com/wp-content/uploads/2020/12/1607567400793.jpeg)![](https://jessewarden.com/wp-content/uploads/2020/12/1607567401935.jpeg)
How to set up node without admin privileges
Tags: node, npm
Published: 2020-12-11 13:53:02

Working on a system with limited admin rights and trying to setup environment variables on such a system can be a pain, so here's how you can setup node without admin rights using these simple steps:

Step 1: Download node.js binaries from the official website (Remember to download binaries, not the installer)

Step 2: Extract the binaries to any desired location  e.g. D:\nodejs

Step 3: Next step is to set-up environment variable for node

Open start and search for environment variables you'll get two options make sure to open "Edit environment variables for your account"

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


Then under user variables for <Your_Username> section click on new (If a variable named PATH is already available select the variable and click on edit)


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


Give variable name as path and give the absolute location of the folder in which you extracted the node.js binaries


That's it open command prompt and run node -v to verify the install.
Anyone else worked on a covid19-related project? 🤓
Tags: showdev, webdev, datascience, covid19
Published: 2020-12-11 13:49:55

The moment the pandemic started I got so overwhelmed by having to compute the consequences of such an unprecedented situation that I couldn't focus on my day job and felt like I had to focus on doing something related to covid19. It helped and I learned a lot in the process.

I ended up making a data visualization page in TypeScript and React that allows for comparing countries' infection trajectories and visualizes the cases and deaths on a simple map. I called it [COVID19.PINK](https://covid19.pink/infection-trajectories) because the color domains were almost the only ones available for covid19 🙃

It's open-source if you want to [check out the details](https://github.com/m3h0w/covid19-coronavirus-react-visualization).

Did you build anything related to the coronavirus? 🤓 What was your motivation? I'd love to see your projects.
The Challenge of the ORM in Java(Simple querying)
Published: 2020-12-11 13:47:32

The ObjectiveSQL is a new ORM framework, it enhances the existed ORM framework capability, the first is simple querying.

### Definition of domain model

```java
@DomainModel
public class Blog {
    private Long id;
    private String title;
    private Integer state;

    @Relation(relationType = RelationType.BELONGS_TO)
    private Author author;
}
```

In MyBatis:

```xml
<mapper>
  <resultMap type="Blog" id="blog">
    <id column="id" property="id" />
    ...
    <association property="author" javaType="Author">
      ...
    </association>
  </resultMap>
  <select id="findBlog" parameterType="int" resultMap="blog">
    ...
  </select>
</mapper>
```

```java
...
BlogMapper mapper = session.getMapper(BlogMapper.class); 
Blog blog = mapper. findBlog(...);
```

In ObjectiveSQL:

```java
Blog blog = Blog.queryByPrimaryKey(1, Blog.BELONGS_TO_AUTHOR);
```

https://github.com/braisdom/ObjectiveSql
Major features from Perl 5.6 to 5.18
Tags: perl, changelog
Published: 2020-12-11 13:38:55

I just wanted to drop a list of (mainly high-level) changes from 5.6 to 5.18, in bulk :smile:

I think I've got this list from taking note watching a rjbs presentation + reddit posts/comments.

For non Perl people, these versions are already old.

## 5.6
- unicode !

## 5.8
- new implementation of threads

## 5.10.0
- use feature
- perl -E
- defined or //=
- named captures
- state vars
- $* and $# deprecated

## 5.10.1 
- resolve issue 5.10.0 (yes deserve a major feature entry)

## 5.12
- change releasing flow
- pkg name version
- pluggable keywords
- version number format
- parent.pm in core
- links in POD L<>

## 5.14
- s//r/r
- block package syntax
- custom ops

## 5.16
- big unicode improvement : e.g. unicode in symbol names
- fc

## 5.18
- experimental warnings
- hash randomization
- regex sets
- lexical subs
- qw() without parenthesis fail

## Conclusion
That's all folks !

![In Perl We Trust](https://dev-to-uploads.s3.amazonaws.com/i/fnwvzitp9wf7kj8xh8ja.jpg)

EDIT: Check the new book [Perl new features](https://perlschool.com/books/perl-new-features/) from **brian d foy**
Web Developer Gift Guide for 2020
Tags: uncategorized, ergonomics, gifts, hardware
Published: 2020-12-17 03:34:49

---
title: Web Developer Gift Guide for 2020
description: Check out these gift ideas for a web developer in your life. These high quality, ergonomic suggestions will make web development easier and more comfortable.
published: true
date: 2020-12-11 13:25:51 UTC
tags: Uncategorized,ergonomics,gifts,hardware
canonical_url: https://raddevon.com/articles/web-developer-gift-guide-for-2020/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wxltg209tgbuhxls4cpb.jpg
---
Check out these gifts for a web developer in your life or for yourself! These will make any web developer more productive. Some of my picks will even make them safer through the magic of ergonomics!

The links to all my recommendations are below the video. 👇

{% youtube TFIcUn51-6s %}

*   [Logitech MX Vertical Wireless Mouse](https://amzn.to/3a0WOzF)
*   [BRILA Wrist rest for mouse](https://amzn.to/3gBrf0B)
*   [XDesk Terra standing desk](https://www.xdesk.com/terra)
*   [A cheaper standing desk alternative](https://www.upliftdesk.com/uplift-v2-standing-desk-v2-or-v2-commercial/?product_config=4853)
*   [Topo Ergodriven standing mat](https://amzn.to/3m6wIOi)
*   [Ducky One 2 Keyboard](https://amzn.to/2Lf4qnV)
*   [1Password password manager (for them)](https://1password.com/giftcards/)
*   [1Password (for you)](https://1password.com/sign-up/)
*   [Backblaze backup service (for them)](https://www.backblaze.com/partner/af9rzg?redirect=gift.htm)
*   [Backblaze (for you)](https://www.backblaze.com/cloud-backup.html#af9rzg)
*   [Sony wireless headphones](https://amzn.to/3gBA7DF) (not the ones I have, but the ones I would get today)
*   [Logitech C920 webcam](https://amzn.to/3qEzk9w)
*   [BZE tripod/selfie stick](https://amzn.to/2JRSXKN)

Share your ideas here or in the comments [on YouTube](https://youtu.be/TFIcUn51-6s). Thanks for watching!
Writing key values from Java to Consul
Tags: java, consul
Published: 2020-12-11 13:23:37

How to write key values to Consul

In the first example we are going to use the HTTP API directly, in the second one we are going to use the Java Consul API ecwid. On [Github](https://github.com/claudioaltamura/spring-cloud-consul-example) you'll find all the examples. So, let's start.

**HTTP API**
In this example we store the value "buon giorno" with the key "message". And all you have to do is a REST PUT operation with `v1/kv` as a path. Here, Consul is reachable at `http://127.0.0.1:8500`. That's it.

```java
var value = "buon giorno";
var keyValuePath = "/config/consul-example/greetings/message";
var resourceUrl = "http://127.0.0.1:8500/v1/kv" + keyValuePath;

HttpRequest request = HttpRequest.newBuilder()
  .uri(new URI(resourceUrl))
  .PUT(HttpRequest.BodyPublishers.ofString(value))
  .build();

HttpClient
  .newBuilder()
  .build()
  .send(request, HttpResponse.BodyHandlers.ofString());
```

**Java Consul API**
The library is quite easy. First you have to create a ConsulClient with an URL. You use that ConsulClient for reading and writing. It's just set* (with a key and the value) and get* methods. With the getKVValue() you get a Response<GetValue> instance. And for the real value you have to call getDecodedValue().  :-)

```java
ConsulClient consulClient = new ConsulClient("http://127.0.0.1:8500");

consulClient.setKVValue("/config/blueprint/greetings/note", "hello");

Response<GetValue> response = consulClient.getKVValue("/config/blueprint/greetings/note");

System.out.println("value: " + response.getValue().getDecodedValue());
```

**Links**
https://www.consul.io/api-docs#http-methods
https://github.com/Ecwid/consul-api