teleren/devto huggingface dataset:
Ride the State Rail Route 🚂🚃🚃
Tags: javascript
Published: 2020-03-31 17:04:15

When you use a router in {insert framework here} you are going to need to in a manor of speaking, define URLs that run functions (views) that render components, the interaction you would use to do this is typically held at the component level, button or link is clicked, handler function is called, sound about right?

Good to hear it rings a bell, now before we continue on, can I point out a massive problem with this. Html links are usable in any codebase, router links are not, if you had to, I mean in a pinch, could you swap frameworks to something else? The center of your universe revolves around React, Vue, Angular, other, your Api might be a service in JavaScript but sadly your navigation cannot be decoupled, or can it?

What if you could decouple and bring strictness to your navigation, remove unexpected results (customers arriving in places they are not supposed be yet), generate free state charts (nice diagrams) describing the flow of your navigation and also control even how back and reload should navigate, I believe I have accidentally found the answer, the answer lies with state machines.

If you don't know what state machines are, you probably do but didn't know it yet. A door for example, it has 4 states:
- open
- closed
- ajar
- error

You cannot walk through a closed door that would result in an error and perhaps a bloody nose.

You can open a close door or an ajar door but not an (fully) open door.

You can close an open or ajar door.

You can do pretty much do anything with an error, you already walked into a door, couldn't get any worse.

You cannot open a door yet also close it, cloning it's very fabric and breaking physics.

So there we go, a state machine is a series of states that contain rules.

Navigation is freely controled by the user but oftentimes we want the user to flow around our application in a controlled way, xstate can be used in a way that allows us to define or states and rules, but what's really awesome, you cannot access those rules until you transition to another state, rules are scoped, encapsulated and very strict. I'm here to tell you that you should not route directly by button click but instead send messages to your Router Machine.

Enough theory, geeez!

... COVID happened, I didn't finish this post. Decided to pull the trigger, if you like this I will do my first ever tutorial post. 😘
100daysofcode Flutter
Tags: flutter, 100daysofcode
Published: 2020-03-31 17:00:36

day 22/100 of #100daysofcode #Flutter
Learning Flutter , courses Udemy from
@maxedapps

Learning about List whereAt, firstWhere , n implement some send data to another screen, constructor, and some logic
https://github.com/triyono777/100-days-of-code/blob/master/log.md
For Loops in JavaScript
Tags: javascript
Published: 2020-12-04 11:51:34

---
title: For Loops in JavaScript
published: true
date: 2020-03-20 16:37:00 UTC
tags: javascript
canonical_url: https://dberri.com/for-loops-in-javascript
---

JavaScript has at least three distinct ways of defining "for" loops:

`for`: Runs a block of code a number of times;  
`for/in`: Iterates over properties of a given object;  
`for/of`: Iterates over the values of _iterable_ objects_;_

## For

This loop repeats the execution of your block of code until a specified condition becomes false.

Let's check the syntax of this simpler loop:

```js
for (statement 1; statement 2; statement 3) {
  // block of code to be executed
}

```

_Statement 1_ is executed only once before your block of code runs. Usually we define the loop's initial condition, but this is an optional parameter and can be defined before the loop statement if needed.

_Statement 2_ defines the condition for the execution of the code block. Here you end up defining how many times the code block will run. This parameter is also optional, though if omitted, it's necessary to add a **break** inside your code block, otherwise the loop will never finish and the browser will crash.

_Statement 3_ is executed once for each execution **after** your code block runs. As you might have guessed by now, this parameter is also optional.

```js
const languages = [‘javascript’, ‘python’, ‘php’];

for (let i = 0; i < languages.length; i++) { 
  console.log(`${i}: ${languages[i]}`)
}

// expected output:
// “0: javascript”
// “1: python”
// “2: php”

```

## For/in

This loop iterates over an object's properties (keys).

```js
const js = { name: ”JavaScript”, author: ”Brendan Eich”, year: 1995 };

for (const prop in js) {
  console.log(`${prop}: ${js[prop]}`);
}

// expected output:
// “name: JavaScript”
// “author: BrendanEich”
// “year: 1995”

```

The same could be done using a simple "for" loop using `Object.keys`, which extracts the properties of an object to an array:

```js
const js = { name: ”JavaScript”, author: ”Brendan Eich”, year: 1995 };
const properties = Object.keys(js);

for (i = 0; i < properties.length; i++) { 
  const prop = properties[i]
  console.log(`${i} ${prop}: ${js[prop]}`);
}

// expected output:
// “0 name: JavaScript”
// “1 author: Brendan Eich”
// “2 year: 1995”

```

## For/of

This runs the loop over the values of _iterable_ objects. A few examples of _iterable_ objects in JS are Arrays, Strings, Maps, Sets and NodeLists. The syntax is as follows:

```js
for (*variable* of *iterable object*) {
  // code block to be executed
}

```

Here's an example like the previous:

```js
const languages = [{ name: ”JavaScript” }, { name: ”Python” }, { name: ”PHP” }];

for (const lang of languages) {
  console.log(lang);
}

// expected output:
// { name: ”JavaScript” }
// { name: ”Python” }
// { name: ”PHP” }

```

Both `for/in` and `for/of` are very useful, each being used in their own way can make your code more legible, in my opinion. Hopefully this tip has been useful to you :)
Remote Fika OR how can we feel connected as a team when we work remote
Tags: remote
Published: 2020-03-31 16:51:47

The Corona crisis pushed us into working remotely three weeks ago. This was an early move by idealo to be prepared
and to ease the burden on our health system in Berlin and Germany. 

Overall my team did the transition very well, mood and productivity is still good. What I felt was missing
was the casual conversation in the kitchen or the lunch with the colleagues where there always was time to connect
on a more personal and private basis. Chat about the latest movies, bitching about politics or others things.
For the first weeks as a remote team we where missing out on these situations, all communication was limited to 
the work we do. So I felt disconnected from the humans while the work connection was quite OK. this was what 
made me act on it.

## What is Fika?

My wife and her family is strongly connected to Sweden (and the other scandinavian countries for that matter). 
This is how I heard about [Fika](https://sweden.se/culture-traditions/fika/):

> Fika is much more than having a coffee. It is a social phenomenon, a legitimate reason to set aside a moment for quality time. Fika can happen at any time, morning as well as evening. It can be savoured at home, at work or in a café. It can be with colleagues, family, friends, or someone you are trying to get to know. It is a tradition observed frequently, preferably several times a day.

## Remote Fika in my team

I just went ahead for my team and suggested, that we spent fifteen minutes every morning together for a Remote Fika.
Attending is voluntarily and nobody prepares an agenda or something for the Fika. I arranged the time for Fika so it leads 
directly into our first team meeting of the day (the daily aka daily stand up, daily scrum, ...).
And we just use the same Google Meet room for the Fika and when the time has come, we move over to the daily.

As I initiated the idea I ensured that I attended all Fikas for the first week. I was prepared that nobody shows up
for the first Fika, but this was not the case. We had good, funny and interesting things we shared and discussed
over this short period of time.

And the best thing for me is: I really feel more connected to my colleagues. I know if they maybe had a bad day or 
did not sleep good last night. What is on their minds. I am always looking forward to the next Fika and can let
the team wander off for the day to work on their tasks, soothed and certain that they are OK. For me as the team
lead this is so important to know.

So grab a coffee or tea, maybe a sweet as recommended and join your team or your peers for a Fika.
NS illustration pack
Tags: design, webdev
Published: 2020-03-31 16:19:24

Hi, I recently wrote here, then I thought that my pack of illustrations would be a little more, but I realized that I was a bit burnt out and I want to get distracted from 3D for a while, so I decided to put my pack of illustrations in such a not so ready-made form, it includes about 20 illustrations.
This is a pack of isometric low poly illustrations created in a blender, it is distributed under the MIT license and I hope it will be useful to someone, some of the illustrations were created specifically for the pack and some are my old works that I decided to put =)

Link to the pack: https://github.com/nsobolewart/NS-illustration-pack
🐏 How React memoization works
Tags: react, javascript, jsx
Published: 2020-03-31 15:50:09

---
title: 🐏 How React memoization works
published: true
description: How to memoize your children to not trigger a re-render
tags: react, javascript, jsx
---

First you should know whats happening when using React and JSX

```jsx
import React from 'react'

function SomeChildren() {
    /* ... */
    return null /* ... */
}

function LinkWrapper(props) {
    /* ... */
    return null /* ... */
}

function App() {
  return (
    <LinkWrapper uselink>
      <SomeChildren />
    </LinkWrapper >
  )
}
```

When compiling `JSX`, Function `App` becomes

```jsx
import React from 'react'

function App() {
  return React.createElement(
    LinkWrapper, // component
    { useLink: true }, // props
    React.createElement(SomeChildren) // children
  )
}
```

And at runtime when React calls your function, here is what your function will return
Replaced `App` return with what kind of data `React.createElement` is returning.

```jsx
function App() {
  return {
    "$$typeof": Symbol(react.element),
    "type": LinkWrapper,
    "props": {
      "useLink": true,
      "children": {
        "$$typeof": Symbol(react.element),
        "type": SomeChildren,
        "props": {}
      }
    }
  }
}
```

So at every call, React will always get a new definition of your `App`,
This will trigger to get the definition for all tree of components.
Note: This will not actually render to DOM anything. React just needs to know if anything changed.

Now for example you use `React.memo` to memoize your `LinkWrapper`

```jsx
const LinkWrapper = React.memo((props) => {
  return null /* ... */
})
```

This will make React to receive previous `LinkWrapper` return value if props were not changed.
Note: By default it will only shallowly compare complex objects in the props object.

Now let's come back at our `App`

```jsx
function App() {
  return (
    <LinkWrapper uselink>
      <SomeChildren />
    </LinkWrapper >
  )
}
```

As I explained above `<SomeChildren />` always will return a new React definition.
This means that using `React.memo` on `LinkWrapper` will not have any effect.
Because children always will be a new definition.

If you want to also memoize children you will have to do it manually.

```jsx
function App() {
  const memoChildren = React.useMemo(() => <SomeChildren />, [])
  return (
    <LinkWrapper uselink>
      {memoChildren}
    </LinkWrapper >
  )
}
```

This can also be wrote as

```jsx
function App() {
  const memoChildren = React.useMemo(() => <SomeChildren />, [])
  return (
    <LinkWrapper uselink children={memoChildren} />
  )
}
```

Now `memoChildren` will always have same value between re-renders
Now `LinkWrapper` will also see that children did not change,
and will return last memoized value without calling the function again
How to get rid of all those non-javadoc comments in your Java project ✨
Tags: java, regex, codequality, productivity
Published: 2020-03-31 15:46:04

Have you ever met something like this in your legacy code?

```java
/* 
 * (non-Javadoc)
 * @see java.lang.ClassLoader#loadClass(java.lang.String)
 */
```
If you are a Java programmer from more than one millisecond i guess so. 😇

### What is it?
It is the template Eclipse IDE used to generate when overriding a method from a super class. Legend tells it was a workaround for a bug in the JavaDoc generator when inheriting docs from the parent class. 

### Should i keep these as of today?
Long story short: **No**. 
They're useless for robots and polluting for developers. 

#### Robots
For JavaDoc generators, the only [officially supported](https://docs.oracle.com/javase/6/docs/technotes/tools/solaris/javadoc.html) way to copy docs from a parent is adding following snippet right before the method signature:
```java
/** 
 * {@inheritDoc}
 */
```
Please notice the double star in the first line.

#### Developers
As developer i find this kind of boilerplate noisy other than actually meaningless. Writing something about the reason for overriding parent class would be more useful.

### How do i clean it? 
You can either use a _light_ approach, deleting them every time you find one in your code. But i'd rather take the hardcore 🤘 approach, matching them with a regular expression. 

Using your IDE (i've tested it with IntelliJ IDEA and Eclipse) you can use the following regex to replace all the occurrences in path.
```
(?s)/\*[^*](?:(?!\*/).)*\(non-javadoc\)(?:(?!\*/).)*\*/
```

Always keep your code clean and readable! 

Refs:
[StackOverflow](https://stackoverflow.com/questions/6194479/regex-for-matching-non-javadoc-comment-in-eclipse)
Build a Proximity Detection System with a Raspberry Pi, Solace PubSub+, and JavaScript
Tags: fordevelopers
Published: 2020-04-02 16:19:14

---
title: Build a Proximity Detection System with a Raspberry Pi, Solace PubSub+, and JavaScript
published: true
date: 2020-03-31 15:44:20 UTC
tags: For Developers
canonical_url: https://solace.com/blog/build-a-proximity-detection-system/
---

 ![](https://solace.com/wp-content/uploads/2018/10/LIGHT_What%E2%80%99s-New-in-PubSub-Cloud-October-1.png) 

Have you ever wanted to tinker around with a Raspberry Pi and IoT but felt that it was too daunting? We’ve developed a set of instructions for you to build a proximity detection system using a Raspberry Pi with an ultra-sonic proximity sensor. The instructions include the materials you need to purchase, how to wire everything together, and the code required to build an application on top of it.

[![](https://solace.com/wp-content/uploads/2020/03/comic.png)](https://solace.com/wp-content/uploads/2020/03/comic.png)

## **What You Will Build**

In the [codelab](https://codelabs.solace.dev/codelabs/raspberry-pi-proximity-sensor/index.html), it runs you through step by step instructions of setting up your Raspberry Pi, wiring it to a proximity sensor, building an application in Javascript that reads the events from the proximity sensor, and publishing it to a Solace [PubSub+ Event Broker: Cloud](https://solace.com/products/event-broker/cloud/).

You can now build microservices over proximity events triggered when someone comes close to the device!

## **JavaScript and IoT – Not Your Typical Combination**

JavaScript is typically not a language you would associate with IoT, but with the advent of NodeJs, it is being used for more and more use cases outside of traditional web development. One of the frameworks that builds on Node is [Johnny-Five](http://johnny-five.io/) – a general purpose IoT framework that works across multiple processor architectures such as SparkFun, Arduino, and Raspberry Pi. The codelab makes use of this framework to gather events from the sensor.

## **Exposing IoT Events Over Solace PubSub+**

Once you’ve detected an object within a certain proximity, what if you wanted to stream this as an event so that it can be picked up by microservices or a dashboard? That’s where [Solace PubSub+ Event Broker: Cloud](https://solace.com/products/event-broker/cloud/) comes into play, a polyglot event broker that allows you to publish IoT events from your Raspberry Pi and subscribe to it with different applications and languages.

[![Building a proximity detection system](https://solace.com/wp-content/uploads/2020/03/exposing-iot-events.png)](https://solace.com/wp-content/uploads/2020/03/exposing-iot-events.png)

Take a look at the codelab [here](https://codelabs.solace.dev/codelabs/raspberry-pi-proximity-sensor/index.html) and start building!

The post [Build a Proximity Detection System with a Raspberry Pi, Solace PubSub+, and JavaScript](https://solace.com/blog/build-a-proximity-detection-system/) appeared first on [Solace](https://solace.com).
Bootstrap Responsive Testimonial
Tags: css, webdev, beginners
Published: 2020-03-31 15:37:30

Testimonial used in a website to show a client/user positive feedback. So here we made simple Testimonial using bootstrap 4 and with some basic CSS.

Here we also modify bootstrap classes within used in bootstrap Carousel. For making this element we use bootstrap Carousel components. In this element, we removed background image and there we used custom background color with height. Also, we modify Carousel indicators on rounded circles.

Make it yours now by using it, downloading it and please share it. we will design more elements for you.

[Download Source code](https://w3hubs.com/bootstrap-responsive-testimonial/)
My first experience in a Tech group for girls
Tags: girlintech, frontend, beginners
Published: 2020-03-31 15:37:11

There are a lot of complications when you decide to change all your professional choices, specially if you are a woman and if you want to enter the Tech industry, an area dominated by men. Yeah, I'm living this now, and last Saturday I had my first experince in a Tech group for girls. Did I enjoy it?

Of course! 

Since last year, I'm involved in HTML/CSS studies: I bought some online courses and started studying all by myself. And God, it's hard! I can't count how many times I wanted to give up: "Tech is not for me", "I can't do it", "There are so many people doing this better than me" "I will never be hired". Drama? Pessimism? Insecurity? Call it what you want.

So, I discovered the [{Reprograma}] (https://reprograma.com.br/) project and I changed my mind again. But now in a good way.

**{Reprograma}** is a social project that wants to reduce the gender gap in the Technology sector through education. The project offers free online  and offline courses for women like me, who are changing their professional lives and starting from scratch in Technology. So, on March 28th I participated in a HTML/CSS workshop with 30 other girls. The most surprising part: *more than two thousand people applied*, and I was one of the selected ones!

The workshop gave me some front-end knowledge, of course, but mainly a great feeling and I though: "Oh man, I'm not the only one in this crazy journey". It meant a lot to me, and I even don't know exactly how or why. I only know that now I'm more confident. And I like to feel this way. Let me enjoy hehehe
In response to COVID-19, the k6 team now offers free access to k6 Cloud to non-profits fighting the pandemic
Tags: covid19, webdev, testing, news
Published: 2020-03-31 16:09:01

---
title: In response to COVID-19, the k6 team now offers free access to k6 Cloud to non-profits fighting the pandemic
published: true
date: 2020-03-31 15:30:00 UTC
tags: 
  - covid19
  - webdev
  - testing
  - news
cover_image: https://images.unsplash.com/photo-1584757283806-b5c0b3dd3734?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3900&q=80
canonical_url: https://k6.io/blog/covid-19-response-free-cloud-load-testing
---

The novel Coronavirus is continuing to spread around the world and has now reached most corners of the globe with devastating health, social and economical effects as a consequence, so we hope that you and your loved ones are safe and in good health.

The pandemic will come to an end, and when it does all of us will have been affected. Many will lose a loved one. Many will lose a job or see a business go under. It is our collective actions now that will determine how many. It is a time to show solidarity, as we fight together against Covid-19.

As a globally distributed team, we see the effects this pandemic is having on all of our countries, so as passionate technologists we want to offer a **free subscription to our k6 Cloud load testing service to all non-profit organizations and projects** working on apps or websites to help their communities, countries and the world to get through this pandemic.

If you are working for an organization or project around Covid-19, or know someone who is, reach out to our [support team](https://k6.io/contact) (or support@k6.io) with details of the project and we’ll help get a subscription setup equivalent to our [Pro plan](https://k6.io/pricing).

As a business, we’re fortunate to be in an industry that can continue to operate (mostly) as usual. Most of our team is normally working remotely, and all of us have been remote for the past couple of weeks, to be on the safe side.

Stay safe.

The k6 Team
Simple React hook to handle input
Tags: react, javascript, reacthooks
Published: 2020-03-31 15:22:35

---
title: Simple React hook to handle input
published: true
description: 
tags: react, javascript, react-hooks
---

When building in react often you have to deal with different inputs like text, number, date... and each time it is kind of annoying to write **onChange** handlers with same boiler plate code to handle the local state. I wrote a really simple hook to avoid that boiler plate 

```javascript
import { useState, useCallback } from 'react';

const useInput = initialValue => {
  const [value, setValue] = useState(initialValue);

  const handleChange = useCallback(
    event => {
      setValue(event.target.value);
    },
    [setValue]
  );

  return { value, handleChange, setValue };
};

export default useInput;
```

and you can use this as follows

```javascript
import useInput from './useInput';

const App = () => {
  const { value, handleChange } = useInput('');

  return <input value={value} onChange={handleChange} />;
};

export default App;
```
Developers Gain Contextual Feedback with Automated Pull Request Commenting
Tags: github, vulnerabilities, opensourcegovernance, automation
Published: 2020-03-31 20:18:38

---
title: Developers Gain Contextual Feedback with Automated Pull Request Commenting
published: true
date: 2020-03-31 15:14:09 UTC
tags: github,vulnerabilities,open source governance,automation
canonical_url: https://blog.sonatype.com/developers-gain-contextual-feedback-with-automated-pull-request-commenting
---

[![Developers Gain Contextual Feedback with Automated Pull Request Commenting](https://blog.sonatype.com/hubfs/GettyImages-1198272365.png) ](https://blog.sonatype.com/developers-gain-contextual-feedback-with-automated-pull-request-commenting)

At Sonatype, we work continuously to increase awareness of open source risk, and decrease the time it takes you to make your applications safe. It is our never ending quest to shift security left. We’ve rolled out even more granular and automated policy feedback with pull request comments directly in GitHub. 

Developers need to know where potential policy violations or security vulnerabilities are introduced so that they can address and fix the issues efficiently and effectively. This reduces time to remediation and minimizes manual work. Our new PR commenting feature for GitHub notifies a developer when the code they commit introduces risk or breaks a build, and why.

 ![](https://track.hubspot.com/__ptq.gif?a=1958393&k=14&r=https%3A%2F%2Fblog.sonatype.com%2Fdevelopers-gain-contextual-feedback-with-automated-pull-request-commenting&bu=https%253A%252F%252Fblog.sonatype.com&bvt=rss)

<a href="https://blog.sonatype.com/developers-gain-contextual-feedback-with-automated-pull-request-commenting">Read more on the Sonatype blog</a>