teleren/devto huggingface dataset:
Pusher Contest Deadline is Two Weeks Away
Tags: pushercontest
Published: 2018-05-11 20:33:32

---
title: Pusher Contest Deadline is Two Weeks Away
published: true
description: A reminder about the Pusher contest, and a roundup of some early submissions.
tags: pushercontest
---

{% link https://dev.to/devteam/first-ever-dev-contest-build-a-realtime-app-with-pusher-4nhp %}

We're now **two weeks away** from the May 25 deadline, so we wanted to post a quick reminder and round up some of the early submissions.

Need ideas?  Check out the [ideas thread](https://dev.to/ben/pusher-contest-ideasdiscussion-thread-2idn).  

Have questions?  There's also a dedicated [support thread](https://dev.to/zmarkan/faq--support-thread-for-the-pusher-contest-2mi4).

# Submissions so far:

Just to be clear, we will not favor early submissions, but with this kind of thing it's always best not to wait until the last minute. I'll be working on my entry this weekend. (Of course, I can't win 😄)

## Button Push

Sean Denny created a collaborative clicking race.  The objective is to be the first user to make the counter reach 100.

{% link https://dev.to/nektro/entry-button-push-4b87 %}

## Appointment Scheduler

Doug Black created a scheduler app that allows you to create rooms and appointments.

{% link https://dev.to/dougblackjr/entry-appointment-scheduler-758 %}

## Pixel Wars: Claim Cells

Avalander already has a playable demo for their "Pixel Wars" game, where players are able to claim cells on a board.  It sounds like more updates are on the way.

{% link https://dev.to/avalander/pixel-wars-claim-cells-191g %}

Several folks have also submitted progress posts to the [#pushercontest](/t/pushercontest) tag.

# There's still time

Two weeks is plenty of time to put something fun together.

Good luck and happy coding!
Google I/O 2018 Summary - Day 3
Tags: webdev, webapps, frontend, google
Published: 2018-05-11 17:33:24

---
title: Google I/O 2018 Summary - Day 3
published: true
description: Check out our summary of the Google I/O Conference 2018, Day 3.
tags: #webdev #webapps #frontend #google
canonical_url: https://auth0.com/blog/googleio-summary-day-three/
---

The final day of Google I/O 18 consisted of a few talks including Node.js, Serverless deployment, Tensorflow, Android Security.

[Read what happened on Day 3 🎡](https://auth0.com/blog/googleio-summary-day-three/?utm_source=dev&utm_medium=sc&utm_campaign=googleio_summary)
![Google I/O 2018 Summary - Day 3](https://thepracticaldev.s3.amazonaws.com/i/m74byljympnrykdzeapv.png)
[Idea] Screen Sharing application using electronjs and pusher
Tags: pushercontest, electronjs, javascript, explore
Published: 2018-05-11 17:14:42

---
title: "[Idea] Screen Sharing application using electronjs and pusher"
published: true
description: "My idea for dev.to pushercontest :)"
tags: "pushercontest,electronjs,javascript,explore"
cover_image: "https://img.eztalks.com/image/screen-sharing.png"
---

# My idea?

To create a realtime screen sharing application like Teamviewer / Chrome remote desktop but without any realtime controlling system.

# Tech Stack

1. ElectronJS (get native OS APIs support specifically [desktopCapture](https://electronjs.org/docs/api/desktop-capturer))
2. NodeJS (Routes to generate userId for sharing session and maybe for up/down data streams)
3. Pusher Channel API (the power provider these gods need)

## Challenges I know I'm going to face?

[MediaRecorder](https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder), [FileReader](https://developer.mozilla.org/en-US/docs/Web/API/FileReader), [Buffer](https://medium.freecodecamp.org/do-you-want-a-better-understanding-of-buffer-in-node-js-check-this-out-2e29de2968e8), [ElectronJS](https://electronjs.org/) (all these are going to be my first try) but I know this is going to be interesting and an exciting journey for me and my learning :grin:

#### Doubts I have regarding pusher:

* How do I start a stream from one client to another? For example, I send a request to backend route that generates a id, I make a pusher channel with that id. Now how do I send video data as stream on that channel via pusher api from client?
Any help would be appreciated.

This was my first article so pardon me for bad markup and thanks for reading.
How to Find Ghost CSS Elements
Tags: css, html
Published: 2018-05-11 16:14:30

---
title: How to Find Ghost CSS Elements
published: true
description: CSS styles to help you find ghost or invisible spacing on your HTML
tags: CSS, HTML
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6jddl1p3v9j2tl4ugjm6.png
canonical_url: https://blog.davidojeda.dev/how-to-find-ghost-css-elements
---

I recently came across a bug on our landing page which caused a weird blank space overflow on the right side:

![Landing page with extra white space on right side][landing-page-bug]

I looked for a couple of hours trying to find any CSS spacing causing it, or some wrong element on my HTML, but couldn't find anything out of place. The blank space wasn't even inside the &lt;html&gt; element of the page 🧐

I then [stumbled upon this post](http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/) and rapidly found the problem. This blog post suggests some CSS styles to make ghost elements visible 👻:

```css
* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}
```

Now, I could find the section that was causing the problem:

![Landing page with ghost elements visible][landing-page-ghost]

In the end, it was a matter of fixing some mismatching HTML elements.

Would've had this CSS styles helping me debug from the beginning, could've saved me a couple hours of work 🤦🏻‍♂️


[landing-page-bug]: https://thepracticaldev.s3.amazonaws.com/i/o1q1hlen9lqdy7dsc7zz.png "Landing page with extra white space on right side"

[landing-page-ghost]: https://thepracticaldev.s3.amazonaws.com/i/909z7bing8w3g1u0ssmf.png "Landing page with ghost elements visible"
Graph Theory — BaseCS Video Series
Tags: computerscience, basecs
Published: 2018-05-11 15:27:30

---
title: Graph Theory — BaseCS Video Series
published: true
description: In this video, we break down graph theory, one of the most powerful concepts in computer science.
tags: computerscience, basecs
series: BaseCS Video
---

If you've watched any of my [previous videos](https://dev.to/vaidehijoshi), you might already be familiar with something called [trees](https://dev.to/vaidehijoshi/trees--binary-search-trees--basecs-video-series-5e38). Trees are a data structure that are non-linear, which means that they don't follow any order or sequence. But it turns out trees are a subset of another data structure. That data structure is something called a graph.

In order to truly know why we use **graphs** and what they are, we’ll need to go deep down to the very roots of something that stems from discrete mathematics: **graph theory**.

![](https://cdn-images-1.medium.com/max/800/1*rguQ2Y2Z920IYGkO0cHHtQ.jpeg)

The topics are based on concepts introduced in this previous post:

{% link https://dev.to/vaidehijoshi/a-gentle-introduction-to-graph-theory %}

I hope you enjoy! Feel free to continue the discussion in the comments.

[![SparkPost Logo](https://thepracticaldev.s3.amazonaws.com/i/v5svhunrn8s5jpjiumlk.png)](https://sparkpost.com/)

### _This video series is sponsored by [SparkPost](https://www.sparkpost.com/). There's never been a better way for developers to send email._
What kind of work should I expect to be doing as an entry-level web developer?
Tags: discuss, webdev
Published: 2018-05-11 15:12:34

---
title: What kind of work should I expect to be doing as an entry-level web developer?
published: true
tags: discuss, webdev
---

I have a friend interested in entering the field but she's wondering what kind of work she'd be doing as a junior dev. I've been at this for almost a decade so I'm not sure just how far removed my own work is from junior work.
Tech Events this Week - 5/14
Tags: discuss, career, eventsinyourcity
Published: 2018-05-11 14:23:59

---
title: Tech Events this Week - 5/14
published: true
description: 
tags: discuss, career, eventsinyourcity
---

Each week, I create a thread to list awesome tech events going on this week!

I am going to put some comments below with different areas, feel free to reply with your events on those comments. If you have an event that isn't in one of those areas, feel free to first write a comment with the area, then another one threaded onto it with your event!

I will be posting this thread every Friday!
What Is Your Main Language?
Tags: discuss, poll, programming
Published: 2018-05-11 12:55:26

---
title: What Is Your Main Language?
published: true
description: 
tags: #discuss #poll #programming
---

I am following *The Practical Dev* and *dev.to* for quite some time and had the impression, that this great community consists of a majority of frontend and scripting language developers. I was more than happy, that my article about [Modern Java Development](https://dev.to/stealthmusic/modern-java-development-is-fast) gained some attention.

Now I am curious to know, **What is you main programming language and what are you using it for?**
The ForwardJS Battle — Part 1: San Fran
Tags: javascript, react, angular, webapi
Published: 2018-08-28 15:04:15

---
title: The ForwardJS Battle — Part 1: San Fran
published: true
tags: javascript,react,angular,webapi
canonical_url: https://branch-blog.qlik.com/the-forwardjs-battle-part-1-san-fran-adfd19d69d2c
---

February of 2018 saw me leaving the cold winter of Ottawa to bathe in the mild warmth of San Francisco. This wasn’t a vacation. I was tasked with donning the Qlik cap and representing our developer relations team with a talk. With five days full of workshops — I couldn’t just fly in, speak and fly out. I had to take advantage.

![](https://cdn-images-1.medium.com/max/301/1*FJXu3AAyzpu7qLm1-nbJxw@2x.jpeg)<figcaption>Donning my Qlik cap while wear a ForwardJS hat</figcaption>

Day 1 of ForwardJS had me digging into WebAPIs with [Aysegul Yonet](https://medium.com/u/c2e120a1a32). A tiny class with fewer than ten attendees meant we could get a lot done quickly and have some hacking fun of our own. While Aysegul covered the basics of a bunch of the different options now available to us devs in the browser, the funnest part was coding a script to see exactly how much of my hard drive IndexedDB would allow a site to eat up. Not very often a workshop has me routing for a script to win against my machine.

Day 2 for me was the conference itself, which meant a less technical talk on the downfall of this years Ottawa Senators entitled “[My Hockey Team Sucks](https://forwardcourses.com/lectures/346)” and a day of chilling at the Qlik table with [Ana Nennig](https://medium.com/u/edeece4a7db5) pimping our awesome Branch swag and talking about the awesome power of the QIX engine.

{% tweet 963582133112520704 %}

Day 3 brought me [Brian Holt](https://medium.com/u/69ba9847d710) and his React + Redux workshop. I was really impressed with how Brian started with the basics, making code each element using React.createElement to see how the process works. A little while later (after getting over that icky feeling in my stomach that came from putting HTML in Javascript) we were introduced to the wonderful world of Redux, reducers and Redux middleware. This was a great workshop that Brian has brought around the world (which he tracks in the repo), so if it’s coming to a conference near you I suggest grabbing a seat.

Last day of the conference had me sitting in on Webpack 101 with Freddy Rangel. Starting at the basics of initialization and running all the way through tree-shaking, Freddy did a great job of helping me de-mystify one of those things I usually leave to the Angular CLI to figure out. It’s also always nice when a teacher introduces a new teaching technique and Freddy’s approach of having a separate GitHub branch for each module made keep pace a breeze for everyone in the workshop.

Overall I’d say the San Fran ForwardJS was a pretty great success and I knew I’d have to work extra hard with [Dave Nugent](https://medium.com/u/150969363672) to make sure its Canadian counterpart lived up to the Forward reputation.

* * *
Is software developer fatigue a thing?
Tags: discuss
Published: 2018-05-11 12:52:43

---
title: Is software developer fatigue a thing?
published: true
description: 
tags: discuss
---

"JavaScript fatigue" is a well known concept (which also brought a lot of good) sired by the explosion of the JS community in the latest years but I would like to open a discussion about the rest of the software technologies as well.

**Do we have too many programming languages?** Sometimes I find myself thinking about the fact that we (as the developers on planet Earth) spend so much time writing "a date/time library" in a gazillion of languages because every new language or framework obviously needs one. I'm not arguing merits here, every language is either amazing or useful to someone but they all need the same building blocks. Will we ever find a "one true language" for each domain (I know, my reasoning is fallible) and stop rewriting functions to split a string into an array each and every time?

**Are there too many technologies on the cloud?** I am not advocating monopoly obviously but every time I open the AWS console (I hope I'm not the only one) I find this dashboard a bit ridicoulous: 

![aws console](https://thepracticaldev.s3.amazonaws.com/i/y66sz10w2mhq20tch2ld.png)

I honestly don't know what half of those entries do.

The Google Cloud offer is also super long:

![google cloud products](http://i63.tinypic.com/23r1de8.png)

I guess the same goes for Azure.

How much cloud tech are we supposed to be familiar with?

**So, am I the only one that thinks of "software developer fatigue"?**
.forEach(), .map(), .filter() .... What's the difference?
Tags: javascript, programming, tutorial
Published: 2018-05-11 12:19:49

---
title: .forEach(), .map(), .filter() .... What's the difference?
published: true
description: we would look at explaining each of the iteration methods with example.
tags: javascript, programming, tutorial
---

**.forEach:**  
`.forEach()`, is used to execute the same code on every element in an array but does not change the array and it returns undefined.

*Example:*
In the example below we would use `.forEach()` to iterate over an array of food and log that we would want to eat each of them.

    let food = ['mango','rice','pepper','pear'];
    food.forEach(function(foodItem){
        console.log('I want to eat '+foodItem);
    });

Running this on your console;

![forEach result](https://thepracticaldev.s3.amazonaws.com/i/r20nz5ulnpktqo1ke2zz.PNG)


**.map():**
`.map()` executes the same code on every element in an array and returns a new array with the updated elements.

*Example:*
In the example below we would use `.map` to iterate over the elements of the `cost` array and divide each element by 10, then assign our new array containing the new cost to the variable `newCost`.

    let cost = [100,400,300,700];
    let newCost = cost.map(function(costItem){
        return costItem / 10;
    });
    console.log(newCost);

Running this on your console;

![map result](https://thepracticaldev.s3.amazonaws.com/i/tehhysnkfra7a009lh06.PNG)


**.filter():**
`.filter()` checks every element in an array to see if it meets a certain criteria and returns a new array with the elements that return `truthy` for the criteria.

*Example:*
In the example below we would use `.filter` to return values that are less than 200.

    let cost = [100,400,50,40,700];
    let smallCost = cost.filter(function(costItem){
        return costItem < 200
    });
    console.log(smallCost);

Running this on your console;

![filter result](https://thepracticaldev.s3.amazonaws.com/i/0r7346my32b8zmi38gdg.PNG)

**That's all folks...**
how to correctly identify a web page?
Tags: discuss, webdev
Published: 2018-05-11 10:01:06

---
title: how to correctly identify a web page?
published: true
tags: #discuss #webdev
---
why need to identify a certain page? A Google browser extension needs to react to a certain page loaded from a website. The current way of identifying the specific page is to match its URL by using a regular expression generated according to a set of ULRs given by Ops people. 

Using regex has some drawbacks. Ops or marketing people don't know regex. Therefore, it always relies on engineers to generate the regex if there are contracts signed with partners. We are in EC field and it is at least thousands of partners in each country running our services. So far we run our service in 7 countries. 

Instead of using regex, I am thinking if I could use Solr or ElasticSearch to index the URL with different weights on the specific terms in the URLs. Hope to learn from how you probably address such a problem.
HTTP status code symbols for Rails
Tags: rails, tip
Published: 2018-05-11 09:12:21

---
title: HTTP status code symbols for Rails
published: true
description: 
tags: #rails #tip
---

A little very useful command to get the list of HTTP response codes and their Ruby on Rails symbol mappings.

```

Rack::Utils::HTTP_STATUS_CODES

```

the result is:


```
{100=>"Continue",
 101=>"Switching Protocols",
 102=>"Processing",
 200=>"OK",
 201=>"Created",
 202=>"Accepted",
 203=>"Non-Authoritative Information",
 204=>"No Content",
 205=>"Reset Content",
 206=>"Partial Content",
 207=>"Multi-Status",
 208=>"Already Reported",
 226=>"IM Used",
 300=>"Multiple Choices",
 301=>"Moved Permanently",
 302=>"Found",
 303=>"See Other",
 304=>"Not Modified",
 305=>"Use Proxy",
 306=>"Reserved",
 307=>"Temporary Redirect",
 308=>"Permanent Redirect",
 400=>"Bad Request",
 401=>"Unauthorized",
 402=>"Payment Required",
 403=>"Forbidden",
 404=>"Not Found",
 405=>"Method Not Allowed",
 406=>"Not Acceptable",
 407=>"Proxy Authentication Required",
 408=>"Request Timeout",
 409=>"Conflict",
 410=>"Gone",
 411=>"Length Required",
 412=>"Precondition Failed",
 413=>"Request Entity Too Large",
 414=>"Request-URI Too Long",
 415=>"Unsupported Media Type",
 416=>"Requested Range Not Satisfiable",
 417=>"Expectation Failed",
 422=>"Unprocessable Entity",
 423=>"Locked",
 424=>"Failed Dependency",
 425=>"Reserved for WebDAV advanced collections expired proposal",
 426=>"Upgrade Required",
 427=>"Unassigned",
 428=>"Precondition Required",
 429=>"Too Many Requests",
 430=>"Unassigned",
 431=>"Request Header Fields Too Large",
 500=>"Internal Server Error",
 501=>"Not Implemented",
 502=>"Bad Gateway",
 503=>"Service Unavailable",
 504=>"Gateway Timeout",
 505=>"HTTP Version Not Supported",
 506=>"Variant Also Negotiates (Experimental)",
 507=>"Insufficient Storage",
 508=>"Loop Detected",
 509=>"Unassigned",
 510=>"Not Extended",
 511=>"Network Authentication Required"}

```
in a more developer way :)

```

Status Code Symbol
1xx Informational
100 :continue
101 :switching_protocols
102 :processing

2xx Success
200 :ok
201 :created
202 :accepted
203 :non_authoritative_information
204 :no_content
205 :reset_content
206 :partial_content
207 :multi_status
226 :im_used

3xx Redirection
300 :multiple_choices
301 :moved_permanently
302 :found
303 :see_other
304 :not_modified
305 :use_proxy
307 :temporary_redirect

4xx Client Error
400 :bad_request
401 :unauthorized
402 :payment_required
403 :forbidden
404 :not_found
405 :method_not_allowed
406 :not_acceptable
407 :proxy_authentication_required
408 :request_timeout
409 :conflict
410 :gone
411 :length_required
412 :precondition_failed
413 :request_entity_too_large
414 :request_uri_too_long
415 :unsupported_media_type
416 :requested_range_not_satisfiable
417 :expectation_failed
422 :unprocessable_entity
423 :locked
424 :failed_dependency
426 :upgrade_required

5xx Server Error
500 :internal_server_error
501 :not_implemented
502 :bad_gateway
503 :service_unavailable
504 :gateway_timeout
505 :http_version_not_supported
507 :insufficient_storage
510 :not_extended

```
Python: update a dict by object
Tags: python, dirtyhacks
Published: 2018-05-11 09:02:17

---
title: Python: update a dict by object
published: true
description: 
tags: python, dirtyhacks
---

When you have a dict and a non-iterable object you'd like to update the dict from, you can do this:

```python
class A:
    def __init__(self):
        self.fields_names_list = [..attribute names here..]

    def __iter__(self):
        for name in self.fields_names_list:
            yield name, getattr(self, name, None)
```

And voila, it works:

```python
a = A()
a.foo = 'bar'
b = dict()
b.update(a)
a
# {'foo': 'bar'}
```

Update: my solution is for legacy code, in general, it's better to use @rhymes solution from the comments.
Pixel Wars: Claim Cells
Tags: pushercontest, pixelwars, game
Published: 2018-05-11 08:08:31

---
title: Pixel Wars: Claim Cells
description: 
published: true
tags: pushercontest, pixelwars, game
---

[View the project on GitHub](https://github.com/Avalander/pixel-wars)

[Try it out!](https://projects.avalander.com)

# Progress so far

The most interesting news is that I have a [playable demo](https://projects.avalander.com) now!

When the player visits the game, they are asked to choose a nickname and get a random colour assigned. To avoid having to handle duplicated nicknames, the player gets a number with their nickname. Therefore, the first player to sign up with the name *James* will be *James #0*, the second one, *James #1* and so forth.

Then, the player can start claiming cells of the board. When a player claims a cell, the cell will be drawn with the player's colour, and any other connected players will see the board update in real time.

# Next steps

First thing, I will make the board larger. One hundred cells seem very little. I'm thinking that the board should be configurable in the backend and the client should receive the dimensions of the board and draw it accordingly, instead of having them harcoded both in the client and in the server.

Then, I still have two rules to implement from the original design:
* A player can only claim a cell if nobody has previously claimed any cell or after a different player has claimed a cell, i.e., a player cannot claim two cells consecutively.
* To ease the previous rule when there are few players, there will be a bot that will claim a random cell if no player has claimed any cell in 2 minutes, or when there are no players connected.

I'm not entirely sure about these rules, though. The goal is to avoid a situation where one player is the only one connected and quickly claims the whole board, hence the idea of disallowing claiming multiple cells consecutively. Another idea that I'm considering is to add a cooldown after the player has claimed a few cells.

For instance, a player could claim up to five cells and then have a cooldown of a few minutes, which would be less aggressive than not allowing to claim more than one cell in a row. The cooldown could be affected by the amount of players online and be reduced whenever another player claims a cell. This would have the additional benefit that I would have a few other interesting things to do with Pusher.

Anyway, I'm not entirely sure what would be a good way to prevent one player claiming the whole board in a matter of seconds when nobody else is online. Suggestions and opinions on the two solutions I mentioned above are welcome.

And the last thing that I have planned to implement is a leaderboard. Next to the board, the player should see a leaderboard with the 10 players that own more cells at the moment and the 10 players that have claimed more cells in total.