teleren/devto huggingface dataset:
A11Y 101: Accordions
Tags: a11y, beginners, webdev
Published: 2022-06-04 06:50:15

Regarding accessibility, you'll always hear the following sentence: [Semantic HTML always wins](https://daily-dev-tips.com/posts/a11y-101-semantic-html-always-wins/).

Accordions are sections of content grouped by headers. The user can then collapse or close these sections to show/hide more information.

![HTML Accordion on Wikipedia mobile website](https://cdn.hashnode.com/res/hashnode/image/upload/v1653459020012/4csaYmDyN.png)

Regarding these accordions, this might be the one exception to the semantic HTML rule.

But, this is a bit controversial.
In HTML5, we were introduced to the `details` & `summary` elements, which is precisely this!

However, they didn't have full support, so many people would argue that a custom setup is still the way to go.

As I write this, the browser support is still lacking on IE11, older Edge, and Opera mini.

Lacking, meaning they don't support the toggle and will fall back to showing the whole content piece.

## Testing details summary

To set up the details & summary setup, we can use the following markup.

```html
<details>
  <summary>Introduction</summary>
  <p>The text inside this will be shown on click.</p>
  <p>You can even add multiple lines in here.</p>
</details>
```

The code snippet above will render a native toggle.

![Accordion action visually represented](https://cdn.hashnode.com/res/hashnode/image/upload/v1653459405249/bCJRlWppt.gif)

Then I tested the code on IE11, which is unsupported, and we got the following result.

![Accordion showing open on IE11](https://cdn.hashnode.com/res/hashnode/image/upload/v1653459691747/FzbiFY3Gj.png)

## So what is good?

We should use the semantic HTML as intended. If we show these elements as open to older browsers, that is the way it is.

They work perfectly fine on modern browsers and act as expected.

The cool part about using the semantics is that they evolve. They will get better and more advanced support.

## How accessible is this, then?

As mentioned, the semantic elements support screen readers and other use-cases perfectly.
The summary element is handled as a button and can be toggled using the enter or space keys.

It also indexes nicely in the rotor from our screen reader.

And those using older technology get to see the entire content. And that's perfectly fine.

Are you looking to try it out?

Use the following CodePen to see how it works.

{% codepen https://codepen.io/rebelchris/pen/qBxVEqb %}

## Bonus!

The old ways of creating accessible accordions always relied on introducing some JavaScript to handle states.

In this version, we can ship it with 0 JavaScript, which is another win for semantic HTML.

### 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)
Matrix Diagonal Sum
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 06:30:38

Given a square matrix `mat`, return the sum of the matrix diagonals.

Only include the sum of all the elements on the primary diagonal and all the elements on the secondary diagonal that are not part of the primary diagonal.

**Example 1:**

![](https://assets.leetcode.com/uploads/2020/08/14/sample_1911.png)

**Input:** mat = \[\[**1**,2,**3**\],
              \[4,**5**,6\],
              \[**7**,8,**9**\]\]
**Output:** 25
**Explanation:** Diagonals sum: 1 + 5 + 9 + 3 + 7 = 25
Notice that element mat\[1\]\[1\] = 5 is counted only once.

**Example 2:**

**Input:** mat = \[\[**1**,1,1,**1**\],
              \[1,**1**,**1**,1\],
              \[1,**1**,**1**,1\],
              \[**1**,1,1,**1**\]\]
**Output:** 8

**Example 3:**

**Input:** mat = \[\[**5**\]\]
**Output:** 5

**Constraints:**

*   `n == mat.length == mat[i].length`
*   `1 <= n <= 100`
*   `1 <= mat[i][j] <= 100`

**SOLUTION:**

    class Solution:
        def diagonalSum(self, mat: List[List[int]]) -> int:
            n = len(mat)
            total = -mat[n//2][n//2] if n & 1 else 0
            for i in range(n):
                total += mat[i][i] + mat[i][n-i-1]
            return total
why kotlin complie wrong code?
Tags: android, kotlin, compile
Published: 2022-06-04 06:23:51

Hi
In kotlin we should initialize members of class or will assign latter or even make member nullable but I want to show an issue in kotlin compiler.

At first see this class

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

As you see we have error that says 

## Property must be initialized or be abstract

okay I assign a value to this member in init then error gone because kotlin compiler understands that the member is initialized and it is not null

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

okay I remove initialize in init and I make a setter and getter for member as you see we have not error but without initialization

## no error here
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3lonxknuevr8r2mjp4ww.png)


And it will compile by kotlin but we know it is wrong and by execution we will get error because it is really obvious but I do not know why kotlin accepts to compile this code (here getter labels as recursive call)

## execution error
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aw4rip6dmn28g2l3kcvt.png)
I built a terminal-like portfolio with Vue 3
Tags: showdev, vue, javascript, webdev
Published: 2022-06-04 06:13:42

Hey guys, I'm Sam Zhang.

**Edit: since a lot of you are commenting about it, I would like to mention one thing though that this "portfolio" is just made for fun and not recommended to use in a real world application if you're really looking for a job.**

Recently I've updated my personal website. Originally I used [LogTure](https://github.com/samzhangjy/logture) as my primary website, but I think it's not "cool" enough.

So I started building a cooler one. After Googling around, I decided to make a terminal-like site similar to [yasfu.net](https://yasfu.net/portfolio/) with Vue 3.

Vue 3 is still new to me though. I mainly work on React projects recently and didn't explore the new features introduced in Vue 3. So this time I decided to give it a try. And after struggling with errors, I finally finished this project.

**Demo: <https://samzhangjy.com/>**

**GitHub: <https://github.com/samzhangjy/VueTerm>**

And of course, feel free to report issues to me!

However there're some downsides about this project. One is that the current bash-like command system has some trouble handling complicated paths. So for example, when you type in `cd ../folder/subfolder` will cause an inner failure of `cd`.

Recursive might be a good way to solve this problem and I'll try to implement it into this project in the near future.

And here is the end of the article. Feel free to play around with my project!
Compare Version Numbers
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 02:00:41

Given two version numbers, `version1` and `version2`, compare them.

Version numbers consist of **one or more revisions** joined by a dot `'.'`. Each revision consists of **digits** and may contain leading **zeros**. Every revision contains **at least one character**. Revisions are **0-indexed from left to right**, with the leftmost revision being revision 0, the next revision being revision 1, and so on. For example `2.5.33` and `0.1` are valid version numbers.

To compare version numbers, compare their revisions in **left-to-right order**. Revisions are compared using their **integer value ignoring any leading zeros**. This means that revisions `1` and `001` are considered **equal**. If a version number does not specify a revision at an index, then **treat the revision as `0`**. For example, version `1.0` is less than version `1.1` because their revision 0s are the same, but their revision 1s are `0` and `1` respectively, and `0 < 1`.

_Return the following:_

*   If `version1 < version2`, return `-1`.
*   If `version1 > version2`, return `1`.
*   Otherwise, return `0`.

**Example 1:**

**Input:** version1 = "1.01", version2 = "1.001"
**Output:** 0
**Explanation:** Ignoring leading zeroes, both "01" and "001" represent the same integer "1".

**Example 2:**

**Input:** version1 = "1.0", version2 = "1.0.0"
**Output:** 0
**Explanation:** version1 does not specify revision 2, which means it is treated as "0".

**Example 3:**

**Input:** version1 = "0.1", version2 = "1.1"
**Output:** -1
**Explanation:** version1's revision 0 is "0", while version2's revision 0 is "1". 0 < 1, so version1 < version2.

**Constraints:**

*   `1 <= version1.length, version2.length <= 500`
*   `version1` and `version2` only contain digits and `'.'`.
*   `version1` and `version2` **are valid version numbers**.
*   All the given revisions in `version1` and `version2` can be stored in a **32-bit integer**.

**SOLUTION:**

    class Solution:
        def compareVersion(self, version1: str, version2: str) -> int:
            a = [int(r) for r in version1.split(".")]
            b = [int(r) for r in version2.split(".")]
            if len(a) < len(b):
                a += [0] * (len(b) - len(a))
            else:
                b += [0] * (len(a) - len(b))
            if tuple(a) > tuple(b):
                return 1
            elif tuple(a) < tuple(b):
                return -1
            return 0
This week’s newsletter is out! (04-06-2022) - Pain in the eyes
Tags: javascript, tech, webdev, discuss
Published: 2022-06-04 06:02:58

---
title: This week’s newsletter is out! (04-06-2022) - Pain in the eyes
published: true
description: Another week of great javascript, tech and web development links.
tags: javascript, tech, webdev, discuss
---

Pain in the eyes

https://markjgsmith.substack.com/p/mark-smiths-newsletter-04-06-2022?s=w

Would love to hear any comments and feedback you have.

[@markjgsmith](https://twitter.com/markjgsmith)
Minimum Number of Vertices to Reach All Nodes
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 06:00:41

Given a **directed acyclic graph**, with `n` vertices numbered from `0` to `n-1`, and an array `edges` where `edges[i] = [fromi, toi]` represents a directed edge from node `fromi` to node `toi`.

Find _the smallest set of vertices from which all nodes in the graph are reachable_. It's guaranteed that a unique solution exists.

Notice that you can return the vertices in any order.

**Example 1:**

![](https://assets.leetcode.com/uploads/2020/07/07/untitled22.png)

**Input:** n = 6, edges = \[\[0,1\],\[0,2\],\[2,5\],\[3,4\],\[4,2\]\]
**Output:** \[0,3\]
**Explanation:** It's not possible to reach all the nodes from a single vertex. From 0 we can reach \[0,1,2,5\]. From 3 we can reach \[3,4,2,5\]. So we output \[0,3\].

**Example 2:**

![](https://assets.leetcode.com/uploads/2020/07/07/untitled.png)

**Input:** n = 5, edges = \[\[0,1\],\[2,1\],\[3,1\],\[1,4\],\[2,4\]\]
**Output:** \[0,2,3\]
**Explanation:** Notice that vertices 0, 3 and 2 are not reachable from any other node, so we must include them. Also any of these vertices can reach nodes 1 and 4.

**Constraints:**

*   `2 <= n <= 10^5`
*   `1 <= edges.length <= min(10^5, n * (n - 1) / 2)`
*   `edges[i].length == 2`
*   `0 <= fromi, toi < n`
*   All pairs `(fromi, toi)` are distinct.

**SOLUTION:**

    class Solution:
        def findSmallestSetOfVertices(self, n: int, edges: List[List[int]]) -> List[int]:
            indegree = {}
            for a, b in edges:
                indegree[b] = indegree.get(b, 0) + 1
            return [i for i in range(n) if i not in indegree]
Creating mid-sized somewhat ambiguous projects
Tags: software, projects
Published: 2022-06-04 05:54:43

- List the requirements of the system
- Create an actor diagram
- List the happy path
- List the alternate paths
- Sort the requirements in p0, p1 & p2
- Further sort the requirements in essence, risk, & complexity
- Create a sequence/flow diagram for happy path
- Create sequence/flow diagram for alternate path
- Focus on the feature that is most risky and that is not blocked on something first.
- Once risk is reduced by some means (may be class diagram / flow diagram) move on to the other areas
- Try to find commonality b/w the entities of the system
- Reduce complexity of the system and features
Less boring way to build an MVP
Published: 2022-06-04 05:53:14

Whenever you want to build a product, you never start out with building the entire product. Often times your first goal is to build a **Minimum Viable Product (MVP)**. This is done so that you can test the **Product Market Fit** before you even build the entire complex project. 

However, building an MVP isn't fun if you're uncertain that it will give any good results at all. In fact, it's very draining. I thrive on certain good results and uncertainty doesn't help it.

The first step to enhance the experience of building an MVP is by building the end goal right away. It sounds weird but it totally works. 

Let's suppose that we're trying to build a social media website where people can post memes in their pages, and others add comments and stuff. The traditional way to go about this is like this:

> 1. Build the login UI (Nothing fun yet)
> 2. Setup the database
> 3. Build the login backend
> 4. Setup the tables for pages
> 5. Setup the tables for posts
> 6. Build the UI for the posts and images (Still can't use it because it's tied to the backend and the backend isn't implemented yet)
> 7. And so on and so forth...

Most people would feel like quiting at **step 3**. This is because we haven't reached our end goal yet and we're uncertain if it works and we don't even know how the end product would look like. Let's try a slightly better approach. Our main goal here is to let people create pages, post memes and add comments on them. Let's do that first.

> 1. Build the end goal UI functionality. (Allow people to upload things and view whatever is uploaded (don't save it. You don't have to). Mock any APIs that you may need.
> 2. Build other less fun UI components like login page, etc.
> 3. Slowly build the backend component by component for all of this and make them better.

I find this to be a much better way to go about prototyping products. At **step 1**, you already have what you're looking for which is going to inspire you. You can play around with what's going to be the future MVP which is going to be fully functional. At **step 2**, it is less boring considering you already have your end goal. All you're doing is just adding more UI components to your end goal. At **step 3**, it would feel like you're adding upgrades or patches to things that are already present.

Even though this doesn't solve the entire uncertainty problem, it is still much better than the traditional approach to go about prototyping products. Let me know if you have tried this and I will look forward to finding better ways of building an MVP.
How to start trading in binary options?
Tags: binaryoptionstrading, binaryoptions, trading, financialinvestment
Published: 2022-06-04 05:40:39

Following a trend is not a bad thing at all. After all, you also want to make some better financial investment choices and earn a decent amount. Presently, everyone is talking about binary options and trustable brokers across search engines. But whom to trust and how to start trading are still vital questions.

![How to start trading in binary options?](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grebf9w79qw97njjzwvs.png)

If you are keeping your foot in binary options trading, you should know about an easy-to-use trading strategy with at least a 55% win rate to make a profit. However, you should not over-trade and lose everything you have. 

Do not worry! We have a solution for you. Check out [how to trade binary options successfully pdf](https://binary-options-brokers-reviews.com/binary-options-strategy-pdf/) and start your binary options trading journey. 

Want to know how it will work? Read the information below.

## What is included in the pdf?

- From scratch to end information, you need to start binary options trading
- Ways to make money constantly with trading in binary options
- Binary options pricing strategy

Hurry up and get how to trade binary options successfully pdf is now at your fingertips. 

## Are binary options risk-free? 

Undoubtedly, it is not! It involves risk just like other online investment options, crypto, stock, share, and mutual funds. But when you become a pro at it, be ready to get a higher return on your investments. 

For this, make sure you start slowly, which means do not invest the amount you can not afford to lose. 

Also, choose a legitimate broker to start trading in binary options. A few of them we’d like to suggest to you are IQ Options, Olymp Trade, and Quotex. 

Most brokers offer a demo account to start with, so initially, use the demo account to understand trading well and then start investing the real money.

Happy trading! Safe trading!
Monotonic Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 05:30:40

An array is **monotonic** if it is either monotone increasing or monotone decreasing.

An array `nums` is monotone increasing if for all `i <= j`, `nums[i] <= nums[j]`. An array `nums` is monotone decreasing if for all `i <= j`, `nums[i] >= nums[j]`.

Given an integer array `nums`, return `true` _if the given array is monotonic, or_ `false` _otherwise_.

**Example 1:**

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

**Example 2:**

**Input:** nums = \[6,5,4,4\]
**Output:** true

**Example 3:**

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

**Constraints:**

*   `1 <= nums.length <= 105`
*   `-105 <= nums[i] <= 105`

**SOLUTION:**

    class Solution:
        def isMonotonic(self, nums: List[int]) -> bool:
            n = len(nums)
            grctr = 0
            lsctr = 0
            for i in range(1, n):
                if nums[i] >= nums[i - 1]:
                    grctr += 1
                if nums[i] <= nums[i - 1]:
                    lsctr += 1
            return grctr == 0 or grctr == n - 1 or lsctr == 0 or lsctr == n - 1
Use Python in your Browser Now!
Tags: python, webdev, pyscript, browser
Published: 2022-06-04 05:26:53

## Introduction to py-script
JavaScript was the only language which can be run in browsers. But now we can also run python in browser (client side or at frontend). The developer of https://anaconda.org/ unveiled quite a surprising project — **py-script**. It is a JavaScript framework which allows users to run python and use its libraries in browsers like JavaScript itself.

**Official py-script website:** https://pyscript.net/
**py-script on GitHub:** https://github.com/pyscript/pyscript

We can link **py-script** to our HTML document in the following two ways:

## 1. Using CDN links
We can use CDN links to link py-script framework to our HTML document. CDN link consists of following two links:
CSS: `<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />`
JS: `<script defer src="https://pyscript.net/alpha/pyscript.js"></script>`

Copy and paste these link in your HTML documents, and now you can write python directly in your HTML document.

## 2. Downloading the py-script
Link to download **py-script**: https://github.com/pyscript/pyscript/archive/refs/heads/main.zip

Download py-script from this link, then unzip it, and place the folder named `pyscript-main` inside your HTML document's folder and then link it locally inside your HTML document by 
```html
<link rel="stylesheet" href="path/to/pyscript.css" />
<script defer src="path/to/pyscript.js"></script>
```

## Writing Python code in HTML doc
After linking the files to your HTML document, you just have to write `<py-script> </py-script>` tag and inside it, you can write the python code.

## Code
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- py-script CDN links -->
    <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
    <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

    <title>py-script</title>
</head>

<body>
    <h1>This text is written in HTML</h1>		<!-- HTML -->

    <py-script>
        print("This text is written in Python")		# Python
    </py-script>
</body>

</html>
```

As you can see in the above code, we didn't get syntax highlighting for python code because it is written in HTML document. Hence, the code editors will treat python code as HTML plaintext. By using the extensions or other tools provided by the respective code editors, we can get syntax highlighting for py-script.

## Output in Browser
![Output in Browser](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mh0f1zsikwcpdt1y36ic.jpg)

> Note: All the links and information provided here, are available at py-script official website https://pyscript.net/ . All the information given here is taken from the official py-script sources.
Creating a Floating Alert Dialog like google translate with Material Design 3 in android
Tags: android, tutorial, kotlin, productivity
Published: 2022-06-04 05:19:07

I’m going to show you how to create a Floating alert dialog like tap to translate features in the google translate app using a material design 3. The google translate app can open a floating alert dialog wherever you want to select a text. My approach is simple. At first, I will create a translucent theme that actually inheritance from Theme.Material3.DayNight.NoActionBar after that, I will set the theme for the activity which will open when a floating dialog appears on the screen. You can read the full article from here, https://poran-cse.medium.com/creating-a-floating-alert-dialog-like-google-translate-with-material-design-3-in-android-4b5cbab57571
Find K Pairs with Smallest Sums
Tags: leetcode, dsa, theabbie
Published: 2022-06-04 05:00:47

You are given two integer arrays `nums1` and `nums2` sorted in **ascending order** and an integer `k`.

Define a pair `(u, v)` which consists of one element from the first array and one element from the second array.

Return _the_ `k` _pairs_ `(u1, v1), (u2, v2), ..., (uk, vk)` _with the smallest sums_.

**Example 1:**

**Input:** nums1 = \[1,7,11\], nums2 = \[2,4,6\], k = 3
**Output:** \[\[1,2\],\[1,4\],\[1,6\]\]
**Explanation:** The first 3 pairs are returned from the sequence: \[1,2\],\[1,4\],\[1,6\],\[7,2\],\[7,4\],\[11,2\],\[7,6\],\[11,4\],\[11,6\]

**Example 2:**

**Input:** nums1 = \[1,1,2\], nums2 = \[1,2,3\], k = 2
**Output:** \[\[1,1\],\[1,1\]\]
**Explanation:** The first 2 pairs are returned from the sequence: \[1,1\],\[1,1\],\[1,2\],\[2,1\],\[1,2\],\[2,2\],\[1,3\],\[1,3\],\[2,3\]

**Example 3:**

**Input:** nums1 = \[1,2\], nums2 = \[3\], k = 3
**Output:** \[\[1,3\],\[2,3\]\]
**Explanation:** All possible pairs are returned from the sequence: \[1,3\],\[2,3\]

**Constraints:**

*   `1 <= nums1.length, nums2.length <= 105`
*   `-109 <= nums1[i], nums2[i] <= 109`
*   `nums1` and `nums2` both are sorted in **ascending order**.
*   `1 <= k <= 104`

**SOLUTION:**

    import heapq
    
    class Solution:
        def kSmallestPairs(self, nums1, nums2, k: int):
            heap = []
            a = min(len(nums1), k)
            b = min(len(nums2), k)
            for i in range(a):
                for j in range(b):
                    heapq.heappush(heap, (-nums1[i]-nums2[j], (nums1[i], nums2[j])))
                    if len(heap) > k:
                        heapq.heappop(heap)
            ksmallest = []
            for i in range(k):
                if len(heap) > 0:
                    ksmallest.insert(0, list(heapq.heappop(heap)[1]))
            return ksmallest