teleren/devto huggingface dataset:
How to convert an array into an object in javascript
Tags: javascript, beginners, tutorial, webdev
Published: 2019-08-08 12:21:21


[image from undraw.co](https://undraw.co/)

[Originally posted on afewminutesofcode.com](https://www.afewminutesofcode.com/how-to-convert-an-array-into-an-object-in-javascript/?utm_source=devto&utm_medium=website&utm_campaign=blogpost)


To convert an array into an object we will create a function and give it 2 properties, an array and a key.

```js
const convertArrayToObject = (array, key) => {};
```

We will then reduce the array, and create a unique property for each item based on the key we have passed in.

We also need to remember to set an initial Value, and also pass in the current value (...obj in the below).

```js
const convertArrayToObject = (array, key) => {
  const initialValue = {};
  return array.reduce((obj, item) => {
    return {
      ...obj,
      [item[key]]: item,
    };
  }, initialValue);
};
```

So now if we log out our function (passing in the array and our key which is a unique identifier in this case the id property) we will see our array is now an object.

```js
console.log(
  convertArrayToObject(
    [
      { id: 111, name: 'John', age: 29 },
      { id: 112, name: 'Sarah', age: 25 },
      { id: 122, name: 'Kate', age: 22 },
      { id: 123, name: 'Tom', age: 21 },
      { id: 125, name: 'Emma', age: 24 },
    ],
    'id',
  ),
);
```

returns

```js
{
  111:{ id: 111, name: 'John', age: 29 },
  112:{ id: 112, name: 'Sarah', age: 25 },
  122:{ id: 122, name: 'Kate', age: 22 },
  123:{ id: 123, name: 'Tom', age: 21 },
  125:{ id: 125, name: 'Emma', age: 24 }
}
```

We can now easily look up data in our array by an id and use it as required.


{% instagram BziTc90D382 %}


If you are looking for some more tips or want to be notified when my next post is available follow Me Online Here:

[Instagram](https://instagram.com/afewminutesofcode)
[Facebook](https://facebook.com/afewminutesofcode)
[afewminutesofcode.com](https://afewminutesofcode.com/?utm_source=devto&utm_medium=website&utm_campaign=blogpost)
[Twitter](http://twitter.com/afewminsofcode)
[Pinterest](https://www.pinterest.com.au/afewminutesofcode)

{% youtube tslfvZQlJyA %}
What are you working on?
Tags: discuss
Published: 2019-08-08 12:18:30

---
title: What are you working on?
published: true
tags: discuss
---
## What side projects are you working on? 
I personally am I strong believer in the need of having a personal side project. It can be something industry-changing or something as little as a small set of snippets you decided to open source.

Whatever it is, if you're spending personal time working on it, it's definitely something that merits attention, so share your passion in the comments, I'd love to know about it (and I'm sure others in this great community will too!).


Remember to have a great day!
Simple edit-in-place by changing the type of an input
Tags: editinplace, javascript, forms
Published: 2019-08-08 12:05:53

---
title: Simple edit-in-place by changing the type of an input
published: true
description: Just a quick trick to show how to build an edit-in-place feature using only a single HTML input and toggling its type property
tags: edit in place, javascript, forms
---

Making something editable in place is often the best way to have people make changes. Nobody wants to have 3 steps where one is enough. Take this example on CodePen. You can click the text, edit it and when you hit enter (or the enter button on a mobile) it goes back to being just a text.

{% codepen https://codepen.io/codepo8/pen/XvEwaw %} 

The trick to make this happen is incredibly low effort. You start with a basic form:

```xml
<form>
  <input type="submit" value="edit me">
</form>
```

In order to make this editable without staying a form field, all you need to do is toggle the type of the input from "submit" to "search" when the form is submitted. Search as a type also offers the benefit of a delete button on Chromium based browsers.

```javascript
const f = document.querySelector('form');
f.addEventListener('submit', (ev) => {
  let but = f.querySelector('input');
  but.type = (but.type === 'search') ? 'submit' : 'search';
  ev.preventDefault();
});
```
Nifty, isn't it? 

Another way to do the same to any element is to toggle the contentEditable attribute as shown in the DIV of the example.

```javascript
document.querySelector('div').
  addEventListener('click', (ev) => {
  let field = ev.target;
  field.contentEditable = field.contentEditable === true ? false: true;
});
```

However, editing these needs some knowledge as you need to focus on the next item to end editing. Or you need to code your own keyboard handling.
Advanced Python: OOP polymorphism
Tags: python, tutorial
Published: 2019-08-08 12:05:35

A great deal in programming is about the so called 'Object Oriented' side of programming.

Python supports OOP  as well. This tutorial will show you how to implement polymorphism in your Object Oriented code.

Polymorphism is all about a superclass that has multiple subclasses. The subclasses inherit from the superclass and the superclass doesn't need to know which subclass is currently inheriting and executing.
Don't worry if this doesn't make sense yet, take a look at the following example for clarification:


Let's say we have a program that shows images, but the image can be either of PNG  or JPG format. In our case the program will print different things based on the format of the image.

So we'll start by making the base class that all the subclasses will inherit from. The class will also print an error when the image has a wrong extension.

![](https://thepracticaldev.s3.amazonaws.com/i/vh70wqipsmoss7174oba.PNG)

Now onto the subclasses which will inherit from the 'Image' class. The classes also have a method called 'show' which will print a custom message.
Notice how the parent/superclass doesn't need to know which subclass is inheriting in order to work.

![](https://thepracticaldev.s3.amazonaws.com/i/h86jutvfnoi8eawba7cq.PNG)

Now let's make the objects and call the 'show' methods:

![](https://thepracticaldev.s3.amazonaws.com/i/arz6qeurpiap0xun91py.PNG)

And here's the output:

![](https://thepracticaldev.s3.amazonaws.com/i/nhjmekj59h9x3seze0s3.PNG)


I hope you learned something and see you in the next post :) !
Android In-App Update
Tags: android, joylada, ookbee, google
Published: 2019-09-10 07:31:16

---
title: Android In-App Update
published: true
tags: android,joylada,ookbee,google
canonical_url: 
---

สิ่งที่รอคอยมานาน เมื่อเดือนพฤษภา 2019 Google ได้ปล่อย API ให้ Developer สามารถทำ อัพเดทแอพ ในระหว่างการใช้งาน App ที่เรา Dev กันอยู่ได้ โดยวิธีการเรียก อัพเดท จะแบ่งเป็น 2 mode

_FLEXIBLE — _ใช้ในการเรียก Update แบบให้ User ตัดสินใจได้ว่าจะ อัพเดท หรือไม่ก็ได้

_IMMEDIATE_ — ใช้ในกรณีที feature เรา impact กับการใช้งานมากๆ บังคับให้เค้า อัพเดท

เราก็เลยลองเอามาใส่ใน App ดู Smooth มาก เสียอย่างเดียวคือ Call back ยังทำมาไม่ดีเราไม่รู้ว่า ไฟล์ Apk ที่ดาวน์โหลด มาแล้วมันเรียกมาจาก Flexible หรือ Immediate และตัว UI ตอนขอ อัพเดท ดาวน์โหลด ติดตั้ง มัน ปรับค่า ไม่ได้ ส่วนในหน้าของการแจ้งเตือนการ Update นั้น

![](https://cdn-images-1.medium.com/max/1024/1*b_tUDB2Sh_xlo3HngZxMoQ.png)

มันบอกมาแค่นี้ น่าจะดึงรายละเอียดของเวอร์ชั่นนั้นๆมาให้ด้วย แต่ยังไงก็ช่างมันเถอะเราไปเพิ่ม UI ให้ ผู้ใช้ เองก็ได้ ก่อนติดตั้ง

![](https://cdn-images-1.medium.com/max/1024/1*9Qzoi6MGYwWHcMUIHe84ag.png)

ที่ดีคือโหมด _FLEXIBLE_ มันทำดาวน์โหลดให้ที่ Background และขึ้นไปแปะอยู่บน notification bar ให้เรียบร้อย User ก็เล่นๆ App ไปพอ Callback กลับมาเราค่อยแจ้งเตือน User ให้กด Install Win-Win ทั้ง Dev ผู้อยากส่ง Feature ใหม่ๆให้ และ User ก็ยังเล่น App ของเราไปได้อย่างสบายใจ หน้าตาตอน install ก็สวยงามอย่างด้านล่างนี้

![](https://cdn-images-1.medium.com/max/1024/1*vmL2v-pxzfPEjnuLJqWNLg.png)

สรุป Feature น่าสนใจดีแต่เหมือนยังทำอะไรมากไม่ได้ เต็มที่ก็ชวนผู้ใช้ไปโหลดแอพแต่แค่นี้ก็เติมเต็มกับสิ่งที่เราต้องการแล้วหละ

Reference Link   
[https://developer.android.com/guide/app-bundle/in-app-updates](https://developer.android.com/guide/app-bundle/in-app-updates)
AnyChart 8.7.0 Is Out — Client-Side Export, Stock UI Controls, Gantt Improvements & More New JS Charting Features
Tags: webdev, dataviz, javascript, showdev
Published: 2019-08-08 10:30:42

---
title: AnyChart 8.7.0 Is Out — Client-Side Export, Stock UI Controls, Gantt Improvements & More New JS Charting Features
published: true
description: AnyChart, one of the global leaders in interactive data visualization, added client-side export, Gantt chart improvements, new stock chart UI controls, technical indicators, and more — in version 8.7.0 of the JavaScript charting library. Read about the new data visualization development features and check out AnyChart JS Charts 8.7.0.
tags: #webdev, #dataviz, #javascript, #showdev
canonical_url: https://www.anychart.com/blog/2019/08/08/javascript-graph-visualization-libraries-new-features-anychart/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/9nobdbn5ae4m7pberobt.png
---
[AnyChart 8.7.0](https://www.anychart.com/blog/2019/08/08/javascript-graph-visualization-libraries-new-features-anychart/) is out with new cool JavaScript charting features.

Here're the quick highlights of what was added to AnyChart JS Charts in this major update:

* Client-side export
* Polygonal selection in maps
* New UI controls, technical indicators, and annotations in stock charts
* Milestone preview, custom marker, and custom year in Gantt charts

[Learn more about AnyChart 8.7.0](https://www.anychart.com/blog/2019/08/08/javascript-graph-visualization-libraries-new-features-anychart/) on the AnyChart blog.
What Is the Best Place for Object Storage in 2019?
Tags: discuss, vue, javascript
Published: 2019-08-08 10:12:18

Let's say I have a website made with _Vue.js_ as a single-page app. I need to include a component that fetches a set of images uploaded by the client from a suitable object storage service and displays them in eg. grid form. Later on, this might extend to hosting other types of media as well.

Here are some requirements:

- Client should be able to use an easy UI for dragging images to folder.
- Client should be able to add basic metadata to objects like title, description, and the date taken.
- Client should be able to delete images or mark them as private.
- This folder should be exposed via an API for querying image data (REST or GraphQL are okay).
- The service shouldn't be too costly.

**What is the best service for solving a problem like this? Do tell!**
Now the future of static sites?
Tags: react, javascript, progressivewebapp
Published: 2019-08-08 09:47:19

# NextJS and Now Time!

Now deployment is on the rise with more and more developers using it. I used it for my brand new Portfolio Page. Its in the works but looks neat for now, its deployed with Now: 
https://my-landing-page-project.now.sh 
{% github nodeicode/landingPage %}
Check it Out! and Lemme know any design ideas I can add, in the comments.

When thinking about NextJS and now you need to remember some keywords:
> **Static Site**, **Serverless**, **Code Splitting**.

These are the Super Powers you will get. Building these using Webpack or other frameworks can eat up a whole lot of your time.

Static sites are a lot faster than dynamic sites but harder to change. NextJS will only **build** your site statically while the rest can be dynamic if you want. Its pretty amazing in terms of speed.

You know when a website takes a while to load and you see a big white screen for a while. Agh :( its horrible.

![Alt Text](https://media.giphy.com/media/YPcHIrjwX5RD8rsDlx/giphy.gif) 

>Why get ***Slow*** when you can be ***Fast***       *- Me 2019*

![](https://thepracticaldev.s3.amazonaws.com/i/ngvdi519n8mpzrcxzicb.jpg)

Weekly Posts on any tidbits, techniques or Framework I am interested in!

Lemme know in the comments anything you guys want me to try/check out!
N00bs Takeover: Building JAMstack Sites with No Coding Skills
Tags: javascript, webdev, showdev
Published: 2019-08-09 14:13:26

---
title: N00bs Takeover: Building JAMstack Sites with No Coding Skills
published: true
tags: javascript, webdev, beginners, showdev
canonical_url: https://snipcart.com/blog/jamstack-templates-example
---

![JAMstack Templates: How to Launch Fast, CMS-Powered Static Sites](https://snipcart.com/media/203639/jamstacksm-2x.png)

A month ago, looking at my calendar, I realized that 75% of Snipcart developers would be off on vacation on the same week in August. 

*Yikes*

After freaking out over our poor management skills, I decided this would be the perfect opportunity for us marketing n00bs to take over the technical blog. 

**So I challenged our marketers to create JAMstack sites and explain how they managed in a post.**

This experiment also serves to prove the point that the JAMstack is becoming more accessible and is now a fun playing field for beginners & experts alike.

*As for the real experts, they also wrote a ton of advanced JAMstack-related content on this blog. It’s all [here](https://snipcart.com/blog/categories/jamstack).*

Here are the projects we’ve come up with:

- Franck’s personal blog (VuePress + Forestry)
- Nathan’s e-commerce site for digital products (Jekyll + DatoCMS)
- Math’s static blog imported from Medium (Gatsby + Netlify CMS)

Harder than we expected? Sure. Happy with the results? Absolutely. 

Let’s dive into each of our individual use cases.

  

→ Read the full post [here](https://snipcart.com/blog/jamstack-templates-example)
Permission Camera Roll Error React Native 
Tags: beginners, newbie, help, reactnative
Published: 2019-08-08 09:33:53

---
title: Permission Camera Roll Error React Native 
published: true
description: 
tags: #beginner #newbie #help #react-native
---
Am trying to access camera roll on my react native app and it not giving back feedback


This my code 

```onImageUpload = async () => {
     const {status: cameraRollPerm} = await PermissionsAndroid.askAsync(
      PermissionsAndroid.PERMISSIONS.CAMERA_ROLL,
     try{
       if (cameraRollPerm === 'granted') {
         let pickerResult = await ImagePicker.lauchImageAsync({
           allowsEditing: true,
           aspect:[4,3]
         });
         console.log(
           'ready to upload... pickerResult json:'+ JSON.stringify(pickerResult)
         );```

I tried

```await PermissionsAndroid.request(
      PermissionsAndroid.PERMISSIONS.CAMERA,```
Navigating JavaScript 🤷‍♂️⁉️
Tags: javascript, learning, web
Published: 2020-04-16 19:47:18

---
title: Navigating JavaScript  🤷‍♂️⁉️
published: true
date: 2019-08-08 09:31:00 UTC
tags: javascript, learning, web
canonical_url: http://2kabhishek.blogspot.com/2019/08/navigating-javascript.html
---

[![](https://lh3.googleusercontent.com/-Qe3cQO884-c/XZSFhGE62rI/AAAAAAAALV0/xCfizuskH5ED8EsdCnI4Cusqw7GNRAZdACLcBGAsYHQ/s640/1570014591079945-0.png)](https://lh3.googleusercontent.com/-Qe3cQO884-c/XZSFhGE62rI/AAAAAAAALV0/xCfizuskH5ED8EsdCnI4Cusqw7GNRAZdACLcBGAsYHQ/s1600/1570014591079945-0.png)
  

JavaScript is taking the world by storm, once used to add functionality to the web, now it is being used in almost all types of software development. 

For example, Using JavaScript you can do things like build Progressive Web Apps (web apps with native app like features) , create desktop apps using electron, make Android & iOS apps with React Native, do server stuff using Node and Express and **many** more.   
  

If that wasn't overwhelming and confusing enough,  there exists more flavours of JavaScript out there than you can count 😵 & what is JavaScript and what's not is a post for another time.  
  

**So how do you get started with this interesting piece of technology?**

1️⃣ The first thing you should do is learn **Vanilla JS**. Strong fundamentals go a long way. I will suggest [JavaScript30](https://javascript30.com/) a free course by Wes Bos, that focuses on Vanilla JS.

2️⃣ Next get familiar with **JSON** , which stands for Javascript Object Notation. It is mostly used for data storage and for passing data from one place to another e.g - a REST API call.

3️⃣ Next you should learn **Typescript** which is a strongly typed superset of Javascript. It tries to bring a little harmony to the chaotic world of Javascript.

4️⃣ Next you should get yourself acquainted with the node package manager or **npm** for short. It's a command line package manager for that helps you install various libraries and frameworks.  
  

After learning all this you may now focus on what you want to make, look at the available tools, maybe a try a few of those and finally pick your tool for the trade. 😌  
  

Hopefully, I was able to clear a few doubts with this post? 🤔  
SCREAM! in the comments section (Yes, use all caps 🤣)  if you have any questions.
Starting backend developement, what to learn?
Tags: php, javascript, backend, web
Published: 2019-08-08 09:26:39

---
title: Starting backend developement, what to learn?
published: true
description: 
tags: php, js, backend, web
---

Hi, 

I started learning PHP a while ago and coded some smaller web applications.
But I recently noticed that I probably need to lean some JS in order to improve the overall workflow of e.g. writing data to the DB, displaying it, filtering...

But I'm not sure how to start, learning the basics of JS and then some sort of framework, e.g. vue? But do I even need a framework?

And how would the overall structure of the app look like?
Writing a API in PHP and doing the rest in JS and sending the data to the API?



Thanks!
An interesting quirk about Github labels
Tags: github, node
Published: 2019-08-08 09:01:08

Earlier this Sunday I was trying to create labels for my Github Issue Tracker and I observed something. See if you can spot it below:

![github-labels](https://i.imgur.com/YnMw03O.gif)

Notice how the label text changes color? And not just the label's background? Even more quirky is that the label color is either white or black and it's always a contrast to the label's background. If the background color is dark, the label text is colored white and black otherwise.

Cool! And weird too! How does Github know if the color that I set needs a black or white label text?

Curious, I first tried to determine if this happens in the front end itself or if it happens at the backend. A quick check of the Network tab tells me that it's actually happening on the backend - when we try to assign a color, the color is passed to the backend that responds with the `span` tag that needs to be showed, with an inline style that sets the label text to either black or white. I could not reverse engineer this further and hit a dead end.

I then googled how to determine if a color is dark or light in Node.js (to correspondingly add a black or white color to the label's text) and came across the [color](https://www.npmjs.com/package/color) module. This has the two following functions that determine if the color passed to is dark or light:

```javascript
color.isLight();
color.isDark();
```

_Cooool!_ Going through the source code of this module to figure out what they do in these methods led me to this [blog](https://24ways.org/2010/calculating-color-contrast) that goes into detail about how this works. I'd hate to give a TL;DR version and if it's any solace, that link isn't that long to read.

I'd imagine Github is using one of the two methods in that blog (or perhaps the `color` module itself) and returning the final element to display. Small but _coool_ feature to provide.
C# - Reverse Engineer Serial Communication
Tags: serialportmonitor, monitoring, analyzer, virtualport
Published: 2019-08-08 08:39:31

---
title: C# - Reverse Engineer Serial Communication
published: true
description: 
tags: serial port monitor, monitoring, analyzer, virtual port
---

Problem
I have a device that when a particular application is on send data to that application. I need to cheat this data and retrieve certain information that is not displayed. The device is custom and for some reason has no data sheets. So have to sniff the communication and rebuild the commands sent from the application to this device. So I would like to achieve this in C# or C++. Right now I've tried every sniffing software and yes they sniff it, but I want to be able to know and retrieve the data and present it live.

The easiest way to do this is to put your software between the device and the other software. Next, review all the data and capture what you need.

To do this, use serial port loopback software. There's a lot of it out there. See http://virtual-serial-port.org.
 ![VSPD](https://i.ibb.co/wWgnHVc/Eltima-Virtual-Serial-Ports-Driver-XP-1.png)
A more complicated (but more passive!) Method is to monitor IOCTLs. I can't guide you how to do things that I don't know, but that's something to look at. The software at https://www.com-port-monitoring.com/ uses this method.
 ![SPM](https://i.ibb.co/6mjWcky/3.jpg)
An alternative piece of software that gives you virtual serial ports is com0com (http://com0com.sourceforge.net/). However, it also has a hub functionality where the device output can be sent to many applications, which may or may not be useful to you, depending on whether you just need to monitor the output from the device or in both directions.

If nothing else it can give you some open source code to base your own sniffer on if you go down the device filter route. But if you go down this route, you may need to look at the driver's signature if you need it to work on 64-bit versions of Windows 10.
Dev notifications and Telegram group
Tags: discuss
Published: 2019-08-08 08:22:37

---
title: Dev notifications and Telegram group
published: true
tags: discuss
---
So I noticed something, my notifications aren't chronological. I only ever check the greyed top of my notifications because I believe those are the ones I have missed or are new.

![](https://thepracticaldev.s3.amazonaws.com/i/xyn4u888ec9lyvq4zznr.png)

My first notification says 1 minute, then the next is 7 days ago

![](https://thepracticaldev.s3.amazonaws.com/i/9gylekommc3wtpvzfrxu.png)

You can then see it switch back to 2 minutes. I scrolled to the bottom and it seems like this for most of my notifications.

Also I thought the Telegram group would share all the posts made on the main website? I regularly check the channels and this doesn't seem to be the case.
Help with the article on "How to avoid ghosting if you are a freelancer"
Tags: help, discuss, career
Published: 2019-08-08 07:58:55

Hey all! My name is Olena, and I am a marketing assistant at Codingninjas.co (a marketplace of vetted developers). We are writing an article on "How to avoid ghosting if you are a freelancer" and decided to make mini-interviews with freelancers. There are only a couple of questions, so it'd be great if someone decides to help us ;) Thanks in advance!