teleren/devto huggingface dataset:
Predis.ai | Made with Vue JS
Published: 2022-06-02 13:36:55

![Predis.ai | Made with Javascript | Vue JS](https://res.cloudinary.com/madewithjavascript/image/upload/v1653507746/large_predis_ai_made_with_vue_js_dd2e70de41.png "Predis.ai | Made with Javascript | Vue JS")


### Predis helps brands and influencers communicate better on social media by      providing AI-powered content strategy analysis, content and hashtag recommendations.

> AI Content Generation | Competitor Analysis
> 
> Create Fresh Social Media Content Tailored for Your Business.
> Creating Engaging Content Everyday is a pain. Use our AI to Create Content Complete with Creatives, Captions and hashtags and then publish them to Instagram, Facebook, Linkedin, Pinterest in a click.
> 
> #### Create Posts From Just 1 Liner Instructions.
> 
> #### Let our AI generate creatives for you.
> 
> #### Get Inspired by the Best Performing Content of Your Competitors.
> 
> #### Create Posts in 15+ Languages.
> 
> #### Plan your Content Calendar Seamlessly with Predis.ai
> 
> #### Generate Content from your E-Commerce Products!
> 
> #### Publish to multiple Social platforms with Predis.ai.

## 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 | [Predis.ai on Twitter](https://twitter.com/withjavascript/status/1532353834282106881?s=20&t=sVChmrx3PqPlitVCn4ujjw)
 |
| Medium | [Predis.ai on Medium](https://medium.com/@madewithjavascript/predis-ai-made-with-vue-js-616293b495da)
 |
| Facebook | [Predis.ai on Facebook](https://www.facebook.com/madewithjavascript/posts/pfbid02oL52jpz3bJRQ4YAEDfqFWSYnyoQj21ctfB2otFbG2BQBEFznNAS48HrcfbNtjzYAl)
 |
| Tumblr | [Predis.ai on Tumblr](https://www.tumblr.com/blog/view/madewithjavascript/685954258724667392?source=share)
 |
| LinkedIn | [Predis.ai on LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:6938119876628672512)
 |
| Pinterest | [Predis.ai on Pinterest](https://pin.it/5ECdXft)
 |


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!
Javascript books to get on your shelf
Tags: javascript, books, beginners, webdev
Published: 2022-06-02 13:35:08

1. Eloguent Javascript Marijn Haverbeke
2. Javascript: The Good Part by Douglas Crockford
3. Javascript for Kids by Nick Morgan
4. Javascript & Jquery: Interactive Front-end web development by Jon Duckett
5. A smarter way learn Javascript by Mark Myers
Minimum Cost to Move Chips to The Same Position
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 13:30:38

We have `n` chips, where the position of the `ith` chip is `position[i]`.

We need to move all the chips to **the same position**. In one step, we can change the position of the `ith` chip from `position[i]` to:

*   `position[i] + 2` or `position[i] - 2` with `cost = 0`.
*   `position[i] + 1` or `position[i] - 1` with `cost = 1`.

Return _the minimum cost_ needed to move all the chips to the same position.

**Example 1:**

![](https://assets.leetcode.com/uploads/2020/08/15/chips_e1.jpg)

**Input:** position = \[1,2,3\]
**Output:** 1
**Explanation:** First step: Move the chip at position 3 to position 1 with cost = 0.
Second step: Move the chip at position 2 to position 1 with cost = 1.
Total cost is 1.

**Example 2:**

![](https://assets.leetcode.com/uploads/2020/08/15/chip_e2.jpg)

**Input:** position = \[2,2,2,3,3\]
**Output:** 2
**Explanation:** We can move the two chips at position  3 to position 2. Each move has cost = 1. The total cost = 2.

**Example 3:**

**Input:** position = \[1,1000000000\]
**Output:** 1

**Constraints:**

*   `1 <= position.length <= 100`
*   `1 <= position[i] <= 10^9`

**SOLUTION:**

    class Solution:
        def minCostToMoveChips(self, position: List[int]) -> int:
            minCost = float('inf')
            for currpos in position:
                currCost = 0
                for pos in position:
                    currCost += abs(pos - currpos) % 2
                minCost = min(minCost, currCost)
            return minCost
Mac - OS Catalina - Failed to save 'app.component.html': Insufficient permissions. Select 'Retry as Sudo' to retry as superuser
Tags: help, angular
Published: 2022-06-02 13:14:24

Hi all, help needed please, am new to learning angular - have a saving issue. 

Have tried a few things , but still need some assistance please

am unable to save files in Visual Studio Code

I have tried below -

$ sudo chmod -R </Users/jameselcome/Documents/AStudy/my-first-app/my-first-app/src/app>

folder is set to read and write access

Installed Visual Studio Code from downloads folder
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihso08fs3y1hrzosxpow.png) 

Tried as sudo too

Any advice greatly appreciated

Thanks in advance
Released a tool for VMware ESXi Management without vCenter
Tags: vmware, ops, server, virtualization
Published: 2022-06-02 13:12:47

I have released a tool for managing VMware ESXi nodes.

The tool is called ECoMan.

# Feature

- View virtual machine lists over multiple ESXi Nodes
-     Create a virtual machine via Web UI
-     Set power status via Web UI
-     Emphasize several machines which have large hardware resources in Web UI

# Demo

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

[cdsl-research/ECoMan](https://github.com/cdsl-research/ecoman)
Control e Historial de cambios
Published: 2022-06-02 13:12:09

Hola a todos me acabo de unir a esta gran comunidad soy nuevo en esto del desarrollo y  la programación por lo que acudo a la sabiduría que me puedan brindar.

Estoy desarrollando un aplicativo en HTML con funciones en javascript  con sus bases de datos en SQL y deseo crear una tabla que me guarde la información automaticamente de los usuarios que ingresan a la aplicación y si realizan algún tipo de cambio , ya tengo la estructura donde se realizara la consulta de esta tabla pero me bloquee y no se por donde continuar. 

Agradecería enormemente que me guiaran.
What Was Your First Solo Project?
Tags: webdev, beginners, discuss, devjournal
Published: 2022-06-02 13:07:32

A comment on a recent post I made a few days ago as well as advice from a friend really convinced me to hit the breaks and take my time. For context, I made a post a few days ago and mentioned a React project that I was working on. A comment pointed out that I should take my time and try to master the basics, and so I did just that!

I headed over to Frontend Mentor after advice from my friend, browsed through the challenged, and picked something relatively simple.

I'm proud to report that after 3 days of coding, tweaking and abusing coffee, I managed to create [this](https://thekillerrex27.github.io/Interactive-Rating-Component/).

Now, it may not look like much to the trained and professional, but to me, it's something I spent days working on, and I'm proud of how it turned out. Feel free to check my [GitHub](https://github.com/TheKillerRex27/Interactive-Rating-Component) for the code. Fork it, rework it, play with it, redesign it entirely and use it in your code. I'm more than happy to have my work out there (Even though it's a free public project that thousands of others have done before, haha).

So there we go, that was my first solo project, completed literally hours ago. What was your first solo project that made you smile from ear to ear after wiping the sweat from your brow? I'd love to hear about it.
Single Number II
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 13:00:46

Given an integer array `nums` where every element appears **three times** except for one, which appears **exactly once**. _Find the single element and return it_.

You must implement a solution with a linear runtime complexity and use only constant extra space.

**Example 1:**

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

**Example 2:**

**Input:** nums = \[0,1,0,1,0,1,99\]
**Output:** 99

**Constraints:**

*   `1 <= nums.length <= 3 * 104`
*   `-231 <= nums[i] <= 231 - 1`
*   Each element in `nums` appears exactly **three times** except for one element which appears **once**.

**SOLUTION:**

    import bisect
    
    class Solution:
        def singleNumber(self, nums: List[int]) -> int:
            nums.sort()
            numset = set(nums)
            for num in numset:
                if bisect.bisect_left(nums, num) + 1 == bisect.bisect_right(nums, num):
                    return num
Number of Pairs of Strings With Concatenation Equal to Target
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 12:56:51

Given an array of **digit** strings `nums` and a **digit** string `target`, return _the number of pairs of indices_ `(i, j)` _(where_ `i != j`_) such that the **concatenation** of_ `nums[i] + nums[j]` _equals_ `target`.

**Example 1:**

**Input:** nums = \["777","7","77","77"\], target = "7777"
**Output:** 4
**Explanation:** Valid pairs are:
- (0, 1): "777" + "7"
- (1, 0): "7" + "777"
- (2, 3): "77" + "77"
- (3, 2): "77" + "77"

**Example 2:**

**Input:** nums = \["123","4","12","34"\], target = "1234"
**Output:** 2
**Explanation:** Valid pairs are:
- (0, 1): "123" + "4"
- (2, 3): "12" + "34"

**Example 3:**

**Input:** nums = \["1","1","1"\], target = "11"
**Output:** 6
**Explanation:** Valid pairs are:
- (0, 1): "1" + "1"
- (1, 0): "1" + "1"
- (0, 2): "1" + "1"
- (2, 0): "1" + "1"
- (1, 2): "1" + "1"
- (2, 1): "1" + "1"

**Constraints:**

*   `2 <= nums.length <= 100`
*   `1 <= nums[i].length <= 100`
*   `2 <= target.length <= 100`
*   `nums[i]` and `target` consist of digits.
*   `nums[i]` and `target` do not have leading zeros.

**SOLUTION:**

    from collections import Counter
    
    class Solution:
        def numOfPairs(self, nums: List[str], target: str) -> int:
            k = len(target)
            nums = Counter(nums)
            ctr = 0
            for num in nums:
                if target.startswith(num):
                    chunk = target[len(num) - k:]
                    if chunk in nums:
                        ctr += nums[num] * nums[chunk]
                        if num == chunk:
                            ctr -= nums[chunk]
            return ctr
USER INTERFACE
Tags: uiweekly, beginners, design
Published: 2022-06-02 12:55:48



       
UI is a communication device between user and computer. The UI include keyboard, Mouse and mobile screen etc. A good UI help to easy usages of devices .Main  UI designs refers to graphical user interfaces and other forms. The Main 3 forms are given below,

**Graphical User Interface**
   It is the most commonly used  UI. It's based on visualization This type of user interaction done by mouse or other type of devices .Eg: Computer
**Voice-controlled interfaces (VUIs)**
     this type of user interaction done by the use of voice.Eg: amazon Alexa

 **Gesture-based interfaces** 
  This type of user interaction done by  when the Users engage with 3D design spaces through bodily motions: Eg: virtual realitygames.

## Main Types Of User Interfaces

   **Command Line Interface**
             Common form of user interface .It Need a proper user instruction to the line for using. Computer commanded to the required file or directory then  that time all commands available in file, then  retrieving files to running programs. Major drawback of these type is the difficulty of the language learning, but it have a major advantage that is minimal memory usage.

**Menu Driven Interface**
            A menu driven interface example is ATM.MDI which give a range of option in the form of list displayed in a popup or full screen. The advantage of MID is no need of long type code, but it have a draw back - limited options to choose.

**Graphical User Interface**
                   The commonly used type .GUI which help to people interact with these type of interface by using a mouse ,track pad or other peripheral to point click on icons .Main advantage of GUI is easy to learn ,No code needed but it need large memory space.

**Touch Screen Graphical User Interface**
                The Touchscreen GUI which commonly used type of UI .Which is controlled by the finger .This type of GUI commonly used in the mobile ,tablet etc.

**How to make Good UI**
Users are humans, so they need comfortable and maximum less time usage on the app/website .
The following things that help to make good UI for you app/website 

 *  Make buttons and other common element to help to save the time of the user

 * Use proper alignment. Typically choose edge (over center) 
    alignment.

 * Reduce the number of actions for performing tasks but focus on 
    one chief function per page. 

 * Use proper text align ,color, font because these are the key 
    element of the UI
.
Following the whole installation process properly, still django debug tool is not working?
Tags: django, djangodebugtool, debug, debugtool
Published: 2022-06-02 12:53:35

First of all don't get frustrated. Still now, Everythig is ok! Open the console of your browser and if you show the Following error - 

```
Loading module from “http://127.0.0.1:8000/static/debug_toolbar/js/toolbar.js” was blocked because of a disallowed MIME type (“text/plain”).
```
then just add this two line anywhere in your settings.py file 

```
import mimetypes
mimetypes.add_type("application/javascript", ".js", True)
```

Now restart the app and start coding!
Enjoy!
How to install precompiled binaries on Fedora, example CloudQuery
Tags: cloudquery, fedora, linux
Published: 2022-06-02 12:53:00

As a newbie, I was trying to install [CloudQuery](https://docs.cloudquery.io/docs/getting-started/getting-started-with-aws/) on my work Fedora 35 distribution. However, the CloudQuery package is not available through `dnf` or `yum` and only available as binary files.

To begin, go to root

```shell
$ cd
```

The following is command installs Precompiled Binaries for a x86_64 or arm64 based machine.

```shell
$ curl -L https://github.com/cloudquery/cloudquery/releases/latest/download/cloudquery_linux_x86_64 -o cloudquery
$ chmod a+x cloudquery
```

This will create an executable in your root folder. Running `ls` in terminal

```shell
$ ls
cloudquery
Desktop
Documents
Downloads
Music
Pictures
```

Now, cloudquery is available for execution using

```shell
$ ./cloudquery init aws
```

To make `cloudquery` globally accessible, find your bash profile. Mine is `.bash_profile` at root folder and open it. Add the following
```shell
alias cloudquery="~/cloudquery"
```

The command above assigns such that at every execution, the argument `cloudquery` is pointing to `~/cloudquery`.

`~` points to root directory

If after the change the alias is still not working, run the following so that the changes take effect immediately.

```shell
$ source ~/.bashrc
```
Gnome 42 theming, is it still possible? Short answer, yes!
Tags: linux, tutorial, opensource
Published: 2022-06-02 12:46:09

Options, something that is a big part of Linux for decades. May it be the choice of which tool is the right one for you or theming, the topic of this blogpost. 


![The new Gnome Text-Editor - Theme: WhiteSur by Vinceliuice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de72xfeb0qy81i7xjmml.png) *The new Gnome Text-Editor - Theme: WhiteSur by [Vinceliuice](https://github.com/vinceliuice/WhiteSur-gtk-theme)*
<br />


Theming has been a big topic of controversy with the recent release of GTK4 and especially since Gnome 42. With the release of Gnome 42, several apps appeared to not be themeable anymore. 

Examples for the change are the Gnome Settings app, Gnome Software, Gnome Calendar and so on...


![The new Gnome Software Center - Theme: WhiteSur by Vinceliuice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9s7q7tlzxnz7utgfzxoq.png)*The new Gnome Software Center - Theme: WhiteSur by [Vinceliuice](https://github.com/vinceliuice/WhiteSur-gtk-theme)*
<br />

What is the reason for the big change? Libadwaita!

Many posts on reddit, videos on YouTube. The Linux world was (and maybe still is) up in arms regarding the situation.

But this is exactly the reason I'm writing this post. It is possible to theme! It may be different, more complicated, not to the same extent or perhaps all of the above.


![The new Gnome Settings - Theme: WhiteSur by Vinceliuice](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hs8qghm8ost5uh3d05jq.png)*The new Gnome Settings - Theme: WhiteSur by [Vinceliuice](https://github.com/vinceliuice/WhiteSur-gtk-theme)*
<br />


The awesome theme creator [Vinceliuice](https://github.com/vinceliuice) and some other theme creators made it work.

As time goes on, we will see if other creators will follow this example and what exciting things the future brings to us.

If you want to have Gnome 42 look like macOS I recommend to follow the guide by [Vinceliuice](https://github.com/vinceliuice/WhiteSur-gtk-theme). Other creators might not have such an easy and comprehensive installer in terms of options on hand but time will tell. 

If you are looking for something else, I recommend [Pling](https://www.pling.com/browse?cat=135&ord=latest) as new themes generally get posted there as soon as they are available.

I hope you enjoyed that little showcase of theming Gnome.
GitHub Copilot, gracias por espiarme
Tags: webdev, github, githubcopilot, ai
Published: 2022-06-02 12:41:35

## Inteligencia artificial como compañera de código

Hace un mes, recibí mi ansiada invitación para probar el polémico **GitHub Copilot**. Para quien no lo conozca, se trata de un sistema de **inteligencia artificial** que promete colaborar mano a mano con la escritura de código.

Obviamente, para ello se recopila el código (público y privado) que previamente has escrito. Pero por una vez, no me importa estar bajo el ojo de Microsoft si obtengo a cambio un servicio como Copilot.

> Porque **funciona**, y lo hace **extremadamente bien**.

Ahora mismo tengo entre manos un proyecto web full-stack, y pensé que era buena ocasión para probar la IA de GitHub tanto en el front como en el back. ¿El resultado? Pura maravilla.

En el backend (Laravel), sin exagerar, Copilot escribió todos los métodos de la API. Y en el front, con Angular, me ayudó a resolver de la forma más eficiente el consumo de la misma API.

## La ética de la no-privacidad

Vale, GitHub Copilot funciona. Y de que manera. Pero, ¿sus ventajas son tan notorias para prácticamente entregar la llave de nuestros códigos a Microsoft?

**En mi opinión, SÍ.**
Group the People Given the Group Size They Belong To
Tags: leetcode, dsa, theabbie
Published: 2022-06-02 12:30:42

There are `n` people that are split into some unknown number of groups. Each person is labeled with a **unique ID** from `0` to `n - 1`.

You are given an integer array `groupSizes`, where `groupSizes[i]` is the size of the group that person `i` is in. For example, if `groupSizes[1] = 3`, then person `1` must be in a group of size `3`.

Return _a list of groups such that each person `i` is in a group of size `groupSizes[i]`_.

Each person should appear in **exactly one group**, and every person must be in a group. If there are multiple answers, **return any of them**. It is **guaranteed** that there will be **at least one** valid solution for the given input.

**Example 1:**

**Input:** groupSizes = \[3,3,3,3,3,1,3\]
**Output:** \[\[5\],\[0,1,2\],\[3,4,6\]\]
**Explanation:** 
The first group is \[5\]. The size is 1, and groupSizes\[5\] = 1.
The second group is \[0,1,2\]. The size is 3, and groupSizes\[0\] = groupSizes\[1\] = groupSizes\[2\] = 3.
The third group is \[3,4,6\]. The size is 3, and groupSizes\[3\] = groupSizes\[4\] = groupSizes\[6\] = 3.
Other possible solutions are \[\[2,1,6\],\[5\],\[0,4,3\]\] and \[\[5\],\[0,6,2\],\[4,3,1\]\].

**Example 2:**

**Input:** groupSizes = \[2,1,3,3,3,2\]
**Output:** \[\[1\],\[0,5\],\[2,3,4\]\]

**Constraints:**

*   `groupSizes.length == n`
*   `1 <= n <= 500`
*   `1 <= groupSizes[i] <= n`

**SOLUTION:**

    class Solution:
        def groupThePeople(self, groupSizes: List[int]) -> List[List[int]]:
            numpeople = {}
            for i, gsize in enumerate(groupSizes):
                numpeople[gsize] = numpeople.get(gsize, []) + [i]
            op = []
            for size, people in numpeople.items():
                n = len(people)
                for i in range(0, n, size):
                    op.append(people[i:i+size])
            return op
Redux 101: Using `forwardRef` with Redux
Tags: javascript, react, redux, programming
Published: 2022-06-02 12:18:28

> **TL;DR** When wrapping a component using `forwardRef` in Redux's `connect` function, make sure your `connect` options include enabling `forwardRef`

I'm not a huge redux fan. I use it if I have to and the code base requires it. 

Today I ran across a really small, even stupid (on my part) problem. Why couldn't I get `forwardRef` to work? Here's my short story on this.

## Slightly Tangential context

Until recently I was a front-end focused engineer building a design system at Xero. One of the great perks working on a design system is the use case for Redux is non-existent. So for the past 3 years I have enjoyed writing redux-less code and managing state at a component level or using the Context API where shared state was needed.

Recently, I joined a startup where Redux is used.

## The problem I faced

I wanted to get a very simple solution going where I create and [forward a ref](https://reactjs.org/docs/forwarding-refs.html) down into component's internals. The use-case is quite boring - I wanted to prevent the duplication of logic by relying on the click behaviour of an existing component.

See simplified example below

```
// Top level
const ref = createRef()

return (
<>
  <div onClick={() => ref.current.click()}>
  <MyRefedComponent ref={ref} />
<> 
)

// MyRefedComponent
...
const MyRefedComponent = React.forwardRef((props, ref) => (
  <div onClick={boringLogic} ref={ref}> 
));
```

Looks all good right? Nope, the ref always returned null.

I was first bewildered, surely I can't have forgotten how to do basic refs right? Then I started doubting the most basic parts of my code, I checked everything, and started to pull my hair out - I swapped `createRef` to `useRef` (LOL) everything except (you guessed it) checking Redux.

## What was the issue?

The issue was **Redux**.

When you use `forwardRef` in a component wrapped with Redux's `connect` function, you need to pass in an options object with `forwardRef` set to `true`. See the Redux docs on this [here](https://react-redux.js.org/api/connect#forwardref-boolean).

So in my case I needed to do the following:
```
// MyRefedComponent
...
const MyRefedComponent = React.forwardRef((props, ref) => (
  <div onClick={boringLogic} ref={ref}> 
));

export default connect(mapStateToProps, null, null,{forwardRef: true})(MyRefedComponent)
```

## Lessons learned

A closer look at my code and cross-referencing to the Redux docs would have helped address this problem quickly and avoided Redux humble pie.

Though, in my defence I'm still getting accustomed to using Redux again after a very long hibernation. 

I'll keep an eye out though in future for similar situations and to keep a healthy dose of scepticism around my ability using Redux.

_Do you have an embarrassing story about using Redux too? Would love to learn about it please feel free to share as a comment below :)_