teleren/devto huggingface dataset:
Contravariants
Tags: haskell, types, functional
Published: 2019-12-18 12:49:53

Normal functors in Haskell are pretty easy to understand:

```haskell
class Functor f where
  fmap :: (a -> b) -> f a -> f b
```

This just says that if you know how to convert an `a` into a `b`, then you can also convert a functor of `a` into a functor of `b`. For example, `String.length` is a `String -> Int` function, so it can be used to convert a list of strings into a list of integers: `[String] -> [Int]`. This sort of garden-variety functor is called "covariant".

Contravariant functors look similar, but are used to preprocess input before it reaches a function:

```haskell
-- like a normal functor, but "f b" and "f a" are reversed
class Contravariant f where
  contramap :: (a -> b) -> f b -> f a
```

`f b` and `f a` are contravariants, but you can think of them as functions that take a `b` and an `a` as input, respectively:

```haskell
-- contravariant instance for raw functions
contramap :: (a -> b) -> (b -> x) -> (a -> x)
```

This says that if you know how to convert an `a` into a `b`, and you have a function that takes a `b` as input, then you can create a function that takes an `a` as input instead. Easy peasy.

Now that you understand covariance and contravariance, you can combine them to get a [profunctor](https://dev.to/shimmer/profunctors-36dl).
What are some real-world scenarios where redux is needed?
Tags: discuss, react
Published: 2019-12-18 12:38:40

I'm struggling to see how redux is helpful. In pretty much every case state should be controlled by its own component and not made global (like redux does). There may be some exceptions like a user or shopping cart object or sth like that, but those can be solved with just one context provider. 
Has anyone worked on a codebase (or does anyone know of an example) that really needs redux?
How to create an icon library in Angular
Tags: javascript, icons, angular, webdev
Published: 2019-12-19 18:07:24

---
title: How to create an icon library in Angular
published: true
date: 2019-12-18 12:25:10 UTC
tags: javascript,icons,angular,web-development
canonical_url: https://medium.com/angular-in-depth/how-to-create-an-icon-library-in-angular-4f8863d95a
---

#### The ultimate guide to create your own flexible and tree-shakable SVG icon library

![](https://cdn-images-1.medium.com/max/1024/1*Ur2LVHkzlP8HnUxaIas0mg.png)

Nearly every SPA uses icons. Usually, we use icons delivered by our UI framework, such as Material, or we take icons from a dedicated icon library like font-awesome.

But, in some cases, the icons need to match our brand. Therefore, the day may come where a designer or a product owner asks you to provide a custom icon library.

[Find out how to implement a SVG icon library in a tree shakable manner with Angular](https://medium.com/angular-in-depth/how-to-create-an-icon-library-in-angular-4f8863d95a)
How to create android and iOS applications using Quasar framework
Tags: codeguru, vue, quasarframework, aws
Published: 2019-12-18 12:18:29

{% youtube As5lzor2NQ8 %} 

Hello code guru's welcome back. 

In this video tutorial we will see how to create android and iOS applications using Quasar framework. We will go in depth in setting up environment for both android and iOS applications.

If you like more content from us please do consider supporting us on Patreon at https://www.patreon.com/codeguru

Please do not forget to provide your feedback  or any topic suggestion in the below comments section.

You can also find us on 
twitter   : https://twitter.com/codeguru_io
facebook  : https://www.facebook.com/codeguru.io
instagram : https://www.instagram.com/codeguru.io/
Youtube   : https://www.youtube.com/c/codeguru_io
Microsoft Template for Sale Record
Tags: microsofttemplate
Published: 2019-12-18 12:08:26

Excel templates of various formats are formulated here for sales appointments. Scheduling templates and budgeting templates are also added here to make management easy for your business. Scheduling appointments is a complicated and confusing process if you are dealing with multiple clients and customers.

However, this process requires your fundamental focus as it is required for customer satisfaction and clients dealing with your business. To ensure your confidence different templates are added here frequently.

Appointments and meetings attendance sheet template are common as they are required to ensure proper functions and operations of the business. 

Ignorance of meetings and appointments can result in obstacles that can affect the sale volume of products directly affecting the profit-making capability of the business. For healthy and smooth relationships these templates are excellent.

https://www.excel124.net/

Format of Excel Template for Sales Appointment

Before selecting the columns in the template it is important to observe the time interval for which we are creating it.
1.	It is important to observe public and private holidays during this time interval so that accurate sales appointment sheet can be selected.
2.	Time is usually added in half an hour format or you can change it into one hour according to your business type.
3.	Busy hours can be marked red so that appointments are scheduled carefully.

Excel templates to record sales on a daily basis is also good practice of some business therefore daily sales recording is quite easy now with the use of excel templates. Products are added in the columns and selling of these products in units is recorded on these sheets.

Meeting Minutes Excel Template

Some businesses are still using the traditional methods of booking appointments however they are subjected to mistakes especially overbooking in busy hours causing stress for the clients and sales representatives. Excel Template Sales Appointment for other purposes is also added here frequently.
How to create decorative section dividers in CSS
Tags: css, tutorial, svg, webdev
Published: 2019-12-18 11:51:43

In the first part of this tutorial, you'll learn how to create a vector divider in Illustrator using brushes and effects. In the second part, you'll learn to integrate the divider into an HTML+CSS project.

Final result:
{% codepen https://codepen.io/codyhouse/pen/Powbyma %}

To follow along the tutorial, fork this pen on Codepen:
🕹 [codepen.io/codyhouse/pen/Wqvpmm](https://codepen.io/codyhouse/pen/Wqvpmm)

or download CodyFrame on Github:
- 📦 Framework [github.com/CodyHouse/codyhouse-framework](https://github.com/CodyHouse/codyhouse-framework)
- 🎨 A1 Theme [github.com/CodyHouse/a1-codyframe-theme](https://github.com/CodyHouse/a1-codyframe-theme)

Here's the video tutorial:
{% youtube GUEOmFNkqTo %}

Originally published on [CodySchool](https://codyhouse.co/tutorials)
Producing valuable content for developers - Interview with Martin Gontovnikas from Auth0
Tags: podcast
Published: 2019-12-18 11:26:19

Trick question of the week:
Is developer marketing the dark side?

Looks like we will be continuing for a second week with parallels who could make Freakonomics fans jealous.

In our latest episode, we discuss the value of content. Marketing, by default, involves selling (aka the dark side) but there are more ways to go than aggressive tactics or excessive spending on paid ads. Try content for example. By producing high-quality content, you can stand out as a thought-leader in your area. And this will bring more high-quality leads than any ad.

Up to what point? Up to the point that content accounts for 95% of your company's revenue. At least that is what happened to Marting Gontovnikas.  

Should dev marketing people be developers?
A favourite question in the field. Martin says yes, but if they don't, they should spend some time with the product teams to get a batter understanding of the product. 

Another great episode in Season 2, full of useful....well, content! 

Martin Gontovnikas is the VP of Marketing and Product at Auth0. He is a software engineer that now works on Marketing. Yes, you heard right. He found a way to combine his two passions and apply his engineering thinking model to marketing.

Listen to the full episode at www.developermarketingpodcast.com or in the platform of your choice.
Setters on immutable objects?
Tags: discuss, codequality, watercooler
Published: 2019-12-18 11:23:42

Hello everyone! Recently I encountered a class which was defined to produce immutable objects. It concerned a class which encompassed a time period, with a start date and an optional end date. However to my surprise I discovered the class also had a few setter methods.
Now I have to acknowledge that the setter methods did return a new instance and left the old object in tact (as is should!), but still something inside me found it strange to define these methods as setters. If someone by accident misses the immutable character of the class this could quickly lead to strange behaviour in the application.

Basically my question is, how do you feel about setter methods on a class defined to produce immutable objects?
Introduction to AI at the Edge — A Beginner’s Perspective
Published: 2019-12-18 11:17:47

Before we jump on to Talk About , Edge Computing and AI at the Whole , let’s first talk about the Internet of Things Platform and its Relation with Cloud , so that we can derive differences between the Cloud Computing Platform and Edge Computing Platform .

Let’s first Talk About the Layman Meaning of Internet of Things . If we look up in the Dictionary , IoT is defined as Follows :

**Interconnection of Computing Devices embedded in Everyday Things via the Internet** 

Essentially , it is everyday things connected to the Internet and hence , Internet of Things . Now , in this Path of Interconnection there are 3 interacting Units :

1).There is a Network of Objects that Connected Wired or Wirelessly to the Internet , and these Objects can be anything ranging from Appliances , Cars etc

2).Next , there are Gateways with access bridges between these Devices and the Internet .

3).And , the Final thing is the Cloud where we want to store the Information which we are receiving from the Devices for processing it and then analyzing it to Derive Intelligence .

Now , the Data that is being Generated by these IoT Devices is increasing Exponentially , and the Cloud Platform is not sufficient enough to store this Data . So , we need a substitute for this to combat this problem .

**Now , here comes in play the Edge Computing Platform . There is an emergent need for running Local Services close to the Devices itself , to the Edge Devices itself .**


Now , lets dwell into What do we mean by this Term “Intelligence at the Edge” . Let’s take some Example Use Cases :


Suppose you have a Camera pointed at your Parking Lot , where you are using the Camera to count in Real Time , the number of Cars that are Parked in the Parking Lot . It isn’t really cost effective and it doesn’t make any sense to send every frame of the Video from the Camera to Cloud to Analyze and count the Number of Cars that are Parked in the Parking Lot .

What if we could do it in the Camera itself ?

If you are using Object Detection using your Camera . For Privacy Reasons , you may not want to send your Data to the Cloud , but you would want to run some of those analyses and intelligence on the Device itself .

So these above two reasons are the major reasons for Using Intelligence at the Edge .
Time to self-upgrade
Published: 2019-12-18 11:12:52

My Twitter feed says it all:

{% twitter 1207102710744526850 %}

{% twitter 1207104150879776768 %}

# A journey is on the roadmap

As a rather introvert person, I've seldom taken the time to broadcast the highs and lows of my life. However, focusing too much on projects won't make you a better person if you don't devote some time to yourself and to let others know where you are. 

The only constant in life is change and below are the things I'm about to change on the journey I'm about to undertake. 

## Move!

First off, my life partner and I will leave the comfort of our home town and live as remote workers, at least within a reasonable timeframe. The first stop of the journey brings us to Silicon Valley. We want to see how things move, how things breathe and what can we learn from the people that have shaped today's digital society.

After touring by the West Coast, we'd like to deep dive on the Eastern New York City. Next, Australia might be on the horizon, but the coming weeks will tell where we move next.

## Talk!

Instead of keeping things for myself and ourselves, I won't hesitate to [share thoughts, experiences and findings](https://twitter.com/CrunchySpace). 

## Share!

This one is for tech. I feel so grateful for the insane amount of knowledge and wisdom that I've been given thanks to the internet community. Not only it has made me a better engineer, but also a better and free person. 

I believe that my Karmic debt deserves the time and effort to try to give out a bit of what I've been given myself. 
This means that this account will turn into a publication. And it also means, that it will be the basis of all the topics that I'm eager to talk about and tell everyone 😃

If you spend your life waiting for something to happen, the only thing you'll do is letting your life pass. 

The future is now. Go make it happen. 

Until very soon!

![Colorado](https://thepracticaldev.s3.amazonaws.com/i/k5418vhhlj802fko4ewn.jpeg)
What was your first project?
Tags: watercooler, discuss
Published: 2019-12-18 10:34:24

**What was the first project you did?** Either personal or professional, and not counting course and degree exercises.



Mine was an html preprocessor, I did it just after finishing my degree just for fun, it's not even finished but it was a good start.

It's not the best code in the world, but for the time I was quite proud:
https://github.com/nombrekeff/STML
Code Online - My Own Project
Tags: javascript, angular
Published: 2019-12-18 10:06:48

# JS Online Editor:


A javascript online editor.

An editor developed by angular, no server support.

Online Demo: [Demo](https://renhongl.github.io/code-online#/)


<img src="https://renhongl.github.io/code-online/assets/images/v5.png" alt="example2"/>

<img src="https://renhongl.github.io/code-online/assets/images/v4.png" alt="example2"/>

<img src="https://renhongl.github.io/code-online/assets/images/v1.png" alt="example1"/>

<img src="https://renhongl.github.io/code-online/assets/images/v2.png" alt="example2"/>

# Docs

- [简体中文](https://github.com/renhongl/code-online)
- [English](https://github.com/renhongl/code-online/blob/master/docs/english.md)

# New Features



- Support switch view
- Support display on full screen and update automaticly
- Support export source code of this page
- Editor enhence
- Console visualization
- Demo explore

You Can Also:

- Add JS and Css library to create prolific application
- Use newest syntax in babel environment

# Using Tech

Technology used as below:

- [Angular]() - Web enhenced library
- [CodeMirror]() - Versatile text edior
- [GitPages]() - Code store and deploy
- [Travis]() - CICD

# Installation

Requires [Node.js]() v8+ to run.

- Install dependence: `npm install`
- Build app: `npm run build`

# Todos

- <input type="checkbox" disabled/>Mutiple file project support
- <input type="checkbox" disabled/>Home page show demos, people can push demo by commit code

# License

MIT
[Webinaire Waves] Consensus, comptes et transactions - le 25 janvier 2020 à midi
Tags: wavesplatform, blockchain, ride, smartcontract
Published: 2019-12-18 10:05:30

Pour ce second wébinaire nous commencerons du début avec une présentation technique de la blockchain Waves (consensus, protocole etc), nous verront en détail les comptes Waves puis nous passerons en revue l'ensemble des 15 transactions existantes avec du live coding pour voir le tout en application.

Ce wébinaire sera donné par Christophe Verdot, Ambassadeur Waves et développeur de Signature Chain.

WEBINAR ENTIEREMENT EN FRANCAIS

Le wébinaire durera de 45 minutes à 1 heure, il se fera sur youtube en live. https://www.youtube.com/channel/UC2DS9ktTKWGW3NHHV2Ja3_A

Niveau : Tous niveau accepté, une compréhension basique de la programmation et recommandé. La démo sera faite en Javascript.

WEBINAIRE PRECEDENT :
https://www.youtube.com/watch?v=jzYlas6WMKQ

N'hésitez pas à nous suivre sur les réseaux sociaux en attendant :

Telegram : https://t.me/wavesdappsFR
Twitter : https://twitter.com/WavesDevFr
Youtube : https://www.youtube.com/channel/UC2DS9ktTKWGW3NHHV2Ja3_A
Should we ditch Redux for Context Hook?
Tags: discuss, react, redux, javascript
Published: 2019-12-18 09:37:05

###Is context gonna end Redux's career?

With the React Hooks, problems are being solve! To use the hooks, we need to develop our app using functional components. We don't need to install additional package just to handle global states.

Example of functional component

```javascript
function app(){
 return ()
}

```

But is the Context hook enough to bury the Redux for good in the near future? 

* What would be the advantage of Redux and Context? 

It would be awesome if we could discuss it here. Opinions are welcome!
Javascript - misconception of this
Tags: javascript, tutorial, react
Published: 2019-12-18 09:32:20

Whether you are a seasoned engineer or new to coding, 1 common error you are likely to come across alot is 'Cannot read the value undefined of this'

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ph0md9emuswsleh98cx8.jpg)

It is a very confusing concept that puts many people off, so I'll be trying to explain concisely what this is

Take the following for example
```javascript
function getLetters(a, b) {
let obj = {firstLetter: a, secondLetter: b} 
return (this.obj)
}

let display = getLetters(a, b)
```
We would expect display to equals to {a, b} right?
well no, what you would get is undefined

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b5zu5lctqi8z83x43w3b.png)

Lets see another example
```javascript
let shoppingList = {
fruits: 'banana', 
cake: 'chocolate'
}
let getItems= function() {
console.log(this.fruits + '' + this.cake)
} 

let result = getItems(fruits, cake);
```javascript
We would expect results to equal 'banana chocolate' right?
Nope what you get is an error

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xdmi7z7l2lf927mry2c9.png)

So what exactly is wrong? Well this is not what you think this is, one might think in the first example that this would refer to the obj and the fruit and cake keys in the second example but it does not

This actually gets its value at the function invocation, meaning the binding of a value happens when you invoke the function, and the object to the left of the invocation is what gets binded to the value of this 

Illustration 
```javascript
let wishlist = {games: 'Xbox Scarlett'}

let viewWishlist = function (games) {
return this.games;
}

let result = wishList.viewWishList('PS5')
```javascript
In this scenario, what will we expect the value of result to be? Well if you guessed 'Xbox Scarlett' you are absolutely right, the value of this was binded to the object that was invoked with the function, but you might ask, hey Williams, what if we don't call the function with a value to the left of the dot, what then becomes the value of this? Good question

The value of this in this situation will the global object, why? Because our rule still applies, what is to the left of the function invocation viewWishlist()? You can't see it but the function is actually being invoked with global object. Which is why the values of this is being binded to the global object

Now that that's out of the way, you might be wondering, hey Williams, what if I want to tell my function the object I want to be binded with the value of this, well you call the function with a call or apply function and pass the value you want to be binded to this as the first argument 

```javascript
viewWishList.call(objToBind, args)
```
So here the value of this is going to be binded to the object objToBind. 

I hope with my illustrations I've been able to explain to you what this means and how to use it in your codes :)
How to save a draft in Ghost
Tags: ghost
Published: 2021-01-08 10:47:39

---
title: How to save a draft in Ghost
published: true
date: 2019-12-18 09:14:00 UTC
tags: ghost
canonical_url: https://www.solarwinter.net/how-to-save-a-draft-in-ghost/
---

I searched thinking it would bring up an obvious hit in DuckDuckGo/Google/Bing/whatever, but it didn't.

So - for future reference, and hopefully saving you some time - here's one way:

- Windows - CTRL+S
- Mac - Command+S

There may be other methods - and Ghost is meant to auto-save drafts - but those do work.
How do I get a subcomponent value while referring to the main component?
Tags: help
Published: 2019-12-18 08:48:41

So I have a component containing an input, and I need to access the value of this input through the main component like this:
````
//component declaration:
<MDTextField label='Password' type='password' ref='passwordField'/>

//reffing:
this.refs.passwordField
```

Can I do this in the first place? And if I can, how do I do this?

## Code ##

```
const MDTextField = props => {
    PropTypes.checkPropTypes(MDTextField.propTypes, props, 'prop', 'MDTextField');
    const [isFocused, setFocused] = useState(false);
    const [isEmpty, setEmpty] = useState(true);
    const error = props.error;
    const type = props.type.toLowerCase();
    if(!type.match(/^(email|text|password|search)$/))
        throw "Invalid type. Type must be either email, text, password or search."
    console.log('error: ' + error + 'focus: ' + isFocused);
    const _setFocus = () => {
        setFocused(true);
    };
    const _setUnfocus = () => {
        setFocused(false);
    };
    const _handleChange = e => {
        setEmpty(e.target.value.length > 0 ? false : true);
    };
    return (
        <div
        {...props}
        style={{borderColor: props.error ? "rgb(176, 0, 32)" : props.color && isFocused ? props.color : ""}}
        className={`${props.outlined ? style.MDTextFieldOutlined : style.MDTextField} ${props.outlined ? palette.MDTextFieldOutlined : palette.MDTextField} ${props.className ? props.className : ''}`}
        onFocus={_setFocus}
        onBlur={_setUnfocus}
        >
        <label
            className={`${style.Label} ${palette.Label}`}
            style={{
            color: error ? "rgb(176, 0, 32)" : props.accentColor && isFocused ? props.accentColor : "",
            transform: isEmpty ? "" : `translateY(-${props.outlined ? "50" : "50"}%) scale(.75)`
            }}
        >
            {(props.label ? props.label : '') + (error ? "*" : "")}
        </label>
        <span className={style.InputWrapper}>
            <input
            style={{caretColor: error ? "rgb(176, 0, 32)" : (props.accentColor ? props.accentColor : "")}}
            className={`${style.TextInput} ${palette.TextInput}`}
            onChange={_handleChange}
            type={type}
            />
        </span>
        </div>
    );
};
```