teleren/devto huggingface dataset:
Hacktoberfest 2020 
Tags: hacktoberfest
Published: 2020-11-01 02:05:01

<!-- ✨This template is only meant to get your ideas going, so please feel free to write your own title, structure, and words! ✨ -->

## Intro
Hello, I'am Mufti from indonesia, this is my first experience to join the special event in open source program

I start my journey with code some program on internet of things

## Progress

in my progress to complete code, I begin with small project like control LED, DHT11 sensor, Servo and Connect them to Blynk Platform and Ubidots Platform

## Contributions

my contributions
1. Control LED via Blynk 
2. Control Servo via Blynk
3. Monitore Humidity and Temperature with DHT11 via Blynk
4. Monitore Humidity and Temperature with DHT11 via Ubidots

You can check out the links below:

https://github.com/muftiramdhani25/smart-home-led
https://github.com/muftiramdhani25/smart-home-servo
https://github.com/muftiramdhani25/smart-weather-station
https://github.com/muftiramdhani25/ubidots-iot-platform
 

## Reflections
I believe that there are many first time experiences in a developer's life, it can be the first hackathon, the first published article, the first PR, and what not! For me, it was my first Hacktoberfest, and I have learned much about open-source contributions. Definitely, looking forward to making new contributions and mark my impression in this world of open-source.
Multiple tabs in your app
Tags: architecture, javascript, react
Published: 2020-11-01 01:57:47

Update 2024 use [tab-election](https://www.npmjs.com/package/tab-election).

---

We had some problems with multiple tabs that are pretty common:
* Writing to storage could collide or not get picked up
* Logout in one tab would not be noticed in the other
* Sync with the backend would be done independently by all

Being [Uclusion](https://www.uclusion.com/?utm_source=devto&utm_medium=blog&utm_campaign=multitab) we of course used a Uclusion Dialog to decide and the options were:
* [broadcast-channel](https://www.npmjs.com/package/broadcast-channel) the NPM package
* [Broadcast channel API](https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API)
* [Service worker communication](https://felixgerschau.com/how-to-communicate-with-service-workers/#:~:text=Service%20Workers%20can%20intercept%20requests,when%20all%20tabs%20are%20closed)

Pretty easy decision because in addition to using broadcast channel API when available the NPM package supported leader selection. That allowed us to set up a React context to let us know anywhere in the code whether our tab was leader or not - see code [here](https://github.com/Uclusion/uclusion_web_ui/blob/a013f9327700f2d67d56df2d9154575b18cddde2/src/contexts/LeaderContext/LeaderContext.js).

We could also send messages to the other tabs telling them to refresh from IndexedDB [like so](https://github.com/Uclusion/uclusion_web_ui/blob/0523b6fd43d8a696082b2ac1530c4081a3594f4b/src/contexts/CommentsContext/commentsContextReducer.js)
```
const myChannel = new BroadcastChannel(COMMENTS_CHANNEL);
      return myChannel.postMessage('comments').then(() => myChannel.close())
        .then(() => console.info('Update comment context sent.'));
```

Now the basic idea we followed was the leader syncs from the backend and stores in an IndexedDB namespace and all other tabs store their local edits in a differently named IndexedDB namespace. Its very unlikely more than one tab is doing local edits at a time and even if somehow they were the sync from the network is the eventual master.

Also very simple [logout](https://github.com/Uclusion/uclusion_web_ui/blob/fdab31beb38bac3c1cc581a9c38fe06798dfe422/src/pages/Authentication/SignOut.js) broadcasts a message which is listened for by the other tabs [here](https://github.com/Uclusion/uclusion_web_ui/blob/b73290bcaf7ad8be153ff8dc31f253378e30a21f/src/containers/Header/index.js)
```
const [logoutChannel, setLogoutChannel] = useState(undefined);

  useEffect(() => {
    console.info('Setting up logout channel');
    const myLogoutChannel = new BroadcastChannel('logout');
    myLogoutChannel.onmessage = () => {
      console.info('Logging out from message');
      onSignOut().then(() => console.info('Done logging out'));
    }
    setLogoutChannel(myLogoutChannel);
    return () => {};
  }, []);
```
Checklist to Plan and Prepare for a Career in Tech
Tags: career, interview, womenintech
Published: 2020-11-01 01:15:32

![Checklist to Plan and Prepare for a Career in Tech](https://dev-to-uploads.s3.amazonaws.com/i/tumvo3fby0ufp8hrpevm.jpg)


### Research and assess
* Gather up-to-date information on what roles are available out there and what companies are hiring 
* Assess how your resume aligns with skills and characteristics required for those roles
* Customise your resume to best suit the roles that you're going for, by using the same terminology where possible and highlighting transferrable skills

### Take everyday action
* Read tech blog posts, articles and news
* Build your online presence
* Network with people in the tech industry
* Bridge important gaps in your experience via side projects or pro bono jobs
* Be active on LinkedIn and reach out to recruiters directly 
* Apply for suitable jobs

### Prepare for interviews 
* Learn about common interview process at tech companies
* Come up with actionable strategies to help you formulate compelling responses during an interview
* Understand interview red flags and avoid them
* Keep practising your interviewing skills

### Take care of your emotional health
* Interviews are stressful, no matter how many times you've done it. It's ok to feel nervous.  Don't beat yourself up if you get rejected. Practice self-care activities and prepare yourself mentally for interviews and their outcomes. Have the courage and confidence to keep going. 

#### Quick story of how I got into tech
I started my career working as a web developer for a small web agency, doing everything from gathering requirements from customers, designing websites in Adobe Photoshop, building backend applications, coding frontend interfaces, to looking after domain name registration, hosting, and so on.

Throughout my career, I’ve had many different job titles that are similar yet different in many ways, such as developer, technical lead, technical director, startup CTO, head of engineering, software development manager, and engineering manager.

I got into tech because I love using my creativity and problem solving skills to create & build stuff. 

Let me know in the comment if you wanna read more about my personal story.
Good real Time practice algorithm
Published: 2020-11-01 01:12:55

Recently in my internship, I came across making a form in a certain component. I got stuck on making a dropdown where you can choose the start time and end time. But there was a bigger issue no matter where I looked online it was hard to find a good guide on what to do. And I wasn't allowed to use any dependencies to help. So I decided to make a real-time algorithm where when you press the dropdown it drops the whole time in 30-minute increments without writing a whole bunch of excess code. Just try it it is a fun practice.
Republicar aplicação Java sem Restart manual do servidor..
Tags: java, maven, spring
Published: 2020-11-01 00:43:13

O Spring possui uma funcionalidade que ajuda no rápido desenvolvimento de aplicações, o 'Spring-Boot Dev Tools'.
Quando estamos desenvolvendo um sistema web, normalmente precisamos republicar a aplicação para atualizar o servidor com o classpath da nova versão, essa atualização normalmente é feita de forma manual, realizando o republish ou até mesmo restartando o servidor de aplicação. O que gera um atraso no desenvolvimento, pois, dependendo do tamanho do projeto, acaba-se perdendo um tempo precioso com uma simples alteração no Java.
O Spring Dev Tools é uma funcionalidade que veio para diminuir esse tempo de espera.
"Sempre que os arquivos são alterados no classpath, os aplicativos que usam spring-boot-devtools farão com que o aplicativo seja reiniciado. O benefício deste recurso é o tempo necessário para verificar se as alterações feitas são consideravelmente reduzidas:".

Para utilizar-lo é muito simples. Se você utiliza uma aplicação maven, basta adicionar a dependência, segue link da url contendo as versões do spring dev tools.

https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-devtools
Hacktoberfest Finale
Published: 2020-11-01 00:35:54

Over the course of my Release 0.2 Ive worked on many different problems each getting harder and harder. I had a incredible time and this really opened up my eyes to Open Source development. It is an incredible way to boost your resume up a little bit and be able to talk about issue that you encountered while coding.

I think the hardest issue for me in terms of bugs that I had to solve was my last one: https://github.com/redxzeta/Awesome-Adoption/issues/32, you would think this was pretty easy but this was incredible difficult because of all the bugs that I ran into while working with the code. You can find more about this in my blog: https://dev.to/mljbrackett/release-2-0-pr-4-1c73

The pull request that I had the most fun was: https://github.com/Blank1611/jsonmergeutils/pull/14. This pull request was a lot of fun because I got a lot of feedback from the owner of the repo, and he helped me turn my code into something that looked very good. Also I got to work with Pylint which was my first experience with having to make sure my style of coding was up to standards. You can find more about this pull request here: https://dev.to/mljbrackett/release-2-0-pr-3-4d20

The easiest one that I had was obviously my first one, but was also very educational because I had to work with a HUGE code base which I was not used to. It also taught me that sometimes the issues that you work through and the things that you do don't really need to be implemented. https://github.com/mozilla/OpenWPM/pull/762 After spending a couple hours trying to figure out the issue another maintainer found out that we couldn't even implement the fix because they werent updated to the latest version of selenium yet. But as you can see in my pull request I spent a lot of time looking through the code.

I got to work with many different technologies i.e. Python, Node, and React. And with my last PR I even did a bit of Graphic Design for an open source project.

I will 100% be participating in 2021 Hacktoberfest and will even look for some open source projects to contribute to after this course ends.

You can find all the projects and blog posts through my hacktoberfest here: 

##### Issues

* https://github.com/mozilla/OpenWPM/issues/651
* https://github.com/Mustafiz04/Covid-19-website/issues/2 & https://github.com/Mustafiz04/Covid-19-website/issues/6
* https://github.com/Blank1611/jsonmergeutils/issues/1
* https://github.com/redxzeta/Awesome-Adoption/issues/32

##### Pull Requests

1. https://github.com/mozilla/OpenWPM/pull/762
2. https://github.com/Mustafiz04/Covid-19-website/pull/5 & https://github.com/Mustafiz04/Covid-19-website/pull/7
3. https://github.com/Blank1611/jsonmergeutils/pull/14
4. https://github.com/redxzeta/Awesome-Adoption/pull/35

##### Blog Posts

1. https://dev.to/mljbrackett/my-first-public-pr-dbo
2. https://dev.to/mljbrackett/contributing-to-a-covid-19-website-41jm
3. https://dev.to/mljbrackett/release-2-0-pr-3-4d20
4. https://dev.to/mljbrackett/release-2-0-pr-4-1c73
How to use reduce with React?
Tags: react, javascript, reactnative
Published: 2020-11-01 00:33:54

###What is the use of reduce in Javascript?

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in single output value.

```javascript
let a=[1,5,6,7,8];
let total=a.reduce((total,currentValue)=>total+currentValue)
console.log(total);//prints 27
```

In the above example, we are using reduce for sum of array.

####What in case if you want to pass a value to accumulator?

reduce accepts two params function, param.

```javascript
let a=[1,5,6,7,8];
let total=a.reduce(((total,currentValue)=>total+currentValue),20)
console.log(total);//prints 47
```

###How to use reduce in react now?

```react
import React, { Component } from 'react'

export default class App extends Component {
  render() {
    let a=[1,5,6,7,8];
    let total=a.reduce(((total,currentValue)=>total+currentValue),20)
    
    return (
      <div>
        Total sum is {total}    
      </div>
    )
  }
}
```
Retornar XML como resposta no Spring.
Tags: java, spring
Published: 2020-11-01 00:29:38

Existem duas formas de mapear o Media Type de retorno em um endpoint, através das anotações '@GetMapping' e  '@RequestMapping', ambas as anotações podemos utilizar o atributo 'produces', que indica o que será produzido como retorno do end-point o Spring faz uso da biblioteca Jackson para Serializar e Desserializar o conteúdo, neste caso um XML. 

@GetMapping(produces = MediaType.APPLICATION_XML_VALUE)
@RequestMapping(produces = MediaType.APPLICATION_XML_VALUE)
Release 2.0 pr-4
Published: 2020-11-01 00:25:43

For my fourth and final issue that I decided to work on I wanted to take a different approach to open source development.

The repo that I chose to work on is: https://github.com/redxzeta/Awesome-Adoption which is a website that aggregates pets that need to be adopted.

I wanted to expand on my graphic design skill as that is a good tool to have when working as a Web Developer, so I decided to take this issue: https://github.com/redxzeta/Awesome-Adoption/issues/32

I decided to use Paint.net which is a free application.

In the end I created a pretty nice (at least I think so) placeholder image for the website

![image](https://i.gyazo.com/ad6f955c90a1d7f302eaaa49689ede71.png)

So now after around 30 minutes creating this I thought it would be a walk in the park to add it into the repo. Boy was I wrong, this issue took me longer than any other pull request for hacktoberfest.

At first, I needed to get my own API key for the API that the website was using the fill the pets dynamically, so I signed up for that and followed the instructions on the README.md file. Everything was working until I encountered a CORS issue. Randomly I just was not able to access my API anymore cause of CORS, and I couldnt test to see if my code worked. I had to manually plug in all my API credentials into the code to get it to run (this was after a long time of trying to find why I was getting this issue in the first place). Afterwards once I got it to work I had MAJOR issues trying to get the image to load when you built to program since the way the owner coded it made is so that I couldnt just put the route to the image in, instead I had to make an if statement inside the React return statement. Sounds pretty easy when I type it out but it took me a very long time to just get to this stage and trying to figure out how to work with the owners code.

You can find more on my issue here:
https://github.com/redxzeta/Awesome-Adoption/pull/35#issuecomment-719203587

All in all it was still a very educational issue for me because it taught me how to work with things that were even out of the repo maintainers hands (i.e. the API not working).

Even though I didn't think this pull request would have a lot of coding in it since I wanted to try another form of Open Source development, did I ever run into some HUGE issues for myself when working with the code portion.
Day 41 of #100DaysOfCode: Turn the Next.js/Django Website to the Desktop app and Generate Windows/macOS Installers
Tags: nextjs, electron, webdev, javascript
Published: 2020-11-01 00:07:48


## Introduction
My recent target is to turn [my Next.js/Django application](https://daily-learning.herokuapp.com/) to a desktop application and generate installers. There are a few steps to do with electron and eletron-builder.
Image for post

This article introduces the following topics.
1. Introduction
2. Implementations for turning the Next.js/Djang owebsite to the desktop application
3. Demo

## Details
Please refer to my article. 
https://medium.com/a-layman/turn-the-next-js-django-website-to-the-desktop-app-and-generate-windows-macos-installers-db4b4c9ead61

## Articles
There are some of my articles. Feel free to check if you like! 
* My blog-posts for software developing: https://medium.com/a-layman
* My web resume: https://jenhsuan.github.io/ALayman/cover.html
* Facebook page: https://www.facebook.com/imalayman
* Twitter bot: https://twitter.com/ALayman84368087
Run Gulp 4 tasks programmatically from NodeJS
Tags: gulp, node
Published: 2020-11-01 00:00:00

---
title: Run Gulp 4 tasks programmatically from NodeJS
published: true
date: '2020-11-01'
spoiler: Want to use the power of Gulp within your NodeJS application, instead of using the Gulp CLI and a gulpfile.js file? I finally found out how...
description: Want to use the power of Gulp within your NodeJS application, instead of using the Gulp CLI and a gulpfile.js file? I finally found out how...
tags: gulp, node
canonical_url: https://www.sergevandenoever.nl/run-gulp4-tasks-programatically-from-node/
cover_image:
series: Gulp
---
I want to use the power of the Gulp functions like the series(), parallel(), src(), dest(), pipe(), the globbing, an the plugin model within my node application. And it is easy to do. But I can tell you... it took me hours to find out, and the missing link was that I forgot two brackets: (). The gulp.series() and gulp.parallel() give back a function that must be executed:

```javascript
const {series} = require('gulp');

// simple gulp task
const helloTask = done => {
  console.log('hello from helloTask');
  done();
}

console.log('start');
series(helloTask)();
console.log('end');
```

The import part is `series(helloTask)()`. But the output was still in the wrong order:

```
start
end
hello from helloTask
```

This is because everything in Gulp is asynchronous. We need to wait for the completion of the series before continuing.
This can be achieved using a promise, and awaiting the promise. If we want to await a promise we need to execute that code from an async function:

```javascript
const gulp = require('gulp');

// simple gulp task
const helloTask = done => {
  console.log('hello from helloTask');
  done();
}

async function gulpTaskRunner(task) {
  return new Promise(function (resolve, reject) {
    gulp.series(task, (done) => {
      console.log("Gulp task completed");
      resolve();
      done();
    })();
  });
}

async function app() {
  console.log('start');
  await gulpTaskRunner(helloTask);
  console.log('end');
}

app();
```

In this way we can create a simple `gulpTaskRunner()` function that can be executed from within your node application.

And the output is now as follows:

```
start
hello from helloTask
Gulp task completed
end
```
Check whether a condition is met at-least once in a JS array?
Tags: javascript, tutorial, showdev, webdev
Published: 2020-11-09 19:59:52

---
title: Check whether a condition is met at-least once in a JS array?
published: true
date: 2020-11-01 00:00:00 UTC
tags: javascript, tutorial, showdev, webdev
canonical_url: https://jsmates.com/blog/check-a-condition-atleast-once-in-js-array
---

Let's have an array of authors,

```js
const authors = [
  {
    name: 'Param'
  },
  {
    name: 'Joshua'
  }
];
```

We need to check whether an author with the name `Joshua` exists in the array. It can be done in several ways. We are going to use modern ES6+ syntax using `Array.some` to find whether the author exists in the array.

```js
// Check whether author Joshua present in the array
const isJoshuaFound = authors.some(({ name }) => name === 'Joshua');
console.log('Is Joshua an Author? -> ', isJoshuaFound);
```

Now, let's check someone who is not in the array,

```js
// Check whether author Harris present in the array
const isHarrisFound = authors.some(({ name }) => name === 'Harris');
console.log('Is Harris an Author? -> ', isHarrisFound);
```

The advantage of using `Array.some` over other array method is, it will check until the first match exists. Then it breaks out of the loop.

For example, if you have an array of 100 elements, and the match happens at the 2nd element. Then `Array.some` won't iterate over the remaining element.

{% codesandbox array-some-fhhd7 %}
Being In A Hurry Makes You Slower
Tags: programming, productivity
Published: 2020-11-01 10:50:30

---
title: Being In A Hurry Makes You Slower
published: true
date: 2020-11-01 00:00:00 UTC
tags: programming, productivity
canonical_url: https://www.gustavwengel.dk/being-in-a-hurry-makes-you-slower
---

Not too long ago I was working on an unfamiliar project, with a technology stack I didn’t really know. I had a short deadline, and (what I thought was) a pretty short assignment. Turns out it wasn’t. Every time I thought I was done the requirements shifted slightly and every time I thought I had solved the last bug a new one appeared.

Because I was pressed for time, I did two things:

- [I cut corners](https://www.gustavwengel.dk/death-spirals). I didn’t refactor things I should have and I should have tested things I didn’t. I didn’t feel like I had time to do those things - but I also didn’t always know exactly how. This leads to my next point:

- I neglected to learn the things I needed. I felt like I couldn’t justify the time spent to learn how to do X properly, when I didn’t have very much time to do X in the first place.

In another world where the task had been as small as we thought, these could have been the right decisions.  
However as soon as the task became just a little bigger than we thought, neglecting to [learn my tools](https://www.franklincovey.com/the-7-habits/habit-7.html) properly made me much less effective. I traded a short-term benefit for a long-term loss.

I’m not saying you should always spend the time to learn how to do everything properly. But if you’re always in a hurry, and you never get the time to slow down, you might have an issue. Likewise, if you have a short deadline for something and you decide that it’s not worth the time, but then the deadline shifts - it’s time to re-evaluate. A deadline and scope that shifts once, will probably shift again.
Hello Website. Again. My new blog @ webknjaz.me
Published: 2020-11-03 14:24:37

---
title: Hello Website. Again. My new blog @ webknjaz.me
published: true
date: 2020-11-01 00:00:00 UTC
tags: 
canonical_url: https://webknjaz.me/prose/brave-new-world/
---

Once upon a time, I used to have a blog. I've lost it at some point. But here I am again. Starting over... As if this time I won't have excuses to postpone writing new posts. The [definition of insanity](https://throwgrammarfromthetrain.blogspot.com/2010/10/definition-of-insanity.html), huh?

Anyway. It's now time to start over. The old blog used [WordPress](https://wordpress.com) and thus required a web-server with some software like nginx and php-fpm. What sounded necessary back in the day seems ridiculous today. Personal blogs don't need to generate pages on flight, or hit a separate database. All that's needed is some static site generator. And so I chose [Lektor](https://getlektor.com) for this purpose. It's pythonic and very well customizable — just what one needs to run a blog that can be published to [GitHub Pages](https://pages.github.com).

Urgh... That's a pretty long backstory so I'll stop here.

Welcome to my blog!