teleren/devto huggingface dataset:
Mercure (Simple Real-Time Updates)
Tags: sockets, php, symfony, go
Published: 2019-03-31 23:06:41

---
title: Mercure (Simple Real-Time Updates)
published: true
description: the description from the Github Repository: Mercure is a protocol allowing to push data updates to web browsers and other HTTP clients in a convenient, fast, reliable and battery-efficient way. It is especially useful to publish real-time updates of resources served through web APIs, to a reactive web and mobile apps.
tags: #sockets #PHP #Symfony #Go
---


In the past few weeks, I discovered [Mercure](https://github.com/dunglas/mercure), the first time I tested it for a POC and realized that this is the beginning of a new era in real-time application development.

I just attended Symfony Live Paris and Kévin Dunglas the creator of Mercure made a very interesting Talk about Mercure and API-Platform, I told myself it will be cool to share the tool with dev.to family, especially that Mercure is officially supported by Symfony [Mercure Component](https://symfony.com/doc/current/components/mercure.html).

# What is Mercure?

> is a protocol allowing to push data updates to web browsers and other HTTP clients in a convenient, fast, reliable and battery-efficient way. It is especially useful to publish real-time updates of resources served through web APIs, to a reactive web and mobile apps.

![Mercure](https://github.com/dunglas/mercure/raw/master/spec/subscriptions.png)

### What's the Difference Between Mercure and WebSocket?

[WebSocket](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API)  is a low-level protocol, Mercure is a high level one. Mercure provides convenient built-in features such as authorization, re-connection, and state reconciliation; while with WebSocket, you need to implement them yourself. Also, unlike Mercure (which is built on top of HTTP and Server-Sent Events), WebSocket  [is not designed to leverage HTTP/2](https://www.infoq.com/articles/websocket-and-http2-coexist).

HTTP/2 connections are multiplexed and bidirectional by default (it was not the case of HTTP/1). When using Mercure over a h2 connection (recommended), your app can receive data through Server-Sent Events, and send data to the server with regular  `POST`  (or  `PUT`/`PATCH`/`DELETE`) requests, with no overhead.

Basically, in most cases Mercure can be used as a modern and easier to use replacement for WebSocket
### What's the Difference Between Mercure and WebSub?

[WebSub](https://www.w3.org/TR/websub/)  is a server-to-server only protocol, while Mercure is also a server-to-client and client-to-client protocol.

Mercure has been heavily inspired by WebSub, and we tried to make the protocol as close as possible from the WebSub one.

Mercure uses Server-Sent Events to dispatch the updates, while WebSub uses `POST`  requests. Also, Mercure has an advanced authorization mechanism and allows to subscribe to several topics with only one connection using URI templates.

I invite you to try the [Demo](https://demo.mercure.rocks/) Application and the Full Documentation in The Github Repository
https://github.com/dunglas/mercure
Code Quality
Tags: python, java, php, javascript
Published: 2019-03-31 22:15:02

---
title: Code Quality
published: true
description: 
tags: python, java, php, javascript
---

#Code Quality for Jira | Add-on for controlled growth of a software business#

Hi, we’d like to introduce the software we developed for our needs on top of
SonarQube to address missing needs that we identiﬁed.

We’re on the mission to help business and technical leadership make software business viable over long run

by

making codebase quality transparent, personalized and actionable

to

support strategic decision making for managers and executives, despite their technical background.

13 technologies supported: Python, Java, Java Script, Type Script, C#, C++, Erlang,PHP, Puppet, Flex, PL/SQL, VB (.Net), Go.

Here goes the 5 mins [run through the interface](https://youtu.be/KSWCEjRGgh4)

**Questions we can help answering**
 - What part of software is degrading and need immediate action?
 - What sub-project performs below the set quality threshold?
 - What team (or outsourcing partner) does better job from the code quality perspective?
 - How to increase viability of own software business

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

**Some numbers**
 - 2.5 bln lines of code analyzed
 - 172k repositories scanned
 - 2 data science PhD’s in the team

**Geography of current clients**
 - U.S.
 - United Kingdom
 - Brazil
 - India
 - Hungary
 - Latvia
 - Ukraine

**The start is incredibly simple**
It’s a quick start in 3 steps:
1. Install the add-on (via the link below).
2. Insert a link to your code repository, with a branch to be scanned.
3. Add SSH key to the code repository so we can read it and analyze.

Getting the full spectrum of code quality metrics for your project never been so easy.

**Suits both Cloud and Server Jira:**
[Code Quality for Jira](https://marketplace.atlassian.com/apps/1218553/code-quality-for-jira?
hosting=cloud&tab=overview&utm_source=forums&utm_medium=referral&utm_c
ampaign=2019_spring_outreach)

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




#Due Rank#

#Open code quality leaderboard for GitHub’ers#

We are a movement for the better code worldwide by making code quality
countable and transparent, [more…](https://duerank.com/mission?utm_source=forum&utm_medium=referral&utm_campaign=2019_spring_outreach)

Anyone can register, submit own code and get:

1. Code quality metrics
2. Leaderboard participation
3. 5 top issues per repository

The service is completely free of charge

Here is a [quick review](https://youtu.be/o5788yie6Ns) (93 secs)

**We rank GitHub users between which are**
 - [Developers](https://twitter.com/duerank_com/status/1108780329253437441)
 - [Universities](https://twitter.com/duerank_com/status/1109867489222111232)
 - [Companies](https://twitter.com/duerank_com/status/1103162051474657280)

![](https://thepracticaldev.s3.amazonaws.com/i/khata7ah48owxjwlqdzj.jpeg)

Give it a try on [Due Rank](https://duerank.com/leaderboard?
country=G&lang=Go&max=10000&min=5000&page=1&utm_source=forum&utm_
medium=referral&utm_campaign=2019_spring_outreach)
Introducing Slither: Adding anonymous proxy IPs and randomized User Agents to Scraping Projects
Tags: showdev, opensource, python, webscraping
Published: 2019-03-31 20:21:52

---
title: Introducing Slither: Adding anonymous proxy IPs and randomized User Agents to Scraping Projects
published: true
description: My first Open Sourced passion project hits the web!
tags: #showdev #opensource #python #webscraping
---

Hey there Devvers! Long time, no see! I have been on vacation for the past while and thought I would return with my first open sourced project, Slither. Slither is a basic anonymizing framework for adding elite, https, anonymous proxy IPs and pseudo-random User Agents to your web scraping and/or pen-testing projects! Finally up and running and based heavily on the Bye Bye 403 series that I've been writing, Slither is my first foray into OSS and something I deeply care about and hope folks find useful!

The GitHub repo can be found [here](https://github.com/kaelscion/slither) and I really hope you all enjoy it! A lot of requests and questions have come from around the web about this topic and how to make it easier to avoid the dreaded 403 (or worse, 503) when you're trying to scrape and/or aggregate data! The framework is dead simple and supports concurrent scraping as well as parallel processes. 

Whenever an instance of the Slither class is declared, a list of IPs and User-Agents are pulled from proxy sites around the web and assigned to the `Slither().ip `and `Slither().ua` variables. Simple plug those two variables into your project's headers and your off and running!

I really hope this helps some newcomers to web scraping and the emerging field of collecting data for data scientists and ML engineers to use! Please give it a try and leave a comment here or on the repo. Be gentle as this is my first OSS project despite years of working in software 😝. Enjoy and happy scraping!
Sunday Review (2019-03-31)
Tags: dev, dotnet, news
Published: 2019-03-31 19:59:14

---
title: Sunday Review (2019-03-31)
published: true
description: Mother's Day roundup
tags: dev, c#, dotnet, news
---

## Marching On!

Happy Mothers Day! What a superb sunny day we've had, which is why this is very late on this final Sunday of March.
You know what? I'm not going to prattle on this week and I'll keep it brief. Done.

## Learning

I decided on a change of pace so put the [Python Path](https://app.pluralsight.com/paths/skill/python) on hold and wanted to refresh my knowledge of Agile and Scrum as I'm due to step into the shoes of Scrum Master next week. I noticed that Pluralsight have a [Scrum Framework path](https://app.pluralsight.com/paths/skills/the-scrum-framework) authored mostly be [Jeremy Jarrell](https://www.jeremyjarrell.com/) so I've been through three of his courses this last week. They're really good, and it's already got me drawing up some ideas on what I'd like to try out with our team on our next sprint. 

They're going to hate me aren't they?

## The News

Each week I'll post 10-20 links that I've found the most interesting from technology blogs, reddit and other parts of the Internet.

My favourite read this week was [Comparing gRPC and HTTP APIs](https://ift.tt/2WtILJ0) (James Newton King) as it's already providing a decent cheat sheet on how to choose the right technology for the problem you're looking to solve. I'm really interested in getting to understand gRPC better in the coming months and see how it's stacking up against RESTful and GraphQL.

Check out some other articles I've found interesting below:

### Technology / General

* What did Google+ get right - https://ift.tt/2TIzPxv
* Microsoft leads the way in banning April Fools Day pranks - https://ift.tt/2usMYRr
* Garfield phones beach mystery finally solved after 35 years - https://ift.tt/2HYmuzc
* Microsoft Takes Control of 99 Websites Linked to Hacker Group - https://ift.tt/2WBVE42
* The long complicated and extremely frustrating history of Medium 2012 to present - https://ift.tt/2U4yx4t
* Meet Q. The First Genderless Voice - https://ift.tt/2HgbRrI
* Why Naval Ravikant Thinks Remote Work Is The Future - https://ift.tt/2Upw5T5
* Apples Services Event - https://ift.tt/2TZkXQn

### .NET / Azure

* Comparing gRPC and HTTP APIs - https://ift.tt/2WtILJ0
* Learning .NET Unit Testing the Easy Way - https://ift.tt/2FCDVTb
* Building serverless microservices in Azure - sample architecture - https://ift.tt/2JDOBWP
* How to Test Live Services with Fiddler AutoResponder - https://ift.tt/2HUKvqz
* Blazor: Implementing Client Side Search As You Type Using bind-value-oninput - https://ift.tt/2HU8RB5
* Windows containers now supported in Kubernetes - https://ift.tt/2FsncBH
* Using FluentValidation for Forms Validation in Razor Components - https://ift.tt/2UgYZHU
* AWS Lambda layers with .NET Core - https://ift.tt/2TzF42C
* Using NodaTime with Dapper - https://ift.tt/2UeLs3D
Quicksort: A JS Breakdown
Tags: quicksort, algorithms, javascript
Published: 2019-03-31 19:55:50

---
title: Quicksort: A JS Breakdown
published: true
description: A line by line breakdown explaining a Quicksort implementation in JavaScript
tags: quicksort, algorithms, javascript
---
Quicksort is a recursive sorting algorithm that uses the divide and conquer approach. By starting with the simplest base case to check against we continue to break out list into smaller problems. On average quicksort performs at O(n log n).

Here's the full algorithm,

```javascript
const quickSort = values => {
  if (values.length <= 1) {
    return valuesToSort;
  }

  let lessThanPivot = [];
  let greaterThanPivot = [];
  const pivot = values.shift();

  for (let i = 0; i < values.length; i++) {
    const value = values[i];
    value <= pivot ? lessThanPivot.push(value) : greaterThanPivot.push(value);
  }

  return [...quickSort(lessThanPivot), pivot, ...quickSort(greaterThanPivot)];
};
```

Let's break it down,

```javascript
  if (values.length <= 1) {
    return values;
  }
```

This is our base case. When using recursion you must always have an exit condition so that your function does not run infinitely causing you to run out of memory. `valuesToSort` is simply going to be a JavaScript array of integers. If the length of this array is less than equal to or less than one there's nothing more to sort so we exit the function by returning the values. When this function runs our quicksort is complete.


```javascript
  let lessThanPivot = [];
  let greaterThanPivot = [];
  const pivot = values.shift();
```

Here we are creating two arrays to hold our values that are smaller than or greater than the pivot value. A pivot can be selected from any index within the array. In our case we are using the `shift()` method to select the first item in the array.

```javascript
  for (let i = 0; i < values.length; i++) {
    const value = values[i];
    value <= pivot ? lessThanPivot.push(value) : greaterThanPivot.push(value);
  }
```
We iterate over the length of the array and check if the value of less than or equal to the pivot. If it is than we push it to the less than array (yes even if it's equal). If this condition is false, then we're going to push it to the greater than array since reason tells us it must be greater.
```javascript
return [...quickSort(lessThanPivot), pivot, ...quickSort(greaterThanPivot)];
```
This is where our recursion happens. For the array less than the pivot we're going to call quicksort on this again until there are no more items to be sorted. The same is true for the items that are greater than the pivot. Through each recursive call we return a new array with the items in the correct order.

Try it out with a random array of numbers,

```javascript
quickSort([50,34,21,2,3,5,7,9])
```
The result will look like this,
```
[ 2, 3, 5, 7, 9, 21, 34, 50 ] 
```
Engineering Brunch 03/30/19
Tags: thetealpickle, blogging
Published: 2019-03-31 19:48:37

---
title: Engineering Brunch 03/30/19
published: true
description: 
tags: #thetealpickle #blogging
cover_image: https://thepracticaldev.s3.amazonaws.com/i/vfxzt15dkie52apuccze.jpeg
---

Had a beautiful time yesterday with some engineers and techies. Kicked the day off with the first EVER Brown Brunch in NYC!! Between the tasty food and networking, the time flew by WAY TOO FAST 💨 Got to connect with tons of awesome people and had an idea bouncing session. From the brunch, some of the engineers and I headed to a code and mix where I got me meet EVEN MORE amazing techies. It was 🔥 🔥 These are the vibes and energies I want more of!! 🥰

I also got to share my augmented reality drawing experience and can I just say PEOPLE EXPERIENCED!!! ♥️ ♥️ so much raw emotion and enjoyment 😭 it was lovely.

——
The main takeaway: Don’t forget to go out and network!
I made a game in Vue. Animation/Mechanics with GreenSock, High Scores with LocalForage.
Tags: vue, javascript, animation
Published: 2019-03-31 18:23:23

---
title: I made a game in Vue. Animation/Mechanics with GreenSock, High Scores with LocalForage.
published: true
description: A super simple game made with JavaScript
tags: Vue, Javascript, Animation
---

## I had a coworker ask if it would be possible to use Vue to make a simple game. Challenge accepted!

This "Bouncing Game" essentially is just a collision detection mechanic implemented through GreenSock.
https://greensock.com

More specifically, I used the TimelineLite to do most of the animation, and then used the Draggable utility to implement the collision detection used to trigger scoring throughout the game.

The high scores are saved via LocalForage, which is a great library for using web technologies to save data in a 'semi-persistent' manner.
https://localforage.github.io/localForage/

Admittedly, the game resides within a single component, and I probably could refactor it a bit to make it more performant and modular, but I just thought I would share this little 'weekend project' with you all :)

Give it a shot and let me know what your high score is!

#### <center>Take a look at the codesandbox:</center>

[![Edit bounce-game](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/zlxk5lwqkx?autoresize=1&fontsize=14&hidenavigation=1&view=preview)

#### <center>Or fork the github repo:</center>
{% github adamwhitlock1/bounce-game-vue %}
https://github.com/adamwhitlock1/bounce-game-vue

Thanks for checking it out.
React inspired BEM / SCSS styling
Tags: bem, scss
Published: 2019-08-02 11:10:57

---
title: React inspired BEM / SCSS styling
published: true
tags: BEM, SCSS
canonical_url: http://metamn.io/react/react-inspired-bem-scss-styling/
---

New techniques for old problems.

<!--more-->
* * *

After working a while with React I had to switch back to a classic project: WordPress and plain SCSS with some BEM. The task was to bring an age old codebase to the modern component era.

I was wondering how I could keep that pleasant workflow React offers: components are responsible for their own dependencies and state. They are standalone and self-contained.

I was looking to implement something similar to:

```
// Component.js

// Imports all dependencies
import React from 'react'
import PropTypes from 'prop-types'
import styled, { css } from 'styled-components'

...

// Manages state
class Component extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            ...
        }
    }

    changeState(i) {

		...

		this.setState({
            ...
        })
    }

    render() {
        return (
            <Container handleClick={i => this.changeState(i)}>
                ...
            </Container>
        )
    }
}
```

It turned out it is extremely easy to implement something similar with SCSS / BEM:

```
// button.scss

// Imports all dependencies
@import '../colors/colors.scss';
@import '../link/link.scss';
@import '../border/border.scss';
@import '--primary/button--primary.scss';
@import '--secondary/button--secondary.scss';

@mixin button($variant: primary) {
  @include colors(inverted);
  @include link(not-underlined);
  @include border(rounded);

  // Manages state / variations / deviations
  @if ($variant == primary) {
    @include button--primary;
  }

  @if ($variant == secondary) {
    @include button--secondary;
  }

  ...;
}
```

After hundreds of components written in this way — a peace of mind is achieved.

Every component is standalone and self-contained.

Imports all necessary stuff required for its internal workings and incorporates all deviations and variations from the default case.
I am a full time Vue/Wordpress Dev working in a 500+ employee marketing agency, Ask Me Anything!
Tags: ama
Published: 2019-03-31 18:50:40

---
title: I am a full time Vue/Wordpress Dev working in a 500+ employee marketing agency, Ask Me Anything!
published: true
tags: ama
---

Hey there! My name is Adam. I am a developer and designer, that for the past couple years, has been working at Madwire and Marketing360 full time.

https://madwire.com
https://marketing360.com

I started as a designer (I have a degree in graphic design specifically) but have a passion for design focused development. I live to code, and my primary focus at the moment is Vue, Node, Wordpress, PHP/MySQL and learning other languages whenever I can.

Currently I am a lead developer for the custom development team at Madwire, and that means that I build and maintain custom solutions for our clients. This type of work includes custom Wordpress plugins, applications, and themes.

I like to utilize Vue.js when needed to allow dynamic data binding, along with async ajax to interact with the PHP back end of wordpress sites.

The reason I started this AMA, is that I am trying to get more involved in the Dev community and I would love to help out my fellow developers.

Ask me anything!
Why does Flutter projects contain Ruby?
Tags: discuss, dart, flutter
Published: 2019-03-31 17:29:57

Hello guys,
I noticed that anytime i push a flutter project to Github, *Ruby* is always indicated part of the languages it was written in. Example is my screenshot below

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

Also i integrated *Travis CI* with a flutter project on Github following this [tutorial ](https://medium.com/flutter-io/test-flutter-apps-on-travis-3fd5142ecd8c) and i also notice that *Travis CI* recognized the project to be using *Ruby*. Check my screenshot below

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

I asked a few people if they can explain this but i couldn't get any answer. I hope you guys will be able to help.

Thanks.
Intro to Pry — The Short Version
Tags: pry, debugging, webdev, launchschool
Published: 2020-01-10 20:10:07

---
title: Intro to Pry — The Short Version
published: true
date: 2019-03-31 16:13:46 UTC
tags: pry,debugging,web-development,launch-school
canonical_url: https://medium.com/@mindyzwanziger/intro-to-pry-the-short-version-5ea620539be1
---

### Intro to Pry — The Short Version

While I have never been formally taught how to code until fairly recently, I’ve dabbled in it over the years quite a bit — playing in Google Apps Script, building simple web sites for friends, making my emails prettier. I had never used any sort of debugging tool prior to about a month ago. At which point, I had taken a free Google Apps Script course (from Ben Collins — definitely check it out if you’d like a quick intro) and learned about Logger.log.

Stack Overflow has, of course, been my friend for years, but I distinctly remember being frustrated anytime someone referenced using Logger.log. i.e. “Have you tried using Logger.log?” What kind of response is that? At the time, it seemed this unconquerably large unknown and I didn’t want to try to learn it because it would take too much time— now I use it constantly. It was a lot simpler to use than I thought it would be, and so is pry. At least at the most basic level — which is all you really need to learn at first.

So here’s the short version:

**Step 1 — Install it.**

You can check if it’s already installed by using this in your command line:

`gem -i list pry`

It will return a boolean. If it’s not installed, use this in your command line:

`gem install pry`

**Step 2 — Require it.**

At the top of your code, write out the line:

`require “pry”`

**Step 3 — Insert it.**

Use this as many times as you’d like in your code:

`binding.pry`

Place it at a point or points in your code. To start, just pick any spot, so you can play with it and see how it works. As you go, you’ll find where exactly you want to place it when you run into various logical errors.

**Step 4 — Run your code.**

Pry stops the code at the point(s) where you placed binding.pry. At each point you can type in various variables and see what’s going on in your code at that particular spot.

**Step 5 — Exit.**

Exit the pry session by just typing exit. Exit the whole program by typing exit-program.

That’s all, folks! It’s super simple. There are other add-ons and such you can use, and more to learn about it, but this will get you over the “THIS IS SOME WEIRD THING I DON’T KNOW ANYTHING ABOUT” hump.

Code well, my friends!