teleren/devto huggingface dataset:
Eclipse Theia - 方便客製化的IDE
Tags: theia
Published: 2022-06-04 08:02:46

訂閱patreon即可看到更多文章 https://www.patreon.com/wade3c
Youtube頻道 https://www.youtube.com/c/增廣建文

---

專門為了網頁瀏覽器而生的開源IDE，跟VScode的作法剛好相反過來

像是著名的Gitpod平台使用的就是Eclipse Theia (Gitpod後期有超多IDE可選)

![image.png](https://res.craft.do/user/full/71bea674-0503-893e-0a7a-91e236797ff9/doc/90EB6273-B5A0-48C4-AAEE-E485B94D2A92/69f2cb82-5ab9-49cd-9255-e4f98d0314e1)

整體介面會和VScode十分的雷同

## Install

一開始推出主要focus在網頁瀏覽器上使用，後來也有推出用electron包的desktop版

### Docker

> 由於官方比較建議使用Blueprint來包成desktop app

> 目前dockerhub上的官方image已經被下架，需要自己build或是找第三方

> [https://github.com/theia-ide/theia-apps#theia-docker](https://github.com/theia-ide/theia-apps#theia-docker)

他比code-server的image好，有為了一些語言先打包好對應環境的docker image

#### Editor Only (Web Dev)

預設使用的port是3000

```shell
docker run -d -p 3000:3000 -v "$(pwd):/home/project:cached" elswork/theia
```

### Gitpod

> 對於Gitpod想要有更多了解的話可以參考 [Gitpod](craftdocs://open?blockId=4d7349dc-303a-49b9-9420-74e050e132d8&spaceId=71bea674-0503-893e-0a7a-91e236797ff9)

相較於docker image並沒有維護了，for Gitpod的Dockefile倒是還有在維護

可以在自己架的Gitpod平台或是官方架好的去測試

#### Gitpod.io

如果用的是Gitpod官方架的平台

直接點 [https://gitpod.io/#https://github.com/eclipse-theia/theia](https://gitpod.io/#https://github.com/eclipse-theia/theia) 就可以開始體驗了

由於他這時是開發模式所以還需要下指令去啟動IDE (以前打開就會是theia介面，現在是VScode)

```shell
yarn browser start ../.. --hostname 0.0.0.0
```

## Build Your Own

透過修改Dockerfile可以建立適合自己的開發環境，撰寫js的話則可以達成客製化的IDE

### Eclipse Theia Blueprint

讓你可以實作自己會用到的桌面app，這也是Eclipse Theia包成desktop app的方法

使用的環境並不限定一定要在實體機器上，依舊可以在docker內進行開發

未來會逐漸取代過往使用的electron

----

## Reference

[Theia - Cloud and Desktop IDE Platform](https://theia-ide.org/)

[theia/Developing.md at master · eclipse-theia/theia](https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#prerequisites)
Talk to people who are on the same site 🌎 | Chrome Extension
Tags: javascript, webdev, react, programming
Published: 2022-06-04 08:01:35

Hello Coders 👋

For past few weeks, I've been working on a **web extension** 🌎 for **Chromium Base Browsers**.

## What it does? 🤔

An extension that will allow you to talk to people over the internet, who are in the **same website/webpage** as you are in, assuming they've installed the app as well.

Can you imagine how exciting 🤩 this is. I felt the same when this idea stricken my mind.

With unlimited possibilities 🤩

- Talk to people with similar interests
- Talk to people before making any transaction on an eCommerce site.

## How can I use it? 🤔

So, just yesterday I've submitted it for the review, it may take up-to 3days or so to get live on Chrome web store.

So stay connected and subscribed, I'll post an article once it goes live.

---

## ✨ Update, The Extension is now 🔴 Live ✨

{% embed https://dev.to/rajeshj3/hitchweb-browser-extension-talk-to-people-on-same-website-1ic %}

---

Thanks,
happy coding
Count Number of Pairs With Absolute Difference K
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 08:00:42

Given an integer array `nums` and an integer `k`, return _the number of pairs_ `(i, j)` _where_ `i < j` _such that_ `|nums[i] - nums[j]| == k`.

The value of `|x|` is defined as:

*   `x` if `x >= 0`.
*   `-x` if `x < 0`.

**Example 1:**

**Input:** nums = \[1,2,2,1\], k = 1
**Output:** 4
**Explanation:** The pairs with an absolute difference of 1 are:
- \[**1**,**2**,2,1\]
- \[**1**,2,**2**,1\]
- \[1,**2**,2,**1**\]
- \[1,2,**2**,**1**\]

**Example 2:**

**Input:** nums = \[1,3\], k = 3
**Output:** 0
**Explanation:** There are no pairs with an absolute difference of 3.

**Example 3:**

**Input:** nums = \[3,2,1,5,4\], k = 2
**Output:** 3
**Explanation:** The pairs with an absolute difference of 2 are:
- \[**3**,2,**1**,5,4\]
- \[**3**,2,1,**5**,4\]
- \[3,**2**,1,5,**4**\]

**Constraints:**

*   `1 <= nums.length <= 200`
*   `1 <= nums[i] <= 100`
*   `1 <= k <= 99`

**SOLUTION:**

    class Solution:
        def countKDifference(self, nums: List[int], k: int) -> int:
            exists = {}
            ctr = 0
            for i, num in enumerate(nums):
                exists[num] = exists.get(num, []) + [i]
            for i, num in enumerate(nums):
                for val in [num - k, num + k]:
                    if val in exists:
                        for j in exists[val]:
                            if j > i:
                                ctr += 1
            return ctr
A Quick 10-Second Programming Joke For Today
Tags: jokes, dailydeveloperjokes
Published: 2022-06-04 08:00:24

---
title: "A Quick 10-Second Programming Joke For Today"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12595d30baa.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ How does a programmer open a jar for their significant other?

___A:___ They install Java
 -->
Why Linux developers need Docker Desktop for Linux?
Published: 2022-06-04 07:59:19

One common reason why Linux developers were waiting for [Docker Desktop for Linux](https://docs.docker.com/desktop/linux/install/) product was to have unified Docker experience across all major operating systems, be it [Ubuntu](https://desktop.docker.com/linux/main/amd64/docker-desktop-4.8.1-amd64.deb?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64)(DEB),  [Red Hat](https://desktop.docker.com/linux/main/amd64/docker-desktop-4.8.1-x86_64.rpm?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64)(RPM) or [Arch Linux](https://desktop.docker.com/linux/main/amd64/docker-desktop-4.8.2-x86_64.pkg.tar.zst?utm_source=docker&utm_medium=webreferral&utm_campaign=docs-driven-download-linux-amd64)(Pacman).  Installing and maintaining Docker binaries on all these diverse Linux platform is still painful. Keeping up the latest Docker releases still require refreshing repository indexes and ensuring that the system packaging management doesn’t break.

With this new product offering, it’s always easy to keep your Docker version up-to-date and officially supported by Docker Team. The new Docker Desktop UI makes it so much easier to manage volumes, containers and images, as well as providing insights in to the Docker processes running locally on your machine.

Not only this, [Docker Desktop allows you to run Kubernetes too](https://docs.docker.com/get-started/kube-deploy/). Installing Kubernetes is still not an easy task, that’s the reason why we have multitude of Kubernetes tools available in the market to make it seamless. Thanks to Docker Desktop, now you don’t really need to rely on 3rd party tool to install and maintain the latest version of Kubernetes on your desktop system.

In this blog post, you will see how to get started with Docker Desktop for Linux for the first time.

## Getting Started

Download the correct package for your Linux distribution and install it with the corresponding package manager.

- [Install on Debian](https://docs.docker.com/desktop/linux/install/debian/)
- [Install on Fedora](https://docs.docker.com/desktop/linux/install/fedora/)
- [Install on Ubuntu](https://docs.docker.com/desktop/linux/install/ubuntu/)
- [Install on Arch](https://docs.docker.com/desktop/linux/install/archlinux/)

I have Ubuntu 22.04 installed on my HP Pavilion, hence I will go ahead and download the latest Docker Desktop 4.8.1 DEB package for my system.

[Read the complete story](https://collabnix.com/a-first-look-at-docker-desktop-for-linux/)
SITE TO SITE CONNECTIVITY
Published: 2022-06-04 07:53:01

How to establish site to site connectivity between your AWS account and client's on-premise network? How the setup is done?

STEP 1:-
CREATE YOUR VPC, and configure it using subnets, internet gateway, route tables etc.(use nat-gateway if you are using private subnet)

STEP 2:-
Go to Virtual Private Gateway.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63ge9homl6h1jwcbu86p.png)
Then click on Create Virtual private gateway -> Give a name -> then click on create.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ptv36meyt9yr6io1rf9f.png)
Now attach it to your VPC.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqdw2ha1bc9mmt0hi50c.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a86nt7a1pxcvl5g4f28x.png)

STEP 3:-
Go to Customer Gateway.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvr8c03phzzgiewiwmz5.png)
Create -> Give a name tag -> Then allocate IP( This IP should be given by the on-premise client) -> Then click on create.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdxwalhttubno2fxl57s.png)

STEP 4:-
Go to Site to Site VPN Connection.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l8d3msyrgic4wlt4rrjx.png)
Then click on create -> give name -> select virtual private gateway -> select customer gateway -> change the routing options from dynamic to static -> static preferences (give the subnet details of the customer) -> click on create Vpn connection.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yhc8soclp9htm86vh3wj.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/au3zi3yiqxg3yzriitxt.png)

Then select the Vpn connectivity and wait for the status gets active and we can see that in the tunnel details the status is down.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1lm9e98ycjb27ongrqx.png)

STEP 5:-
We need to configure the route table of VPC.

Choose the route table you want to propagate.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqfvpxgz3kezmkilpohi.png)
Then edit-> route propagation-> check on enable and save.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w535hxc8sejgl8tc5gu.png)

Then again go to VPN and download configuration and set the values accordingly.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yu9so0o42931jrmgi41b.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/68rpwlz8t4ey6tiomk9z.png)

The text file which is downloaded consists of all the details of the two tunnels and it is given to the client so they will establish connectivity at their end.
When the connection would be done the tunnel's status will be up.
Which means we are successful in creating site to site connectivity.

**NOTE:-**
We need to ask the customers 2 things-
1. Public IP of gateway .
2. Subnet details.
How to setup Java on Apple Mac M1 Pro
Tags: java, macos
Published: 2022-06-04 07:50:22

Java™ is the world's leading programming language and platform. The Adoptium Working Group promotes and supports high-quality, TCK certified runtimes and associated technology for use across the Java™ ecosystem. Eclipse Temurin is the name of the OpenJDK distribution from Adoptium.

The Eclipse Temurin binaries are provided at no cost to you by Adoptium to use, forever, under the terms of the "GNU General Public License, version 2 with the Classpath Exception". The Eclipse Temurin™ project provides code and processes that support the building of runtime binaries and associated technologies that are high performance, enterprise-caliber, cross-platform, open-source licensed, and Java SE TCK-tested for general use across the Java ecosystem.

Follow the below steps to get OpenJDK installed in your macOS 12.4 Monterey:

## Install Homebrew

```
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
```

## Install OpenJDK

```
$brew install --cask temurin
```

# Install a specific version

```
$brew tap homebrew/cask-versions
$sudo softwareupdate --install-rosetta
$brew install --cask temurin8
$brew install --cask temurin11
```

## Verify if Java is installed

The package installer will put the JDK into this location:
/Library/Java/JavaVirtualMachines/temurin-17.jdk/

```
java --version
openjdk 18.0.1 2022-04-19
OpenJDK Runtime Environment Temurin-18.0.1+10 (build 18.0.1+10)
OpenJDK 64-Bit Server VM Temurin-18.0.1+10 (build 18.0.1+10, mixed mode)
```
Big tech system and database management.
Tags: database, architecture, api, webdev
Published: 2022-06-04 07:37:25

Me and my friends developed a small social media and chat application, though we used Firebase as our database, and as we are newbies, I'm sure we didn't use the best practices and scaling the app would be a nightmare. As this was a hobby project, none of us really care about scaling.

But this got us to thinking, how do big tech companies like Facebook, Instagram and Snapchat to name a few, manage their user database and what kind of structure they use, I understand this is the kind of information that doesn't get out, I'd just like an insight into what are the best practices for large systems and what kind of databases are used and preferred and why?

Any input would be valuable. Thank you.
Summary Ranges
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 07:30:37

You are given a **sorted unique** integer array `nums`.

A **range** `[a,b]` is the set of all integers from `a` to `b` (inclusive).

Return _the **smallest sorted** list of ranges that **cover all the numbers in the array exactly**_. That is, each element of `nums` is covered by exactly one of the ranges, and there is no integer `x` such that `x` is in one of the ranges but not in `nums`.

Each range `[a,b]` in the list should be output as:

*   `"a->b"` if `a != b`
*   `"a"` if `a == b`

**Example 1:**

**Input:** nums = \[0,1,2,4,5,7\]
**Output:** \["0->2","4->5","7"\]
**Explanation:** The ranges are:
\[0,2\] --> "0->2"
\[4,5\] --> "4->5"
\[7,7\] --> "7"

**Example 2:**

**Input:** nums = \[0,2,3,4,6,8,9\]
**Output:** \["0","2->4","6","8->9"\]
**Explanation:** The ranges are:
\[0,0\] --> "0"
\[2,4\] --> "2->4"
\[6,6\] --> "6"
\[8,9\] --> "8->9"

**Constraints:**

*   `0 <= nums.length <= 20`
*   `-231 <= nums[i] <= 231 - 1`
*   All the values of `nums` are **unique**.
*   `nums` is sorted in ascending order.

**SOLUTION:**

    class Solution:
        def summaryRanges(self, nums: List[int]) -> List[str]:
            n = len(nums)
            if n == 0:
                return []
            ranges = [[nums[0]]]
            for i in range(1, n):
                if nums[i] == ranges[-1][-1] + 1:
                    ranges[-1].append(nums[i])
                else:
                    ranges.append([nums[i]])
            m = len(ranges)
            for i in range(m):
                if len(ranges[i]) == 1:
                    ranges[i] = "{}".format(ranges[i][0])
                else:
                    ranges[i] = "{}->{}".format(ranges[i][0], ranges[i][-1])
            return ranges
Closure and Scope in JavaScript
Tags: javascript, beginners, webdev
Published: 2022-06-04 07:11:04

Just heard someone mentioning closure and scope and you've no idea what they are? I got you.

Let's have a brief look over that they mean:

- Scope refers to the variables and functions within a block of code. 
- Closure is when a function is able to access and use variables from outside its own scope.

The key difference between scope and closure is that Scope refers to variables that are accessible to a certain portion of code, while closure is when a function remembers the variables from the scope in which it was created, even if that scope no longer exists.

Confused? here is a simple example to show how closure works:

Suppose we have a function called Add() that takes in a single number as an argument. This function returns another function that takes in a second number, adds the two numbers together, and returns the result:

```
function Add(x) {
  return function(y) {
    return x + y;
  };
}
```

Now, if we create a new variable called addFive and set it equal to the result of calling Add() with 5 as an argument, we can see that the addFive function has access to the x variable from the Add() function:

```
const addFive = Add(5);
console.log(addFive(2)); // 7
```

This is because the addFive function has closure over the x variable from the Add() function. The x variable is not declared inside of the addFive function, but the function still has access to it.

There are a few things to keep in mind with closures. 

- If a function has closure over a variable, that variable will stay in memory as long as the function is used. This can lead to memory leaks if the function is never called or is called but never removed from memory.

- Functions with closure can access variables from any scope, not just the immediate scope in which they are defined. So, if a function has closure over a global variable, it can modify that variable even if it is not defined inside of the function.

- Because functions with closure can access variables from any scope, they can also access variables from any future scope. So, if a function is defined inside of another function, it will have closure over all of the variables from the outer function. This can be used to create closures that are variables in themselves:

```
function Counter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

let counter = Counter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
```

In above code we've a counter that can be incremented and accessed from any scope. The counter function has closure over the count variable, which means that the count variable will stay in memory as long as the counter function is used.

Closures can be a powerful tool, but they should be used with caution. Because they can access variables from any scope, they can lead to unexpected results.

So what are you waiting for, fire up the editor and try it all yourself.

Feel free to comment with what you have learnt or any queries that you've.
SwiftUI ViewModifiers
Tags: swift, ios, viewsystem
Published: 2022-06-04 07:04:52

---
title: SwiftUI ViewModifiers
published: true
description: Using protocols
tags: swift, swift, iOS,viewsystem
---

![iOS App preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s0tr04csmw6wycru6iic.jpeg)

A view modifier is a modifier that you apply to a view such as **Text** or **Label** or another modifier such as chained **font()** or **foreground()** producing a different version of the original modifier.

> Protocol

```swift
protocol ViewModifier
```

### Basic Usage

```swift
Text("Hello World!")
    .bold()
    .font(.title)
    .foregoround(.yellow)
```

### Creating a Custom View Modifiers

1  Create a struct that conforms to the **ViewModifier Protocol**

```swift
struct PrimaryTitleTextModifier: ViewModifier {}
```

2 Compose properties and return them as a **view**

```swift
struct PrimaryTitleStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.title)
            .padding()
            .overlay {
                RoundedRectangle(cornerRadius: 15)
                    .stroke(lineWidth: 6)
            }
            .foregroundColor(.black)
    }
}

struct SecondaryTitleStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.title3)
            .padding()
            .overlay {
                RoundedRectangle(cornerRadius: 15)
                    .stroke(lineWidth: 6)
            }
            .foregroundColor(.gray)
    }
}
```

3 Define an **extension** to **View** that itself integrates the new modifier

```swift
extension View {
    func applyPrimaryTitleStyle() -> some View {
        modifier(PrimaryTitleStyle)
    }
}
```

4 Apply the property to any view like so...

```swift
Text("Tsavo National Park")
    .applyPrimaryTitleStyle()
```
Increasing Order Search Tree
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 07:00:44

Given the `root` of a binary search tree, rearrange the tree in **in-order** so that the leftmost node in the tree is now the root of the tree, and every node has no left child and only one right child.

**Example 1:**

![](https://assets.leetcode.com/uploads/2020/11/17/ex1.jpg)

**Input:** root = \[5,3,6,2,4,null,8,1,null,null,null,7,9\]
**Output:** \[1,null,2,null,3,null,4,null,5,null,6,null,7,null,8,null,9\]

**Example 2:**

![](https://assets.leetcode.com/uploads/2020/11/17/ex2.jpg)

**Input:** root = \[5,1,7\]
**Output:** \[1,null,5,null,7\]

**Constraints:**

*   The number of nodes in the given tree will be in the range `[1, 100]`.
*   `0 <= Node.val <= 1000`

**SOLUTION:**

    # Definition for a binary tree node.
    # class TreeNode:
    #     def __init__(self, val=0, left=None, right=None):
    #         self.val = val
    #         self.left = left
    #         self.right = right
    class Solution:
        def insert(self, root, key):
            if root:
                if key <= root.val:
                    root.left = self.insert(root.left, key)
                else:
                    root.right = self.insert(root.right, key)
            else:
                root = TreeNode(val = key)
            return root
        
        def insort(self, root):
            if root:
                self.insort(root.left)
                self.newroot = self.insert(self.newroot, root.val)
                self.insort(root.right)
        
        def increasingBST(self, root: TreeNode) -> TreeNode:
            self.newroot = None
            self.insort(root)
            return self.newroot