teleren/devto huggingface dataset:
Peak Index in a Mountain Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 06:00:46

Let's call an array `arr` a **mountain** if the following properties hold:

*   `arr.length >= 3`
*   There exists some `i` with `0 < i < arr.length - 1` such that:
    *   `arr[0] < arr[1] < ... arr[i-1] < arr[i]`
    *   `arr[i] > arr[i+1] > ... > arr[arr.length - 1]`

Given an integer array `arr` that is **guaranteed** to be a mountain, return any `i` such that `arr[0] < arr[1] < ... arr[i - 1] < arr[i] > arr[i + 1] > ... > arr[arr.length - 1]`.

**Example 1:**

**Input:** arr = \[0,1,0\]
**Output:** 1

**Example 2:**

**Input:** arr = \[0,2,1,0\]
**Output:** 1

**Example 3:**

**Input:** arr = \[0,10,5,2\]
**Output:** 1

**Constraints:**

*   `3 <= arr.length <= 104`
*   `0 <= arr[i] <= 106`
*   `arr` is **guaranteed** to be a mountain array.

**Follow up:** Finding the `O(n)` is straightforward, could you find an `O(log(n))` solution?**SOLUTION:**

    class Solution:
        def peakIndexInMountainArray(self, arr: List[int]) -> int:
            old = True
            new = True
            for i in range(len(arr) - 1):
                new = arr[i + 1] > arr[i]
                if new ^ old:
                    return i
                old = new
How to Create a Music Visualizer with Three.JS
Tags: javascript, programming, tutorial, webdev
Published: 2022-06-11 05:55:03

A function featured in electronic music visualizers and media player software that creates animated graphics based on a piece of music is known as music visualization. The picture is frequently created and presented in real-time, in a fashion that is coordinated with the music as it is played.

The Web Audio API is used to handle audio operations inside an audio context and was created with modular routing in mind. Audio nodes are joined together to form an audio routing graph and are used to conduct basic audio operations. Even within the same context, many sources with various channel configurations are permitted. This modular architecture allows you to easily construct sophisticated audio functions with dynamic effects.

Note: You are expected to know the basics of javascript and three.js before getting started with this project.

The Web Audio API involves handling audio operations inside an audio context and has been designed to allow modular routing. Basic audio operations are performed with audio nodes, which are linked together to form an audio routing graph. Several sources — with different types of channel layouts — are supported even within a single context. This modular design provides the flexibility to create complex audio functions with dynamic effects.

The audio pipeline starts by creating an audio context. It should have at least a single audio source — which can be thought of as an entry point for external files, mic input, oscillators, etc. Once we have a source in place, the signal is processed and moved ahead in the pipeline using audio nodes. After processing, the signal(s) are routed to the audio destination, which can only be a single one in the whole context.

The simplest illustration has a single source and a destination, without any effects or processing, inside the context. Why would anyone use this? Maybe they just want to play the sound without any changes.

On the left is an example of a much more complex setup, which can also be made using this API.

{% embed https://www.youtube.com/watch?v=4L8XjHfy13c %}

**Note:-** This project was inspired by epic programmer
© All Rights are Reserved by Epic Programmer.
Ecanvasser Responsive
Tags: codepen
Published: 2022-06-11 05:48:22

<p>I try to create an interface design based on an image found on Dribbble using plain vanilla CSS, HTML &amp; JAVASCRIPT</p>

<p>Remember to Comment, Like, and Share!</p>

<p>--Creating Preloader Website Animation - GSAP3</p>

<p>Dribbble shot - <a href="https://lnkd.in/eCqTnweC" target="_blank">https://lnkd.in/eCqTnweC</a></p>

<p>Icon - <a href="https://boxicons.com/" target="_blank">https://boxicons.com/</a></p>

<p>Google Fonts - <a href="https://fonts.google.com" target="_blank">https://fonts.google.com</a></p>

<h1>dribbble #css #html #responsivewebdesign #js #animation #ui #frontend</h1>

{% codepen https://codepen.io/mazdevelop100/pen/NWyBOdR %}
Ubuntu 22.04 を 20.04 に下げる
Tags: ubuntu
Published: 2022-06-11 05:39:51


## why

2022/06 現在、22.04 という 2022/04 、たったの 2 ヶ月前にリリースから経っていない Ubuntu を入れてしまった。

https://github.com/MicrosoftDocs/live-share/issues/4648

結果、スピーカーやマイクなどのドライブがハードウェアに対応していなく、実用に問題があったので、20.04 を入れ直すことにした。

---

## Windows OS のマシンで 22.04 の USB を 20.04 に書き換える

Ubuntu が USB メモリを認識しなかった。

DiskUtility からのフォーマットをしても、ファイルマネージャーで開くことができなかった。lsusb や devadmin monitor では接続されているのが確認できたのだが。これもリリース後 2 ヶ月だからの不具合かもしれない。

なので別のパソコンに入っている Windows OS で USB を焼き直す。

Windows のマシンを使って Eitcher を使って
22.04 のブートドライブを作った時と同じように
20.04 のブートドライブを作成した。

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

---

## Thinkpad で USB ブートして Ubuntu をインストール

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg25qugoutjrs4vwxo7w.png)
 
22.04 を入れた時と同じように、

Shift を押しながら起動し、Enter を押し、F12 を押し、
起動画面で Install Ubuntu のボタンを押す。

言語とキーボードを選択し、Wifi に接続する

Min インストールで、OS のセットアップ中にアプデを走らせる

Erase Ubuntu 22.04 LTS and reinstall を選択する

userName, pcName, password, を入れる

これでようやく OS が書き込まれる。

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

---

## インストールメディアを外して起動

この後、インストールメディアを外して Enter を押せ
と案内されるので従うと、OS が起動する。


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

Google や Ubuntu One にログインして

20.04 のアプデをして、初期設定を始めよう！

---

## まとめ

Thinkpad の Ubuntu 22.04 を 20.04 に下げるためには
他のパソコンの Windows に Eitcher を入れて
22.04 のブートUSB を 20.04 に書き換えて

20.04 のブートUSB を刺して、Shift を押しながら再起動して
Enter -> F12 を押してインストールする
Maximum Product of Three Numbers
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 05:30:40

Given an integer array `nums`, _find three numbers whose product is maximum and return the maximum product_.

**Example 1:**

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

**Example 2:**

**Input:** nums = \[1,2,3,4\]
**Output:** 24

**Example 3:**

**Input:** nums = \[-1,-2,-3\]
**Output:** -6

**Constraints:**

*   `3 <= nums.length <= 104`
*   `-1000 <= nums[i] <= 1000`

**SOLUTION:**

    class Solution:
        def maximumProduct(self, nums: List[int]) -> int:
            nums.sort()
            return max(nums[0] * nums[1] * nums[2], nums[-1] * nums[-2] * nums[-3], nums[0] * nums[1] * nums[-1])
    
    # import heapq
    
    # class Solution:
    #     def maximumProduct(self, nums: List[int]) -> int:
    #         nums = [(-abs(n), 1 if n >= 0 else -1) for n in nums]
    #         heapq.heapify(nums)
    #         s = 1
    #         p = 1
    #         for i in range(3):
    #             curr, sign = heapq.heappop(nums)
    #             curr *= -1
    #             while curr == 0:
    #                 if len(nums) > 0:
    #                     curr, sign = heapq.heappop(nums)
    #                 else:
    #                     return 0
    #             p *= curr
    #             s *= sign
    #         return p * sign
Adding inheritAttr in vue3 using setup with vite
Tags: vue, vite, vue3, framework
Published: 2022-06-11 05:30:13

When using vue3 composition API you can utilize setup in script tag to write less boilerplate code which makes it easy to maintain in future.

All top-level bindings can be used directly used in the template tag. See this example:
```vue
<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <div @click="log">{{ msg }}</div>
</template>
```

While this is great in making code more readable it comes with downfalls. Most notable inability to disable [attribute inheritance](https://vuejs.org/guide/components/attrs.html) inside script tag with setup attribute.

So in order to disable attribute inheritance using setup you need to add two script tags.

```vue
<script>
// use normal <script> to declare options
export default {
  inheritAttrs: false
}
</script>

<script setup>
// ...setup logic
</script>
```

This works fine but it defies the purpose of writing less boilerplate code. 

Using [vite](https://vitejs.dev/), the amazing build tool, I developed a plugin that will enable you to omit the extra `<script>` declaration.

The new syntax will be like

```vue
<script setup inherit-attrs="false">
// ...setup logic
</script>
```

And that's it. The plugin will add the second `<script>` tag automatically with `inheritAttrs: false`.

You can find the plugin, installation and configuration steps here:
{%embed https://github.com/kalimah-apps/vite-plugin-vue-setup-inherit-attrs %}
Top website for temporary disposable emails
Tags: webdev, beginners, tutorial, discuss
Published: 2022-06-11 04:49:22

## Get Disposal email (to receive emails)

> Disposable email - is a free email service that allows to receive email at a temporary address that self-destructed after a certain time elapses.

- [https://temp-mail.org/en/](https://temp-mail.org/en/)
- [https://10minutemail.net/](https://10minutemail.net/)
- [https://www.guerrillamail.com/](https://www.guerrillamail.com/)
- https://tempail.com/en/
- https://tempmailo.com/
- https://tempmail.dev/en
- https://mail.tm/en/
- https://www.fakemail.net/
- https://tempmail.plus/en/
- https://tempmail.net/

---

{% post https://dev.to/sh20raj/top-websites-to-send-anonymous-emails-3hf6 %}
A11Y 101: Recap
Tags: a11y, beginners, webdev
Published: 2022-06-11 04:43:23

It's been an eventful series looking back at all these [A11Y articles](https://daily-dev-tips.com/tags/accessibility/).

I've already learned so much and feel like I only touched base on some of the basic stuff.

For now, I don't have any articles planned around accessibility, but I'm writing down ideas for a follow-up session.

## My question for you

What are some topics around accessibility you'd like to see covered?

With this question, some of my ideas involve looking at websites out there and seeing where they lack.

Audit guide forms nothing to being accessible.

And in-depth elements that we'll create together.

## Key takeaways

When it comes to accessibility, there is never a concrete answer.
From what I've picked up, there are always several correct ways of doing something, and each will have its pros and cons.

The most critical learning part for me is to use my website as someone with a disability. This showed me where it's lacking.

Another important takeaway is that disability doesn't mean a permanent thing, I didn't realize before starting this journey it's everyone, but situational disabilities are such a big thing.

- A parent holding a baby in one arm
- A super loud environment so people can't hear audio
- Bright sunlight for someone working outside in the sun
- And so on

## What do I expect

Since this was only a first step into accessibility, I expect it to become more intertwined in future writings.

I also hope to add some aspects of this back into my projects and thus will be able to write about it in more detail.

As the reader, I hope you learned some things, and please do let me know what your main takeaway is so far and what you'd like to see covered in this field.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Top Websites to Send Anonymous Emails
Tags: programming, tutorial, productivity, devops
Published: 2022-06-11 04:41:55



{% youtube https://youtu.be/uxXvLNLcwIg %}

---

## Send Anonymous Emails

1. [https://www.5ymail.com/](https://www.5ymail.com/)
2. [http://www.sendanonymousemail.net/](http://www.sendanonymousemail.net/)
3. [https://anonymousemail.me/](https://anonymousemail.me/)
4. [https://emkei.cz/](https://emkei.cz/)
5. [https://mailspre.com/](https://mailspre.com/)

---

{% post https://dev.to/sh20raj/top-website-for-temporary-disposable-emails-15d2 %}

## Get Disposal email (to receive emails)

- [https://temp-mail.org/en/](https://temp-mail.org/en/)
- [https://10minutemail.net/](https://10minutemail.net/)
- [https://www.guerrillamail.com/](https://www.guerrillamail.com/)
- https://tempail.com/en/
- https://tempmailo.com/
- https://tempmail.dev/en
- https://mail.tm/en/
- https://www.fakemail.net/
- https://tempmail.plus/en/
- https://tempmail.net/
How to Create a Music Visualizer with Three.JS
Tags: javascript, webdev, programming, tutorial
Published: 2022-06-11 04:36:27

A function featured in electronic music visualizers and media player software that creates animated graphics based on a piece of music is known as music visualization. The picture is frequently created and presented in real-time, in a fashion that is coordinated with the music as it is played.

The Web Audio API is used to handle audio operations inside an audio context and was created with modular routing in mind. Audio nodes are joined together to form an audio routing graph and are used to conduct basic audio operations. Even within the same context, many sources with various channel configurations are permitted. This modular architecture allows you to easily construct sophisticated audio functions with dynamic effects.

Note: You are expected to know the basics of javascript and three.js before getting started with this project.
{% embed https://www.youtube.com/watch?v=4L8XjHfy13c %}

**Note:-** This project was inspired by epic programmer
© All Rights are Reserved by Epic Programmer.
Fantastic New way for deep copy of JavaScript Object
Tags: javascript
Published: 2022-06-11 04:35:08

JavaScript has a good way to deep copy of JavaScript Object - `structuredClone()`.

The global `structuredClone()` method creates a deep clone of a given value using the structured clone algorithm.

The method also allows transferable objects in the original value to be transferred rather than cloned to the new object. Transferred objects are detached from the original object and attached to the new object; they are no longer accessible in the original object.

```javascript
structuredClone(value)
structuredClone(value, transferables)
```

This function can be used to deep copy JavaScript values. It also supports circular references, as shown below:

```javascript
// Create an object with a value and a circular reference to itself.
const original = { name: "MDN" };
original.itself = original;

// Clone it
const clone = structuredClone(original);

console.assert(clone !== original); // the objects are not the same (not same identity)
console.assert(clone.name === "MDN"); // they do have the same values
console.assert(clone.itself === clone); // and the circular reference is preserved
```

## Transferring

`Transferable objects` (only) can be transferred rather than duplicated in the cloned object, using the optional parameter's transfer value. Transferring makes the original object unusable.

The following code shows how to clone an array and transfer its underlying resources to the new object. On return, the original uInt8Array.buffer will be cleared.

```javascript
var uInt8Array = new Uint8Array(1024 * 1024 * 16); // 16MB
for (var i = 0; i < uInt8Array.length; ++i) {
  uInt8Array[i] = i;
}

const transferred = structuredClone(uInt8Array, { transfer: [uInt8Array.buffer] });
console.log(uInt8Array.byteLength);  // 0
```

You can clone any number of objects and transfer any subset of those objects. For example, the code below would transfer arrayBuffer1 from the passed in value, but not arrayBuffer2.


```javascript
const transferred = structuredClone(
   { x: { y: { z: arrayBuffer1, w: arrayBuffer2 } } },
   { transfer: [arrayBuffer1] });
```

Enjoy Hack!~!
Symmetric Tree
Tags: leetcode, dsa, theabbie
Published: 2022-06-11 04:30:41

Given the `root` of a binary tree, _check whether it is a mirror of itself_ (i.e., symmetric around its center).

**Example 1:**

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

**Input:** root = \[1,2,2,3,4,4,3\]
**Output:** true

**Example 2:**

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

**Input:** root = \[1,2,2,null,3,null,3\]
**Output:** false

**Constraints:**

*   The number of nodes in the tree is in the range `[1, 1000]`.
*   `-100 <= Node.val <= 100`

**Follow up:** Could you solve it both recursively and iteratively?**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 isMirror(self, p: Optional[TreeNode], q: Optional[TreeNode]) -> bool:
            if not p or not q:
                if p or q:
                    return False
                return True
            if p.val == q.val and self.isMirror(p.left, q.right) and self.isMirror(p.right, q.left):
                return True
        
        def isSymmetric(self, root: Optional[TreeNode]) -> bool:
            if root:
                return self.isMirror(root.left, root.right)
            return True
This is why everyone is using Reactjs
Tags: javascript, webdev, react, beginners
Published: 2022-06-11 04:26:30

React Js is one of the most popular front-end frameworks to use these days.  It is playing an essential role in the front-end ecosystem. 

But what makes it so special?

here are some key feature that comes with React Js

- Simplicity
ReactJS uses JSX file which makes the application simple and to code as well as understand. We know that ReactJS is a component-based approach which makes the code reusable as your need. This makes it simple to use and learn.

- Declarative UI
This feature makes React code more readable and easier to fix bugs. React JS is the best platform to develop UIs that are both exciting and engaging not just for web apps, but mobile apps as well.

- Enables Building Rich UI
The UI of an app is extremely important nowadays; an app with a great UI that offers an exciting browsing and shopping experience to users definitely has a much better chance of succeeding than one with a poor interface.

- One-way Data Binding: 
One-way data binding, the name itself says that it is a one-direction flow. The data in react flows only in one direction i.e. the data is transferred from top to bottom i.e. from parent components to child components. 

- Virtual DOM
A virtual DOM object is a representation of the original DOM object. It works like a one-way data binding. Whenever any modifications happen in the web application, the entire UI is re-rendered in virtual DOM representation. 

- JSX
JSX stands for JavaScript XML. It is a JavaScript syntax extension. Its an XML or HTML like syntax used by ReactJS. This syntax is processed into JavaScript calls of React Framework. 

- Performance
ReactJS is known to be a great performer. This feature makes it much better than other frameworks out there today. The reason behind this is that it manages a virtual DOM. The DOM is a cross-platform and programming API which deals with HTML, XML or XHTML.

Give it a like if you make it this far!!

Follow for more web dev insights :)

#reactjs #javascript #webdevelpoment
Reviewing React Basic
Published: 2022-06-11 04:23:28



### 1. element vs Component

**Before: element format**

```js
  ReactDOM.render(<App />, appDOM)
const app = (
  <div>
    <Title>{counter}th cat meme</Title>
    <CatForm handleFormSubmit={handleFormSubmit} />
    <MainCard img="https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript" />
    <Favorites />
  </div>
);

const appDOM = document.querySelector('#app');

ReactDOM.render(app, appDOM)
```

**After: Component format**

- If you want to add useState or functions inside `app`, it has to be changed from javascript element to React Component. This would frequently happen when you are changing codes to **lift state up**.

- The last code should be changed like this : `ReactDOM.render(<App />, appDOM)` 

If you write `App` only, like you're calling the name of element, not Component, this error message would pop up:

>Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

```js
const App = () {

  const [counter, setCounter] = React.useState(100);

  function handleFormSubmit() {
    // function
  }

  return(
    <div>
      <Title>{counter}th cat meme</Title>
      <CatForm handleFormSubmit={handleFormSubmit} />
      <MainCard img="https://cataas.com/cat/595f280b557291a9750ebf65/says/JavaScript" />
      <Favorites />
    </div>
  )
};

const appDOM = document.querySelector('#app');

ReactDOM.render(<App />, appDOM)
```


### 2. Each child in a list should have a unique key prop.

> Warning: Each child in a list should have a unique "key" prop.

> Check the render method of `Favorites`. See https://reactjs.org/link/warning-keys for more information.
    at CatItem (<anonymous>:70:45)
    at Favorites
    at div
    at App (<anonymous>:99:31)


Before:
```js
  <ul className="favorites">
    {
      cats.map(cat => <CatItem img={cat} />)
    }
  </ul>
```

After:
```js
  <ul className="favorites">
    {
      cats.map(cat => <CatItem img={cat} key={cat} />)
    }
  </ul>
```

### 3. How to add a new item to a list that is created by useState

**Use es6 Spread Operator**

```js
function Favorites() {
  const [favorites, setFavorites] = React.useState([CAT1, CAT2])

  function handleHeartClick() {
    console.log("Clicked Heart.");
    
    // add cat to the list
    setFavorites([...favorites, CAT3])
  }
}
```

test repo: https://github.com/sosunnyproject/cat-meme-react