teleren/devto huggingface dataset:
Exploring & Understanding Our Connected World: A new contest from Particle on Hackster
Tags: news, contest, gen3, hackster
Published: 2019-05-20 23:14:21

---
title: Exploring & Understanding Our Connected World: A new contest from Particle on Hackster
published: true
tags: News,contest,Gen 3,Hackster
canonical_url: 
---

The Internet of Things has given us a chance to explore the world around us like never before. From smart scooters on [city streets](https://dev.to/dcschelt/learn-how-to-build-this-cellular-asset-tracker-with-a-particle-boron-4o8l-temp-slug-6173996) to connected devices that track weather patterns in the heart of [Central America](https://dev.to/particle/learn-how-scientists-are-using-connected-devices-on-4-continents-to-understand-the-impacts-of-climate-change-4kha-temp-slug-6480412), we’re learning more and more all over the world through the power of IoT. Now, with our 3rd generation of IoT hardware, powered by [Particle Mesh](https://store.particle.io/collections/mesh), being used far and wide, we have a chance to learn and discover even more.

That’s why we’re thrilled to launch our latest contest on Hackster: [**Exploring & Understanding Our Connected World.**](https://www.hackster.io/contests/particle-iot)

![](https://blog.particle.io/wp-content/uploads/2019/05/connected-1024x576.jpg)

## Here’s all you need to know

- Scoot over to [our contest page on Hackster](https://www.hackster.io/contests/particle-iot) to register and pitch your project  **_no later than June 3, 2019_** to enter for a chance to win free hardware to kick your work into gear. We’ll be awarding an [Argon Kit](https://store.particle.io/products/argon-kit) to the first 50 people to register high quality projects — so don’t wait to submit!
- Make sure your project aligns with the contest [rules](https://www.hackster.io/contests/particle-iot/rules) and uses at least one device from our [3rd Generation of IoT hardware](https://store.particle.io/collections/mesh).
- Now it’s time to get building! Make some magic, document all of your work and get your project submitted by the completion deadline: **July 21, 2019**.
- Our judges will look over the submissions and choose winners no later than  **July 26, 2019**.

## Gimme the Loot

We’ll be awarding prizes for the best projects that address issues in three distinct categories: cities, the environment, and device fleets. While you can submit your project to more than one category, you’re only able to win one prize from this contest.

Speaking of winning, we’re handing out seven fantastic prizes! Drones, campaign gear, electric scooters and more.

So what are you waiting for? [Get started on your project today](https://www.hackster.io/contests/particle-iot).

The post [Exploring & Understanding Our Connected World: A new contest from Particle on Hackster](https://blog.particle.io/2019/05/17/exploring-understanding-our-connected-world-a-new-contest-from-particle-on-hackster/) appeared first on [Particle Blog](https://blog.particle.io).
AnyChart JS Charts Library Adds Timeline Chart and Network Graph in Version 8.6.0
Tags: webdev, dataviz, javascript, showdev
Published: 2019-05-17 18:45:27

---
title: AnyChart JS Charts Library Adds Timeline Chart and Network Graph in Version 8.6.0
published: true
description: AnyChart has launched version 8.6.0 of its award-winning JavaScript charting library. The new major update delivers Timeline Chart and Network Graph along with improvements and bug fixes.
tags: #webdev, #dataviz, #javascript, #showdev
canonical_url: https://www.anychart.com/blog/2019/05/15/js-charts-library-anychart-8-6-0-timeline-network-graph/
cover_image: https://thepracticaldev.s3.amazonaws.com/i/zwl9w3rmdy4hj9s6t5ed.png
---

AnyChart has launched [version 8.6.0](https://www.anychart.com/blog/2019/05/15/js-charts-library-anychart-8-6-0-timeline-network-graph/) of its award-winning JavaScript charting library. The new major update delivers [Timeline Chart](https://www.anychart.com/chartopedia/chart-types/timeline-chart/) and [Network Graph](https://www.anychart.com/chartopedia/chart-type/network-graph/) along with improvements and bug fixes.
Deploying React app to Netlify (chapter update)
Tags: javascript, beginners, webdev, discuss
Published: 2019-05-17 18:11:31

---
title: Deploying React app to Netlify (chapter update)
published: true
description: Chapter update to the Learning React, GraphQL, and Apollo
tags: javascript, beginners, webdev, discuss
---

About a month ago I wrote a post on [Learning React, GraphQL, and Apollo](https://dev.to/peterj/learning-react-graphql-and-apollo-20b9). In short, a while I go, I wrote a couple of articles that I finally collected into an ebook you can get [here](https://leanpub.com/react-url-shortener/c/wDUmKAZrO5fL). 

Since then (and by the current count) 186 people downloaded the book, which is pretty exciting! 

I priced the book at the lowest price Leanpub allows ($4.99, however, if you can't afford it I am more than happy to send you a *free* copy - just comment here, ping me on [Twitter](https://twitter.com/pjausovec) or send me an [email](mailto:peter@learnistio.com). 

Ok, back to the main purpose of this post. In the original post, I mentioned I wanted to add a chapter about deployment and thanks to [Stanley](https://dev.to/stanleynguyen), the book now has the deployment section that talks about how to deploy the sample app to Netlify. 

![Book stats](https://thepracticaldev.s3.amazonaws.com/i/rw1qfwy6b7g6cy9hcabv.png)

Thanks to Stanley for helping out with this! If you have ideas on how to improve the ebook, examples used or anything else -- feel free to reach out!
What was your win this week?
Tags: discuss, weeklyretro
Published: 2019-05-17 16:54:36

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

👋👋👋👋

Looking back on your week -- what was something you're proud of?

All wins count -- big or small 🎉

Examples of 'wins' include:

- Getting a promotion!
- Starting a new project
- Fixing a tricky bug
- Cleaning your house...or whatever else that may spark joy 😄

![happy-friday-gif](https://media.giphy.com/media/3oEjHKjVoNVsCeMoDe/giphy.gif)
How to setup a reverse proxy to your host machine using Docker
Tags: docker, nginx
Published: 2019-05-17 16:49:31

Recently, I found myself needing a reverse proxy for my local development environment. I had two applications running on different ports, and I wanted them to appear to be served from a single top level domain. This can be useful when you want cookies shared across sub-domains.

For example, I had a single Django application running on port 8000, and a React frontend running on Webpack dev server on 8080. I wanted them both to be accessible from **api-app.localhost** and **web-app.localhost** respectively.

Naturally, I turned to Docker for a solution and this is what I came up with. Here is the Docker compose file that uses the Alpine Nginx image to set up the reverse proxy.

{% gist https://gist.github.com/kevbradwick/5c9667d03332847a9cfa71829a76b687 file=docker-compose.yml %}

It references two Nginx configuration files.

Here's **web.conf**. You'll notice that there are headers defined that are related to the http version and connection upgrade. This enables Websockets to work that Webpack dev server uses for hot reloading.

{% gist https://gist.github.com/kevbradwick/5c9667d03332847a9cfa71829a76b687 file=web.conf %}

And here is the **api.conf**.

{% gist https://gist.github.com/kevbradwick/5c9667d03332847a9cfa71829a76b687 file=api.conf %}

What makes Nginx proxy to your host machine is the use of *host.docker.internal* in the *upstream*.

Before starting the containers, there is one thing left to do. Add the two hosts entries to your host file on your host machine. If that's a Linux machine (including macOS) then edit **/etc/hosts**, and if you are on Windows, edit **C:\Windows\System32\drivers\etc\hosts**.

    127.0.0.1 api-app.localhost web-app.localhost

And now start the containers!

    docker-compose up -d

When you start the proxy, and both apps are running on your host machine, you'll be able to reach them on http://web-app.localhost:5000 and http://api-app.localhost:5000.

Enjoy!
Demystifying How JSX Renders for React Beginners 
Tags: react, beginners, tutorial, javascript
Published: 2019-05-17 16:48:40

---
title: Demystifying How JSX Renders for React Beginners 
published: true
description: What happens under the hood when you write and render JSX? 
tags: react, beginner, tutorial, javascript
---

Developers new to seeing React code for the first time might see JSX and think why is there HTML in my JavaScript? However, JSX is not actually HTML or a string. It is a syntax extension to JavaScript. 

What does this mean? - Anything you can do with JSX you can do with plain JavaScript. Although you will use JSX in most cases, this clears up the common misconception that you must use JSX when using React. 
Since we use it all the time, it is useful to see what this abstraction is actually doing under the hood.

So what happens when we create a React component that renders some JSX? It will be converted to use the React.createElement API which returns a new React element of the type it was given. A React element describes what you want to see in your user interface and is just a plain object.  This type can be any tag name as a string (examples: 'div', 'h2', 'span'), a React component, or a React fragment. React.createElement also takes in props and children arguments. The React DOM takes care of updating the DOM to match React elements.

```
React.createElement(
  type,
  [props],
  [...children]
)
```

## Lets look at an example 
We will create a component `Cat` that takes in a name prop and renders a heading with a string telling us the cats name.   

### Using JSX:
```javascript
import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return <h1>My name is {this.props.name}</h1>
  }
}

ReactDOM.render( <Cat name="Fishguts" />,
  document.getElementById("app")
);
```

Now lets look at how we would rewrite this without JSX using React.createElement. In the ReactDOM.render function we create and pass in our Cat component and the root DOM node 'app'. We use createElement with our Cat component as the type, and an object with the name property as our props. In the Cat component itself we pass in a h1 tag as a string, and a [template literal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals) as a child.  

### Using React.createElement: 
```javascript
import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return React.createElement("h1", null, `My name is ${this.props.name}`);
  }
}

ReactDOM.render(
  React.createElement(Cat, { name: "Fishguts" }, null),
  document.getElementById("app")
); 
```

Hope you have come away with a better understanding of what happens when you write JSX in your React apps! 

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!
Evolution of a date picker
Tags: html, ux, design
Published: 2019-05-17 16:05:27

---
title: Evolution of a date picker
published: true
description: Today I want to share with you story about how date pickers (calendar, date input fields) have developed in our company.
tags: html, ux, design
---

Today I want to share with you story about how date pickers (calendar, date input fields) have developed in our company.

Date input is a very important thing in our project, but this task is not easy in terms of UX.

**First version**

![first](https://thepracticaldev.s3.amazonaws.com/i/3i9fmpk0swwwrg3ecw3y.png)

Problems:
1. We have duplicated the date to make it changeable with a keyboard.
To me such doubled information is very confusing and moreover eats a lot of screen space.

2. You need to confirm input of the date. It takes extra click and there is a possibility of not saving the date.
In some cases user confirmation is helpful but not in such small things.

**Second version**

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

As you can see from the screenshot both problems are solved and we’ve come to a more common variant of date picker.

But there is one problem tormenting me for long days.

It is the selection of month and year. In this variant you can enter it from keyboard, but it is not so fast (and then possibly we don’t need a calendar at all if you should enter something from keyboard), or you can scroll months, but I don’t think that scrolling of hundreds of month to the birthday is a real pleasure.

Some of the variants you can find on the internet.

![bootstrap](https://thepracticaldev.s3.amazonaws.com/i/6iscxhyanz1y82yrvpqa.png)

First variant — click on a year, you will see a table of years. In some implementations you should first select a decade and then the year itself. The same table for months.

This is the most appealing variant to me and it appears very intuitive. But it never passed hallway testing. The major argument— too many clicks, slowlier than when you will try to enter the date yourself.

![react-datepicker](https://thepracticaldev.s3.amazonaws.com/i/bm2wrjwpaedd78oetg1r.png)

Another recurring variant — select of year and month with a dropdown list.

It has one major disadvantage — it looks awful. Now you have a popup window with a calendar with a dropdown list of years of … In general crossing popup windows is not a decent tone.

**Current version**

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

In the current variant you can select month and year from scrolling list next to the date. All problems solved, everyone satisfied.

I should mention two very helpful tricks:

1. When a window is opened current month and year should be in the center of the window.
The user shouldn’t be confused and should know what date is selected.

2. The list should indicate what you can scroll.
You can see color lightening at top of list on the screen shot, but not at bottom.

I think it is not a final variant but now it is the most useful for us.
New season, new project: I need you 👉 🙏
Tags: career, discuss, showdev, help
Published: 2019-05-17 15:50:02

---
title: "New season, new project: I need you 👉 🙏"
published: true
description: 
tags: ['career', 'discuss', 'showdev', 'help']
canonical_url: "https://www.daolf.com/posts/new-season-new-project/"
---


# A quick update

I haven't written a lot lately, I was very busy with my first own, and co-founded, company: [PricingBot](https://www.pricingbot.co) a price monitoring service for e-commerce.

Things well went, we brought in some cash, and currently, the whole thing works well on autopilot.

But lately, my partner and I decided to build something new, something for developers.

# One API to rule them all

During our short career, we did a lot of scraping, and we all had the same problems:

* proxy handling
* managing a large fleet of chrome headless
* captcha
* JS rendering
* other

We know all of this can takes a lot of times. We wanted to make a tool that allows people to easily scrape web pages, on the go, without having to take care of all this.

This is why we've decided to build [ScrapingNinja](https://www.scrapingninja.co) 🕶 🕷 🕸, the easiest scrapping API on the web.

I'd love to have your input on the idea, so if you could answer those 3 questions on the comment I'd be forever grateful.

Getting feedback when you have an idea can be tough and we really care about the comments we receive from the community.

Here is what I'd like to know:

1. What are you most pain point when you scrape (proxy / js rendering / latency / capcha / ...)
2. Would you use such an API?
3. How many people do you know that could use it?

If you answer those, thank you very very very much 🙏.

# Continuing my blog

If you liked my last post about the [best time to post on dev.to](https://dev.to/daolf/-what-is-the-best-time-to-post-on-devto-a-data-backed-answer--1kob) last month, 
I plan to post one about tags analysis early next week.

I'll also try to share as much as possible about this new project with the community if there is interest in it. 

## Thank you for reading

Usually, I blog about more tech stuff:

* Here is the first post of my [Python series](https://dev.to/daolf/beware-of-python-dictget-194k)
* And here is one about the [.git directory](https://dev.to/daolf/git-series-13-understanding-git-for-real-by-exploring-the-git-director--5bd0).

PS: We built the landing page with [Landen](www.landen.com) and I must say it is awesome for someone like me who is very bad with design/font/color. I can't recommend it enough for people who need to quickly put their ideas in front of someone else's eyes.
Don't forget to ask Babel to compile .mjs files
Tags: javascript, babel
Published: 2019-05-17 15:29:02

I spent several hours trying to understand why Babel wasn't transpiling `const` statements in Jeremy Wagner's [yall.js library](https://github.com/malchata/yall.js/).

It was because the actual filename is yall.**m**js, and I hadn't configured Babel to handle that extension.

The correct `test` configuration ended up being as follows:

```javascript
test: /\.(m?j|t)s$/,
```

Or, if you don't need TypeScript:

```javascript
test: /\.m?js$/,
```

Suffer me not to ponder the ills and advantages of the `.mjs` extension. That's for smarter people.

But since some folks _do_ use that extension, it's probably worth updating your Babel config and related documentation/tutorials.
My Favorite Ways of Centering With CSS
Tags: css, beginners
Published: 2019-05-17 15:20:10

# My Favorite Ways of Centering With CSS

Back in the day, I thought that centering with CSS was _really tricky_. Often, I made it much more complicated than it is. There are many ways to do it depending on the specific situation. These are my favorite ways of centering both horizontally and vertically.

## Position absolute

The first method or approach is the absolute positioning. We know the height and width of the child and we can then use margins with a negative value of half the width or height of the child.

```css
.absolute.parent {
  position: relative;
}

.absolute .child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -110px;
  margin-left: -110px;
}
```

## Transform translate

But what if you don't know the height or width? Then you can use the transform property with a negative translate of 50% in both directions. _There you have it!_

```css
.translate.parent {
  position: relative;
}

.translate .child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

## Flexbox

Something that I came across later on is the flexbox approach. _It's genius!_ You just need to define two properties with center - which is `justify-content` and `align-items`. _That's it!_ You could also write `flex-end` if you wanted the element at the bottom right corner. Flexbox is actually really really fun.

```css
.flexbox.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

If you know other ways of centering elements, please write a comment below.

> Do you use another approach? 🤔
> Do you use Sass mixins or other cool things? 🤔

Thank you for your time!

If you liked this, then please ❤️ and [*follow me on Twitter*](https://twitter.com/mrsteffenp).
What is your favorite CI tool to integrate with a Rails project?
Tags: ruby, rails
Published: 2019-05-17 14:50:18

---
title: What is your favorite CI tool to integrate with a Rails project?
published: true
description: Looking for a low cost solution to integrate CI into a Rails project
tags: ruby, rails
---
I'm looking to integrate a CI into a new Rails project I'm working on. What are your favorite CI tools?

I have experience utilizing CircleCI for my job, but wanted a more low cost tool if there was any out there.

Thanks for the recommendations in advance!
Around the Web – 20190517
Tags: blog
Published: 2019-07-22 13:50:11

---
title: Around the Web – 20190517
published: true
tags: Blog
canonical_url: https://wipdeveloper.com/around-the-web-20190517/
cover_image: https://wipdeveloper.com/wp-content/uploads/2017/07/WIPDeveloper.com-logo-black-with-white-background.png
series: Around the Web
---

And now for somethings to read (or watch) over the weekend, if you have some spare time that is.

## [Salesforce woes— It’s deja vu all over again](https://medium.com/@bob_buzzard/salesforce-woes-its-deja-vu-all-over-again-7111572209d6)

As was the case with my [2016 post](https://medium.com/@bob_buzzard/salesforce-outages-its-not-how-well-you-play-when-youre-playing-well-d68e3264b22), this isn’t intended to twist the knife into Salesforce — having worked in the IT industry for over 30 years I’m well aware that things go wrong, sometimes catastrophically, and …

## [Oh, Data!](https://www.gooddaysirpodcast.com/217)

**gooddaysirpodcast.com**  – Jeremy Ross – In this episode, we discuss Salesforce’s upcoming earnings, Ivanka Trump to talk job training with Salesforce brass, Einstein Analytics features from the Spring ’19 release notes, and the sessions that will be available at The Extracurricular, a…

## [How To Create Expand/Collapse Sections In Salesforce Lightning Component](http://sfdcmonkey.com/2019/03/05/create-expand-collapse-sections-salesforce-lightning/)

**sfdcmonkey.com**  – piyush soni – Mar 5, 3:55 AM – Hi guys, today in this post we will learn that how we can create dynamic reusable custom expandable / collapsible sections in salesforce lightning component. From developer console >> file >> new >> Lightning Component…

## [IntelliJ Theme Contest](https://plugins.jetbrains.com/contest/intellij-themes/2019)

**JetBrains**  – Your plugin for one of our.NET tools might be of great use to millions of users. Your plugin for one of our team tools might be of great use to millions of users.

## [Meet the Flexbox Inspector](https://gedd.ski/post/flexbox-inspector/)

**Geddski**  – Flexbox just got a whole lot easier to work with. CSS Grid is the new kid on the block, bringing with it many shiny new tools that make layout on the web easier. But we still need Flexbox. There are many layouts you can only accomplish with…

## Till Next Week

Want to share something? Let me know by leaving a comment below or emailing [brett@wipdeveloper.com](mailto:brett@wipdeveloper.com)  or following and tell me on [Twitter/BrettMN](https://twitter.com/BrettMN).

Don’t forget to sign up for **[The Weekly Stand-Up!](https://wipdeveloper.com/newsletter/)** to receive free the [WIPDeveloper.com](https://wipdeveloper.com/) weekly newsletter every Sunday!

The post [Around the Web – 20190517](https://wipdeveloper.com/around-the-web-20190517/) appeared first on [WIPDeveloper.com](https://wipdeveloper.com).