teleren/devto huggingface dataset:
For-each, Map, reduce, Filter, Find - Performance Check in Nodejs.
Tags: node, javascript, tutorial, webdev
Published: 2019-07-08 17:50:25

---
title: For-each, Map, reduce, Filter, Find - Performance Check in Nodejs.
published: true
description: 
tags: #node #javascript #tutorial #webdev
---
Check out this article  - https://overflowjs.com/posts/Javascript-Performance-Test-2019-Part-1-for-vs-for-each-vs-map-reduce-filter-find

And https://github.com/dg92/Performance-Analysis-JS GitHub repo for results.

The writer says that the next update to the article will be checking the performance considering Ramada.js function, large data set, considering warm cache and other factors.

Nice to watch out for GitHub repo and subscribe to overflowjs.com


Thanks
A hilarious game to illustrate why UX is important!
Tags: ux, ui, joke, design
Published: 2019-07-08 16:56:40

---
title: A hilarious game to illustrate why UX is important!
published: true
description: An amazing browser game that shows just how important UX is by doing it really bad.
cover_image: https://thepracticaldev.s3.amazonaws.com/i/abi5s3npn485ufep8v8n.png
tags: ux, ui, joke, design
---

As the title implies, this is the game developed by the cool people of [Bagaar](https://www.bagaar.be) to show how UX is super important!

You can play the game here:
https://userinyerface.com/

Disclaimer:
I'am not responsible for any thrown phones or smashed keyboards.
Svelte - Cybernetically enhanced web apps
Tags: svelte, javascript, framework, superfast
Published: 2019-07-08 16:44:08

---
title: Svelte - Cybernetically enhanced web apps
published: True
description:
tags: svelte, javascript, framework, Superfast
---

I have created a LinkedIn group for Svelte enthusiast. If interested please join to get all latest updated on this fast-growing javascript framework.

https://www.linkedin.com/groups/10473500/

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.
Javascript Object literal conditional properties
Tags: javascript, webdev
Published: 2019-07-08 16:24:22

Original post at [toncho.dev](https://toncho.dev/javascript-object-literal-conditional-properties)

---

We constantly coming up against adding conditional properties to an `Object`, but always end doing:

```javascript
const a = {};
if (someCondition) {
  a.b = 5;
}
```

To deal with this in an elegant way we are going to use the [`spread operator`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) and [`short-circuit evaluation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation), with the enhancements ES6 has brought to the `Object`.

```javascript
const a = {
  ...someCondition && { b: 1 },
}
```

In JavaScript, expressions using the `&&` and `||` operators get checked for possible [`short-circuit evaluation`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Short-circuit_evaluation), `&&` operator will only evaluate to true if both conditions are truthy. If the first one if falsey, then the second condition won’t even get evaluated. the `||` operator will only evaluate to false if both condition are falsey. If the first condition is truthy, the second won’t get evaluated. Additionally, the `&&` and `||` operators actually return the value of the last expression that gets evaluated in the statement.

Now if `someCondition` is truthy will return `{ b: 1 }` and false if `someCondition` is falsey, the returned value then gets spread into the object, so if the expression returns falsey will not be spread at all, and no new keys are added to the object.
Does any one knows the Magic behind the Query languages?
Tags: javascript, help
Published: 2019-07-08 16:12:27

Hi guys/girls,
Recently I have been assigned a task which I need to translate 2, 3 rules of mapping logic from Speaking language into JavaScript expression and conditions.
The way I managed to make it works is defining a bunch of possible answers then write many `ifs` statements. But this seem to be quite hard for both the clients who want to change the mapping logic later on and me who need to maintain and explain to other members of the team.

|answer1| answer2| result |
|-------|--------|--------|
|Yes    | No     | 1      |
|No     | Yes    | 2      |


mapping json
```json
[{
  "answer1": "Yes",
  "answer2": "No",
  "result": 1
}, {
  "answer1": "No",
  "answer2": "Yes",
  "result": 2
}]
```

```javascript
// FE will send to BE an array of answers and BE needs to return the result

// This is terrible for scaling or dynamic mapping logic 
if(answer1 === 'Yes' && answer2 === 'No') {
  return 1;
} else if(answer1 === 'No' && answer2 === 'Yes') {
  return 2
}
```


This really get me thinking about the magic behind of the SQL/non-SQL query languages, I really admire them.

What if the `result` is not just a number, may be it is another rule? How can we define a rule in json format (e.g: if the result is 1, I want to get all the odd numbers that is greater than 10) then read and execute it in JavaScript?

I wonder if anyone in the community can give me a hint/a solution for this?

Thank you so much.
Writing a browser-based markdown editor with Elm
Tags: elm
Published: 2019-07-08 16:11:50

---
title: Writing a browser-based markdown editor with Elm
published: true
description: 
tags: elm
---
I'm writing a browser-based markdown editor.

- https://github.com/gaaamii/nekobito

You can try at [here](https://nekobito.github.io).

It just save text into localStorage. But I hope to connect to BaaS eventually.
Is the idea of an tech "generalist" dead?
Tags: career
Published: 2019-07-08 15:39:46

I'm a 20+ year veteran of the tech industry.  18 of those years have been at a large fortune 500 company.  I've always considered myself a generalist rather than a specialist because I've always had many irons in the fire.

For example, at one point, I was doing the following (amongst other things):

- Managing middleware and servers for a legacy application
- Coding updates for the legacy application
- Managing 3 teams of developers 
- Designing and coding the legacy application's replacement
- Designing and implementing an Azure infrastructure
- Designing and implementing an AWS infrastructure for another project

Looking at new roles, it seems like everything is very specialized, and I'm not seeing these types of generalist roles that I had in the past. I'm guessing this is a result of an agile/devops mindset that hadn't quite made it into my teams.

Curious to hear from other folks what they're seeing, and if there's any life in a generalist career.
Animated navbar, Bold fader, Slat footer | Module Monday 46
Tags: showdev, opensource, webdev, javascript
Published: 2019-07-08 15:28:18

---
title: Animated navbar, Bold fader, Slat footer | Module Monday 46
published: true
description: Module Monday 46
tags: showdev, opensource, webdev, javascript
cover_image: https://res.cloudinary.com/component/image/upload/b_rgb:ffffff,c_lpad,h_350,w_800/v1562457094/nav_sajuwb.gif
canonical_url: https://guide.anymod.com/module-monday/46.html
---

## Everything below is open source 
It's free to use on any website, web app, or anywhere else. There are hundreds more like these built & shared by developers on [Anymod](https://anymod.com).

Click a mod to see it along with its source code.

## Animated navbar
Clean navigation with transitions built in.
<a class="btn btn-sm" href="https://anymod.com/mod/animated-menu-indicator-nkolmo">View mod</a>
<a href="https://anymod.com/mod/animated-menu-indicator-nkolmo">
  <img src="https://res.cloudinary.com/component/image/upload/v1562457094/nav_sajuwb.gif"/>
</a>

## Bold fade section
Call to action with fade in and up.
<a class="btn btn-sm" href="https://anymod.com/mod/animated-fade-in-hero-unit-kdnmbr?preview=true">View mod</a>
<a href="https://anymod.com/mod/animated-fade-in-hero-unit-kdnmbr?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562457094/fade-hero_qjqyzf.gif"/>
</a>

## Image cards
Responsive image cards from the ExMachina collection.
<a class="btn btn-sm" href="https://anymod.com/mod/image-cards-section-mlaakb">View mod</a>
<a href="https://anymod.com/mod/image-cards-section-mlaakb">
  <img src="https://res.cloudinary.com/component/image/upload/v1562457094/image-cards_u7cymp.png"/>
</a>

## Dark slats content
Column content that pops with a patterned dark background.
<a class="btn btn-sm" href="https://anymod.com/mod/exmachina-footer-links-kdnmln?preview=true">View mod</a>
<a href="https://anymod.com/mod/exmachina-footer-links-kdnmln?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562457094/footer_gm4fkg.png"/>
</a>

## Simple hero image
A quick way to add an editable, responsive image section.
<a class="btn btn-sm" href="https://anymod.com/mod/exmachina-hero-llknrn?preview=true">View mod</a>
<a href="https://anymod.com/mod/exmachina-hero-llknrn?preview=true">
  <img src="https://res.cloudinary.com/component/image/upload/v1562457094/hero-image_mbdqhg.png"/>
</a>


<hr>

I post new mods from the community [here](https://dev.to/tyrw) every (Module) Monday -- I hope you find them useful!

Happy coding ✌️
Parameter Binding in PHP – Examples and Discussion
Tags: webdev, php, sql, security
Published: 2019-11-07 03:05:54

---
title: Parameter Binding in PHP – Examples and Discussion
published: true
date: 2019-07-08 15:27:51 UTC
tags: webdev, php, sql, security
cover_image: https://i0.wp.com/geekyminds.co.in/wp-content/uploads/2019/07/parameter_binding_examples.jpg
canonical_url: https://geekyminds.co.in/parameter-binding-in-php-examples-and-discussion/
---

🎯 In this article, we are going to look into four basic examples of Parameter Binding in PHP using both MySQLi and PDO! I have accumulated these from my own projects and various corners of the web. They will help you get started with Parameter Binding in PHP if you happen to find to it tricky to use, just like I did.

💡 If Parameter Binding does not tell you anything, you may want to check out my previous article where I [explained](https://dev.to/mukherjee96/understanding-sql-injection-and-prevention-using-parameter-binding-in-php-27n5) how Parameter Binding can be used for deterring most SQL Injection attacks in PHP.

Just like the previous article, I am going to show you how to use both MySQLi and PDO step by step. This way, people who are comfortable with MySQLi will be able to learn PDO easily and vice versa.

### Here's what I'll cover:
* Creating the MySQLi and PDO Objects
* Example 1: Single Parameter Binding
* Example 2: Mulitple Parameter Binding
* Example 3: Reusing Query with Parameter Binding
* Example 4: Implementing Basic Search With SQL LIKE


[Continue reading "Parameter Binding in PHP – Examples and Discussion"](https://geekyminds.co.in/parameter-binding-in-php-examples-and-discussion/)

The post [Parameter Binding in PHP – Examples and Discussion](https://geekyminds.co.in/parameter-binding-in-php-examples-and-discussion/) appeared first on [GeekyMinds](https://geekyminds.co.in).
Create module in React
Tags: react, reactmodule, reactarchitecture
Published: 2019-07-08 15:27:49

---
title: Create module in React
published: true
description: react architecture series
tags: #react, #react-module, #react-architecture
---

There is no module been defined in React and its known that React give full control on the code structure to the developers.

## module
module can be use to make the code structure better. In React, I like to create a module as a Provider. This is because provider is the one who supply the props, callbacks and data to its consumers (children).

### module as provider
~~~jsx
const ModuleAContext = createContext({})
const initialState = { stateA: '', stateB: false, stateC: {}}

function ModuleA (props) {
 const [providerState, dispatch] = useReducer(reducer, initialState)
 const moduleAContextValue = {...props, providerState, dispatch}

 function reducer (state, action) {
  switch (action.type) {
   case STATE_A_CHANGED: 
    return { ...state, stateA: action.stateA }
   case STATE_B_CHANGED: 
    return { ...state, stateB: action.stateB }
   case STATE_C_CHANGED: 
    return { ...state, stateB: action.stateC }
   default: 
    return initialState
  }
 }

 return (
  <ModuleAContext.Provider value={moduleAContextValue}>
   <ChildA />
   <ChildB />
   <ChildC />
  </ModuleAContext.Provider>
 )

}
~~~

As provider, moduleA is not only responsible for supplying the data and the callback but also manage events that happened in its children (dispatch).

### create module children as a consumers
~~~jsx
function ChildA () {
 const moduleAContext = useContext(ModuleAContext)

 function handleClick (a) {
  dispatch({type: STATE_A_CHANGED, stateA: a })
 }

 return (
  <div onClick={handleClick}>{moduleAContext.stateA}</div>
 )
}

function ChildB () {
 const moduleAContext = useContext(ModuleAContext)

 function handleClick (b) {
  dispatch({type: STATE_B_CHANGED, stateB: b })
 }

 return (
  <div onClick={handleClick}>{moduleAContext.stateB}</div>
 )
}

function ChildC () {
 const moduleAContext = useContext(ModuleAContext)

 function handleClick (c) {
  dispatch({type: STATE_C_CHANGED, stateC: c })
 }


 return (
  <div onClick={handleClick}>{moduleAContext.stateC}</div>
 )
}
~~~

The Consumers is a components that been used by the module. They communicate thru context of the module (ModuleAContext).

### summary
We have using Context API and use provider-consumers pattern to expose the module props, module state and callbacks to its children (consumers). Adding module in code system helps developer to design complex component as mixture of component that's live under one module.

### next series
We will talk about "Creating page in React" where page is Container that contains many modules. And we will use custom hooks for modules communication.
Ethics in Artificial intelligence, a talk recorded in video
Tags: ai, ethics, deeplearning
Published: 2019-07-08 15:15:39

---
title: Ethics in Artificial intelligence, a talk recorded in video
published: true
description: Describes a new video series published on my YouTube channel about Ethics in AI
tags: ai, ethics, deeplearning
---
![Ethics in AI](https://i.imgur.com/KrjODxZ.png)

Over the past few weeks, I was really happy to give a talk about a topic that has been preoccupying me for a long time, ever since I started reading science fiction and being confronted with the moral conflicts that advanced technology always brings to the front of the stage. 

> In order to get notified when more parts of this talk, as well as other talks that I am preparing, are published, [please subscribe](http://gslb.ch/d94b) to my YouTube channel. 

In the talk, I mention a simple example: Imagine a self driving car who has to decide if it should go left and kill one human, or go right and kill 10 of us. Now imagine that the one person on the left is a child. How is a machine supposed to make this kind of decisions? Earlier this kind of moral question was only a theoretical one (see for instance [Isaac Asimov's laws of robotic](https://en.wikipedia.org/wiki/Three_Laws_of_Robotics)). But now we need to think about these issues in a much more practical manner. We now have the data and the power to run artificial intelligence models, and we must deal with all kinds of ethical questions. 

The main issue we are dealing with these days is the bias in data. The talk explains in detail what bias is, and how it creeps into the AI models. We also talk about a few other ethical issues linked to AI, and explore some ways to improve the situation. Finally we end with a few positive examples where AI promotes inclusion and diversity, and shows that we should not abandon artificial intelligence, but that we should do our best to use it for the greater good. 

For the viewer's convenience, I split the 45 minutes talk in 7 parts which are between 3 and 7 minutes. I published parts 1 to 5 already and the rest will follow in the next few days. Hopefully this talk is useful for you! And if you like it, [please subscribe to my YouTube channel](http://gslb.ch/d94b). 

Happy viewing! 
Laurent
Hexagonal Architecture - Next Generation
Published: 2019-07-08 14:58:43

Recently, I've written extensively about [implementing a hexagonal architecture](https://dev.to/bertilmuth/implementing-a-hexagonal-architecture-1kgf).

One issue that came up as feedback was that the app uses shared mutable state.  It sets up a session bean, so that the [driver adapter](https://github.com/bertilmuth/poem-springboot/blob/master/src/main/java/poem/springboot/driver_adapter/SpringMvcDriver.java) can contact the [driven adapter](https://github.com/bertilmuth/poem-springboot/blob/master/src/main/java/poem/springboot/driven_adapter/SpringMvcPublisher.java) to add the result data to Spring's MVC model. Shared mutable state and blocking operations can be an impediment in a production setting.

I just wanted to inform you that I created a new version of both the sample hexagon core, and the Spring Boot adapter. The application:
* let's you configure if you want to return the poem data to the driver adapter (e.g. the Spring Controller), or pass it on to a driven adapter (e.g. the [ConsoleWriter](https://github.com/bertilmuth/poem-hexagon-nextgen/blob/master/src/main/java/poem/simple/driven_adapter/ConsoleWriter.java))
* accesses the hexagon [in an asynchronous way](https://github.com/bertilmuth/poem-hexagon-nextgen/blob/master/src/main/java/poem/boundary/Boundary.java), but allows you to wait for the result
* avoids shared mutable state

You find the hexagon core in this project:
https://github.com/bertilmuth/poem-hexagon-nextgen

You find the Spring Boot adapter in this project:
https://github.com/bertilmuth/poem-springboot-nextgen

I know that is just a short summary. If you have any questions or need for further information, just let me know.

# Acknowledgements
Kudos to [Willi Schönborn](https://twitter.com/whiskeysierra84) and [JuanMGP](https://twitter.com/JuanMGarridoPaz) for their patience and ideas.
Sitting Less
Tags: health, discuss
Published: 2019-07-08 14:48:16

---
title: Sitting Less
published: true
description: 
tags: health, discuss
---
For reasons that shall remain unstated, I've had to sit much less lately.

For the last few days, I've stood while at my keyboard.  Each day I'm more comfortable with that.

I learned on the first day:
- Shoes are good.
- Compression socks are good.
- Moving around is good.

I work at home.  For now, I'm on the high part of the kitchen counter (43 inches, 1.1 meters). I think The Woman will not tolerate that forever, so I'll be looking into getting a stand-up workstation.

So:
- Who's standing?
- Who's liking it?
- Who has a great stand-up workstation?
Using tmux Sessions, Windows, Panes and Vim Buffers Together
Tags: beginners, tmux, video, vim
Published: 2019-07-08 14:27:53

---
title: "Using tmux Sessions, Windows, Panes and Vim Buffers Together"
published: true
description: "Here's a short video going over how I switch between a dozen software projects in seconds using nothing but my terminal, tmux and Vim."
tags: beginners, tmux, video, vim
cover_image: https://nickjanetakis.com/assets/blog/cards/using-tmux-sessions-windows-panes-and-vim-buffers-together-8770400ac595f631675fe5917db2bf1741fc6851bc77fa5bb2d100e6fac2308c.jpg
canonical_url: https://nickjanetakis.com/blog/using-tmux-sessions-windows-panes-and-vim-buffers-together
---

**This article was originally posted on June 18th, 2019 at: https://nickjanetakis.com/blog/using-tmux-sessions-windows-panes-and-vim-buffers-together*

---

Now that I've been using Vim for a few months, I figured it would be a good time to share my day to day work flow on how I’m using it with tmux (something I've been using for years).

While figuring all of this out, I occasionally struggled between choosing to launch multiple terminal applications, tmux sessions, windows, split panes, Vim buffers and / or tabs. This is what I came up with in the end, and it’s been working great so far.

As a freelance developer, open source enthusiast and someone who likes hacking on my own projects, it’s no surprise that I have a lot of active projects.

This 10 minute video shows how I manage all of these projects on the command line.

### Demo Video Showing How It Works

{% youtube hbs7tuwpgZA %}

#### Timestamped Table of Contents

- 1:14 – Listing out a few tmux sessions
- 1:43 – Having 1 tmux session per project
- 2:22 – Attaching to a specific session
- 2:33 – Splitting individual files with Vim buffers
- 3:35 – Using tmux windows for separating Vim from your web server
- 3:47 – Splitting a window in half with tmux panes
- 4:01 – Using tabs in Vim to split up your buffers into groups
- 5:32 – Leveraging a second tmux window for running other processes
- 6:21 – Zooming in and out of a specific pane with tmux
- 6:53 – Recapping the workflow for developing and deploying my blog
- 8:03 – Switching between different projects / sessions is where tmux shines
- 9:43 – Persist, save and restore sessions with tmux-resurrect

#### Reference Links

- [Intro to tmux](https://nickjanetakis.com/blog/who-else-wants-to-boost-their-productivity-with-tmux)
- <https://github.com/tmux-plugins/tmux-resurrect>
- <https://github.com/nickjj/dotfiles>
- <https://github.com/mintty/wsltty>

**What's your favorite tmux / Vim workflow? Let me know below!**
CSS Positioning Tutorial: Absolute, Relative and Fixed
Tags: beginners, frontend, css
Published: 2019-07-08 13:45:26

---
title: CSS Positioning Tutorial: Absolute, Relative and Fixed
published: true
description: In this video, we'll walk through how to using different css positioning properties and the use-case for each
tags: #beginners #front-end #css
cover_image: https://thepracticaldev.s3.amazonaws.com/i/92bfid65xwig7755sn2n.jpg
---

I made a tutorial walking through some different positioning properties in CSS and how they work. I talk about when they can be useful as well.

{% youtube mmSOc5TunTo %}

Feedback welcome! Subscriptions very much appreciated 🤗
`createSchemaCustomization` duplicates type instead of a merge.
Published: 2019-07-08 13:39:03

i want to complement my infered types via the `createTypes` API like so:

```.js
exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions
  const typeDefs = `
    type SiteSiteMetadataSecondaryNavItems implements Node @infer {
      childItems: [SiteSiteMetadataSecondaryNavItemsChildItems]
    }
    type SiteSiteMetadataSecondaryNavItemsChildItems @infer {
      title: String
      icon: String
      href: String
    }
  `
  createTypes(typeDefs)
}
```
it's very close to the Frontmatter snippet from the docs but i get:
```
Error: Schema must contain uniquely named types but contains multiple types named "SiteSiteMetadataSecondaryNavItems".
```
`"gatsby": "^2.13.8",`
Object entries && fromEntries
Tags: javascript, beginners
Published: 2019-07-08 13:33:36


Learn about the `Object.entries()` and `Object.fromEntries()` object method. 

---

```js
/**
 * Object.entries()
 *
 * @return method returns a two-dimensional array of a given object's.
*/

/**
 * Object.fromEntries()
 *
 * @return methods return a object given a two-dimensional array.
*/

```

Using `entries()`:

```js
const person = { firstName: "henry", lastName: "arbolaez" }
const personArray = Object.entries(person)
/**
 * @return [["firstName", "henry"], ["lastName", "arbolaez"]]
 * 
*/

for(let [key, value] of personArray) {
  console.log(`${key}: ${value}`);
}

/**
 * @return
 *   firstName: henry
 *   lastName: arbolaez
*/

```

Using `fromEntries()`:

```js
/**
 * If we ever want to turn that 2D array back into a object 
 * we could use now Object.fromEntries(2dArray)
*/

const personArray = [["firstName", "henry"], ["lastName", "arbolaez"]];
Object.fromEntries(personArray);

/**
 * @return { firstName: "henry", lastName: "arbolaez" } 
*/
```