teleren/devto huggingface dataset:
Two Sum - Challenge 4
Tags: beginners, javascript
Published: 2019-11-13 11:09:13

This forms up part of the building blocks in most algorithms challenges involving arrays manipulations. 

<b>Intro</b>
This challenge involves taking two parameters, an array, and a number. The goal of this challenge is to return a pair of sub-arrays, each pair adding up to the number given. For example, if we pass [1,6,4,5,3,3] and 7 as our arguments, we should get [[6,1], [3,4], [3,4]] as our result.

<b>Guidelines</b>
1. Result should be an array of arrays.
2. Any number in the 'numArray' can be used in multiple pairs.

There are many ways of accomplishing this:
1. It can be done in 0(n^2) time complexity. This involves nested loops.
2. It can also be done in 0(n) time complexity as we know more performing. This utilizes a hash table. We are going to utilize this.

<b>Let's Dive right in</b>

<li>As usual we will define a function ``twoSum`` that takes in two parameters ``numArray`` and ``sum``.</li>

```javascript
function twoSum(numArray, sum){

}
```

<li>Next, we will define a variable, ``pairs`` which will store our result of nested pairs of numbers from the ``numArray`` that adds up to our sum</li>

```javascript
function twoSum(numArray, sum){
   let pais = [];
  
}
```

<li>Next, we want to loop through our ``numArray`` and gain access to every number.</li>

```javascript
function twoSum(numArray, sum){
   let pais = [];
   
   for(let i = 0; i < numArray.length; i++){

   }
}
```

<li>We, will define the current number that we are on by:</li>

```javascript
function twoSum(numArray, sum){
   let pais = [];
   
   for(let i = 0; i < numArray.length; i++){
      let currNum = numArray[i]
   }
}
```

Now, this is where the main functionality of our function takes place. We want to use a hash table and push every number that we iterate through into that hash table. In this algorithm, we will use an array as a hash table, but you can use an object. They both achieve the same functionality. 

So on every iteration, we want to check this hash table to see if the current's number counterpart is present in that table. For example, if our current number is 4, the number we are looking, to sum up to is 7. The counterpart of 4 would be 3 because 4 + 3 = 7. So we want to check our has table to check if our counterpart (3) already exists in the hash table. If the counterpart doesn't exist in the hash table, we already know that we have already iterated through that number in our array, we can, therefore, take these two numbers as a pair and push them into our pairs array. Basically that's all we have to do. So let's proceed and write:

```javascript
function twoSum(numArray, sum){
   let pairs = [];
   let hashtable = [];

   for(let i = 0; i < numArray.length; i++){
      let currNum = numArray[i]
      let counterPart = sum - currNum
      if(hashTable.indexOf(counterPart) !== -1){
         pairs.push([ currNum, counterpart])
      }
      hashTable.push(currNum)
   }
   return pairs
}
```

And, that's it!

See you in the next one!

Happy Hacking!
About trunk-based development; Mixpanel's move from Erlang to Python; & Kubernetes
Tags: todayilearned, kubernetes, python, erlang
Published: 2019-11-13 11:00:13

*TL;DR style notes from articles I read today.*

### [Why I love trunk-based development (or pushing straight to master)](http://bit.ly/36YLoIV)

- Earlier and better feedback, while the code is being written, from your pair partner.
- Collective code ownership by the team and strong team style, since it is no one’s sole responsibility or brainchild.
- You can have actual continuous integration with small changes locally tested and then pushed out, without problem ignored till later.
- Fewer issues with merge conflicts since your whole team is up to date on small changes every time.
- High visibility of team members’ work so you can easily (and early) spot where a teammate needs help.
- You can preserve the whole commit history, which is an advantage for future developers working on the same codebase. 

*[Full post here](http://bit.ly/36YLoIV), 15 mins read* 

---

### [How and why we switched from Erlang to Python](http://bit.ly/2pfIO0f)

- Mixpanel had coded one of their servers using Erlang because of performance requirements. 
- After 2 years, it became hard for them to debug downtime & performance issues because they didn't have any Erlang experts on their team.
- They switched to their de-facto language, Python. Having more code clarity & maintainability were the two main reasons for this move.
- For the framework and networking library to scale, Mixpanel used eventlet’s raw WSGI library (instead of Python’s asynchronous I/O) since its”green threads” resemble Erlang’s “actors”.
- For the JSON library they used simplejson coded in C, for roughly a ten times better performance.
- Using the right Python libraries avoided adding more servers horizontally. 

*[Full post here](http://bit.ly/2pfIO0f), 5 mins read* 

---

### [Will Kubernetes fall into the “shiny things” trap?](http://bit.ly/2XbBHCu)

- New & shiny can also mean immature. 
- Developers must be cautious about excessive reliance on new technologies. 
- Do not ask simply how to leverage Kubernetes at scale, ask how to use a single abstraction to cover Kubernetes, on-premises visualization and the entire IT landscape.
- To be cloud-native, you may need to rewrite your existing tech as containerized microservices.
- Build your version for full compatibility with other vendors instead of complete portability and abstraction across environments. 

*[Full post here](http://bit.ly/2XbBHCu), 6 mins read* 

---

*[Get these notes directly to your inbox every weekday by signing up for my newsletter, in.snippets(), here.](https://mailchi.mp/appsmith/insnippets?utm_source=devto&utm_medium=post08&utm_campaign=is)*
Best way to build a CSS documentation like Bootstrap
Tags: css, documentation, saas
Published: 2019-11-13 10:44:11

My company has built its own CSS library and is looking to build a documentation looking like Bootstrap doc.

I have found documentcss, built on documentjs, which seems easy to use. The problem is that you have to build yourself the demos (for example a div containing different buttons to show how to use the different classes).

KSS seems more complete but not a lot of doc about how to use it.

What I'm looking for is a tool that automatically creates a full doc, making the link between HTML and CSS, so I don't have to think about updating the doc when the code is modified, for example to add a new HTML button to show a new class. It's important since a lot of people are working with this code.

Is such a tool exists? Does KSS or another one allows to do it? Thanks
Understand and use useState Hooks in React
Tags: javascriptreact
Published: 2019-11-13 10:38:05

---
title: Understand and use useState Hooks in React
published: true
description: 
tags: Javascript React
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/j78eoaf09s9vk5477c65.jpg)

In this article we are going to talk about `useState` hooks in React and how to use it.

![react](./react.jpg)

## useState Hooks ? What is it ? 😳

`useState` is a React hooks that allow us to use and to modify the state in our function component(before called stateless component) without to write a class component and `setState` method.
In the previous version of React before the `react@16.8`, the using of state and update the state in our component was like this :

```jsx
import React from 'react'

class App extends React.Component() {
  constructor(props) {
    super(props)
    this.state = {
      name:"Emmanuel",
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(e){
    this.setState({name:e.target.value})
  }

  render(){
      return(
           <div>
            <p>{this.state.name}</p>
            <input value={this.state.name} type="text" name="name" handleChange={this.handleChange}/>
        </div>
      )
  }
}
```

Since the hooks are been introduced in React, the way to use the state and to modify the state are become easy. We are going to modify the previous code and to write a functional component with useState hooks.

```jsx
import React, { useState } from 'react';

function App(props){
  const [name, setName] = useState('Emmanuel')

  function handleChange(e){
    setName(e.target.value)
  }

  return(
    <div>
      <p>{name}</p>
        <input value={name} type="text" name="name" onChange={handleChange}/>
    </div>
    )
}
```

Like we see in the fist line of our code, we have imported the `useState` hooks. the `setName` function passed to onClick event allow to update our `name` state.

## How `useState` hooks works

```jsx
const [state, setState] = useState(initialState);
```

It returns a stateful value, and a function to update it.During the initial render, the returned state is the same as the value passed as the first argument (initialState). The setState function is used to update the state. It accepts a new state value and enqueues a re-render of the component. During subsequent re-renders, the first value returned by useState will always be the most recent state after applying updates. React guarantees that setState function identity is stable and won’t change on re-renders.

The state value can be a object, array, number, string, boolean, etc...

### Note ❗

If you want to use the `useState` hooks in your code and if you have already write your code with the `Class` method, please don't delete your code, you can update the version of your React application (`react` and `react-dom`) to the new version supported the hooks and continue to build your application using the `useState` in the new component created.
useGeoPosition Hook - A Custom React Hook to grab latitude and longitude from a given address.
Tags: customhooks, reacthooks, react, geocodingapi
Published: 2019-11-13 10:33:58

You might have encountered this requirement commonly where you want to display a google map on a listing details page and show a marker on it based on the address of the listing or a location. Here we want to pass the address of a listing or a location and you want the latitude and longitude as a return. Using Google's Geocoding API, we can extract this logic as a custom hook called **useGeoPosition.**

**useGeoPosition hook-** 

This hook accepts two parameters - 

1. key - that's your Google Geocoding API key 
2. address- that's the address of your location where you want its latitude and longitude in return

```javascript
import React, { useState, useEffect} from 'react'
    import axios from 'axios';
    
    const useGeoPosition = (key, address) => {
      const [position, setPosition] = useState({ lat: null, lng: null });
      const [error, setError] = useState(false);
      const [loading, setLoading] = useState(false);
    
      const fetchLatandLng = async () => {
        try {
    	      setLoading(true);
    	      const res = await axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${key}`);
    	      const result = res.data.results[0].geometry.location;
    
    	      if (result.lat !== null && result.lng !== null) {
    	        setPosition({lat: result.lat, lng: result.lng})
    	      }
    	      else {
    	        setError(true);
    	      }
    	      setLoading(false);
    	  }
        catch (error) {
           setLoading(false);
           setError(true);
        }
      }
    
    
      useEffect(() => {
        fetchLatandLng();
      }, [address])
    
      return [position, loading, error]
    }
    
    export default useGeoPosition;
```
You can now call this hook in your React component as 
```javascript
 const [position, geoloading, geoerror] = useGeoPosition(<PassYourGoogleKey>,'Boyd St,Long Beach');
```
How to merge object in javascript
Tags: javascript
Published: 2019-11-13 10:33:41

---
title: How to merge object in javascript
published: true
description: How to merge more object in a single object in javascript
tags: javascript
---

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mhb5xlhpfk6iq7y7lgiv.png)

suppose that we have an user object with different values that we will want to merge or updated in the single object:

```js
const user = {
    name: 'John Doe',
    city:'Abidjan',
    job:'web developper'
}

const same_user = {
    name: 'John Doe',
    city:'Abidjan',
    age:24,
    color:'black',
    hobbies:'football'
}
```

Now, the first question that we ask ourselves is: **How to do that ?**

We're going to use the spread operator method to do that. The syntax is three dots (`...`)

```js
const users = {...user, ...same_user}
```

The spread operator is a new way to spread iterable element or often expand an iterable like array, object.

Now we are going to see the new `users` object in our NodeJS REPL:

```js
console.log(users)
{ name: 'John Doe', city:'Abidjan', job:'web developper', age:24, color:'black', hobbies:'football' }
```

Note that this operator was introduced in ES6.
Unreal Engine Error: DoesPackageExist
Tags: unreal, engine, game, development
Published: 2019-11-13 10:24:13

The past  2 days I've been dealing an Unreal Engine Error.  More specifically "DoesPackageExist: DoesPackageExist:FAILED:"None: is not a standard unreal filename or a long path name"

I was unable to package my project as an .exe because the error wouldn't allow me to since it wasn't compiling properly.

After reading the error message a couple of times over and searching on forums  I resorted to solving the problem by:

    Deleting as assets folder that I had imported into the project through Epic Games

   <b>BLOOPERS</b>

    The project had some characters that were placed in it from this particular folder. So I tried deleting the project folder.
    The project still had references to the characters, so I deleted the references in the game world (on the right side of the screen)
    On restarting UE4, the asset folder was still there!
     On inspecting the map in my own levels folder and the map in the FPS map (provided by UE), I found an un-deleted reference to it. So deleted it from there as well!

<b>FIXES</b>

    Delete the assets from the Epic Games library
    Delete all instances of the assets from your map
    Delete the assets folder


Finally I have an .exe!
Little details are important
Tags: ruby, strings, frustration
Published: 2019-11-13 10:22:29

---
title: Little details are important
published: true
description: How a missing comma cost me 15 minutes.
tags: Ruby,strings,frustration
---

Today I learned a detail about the way Ruby handles strings that made me waste 15 minutes.

```ruby
def with_tags(*tags)
  tags.map {|tag| "[#{tag}]"}.join
end
```

```ruby
with_tags('Hello' 'World')
```

Expecting the string `[Hello][World]` but obtaining `[HelloWorld]` instead.

Why?

Well, because I forgot to put a comma between the arguments (admit if you fell in this trap like me 😅) and it turns out that, in Ruby, two adjacent strings, like `'Hello' 'World'`, get merged into one.

In order to make the code work as expected I simply had to add a comma:

```ruby
with_tags('Hello', 'World')
```

So, the trade has been: 1 comma for 15 minutes.

And yes, I even searched for issues with splat arguments in Ruby 2.1 (the version of the project I'm currently on). 😳
INGMARSON’s Shopping Cart Integration in a Gatsby PWA
Tags: javascript, webdev, react, showdev
Published: 2019-11-13 11:35:08

---
title: INGMARSON’s Shopping Cart Integration in a Gatsby PWA
published: true
date: 2019-11-13 10:18:51 UTC
tags: javascript, webdev, react, showdev
canonical_url: https://snipcart.com/blog/ingmarson-case-study
---

![INGMARSON’s Shopping Cart Integration in a Gatsby PWA](https://snipcart.com/media/204733/gatsby-pwa-ecommerce.png)

When developer Tim Walpole contacted us to showcase his new Snipcart integration, we thought: “Woah, this is cool, gotta do something with this!”

Tim went down the JAMstack road and used tools we’ve been writing about to build a neat Gatsby progressive web app (PWA) for his client INGMARSON.

He was kind enough to give us his take on this modern way of building websites and how Snipcart fits into all of this.

It was a pretty exciting exchange, so let’s see what he had to say!

[Interview excerpt]

**We're big proponents of the JAMstack at Snipcart. Do you know about it & (if so) how do you feel about it (JavaScript, APIs, Markup)? Thoughts, doubts, experience?**

As a small (growing) company owner, Robert wants to be able to concentrate on what is important—delivering high quality, ethically sourced clothing designs. We don’t want to have to worry about maintaining a high-cost website, ensuring security, staying up-to-date, or meeting GDPR regulations for data storage.

When I researched how to check all these boxes, I came across posts from Snipcart (and others), showing how JAMstack could do that. With it, we could run a static website, with markdown content which was rebuilt every time the content is changed. We could use a simple CI/CD pipeline to push content through development, staging and live servers allowing us to validate both technical and content changes before they go live. It was a revelation.

  

→ Read the full post [here](https://snipcart.com/blog/ingmarson-case-study)
Latest connectivity options in dbForge Data Compare for PostgreSQL v3.2
Tags: postgres, dbforge, database, datacompare
Published: 2019-11-13 10:17:45

---
title: Latest connectivity options in dbForge Data Compare for PostgreSQL v3.2
published: true
description: We are thrilled to inform our PostgreSQL users, that a new version of our ultimate data diffs management tool, dbForge Data Compare for PostgreSQL, v.3.2, has been rolled out.
tags: PostgreSQL, dbForge, database, data compare
---
We are thrilled to inform our PostgreSQL users, that a new version of our ultimate data diffs management tool, [dbForge Data Compare for PostgreSQL, v.3.2](https://www.devart.com/dbforge/postgresql/datacompare/), has been rolled out.

The new version extends the PostgreSQL connectivity options and provides yet more convenience and flexibility to the PostgreSQL data comparison and synchronization routines.

**Connectivity Support for PostgreSQL 12.x**
dbForge Data Compare for PostgreSQL allows connecting to and working with the latest PostgreSQL 12.x.

![Data Compare for PostgreSQL](https://blog.devart.com/wp-content/uploads/2019/10/pg-12-.png)

**Tell Us What You Think**
We welcome you to [try the new version](https://www.devart.com/dbforge/postgresql/datacompare/download.html) of dbForge Data Compare for PostgreSQL and [share your thoughts](https://www.devart.com/dbforge/postgresql/datacompare/feedback.html) about the updated tool with us. This will help us to keep improving the tool in line with your needs!
Centralization is rampant. And I'm not sure how we should fix it..
Tags: watercooler, selfhosted, github, gitea
Published: 2019-11-13 10:07:56

---
title: Centralization is rampant. And I'm not sure how we should fix it..
published: true
description: #watercooler. Hmm, maybe I shouldn't talk about this at work..
tags: watercooler, self-hosted, github, gitea
---

I love self-hosted apps and the idea of making the Web decentralized again.

I make multiple apps that are coming into maturity the more I work on them (and don't worry, will all get posts :eyes:), but recently started using Gitea for a few projects for a group I volunteer for. And I love it!

Once I'm able to, I'm tempted to run and/or move many of my projects to my own instance, but I'm worried about stigma/FOMO of not being on GitHub. This is very akin to the Twitter/mastodon conversation. Everyone's on GitHub. Developers are on GitHub, companies are on GitHub, non-profit organizations are on GitHub.

I was thinking about this, and realized it's tough because even if Gitea/other git server apps made federation work in a way where you could star/follow members from any instance, GitHub won't. Or at least would be very unlikely to. Integrating with federation is something I imagine investors would think is a bad idea, particularly this late in the game. GitHub's already at the top, so why help people leave the platform?

How do you think we should go about breaking the centralized bubble? Should we?
Generating positive impact as a developer
Tags: positiveimpact, opensource, community, learn
Published: 2019-11-13 10:01:57

We are increasingly aware of the impact that we produce in our environment. Perhaps you recycle, work as a volunteer or you became vegan. But, why not take advantage of your develop skill to make a better world?

Moreover, contributing to positive impact opensource projects allows you to learn new technologies and be part of a solidary community. Everybody wins! :trophy:

If you are interested, here are some repositories where you can help:

:deciduous_tree: Sh**t! I Smoke: See your city's air pollution measured in daily cigarettes. Main language: TypeScript. https://github.com/amaurymartiny/shoot-i-smoke

:balloon: Playtime: Homeless Children's Playtime Project. Main language: Ruby. https://github.com/rubyforgood/playtime

:seedling: Treetracker: Android app for Track and verify reforestation plantings, paying planters on a per planting basis. Main language: Kotlin. https://github.com/Greenstand/treetracker-android

:dog: Animal Shelter Manager: Online solution for animal shelters, rescue groups and animal control facilities. Main language: Python. https://github.com/bobintetley/asm3

Hope you enjoy!
What have you accomplished this decade?
Tags: watercooler, discuss, career, yearinreview
Published: 2019-11-13 09:37:37

We're just over a month away from the end of this decade,* and I'm wondering what big changes everyone has made since December 2010. Did you get married? Become a millionaire with that great side project idea? Finally figure out how to center-align a `<div>`?

Here are a few of my highlights:

- went backstage at a RUSH concert 🤘
- finished my B.S. in Physics && Math 🎓
- got rejected from 11 graduate programs ⛔
- worked full-time in a falafel shop 🥙
- earned an M.S. and Ph.D. in Physics ⚛️
- got engaged! 💍
- visited 🇩🇪🇦🇹🇨🇿🇭🇺🏴󠁧󠁢󠁥󠁮󠁧󠁿🇮🇹🏴󠁧󠁢󠁷󠁬󠁳󠁿🇫🇷🇮🇪🇳🇱🇧🇪🇵🇱🇩🇰🇳🇴🇨🇭for the first time
- moved to Ireland from the U.S. ☘️
- failed my Irish driving test three times 🚗
- got my first job as a software developer 💾
- became an uncle 👶
- ...and lots more!

How about you? What's changed for you in the past ten years?

> \* using 0-based years, of course

Photo by [Chris Gilbert](https://unsplash.com/@chisathon?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/new-year?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)
Spring Zeebe 0.7.0 Released!
Tags: zeebe, spring, springboot, cloudnative
Published: 2020-01-16 18:25:05

---
title: Spring Zeebe 0.7.0 Released!
published: true
date: 2019-11-13 09:36:34 UTC
tags: zeebe,spring,spring-boot,cloud-native
canonical_url: https://salaboy.com/2019/11/13/spring-zeebe-0-7-0-released/
---

I am happy to announce that [Spring Zeebe 0.7.0](https://search.maven.org/artifact/io.zeebe.spring/spring-zeebe-starter/0.7.0/jar) has been released using Zeebe Core 0.21.1 and Spring Boot 2.2.0.RELEASE. 

If you find any issues with these projects [please report them here](https://github.com/zeebe-io/spring-zeebe/issues). 

Moving forward we want to quickly align Spring Zeebe projects with Zeebe releases in a more coordinated way and we want to refine these projects dependencies to make sure that they are aligned with the Spring Boot release train. I will be leading this process with the original author of these modules **_Jan Galinski_** from **_[Holisticon](https://holisticon.de)_** to make sure that we keep these projects community driven with a transparent governance. 

If you have questions, proposals or extensions related to Spring Zeebe please get in touch. I will be more than happy to organize the contribution process and mentor you with your first Pull Request.
How to become a good programmer(Junior Programmer)
Published: 2019-11-13 09:34:49

Dear junior dev
- don't be scared of making mistakes
- don't be scared of trying something new
- don't be afraid of airing your opinion
- don't be scared of losing
- believe in yourself
- take that risk
- no excuses
- take responsibility
- be brave
- show working
- live the dream
🔥🔥🔥🔥