teleren/devto huggingface dataset:
Introducing reactjs-popup 🎉 —  Modals, Tooltips, and Menus —  All in one
Tags: react, showdev, javascript, opensource
Published: 2018-01-31 22:00:13

---
title: Introducing reactjs-popup 🎉 —  Modals, Tooltips, and Menus —  All in one
published: true
description: Reactjs-popup is a simple and very small (3 kb) react popup component, with multiple use cases. This article is about giving you a simple overview of what you can do with reactjs-popup and how to use it effectively. 
tags: react,showdev,javascript,opensource
---

 > This article is about giving you a simple overview of what you can do with reactjs-popup and how to use it effectively.

Today, we are excited to announce reactjs-popup 1.0.

[Reactjs-popup](https://react-popup.netlify.com) is a simple and very small (3 kb) react popup component, with multiple use cases. 
we created reactjs-popup to create a color picker for our project [picsrush](https://picsrush.com/) a new online image editor. After a while, We decided to make it available for everyone in GitHub and npm repository.

###Why do you need to choose reactjs-popup over all other implementation?

* Built with react fragment that’s mean no additional wrapper Divs in your code or in the trigger element. 😮
* Does not inject HTML outside your app root. 📦
* Function as children pattern to take control over your popup anywhere in your code. 💪
* Modal, Tooltip, Menu: All in one 🏋️
* Full style customization 👌
* Easy to use. 🚀
* All these clocks in at around 3 kB zipped. ⚡️

Requires React >= 16.0

###How can reactjs-popup help you in your next react project?
If you need to create a simple modal, tooltip or a nested menu this component is your best choice to start with. but first, let get started with the component.

> All in one demo: Modal Tooltip and Menu

![alt text](https://thepracticaldev.s3.amazonaws.com/i/8jx1f8jev90en8a695tg.gif)

###Getting Started 
This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers.

```
npm install reactjs-popup --save
#using yarn
yarn add reactjs-popup -S
```

Now you can import the component and start using it :

```jsx
import React from "react";
import Popup from "reactjs-popup";

export default () => (
  <Popup trigger={<button> Trigger</button>} position="right center">
    <div>Popup content here !!</div>
  </Popup>
);
```
You can also use it with function as children pattern.

```jsx
import React from "react";
import Popup from "reactjs-popup";

export default () => (
  <Popup trigger={<button>Trigger</button>} position="top left">
    {close => (
      <div>
        Content here
        <a className="close" onClick={close}>
          &times;
        </a>
      </div>
    )}
  </Popup>
);
```
Documentation and Examples : [Reatjs popup home page](https://react-popup.netlify.com)


##It your turn now to try it !!!

Thanks for reading! If you think other people should read this post and use this component, tweet and share the post and start the [component repo](https://github.com/yjose/reactjs-popup).

{% github yjose/reactjs-popup %}


What do you think, any ideas 👌?
Eloquent Javascript Book [Free!]
Tags: javascript, learning, books, free
Published: 2018-01-31 21:00:09

---
title: Eloquent Javascript Book [Free!]
published: true
description: You're all invited to read the full draft of Eloquent JavaScript's 3rd edition
tags: #Javascript, #Learning, #Books, #Free
---

Marijn Haverbeke has made public the draft for the 3rd edition of his excellent book, Eloquent JavaScript.

Having bought and read the 2nd edition, I recommend this to both beginners looking to learn the language for the first time and to seasoned JavaScript pros.

The draft (including code snippets) is [available here](https://eloquentjavascript.net/3rd_edition/).

##Chapters:
###Part 1: Language
- Values, Types, and Operators
- Program Structure
- Functions
- Data Structures: Objects and Arrays
- Higher-order Functions
- The Secret Life of Objects
- Project: A Robot
- Bugs and Errors
- Regular Expressions
- Modules
- Asynchronous Programming
- Project: A Programming Language

###Part 2: Browser
- JavaScript and the Browser
- The Document Object Model
- Handling Events
- Project: A Platform Game
- Drawing on Canvas
- HTTP and Forms
- Project: A Pixel Art Editor

###Part 3: Node
- Node.js
- Project: Skill-Sharing Website
Is GitHub killing the competition?
Tags: discuss, github
Published: 2018-01-31 16:44:10

---
title: Is GitHub killing the competition?
published: true
tags: discuss,github
---

Gemnasium.com is [going to shutdown](https://gemnasium.com/blog/gemnasium-is-acquired-by-gitlab) on May 15th, VersioEye [already did](https://blog.versioneye.com/2017/10/19/versioneye-sunset-process) and I wouldn't be surprised if project management tools like waffle.io shutdown their business later.

From Gemnasium's post:

> GitHub had done something like this before. In 2016 they created new tools and features that competed with ZenHub and Waffle. More recently, GitHub announced static code analysis coming as a feature. They will compete directly with their partners Codacy, CodeClimate, and others. A couple of weeks ago they announced updates to their project boards that again compete directly with Waffle.

As a GitHub user what do you think? And how this may affect you?

My opinion is, no doubt, adding more good features to GitHub is what they suppose to do. But, on the other hand, I think this might discourage integration builders to make new things as they now know their work would probably be added to GitHub natively of it's that good.

I'm curious to hear your thoughts :)
5 Blog Ideas about Javascript
Tags: discuss, codenewbie, cnc2018, blogmore
Published: 2018-01-31 20:16:47

---
title: 5 Blog Ideas about Javascript
published: true
description: Here are five blog ideas that I would like to write about.
tags: #discuss #codenewbie #cnc2018 #blogmore
---
Here are my 5 blog ideas:
1. Javascript Variable Hoisting
2. Javascript Scope & Scope Chaining
3. Javascript Closures
4. Javascript Document Object Model (DOM) 
5. Javascript Event Loop

As you most likely noticed all my ideas have to do with Javascript concepts. For the past couple of months, I have been deep diving trying to understanding Javascript at a foundational level. I found that concepts like Hoisting, Scope, and Closure aren't explained very well in many articles and blog posts. So my goal is to explain these concepts in an approachable and clear manner. 

What do you think of these ideas?
Linux Bash Scripting – Signals And Jobs
Tags: beginners, bash, linux
Published: 2018-01-31 19:40:26

---
title: Linux Bash Scripting – Signals And Jobs
published: true
description: 
tags: #beginners #bash #linux
---

1 Linux Signals
2 Stop a Process
3 Pause a Process
4 Trap Signals
5 Trapping The Script Exit
6 Modifying Or Removing a Trap
7 Running Linux Bash Scripts in Background Mode
8 Running Scripts without a Hang-Up
9 Viewing Jobs
10 Restarting Stopped Jobs
11 Scheduling a Job
12 Remove Pending Jobs
13 Scheduling Scripts
14 Starting Scripts at Login
15 Starting Scripts When Opening the Shell

https://likegeeks.com/linux-bash-scripting-awesome-guide-part5/
Does anybody know a good working C++ formatting tool?
Tags: discuss, cpp, formatting
Published: 2018-01-31 18:54:50

---
title: Does anybody know a good working C++ formatting tool?
published: true
description: 
tags: discuss, cpp, formatting
---

I've tried [clang-format](https://clang.llvm.org/docs/ClangFormat.html). It doesn't do what I need, it is not very flexible and authors are refusing to create additional formatting options. But the main problem for me is that it cannot do incremental formatting. I cannot say: do just indentation and leave everything else as it is. It force to do my pet project in some corporate style, preventing even possibility of experiments with style.

I've tried [astyle](http://astyle.sourceforge.net). It doesn't support complicated things like clang-format do, but it does a lot of options, and most of all, it does support incremental formatting. The problem is it fails to produce correct results on longer files. Looks like some buffer processing problem, because about every 300th line got weird. Sometimes even with syntax errors.

I've tried [uncrustify](http://uncrustify.sourceforge.net). So far it is the best choice, but it still has some drawbacks. The configuration is really cryptic and I can't say that it is documented enough. I was able to configure it to do indentation only. And... it looks like it cannot properly indent nested classes.

Yes, I know, all of them are open source projects and can fix them or change them as I like. But first, that's not what I want to do right now, and second, I don't want to end up supporting my own private branch and spend time incorporating my changes on every version update or stick to some old and obsolete modified version.

Any other options?
Dark patterns with the HTML 5.2 <dialog> tag and Chrome for fun and profit
Tags: javascript, security, hacks, html
Published: 2018-01-31 18:30:09

---
title: Dark patterns with the HTML 5.2 <dialog> tag and Chrome for fun and profit
published: true
description: Some recent experiments with the new `<dialog>` tag
tags: javascript,security,hacks,html
---

Recently I had some fun with the new `<dialog>` HTML tag and I created a [CodePen](https://codepen.io/tanepiper/pen/MQwpeW) and [blog post](https://medium.com/@tanepiper/dark-patterns-with-the-html-5-2-dialog-tag-and-chrome-for-fun-and-profit-249ce092d200) with details of the experiments.

There are some glaring security issues around using the dialog and hopefully these can be addressed.

I'm also quite proud of this hack, and I was surprised how many things I was able to do to get the users to click the button I wanted.

Edit: As a follow up, I've started [writing a web component](https://codepen.io/tanepiper/pen/NyqBwX) that covers some of the security concerns.  Here it maintains a global state and emits an event if there is already a modal open.  I also want to try use observables to strip the rights of any dialogs on the page to show without the library controlling it.  It's still a proof of concept however.
Why Does Seamless.com Violate My Web Browsing Expectations?
Tags: webdev, ux, rant
Published: 2018-01-31 18:14:34

---
title: Why Does Seamless.com Violate My Web Browsing Expectations? 
published: true
description: When I land on a page like this, I intend to `command+click` on every restaurant that seems interesting and then I would browse each one in its own tab.
tags: webdev, ux, rant
cover_image: https://thepracticaldev.s3.amazonaws.com/i/20hzzftg811kllhifwph.png
---

Complaining about subtle interactions that stand in between me and my ability to magically have pretty much any food I desire delivered to my doorstep is pretty frivolous. But that is what I am going to do right now. It's a good learning opportunity and criticizing the user experience choices of a 6-billion-dollar food delivery conglomerate seems fair.

The typical flow of using [seamless.com](https://seamless.com) would be to land on the home page, search for the type of food I am interested in based on my location, select my restaurant and order choice and then check out.

Along the way I land on this page, the search results:

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

So far so good, but this is where things break.

I am not every user, but I think I'm pretty typical in this case. When I land on a page like this, I intend to `command+click` on every restaurant that seems interesting and then I would browse each one in its own tab. It's a good way to keep track of my possible choices and make easy comparisons. This is how I interact with most any desktop list view, and browsing restaurants like is perfectly reasonable.

But Seamless does not want me to use their site this way. The `command+click` behavior is overridden and no new tab is opened. No click style allows me to open a page in a new tab as I would expect it to. Seamless breaks my browsing experience.

The folks behind this app probably have a lot of good reasons for wanting to limit this behavior, but it does not make the interaction any less frustrating for me as a user/customer. I would love to hear more about their reasoning. Perhaps the native mobile app is so popular that desktop isn't even worth getting right for them. Whatever their reasoning, I wouldn't call my experience with their website _seamless_.

If you are building for the browser, build for the browser. Respect the expectations of the user. It's perfectly fine to augment the behaviors where appropriate, but do so with care for the user's expectations.

P.S. Never touch my default scroll behavior, but that's a tale for another day.

Happy coding ✌️
Android Development: 15 Libraries You Should Be Using
Tags: android, library, mobile
Published: 2018-01-31 17:20:57

---
title: "Android Development: 15 Libraries You Should Be Using"
published: true
description: Let's take a look at some awesome libraries that can help us create better Android apps.
tags: #android #library #mobile
canonical_url: https://auth0.com/blog/android-development-15-libraries-you-should-be-using/
---

In this article, we will take a brief look at 15 libraries that can help us in our day-to-day Android development. With them, we will be able to create apps that perform better and provide a better user experience.

[Read on 🤖](https://auth0.com/blog/android-development-15-libraries-you-should-be-using/?utm_source=dev&utm_medium=sc&utm_campaign=android_libraries)

![Android Development: 15 Libraries You Should Be Using](https://thepracticaldev.s3.amazonaws.com/i/1mehqostfxcdrl6m0s1s.png)
Introducing: Inveinta - Another Inventory Management Tool
Tags: showdev, firebase, ionic, javascript
Published: 2018-01-31 16:46:48

---
title: "Introducing: Inveinta - Another Inventory Management Tool"
published: true
description: A new web-based inventory management tool.
tags:  showdev, firebase, ionic, javascript
cover_image: https://i.imgur.com/D38esY6.png
---

A few weeks ago I was feeling unproductive, and for me the best way to quash that feeling is to hammer out a small project from start to finish. A few people were talking about needing a solution to manage large amounts of inventory + some other features like collaborative editing and checking in and out their stuff. I've wanted to make this for a while but now was the time to hammer out it. So I spun up a quick Ionic project and started to learn how to use the new Firestore tech (a vast improvement over the old Realtime Database IMO) and got to work.

My idea was to make it so you use or create "mixins" to categorize your lists of items, using sets of fields to define your list. So, if you want to have a list of MTG trading cards for sale, you'd pick "Magic the Gathering" "for sale". If you wanted to have a check in/check out system for video games, you'd pick "Video Games" "Library". Of course, you can make your own mixins as well - there's no way to cover every possible need.

You can see the end result [here](https://inveinta.netlify.com), but since that's just the app (I haven't gotten time to make a "proper" site for it), here's some examples:

* [My board game collection](https://inveinta.netlify.com/#/p/9XjlXJGeM3AuP8LlBwBp)
* [My recipe storage list](https://inveinta.netlify.com/#/p/k9iaUn0iA1rCp5wN6cKx)

As well, [here are some pics](https://imgur.com/a/TW34N) of the tool in action.

What do you think?
Reveal the nth child of a div with id ‘hello’
Tags: javascript, help
Published: 2018-01-31 15:38:46

---
title: Reveal the nth child of a div with id ‘hello’
published: true
description: 
tags: javascript, help
---
Hi all,
I am getting stuck on how to reveal the nth child of a div with id ‘hello’ by pure JavaScript. I actually tried: 
```javascript
var elements = document.getElementById(‘hello’);
var child = elements.children[n-1];
child.style.display = ‘block’;
```
However, it doesn’t seem to be right. Would be great to hear how you are likely to solve this problem! Thank you!
How feasible is Serverless technology for startups?
Tags: discuss, serverless, aws
Published: 2018-01-31 12:48:34

---
title: How feasible is Serverless technology for startups?
published: true
description: 
tags: discuss, serverless, aws
---

If you are working with a startup, you know that it is a race against time and money.
I have been evaluating a lot of [serverless technologies](https://www.simform.com/ecosystem-serverless-technologies/) for our clients who are looking to build applications with serverless components. Now that there is a new project ahead of us, we are wondering if it is a perfect fit for our requirements or not.

Since it’s a simple app but has huge potential to scale,  we are thinking to go for microservices or continue with monoliths? The application is just going to perform user authentication, registration, push notifications and standard CRUD operations, however, it might have a CRON in the background sending updates to the app. 

Here are some of the questions we are looking answers for: 
1. As per my experience, service-based architecture adds a lot of complexity and communication overhead. If we have a team of 100 engineers, we can divide the project into small pieces that can be worked upon by a manageably sized team. Since the initial project team is small, I am not sure microservice will be a good fit. However, we are looking forward to good scalability options. What is your experience?

2. Serverless seems to be a new kid on the block and the use cases are still fit into a bit of a narrow band. Also, I am particularly not sure about serverless performance and how it operates in a development environment for rapid test/prototyping. How about cold-hot startup time and concurrency? 
{% twitter 948196112040574978 %}
{% twitter 948302640223604741 %}
3. But most importantly we envision faster time to market and are looking forward to improving our MVP by circling back around and ironing out the imperfections and operational issues. How good is serverless for this?

Looking forward to the views of Dev community. Let me know what do you think about this case. Also, if there is anything I should be considering, please mention in the comment section.
Any advice on building my first JavaScript Library?
Tags: javascript, beginners
Published: 2018-01-31 12:03:34

---
title: Any advice on building my first JavaScript Library?
published: true
description: Advice on building JavaScript Library
tags: javascript, beginners  
---

Hey guys, I wrote some code for better explaining and visualizing JavaScript code execution, showing what happens at a particular line of code. It turns out to be a pretty nice tool for presentations and teaching how javascript works, so I decided to make it a library. But I don't really have a clue what to actually do to make my code a library. If I only add my code on git, does it make it a library? What licence should I use? Are there some extra things that I need to worry about? 

If there are people that have experience on the matter I would really appreciate to hear some opinions and advice :)
what would you focus on when hiring engineering vp for a team of 10?
Tags: discuss, career, leadership, culture
Published: 2018-01-31 08:02:21

---
title: what would you focus on when hiring engineering vp for a team of 10?
published: true
description: 
tags: discuss, career, leadership, culture
canonical_url: https://www.lirantal.com/blog/2018-06-31_engineering-managment
---

Let's assume you are tasked with hiring a VP Engineering for a relatively small team, say 10 engineers, which is on a growth trend as the company gets bigger.

What topics and areas would you expect to cover?

Here are my raw thoughts on the subject:

- An Engineering Culture: responsible for shipping quality products (dev owns quality), clean code/clean architecture, opposed to quick&dirty or delivering fast due to deadlines and product pressure. Automation as much as possible (i.e: no manual deployment of servers, no manual QA), designs and architecture that allows scale and growth, but not handling imaginary problems such as a premature optimization where you get lost in building for 1M while you only have 1000 users.

- Continuous Improvement: delivering features and products is nice, even if you do CI/CD, saying you do agile is nice. BUT, you also need to learn from it. Meaning, retrospectives are important, lessons learned are important. A mindset of always pushing forward to make things better and evaluating what can be improved.

- Engagement: it's easy to get distracted into the technical stuff, code reviews, technologies etc, but I believe that for developers to build great products they really need to understand the customers, pains, context, etc. therefore product and customer engagement is key.

- Empowerment and Mentoring: at the end of the day people are people and not robots or resources. They want to be recognized and appreciated, they want to be challenged, learn and explore new things. They need a fostering environment where they feel safe to take risks, consult, evaluate and a mentor that guides/supports them through the process they are making.

What do you think?
What other key items would you evaluate?
satori/go.uuid may cause build error for goa application
Tags: go, goa, gouuid
Published: 2018-01-31 07:49:42

---
title: satori/go.uuid may cause build error for goa application
published: true
description: 
tags: go, goa, go.uuid
---

Today, I released application for my working project to the production. but I got build error like this,

```
# myapp/vendor/github.com/goadesign/goa/uuid
vendor/github.com/goadesign/goa/uuid/uuid.go:18:23: not enough arguments in call to uuid.Must
	have (uuid.UUID)
	want (uuid.UUID, error)
```

Luckily, I happend to see talking about same topic on goa-slack-channel, I knew this problem is caused by [this issue(Breaking API Change)](https://github.com/satori/go.uuid/issues/66)

Ofcourse they fixed that on master branch.but they've not added release tag yet.
so you will face this problem if you write "glide.yaml" like this.

```
import:
- package: github.com/goadesign/goa
  version: ^1.3.1
- package: github.com/satori/go.uuid
  version: ^1.2.0
```

For my application, fix glide.yaml like below.

```
import:
- package: github.com/goadesign/goa
  version: ^1.3.1
- package: github.com/satori/go.uuid
  version: master
```


Thanks.
Video series: Running Go programs on Raspberry Pi. Part 1
Tags: go, raspberrypi, machinebox
Published: 2018-01-31 07:41:54

---
title: "Video series: Running Go programs on Raspberry Pi. Part 1"
published: true
description: 
tags: go, raspberry pi, machinebox
---
![gophers-with-raspberry-pi](https://thepracticaldev.s3.amazonaws.com/i/rbf60zofqc73n0zk4re5.jpg)

I started new video series about writing and running Go programs on Raspberry Pi. In these videos I will cover:
 - Capture image on Raspberry Pi 3 from webcamera
 - Use Facebox from https://machinebox.io to detect faces on image
 - Greet user using Text-To-Speech
 - Receive and parse user reply using Speech-To-Text

Videos:
 - [Part 1](https://youtu.be/t5ehIsa_e_U)
 - [Part 2](https://youtu.be/8C9Nx8WZDXo)
 - Part 3