teleren/devto huggingface dataset:
Terrain ColoringBook
Tags: perl
Published: 2022-08-04 07:58:19


Scripts and output for [coloring page](https://pluscoloring.com/) book pages based on digital elevation data

Introduction
Adult coloring books are all the rage. Most are hand-drawn, and subjects are wide-ranging. I happen to love maps and landscape data, so I created an automated method to convert digital elevation models (or any greyscale image, for that matter) into a color-able coloring book image.

View the web site here.

before after

Usage
Before using the included Perl script, you'll need to make sure that the NetPBM and TurboJPEG packages are installed and in the user's path. You can do this on an RPM system with:

sudo yum install libjpeg-turbo-utils netpbm-progs
The script operates on whole directories. Every image in the indir (below) will be converted and an output image file and thumbnail will be created in the outdir (which will be created if it does not already exist). Run the script like so:

 makeOutlineImage.pl indir outdir
6 Awesome No code Back end Tools You Must Know 👨‍💻 A Thread 🧵
Tags: nocode, coding, codenewbie, beginners
Published: 2022-08-04 07:55:20



➡️ Airtable 🔷

https://www.airtable.com/

➡️ VoiceFlow 🔷

https://www.voiceflow.com/

➡️ Xano 🔷

https://www.xano.com/

➡️ Backendless 🔷 

https://backendless.com/

➡️ Hasura 🔷

https://hasura.io/

Follow @kshitij7  
For More Posts....
Is it a bad design to remove the setState callback?
Tags: programming, discuss, react
Published: 2022-08-04 07:54:00

When we use React class component, there is a instance method  [`setState(updater[, callback])`](https://reactjs.org/docs/react-component.html#setstate)

`setState` callback which is guaranteed to fire after the update has been applied. 

However, when we use the `setState` method returned by `useState()` hook, it has no `callback` anymore.

Let's compare `setState(updater[, callback])` and the `setState` returns by `useState()` hook.

```tsx
// We can see all the logic at a glance
const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  this.setState(nextState, () => {
    // step 2. call API
  });
}
//...
```

```tsx
const [state, setState] = useState();
useEffect(() => {
  // step 2. call API
}, [state]);

// We need to scroll the editor to the top to see the second part of the logic
// 200 lines code
// ...
// ...

const onIncreaseButtonClick = () => {
  // step 1. Updating the state
  const nextState = {};
  setState(nextState);
}
```

Do you see the difference? 

When the button click event occurs, we have two parts of logic: update state and call API.

In the former case, the two parts of the logic code are organized together, and the execution order and code writing order are the same.

In the latter case, the two parts of the logic are split in different places, the logic for updating the state is in the event handler and the logic for the call API is placed in `useEffect()`. And the order of execution and the order of reading (writing) is not the same.

Some people have the same view as me, such as https://stackoverflow.com/questions/54954091/how-to-use-callback-with-usestate-hook-in-react

That's why someone implements a `useStateCallback` hook.

What do you think?
5️⃣ Awesome Remote Job Website For Developers 🔰 A Thread 🧵
Tags: remote, javascript
Published: 2022-08-04 07:52:59


🔷 Wellfounds🔷

https://wellfound.com/

🔷 justremote 🔷

 http://justremote.co 

🔷 weworkremotely 🔷

http://weworkremotely.com 

🔷 flexjobs 🔷

 http://flexjobs.com 

🔷 solidgigs 🔷

 http://solidgigs.com 

🔷 dynamitejobs 🔷

http://dynamitejobs.com 


Follow @devkshitij7  
For More Amazing Posts..
[Algorithms] 10 - 3Sum
Tags: algorithms
Published: 2022-07-28 23:55:00

[Link to the problem](https://leetcode.com/problems/3sum/)

Three sum problem uses some ideas from two sum problem. But this problem is way harder to come up with the valid solution than two sum, thus, very different question. In this post I am going to go over what makes this problem so hard to solve and the solution as well.

#### Why this is harder than two sum?

Using hash map or set would not be efficient enough to catch duplicates. In two sum problem, all we needed to do was to push visited elements to the set and if the element was visited, ignore it. 

But for three sum, we need to store an array for each number to make sure the combination of numbers are unique or not. This is very hard to implement and inefficient when it comes to time complexity as well.


#### Solution

So what would be the valid approach to the solution? **The first key is using sorting technique to remove all duplicates so that we don't make same combination.**

For example, if the array looks like

```
[1,-3,5,4,-3,2,2,-3,4,-3]
```
and if we sort it, we get

```
[-3,-3,-3,-3,1,2,2,4,4,5]
```

Therefore, we can skip the duplicated numbers after we find the valid combination that makes the sum 0 by sorting the array.

The second key is using two pointers method to search for the right number. We can increase the low pointer when the sum is less than zero, and decrease the high pointer when the sum is bigger than zero unless the two pointers pointing to the same element.

The problem is a little bit tricky to implement in the code. 


```cpp

class Solution {
public:
    vector<vector<int>> threeSum(vector<int>& nums) {
        vector<vector<int>>res;
        
        // Sort the array first. This is for removing duplicates & two pointer search.
        sort(nums.begin(), nums.end());
        
        for (int i = 0; i < nums.size(); i++)
        {
            
            if(i > 0 && nums[i] == nums[i-1])continue;
            
            int low = i +1;
            int high = nums.size() - 1;
            
            while(low < high)
            {
                int sum = nums[low] + nums[high] + nums[i];
                if(sum < 0) low++;
                else if(sum > 0) high--;
                else{
                    vector<int> tmp = {nums[low], nums[high], nums[i]};
                    res.push_back(tmp);
                    low++;
                    while(nums[low] == nums[low-1] && low < high)low++;
                }
            }
        }
        
        return res;
    }
};
```
As you can see, we are skipping elements if they have the same values.

```cpp
if(i > 0 && nums[i] == nums[i-1])continue;
```

```cpp
while(nums[low] == nums[low-1] && low < high)low++;
```

#### Time complexity analysis

The time complexity of the solution is O(n^2) because we are using two pointers method. I was confused about it at first, because I thought I was using binary search for the problem. But since we are moving low and high one by one for each loop, the solution will have O(n^2) instead of O(nlogn)
Full Stack Project Ideas for Beginner 🔰 A Thread 🧵
Tags: developer, programming, javascript, webdev
Published: 2022-08-04 07:50:14


🔰 E-commerce Website 👨‍💻

🔰 Food Delivery App 👨‍💻

🔰 Social Media App 👨‍💻

🔰 Chat Messaging App 👨‍💻

🔰 Workout Tracker 👨‍💻 

🔰 Project Management Dashboard 👨‍💻

🔰 Content Management System 👨‍💻

🔰 Blog/Portfolio Site 👨‍💻

Follow @devkshitij7  
For More Amazing Posts...
Best Utility libraries You Must Know 👨‍💻 A Thread 🧵
Tags: utilities, javascript, webdev, programming
Published: 2022-08-04 07:47:30

🧩 Lazy.js 🧩

https://xem.github.io/Lazy/

🧩 Sugar 🧩

https://sugarjs.com/

🧩 Mout 🧩

http://moutjs.com/

🧩 Lodash 🧩

https://lodash.com/

🧩 Underscore.js 🧩

https://underscorejs.org/


Follow @devkshitij7 
For More Amazing Posts...
Started C#
Tags: dotnet, bootcamp, ilmhub
Published: 2022-08-04 07:37:00

***C# da consoledan kiritish uchun Console.ReadLine qo'llaniladi***
``` cs
namespace Server
{
    public class Program
    {
        public static void Main(string[] args)
        {
            
            
ulong[]?  nums = Console.ReadLine()?.
Split(' ',StringSplitOptions.RemoveEmptyEntries).
Select(ulong.Parse).ToArray();
Console.WriteLine(nums[0] * nums[1]);

        }

        
    }
}
```                                                                          *** C# da array orqali 1 qatorda ulong typega oid son kiritish va ularni ko'paytirish
The story of a Noob
Tags: programming, beginners, career, opensource
Published: 2022-08-04 07:42:00

The stack — VB6, Macros, MS Access
The Experience — 0 Years
The Job — Start of High school

---

## Where do I even begin?

Like I stated in the prologue, I was fascinated with tech from a very young age. What I failed to mention before is that thanks to my loving and understanding parents, my curiosity was not killed in school. That’s mostly thanks to the fact that in my house I could always take any “junk” home to take apart and learn how it ticks.

## My first steps

At the age of 13, I was already pretty good on a PC, but haven’t really dived into programming yet. My first real time was when I went to a few VB6 classes and convinced my parents to buy me a book.

For me it was like magic, I could tell the computer what to do and it would do it, as long as I didn’t fuck it up somehow (which happened a lot at that time). I wrote small dumb things, what most would call a “Hello World”.

## I’ve been a bad boy

It was around the my second year of High school when I noticed how bad the computer system at school was, how weak the security was, and of course I had to find out if I could beat it. But being the goodie two shoes I was, I was scared to do it, and if it wasn’t for the fact that the guy in charge of said system told me I was wrong (he thought it was secure), I wouldn’t have even tried.

So I did what had to be done, I got hold of *.pwl files (win 98 password files, and yes I am a dinosaur), and found out how to crack them. I wrote my first brute force script and made all the PCs in class run it at night. Luckily for me the password was short and within a few weeks it was cracked.

## You have got to start somewhere

Yes I know what you are going to say, what a geek, nerd, <enter your diss here>… Yes, I spent my free time teaching myself programming. No, I wouldn’t change that. I’m not much of a reader (till this day I can’t read for fun), but somehow going through a programming book was not a chore and I learned a ton. I think the most important part was that it interested me and I was passionate about it.

Today is different, but I highly recommend to anyone to just give it a try, go take a course online, or use YouTube, or even just go though GitHub. Today it’s sooo much easier and more accessible. Who knows you may just find that programming is your dream job.

---

If you would like to check out our [open source library](https://github.com/krud-dev/shapeshift/) and leave feedback we would appreciate it greatly.
why you should consider supporting me: little bit about me
Published: 2022-08-04 07:41:00

Honestly, writing articles isn't easy at all, especially for me. Things have been really tough me lately because my computer is from 15yrs ago and i do not have a phone. Stanislav Ilin  Thank you for your support(you always like my articles). I have always had bad computers thats why i started my YouTube channel(to buy better equipment) in the first place but due to inadequate resources i could not continue; microphone was a problem i never had one; my computer could not take running just a React app anymore.
Lately for the past 2-months, i have not been coding due to my computer. I have just me been writing articles and hoping one day i will be able to monitize them and buy a computer and a phone.My computer is really slow (even just for basic browsing) making it very hard to write articles. I am 14yrs, so i do not have a bank account yet(because i have to be 18yrs).if you want to support me  which will be very extremely helpful to me, check out my buymeacoffee [page](https://www.buymeacoffee.com/alex03) Thank you. Data (internet connection) has been a very big problem for me,so if you donate $5 to me, i will be very happy but i will used it to buy Data(for about 2weeks). finally, if you buymeacofee i may give you some premium articles in return
Vue3+electron19 development notepad and outline, mind mapping function
Tags: vue, electron, typescript
Published: 2022-08-04 07:40:50

Now many electronic projects are in version 11 or before, which is a little behind. Major changes have been made after version 11, and the remote module has been removed. It is forbidden to call the API of the main process in the rendering layer. Or the project is too complex for introductory learning. Some projects are developed under the name of electron. The knowledge of electron is still in Hello world. In fact, it is just a web page with electron as a shell.





[https://github.com/MoNaiZi/Note](url)
**You are welcome to ask questions and comments for suggestions, (๑ • ̀ ㅂ• ́)و ✧ stars, thank you**
Prologue — One devs journey
Tags: programming, beginners, career, opensource
Published: 2022-08-04 07:37:00

## A brief history
It’s rude not to introduce myself, so I’ll start with a little background, just to get us started. I can call myself a developer for over 15 years now, and a tinkerer for a few more. I started playing with technology from the very young age of 7, when I entered and won a race event where I built a toy solar car. Till today, as a system architect and having some successes (and failures) at tech startups, and running my own dev & consulting business.

## What’s the point of all this
As of late, my team and I have released the first of our libraries as [open source](https://github.com/krud-dev/shapeshift/), this has made me look back at the path that led me here. My main goal is to share that story, the ups and downs (and sometimes sideways) and hopefully it will help someone on their path. I can’t promise it will be interesting all the time (or even pretty), but I hope you will join me for the journey.

## I’ll try and keep it brief
I will be writing this as a few different posts, each one not much longer than this one, as I want it to be a quick and fun read. So this is the plan:

1. **The story of a Noob** — My somewhat humble beginnings
2. **The journey begins** — Teaching myself in the age before google
3. **They don’t call it intelligence for nothing** — My military career
4. **School can’t teach you everything** — My time at Uni and my first freelance work
5. **It’s time to settle down** — My first real job
6. **Good code is like an onion, it has layers** — The right way to write code
7. **My eureka moment** — After writing the same code over and over, something had to change
8. **It’s ALIVE** — My solution to CRUD boilerplate, and the evolution of the layers
9. **Shit just got real** — Using what I learned to land a big contract
10. **Time to give back** — The birth of my first open source
Say goodbye to ‘npm install’, no need ‘npm install’, throw away ‘npm install’.
Published: 2022-08-04 07:30:00

Say goodbye to `npm install`, no need `npm install`, throw away `npm install`.
## example
In your project, 

1. add `npx -y ai-install` to package.json->scripts->start/build.

```json
{
  "name": "ai-install-demo",
  "scripts": {
    "start": "npx -y ai-install && xxx serve --open",
    "build": "npx -y ai-install && xxx build"
  },
  "devDependencies": {
    "xxx": "x.y.z"
  }
}
```
2. add a new file npm-start.sh, the content is: 

```shell
npm start 
```
After `git clone`, just double click npm-start.sh to start, no typing command.

## because
```shell
npx -y ai-install
```
executing `npm install` if not installed.

npx run an arbitrary command from an npm package (either one installed locally, or fetched remotely).

## think
Does it save a second of typing `npm i`? no!

After the installation of `npm i`, it was not seamlessly connected to `npm start`, which wasted 10 ~ 60 seconds.

If you use `npx -y ai-install`, then `npm start` will likely start a minute earlier.

## yarn & pnpm
```shell
npx -y ai-install
```
In yarn project, auto executing `yarn install` if not installed.

In pnpm project, auto executing `pnpm install` if not installed.

## src
package.json defined a commond `ai-install`.
```json
{
  "name": "ai-install",
  "version": "1.0.0",
  "description": "Say goodbye to `npm install`, no need `npm install`, throw away `npm install`.",
  "main": "index.js",
  "bin": {
    "ai-install": "index.js"
  }
}
```
index.js executing `npm/yarm/pnpm install` if not installed.
```js
#!/usr/bin/env node

var fs = require('fs');
var child_process = require('child_process');

if (!fs.existsSync('node_modules')) {
  if(fs.existsSync('yarn.lock')){
    child_process.execSync('yarn install', { stdio: 'inherit' });
  } else if (fs.existsSync('pnpm-lock.yaml')){
    child_process.execSync('pnpm install', { stdio: 'inherit' });
  } else {
    child_process.execSync('npm install', { stdio: 'inherit' });
  }
}
```
## ref
[ai-install npm](https://www.npmjs.com/package/ai-install)

[ai-install github](https://github.com/lamianbu/ai-install)
FluffyChat push notification with sygnal!!
Tags: fluffychat, flutter, messenger, matrix
Published: 2022-08-04 07:30:00

How you can add [FluffyChat](https://fluffychat.im/) messenger to your custom application with your package name or your unique bundle id?

FluffyChat source code => [Link](https://gitlab.com/famedly/fluffychat)

In my new project development, I realized some information about FluffyChat Messenger.

You can add all of the FluffyChat source code to your new project but absolutely your push notification not working,
if you want to use Firebase Cloud Messaging in FluffyChat for sending a push notification in your new application.

Plz follow these steps:

1) Create new app in https://console.firebase.google.com/ and add `google-serices.json` to your project

2) Setup and install [sygnal](https://github.com/matrix-org/sygnal) in your server

3) In FluffyChat source code plz change **pushNotificationsAppId** and **pushNotificationsGatewayUrl** in `app_config.dart` file

4) Add this line of code in sygnal source code:
in `gcmpushkin.py` add bottom line of code to `_build_data` function:

```
data["devices"] = [{"pushkey": device.pushkey,"data": device.data,"pushkey_ts": device.pushkey_ts,"app_id": device.app_id}]
```
You can see this repository:
https://github.com/taherfattahi/sygnal

5) Add FCM Server key to `sygnal.yaml` in sygnal project

If you have any problem you can get in touch with me, my email address: taherfattahi11@gmail.com 😉
Python Interview Questions and Answers
Tags: programming, python, career, beginners
Published: 2022-08-04 07:15:41

Here you may have Top 100+ [Python Interview Question And Answers](https://www.credosystemz.com/python-interview-questions-answers/) for Freshers, Experienced, Intermediate. And also contain coding/ Programming and OOPs concepts Questions which is provided by Credo Systemz. Here we also here 
PDF's of the Interview questions and also provide sample Mock Interview Videos and Detailed Explanation for Freshers and Experienced Questions.
3 different buttons
Tags: codepen, css, html, button
Published: 2022-08-04 07:08:26

<p>Buttons with the same style but different html structure: the first with only text; the second with text and icon; and the last with just an icon. 
I use google icons: <a href="https://fonts.google.com/icons?icon.set=Material+Icons" target="_blank">https://fonts.google.com/icons?icon.set=Material+Icons</a></p>

{% codepen https://codepen.io/baarbaracrr/pen/dymZdRB %}
I used to Hate Everyone, Everyone hated me :(
Tags: discuss, career, motivation, mindset
Published: 2022-08-04 06:51:54

I used to **hate** everyone, everyone **hated **me.

I thought of everyone **negatively**

I **blamed** my decisions on others

I was the **rudest**, **arrogant**, **egoistic** human.

I did **not get along** with anyone, **not talk** to anyone, and lived in my world **thinking no one is better than me**. I'm the best.

I used to **bully** and **judge** others.

I always said that's who I am. Accept me **as I am or leave**.

I used to think there are **no kind and nice people in the world** and everyone is **faking** it. 

Until one day, I was **sick** of myself.

I finally decided to **change myself and work on myself.**

I started taking **responsibility for my decisions.**

I started accepting **failures**.

I started **treating people kindly.**

I start the **conversation** every single time.

I started **forgiving others for my peace of mind.** 

Instead of _arguing_, **I moved on and remained silent.** 

I started **appreciating** others.

now whenever I get **negative thoughts I pause for a moment and think, Is the person/situation negative or is it just in my mind?**

Most of the time it's just **in my mind.**

_**The world is how you see it. You attract what you think. Think positive and attract positivity.
Think negative and you'll attract negativity.
**_

----------------------------------------

## Ending this post on a quote by Rumi:

> "Yesterday I was clever, so I wanted to change the world. Today I am wise, so I am changing myself"
React detect div reach top and bottom
Tags: javascript, react
Published: 2022-08-04 06:30:00

**Detect Div reaches to bottom**

```
import React, { useRef } from "react";

export default function App() {
  const listInnerRef = useRef();

  const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop, scrollHeight, clientHeight } = listInnerRef.current;
      if (scrollTop + clientHeight === scrollHeight) {
        console.log("reached bottom");
      }
    }
  };

  return (
    <div>
      <div
        onScroll={onScroll}
        ref={listInnerRef}
        style={{ height: "200px", overflowY: "auto" }}
      >
        {Array(200)
          .fill()
          .map((_, i) => {
            return <p key={i}>{i}</p>;
          })}
      </div>
    </div>
  );
}
```




**Detect Div reaches to Top**

```
import React, { useRef } from "react";

export default function App() {
  const listInnerRef = useRef();

  const onScroll = () => {
    if (listInnerRef.current) {
      const { scrollTop } = listInnerRef.current;
      console.log({ scrollTop });

      if (scrollTop === 0) {
        console.log("reached Top");
      }
    }
  };

  return (
    <div>
      <div
        onScroll={onScroll}
        ref={listInnerRef}
        style={{ height: "200px", overflowY: "auto" }}
      >
        {Array(200)
          .fill()
          .map((_, i) => {
            return <p key={i}>{i}</p>;
          })}
      </div>
    </div>
  );
}
```
JavaScript: global scope & block scope
Published: 2022-08-04 06:11:00

* A global scope content exists throughout the file.
* A block scope content only exists inside the block.

example 1: In this example, dogName is a local variable inside the function block.

```
const nameYourDog = () =>{
  let dogName = 'dog';        //dogName is inside the function block
  let ownerName = 'Ruxin';    //ownerName is inside the function block
  if (ownerName === 'Ruxin'){
    let dogName = 'Dahuang';    //declare a new dogName variable inside if block, only change the value of dogName inside the if block
    console.log(dogName);   
  }
  console.log(dogName);  //the dogName variable outside of if block still remain unchanged.
}
nameYourDog();
console.log(dogName);   // the variable is undefined outside the function
```
output: Dahuang  dog  undefined
<hr>

example 2: In this example, we don't declare a new dogName variable inside the if block

```
const nameYourDog = () =>{
  let dogName = 'dog';
  let ownerName = 'Ruxin';
  if (ownerName === 'Ruxin'){
    dogName = 'Dahuang';     //change the dogName value to Dahuang.
    console.log(dogName);
  }
  console.log(dogName);    // the value of dogName is changed outside of if block.
}
nameYourDog();
console.log(dogName);
```
Output: Dahuang Dahuang undefined
<hr>

example 3: declare a global variable.

```
let dogName = 'dog';      //global variable 
let ownerName = 'Ruxin';
const nameYourDog = () =>{
  if (ownerName === 'Ruxin'){
    let dogName = 'Dahuang';    //declare a new local variable and give a value
    console.log(dogName);
  }
  console.log(dogName);   //the global value can be accessed throughout the file
}
nameYourDog();
console.log(dogName);    
```
Output: Dahuang dog dog