teleren/devto huggingface dataset:
For the love of Open Source
Tags: webdev, opensource, tools
Published: 2020-06-14 16:40:44

Everyday we need some tools to get our work done, like noting things, sharing collaborative items, tracking work, chatting with people and hosting applications on the cloud. All these are the most wanted areas of Software industry and we are paying the commercial companies with either in terms of our data or money.

Today I have a curated list of amazing Open source :heart: products that you can use instead of the commercial ones.

## Notes

Writing notes is very important in IT Life, be it to making API documentation to sharing and storing our thoughts on a digial and easily accessible manner. Here are some of the most popular applications and services that we use.

- [Evernote](https://evernote.com/)
- [Google Keep](https://keep.google.com/)
- [Asana](https://asana.com/)

Instead of these commercial products try using any of the below open source projects. All these products are FREE and are mainly focused on privacy.

- [Joplin](https://joplinapp.org/)
- [Turtl](https://turtlapp.com/)
- [Laverna](https://laverna.cc/)

## Project Management

Being it supply chain or processing transactions every company does have a tool to keep track of the projects. Here are some commercial tools in current trend

- [Basecamp](https://basecamp.com/)
- [Microsoft Project](https://www.microsoft.com/en-in/microsoft-365/project/project-management-software)
- [Asana](https://asana.com/)

Instead of the above try switching to any one of these open source project management tools.

- [Mycollab](https://mycollab.com/)
- [Open Project](https://www.openproject.org/)
- [GitLab](https://about.gitlab.com/)

## Team Chat

Chatting and communicating work between people who work from various offices and parts of the world. Communication is very important. Here are the current trending apps

- [Microsoft Teams](https://www.microsoft.com/en-in/microsoft-365/microsoft-teams/group-chat-software)
- [Slack](https://slack.com/intl/en-in/)
- [Hipchat](https://www.atlassian.com/software/hipchat/downloads)

Instead try any one of the open source projects for communication.

- [MatterMost](https://mattermost.com/)
- [Zulip](https://zulipchat.com/)
- [Rocket Chat](https://rocket.chat/)

## Cloud Hosting

Hosting your application in the cloud is also a important factor in software development. Without cloud services we won't be able to ship products and services to clients seamlessly. The current trending apps

- [Heroku](https://www.heroku.com/)
- [Render](https://render.com/)

Instead here are the open source FREE cloud hosting services that are available.

- [Dokku](http://dokku.viewdocs.io/dokku/)
- [OpenFaas](https://www.openfaas.com/)
- [Flynn](https://flynn.io/)

If you are still reading I hope this list will definitely help you in choosing the right tool for the right job. Thanks for reading. :pray:
Stay tuned for more amazing lists :page_with_curl::page_with_curl:
How to Remove Mixed Content Error in Wordpress
Tags: wordpress, php
Published: 2020-06-14 16:35:23

Hi guys we are gonna see how to remove this annoying error from the wordpress 
![mixed-content](https://dev-to-uploads.s3.amazonaws.com/i/3hus3f97nxpwidg0kwq7.jpeg)

Follow These steps to avoid this issue

1. Go to your wp-admin
2. Head over to plugins and download really simple ssl and actiavate it
![really-simple-ssl](https://dev-to-uploads.s3.amazonaws.com/i/ak3pc85yk70jkrqmpyy8.png)
3. Then click on really simple ssl 
![mixed-content-settings](https://dev-to-uploads.s3.amazonaws.com/i/rrng1z4puslvybjond6p.png)
4. Then under setting sturn on mixed content filter
![m](https://dev-to-uploads.s3.amazonaws.com/i/kxzlyulmq1ho5fzggyd8.png)

5. thats it now you can see a green ssl
![SSL](https://dev-to-uploads.s3.amazonaws.com/i/962hjidawx3ea5n07src.jpg)
Is it now possible to react with a thumb down 👎 on DEV?
Tags: meta
Published: 2020-06-14 16:16:06

I wrote a (knowingly) controversial comment to a post, and in my notifications I see this:

![Screenshot showing the thumb down reaction](https://dev-to-uploads.s3.amazonaws.com/i/p8g5nt4asj19e2nakxuu.png)

But when I look at the reactions of the comment itself the "thumb down" does not appear, nor have I ever been able to "thumb down" anything.

Is this some kind of superpower granted to this website's VIPs? Is it an experimental feature? Does anyone have any information on this?
Golang - why is function return type always byte ([])?
Tags: go, bytes, help
Published: 2020-06-14 16:12:54

Most of the packages in golang return response in byte ([]). 

e.g if you do

`exec.Command("ls").Output()` or `http.Get("http://example.com")` or anything else, the response is in byte ([]). 


whats the reasoning behind this?
Power of Js reducer
Tags: javascript, ecmascript, functional, reducer
Published: 2020-06-14 16:12:45

---
series: Javascript
---

*Reducer* executes a function (provided as argument to reducer) on each element of the array, resulting in single output value.

### Custom Reducer function

```javascript
const reducer = (array, cb, init) => {
  let result = init
  for(let i = 0; i < array.length; i++)
    result = cb(result, array[i], i, array)
  
  return result
}
```

---

### 1. Calculating Length of array using reducer

```javascript
const length = (array) => reducer(array, (total, currEle) => total+1 ,0)

const list = [1, 2, 3]

console.log(length(list)) // 3
```

---

### 2. Implementing map using Reducer

```javascript
const map = (array, cb) => reducer(array, (acc, currEle) => [...acc ,cb(currEle)] ,[])

const double = n => n * 2
const list = [10, 20, 30, 40]

console.log(map(list, double)) //[ 20, 40, 60, 80 ]
```

---

### 3. Implementing filter using Reducer

```javascript
const filter = (array, cb) => reducer(array, (acc, currEle) => cb(currEle) ? [...acc , currEle] : acc ,[])

const isGreaterThanTwo = n => n > 2
const list = [1, 2, 3, 4]

console.log(filter(list, isGreaterThanTwo)) //[ 3, 4 ]
```

---

### 4. Implementing flatMap using reducer

```javascript
const map = (array, cb) => reducer(array, (acc, currEle) => [...acc ,cb(currEle)] ,[])

const flatMap = (array, cb) => reducer(array, (acc, currEle) => [...acc , ...map(currEle, cb)] ,[])

const double = n => n * 2
const twoDList = [[1], [2]]

console.log(flatMap(twoDList, double)) //[ 2, 4 ]
```

---

### 5. Implementing forEach using reducer

```javascript
const forEach = (array, cb) => reducer(array, (acc, currEle) => cb(currEle) ,null)

const printDouble = n => console.log(n * 2)
const list = [20, 40, 50]

forEach(list, printDouble)
/* 
output:
40
80
100
*/
```

---

### 6. Implementing reverse using reducer

```javascript
const reverse = (array, cb) => reducer(array, (acc, currEle) => [currEle, ...acc] ,[])

const list = ["a", "b"]

console.log(reverse(list)) //[ 'b', 'a' ]
```

---

### 7. Implementing every using reducer

```javascript
const every = (array, condition) => reducer(array, (acc, currEle) => acc && !!condition(currEle), true)

const list = [3, 6]
const isDivisibleByThree = e => e % 3 === 0

console.log(every(list, isDivisibleByThree)) // true
```
How I added an overlooked feature in Linux Mint Image Viewer!
Tags: linux, xviewer, opensource, showdev
Published: 2020-06-14 16:07:14

The ability to view/edit documents and images is something that is always taken as one of the primary elements of any Operating System these days. 

Whenever I land up on a new Linux Distro or a new Linux update that is there to disrupt it all, what do I expect?

Let's list it down -
1. Is it smooth?
2. Is it fast? 
3. Is it secure?
4. Is it stable?
5. Is it a daily driver for me?

Of all these questions, #5 is something I consider giving ~~double~~ triple thoughts.

So, while moving to Linux Mint, I observed something very basic was missing in the Image Viewer application that comes out-of-the-box. It lacked the quick toolbar buttons to view your images as a SlideShow / Full Screen.

FYI, the functionality to view images as Slideshow / Full Screen is already present in the X-Viewer App, but accessible only through the drop-down menu.

And that's when I thought, why not add those tiny little buttons and make it work?

All I had in mind is to clone the source code from github and find the exact functions that are triggered for those features.

It took me 4 hours of my time to setup my build environment and inspect the code to reach the exact lines of code which would fulfill my requirements.

The file that I changed was **src/xviewer-window.c**

I added the following lines of code inside the function xviewer_window_construct_ui()


	separator = gtk_separator_new (GTK_ORIENTATION_VERTICAL);
	gtk_box_pack_start (GTK_BOX (tool_box), separator, FALSE, FALSE, 0);

	box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 0);
	gtk_box_pack_start (GTK_BOX (tool_box), box, FALSE, FALSE, 0);

	action = gtk_action_group_get_action (priv->actions_image, "ViewFullscreen");
	button = create_toolbar_button (action);
	gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);

	action = gtk_action_group_get_action (priv->actions_gallery, "ViewSlideshow");
	button = create_toolbar_button (action);
	gtk_box_pack_start (GTK_BOX (box), button, FALSE, FALSE, 0);


And here's what I got as the output -

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uqcmp7taxgznnd4obdem.png)
Javascript fatigue
Tags: javascript, webdev, juniorwebdeveloper
Published: 2020-06-14 16:02:04

So for this week i've had a chance to use Electron - a framework for building desktop applications using the languages of the web. Setting up the boiler plate wasn't too difficult. I think the struggle was choosing the right build tool for the project.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ahl3kd1t9laxoebptiy2.png)

During this time i started to dig deeper into the different npm modules.I also delved into learning about the different build tools such as Gulp, Babel, Webpack, and some other things. I discovered that there is an endless ecosystem of those frameworks, libraries, and build-tools out there. And then i realized that these are the exact jargon words that i have seen listed on many job postings. It seems like those build-tools are just variations of each other. Electron is no exception. In addition to the main framework, you also have tools like electron-builder, electron-packager, electron-forge, and some of them recommend other dependencies such as webpack to integrate. As an intern web developer starting out, this all seems intimidating because you don't necessary know what to choose. Apparently this is a documented phenomenon that exists in the field called "javascript fatigue" felt by many developers, both new and experienced.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ts21ti67gnzl302et6yk.png)

I am an inquisitive person when it comes to code and I always want to understand how the code integrate and work under the hood.I want to catch a glimpse of the big picture of the system i am working with. This is one of those times where i felt that my curiosity is working against me. I ended up going down the rabbit hole of learning about tools, watching tutorials, and reading in-dept documentation about a bunch of different tools to see how they're connected. Even though i learned a lot, this ended up being somewhat counter productive because these things aren't related to the task at hand (yet).

So after a few days, i decided that i had to change my approach to learning new things in this vast ecosystem of technologies. I felt that things are more manageable when you're learning just enough to accomplish certain tasks at hand and then moving to the next task. I don't necessary try to remember the exact APIS of certain tools or framework but only high-level concepts of what they do. You can always look up syntax, and if you work with them long enough you'll just remember by heart. Ultimately, i am trying to avoid the pitfall of learning too many new things at once just because they're popular. I find that the field is more exciting and manageable if i learn new things in moderation and find a way to apply them. This way, i have a better chance of remembering what i learned.
Sieve of Eratosthenes: Find Prime numbers in a given range
Published: 2020-06-14 15:49:23

## What is it?
The Sieve of Eratosthenes is a simple algorithm for finding all the prime numbers of [2, n]. It works by removing multiples of consecutive numbers.


## Implementation
```javascript
const sieveOfEratosthenes = n => {
  // initially label every number from [0, n] as a prime number
  const primeNumbersSieve = new Array(n + 1).fill(true);

  // since 0 and 1 are not prime numbers, label them as false
  primeNumbersSieve[0] = primeNumbersSieve[1] = false;

  /**
   * we stop the loop when i > sqrt(n) which is equivalent
   * to i * i <= n. this is because the maximum divisor of n
   * is sqrt(n), therefore if we allow values of i > sqrt(n)
   * in the loop, we will end up with a value for i where i * i > n
   */
  for (let i = 2; i * i <= n; i++) {
    if (primeNumbersSieve[i]) {
      /**
       * skip all multiples of i < i * i because they have
       * already been checked
       */
      let k = i * i;
      while (k <= n) {
        // remove all multiples of i starting from i * i
        primeNumbersSieve[k] = false;
        k += i;
      }
    }
  }

  return primeNumbersSieve;
};
```

The time complexity of the sieve is **O(nlog(log(n)))**
Road to Genius: beginner #14
Tags: javascript, beginners, computerscience
Published: 2020-06-14 15:34:55

Each day I solve several challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, but you will learn a ton of new and interesting things as you go.

![programming challenge](https://dev-to-uploads.s3.amazonaws.com/i/7pmfjpmu7b5d59coz7zu.png)

This is the last challenge before we reach the next rank, and it's a pretty nice one. We only need to fix one bug 🍎 to complete the challenge. 

The code starts with a function `div` that takes two parameters `dividend` and `divisor`, this already reveals the nature of the function at hand. The buggy line is `acc += 🍎;`, basically we need to figure out which value/variable is used for the summation. This can either be `dividend, divisor, count or acc itself`. By looking at the while-loop's condition it is `(dividend - acc >= 0)`. From this we can conclude that `acc` needs to stay below `dividend`'s value, so we can rule out `dividend` as the answer. Variable count seems to be used for counting the number of times that `divisor` fits into `dividend`, so let's rule it out as well.

Let's see what if we use `acc` as 🍎, starting with value 3 (=`divisor`), it will evolve as: 3 -> 6 -> 12 -> 24. It's the same as writing `acc *= 2`. In this case `count` will only reach value 2 (not 3 as required by the challenge: `A=3`).

On the other hand, if we use `divisor` for 🍎, it will evolve as: 3 -> 6 -> 9 -> 12. In this case the while-loop will end once `acc` becomes 9, and count will be 3 (thus `A=3`).

![programming challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/0fj5tpdqqpgl7qwovpeo.png)

---

If you feel inspired and motivated to upgrade your coding + debugging skills, join me on the Road to Genius at https://nevolin.be/codr/
How to use async, defer in html
Tags: javascript, tricks
Published: 2020-06-14 15:24:51

---
title: How to use async, defer in html
published: true
description: 
tags: Javascript, Tricks
---
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ankhzl30y2qymp0ks667.jpg)

When the browser loads HTML and comes across a `<script>...</script>` tag, it can’t continue building the DOM. It must execute the script right now. The same happens for external scripts `<script src="..."></script>`: the browser must wait until the script downloads, execute it, and only after process the rest of the page.

There are two `<script>` attributes that solve the problem for us: `defer` and `async`.

### defer

The `defer` attribute tells the browser that it should go on working with the page, and load the script “in background”, then run the script when it loads.

### async

The `async` attribute means that a script is completely independent:

- The page doesn’t wait for async scripts, the contents are processed and displayed.
- DOMContentLoaded and async scripts don’t wait for each other:
  - `DOMContentLoaded` may happen both before an async script (if an async script finishes loading after the page is complete)
  - …or after an async script (if an async script is short or was in HTTP-cache)
- Other scripts don’t wait for `async` scripts, and `async` scripts don’t wait for them.

So, if we have several `async` scripts, they may execute in any order. Whatever loads first – runs first

Hope it can help you :)

Cherry pick from [concept](https://javascript.info/script-async-defer#defer)
Introducing Mintoo - The Assistant for Linux Mint
Tags: linux, mint, desklet, opensource
Published: 2020-06-14 15:17:52

So, while on my journey of learning a few things about GTK and how the desklets on Linux Mint Cinnamon work, I thought of making a simple desktop utility that would allow to perform common actions like - 
1. Shutdown
2. Reboot
3. Logout
4. Lock the device

The Mintoo - The Mint Assistant is a friendly assistant for your Linux Mint that'll make your daily work flow easier. The current version supports the functionalities to lock screen, shutdown, reboot, logout from Linux Mint.

![Mintoo - The Mint Assistant](https://dev-to-uploads.s3.amazonaws.com/i/4001yrvr3wucz3rqeza6.png)

The Desklet is available publicly on the Cinnamon Spices plugin repository.
https://cinnamon-spices.linuxmint.com/desklets/view/52
From your mind to be able to create it.
Tags: python
Published: 2020-06-14 15:16:14

Yesterday I had an idea about a program where the user input a random number and can guess the next 3 numbers and the sum of this numbers.
It´s just a little program but I start my journey, and I love it. I really appreciate if one of us tell me how can I write a better code.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g1omp59qrd4zgmwi0jqa.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rphkukujloz0tfvd2hxu.png)
Hello 🤙🏽
Tags: watercooler, writing
Published: 2020-06-14 15:15:23

Alright, aloha and hello internet on my new blog 👋🏽.
Welcome to my very first blog post here (well, actually I tried this before to be honest, but that was a total fail …).

I think I’m gonna use this one to write a little bit about myself and what I’m doing here and then the next ones will hold some more specific content. At least the first topics are planned to make sure this time this will be a little bit more consistent 😀

Ok, so what’s important, I’m Jan, 22 years old at the moment of writing and living in Karlsruhe (in the south of Germany to be more precise). I studied mechatronics after school for one year but also not more than one year … I quit this because it just wasn’t the right thing which turned out to be a pretty good decision. After that I took myself a year off to decide what’s next and spent 2 months in beautiful South Africa with some penguins.
Next up, in fall 2018 I started my apprenticeship at an agency in Karlsruhe as a webdeveloper and I have to say since then, I’m pretty much enjoying this journey. Overall this is an awesome community but I want to say more on this another time. I’m really happy I’m in the last chapters of this apprenticeship, because the school part is not really that much helpful and enjoyable (this is actually much understated, but I get angry every time I try to argue why the school system is a little bit messed up, so that’s enough for here :D). Luckily the team and colleagues, and also friends I met and made during this time and in this environment is just awesome and I’m really happy and grateful to be in that place.

So, you guessed it, or if you even came from places like my [instaram](https://instagram.com/jankohlbach) (otherwise, go follow me there 😬), you already know I do a lot around the web. My main passion is playing around with HTML, CSS and JavaScript and all the other frontend stuff. Nevertheless I also already got in touch with backend stack like PHP or MySQL and although I can work with that as well from time to time, it’s not my favorite. Besides that, I’m also into design as well. Not my best skill, but I’m trying and making things like [this blog](https://blog.jankohlbach.com) or my [homepage](https://jankohlbach.com) 100% on my own to practice and get better. So please don’t be too hard with me on this one 😉

Generally, I’m interested in a ton of different things. Actually I would say too much but at least I’m sure I never get bored … This includes developing more skills in design (some illustrations for example), improving marketing and business knowledge, getting better at playing the piano and just a lot of technical skills that I don’t need all to mention here on their own. You will here about it when I will make some time to work on and with them.

So, I guess that’s pretty much everything you (don’t) need to know about me for now. If you want to follow me, I put all the different links right up there in the sidebar (if you’re not reading this on DEV) so you can check out my other profiles.

That’s it for now, see you. Sometime. Somewhere. 🤙🏽
Flexbox for me
Published: 2020-06-14 15:13:43

- flex-basis: https://www.youtube.com/watch?v=Ns0gWnTR1Ek&list=PLkY6Xj8Sg8-tdVqf_n14swXtQ71XO2-l7&index=22
- flex-grow: https://www.youtube.com/watch?v=nJsHQCYiMVM&list=PLkY6Xj8Sg8-tdVqf_n14swXtQ71XO2-l7&index=23
นักพัฒนา กับ การภาวนา
Published: 2020-06-14 15:12:30

---
title: นักพัฒนา กับ การภาวนา
published: true
description:
tags:
---

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2u3nj99m8mgzsxq3e5va.jpeg)


**การพัฒนา** คือ Development Work เช่น นักพัฒนาอสังหาริมทรัพย์ นักพัฒนาซอพแวร์โปรแกรม. เราจะใช้คำเรียกว่า Developer กล่าวถึงในบริบทการทำงาน

**การภาวนา** มาจากศัพท์ว่า `ภาวิตา` ซึ่งแปลตามศัพท์ก็คือ การเจริญ, และแปลเป็นไทยก็คือ การพัฒนา คือ Development กล่าวถึงในบริบทการทำสมาธิภาวนา

ทั้ง การพัฒนา และ การภาวนา มีแง่มุมที่คล้าย ๆ กันอย่างมากทีเดียว

### 1. ต้องเรียนรู้อยู่เสมอ
**การพัฒนา** คุณจะอยู่นิ่งเฉยไม่ได้. เทคโนโลยี่เปลี่ยนแปลงอยู่ตลอดเวลา แล้วหลาย ๆ ครั้ง เราก็ไม่ได้จะจำอะไรได้ทุกอย่างตลอดเวลา วีธีการแก้ปัญหา solution บางอย่าง ก็มีหลากหลายวิธี จึงจำเป็นต้องมีการเรียนรู้อยู่ตลอดเวลา

**การภาวนา** ก็มี `วิมังสา` ซึ่งหมายถึงการพัฒนา พิจารณา ปรับปรุงอยู่เสมอ โดยการเรียนรู้เป็นประสบการณ์ คำว่า "ประสบ" หมายถึงต้องมีผัสสะนั่นเอง. เมื่อมีผัสสะ แล้วใส่การเรียนรู้ การภาวนา ก็ก้าวหน้าได้.

### 2. ใส่ใจในรายละเอียด
การเขียนโปรแกม แค่ quote ' or " ผิดตัวเดียว ก็เป็น bug ผิดพลาดกันได้มาก. **นักพัฒนา**จึงต้องเป็นคนละเอียดรอบคอบ ในทุกบรรทัดของโค้ด ต้องตรวจแล้วตรวจอีกในทุกเงื่อนไข ก่อนนำไปใช้จริงได้

การจะทำสมาธิภาวนาก็เริ่มด้วยการมาสังเกตุจุดเล็กเช่น ลมหายใจ เป็นต้น จากนั้นก็ค่อยพัฒนาขึ้นไป ใส่ใจในรายละเอียดของสติ ของสัมปชัญญะ ความเข้าใจผิดนิดหน่อย เช่น "อดทน" กับ "เก็บกด" ก็ทำให้สถานการณ์พลิกแพลงไปคนละอย่างได้ ต้องใส่ใจในรายละเอียดทุกอย่างให้ดี


### 3. ขยันด้วยปัญญา (ไม่เกียจคร้าน) 
มีการพูดถึงว่า นักพัฒนาบางคน[ขี้เกียจ]จึงคิดเรื่องนั้นเรื่องนี้แก้ปัญหาต่าง ๆ ได้ แต่ถ้าเราไปอ่านในรายละเอียดจะเป็นเรื่องของปัญญา ที่หาวิธีการแก้ปัญหา จึงทำให้อะไรง่ายขึ้นในการพัฒนาโปรแกรม. เริ่มจากไม่มีอะไร เป็นมีทีละตัว ทีละคำสั่ง ไปจนเป็นทั้ง application ได้

การภาวนาก็ต้องมีความขยันอยู่แล้วในตัว คือมีการปฏิบัติเข้ากับการเรียนรู้ด้วยเลย. ไม่ได้จะเห็นแก่ความสบายหรือลำบาก แต่เห็นแก่กุศลธรรม ถ้ากุศลธรรมเกิดแม้จะอยู่ลำบากก็ตาม นั่นคือความเพียรที่มีผลขึ้นมาทันที.

<!-- # ประเด็น
** เรียนรู้อยู่เสมอ
** เก็บรายละเอียด
** เพียร
** ทำไปเรื่อยๆ (stay humble)
** frontend backend ต้องไปด้วยกัน
 -->



[ขี้เกียจ]:https://dev.to/drm317/the-lazy-developer-5goe