teleren/devto huggingface dataset:
A new messaging protocol for real-time systems
Tags: iot, opensource, python, networking
Published: 2018-12-14 05:50:35

---
title: A new messaging protocol for real-time systems
published: true
description:  
tags: IoT,opensource,python,networking
---
I have been working on **IoT** projects for last five years. After using **MQTT** in many of my projects I have realized that there is a **huge learning curve** for the beginners to understand and implement MQTT in their projects. The packet structure of MQTT is **complex** and MQTT packets are **difficult** to debug. Also **customizing** the open source MQTT brokers are also **difficult** for the beginners, and sometimes even for the experts.

To make IoT and Messaging simple, I am designing a **new protocol** which uses **JSON** packets for data exchange and is far **less complex** than MQTT. I am also developing an **open source** project which will contain a server (with load balancer support), a python client, a Javascript client and a python based load balancer. I hope this project will **reduce** the **development time** as the protocol is **easy to understand** and the open source code is fully **modular** & **easy to customize**. 

This will be my very first contribution to the open source community. **Wish me luck!**
AoC Day 14: Chocolate Charts
Tags: adventofcode, discuss
Published: 2018-12-14 05:13:31

---
title: "AoC Day 14: Chocolate Charts"
published: true
description: "Day 14: The elves are making hot chocolate, and we're helping them figure out how good it is."
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tl9i05drx8p4mthjb80l.png
tags: adventofcode, discuss
series: Advent of Code  
---

Hi!  [Day 14 is here.](https://adventofcode.com/2018/day/14)  Unfortunately, I'm falling behind, but I'll catch back up this weekend.  And I'm excited to get caught up because then I can look at everybody else's solutions.

Today, we encounter a couple of elves making some hot chocolate with different recipes.  Much like the marbles a few days ago, it's looking like we're looping over some scores and adding in some new ones.

Good luck!
Slate, a great tool for doc and tutorial
Tags: slate, documentation, tutorial, doc
Published: 2018-12-14 05:02:08

---
title: Slate, a great tool for doc and tutorial
published: true
description: 
tags: slate, documentation, tutorial, doc
---

Today I read here and found [Slate](https://github.com/lord/slate), it's the right solution I wanted for doc.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--Nff81ybW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/an3dngje0iq4imsve889.png)

Two columns like literal programming, suitable for docs and long tutorials or guides.
Run levelDB + Node.js in 1 min on Docker
Published: 2018-12-14 03:30:37

---
title: Run levelDB + Node.js in 1 min on Docker
published: True
description: 
tags: 
---

I tried [levelDB](https://github.com/google/leveldb) with [Node.js imprementation](https://github.com/Level/levelup) on [Docker](https://cloud.docker.com/repository/docker/sot528/leveldbtest/general).

# Usage

```bash
docker run -it sot528/leveldbtest
```

# Run on the Docker container

```bash
node index.js
```

You can try anything as edit `index.js`.
Let’s discuss bullying in the workplace and depression.
Tags: discuss, workplace, bullying
Published: 2018-12-14 02:02:36

---
title: Let’s discuss bullying in the workplace and depression.
published: true
description: it’s a touch realty a lot of bullying happens in the workplace
tags: discuss,workplace,bullying
---

# Bullying in the workplace happens every day.

If you saw someone being mistreated in the workplace, regardless of age, gender, social status, would you step in? What would you do to help this person?

# Overdepressed, Stressed, and Under dressed.

If you’re ever feeling lonely, sad, stressed, or even depressed about work, or life, what do you do to mediate this feeling, and how does it help you?
A month of Flutter: real faker data
Tags: flutter, tutorial, testing
Published: 2018-12-14 01:37:24

_Originally published on [bendyworks.com](https://bendyworks.com/blog/a-month-of-flutter-real-faker-data)._

[Yesterday](https://bendyworks.com/blog/a-month-of-flutter-stream-transforms-and-failing-tests) I left the code base with failing tests because the fixture data stored in a JSON file [can't be read in Flutter tests](https://github.com/flutter/flutter/issues/12999). Today I'm going to complete the move to streamed mock data by switching from static fixtures to dynamic factories in a Dart file. The Unsplash image IDs will still be hard coded but the rest of the values will be dynamically generated.

The core of the work will be performed in `mockPostData`. This will create a `Map` with a random [UUID](https://en.wikipedia.org/wiki/Universally_unique_identifier) from the [`uuid` package](https://pub.dartlang.org/packages/uuid), a random image ID from the pre-selected list, a `DateTime`, and random `text` and `username` with the [`faker` package](https://pub.dartlang.org/packages/faker).

I have added a day between each `DateTime` value, so if I generate three posts, they will be from today, yesterday, and two days ago, respectively.

~~~dart
Map<String, dynamic> mockPostData({int index = 0}) {
  const Faker faker = Faker();
  final String imageId = faker.randomGenerator.element(imageIds);
  final String createdAt =
      DateTime.now().subtract(Duration(days: index)).toIso8601String();

   return <String, dynamic>{
    'id': Uuid().v4(),
    'imageUrl': 'https://source.unsplash.com/$imageId',
    'createdAt': createdAt,
    'text': faker.conference.name(),
    'username': faker.person.name()
  };
}
~~~

There are also two helper methods, `mockPost` and `mockPosts`, to wrap the raw data in `Post` instances. Now it's just a matter of updating the tests and the `_loadPosts` function to use the new mock methods.

Using faker to generate mock data results in different names showing up.

![Screenshot of random mock usernames](https://thepracticaldev.s3.amazonaws.com/i/aa14o8mhqjrkjh9y5xrg.png)

This is the base mock data rendering. Tomorrow starts the fun work of rendering the actual images.

## Code changes

- [#29 Turn mock posts into Stream](https://github.com/abraham/birb/pull/29)
I can't understand the twiceOptional function from Data61 fp course.
Tags: help, haskell, data61
Published: 2018-12-14 01:30:13

---
title: I can't understand the twiceOptional function from Data61 fp course.
published: true
description: Trying to go through data61's Haskell course.
tags: help, haskell, data61
---

```haskell
-- Here's what we've got with Optional

data Optional a
  = Full a
  | Empty
  deriving Show (Eq, Show)

mapOptional :: (a -> b) -> Optinoal a -> Optional b
mapOptional _ Empty = Empty
mapOptional f (Full a) = Full (f a)

bindOptional :: (a -> Optional b) -> Optional a -> Optional b
bindOptional _ Empty = Empty
bindOptional f (Full a) = f a

applyOptional :: Optional (a -> b) -> Optional a -> Optional b
applyOptional f a = bindOptional (\f' -> mapOptional f' a) f

twiceOptional :: (a -> b -> c) -> Optional a -> Optional b -> Optional c
twiceOptional f = applyOptional . mapOptional f


-- | Convert a list of optional values to an optional list of values.
--
-- * If the list contains all `Full` values, 
-- then return `Full` list of values.
--
-- * If the list contains one or more `Empty` values,
-- then return `Empty`.
--
-- * The only time `Empty` is returned is
-- when the list contains one or more `Empty` values.
--
-- >>> seqOptional (Full 1 :. Full 10 :. Nil)
-- Full [1,10]
--
-- >>> seqOptional Nil
-- Full []
--
-- >>> seqOptional (Full 1 :. Full 10 :. Empty :. Nil)
-- Empty
--
-- >>> seqOptional (Empty :. map Full infinity)
-- Empty
seqOptional ::
  List (Optional a)
  -> Optional (List a)
seqOptional =
  foldRight (twiceOptional (:.)) (Full Nil)

```


Things I don't understand:
1. We are passing three arguments to the twice function.
```haskell
twiceOptional :: (a -> b -> c) -> Optional a -> Optional b -> Optional c
twiceOptional f = applyOptional . mapOptional f
```
mapOptional on the other hand takes only two arguments. Why mapOptional doesn't get angry? The partial application here works like this:
```haskell
twiceOptional (+) (Full 1) (Full 2) = applyOptional . mapOptional f (Full 1) (Full 2)
```
2.
```haskell
>>> seqOptional (Empty :. map Full infinity)
Empty
```
seqOptional shows that it will stop execution when it encounters the first Empty value. Why it stops execution?

P.S. [the link to the course itself](https://github.com/data61/fp-course)
I did it again.
Tags: coding, discuss
Published: 2018-12-14 01:02:38

---
title: I did it again.
published: true
description: That mistake I make every time.
tags: #coding #discuss
---

Today I tried to run some code. It timed out with no response. A little bit later, I figured out I had inverted a boolean condition. Which caused an infinite loop.

![cat rolling soccer ball infinite loop](https://thepracticaldev.s3.amazonaws.com/i/hwg28815uveoa7avib15.gif)

After all these years, I still make that same mistake with booleans -- forgetting to put a `not` (or `!`) in front of a condition.

Do you have a thing that always trips you up?

/∞
Four types of responsiveness in React
Tags: react, responsive, webdesign, webdev
Published: 2018-12-21 07:28:01

---
title: Four types of responsiveness in React
published: true
tags: react, responsive, web design, webdev
canonical_url: http://metamn.io/react/four-types-of-responsiveness-in-react/
---

> This text is taken as is from the [MR-UI Storybook](http://metamn.io/mr-ui/?selectedKind=Basics%2FResponsiveness%20%E2%9C%93&selectedStory=Overview&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook-addon-background%2Fbackground-panel&background=beige). One advantage of Storybook is to _force_ you to document your research not just the end result. Take this as a good example.

With React, a reactive / responsive framework, it’s time to rethink the responsiveness of a website.

In most cases, on the large web, responsiveness means the site is adapting to the device screen size using media queries.

Since [Frank Chimero’s original article](https://frankchimero.com/writing/the-webs-grain/) we know this is not enough. Why? There are too many devices, and there will be much more which cannot be covered by media queries.

Instead, we should let every component of the site be aware of it’s size and respond accordingly to changes. This way the final site [can be assembled automagically](http://metamn.io/beat/tomorrowww/) even in unknown and uncertain conditions.

This idea is familiar with React: every component is responsible of, and manages its own state. That should be true also for plain CSS elements. There is a [work in progress](https://elementqueries.com/) towards a general protocol but W3C, as usual, is catching up very slow, thus CSS Element Queries are not a standard yet.

Fortunately React has plenty of libraries and ways to make elements be aware of their dimension and act upon changes.

We have the following individual scenarios which can be combined together when necessary:

1. **Global state —** Elements are aware of each other’s state and can act upon changes collectively.
2. **React Measure —** An element is aware of its measures and can react to changes.
3. **Element Queries —** An element’s style can perform element queries to react to changes inside style.
4. **Media Queries —** An element’s style can perform classic media queries and react when device screen size is changed.

### Resources

- [React Measure](https://github.com/souporserious/react-measure)
- [A list of available technologies for element queries, Dec 2018](https://github.com/ZeeCoder/container-query)
- [Devices as designers](http://metamn.io/beat/tomorrowww/)
- [An original idea by Frank Chimero](https://frankchimero.com/writing/the-webs-grain/)
Have you seen the new "Very Important Pinned Issues" feature on Github?
Tags: discuss, github, opensource, news
Published: 2018-12-13 23:24:13

---
title: Have you seen the new "Very Important Pinned Issues" feature on Github?
published: true
tags: discuss, github, opensource, news
---

Quite impressive! They keep crushing it with the recent releases! 
Now you will be able to pin up to 3 issues on the "Pinned Issues" list — For those who decide to 'opt in' in the Public Beta of the dashboard.

{% twitter 1073314640963231744 %}

What are your thoughts on this? Will you use it at some point? I see this feature can be quite valuable in the form of prioritisation of the most urgent/important issues.

***

Also, it looks like it has been a great year for open source! 🙂

{% twitter 1073335520925810688 %} 

# Top topics for new open source projects
> These are the non-language topics that had the biggest increase in number of open source projects created in 2018 compared to 2017. Third on the list, `dotnet` shows that more open source projects are developing apps for Windows. In our [programming languages post](https://blog.github.com/2018-11-15-state-of-the-octoverse-top-programming-languages/), JavaScript was the most popular language for new projects, and we see `nodejs`, `react`, and `vue` in the top topics for 2018—all tools for developing in JavaScript. Machine learning is also gaining momentum on GitHub with new open source projects tagged `machine-learning`.

1. nodejs
2. react
3. dotnet
4. docker
5. android
6. machine-learning
7. api
8. ios
9. cli
10. vue

By the way, the top non-language topics in 2018 have been a Javascript [library and a framework](https://dev.to/juliatorrejon/what-is-the-importance-of-understanding-libraries-and-frameworks-3nfm).
What kind of dev gift are you looking for these coming holidays?
Tags: discuss, fun, gifts, holidays
Published: 2018-12-13 22:49:54

---
title: What kind of dev gift are you looking for these coming holidays?
published: true
tags: discuss, fun, gifts, holidays
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lpkb9d14p9xadbvwj71v.jpg
---

Photo by [Plush Design Studio](https://unsplash.com/@plushdesignstudio) on [Unsplash](https://unsplash.com)

A short and sweet fun post. I was inspired by this tweet. Who doesn't want that? 😂

{% twitter 1073341012884500480 %}

What are you looking for as gifts this holiday? Write your list in a comment and you can always send the permalink as a wishlist to whoever is looking for dev gift ideas for you 🎅
Struggling to land the job as a Junior Front End Developer
Tags: career, html, css, beginners
Published: 2018-12-13 22:37:28

---
title: Struggling to land the job as a Junior Front End Developer
published: true
description: 
tags: #career #html #css #beginner
---

I've been interviewed by many companies. Positions are a mix of design and development roles. The main responsibility is to build a website or to improve the look and functionality of it. I haven't had a technical interview where they'd test me on code or ask me technical questions. The interviews are mostly to get to know me and what I do. I am more passionate about designing websites using code than debugging but I'll take anything that'd help me learn more. I believe I have the skills for it but I keep getting rejected. My experiences consists of a 3 month internship and personal projects. My experience at my internship was using WordPress but I mostly coded websites through WordPress (hard coding HTML/CSS). I am currently learning to build my own website using React but it seems like it's not helping me with the job search. I want to highlight to the interviewers that I am willing to learn while I work with them. I can apply to the most simplest job but I'd get rejected. How do I land the job?
How does 'input data' get stored? (Beginner Help)    
Tags: vue, beginners, discuss, javascript
Published: 2018-12-13 22:09:53

---
title: How does 'input data' get stored? (Beginner Help)    
published: true
description: using this example, how do the upvotes get stored...?
tags: vue, beginner, discuss, javascript
---

Simple question/concept I am trying to grasp, thank you in advance for your help, this community has been a huge tool for me. 🙌👏 

Okay so... using this example, below (click the link for video), how do I go about storing the 'likes' hypothetically.

<img src="https://thepracticaldev.s3.amazonaws.com/i/m57wo59ncrb1hb8o26ii.png">

https://www.useloom.com/share/e8342acd84e440e283f1ababd758eb0b

Would this be done in a DB? (which would you recommend, I have used MongoDB and have been playing around with google firestore)

How does the data get sent? Is this related to 'state management' in Vue? Is this where tools like nuxt.js and vuex come in handy? (Do these questions even make sense? 🤪😅)

Cheers 🎉


https://www.useloom.com/share/e8342acd84e440e283f1ababd758eb0b
Manejo del Estado en una Flutter App
Tags: flutter, redux, android, ios
Published: 2018-12-13 21:29:11

---
title: Manejo del Estado en una Flutter App
published: true
description: ¿Qué opciones tenemos para manejar el estado de nuestras Flutter Apps?
tags: flutter, redux, android, ios
series: DevFlutter
---

Después de probar [**Flutter**](https://flutter.io) con cierta intensidad en los últimos días rapidamente llegue a la conclusión de que el framework soluciona gran parte de la carga de trabajo en la ui. Tenemos gran cantidad de Widgets para ello. Dicho esto y con lo anterior más que claro, Lo siguiente era pensar... ¿Cómo voy a mantener el estado de mis apps?

## Anhelando Apollo Client
En mis desarrollos web uso normalmente ReactJS y para el mantenimiento del estado  uso [**Apollo Client**](https://www.apollographql.com/docs/react/)... (*tienen que probarlo es una gozada*), el caso es que después de haber probado las mieles de Graphql no quiero otra cosa (de momento), pero... la realidad es que **Flutter** aún es muy nuevo para el gran publico y todavía no existe una solución del equipo de Apollo para **Flutter** aunque la comunidad ya lo pide! 

{% github https://github.com/apollographql/apollo-client/issues/2756 %} 

La mejor librería que he visto hasta ahora es **graphql-flutter** pero aún no han desarrollado la parte del manejo del Estado. (por favor, si estoy equivocado... Díganmelo!!!) 

{% github zino-app/graphql-flutter %}

Total! que seguramente tendré que tirar de soluciones más clásicas, en Flutter por supuesto tenemos varias opciones, en este repositorio tenemos varios ejemplos: 

{% github brianegan/flutter_architecture_samples %}

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

Seguramente me voy a decantar por Redux, porque me es más familiar... ya os iré contando.

PD: Les recomiendo esta platica de Brian Egan

{% youtube zKXz3pUkw9A %}
A Look at Stack Overflow Mobile vs Web Popularity Trends
Tags: webdev, bestofdev, android, ios
Published: 2018-12-13 19:36:57

I want to share an interesting conversation that sprang up in another thread relating to language trends...

{% devcomment 7g80 %}

{% devcomment 7ga4 %}

{% devcomment 7ga9 %}

I think the fun thing is that there are a few directions this conversation should go in, and it's a lot of interesting data.

Happy coding ❤️
Sorting Arrays of Strings in JavaScript
Tags: arrays, javascript, webdev, programming
Published: 2018-12-13 18:26:50

---
title: Sorting Arrays of Strings in JavaScript
published: true
description: 
tags: #arrays #javascript #webdev #programming
---

![alt text](https://www.techagilist.com/wp-content/uploads/2018/06/Sort.png)

<h3>Sorting Arrays of Strings</h3>

In JavaScript arrays have a **sort( )** method that sorts the array items into an alphabetical order. 

The following illustrates the syntax of the **sort( )**method:

```
Array.sort([comparer])
```

The **sort( )** method accepts an optional argument which is a function that compares two elements of the array.

If the compare function is omitted, then the **sort( )** method will sort the element based on the elements values.

Elements values rules:

1.If **compare (a,b)** is less than zero, the **sort( )** method sorts **a** to a lower index than **b**. In other words, **a** will come first.
2.If **compare (a,b)** is greater than zero, the **sort( )** method sort **b** to a lower index than **a**, i.e., **b** will come first.
3.If **compare (a,b)** returns zero, the **sort ( )** method considers a equals b and leaves their positions unchanged.

Also, note that the **sort( )** method accepts two arguments and will return a value that determines the sort order, the following represents the syntax:

```
function compare (a, b) {
   / …
}
```

***Note: Remember that a function can be named as you want, but try to make the name meaningful to what you are trying to said through that function for an easy reference.***

**Sorting Arrays of Strings**
Let's practice with an array of string named **animals**, as follows:

```
var animals = [
    'cat', 'dog', 'elephant', 'bee', 'ant'
];
```

To sort the elements of the **animals** array in ascending order alphabetically, we need to use the **sort( )** method without passing the compare function as in the example:

```
animals.sort();
console.log(animals);
// ["ant", "bee", "cat", "dog", "elephant"]
```

To sort the **animals** array in descending order, you will need to change the logic of the compare function and pass it to the **sort( )** method as the following example.

```
// descending order
animals.sort(function (a, b) {
    if (a > b) {
        return -1;
    }
    if (b > a) {
        return 1;
    }
    return 0;
});
console.log(animals);
// ["elephant", "dog", "cat", "bee", "ant"]
```

Of course, this is only a tiny piece of sorting array elements because we can use the **sort( )** method also to sort by upper and lower case, numbers, and objects by property.
Output redirection with bash
Tags: bash, shell, unix, redirect
Published: 2018-12-13 16:46:53

---
title: Output redirection with bash
published: true
description: Basic redirection of commands output
tags: bash, shell, unix, redirect
---

The command below generates output in different I/O streams: error messages should go to _stderr stream_ and "normal" messages to _stdout stream_. But if you run it in a terminal both streams are written to the screen:

```
$ ls -d /tmp nothing
ls: cannot access 'nothing': No such file or directory
/tmp
```
You can redirect the output to a file. Note that the error message is written in the screen, not in in the file:

```
$ ls -d /tmp nothing > stdout.txt
ls: cannot access 'nothing': No such file or directory
$ cat stdout.txt
/tmp
```
Or you can redirect only the error message:
```
$ ls -d /tmp nothing 2> stderr.txt
/tmp
$ cat stderr.txt
ls: cannot access 'nothing': No such file or directory
```
Also, you can redirect both streams at the same time to _distinct files_:

```
$ ls -d /tmp nothing 2> stderr.txt > stdout.txt
$ cat stderr.txt 
ls: cannot access 'nothing': No such file or directory
$ cat stdout.txt 
/tmp
```
Or you can redirect everything to the _same file_:

```
$ ls -d /tmp nothing &> all.txt
$ cat all.txt 
ls: cannot access 'nothing': No such file or directory
/tmp
```
Another possibility is to redirect stderr to stdout. It can be useful when you are passing data to another command. In the example below, both lines are sent to stdout and _wc_ will count 2 lines:
```
$ ls -d /tmp nothing 2>&1 | wc -l
2

```
Redirecting stdout to stderr is also possible. In this case both lines are sent to stderr that is displayed at the terminal screen, and nothing is sent to stdout, so _wc_ will count 0 lines:
```
$ ls -d /tmp nothing 1>&2 | wc -l
0
ls: cannot access 'nothing': No such file or directory
/tmp
```