teleren/devto huggingface dataset:
Event listeners in Elm
Tags: elm, beginners
Published: 2020-05-28 20:15:57

I am a beginner in Elm and to learn it I have started [ts-converter](https://github.com/mirkoperillo/ts-converter?src=external-dev), a tiny browser extension to convert timestamps in a readable format. This is one of my daily needs.
I want to use what I have learnt from it, sharing some notes on how to manage event listeners in a Elm application.
I'll use `onEnter` event in the examples.

## Scenario 1: Listen for all application events

To capture a key pressed in the whole application we need to introduce a `subscription`

#### What's a subscription ?
A `subscription` is an operation allowing us to register to an external event.
Creating a subscription we say to Elm runtime that we want to do an action when a particular event is spawned. When the runtime captures an event, produces an update message.

```
subscriptions _ =
  onKeyPress keyDecoder
```

A subscription is created on event `onKeyPress` and when this event will be intercepted by the Elm runtime the function `keyCoder` will be invoked.

```
keyDecoder : Decode.Decoder Msg
keyDecoder =
    Decode.map toKey (Decode.field "key" Decode.string)
```

The event object is serialized as a JSON object and its field `key` contains the key pressed value, `Decode.field "key" Decode.string` extracts this number and puts it into a valid Elm value. 
The extracted value is then passed to `toKey` function.

```
toKey : String -> Msg
toKey keyValue =
    case String.uncons keyValue of
        Just ( char, "" ) ->
            CharacterKey char
        _ ->
            ControlKey keyValue
```

`String.uncons` takes a string as a characters array and splits it into its head and tail.
Depending on whether the leading character is an alphanumeric value
or not, produces the related `update` message.

```
CharacterKey k ->
     YOUR CODE
ControlKey k ->
     YOUR CODE
```
The two messages will be managed into the `update` function.

## Scenario 2: Listen for a event bound to a input field

At the moment (v0.19) Elm doesn't support natively `onEnter` event, but it offers a function `on` that permits to create a custom event listener.

```
onEnter: Msg -> Attribute Msg
onEnter msg =
  let 
    isEnter code = 
      if code == 13 then
        Decode.succeed msg
      else
        Decode.fail "not ENTER"
  in
on "keydown" (Decode.andThen isEnter keyCode)
```

With `on "keydown" (Decode.andThen isEnter keyCode)` we'll create a listener on `keydown` event and the Elm runtime will execute `(Decode.andThen isEnter keyCode)` on its capture.
`keyCode` is a bultin function of `Html.Events` module and it returns the value of pressed key as an integer.
`isEnter` checks if key `enter` has been pressed (enter value is 13) producing respectively a message for the `update` function or a failure.

`onEnter` is used into the input field we will listen for events.

`input [ size 20, value (tsToString model.ts), onInput SetTs, onEnter Convert, autofocus True] []`
Ventajas de compartir ruta al viajar
Tags: viaje, carpool, ecuador, compartir
Published: 2020-05-28 20:06:35

Compartir el vehículo, nos ayuda a entrar en una economía colaborativa y como una alternativa amigable para el medio ambiente haciendo viajes eficientes. Ahorrar, es otra ventaja ya que puedes compartir gastos del viaje entre los pasajeros en base a la distancia del recorrido.


Al viajar, tu seguridad es lo mas importante para nosotros. En Go Machin nos tomamos el tiempo necesario para verificar cada perfil de usuario en nuestra plataforma, haciendo todo lo posible para brindar la confianza de saber con quien viajas siempre, cuenta con un sistema de calificación de usuarios y comentarios. 

Es ideal para las personas que viajan frecuentemente de una ciudad a otra en Ecuador.
Why Uclusion is free forever for open source collaborators
Tags: opensource
Published: 2020-05-28 19:53:16

[Uclusion](https://production.uclusion.com/?utm_source=github&utm_medium=blog&utm_campaign=freeforever#signUp) uses a lot of open source software and free forever is our way of giving back. The first hit for “open source asynchronous organization” is [Asynchronous decision-making: Helping remote teams succeed](https://opensource.com/article/17/12/asynchronous-decision-making) written by Bertrand Delacretaz Apache Software Foundation Member and Director. He has three requirements for good open source collaboration:

## Central asynchronous communications channel

Uclusion calls this a workspace. You can see screen shots of example usage on our [home page](https://www.uclusion.com). The only difference is that where Bertrand describes a very general communication tool or even worst case having to use email, Uclusion workspaces are specifically built around deciding on requirements, proposing and getting approval for stories and tracking progress at a glance.

## Consensus-building mechanism

Uclusion offers two mechanisms — Dialogs and Initiatives. Dialogs allow you to propose and vote certainty on a number of alternatives at once. Initiatives are for an up down vote on one idea.

## Case management system

Uclusion is not trying to replace issue trackers and we use Github boards ourselves. However we do distinguish between issues and stories. An issue should be something that has to be fixed — just a matter of when. Also the implementation of an issue should be fairly straight forward. That is to say an issue should not require a lot of collaboration or its a story.

For stories Uclusion has a built in workflow. If you are not ready to do the story yet then edit the workspace description with the new potential requirement. Everyone else will be alerted and automatically see a diff. When you are ready to do the story you can create it and everyone will automatically be notified to vote on whether or not you should do it. If you are uncertain of implementation you can create a dialog within the story.

Then Bertrand says
> *The nine members of ASF’s board of directors make a few dozen decisions at each monthly phone meeting, which last less than two hours. We carefully prepare for these meetings by making most of our decisions asynchronously in advance. This allows us to focus the meeting on the complex or uncertain issues rather than the ones that already have full or partial consensus.*

Shorter or no meetings because we prepared online is how Uclusion operates using our own software. You can sign up for free [here](https://production.uclusion.com/?utm_source=github&utm_medium=blog&utm_campaign=freeforever#signUp). Then if you decide you like it just create an issue with label requestfree in [this repo](https://github.com/Uclusion/uclusion_customer) explaining you are using Uclusion for open source purposes.

*Originally published at [https://github.com](https://github.com/Uclusion/uclusion_customer/blob/master/README.md).*
Unable to use global variables with es6 imports in node
Tags: help, javascript, node, webdev
Published: 2020-05-28 19:44:44

I'm building a CLI that injects some variables into the imported packages for them to use. Normally, I would do something like this


```javascript
const foo=()=>{
   console.log("Hello World");
}
global.foo=foo;
require('./index.js')
```
Where index.js is
```javascript
if(global.foo){
    global.foo();
}
```

But since the latest version of node also supports `.mjs` files that enables es6 imports, this approach won't work as es6 imports don't have access to global.

I cannot use `process.env` as I want to share functions too and add listeners to the variables.

Any help would be appreciated
TerminusDB Webinar - Canary Release of TerminusDB 2.0
Tags: database, newrelease, gitfordata
Published: 2020-05-28 19:24:38

---
title: TerminusDB Webinar - Canary Release of TerminusDB 2.0
published: true
description: We have released the canary release of TerminusDB 2.0 last week. There are many cool features including time travel and version control collaboration features. There may be lot’s of questions about this release, so we will have our CEO Kevin Feeney giving us a tour of it and answer questions about the new release.
tags: database, new release, git for data
---
We have released the canary release of TerminusDB 2.0 last week. There are many cool features including time travel and version control collaboration features. There may be lot’s of questions about this release, so we will have our CEO Kevin Feeney giving us a tour of it and answer questions about the new release.
Fire Alarm Monitoring System 🧯
Tags: java, react, springboot, npm
Published: 2020-05-28 19:14:19

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dvf0o0zeh5kfe64xhc9i.gif)

We were recently allocated group assignments by our university. This system has a web client application where users can view the status of all fire alarm sensors. For each sensor, the web application display whether the fire alarm sensor is active, the location, and the smoke level, (1-10) and the CO2 level (1-10 scale). 

If the smoke level or CO2 level is above 5, then they will be marked in red. The sensor details will be updated every 40 seconds. 🚒

The desktop client application where users can view the same information from a desktop client. The information is refreshed every 30 seconds. 🔥

In this project the administrator can add new fire alarm sensors. An alert will be displayed on the desktop client when the CO2 level or Smoke level is moves to a value greater than 5, of any sensor. An email and an SMS will be sent in such an occasion. 📩

GitHub Repo 📌 {% github Sewvandiii/Fire-Alarm-Monitoring-System %}
Add Quizzes 📃 to your Static Site using this Open Source Web Component 😁😁
Tags: webdev, opensource, showdev, javascript
Published: 2020-05-28 19:12:38

Hi Guys! 🤓

I've created a Web Component for Quiz using Vanilla JS.
I've made it open source for the community.

Also the implementation is dead simple, just like other web components.

So here is how it looks:

![Snap](https://raw.githubusercontent.com/sharadcodes/quizzo_web_component/master/screenshots/snap.png)

### LIVE DEMO
https://sharadcodes.github.io/quizzo_web_component/example/

## How to use ????

Questions are stored in json file that has following format
```json
[
    {
        "que": "Which among the following is not an operating system ?",
        "opt": [
            "Ububtu",
            "MacOS",
            "Windows",
            "Android"
        ],
        "ans": 3
    },
    {
        "que": "Is Windows good",
        "opt": [
            "Yes",
            "No"
        ],
        "ans": 2
    }
]    
```

For more info visit the Repo at https://github.com/sharadcodes/quizzo_web_component 

Just paste the following script in the head or just before the end of the body tag

```html
<script src="https://sharadcodes.github.io/quizzo_web_component/src/quizzo_web_component.js" async></script>
```
Now inside the body paste this

```html
  <!-- add the tag with all attributes -->
    <quizzo-web-comp
      json-file="./ques.json" 
      name="This is a demo quiz"
    />
```

That's it 🤩 .... And you are good to go  !!!!!!

---

## ALL LINKS ARE HERE:
Repo: https://github.com/sharadcodes/quizzo_web_component
Live Demo: https://sharadcodes.github.io/quizzo_web_component/example/
Data Science Incubator (Summer 2020) · Made With ML
Tags: machinelearning, datascience, career
Published: 2020-05-28 18:53:59

👋 Hey everyone, we just launched Made With ML’s non-profit, community-led Data Science Incubator today, where you’ll:

• 🛠 build an end-to-end ML app (with a team or solo)
• 🎥 learn from our guided video series, expert QAs, etc.
• 💻 present on Demo Day - sponsored by Hugging Face, Weights & Biases and others!

https://madewithml.com/programs/ds-incubator-summer-2020/

We wanted to provide students and aspiring data scientists a meaningful experience this summer in light of the sudden cancellation of many internships and jobs. We hope you learn a lot with the community and work on something to get your next opportunity.

This program is open to everyone so please help us spread the word to anyone that might be interested. If you’d like to mentor specific teams, speak about specific topics or get involved in other ways, please reach out to us at hello@madewithml.com

---

So create your free forever account today at https://madewithml.com and if you'd like daily updates, follow us on:
• Twitter: https://twitter.com/madewithml
• LinkedIn: https://www.linkedin.com/company/madewithml/
Introduction to APIs
Tags: beginners, tutorial, api, webdev
Published: 2020-05-28 18:50:04

---
title: Introduction to APIs
published: true
description: Learn all about APIs (Application Programming Interfaces) in this full tutorial for beginners.
tags: beginners, tutorial, api, webdev
---

{% youtube GZvSYJDk-us %}

[Course Notes](https://github.com/craigsdennis/intro-to-apis-course/blob/master/course-notes.md)

Learn all about APIs (Application Programming Interfaces) in this full tutorial for beginners. You will learn what APIs do, why APIs exist, and the many benefits of APIs. APIs are used all the time in programming and web development so it is important to understand how to use them.

You will also get hands-on experience with a few popular web APIs. As long as you know the absolute basics of coding and the web, you'll have no problem following along.
About Android Security
Tags: android
Published: 2020-05-28 18:30:27


Secure an Android Device 

Android consolidates industry-driving security highlights and works with engineers and gadget implementers to protect the Android stage and biological system. A strong security model is basic to empower a fiery biological system of applications and gadgets based close by the Android stage and upheld by cloud administrations. Thus, through its whole improvement lifecycle, Android has been dependent upon a thorough security program. 

Android is intended to be open. Android applications utilize propelled equipment and programming, just as nearby and served information, uncovered through the stage to carry development and incentive to shoppers. To understand that esteem, the stage offers an application domain that ensures the secrecy, respectability, and accessibility of clients, information, applications, the gadget, and the system. 

Making sure about an open stage requires a solid security design and thorough security programs. Android was planned with multilayered security that is adaptable enough to help an open stage while as yet ensuring all clients of the stage. For data about detailing security issues and the update procedure, see Security Updates and Resources. 

Android is intended for engineers. Security controls were intended to lessen the weight on designers. Security-sagacious engineers can without much of a stretch work with and depend on adaptable security controls. Designers less acquainted with security are ensured by safe defaults. 

Notwithstanding giving a steady stage to expand upon, Android gives extra help to designers in various manners. The Android security group searches for potential vulnerabilities in applications and proposes approaches to fix those issues. For gadgets with Google Play, Play Services conveys security refreshes for basic programming libraries, for example, OpenSSL, which is utilized to make sure about application correspondences. Android security discharged a device for testing SSL (nogotofail) that assists designers with discovering potential security issues on.
Gatsby GraphQL Query
Published: 2020-05-28 18:13:25

Hi, Can I use the query graphql with "type"? Example:

export const pageQuery = graphql`
  {
    gcms {
      type(name: "Locale") {
        enumValues {
          name
        }
      }
    }
  }
`;

But happens this error:
Cannot query field "__type" on type "GraphCMS".

Why?
Add Styles To Templates - Building SaaS #42
Tags: python, django, saas
Published: 2020-05-28 18:08:55

{% youtube XMVLpZS1mCc %}

In this episode, I added a CSS framework, Tailwind CSS.  After working through some issues with the log out feature, we started to style the base template of the site.

To stay true to my "make the minimum possible thing that will work," I added Tailwind CSS from a CDN, content delivery network.

```html
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
  rel="stylesheet">
```

I described how Tailwind's utility-first approach makes designing sites a breeze because of the composition of small CSS classes.

After adding the CSS, I explained why the styles changed so that everything looked very plain.  This conversation explained CSS resets.

We planned to add styles to the login pages of the site, but I ran into a weird behavior.  The site was not logging out.  After digging into things, we figured out that the problem was using a `GET` request to log out.  `django-allauth` does not want to allow that because it modifies server state.

After figuring out the issue, we did some basic styling of the base template.

This article first appeared on [mattlayman.com](https://www.mattlayman.com/building-saas/add-styles/).
Classmates: Connect with your friends using code!
Tags: beginners, kids, tutorial, homeschooling
Published: 2020-05-28 17:55:25

---
title: Classmates: Connect with your friends using code!
published: true
description: Hattie and Craig help you connect with friends you are missing by building a telephone application
tags: beginners, kids, tutorial, homeschooling
---
[Teacher's Notes](https://github.com/TwilioDevEd/classmates-twiml)

Are you missing your friends? 😿 My daughter Hattie was too, so we together we built an application that connects everyone together on the phone at the same time! ☎️ 🙌

All you need is a web browser for this free and inspiring hands-on course! If you've got kiddos in your life, this is a fun code-along project for the code curious! 👨‍👦 👩‍👦 👨‍👧 👩‍👧

We can't wait to see what you build!
How to get beginner friendly issues to contribute to open source on Github?
Tags: github, opensource
Published: 2020-05-28 17:53:12

If you are a person who wants to contribute to open source, you are taking an amazing step further into an exciting path ahead.😍

Simple steps to get started with open source contribution -

1. chose a language or technology you are comfortable with(say, Python).
2. search for an open source repository on GitHub based on that(say, tensorflow).
3. go to issues section of the repository.❗️❗️
4. search for issues that have tags like "first-timers-only","good-first-issue".
5. comment on an issue, so that the owner of the repository assigns it to you!👩🏻‍💻
6. now you can officially start working on the issue!🤩
7. After you have solved the issue, make a pull request.💯
8. Wait for the feedback, and be patient till your pull request gets merged.😇
9. Celebrate! because you just made your successful open source contribution!🎉

PS- Don't worry if you will be skilled enough to solve the issue, people are really friendly and will help you! 🌸💟

PPS- if you want to easily find beginner friendly issues on Github, follow [this profile on twitter](https://twitter.com/1stContribution). 📟

keep coding, keep contributing! 💖
Objects
Tags: javascript
Published: 2020-05-28 17:53:08

What is an object? It is an entity within the browser or web that has properties that define it and methods that can be acted upon it.
What is a property? A defining characteristic of an object. 
What is a method? An action that can be performed on an object.
Which are the different ways of referencing objects:
Tag name document.getElementByTagName(tag)
Class name document.getElementByClassName(class)
Name document.getElementByName(name)
ID document.getElementById(id)
CSS Wavy Text Generator
Tags: wavy, wavytext, css, generator
Published: 2020-05-28 17:45:57

Did you know it's possible to create wavy text with CSS?

In this tutorial I will show you how to use CSS for creating an awesome wavy distorted text with just a few lines of code.

##The HTML Code

First we will need the text element that we will transform into a wavy text effect. Let's put it in a `h1` tag like this:

```html
<h1 class="wavy-text">Wavy Text</h1>
```

We will use the `wavy-text` CSS class name to create the effect using a SVG filter.

## SVG Wavy Text using `feTurbulence` and `feDisplacementMap`

We’ll use SVG turbulence filter. Basically it’s a filter that creates a turbulence effect on any element which is very useful for creating water and cloud effect. 

In our case we will distort the text element with using the SVG turbulence filter together with the displacement filter. Here's the SVG filters definition:

```html
<svg width="100%" height="100%" style="display:none;">
 <defs>
  <filter id="wavy" filterUnits="userSpaceOnUse" x="0" y="0">
   <feTurbulence id="wave-animation" numOctaves="1" seed="1" baseFrequency="0 0.0645034">
   </feTurbulence>
   <feDisplacementMap scale="10" in="SourceGraphic"></feDisplacementMap>
  </filter>
  <animate xlink:href="#wave-animation" 
    attributeName="baseFrequency" 
    dur="3s" 
    keyTimes="0;0.5;1" 
    values="0.0 0.04;0.0 0.07;0.0 0.04"    
    repeatCount="indefinite"></animate>
</defs>
</svg>
```

So, what do we have here?

We combine `feTurbulence` and `feDisplacementMap` to generate the wavy text effect. Then, we animate the effect in an infinite loop of 3 seconds in which we vary the `baseFrequency` of the turbulence filter.

We apply it to our HTML element using the CSS `filter` property like this:

```css
	.wavy-text{
	  filter:url('#wavy');
	}
```

Here's the effect we get:

![Wavy Text Generator](https://dev-to-uploads.s3.amazonaws.com/i/8cgsnv0mb793fbg19tfh.gif)

## What Can You Do With This Wavy Text Generator?

Using this simple CSS wavy filter you can easily implement an online generator like this [wavy text generator](http://www.coding-dude.com/wp/wavy-text-generator/) on [coding-dude.com](http://www.coding-dude.com)

Users can input their own text even putting in [emojis and text symbols](https://www.mockofun.com/text-symbols/) like these: ✬❀☎❆🤠👽🖖 and then copy/paste the wavy text into their own pages.

![wavy font](https://dev-to-uploads.s3.amazonaws.com/i/6cji5g1wfpxd6yzifkn2.jpg)

You can even try using webfonts that are already a bit wavy, like this cool free [wavy font](https://www.photoshopsupply.com/layer-styles/wavy-font) from [PhotoshopSupply](https://www.photoshopsupply.com/)