teleren/devto huggingface dataset:
Distant Barcodes
Tags: leetcode, dsa, theabbie
Published: 2022-06-15 04:30:37

In a warehouse, there is a row of barcodes, where the `ith` barcode is `barcodes[i]`.

Rearrange the barcodes so that no two adjacent barcodes are equal. You may return any answer, and it is guaranteed an answer exists.

**Example 1:**

**Input:** barcodes = \[1,1,1,2,2,2\]
**Output:** \[2,1,2,1,2,1\]

**Example 2:**

**Input:** barcodes = \[1,1,1,1,2,2,3,3\]
**Output:** \[1,3,1,3,1,2,1,2\]

**Constraints:**

*   `1 <= barcodes.length <= 10000`
*   `1 <= barcodes[i] <= 10000`

**SOLUTION:**

    import bisect
    
    class Solution:
        def rearrangeBarcodes(self, barcodes: List[int]) -> List[int]:
            n = len(barcodes)
            ctr = {}
            for b in barcodes:
                ctr[b] = ctr.get(b, 0) + 1
            freq = sorted([(-v, k) for k, v in ctr.items()])
            op = []
            while len(op) < n:
                i = 0
                curr = freq[i]
                if len(op) > 0:
                    while curr[1] == op[-1]:
                        i += 1
                        curr = freq[i]
                    c = curr[1]
                else:
                    c = curr[1]
                op.append(c)
                del freq[bisect.bisect_left(freq, curr)]
                if curr[0] + 1 < 0:
                    bisect.insort(freq, (curr[0] + 1, curr[1]))
            return op
compress decompress commands
Published: 2022-06-15 04:27:41

all here
```sh
#*.zip
zip -r demo.zip demo
unzip demo.zip demo

#*.tar.gz
tar -zcvf demo.tar.gz demo
tar -zxvf demo.tar.gz demo

#*.tar.bz2
tar -jcvf demo.tar.bz2 demo
tar -jxvf demo.tar.bz2 demo

#*.tar.xz
tar -Jcvf demo.tar.xz demo
tar -Jxvf demo.tar.xz demo

#*.tar.Z
tar -Zcvf demo.tar.Z demo
tar -Zxvf demo.tar.Z demo

#*.tar.lz4
tar -I lz4 -cf demo.tar.lz4 demo
tar -I lz4 -xf demo.tar.lz4 demo

```
Docker in small scale production (Docker Swarm)
Tags: docker, swarm
Published: 2022-06-15 04:23:34

If you are a micro services builder you have definitely come across the situation where to and how to deploy your docker containers for production without spending too much money and effort. In order to deploy the container in to production environment the platform should have few specifications. 

- Self Healing : The containers should be restarted if there is a execution failure. Also if a container failed to start it must be removed from the stack and replace it with the fresh container instance. 

- Horizontal Scaling and load balancing: If a service container is running it's maximum capacity another cloned instance should be spawned to relieve the increasing capacity. When the load becomes lower the extra spawned container should be deleted. 
 
Docker swarm can be introduced as a small scale deployment method for the small scale production environments. But the docker officials recommend this swarm method not to use for the production environments. But as per my personal opinion swarm mode can be used for the startups whom cannot afford for the larger environments. 
`NOTE: Kubernetes is most sophisticated container orchestration platform for the production environments.` 
Features of Swarm
- Scaling: We can scale up or down the number of containers running for the given service.
- Multi-Host Networking: This swarm mode can be run on the multiple hosts. The hosts need to have a physical network connection. But for the internal inter service communication the Pods need to have a internal network.

![Docker Swarm diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ap0adm1spnws0s8ih90s.png) 

## Enable Docker Swarm in a hosted environment.
For this tutorial I will be using the Ubuntu 20.04 LTS version.
1. Install Docker 
`sudo apt-get update && sudo apt install docker.io`
This installs the docker engine in the ubuntu system.

2. Run docker as sudo less
`sudo groupadd docker`
`sudo usermod -aG docker $USER`

3. Change hostname to FQDNS
`sudo nano /etc/hostname`
It is the best practice to change the hostname to the FQDNS (`manger.omigoz.net`)

4. Enable docker swarm
`docker swarm init`
This will create a swarm named default with the IP address range of 10.0.0.0/8 (by default IP address range.) If you want to edit the default IP range you can use the below command. 
`docker swarm init --default-addr-pool 10.20.0.0/16`

5. In docker swarm we can attach additional workers to the cluster. So there is a way to generate the join command. 
`docker swarm join-token worker`
Also if you want to join a manager node to the cluster you need to generate the separate manger node attaching command. 
`docker swarm join-token manager`


_Ciao Omigoz_
Getting Started with Fluent UI React v9
Tags: fluentui, webdev, react, tutorial
Published: 2022-06-15 04:06:48

[Fluent](https://aka.ms/fluent) is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences—accessibility, internationalization, and performance included.

[Fluent UI React v9](https://react.fluentui.dev) is the UI library focused on React development for Microsoft 365 platforms like Teams Apps, Office Add-ins, and even stand along web app development.

The following is quick tutorial to get you up and running with the latest version of the library.

This tutorial assumes you have a React project up and running like [Create React App](https://create-react-app.dev) and you are ready to add some UI components.

## 1. Install the npm package
Install the component suite package with your favorite package manager

### npm
```
npm install @fluentui/react-components
```
### yarn
```
yarn add @fluentui/react-components
```

## 2. Add a `FluentProvider` and `Theme`
A `FluentProvider` and a `Theme` are required for providing the right visual context for the UI Components so that they render properly. Without it, the components will not have any visuals.

```
import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme } from '@fluentui/react-components';

import App from './App';

ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <App />
  </FluentProvider>,
  document.getElementById('root'),
);
```

## 3. Add Components

Fluent UI React v9 has two categories of components:

1. Stable - Components with stable APIs that will version according to [Semantic Versioning](https://semver.org/). These are exported from the top level package.
2. Preview - Components with APIs that may change or may not have complete feature set. These components are exported out of the `/unstable` deep import

```
import React from 'react';
import ReactDOM from 'react-dom';
import { FluentProvider, webLightTheme, Button } from '@fluentui/react-components';
import { Select } from '@fluetui/react-components/unstable'; // Preview components deep import

ReactDOM.render(
  <FluentProvider theme={webLightTheme}>
    <Button appearance="primary">Hello World!</Button>
    <Select>
      <option>Red</option>
      <option>Green</option>
      <option>Blue</option>
    </Select>
  </FluentProvider>,
  document.getElementById('root'),
);
```
And that's all you need to get started using Fluent UI React v9.

Don't forget to check out [https://react.fluentui.dev](https://react.fluentui.dev) for more code samples and find out the latest on [GitHub](https://github.com/microsoft/fluentui).

Lastly, here's a full CodeSandbox:
{% embed https://codesandbox.io/embed/hello-world-8978l8?fontsize=14&hidenavigation=1&theme=dark %}

Enjoy!
Maximum Number of Coins You Can Get
Tags: leetcode, dsa, theabbie
Published: 2022-06-15 04:00:48

There are `3n` piles of coins of varying size, you and your friends will take piles of coins as follows:

*   In each step, you will choose **any** `3` piles of coins (not necessarily consecutive).
*   Of your choice, Alice will pick the pile with the maximum number of coins.
*   You will pick the next pile with the maximum number of coins.
*   Your friend Bob will pick the last pile.
*   Repeat until there are no more piles of coins.

Given an array of integers `piles` where `piles[i]` is the number of coins in the `ith` pile.

Return the maximum number of coins that you can have.

**Example 1:**

**Input:** piles = \[2,4,1,2,7,8\]
**Output:** 9
**Explanation:** Choose the triplet (2, 7, 8), Alice Pick the pile with 8 coins, you the pile with **7** coins and Bob the last one.
Choose the triplet (1, 2, 4), Alice Pick the pile with 4 coins, you the pile with **2** coins and Bob the last one.
The maximum number of coins which you can have are: 7 + 2 = 9.
On the other hand if we choose this arrangement (1, **2**, 8), (2, **4**, 7) you only get 2 + 4 = 6 coins which is not optimal.

**Example 2:**

**Input:** piles = \[2,4,5\]
**Output:** 4

**Example 3:**

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

**Constraints:**

*   `3 <= piles.length <= 105`
*   `piles.length % 3 == 0`
*   `1 <= piles[i] <= 104`

**SOLUTION:**

    class Solution:
        def maxCoins(self, piles: List[int]) -> int:
            n = len(piles)
            piles.sort()
            score = 0
            i = 0
            j = n
            while j - i >= 3:
                score += piles[j - 2]
                i += 1
                j -= 2
            return score
Getting Started with the Pie, Pyramid, and Funnel Charts in Vue
Tags: webdev, vue
Published: 2022-06-15 03:59:25

Learn how easily you can create and configure Syncfusion’s [Circular and Triangular charts](https://www.syncfusion.com/vue-ui-components/vue-charts) in a Vue app using Visual Studio. In this video, you will learn how to add the Vue Accumulation charts to a project using the Vue CLI tool. You will see how to populate list data and set series types to charts. You will also learn how to add data labels and tooltips in accumulation charts. 

_Product overview_: https://www.syncfusion.com/vue-ui-components/vue-charts

_Explore our tutorial videos_: https://www.syncfusion.com/tutorial-videos

_Download example from GitHub link_: https://github.com/SyncfusionExamples/getting-started-with-the-vue-accumulation-charts-component

{% youtube RySvgo_pihY %}
Best Internet Explorer Troubleshooting Memories
Tags: webdev, discuss, browsers
Published: 2022-06-15 03:47:16

In honor of IE retiring tomorrow June 15, let's talk about our best (or worst depending on your point of view) troubleshooting experiences with Internet Explorer.

---

One of my first tasks at my first web development job was to make sure another developer's site was working in IE 7, 8, and 9. We had an old Windows XP desktop in a corner of the dev room specifically to test IE versions and I probably spent 20 hours fixing issues on that site, hacking through floats and z-indexes and fixing random JavaScript issues (or leaving them alone if the site still seemed to be working). I had always heard about IE being bad but didn't really get it, but after that task... I finally understood.

I haven't worked in IE for a while now and much like how we used to use CSS floats for layouts, I'd almost forgotten how much more tedious troubleshooting CSS used to be.

---

_As an aside I will say that despite all the dunking we like to do on IE, they had smart people working on the browser and the origin of CSS grid came from the IE team so it wasn't all bad in the later years._
Laravel 9 - Create Column after Another Column
Tags: laravel, webdev, migration, mysql
Published: 2022-06-15 03:41:45



**Notice:** Only for MySQL.

If you're adding a new column to the existing table, it doesn't necessarily have to become the last in the list. You can specify after which column it should be created:
```
Schema::table('table', function (Blueprint $table) {
    $table->string('column')->after('column');
});
```

If you're adding a new column to the existing table, it doesn't necessarily have to become the last in the list. You can specify before which column it should be created:
```
Schema::table('table', function (Blueprint $table) {
    $table->string('column')->before('column_2');
});
```

If you want your column to be the first in your table , then use the first method.
```
Schema::table('table', function (Blueprint $table) {
    $table->string('column')->first();
});
```

Also the _after()_ method can now be used to add multiple fields.
```
Schema::table('table', function (Blueprint $table) {
    $table->after('remember_token', function ($table){
        $table->string('column_1')->nullable();
        $table->string('column_2')->nullable();
    });
});
```
Tagged functions / Tagged templates
Published: 2022-06-15 03:32:48

According to MDN docs
_Tags allow you to parse template literals with a function. The first argument of a tag function contains an array of string values. The remaining arguments are related to the expressions._
Let's explore more here.

```
const age = 20;
function name(...args){
  console.log(args);
}
name`My Name is ${age}`
```
This outputs

![Tagged templates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjkeva679ermmkfd5mo9.png)
So, we see the arguments of the tagged template `name` is an array which contains the string literals as an array as first element and the remaining arguments are related to the expression.

This abilty of processing, enables powerful features like the
Styled component syntax.

Let us see an example.
Suppose we have template string which has some expressions bounded in one div and we want to separate out each expression in their own divs.  
For this we can write a tagged template which return the processed string and then we can use document.body to put it on DOM.  
Here is the code
https://jsfiddle.net/abkhfmtz/21/

---

#One pitfall to remember
Because tagged template can parse unicode representation, a invalid unicode will print `undefined`.
```
function name(stringExps){
   console.log(stringExps);
}

name`\u00A9`
name`\xA9`
name`\unicode`
```
The first two function call will print `©` but the last one will print undefined.

---
Find Palindrome With Fixed Length
Tags: leetcode, dsa, theabbie
Published: 2022-06-15 03:30:34

Given an integer array `queries` and a **positive** integer `intLength`, return _an array_ `answer` _where_ `answer[i]` _is either the_ `queries[i]th` _smallest **positive palindrome** of length_ `intLength` _or_ `-1` _if no such palindrome exists_.

A **palindrome** is a number that reads the same backwards and forwards. Palindromes cannot have leading zeros.

**Example 1:**

**Input:** queries = \[1,2,3,4,5,90\], intLength = 3
**Output:** \[101,111,121,131,141,999\]
**Explanation:**
The first few palindromes of length 3 are:
101, 111, 121, 131, 141, 151, 161, 171, 181, 191, 202, ...
The 90th palindrome of length 3 is 999.

**Example 2:**

**Input:** queries = \[2,4,6\], intLength = 4
**Output:** \[1111,1331,1551\]
**Explanation:**
The first six palindromes of length 4 are:
1001, 1111, 1221, 1331, 1441, and 1551.

**Constraints:**

*   `1 <= queries.length <= 5 * 104`
*   `1 <= queries[i] <= 109`
*   `1 <= intLength <= 15`

**SOLUTION:**

    class Solution:
        def kthPalindrome(self, queries: List[int], intLength: int) -> List[int]:
            ogLength = intLength
            isOdd = intLength & 1
            if isOdd:
                intLength += 1
            k = intLength // 2
            k = 10 ** (k - 1)
            op = []
            for q in queries:
                pal = str(k + q - 1)
                if isOdd:
                    pal += pal[::-1][1:]
                else:
                    pal += pal[::-1]
                if len(pal) == ogLength:
                    op.append(int(pal))
                else:
                    op.append(-1)
            return op
Typedream | Made with Next JS
Published: 2022-06-15 03:22:08

![Typedream | Made with Javascript | Next JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1654095858/large_typedream_made_with_next_js_d4b5bee96d.png "Typedream | Made with Javascript | Next JS")


### Create a beautiful website in minutes with the Typedream website builder. Choose a customizable template, add gradient colors, animations, and CMS easily

> 🗂 Display your Notion data beautifully on your website (Airtable, Google Sheets coming soon)
> 🤖 Create an NFT minting site, display your NFT collection with CMS
> 
> ### Typedream is for you.
> Simple to design and manage with #nocode.

## Check out more such amazing projects on our website

[Made with Javascript](https://madewithjavascript.club)

## Want us to feature your project

[Submit your Project to Made with Javascript](https://madewithjavascript.club/submit-project)


You can also write to us for any of your queries at:

[Email Made with Javascript](mailto:madewithjavascript@gmail.com)

## Project already shared on our social media handles.

| SocialMedia | SharedLink |
| ----------- | ---------- |
| Twitter | [Typedream on Twitter](https://twitter.com/withjavascript/status/1536910157283831812?s=20&t=uDVk1cjClFMhkzFGVCWeuQ)
 |
| Medium | [Typedream on Medium](https://ReplaceLink.com)
 |
| Dev.to | [Typedream on Dev.to](https://medium.com/@madewithjavascript/typedream-made-with-next-js-2619ade50cee)
 |
| Facebook | [Typedream on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid0KoY3PFHeTmN5uJeDbGjCAK1Xhfz4mDgeY2qVrYqJuNbTzzg9yScvqBwURzfzVZUal)
 |
| Tumblr | [Typedream on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/687093108002996224?source=share)
 |
| LinkedIn | [Typedream on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6942676102574202880)
 |
| Pinterest | [Typedream on Pinterest](https://pin.it/1nvZRSc)
 |

Filled Under:
 - [Made with Javascript](https://madewithjavascript.club)    
 - [Made with Next JS](https://madewithjavascript.club/categories/next-js)

Make sure to give this post ❤ 50 ❤ hearts, click the 🦄 unicorns 🦄 and follow 👉 @madewithjavascript 👈 for more such awesome showcases. Show you love for the people who have worked so hard!
Vowels of All Substrings
Tags: leetcode, dsa, theabbie
Published: 2022-06-14 20:00:47

Given a string `word`, return _the **sum of the number of vowels** (_`'a'`, `'e'`_,_ `'i'`_,_ `'o'`_, and_ `'u'`_)_ _in every substring of_ `word`.

A **substring** is a contiguous (non-empty) sequence of characters within a string.

**Note:** Due to the large constraints, the answer may not fit in a signed 32-bit integer. Please be careful during the calculations.

**Example 1:**

**Input:** word = "aba"
**Output:** 6
**Explanation:** 
All possible substrings are: "a", "ab", "aba", "b", "ba", and "a".
- "b" has 0 vowels in it
- "a", "ab", "ba", and "a" have 1 vowel each
- "aba" has 2 vowels in it
Hence, the total sum of vowels = 0 + 1 + 1 + 1 + 1 + 2 = 6. 

**Example 2:**

**Input:** word = "abc"
**Output:** 3
**Explanation:** 
All possible substrings are: "a", "ab", "abc", "b", "bc", and "c".
- "a", "ab", and "abc" have 1 vowel each
- "b", "bc", and "c" have 0 vowels each
Hence, the total sum of vowels = 1 + 1 + 1 + 0 + 0 + 0 = 3.

**Example 3:**

**Input:** word = "ltcd"
**Output:** 0
**Explanation:** There are no vowels in any substring of "ltcd".

**Constraints:**

*   `1 <= word.length <= 105`
*   `word` consists of lowercase English letters.

**SOLUTION:**

    class Solution:
        def countVowels(self, word: str) -> int:
            n = len(word)
            vows = {"a", "e", "i", "o", "u"}
            initVowels = 0
            vowelsTill = [initVowels]
            for c in word:
                if c in vows:
                    initVowels += 1
                vowelsTill.append(initVowels)
            total = 0
            for i in range(n, -1, -1):
                total += (2 * i - n) * vowelsTill[i]
            return total
Call Stack in Javascript
Tags: javascript, beginners, programming, tutorial
Published: 2022-06-15 03:21:21


Call Stack is a data structure for javascript interpreters to keep track of function calls in the program. It has two major actions:

Whenever you call a function for its execution, you are pushing it to the stack.
Whenever the execution is completed, the function is popped out of the stack.

`function hungry() {
  eatFruits();
}
function eatFruits() {
  return "I'm eating fruits";
}

// Invoke the `hungry` function
hungry(); `
Getting started with TypeScript and React Native
Published: 2022-06-15 03:07:47

Hola hola,

Using TypeScript in your React Native (RN) projects can seem like a daunting task - and it definitely can be. I would recommend experimenting/practicing in a fresh RN project before updating your production app to TypeScript.

#### Getting Started

[Here](https://github.com/trouthouse-tech/codewiththt-ts-getting-started) is a fresh repo created using the the command found [here](https://reactnative.dev/docs/typescript#getting-started-with-typescript).

#### JSX
One good thing about this endeavor is that our JSX (the stuff between the `return ()`) won't change much.

#### Normal JavaScript Component
```

```
Construct Binary Tree from Preorder and Inorder Traversal
Tags: leetcode, dsa, theabbie
Published: 2022-06-15 03:00:45

Given two integer arrays `preorder` and `inorder` where `preorder` is the preorder traversal of a binary tree and `inorder` is the inorder traversal of the same tree, construct and return _the binary tree_.

**Example 1:**

![](https://assets.leetcode.com/uploads/2021/02/19/tree.jpg)

**Input:** preorder = \[3,9,20,15,7\], inorder = \[9,3,15,20,7\]
**Output:** \[3,9,20,null,null,15,7\]

**Example 2:**

**Input:** preorder = \[-1\], inorder = \[-1\]
**Output:** \[-1\]

**Constraints:**

*   `1 <= preorder.length <= 3000`
*   `inorder.length == preorder.length`
*   `-3000 <= preorder[i], inorder[i] <= 3000`
*   `preorder` and `inorder` consist of **unique** values.
*   Each value of `inorder` also appears in `preorder`.
*   `preorder` is **guaranteed** to be the preorder traversal of the tree.
*   `inorder` is **guaranteed** to be the inorder traversal of the tree.

**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 getRoot(self, p, q):
            return min((i for i in range(p, q)), key = lambda x: self.valIndex[self.inorder[x]])
        
        def buildTreeRec(self, p, q):
            if p < q:
                root = TreeNode()
                currRoot = self.getRoot(p, q)
                root.val = self.inorder[currRoot]
                if currRoot > p:
                    root.left = self.buildTreeRec(p, currRoot)
                if currRoot < q - 1:
                    root.right = self.buildTreeRec(currRoot + 1, q)
                return root
        
        def buildTree(self, preorder: List[int], inorder: List[int]) -> Optional[TreeNode]:
            n = len(inorder)
            self.inorder = inorder
            self.valIndex = {}
            for i, item in enumerate(preorder):
                self.valIndex[item] = i
            return self.buildTreeRec(0, n)