teleren/devto huggingface dataset:
Make a WebApp Slider Menu in 2 mins - All JS frameworks
Published: 2022-06-17 14:42:46

Okay so the title is a little click-baity, but the ease of this blew my mind and I wanted to ring the bells for my fellow devs. 

So you're not stuck downloading a full library just to implement it, when all you need is a dozen lines of css for blazing fast perf and compatibility.

There's 3 overall steps which are required , all very simple, to do this. You can use any JavaScript framework or vanilla JS if you would like. Its all in pure CSS.

1. Create a div for your overall page content. In this example lets give it an id of #page, and make sure to assign it a width of 100vw in your .css style. So it will update its width to match the device.

2. Create a button with an onclick handler which sets a variable called "IsMenuVisible" to true , upon click. This is the button which will trigger the side menu to open.

3. Create a div with id #flyoutMenu, inside the #page div (from step1) anywhere. Add a class of "show" to this div , when "IsMenuVisible" is true , and add a class of "hide" when "IsMenuVisible" is false. 

4. Let the CSS below do the rest of the magic :) 

```
#flyoutMenu {
  width: 100vw;
  height: 100vh;
  background-color: #FFE600;
  position: fixed;
  top: 0;
  left: 0;
  transition: transform .3s 
              cubic-bezier(0, .52, 0, 1);
  overflow: scroll;
  z-index: 1000;
}

#flyoutMenu.hide {
  transform: translate3d(-100vw, 0, 0);
}

#flyoutMenu.show {
  transform: translate3d(0vw, 0, 0);
  overflow: hidden;
}
```

If you enjoyed my post I'd really appreciate it if you could check out my new webapp WannaGo. Its meant for developers and designers to come together on a cross-skill platform with built in scheduling and instant WebRTC based peer-to-peer text, audio and video chat in the browser.
 

WannaGo 
==================================
**Collaboration app for devs, designers and people who just wanna study or watch movies together :p**

https://www.iwannagoapp.com/
https://twitter.com/iWannaGoApp

Original reference CSS from:
https://www.kirupa.com/react/smooth_sliding_menu_react_motion.htm
Paracetamol.js💊| #144: Explica este código JavaScript
Tags: javascript, spanish, webdev, programming
Published: 2022-06-17 14:39:58

## **<center>Explica el siguiente código JavaScript</center>**
#### <center>**Dificultad:** <mark>Básico</mark></center>

```js
const f = (arr) => {
  return arr.find((item) => {
    return item >= 10
  })
}
console.log(f([4,6,1,15,19,0,100]))
console.log(f([4,6,1,1,9,0,3]))
```

A. `100`, `null`
B. `[15, 19, 100]`, `false`
C. `true`, `false`
D. `15`, `undefined`

Respuesta en el primer comentario.

---
Spring Boot Elasticsearch - model data layer - Part 5 Tutorial
Published: 2022-06-17 14:37:48

Hi, the 5th article devoted to the theme: “How to work with ElasticSearch using Java Spring Boot” already ready for reading. Here will speak about model data layer and Spring Data Elasticsearch package. All details are here: "[Spring Boot ElasticSearch - model data layer](https://sergiiblog.com/spring-boot-elasticsearch-model-data-layer/)". Have a pleasant reading.
Word Ladder
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 14:30:37

A **transformation sequence** from word `beginWord` to word `endWord` using a dictionary `wordList` is a sequence of words `beginWord -> s1 -> s2 -> ... -> sk` such that:

*   Every adjacent pair of words differs by a single letter.
*   Every `si` for `1 <= i <= k` is in `wordList`. Note that `beginWord` does not need to be in `wordList`.
*   `sk == endWord`

Given two words, `beginWord` and `endWord`, and a dictionary `wordList`, return _the **number of words** in the **shortest transformation sequence** from_ `beginWord` _to_ `endWord`_, or_ `0` _if no such sequence exists._

**Example 1:**

**Input:** beginWord = "hit", endWord = "cog", wordList = \["hot","dot","dog","lot","log","cog"\]
**Output:** 5
**Explanation:** One shortest transformation sequence is "hit" -> "hot" -> "dot" -> "dog" -> cog", which is 5 words long.

**Example 2:**

**Input:** beginWord = "hit", endWord = "cog", wordList = \["hot","dot","dog","lot","log"\]
**Output:** 0
**Explanation:** The endWord "cog" is not in wordList, therefore there is no valid transformation sequence.

**Constraints:**

*   `1 <= beginWord.length <= 10`
*   `endWord.length == beginWord.length`
*   `1 <= wordList.length <= 5000`
*   `wordList[i].length == beginWord.length`
*   `beginWord`, `endWord`, and `wordList[i]` consist of lowercase English letters.
*   `beginWord != endWord`
*   All the words in `wordList` are **unique**.

**SOLUTION:**

    class Solution:
        def ladderLength(self, beginWord: str, endWord: str, wordList: List[str]) -> int:
            n = len(beginWord)
            wordList = set(wordList + [beginWord])
            graph = {}
            for word in wordList:
                for i in range(n):
                    for c in "abcdefghijklmnopqrstuvwxyz":
                        currstr = word[0:i] + c + word[i+1:]
                        if currstr != word and currstr in wordList:
                            if word in graph:
                                graph[word].append(currstr)
                            else:
                                graph[word] = [currstr]
            dist = {}
            dist[beginWord] = 1
            queue = [(beginWord, 1)]
            visited = set()
            i = 0
            while i < len(queue):
                curr, k = queue[i]
                for j in graph.get(curr, []):
                    if j not in visited:
                        dist[j] = dist.get(curr, float('inf')) + 1
                        if j == endWord:
                            return k + 1
                        visited.add(j)
                        queue.append((j, k + 1))
                i += 1
            return 0
Reinventing The Cube
Published: 2022-06-17 14:29:31

---
title: Reinventing The Cube
published: true
description: 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oy68nmrmh9exzkt095bm.png
# Use a ratio of 100:42 for best results.
canonical_url: 'https://kevwe.com/blog/reinvent-the-cube'
---
Reinventing The Cube


- A look at the mainstream


According to some articles like:


[*] "Cheapest way to run Kubernetes on Azure"


one of the cheapest way to have Kubernetes running as a development environment is to have a single node . 


The described setup here accounts for about 13 dollars per week, that makes it a bit more than 50 dollars per month.


A nice way to reduce further costs is to keep it off when you're not using the setup. Such a configuration in a Stopped state would cost about 5 dollars per week, say around 20 dollars a week.


As a developer, I am not terribly focused on the minutiae of application containerization,

 what I care the most is the overall business value of the project, and that is provided in the business layers of the application.


- Some thoughts


Sure, I can do Docker, I can do k8s crazy stuff, but the real value is in the application code, not in the tools. If the business core of the application does something useful, and provided it behaves well, then the application has a value,


You don't achieve value just by adding resources spending, quite the opposite I would say.

In a nutshell, I would argue that most things need to be in support of the business requirements of the application, not the other way round.

https://kevwe.com/blog/reinvent-the-cube


[*] See: "Cheapest way to run Kubernetes on Azure" in the article above.
Can you detect geofencing settings on a server with Javascript?
Published: 2022-06-17 14:22:56

Hello, I am trying to solve a problem, and need to see if it is possible to do this in javascript. I am having an issue with websites that are geofenced, and my proxy. In order to resolve it I am trying to see if there is a way to write some Java script that would detect if a web site was geofenced then disable the proxy. This code will go into the PAC file for the proxy which is hosted locally on the system, and accessed via loopback. Any thoughts, ideas, and suggestions are welcomed.
Stagetimer | Made with Vue JS
Published: 2022-06-17 14:19:59

![Stagetimer | Made with Javascript | Vue JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1654099648/large_stagetimer_made_with_vue_js_2edb0b7cc9.jpg "Stagetimer | Made with Javascript | Vue JS")


### The easiest way to time speakers. Runs in the browser. Display a countdown timer, control it from anywhere. Basic version is free

> If you have to time an event or meeting, then stagetimer.io can help. It allows you to create timers and control them from other devices. You can then share a fullscreen timer with presenters and the agenda with participants via link.
> 
> ### Remote-controlled Countdown Timer.
> Show a fullscreen timer to your presenter
> while you control it from another device.
> 
> #### Create a timer
> Free, no signup required

## 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 | [Stagetimer on Twitter](https://twitter.com/withjavascript/status/1537800273741107202?s=20&t=-r8K3YzlPeukVjboZpCJhg)
 |
| Medium | [Stagetimer on Medium](https://medium.com/@madewithjavascript/stagetimer-made-with-vue-js-bbaa333dc210)
 |
| Facebook | [Stagetimer on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid05Wxcv5PkbpsmBHf3PrjQ9xQPaXwEyH1UMp56i6uTnukR47RB3ZGzpyBevxFzzXLxl)
 |
| Tumblr | [Stagetimer on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/687315601795973120?source=share)
 |
| LinkedIn | [Stagetimer on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6943566139058745344)
 |
| Pinterest | [Stagetimer on Pinterest](https://pin.it/4Jy3PYZ)
 |

Filled Under:

 - [Made with Javascript](https://madewithjavascript.club)
 - [Made with Vue JS](https://madewithjavascript.club/categories/vue-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!
Snapshot Array
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 14:00:42

Implement a SnapshotArray that supports the following interface:

*   `SnapshotArray(int length)` initializes an array-like data structure with the given length.  **Initially, each element equals 0**.
*   `void set(index, val)` sets the element at the given `index` to be equal to `val`.
*   `int snap()` takes a snapshot of the array and returns the `snap_id`: the total number of times we called `snap()` minus `1`.
*   `int get(index, snap_id)` returns the value at the given `index`, at the time we took the snapshot with the given `snap_id`

**Example 1:**

**Input:** \["SnapshotArray","set","snap","set","get"\]
\[\[3\],\[0,5\],\[\],\[0,6\],\[0,0\]\]
**Output:** \[null,null,0,null,5\]
**Explanation:** 
SnapshotArray snapshotArr = new SnapshotArray(3); // set the length to be 3
snapshotArr.set(0,5);  // Set array\[0\] = 5
snapshotArr.snap();  // Take a snapshot, return snap\_id = 0
snapshotArr.set(0,6);
snapshotArr.get(0,0);  // Get the value of array\[0\] with snap\_id = 0, return 5

**Constraints:**

*   `1 <= length <= 50000`
*   At most `50000` calls will be made to `set`, `snap`, and `get`.
*   `0 <= index < length`
*   `0 <= snap_id <` (the total number of times we call `snap()`)
*   `0 <= val <= 10^9`

**SOLUTION:**

    class SnapshotArray:
    
        def __init__(self, length: int):
            self.snaps = {}
            self.sid = 0
            self.n = length
    
        def set(self, index: int, val: int) -> None:
            self.snaps[(self.sid, index)] = val
    
        def snap(self) -> int:
            res = self.sid
            self.sid += 1
            return res
        
        def getSnap(self, snap_id, index):
            for i in range(snap_id, -1, -1):
                if (i, index) in self.snaps:
                    return self.snaps[(i, index)]
            return 0
    
        def get(self, index: int, snap_id: int) -> int:
            return self.getSnap(snap_id, index)
    
    # Your SnapshotArray object will be instantiated and called as such:
    # obj = SnapshotArray(length)
    # obj.set(index,val)
    # param_2 = obj.snap()
    # param_3 = obj.get(index,snap_id)
Broken Links on Netlify React.js using React Router solution
Tags: react, netlify, reactrouter
Published: 2022-06-17 13:59:46

#react #reactrouter #netlify
This solution is for anyone who has deployed a React Single Page Application using [Netlify](https://www.netlify.com/)’s hosting services and ran into a ‘Page Not found’ error after refreshing any page that isn’t the default homepage.

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

You’re probably confused because the said issue does not occur when interacting with the App on the local host server, so what could have gone wrong?

The reason is fairly simple but not too obvious, React Router is set up to handle routing on the browser/client-side. That said, refreshing the website on any page other than the root (all routes are specified at the root level) means that Netlify won’t understand how to handle the specific route.

## Solution.
The solution is to create a file and name it ‘_redirects’ to the root of our site inside the ‘public’ folder/directory _(path = ‘public/_redirects’)_ and type in/copy-paste the following;
`/* /index.html 200`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3qiuvj60iuj2h1abrofe.PNG)

This works because Netlify offers a  [_redirects](https://docs.netlify.com/routing/redirects/) file, which you can add to your codebase along with the rest of your files and folders. This will equip Netlify with the required information in order to handle URLs that are not handled on the browser.

For more details, visit the official [Netlify documentation](https://docs.netlify.com/).

[![Buy Me A Coffee][2]][1]

[1]: https://www.buymeacoffee.com/keithowino6
[2]: https://cdn.buymeacoffee.com/buttons/default-black.png
Summarize, or state your position.
Published: 2022-06-17 12:55:18

---
title: Summarize, or state your position.
published: true
description: Don't post only links in communication tools; post with your intentions. The more concise it is, the better.
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

Is it a good idea to post only links in communication tools such as Slack or Discord?

There are several possible intentions of senders who post only links.
One is a strong request to read the full text (i.e., it makes no sense if you don't read the full text).
Second, it is tedious to clearly state an opinion or summarize information.
Third, trust in the other party that simply posting a link will convey all of one's intentions.

However, I see two problems with this.

One is that the sender's intentions are invisible.
We don't know whether the sender agrees or disagrees with the information in the link.
Or does the sender feel that the linked information is very important and wants to share it as knowledge within the community?
It is impossible to understand the sender's position on the information.

Second, it is inefficient in communicating information.
As mentioned above, since we do not know the intent of the sender, we must open the link without any preparation and interpret what kind of information it is. If the posting contains an outline, we can get an overview of the information in advance and then make a judgment as to what kind of information it is.
On the other hand, accessing information without preconceived notions may sometimes be a good idea.


## Conclusion.
Certainly in a mature enough community, "what goes without saying" is shared by the members, and even a link-only post may perfectly convey the intent. It would be less costly that way.

I believe that information dissemination is for the benefit of the recipient. While it is possible for the sender to have the significance of the contribution, the information should basically be 100% for the benefit of the receiver.

If you take the position that the dissemination of information is for the benefit of the receiver, then I suggest that you post a link to the site with a few words.

TL;DR FTW!
What size is my T-shirt? Can someone look at the label?
Tags: agile, businessanalyst
Published: 2022-06-17 13:37:09

Introduction
Imagine you are standing in the dressing room of your favorite shop trying on T-shirts. Did you grab the right size, does it have extra detail, is the price too high? What does mom think?

You look at the construction of the T-shirt, discussing the color and stitching, does it need to be dry cleaned? Can it be mass produced or is it haute couture? This would affect the cost to create the T-shirt. And “mom” is certainly going to be thinking about price, as well as how well it will wash and wear (in our world, think how many customers it’s being sold to).

T-shirt sizing isn’t just for clothing, it’s also used to measure the effort need to develop a software initiative. Just like the T-shirt in the dressing room, you need to understand the size of T-shirt to get the right fit for the software initiative. You accomplish this by sitting down with Engineering and Product Management teams (just think of them as mom).

What does this mean for software development, then?
<figure align="center"> <img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q4f0auq6juc1u37rmsbx.png" alt="View inside a warehouse with racks to the left and right filled with boxes of various sizes." width=300>  

</figure> Now if you are reading this, thinking “how can software fit into a T-shirt”, and “I would never care about the color and stitching”, you do care about the what the software does; the user experience, if extra security is needed, or if it needs to be available on mobile devices or a portal. Does it have certain requirements needing new UI, will it involve ancillary teams such as CoEs or the C4Es? The T-shirt size can represent task, scope, effort, complexity work hours, time estimates, or often all of the above.

After everyone has looked the T-shirt over, maybe you decide you want the T-shirt for your niece Joan, and she only needs an XS (0-29 days of development), or maybe it will be a gift for Uncle Joe, and he is one big dude, so you will definitely need an XXXL (1500+ days); or maybe, just want one for yourself and a L (200-399 days) will do for you.

Great, you know the T-shirt sizes you need – but they not in stock, so you are going to need to order them!

Imagine your order arrives at the warehouse (Engineering and Product Management teams), but the staff are busy, so they start looking through the orders to see what sizes are needed, and what the value of those T-shirts will be against the time they have available to get them. Once they decide what T-shirts they have room for, you will get a “Go” or “No Go” decision regarding whether your T-shirt can be delivered.

So, if it’s your lucky day, your brand new T-shirt will arrive!
Reverse Words in a String
Tags: leetcode, dsa, theabbie
Published: 2022-06-17 13:30:49

Given an input string `s`, reverse the order of the **words**.

A **word** is defined as a sequence of non-space characters. The **words** in `s` will be separated by at least one space.

Return _a string of the words in reverse order concatenated by a single space._

**Note** that `s` may contain leading or trailing spaces or multiple spaces between two words. The returned string should only have a single space separating the words. Do not include any extra spaces.

**Example 1:**

**Input:** s = "the sky is blue"
**Output:** "blue is sky the"

**Example 2:**

**Input:** s = "  hello world  "
**Output:** "world hello"
**Explanation:** Your reversed string should not contain leading or trailing spaces.

**Example 3:**

**Input:** s = "a good   example"
**Output:** "example good a"
**Explanation:** You need to reduce multiple spaces between two words to a single space in the reversed string.

**Constraints:**

*   `1 <= s.length <= 104`
*   `s` contains English letters (upper-case and lower-case), digits, and spaces `' '`.
*   There is **at least one** word in `s`.

**Follow-up:** If the string data type is mutable in your language, can you solve it **in-place** with `O(1)` extra space?

**SOLUTION:**

    class Solution:
        def reverseWords(self, s: str) -> str:
            n = len(s)
            words = []
            i = 0
            for j in range(n):
                if s[j] != " ":
                    if j == 0 or s[j - 1] == " ":
                        i = j
                    if j == n - 1 or s[j + 1] == " ":
                        words.append(s[i:j+1])
            return " ".join(words[::-1])
Upwork Notifier
Tags: upwork, notifier, notifications
Published: 2022-06-17 13:12:33

---
title: Upwork Notifier
published: true
description: A tool to help the freelancers to be updated about any new posted jobs
tags: upwork, notifier, notifications
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

I'm a freelancer/developer working through Upwork, tried to find any solution to get updates and notifications whenever any new suitable job posted in the platform,

I tried to use some Google Chrome extensions, none of them are still working anymore.

So, I built this simple tool and it's [open source](https://github.com/frodoe7/upworkNotifie), if anyone would like to use it or contribute to it

Some features

- Real time notifications for any new jobs
- Copy cover letter template while opening the job post URL
- Cross-platform working on Windows, MacOS and Linux
- Configurable

Download it from [here](https://github.com/frodoe7/upworkNotifier/blob/main/readme.md#downloads-last-update-in-17-june-2022)

Read the [getting start](https://github.com/frodoe7/upworkNotifier/blob/main/readme.md#getting-start) to use it
Why are Tags so valuable for Cloud Computing?
Tags: devops, cloud, aws, ops
Published: 2022-06-17 13:11:01

[Why are Tags so valuable for Cloud Computing?](https://www.bitslovers.com/why-are-tags-so-valuable-for-cloud-computing/?utm_id=Devto&utm_source=devto&utm_medium=Social&utm_campaign=devto)

It's an article that will cover:

- Why you should be careful with Tags
- How you can save money in your Cloud Provider
- The Best practices
- What it's worth tagging?
- Real Example of Tags

Good Reading, [Why are Tags so valuable for Cloud Computing?](https://www.bitslovers.com/why-are-tags-so-valuable-for-cloud-computing/?utm_id=Devto&utm_source=devto&utm_medium=Social&utm_campaign=devto)