teleren/devto huggingface dataset:
Leetcode 152 : Maximum Product Subarray
Tags: programming, java, algorithms, tutorial
Published: 2021-11-18 06:17:41

## Problem Statement : 

Given an integer array nums, find a contiguous non-empty subarray within the array that has the largest product, and return the product.

It is guaranteed that the answer will fit in a 32-bit integer.

A subarray is a contiguous subsequence of the array.

## Test Cases : 

Example 1:

Input: nums = [2,3,-2,4]
Output: 6
Explanation: [2,3] has the largest product 6.
Example 2:

Input: nums = [-2,0,-1]
Output: 0
Explanation: The result cannot be 2, because [-2,-1] is not a subarray.

## Constraints:

1 <= nums.length <= 2 * 104
-10 <= nums[i] <= 10
The product of any prefix or suffix of nums is guaranteed to fit in a 32-bit integer.

## Algorithm : 

The most brute force solution is to consider every subarray and take the product keeping track of the maximum product that we have seen so far and finally returning it.
But here the time complexity will be exponential and we can do it better.

1. Keep two variable `prefixProduct` and `suffixProduct`.
2. Traverse through the array.
3. Find the `prefixProduct`. We need to make sure, whenever we see `prefixProduct == 0`, we need to change it to 1 and continue taking the product because, there can be a chance that maximum product might be somewhere after that.
Same procedure with the `suffixProduct`.
```java
 for (int i=0; i<length; i++) {
            prefixProduct = (prefixProduct == 0 ? 1 : prefixProduct) * nums[i];
            suffixProduct = (suffixProduct == 0 ? 1 : suffixProduct) * nums[length - i - 1];
            result = Math.max(result, Math.max(prefixProduct, suffixProduct));
        }
```

Always consider the maximum from the maxProduct seen so far and the maximum of prefixProduct and suffixProduct.

## Complexity : 

The time complexity is O(n) where n = length of array as we only traverse through the array once.
No extra space is being used, so O(1) is space complexity.

## Code :

```java
class Solution {
    public int maxProduct(int[] nums) {
        if (nums == null || nums.length == 0) {
            return 0;
        }
        int length = nums.length;
        int prefixProduct = 0;
        int suffixProduct = 0;
        int result = nums[0];
        // [2,3,-2,4]
        // 4
        // prefix start from i = 0
        // suffix start from i = 3 = length - i - 1
        for (int i=0; i<length; i++) {
            prefixProduct = (prefixProduct == 0 ? 1 : prefixProduct) * nums[i];
            suffixProduct = (suffixProduct == 0 ? 1 : suffixProduct) * nums[length - i - 1];
            result = Math.max(result, Math.max(prefixProduct, suffixProduct));
        }
        return result;
    }
}
```

## Github : 

{%github Rohithv07/LeetCode %}

{%github Rohithv07/LeetCodeTopInterviewQuestions %}
Mac quick action to convert images to JPG
Tags: mac, watercooler
Published: 2021-11-18 05:49:13

If you also own an iPhone and send pictures to your Mac, they often come in HEIC format.

This is the format used for the Live Photo feature, which is cool, but we can't upload these pictures.

I'll show you a super handy shortcut to automate converting any image into a JPG format in this article.

## Using Automator to create a quick action

Quick actions on the Mac are mighty. They create shortcuts we can use natively.
And the cool part is that with Automator, we can make our own ones!

Open up the Automator app on your Mac.

![Mac Automator app](https://cdn.hashnode.com/res/hashnode/image/upload/v1636280499152/j6vfvsYTQy.png)

On the first screen, press the "New Document" button at the bottom.

![New Automator action](https://cdn.hashnode.com/res/hashnode/image/upload/v1636280581711/JMvGZ0Qmz.png)

The action we'll be making is a Quick Action.

![Quick action in Automator](https://cdn.hashnode.com/res/hashnode/image/upload/v1636280626859/c-Zyr1IIW.png)

Inside this quick action, we can have all kinds of actions, pretty cool to find out what's possible.

## Convert images to JPG

But let's stay on topic and see how we can convert images to JPG.

Change the workflow to receive image files in the top section.

![Workflow section](https://cdn.hashnode.com/res/hashnode/image/upload/v1636280846426/T6j7bM3a4.png)

Then on the left, click the Photos action and find the action that states "Change Type of Images".

![Type of image change](https://cdn.hashnode.com/res/hashnode/image/upload/v1636280919112/V1yQHPRrC.png)

Double click it, or drag it to your middle screen to add it.
You can see it also adds a "Copy Finder Items" this enables it always to output these new images to your desktop, but you can change the output folder.

Change the type to JPEG.

![JPG output](https://cdn.hashnode.com/res/hashnode/image/upload/v1636281029122/5FBGLnFWX.png)

That's it. We can now export this function but clicking the File menu and selecting Export.

![Export action](https://cdn.hashnode.com/res/hashnode/image/upload/v1636281080236/DwRmCFoF1.png)

## Install and use the quick action

Now find the action in your selected folder and double click it.
This will prompt you to install it.

![Automator install quick action](https://cdn.hashnode.com/res/hashnode/image/upload/v1636281143692/6kBvgxZqx.png)

Now find an image somewhere and right-click it.
You should now see your custom action under the quick action menu.

![Quick action menu on Mac](https://cdn.hashnode.com/res/hashnode/image/upload/v1636281315326/4ixgx86KC.png)

And if we click it, a new image in JPG format will appear on our desktop!

![Converted HEIC to JPG on desktop](https://cdn.hashnode.com/res/hashnode/image/upload/v1636281380137/mcKh2s10nW.png)

### 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)
SolidJS on Snowpack – Quick Dev Guide
Tags: solidjs, javascript, webdev, pwa
Published: 2021-11-18 05:45:26

This is a SolidJS app dev guide using [Snowpack Solid Template](https://github.com/cy-park/snowpack-solid-template). The template has been tested on node.js `v16.13.0` and npm `v8.1.0`. It might or might not work on other node.js and/or npm versions.

<center>⋅&nbsp;⋅&nbsp;⋅</center>
<center>◆&nbsp;◆&nbsp;◆</center>
<center>⋅&nbsp;⋅&nbsp;⋅</center>

## 1. Install Template

```sh
# Open terminal and clone the repo.
git@github.com:cy-park/snowpack-solid-template.git

# Install dependencies
npm install
```

<center>⋅&nbsp;⋅&nbsp;⋅</center>
<center>◆&nbsp;◆&nbsp;◆</center>
<center>⋅&nbsp;⋅&nbsp;⋅</center>


## 2. Configure Settings

The only required step is Snowpack alias setting. All other steps with ‘optional’ tags are not required unless you make any major template modification (i.e. changing directory structures). 


<center>⋅&nbsp;⋅&nbsp;⋅</center>

### 2.1 Aliases

Open 🗎`snowpack.config.js` and edit `alias` values.


<center>⋅&nbsp;⋅&nbsp;⋅</center>

### 2.2 Typescript and ECMAScript settings (optional)

Check 🗎`tsconfig.json` for Typescript configuration. For ECMAScript version setting, check `target` value in the file.


<center>⋅&nbsp;⋅&nbsp;⋅</center>

### 2.3 Set up PostCSS and Tailwind (optional)

PostCSS is run by 🗎`snowpack.config.js` which refers to 🗎`.postcssrc` which refers to 🗎`tailwind.config.js`. Follow this order and configure accordingly if you want more sophisticated CSS compile process.


<center>⋅&nbsp;⋅&nbsp;⋅</center>

### 2.4 Service Worker for PWA settings (optional)

Check 🗎`workbox-config.js` for Workbox settings.

<center>⋅&nbsp;⋅&nbsp;⋅</center>
<center>◆&nbsp;◆&nbsp;◆</center>
<center>⋅&nbsp;⋅&nbsp;⋅</center>

## 3. Scripts

### 📜 `npm start`

- Starts dev mode at `http://localhost:8080`.

### 📜 `npm run build`

- Builds a production version in `build` directory with service worker.

### 📜 `npm run build_snowpack`

- Builds a production version in `build` directory without service worker.

### 📜 `npm run service_worker`

- Builds service worker.

### 📜 `npm run lint`

- Check if ts/js/tsx/jsx files are neat.

### 📜 `npm run format`

- Format ts/js/tsx/jsx files based on the settings in 🗎`.prettierrc`.

<center>⋅&nbsp;⋅&nbsp;⋅</center>
<center>◆&nbsp;◆&nbsp;◆</center>
<center>⋅&nbsp;⋅&nbsp;⋅</center>

## 4. Caveat

> **It is required to use ✔️`Snowpack@3.3.2` with ✔️`@snowpack/plugin-webpack@3.0.0` to use CSS Modules.**

As of Nov 17, 2021, Snowpack has a bug on CSS Modules compile process. As a workaround, we use [this hotfix](https://github.com/snowpackjs/snowpack/issues/3243#issuecomment-854472971). Once this issue is resolved, 🗎`snowpack.config.js` can be replaced with 🗎`snowpack.config.future-cssmodules.js`. 

For more information about this issue, check these issue tickets: [Issue 2998](https://github.com/snowpackjs/snowpack/issues/2998), [Issue 3219](https://github.com/snowpackjs/snowpack/issues/3219), [Issue 3243](https://github.com/snowpackjs/snowpack/issues/3243)

<center>⋅&nbsp;⋅&nbsp;⋅</center>

**<center>🔥&nbsp;[Live Demo](https://snowpack-solid-template.netlify.app)&nbsp;🔥</center>**
How to make a text - based dice roller in python
Tags: python, programming, tutorial, beginners
Published: 2021-11-18 05:10:14

#Intro
Hello everyone welcome to my another post, in this post as you read the title I am going to tell you how to make a **Text-Based Dice roller in python**

#Required modules
* random
* numpy

###Uses of modules
* random : We will use this module to display random numbers from 1 - 6
* numpy : We will use this to create arrays

#Let's Code

Importing the modules
```python
from numpy import random
```
Making a function which will choose a random number between 1 - 6 and will print it
```python
def dice():
 random_int = random.choice([1, 2, 3, 4, 5, 6])
 print("The number is: \n" + str(random_int))
dice()
```
Writing the code to ask user if he/she wants to continue
```python
ask = True

while (ask == True):

 print("Enter Yes or y to roll dice again \n")
 conti = input("Do you want to continue? \n")



 if conti == "yes":
  dice()

 elif conti == "y":
  dice()
  
 else:
  exit(dice())
```
With this we have completed our text based dice roller in python.
I hope you all enjoyed this post. Feel free to ask questions in the comments section.

#**Thanks For Reading**
Difference between forEach and map.
Tags: javascript, beginners, webdev, programming
Published: 2021-11-18 05:03:19

Javascript has some handy methods which is usefull to iterate arrays.The most two common methods is **`Array.prototype.forEach()`** and **`Array.prototype.map()`**.we can iterate arrays with both methods but output is different.This methods is unclear for many developers, espescially for beginners.

* [Definition](#definition)
* [1.Return value](#return)
* [2.The ability to chain other methods](#chain)
* [4.When to use? what?](#use)
* [Final Thoughts](#final)


<a name="definition"></a>
#Definition
The `map()` method creates a **new array** every time with the populated results of calling a provided function on every element in the calling array.

The `forEach()` method executes with the provided function once for each array element.

<a name="return"></a>
#Return value

The major difference between `map()` and `forEach()` is returning value.map returns new array with transformed elements based on the function which you written and even if they do same job, The returning value is `undefined`.

```javascript
let users=["jyothiprakash","bhanu","nikitha"]
const newArray=users.map((d)=>{
  return {_id:d}
})
//>>>>[{_id: "jyothiprakash"},{_id: "bhanu"},{_id: "nikitha"}]

const newArray=users.forEach((d)=>{
  return {_id:d}
})
//>>>>>>>>>>>>>return value: undefined

```
<a name="chain"></a>
#Ability to chain

The difference between `map()` and `forEach()` is chain with other methods.`map` is chainable but `forEach` isn't.

This means map can chain with other methods like `reduce()`,`sort()` etc.But that is not possible with forEach because it will return undefined.

```javascript
let data=[1,2,3,4,5]

let res=data.map((d)=>d*2).reduce((total,value)=>total+value)
// return value:30

let res=data.forEach((d)=>d*2).reduce((total,value)=>total+value)

//Cannot read properties of undefined (reading 'reduce')"
```
 
<a name="use"></a>

#when to use `map()`? and when to use `forEach()`?


Choice between forEach and map is depends on your usecase.

If you want to change,alternate or use data you can pick `map` because it will return a new array.

If you don't want returning array you can use `forEach` or even `for` loop.

<a name="final"></a>
#Final Thoughts

1.Just about anything you can with `forEach()` and `map()` methods.

2.map allocates memory and always stores `return` value.forEach through away return values and always return `undefined`.

3.forEach will allow a callback function to mutate current array but map won't mutate current array instead return new array.



I hope this post will clear difference between map and forEach methods.If there are more methods please mention in comment section.

 If this post is helpful please click on ❤️ Tab.

Thanks.
Why and why not to use Linux?
Tags: linux, javascript, beginners
Published: 2021-11-18 04:55:19

### Reasons to use Linux
Linux has a better environment for programming. It can smoothly execute software like PyCharm, Rider and Android Studio. Linux has a huge source of tools to make a specific task easier. Not only `aircrack-ng` there are many other CLI based tools, that gonna help you. And one thing, `docker` also executes awesomely in Linux.
### Reasons not to use Linux
Linux has a growing software for video editing which might not fulfill all our requirements. Idiots in the Linux community quarrels over distro i.e. "my distro is better", instead of coding a nice piece of software or staying silent. Image editing and other stuff can be tedious for you. I don't see any point in using Wine, wine just decrease the GUI appearance of the app.
Linux has Krita and Gimp for photo editing, KdelLive for video editing but they may not fulfill all the requirements. Specially, KdelLive can't be used as fully-fledged video editing software like Wondershare Filmora.

### Why I am in Linux based OS?
> I use Ubuntu, Ubuntu is super awesome. Fool people quarrel over distros but that's not what smart linux users do.
I am a developer, and a memer as well. My meming ablities won't die on Ubuntu. I use two webapp for photo editing, that's Photopea and Canva.
Also, if you wanna be a developer and do some basic security stuff come to Linux and use Linux based OS.


### Typical Linux Distro arguments:
Most of the Linux distro arguments are about the desktop environments. You can literally install any desktop environment in any linux based OS you're using. So, let's not quarrel over Linux Distro (aka: Desktop Environment). 

Let's contribute on making software and games for Linux. Let's do it.
How do I make button that plays a random audio?
Tags: webdev, javascript, html, help
Published: 2021-11-18 04:46:34

I am currently building my own website, to document all the stuff I do, mainly my music.

I am making it in Google Sites, which makes it significantly easier.
However! I am trying to make a custom button that plays a random audio from a collection of music demos in my google drive.

![Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bios33ohcx2qttyn62pk.png)

The button itself was easy to construct (and it looks very neat!), but I have NO IDEA how to make it play a random audio from a g. drive folder.
site decoration
Tags: webdev, decoration, ecommerce, métallique
Published: 2021-11-18 04:19:21

Bonjour,

Je suis Florian le créateur de la boutique en ligne Love Trophy spécialisé dans la déco en métal, n°1 en france avec plus de 500 produits différents pour créer cette boutique j'ai utiliser l'application Shopify qui est très bonne surtout quand on as peut de connaissance en développement mais grâce à notre amis google on peut apprendre très facilement.
n'hésitez pas a visitez mon site : https://lovetrophy.com
Automatic ID Card Generator
Tags: python
Published: 2021-11-18 04:17:54

Hlo all .. welcome to my first post :)

So .. what is automatic id card generator ?
We can make ID Cards with user inputs ! 

It is a simple program in which you can input name , age etc and gives a ID Card like output . 

I have used Pillow Python Library to make the canvas , urllib for retrieving image urls and pyfiglet for ascii heading . 

Feel free to edit the code for your own organization ! 

{% github httpanand/ID-Card-Generator no-readme %}
How to add reading progress bar in blogger?
Published: 2021-11-18 04:12:19

In this article, you will learn how to add a reading progress bar in a blogger website. It has been a trend in all blogging websites to show the reading progress bars in their articles.

**What do you need to do?**

In brief, you will need to add a piece of HTML code to the template of your blogger blog. Before we start adding the progress bar to your blog, it is recommended to backup up your blogger blog. If something fails you can restore.

**How to add a reading progress bar?**
You need to add just three codes to your template in order to add a reading progress bar to your blogger site.

1) Copy first Javascript code and paste it above closing **body** tag
2) After that copy the CSS code and paste it just before the **]]></b:skin>**
3) Paste the last HTML code just after the **<body>** tag.

**To get all the codes you can visit the full article on** [How to add reading progress bar in blogger?](https://www.fluxwiz.in/2021/09/how%20to%20add%20reading%20progress%20bar%20in%20blogger.html) 

**Conclusion:**
Adding a reading progress bar on blogger site not only gives an elegant look but also increases your conversions We hope this article has been helpful to you. 

Also, if you found this article helpful, please do share it with your friends on your favorite social media channel.
Có nên mở đại lý xổ số kiến ​​thiết miền bắc (xsmb) không?
Published: 2021-11-18 04:07:15

Mở môi giới vé số (truyền thống) cần bao nhiêu tiền và điều kiện ra sao là câu hỏi được nhiều người quan tâm. Tìm hiểu cách lập đại lý vé số cấp 1, cấp 2, cấp 3 dưới đây.

Nhu cầu tham gia chơi <a href="https://laodong.vn/thong-tin-doanh-nghiep/co-cau-gia-tri-giai-dac-biet-xo-so-mien-bac-968306.ldo"><strong>xsmb</strong></a>, miền trung và miền nam ngày càng tăng và hiện nay nhiều người đang tính đến việc mở môi giới xổ số - một hình thức kinh doanh siêu lợi nhuận. Bạn muốn đăng ký thành lập đại lý vé số nhưng chưa biết chi phí, thủ tục và mua vé số ở đâu. Hãy xem nhanh thông tin bên dưới.

Công ty xổ số kiến thiết?

Công ty xổ số kiến ​​thiết không bán vé số trực tiếp cho khách hàng mà bán thông qua hệ thống đại lý các cấp. Thông thường các đại lý vé số được chia thành 3 cấp:
+ Mở đại lý vé số cấp 1: số lượng vé bán ra tại các phòng vé rất lớn trong mỗi kỳ phát hành.
+ Mở đại lý bán vé số cấp 2, cấp 3: lấy vé từ đại lý cấp 1 (hay còn gọi là tổng đại lý) chuyển về hệ thống của bạn hoặc bán trực tiếp cho khách hàng.
Công ty môi giới <a href="https://vov.vn/doanh-nghiep/nhung-luu-y-khi-nhan-thuong-giai-doc-dac-xo-so-kien-thiet-900273.vov"><strong>xsmb</strong></a>, miền trung, miền nam được phép trao các giải thưởng nhỏ dưới 500.000 đồng như giải sáu, giải bảy, giải tám. Nội quy đại lý bán vé số do công ty phát hành quy định phù hợp với quy định của Hội đồng xổ số khu vực và Bộ Ngân quỹ.

Có đáng để bắt đầu một đại lý vé số?

Các đại lý vé số hàng tuần đưa ra nhiều chiết khấu hoa hồng khác nhau trên toàn bộ hệ thống đại lý bán vé của mình, thông thường từ 13 đến 15% trên tổng doanh thu đối với đại lý cấp 1. Tuy nhiên, số tiền này sẽ được khấu trừ vào thuế thu nhập trước khi được trả lại cho bên trung gian. Đại lý cấp 2 và 3 nhận hoa hồng từ 5 đến 7%, trong khi đại lý cấp 1 và 3 đến 3 nhận hoa hồng cho đại diện bán hàng hoặc nhân viên từ 3 đến 4%. Hàng ngày, vào mỗi đợt phát sóng, số lượng vé số rất lớn lên đến hàng nghìn vé, nhờ đó mà các đại lý đem lại nguồn thu rất lớn cho các công ty. Điều này dẫn đến hoa hồng cao hơn. Sức hấp dẫn của hệ thống hoa hồng vé số cấp 1,2,3 khiến nhiều người làm giàu nhờ đăng ký kinh doanh vé số. Ngày càng có nhiều người muốn vào lĩnh vực này.

Đại lý vé số mua vé số hàng ngày ở đâu?

Mạng lưới môi giới xổ số của các công ty xổ số <a href="https://tienphong.vn/tham-gia-xo-so-voi-smart-phone-thay-doi-de-thich-ung-voi-gioi-tre-post1386943.tpo"><strong>xsmb</strong></a>, miền Trung và miền Nam khá rộng lớn, nguồn vé số bán ra hàng ngày tùy theo quy mô:

+ Nếu bạn mở môi giới vé số cấp 1, chứng minh được tài chính và pháp lý với công ty xổ số thì bạn sẽ nhận vé trực tiếp từ nhà phát hành để kinh doanh.
+ Khi bạn mở môi giới vé số cấp 2 hoặc cấp 3, bạn sẽ nhận được vé số bán buôn để bán hàng ngày từ nhà môi giới cấp 1 theo thỏa thuận phí hoa hồng
+ Là người bán bản đồ chỉ đường, bạn có thể mua vé của các đại lý cấp 2, 3 cho khu vực miền Nam và miền Trung. Mỗi hình thức lấy vé số khi mở đại lý vé số truyền thống sẽ có những thủ tục, quy định và hợp đồng khác nhau.
Adding Github Actions CI Workflow
Tags: github, javascript
Published: 2021-11-18 03:19:17

## Introduction
Hello everyone, my name is Dustin, today I'd like to talk about my experience working with Github Actions and some testings in Javascript.

## At a glance
Github Actions was easy to set up as it's written beforehand, I just needed to remove 1 line of building step because I don't need it yet. But making my code to run and pass all 3 node versions was quite difficult. I ran into trouble a lot of times.

## Progress
First, I decided to migrate from [Commander](https://www.npmjs.com/package/commander) to [Yargs](https://www.npmjs.com/package/yargs) in order to make the code clearer. And then I added some more tests for the e2e test to make sure that help option and version option are working as I expected. As I was running the tests, I found out there's some errors happening and needed to be fixed as soon as possible. So I created a separate branch to fix it. The problem involved `resolve` variable in promise because I accidentally added curly braces around them. As I progressed, I decided to clean up my code a little bit more so I moved from using sync functions to async functions in the `produceFolder` class. 

After that, I pushed the code to my repo, and it seemed like Github wasn't very happy with my `package-lock.json` and `__snapshots__` for some reason. So I had to `npm install` and delete `__snapshots__` and run the test again. 

What I have for my github actions is

```yml
name: Node.js CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x, 16.x]
        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/

    steps:
    - uses: actions/checkout@v2
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v2
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    - run: npm ci
    - run: npm test
```

Unfortunately, it was only successful on the first 2 node versions, not the 16 one due to `rm` and `mkdir`. There was also a problem with `rmdir` because in Node 16, If I remember correctly, it won't be supported anymore so I had to only use `mkdir` to create a folder. I also had to add `{recursive: true}` just in case the folder already exists.

## Wrap up
After a day struggling, I've successfully passed all 3 tests from Github actions and I've learnt a lot from it, especially using Git.

My testing still needs to be improved as it just covers some basics, not every edge case because testing takes a lot of time and thinking. More testing will be added later.