teleren/devto huggingface dataset:
Hello World! This is Me!
Tags: beginners, firstpost
Published: 2022-07-15 10:55:00

Today I begin my new journey as a blogger. My name is Sandra, and I'm an industrial technology engineer (specialising in mechanical engineering). 

I've always been eager to write about my discoveries in the engineering world, but I never took the step forward. Why? Because I thought that what I had to offer was not good enough.

But seeing so many people taking this step, I decided to try! I may not be an expert, but I can help people by learning what I learn on my way to being a mechatronics engineer.

---

#What is this blog?
In this blog, I plan on writing my new findings and discoveries in mechanical engineering, electronics and automation engineering, and programming. I've been working as a mechanical engineer for some time, but in electronics and programming, I'm a rookie.

Right now, I'm on my way to learning Python and MATLAB. My goal in this blog is to teach what I find handy and improve my learning by doing this. I will also post some stuff on mechanical engineering for people who may be interested in it (although I'm still a learner on this topic!).

Also, if you find any mistakes or points that could improve my writing or submitted code, let me know! Receiving advice from more advanced developers is the way to grow better!

---

I hope you find this blog interesting. Thank you for joining me on this adventure!
2231. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-07-15 10:53:00

```
class Solution {
 public:
  int largestInteger(int num) {
    const string s = to_string(num);
    int ans = 0;
    // maxHeap[0] := odd digits
    // maxHeap[1] := even digits
    vector<priority_queue<int>> maxHeap(2);

    for (const char c : s) {
      const int digit = c - '0';
      maxHeap[digit & 1].push(digit);
    }

    for (const char c : s) {
      const int i = c - '0' & 1;
      ans *= 10;
      ans += maxHeap[i].top(), maxHeap[i].pop();
    }

    return ans;
  }
};

```
#leetcode
#weekly contest
Here is the link for the problem.....
https://leetcode.com/contest/weekly-contest-288/problems/largest-number-after-digit-swaps-by-parity/
2232. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-07-15 10:52:00

```
class Solution {
 public:
  string minimizeResult(string expression) {
    const int plusIndex = expression.find('+');
    const string left = expression.substr(0, plusIndex);
    const string right = expression.substr(plusIndex + 1);
    string ans;
    int min = INT_MAX;

    // expression -> a * (b + c) * d
    for (int i = 0; i < left.length(); ++i)
      for (int j = 0; j < right.length(); ++j) {
        const int a = i == 0 ? 1 : stoi(left.substr(0, i));
        const int b = stoi(left.substr(i));
        const int c = stoi(right.substr(0, j + 1));
        const int d = j == right.length() - 1 ? 1 : stoi(right.substr(j + 1));
        const int val = a * (b + c) * d;
        if (val < min) {
          min = val;
          ans = (i == 0 ? "" : to_string(a)) + '(' + to_string(b) + '+' +
                to_string(c) + ')' +
                (j == right.length() - 1 ? "" : to_string(d));
        }
      }

    return ans;
  }
};

```

#leetcode
#weekly contest
Here is the link for the problem.....
https://leetcode.com/contest/weekly-contest-288/problems/minimize-result-by-adding-parentheses-to-expression/
Update nvim-scrlbkun v1.1.0
Tags: showdev, neovim
Published: 2022-07-15 10:51:05

## Introduction

I recently posted [an article](https://dev.to/kensyo/created-a-scrollbar-plugin-for-neovim-nvim-scrlbkun-1263) about the creation of a scrollbar plugin for neovim.

The repositry is [here](https://github.com/kensyo/nvim-scrlbkun).


## Multicolumn feature

Until now, only one line was reserved for display area at the right edge of windows, where components such as scrollbars, search, diagnostics, etc. were displayed together.

However, when components overlap, only the components with the highest priority (A priority can be set for each component) is displayed, which sometimes makes the display difficult to see.

This time, we added options to allow multiple lines to be reserved as the display area(the `width` option), and to determine on which line of the reserved lines to display the component(the `draw_columns` option for each component).

Specify an integer for the `width` option and an array for the `draw_columns` options.

It looks like the image below.

![multiplecolumn preview](https://user-images.githubusercontent.com/9912146/179189284-ec10603e-a863-49c2-88db-2b2171f30d56.png)

By default, the first column from the left is set to search, the second to git hunks, the third to diagnostics, and the scroll bar and cursor position are set to display in all columns.

I hope this feature is useful for you.
2233. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-07-15 10:50:56

```
class Solution {
 public:
  int maximumProduct(vector<int>& nums, int k) {
    constexpr int kMod = 1e9 + 7;
    long ans = 1;
    priority_queue<int, vector<int>, greater<>> minHeap;

    for (const int num : nums)
      minHeap.push(num);

    for (int i = 0; i < k; ++i) {
      const int minNum = minHeap.top();
      minHeap.pop();
      minHeap.push(minNum + 1);
    }

    while (!minHeap.empty()) {
      ans *= minHeap.top(), minHeap.pop();
      ans %= kMod;
    }

    return ans;
  }
};

```

#leetcode
#weekly contest
Here is the link for the problem.....
https://leetcode.com/contest/weekly-contest-288/problems/maximum-product-after-k-increments/
2234. Leetcode Solution in Cpp
Tags: cpp
Published: 2022-07-15 10:49:45

```
class Solution {
 public:
  long long maximumBeauty(vector<int>& flowers, long long newFlowers,
                          int target, int full, int partial) {
    const long long n = flowers.size();

    // if a garden is already complete, clamp it to target
    for (int& flower : flowers)
      flower = min(flower, target);
    sort(begin(flowers), end(flowers));

    // all gardens are complete, nothing we can do
    if (flowers[0] == target)
      return n * full;

    // have many new flowers, can maximize beauty value
    if (newFlowers >=
        n * target - accumulate(begin(flowers), end(flowers), 0LL))
      return max(n * full,
                 (n - 1) * full + static_cast<long long>(target - 1) * partial);

    long long ans = 0;
    long long leftFlowers = newFlowers;
    // cost[i] := cost to make flowers[0..i] the same
    vector<long long> cost(n);

    for (long long i = 1; i < n; ++i)
      // plant (flowers[i] - flowers[i - 1]) flowers for flowers[0..i - 1]
      cost[i] = cost[i - 1] + i * (flowers[i] - flowers[i - 1]);

    int i = n - 1;  // flowers' index (flowers[i + 1:] are complete)
    while (flowers[i] == target)
      --i;

    for (; leftFlowers >= 0; --i) {
      // to maximize the min # of incomplete flowers, we find the first index j
      // that we can't make flowers[0..j] equal to flowers[j], then we know we
      // can make flowers[0..j - 1] equal to flowers[j - 1], in the meantime,
      // evenly increase each of them to seek a bigger min value
      const int j = firstGreater(cost, i, leftFlowers);
      const long long minIncomplete =
          flowers[j - 1] + (leftFlowers - cost[j - 1]) / j;
      ans = max(ans, (n - 1 - i) * full + minIncomplete * partial);
      leftFlowers -= max(0, target - flowers[i]);
    }

    return ans;
  }

 private:
  int firstGreater(const vector<long long>& A, int maxIndex, long long target) {
    return upper_bound(begin(A), begin(A) + maxIndex + 1, target) - begin(A);
  }
};

```
#leetcode
#weekly contest
Here is the link for the problem.....
https://leetcode.com/contest/weekly-contest-288/problems/maximum-total-beauty-of-the-gardens/
Why SSL_get_error returns SSL_ERROR_SYSCALL?
Tags: help, c, openssl, winsock2
Published: 2022-07-15 10:40:27

I attempt to perform an GET HTTPS using HTTP1.1 to google.com call using winsock2 and openssl.

{% stackoverflow 72992681 %}

But despite having proper network connectivity and SSL method being supported from google's part, still I am unable to figure out the reason why I get this error.

can you help me with that?
Python Packaging System
Tags: python, programming, tutorial, codenewbie
Published: 2022-07-15 10:32:20

## Overview
This blogpost about, very fundamental solution / example for Python's headache (pain in the ...) relative imports and packaging system.

## Repository
You can reach the repository from [this link](https://github.com/egesabanci/python-imports)

## Steps
- Create a `virtual environment` for preventing the dependency confliction of the other projects and the easy management for dependencies of the project that you working on:
```
>>> python3 -m venv env
```
We have created the `virtual environment` for our project. Now, we need to activate it:
```
>>> source env/bin/activate
```

- Creating the setup file:

```python
from setuptools import setup, find_packages

setup(
  name = "python-imports",
  version = "0.0.1",
  packages = find_packages()
)
```

This `find_packages` function will lookup to the root and find all packages. Then, we can use these packages (which we have create) in our project like an external package from PYPI.

> **Q**: OK, but how can I create my own package?


> **A**: In simple terms, if you create the `__init__.py` file in one of folders, Python will behave these folders as packages, even if the `__init__.py` file is empty!


- Now, we will install our package locally in editable mode with `pip`:

```
>>> pip install -e .
```

- Final folder structure:
```
├── main.py
├── package1/
│   ├── hello.py
│   └── __init__.py
├── package2/
│   ├── hello.py
│   └── __init__.py
├── env/
└── setup.py
```

- So, we are good to go! We can import our packages like this (in our example - check the `package1` and `package2` folders):

```python
# package2/hello.py
from package1.hello import hello_with_name


def hello_from_package2():
  print("Hello from package-2!")


def hello_with_name_package1():
  hello_with_name(name = "Python")
```
I Created An Open-Source Portfolio Template For Developers 🚀
Published: 2022-07-15 10:12:52

{% youtube chUMwOSTezk %}

Back in 2021, **I created an Open-Source Portfolio Website Template For Developers** called **[Dopefolio](https://github.com/rammcodes/dopefolio)** 🔥

{% github rammcodes/dopefolio %}

![Dopefolio Demo GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tev27exifthm06jmv5wk.gif)

Since then, The Project ended up getting a lot of views, stars, support, etc. from developers all around the world. It also ended up trending on Github and getting featured on **CSS-TRICKS.COM** as the **Hottest Frontend Tool Of 2021** in their Article which you can find **[here](https://css-tricks.com/hottest-front-end-tools-in-2021/#aa-58-dopefolio)** 🥳

Many developers have used  **[Dopefolio](https://github.com/rammcodes/dopefolio)** to build their own Portfolio Website and some of them also ended up tagging me on **Twitter** and other social platforms to share their experience with using **Dopefolio** like some of the tweets which you can find below ⬇️

{% twitter 1483876426814214149 %}
{% twitter 1522539266315800576 %}
{% twitter 1513480576195387393 %}

Although, I had already written an article regarding **Dopefolio** back when it was first created but I thought to write one more article to share the journey so far and also to make it visible in front of the people that don't know about it 🦄

**Dopefolio** also comes with a playground link which you can find in the readme. The playground link includes a color picker component so you can live-test your own preferred primary color for the template like the demo below 😍

![Dopefolio Playground Link Demo GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7xrws395q7zaa3ej1x6.gif)

So, I hope you found this post to be helpful. 

## Support

I do need support from amazing people like you as I started posting on **[My Youtube channel](https://www.youtube.com/channel/UCIb8_J9lqtiWGMIOdQ5DVsg)** and want each one of you to check out my latest Youtube Video which is also posted at the beginning of this article which is regarding **Dopefolio** & subscribe to **[My Youtube channel](https://www.youtube.com/channel/UCIb8_J9lqtiWGMIOdQ5DVsg)**. Here's the video ⬇️

{% youtube chUMwOSTezk %}

**Subscribing** to **[My Youtube channel](https://www.youtube.com/channel/UCIb8_J9lqtiWGMIOdQ5DVsg)** is the best way to support **Dopefolio** and the developer of **Dopefolio** and it will motivate me to bring more and more awesome content and projects for amazing people like you ❤️

**Subscribing** to **[My Youtube channel](https://www.youtube.com/channel/UCIb8_J9lqtiWGMIOdQ5DVsg)** isn't going to change the world but it will change the world for me, so please do it 😇 and it will not cost you anything 😉

---

Now, do me a favor by Reacting to this post with ❤️ + 🦄 and also bookmark 🔖 it for your future reference.

Press the Follow button to stay updated with my content 🚀
Thanks for Reading ❤️
The Best Zapier Alternatives I Have Used So Far
Tags: webdev, automation, productivity, news
Published: 2022-07-15 10:09:17


Note: This is not a sponsored article. All views are from my personal experience

![Pabbly Connect Vs Zapier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yptmjppcvu1qxz54nqq8.png)

As a digital marketer and web developer, i have used many tools for many software automation. 

For automation i have used the following tools

1. Zapier
2. Integromat
3. Integrately (used in last year)
4. Automate.io
5. IFTTT

But every platform gives some type of restriction at some point of time be it price wise or feature wise.

I have stopped using Zapier for about 3 year and they switched to other provider. 

One week back I was searching for some alternatives to Integrately as integrately changing it's pricing model.

I came across one FB ad regarding task automation. It was from [Pabbly Connect](https://bit.ly/PabblyC).

After visiting their website I found out that they are charging nothing as compared to Zapier. 

I have found that they do not charge for internal task which other providers charge as one credit. Which saves a lot of credit utilization.

![pabbly Connect Free task](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a75fnhsocky5erts8z5v.png)

Their team has published a ton of tutorial videos about how to create different automation with step by step guides for all non-techy person.

I have joined their FB group and noticed that they are quite aggressive towards adding new integration. They are taking user consideration and adding every requested integration platform in a responsive manner.

![Automation list](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uy3vuhzp7fkz9amcwgx0.png)

Best thing is that any small business can use it as apart from recurring pricing that also provide one time plan.

Coming to the pricing, So far Pabbly connect provides best pricing as compared to industry peers. And i hope they will continue to provide that unlike others.

Apart from pabbly connect they do have other products but I have not used them. I will post my views once I have used those tools.

You Can use [This Link](https://bit.ly/PabblyC) To Signup or just check out the features

Disclaimer: This article might have affiliate link which will enable me to get some extra income without affecting your purchase price.
feDisplacementMap Explained
Tags: webdev, svg
Published: 2022-07-15 10:08:37

[feDisplacementMap](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feDisplacementMap) is one of the SVG filters that always seems daunting for me to understand. But once I looked into it, it is not so complicated and is actually fun to play with. 

Let's first see what this SVG filter can do.


![Diagram of how feDisplacementMap works](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g7vqqxyc83do8pwjnuzx.png)

`feDisplacementMap` takes in two input source `in` and `in2`. `in` is the image to be displaced, and `in2` is used to calculated how `in` will be displaced. In this case, we used a forest image for `in` and an image created with [feTurbulence](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feTurbulence). We can therefore create a ripple-like effect on the forest image.

In essence, what `feDisplacementMap` is doing is looping through each pixel on an image and move the pixel around based on a transformation formula.

## Transformation Formula
```
P'(x,y) ← P( x + scale * (XC(x,y) - 0.5), y + scale * (YC(x,y) - 0.5))
```
Here's a breakdown of the formula:
- `P'(x, y)` on the left is the coordinates after transformation
- The right part is how it is transformed
- `XC(x,y)` and `YC(x,y)` means the RGB value of the given coordinates on the `in2` image divided by 255, so it will be between 0 and 1
- The larger the `scale` is, the more a pixel is displaced

## Example
```xml
<filter>
	<!-- ... -->
	<feDisplacementMap in2="turbulence" in="SourceGraphic" scale="50" 
        xChannelSelector="R" yChannelSelector="G"/>
</filter>
```

If we compare the syntax of `feDisplacementMap` and the transformation formula, we realize that:
- scale corresponds to `scale`
- xChannelSelector specifies which color channel to look at for `XC(x,y)`
- yChannelSelector specifies which color channel to look at for `YC(x,y)`

> 
**Note**: SourceGraphic is the original input to the SVG filter, which is the forest image.

Here's the full example:
```xml
<svg>
  <defs>
    <filter id="displace">
      <feTurbulence id="turbulence" baseFrequency="0.1 0.1" result="turbulence" />
      <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="10" xChannelSelector="A" yChannelSelector="A"/>
    </filter>
  </defs>
  <image href="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1171&q=80" height="100%" width="100%" filter="url(#displace)"/>
</svg>
```


## Now that we understand `feDisplacementMap`
We can go creative to experiment with interesting graphics with `feDisplacementMap`!

![GIF of a Glitch Text effect using feDisplacementMap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtggj09legt80yo4logn.gif)
Fastest way to learn to code and get fired!
Published: 2022-07-15 10:01:05


_Here are the 5 tips for quitting programming very effectively._

1. **Always copy past.** Don't ever try to understand. So that you will learn to program for nothing and will quit easily.

![developer don't know code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryrrxcpc15ypecz4a685.gif)
 

2. **Don't take any break**, always check if you have any errors and immediately keep looking for answers from day to night. This way you will get frustrated and immediately quit.

![Developer fixing bugs day to night](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omuixp7uksfoq0lpnh18.gif)
 

3. **Learn lot of concepts at a time and never ever check your knowledge**. This way, you will easily forget everything you learned and will quit.

![Developer don't write code except reading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a6btgk06xbom4cqredl5.gif)
 

4. **Don't build any single project**, it will bit your programming experience, and will never understand what the actual programming is. This way you will get unmotivated and will quit.

![Developer don't build any single project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zo1shsckhmecsmms9e8a.gif)
 

5. **And lastly, Don't ever try to involve in any physical activity**. It will make your body suitable for disease so that you will quit programming very effectively.

![developer got illness due to physical inactivity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fpcknmswsd5ovdrynhi.gif)

![Developer destroying computer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6h548v1yivnuoho6gdr.gif)

▶ Watch this video 
{% embed https://youtu.be/0WE-SdPSinY %}

Thanks for reading and have a hot day!
Websites that all web developers should follow.
Published: 2022-07-15 09:25:37

Here are some websites every developer should follow in 2022. These are the ones I follow as part of my career and check out daily to learn the latest about programming and coding. I am sure you might know some of these, and might not know others, but all are useful to help you become a better developer and stay in touch with what's happening in the community.

1.DEV.TO
2.StackOverflow.com
3.Devdocs.io
4.Hashnode.com
5.Github.com
6.Daily.dev
7.Reddit.com
How to use Leaflet control geocoder with React
Tags: react, javascript, map, webdev
Published: 2022-07-15 09:16:37

Hi

This is my first post. I just wanted to write about how to use leaflet-control-geocoder with Open street Map view in react.

My requirement was to get latitude and longitude from a given address. 

After browsing through stackoverflow and lot of googling. I stumbled upon the https://www.liedman.net/leaflet-control-geocoder/docs/classes/nominatim.html, which seemed to solve my issue. 


The packages needs to be added to the create react app are

```
npm install leaflet react-leaflet leaflet-control-geocoder
```

The gist of code which worked for me is

```


import { useEffect } from "react";
import { useMap } from "react-leaflet";
import "leaflet-control-geocoder/dist/Control.Geocoder.css";
import "leaflet-control-geocoder/dist/Control.Geocoder.js";
import L from "leaflet";

import icon from "./constants";

// shape of the props
// {
//  positionInfos: [{address: "some address"}]
// }

export default function LeafletControlGeocoder(props) {
  const map = useMap();
  const { positionInfos } = props;

  useEffect(() => {
    // creaet Geocoder nominatim
    var geocoder = L.Control.Geocoder.nominatim();
    // for every positionInfo
    // get the geocordinates of the address in the positionInfo
    // use the latitude and longitude to create a marker
    // and add it the map
    positionInfos.map((positionInfo) => {
      const address = positionInfo.address;
      if (address) {
        geocoder.geocode(address, (resultArray) => {
          if (resultArray.length > 0) {
            const result = resultArray[0];
            const latlng = result.center;
            L.marker(latlng, { icon }).addTo(map).bindPopup(result.name);
            map.fitBounds(result.bbox);
          }
        });
      }
    });
  }, [positionInfos]);

  return null;
}

```

The corresponding usage in Map

```
import { useState, useEffect } from "react";
import { MapContainer, TileLayer } from "react-leaflet";
import LeafletControlGeocoder from "./LeafletControlGeodecoder";

const Map = (props) => {
  const { positionInfos } = props;
  // get the location from geolocation
  const [latLng, setLatLng] = useState({
    lat: 0.0,
    lng: 0.0,
    isLoaded: false,
  });

  useEffect(() => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          setLatLng({
            lat: position.coords.latitude,
            lng: position.coords.longitude,
            isLoaded: true,
          });
        },
        (error) => {
          alert(error);
        }
      );
    }
  }, [setLatLng]);

  return (
    <MapContainer center={[latLng.lat, latLng.lng]} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <LeafletControlGeocoder positionInfos={positionInfos} />
    </MapContainer>
  );
};

export default Map;

```