teleren/devto huggingface dataset:
impl Trait for Fn
Tags: rust
Published: 2019-03-31 15:23:33

---
title: impl Trait for Fn
published: true
description: 
tags: Rust
---

用ws-rs的时候，看demo：
```rust
connect(HUOBI, |out| {
        out.send(r#"{"event":"addChannel","channel":"ltcbtc_depth"}"#);

        move |msg| {
            println!("Client got message '{}'. ", msg);
            out.close(CloseCode::Normal)
        }
    });
```

后面返回个 closure，开始以为是啥奇怪的语法呢，msg就拿到了服务端发送的东西，好神奇！

看connect代码:
```rust
pub fn connect<U, F, H>(url: U, factory: F) -> Result<()>
where
    U: Borrow<str>,
    F: FnMut(Sender) -> H,
    H: Handler,
{
    let mut ws = WebSocket::new(factory)?;
    let parsed = url::Url::parse(url.borrow()).map_err(|err| {
        Error::new(
            ErrorKind::Internal,
            format!("Unable to parse {} as url due to {:?}", url.borrow(), err),
        )
    })?;
    ws.connect(parsed)?;
    ws.run()?;
    Ok(())
}
```
我们输入的应该是个 factory，然后通过factory创建了ws。
我们再看看factory定义

```rust
/// A trait for creating new WebSocket handlers.
pub trait Factory {
    type Handler: Handler;

    fn connection_made(&mut self, _: Sender) -> Self::Handler;

    #[inline]
    fn on_shutdown(&mut self) {
        debug!("Factory received WebSocket shutdown request.");
    }

    #[inline]
    fn client_connected(&mut self, ws: Sender) -> Self::Handler {
        self.connection_made(ws)
    }

    #[inline]
    fn server_connected(&mut self, ws: Sender) -> Self::Handler {
        self.connection_made(ws)
    }
  
    #[inline]
    fn connection_lost(&mut self, _: Self::Handler) {}
}

```
但是我们输入的是个closure啊？？？

再看看我们输入函数在where的限定
```rust
F: FnMut(Sender) -> H
H: Handler
```
输入是个Sender，返回是个Handler，所以我们demo里面的out是个Sender，返回的
```rust
move |msg| {
            println!("Client got message '{}'. ", msg);
            out.close(CloseCode::Normal)
        }
```
是个Handler.

继续疑问：我输入是个函数呀，怎么就符合Factory这个呢

看看Factory trait里面
```rust
impl<F, H> Factory for F
where
    H: Handler,
    F: FnMut(Sender) -> H,
{
    type Handler = H;

    fn connection_made(&mut self, out: Sender) -> H {
        self(out)
    }
}
```
他给 FnMut(Sender) -> H实现了Factory trait，connection_made也是Factory trait里面唯一没有默认实现的，所以当connection创建之后，就调用我们的这个函数，把out给他，并返回一个Handler。

OK到这儿就只有一个问题了，我们返回的是个closuzre啊，同理。。。也是给这个closuzre实现了Handler trait，看看代码

```rust
impl<F> Handler for F
where
    F: Fn(Message) -> Result<()>,
{
    fn on_message(&mut self, msg: Message) -> Result<()> {
        self(msg)
    }
}
```
同上，on_message也是Handler唯一没有默认实现的了，所以这里这个等于
```rust
        move |msg| {
            println!("Client got message '{}'. ", msg);
            out.close(CloseCode::Normal)
        }
```
Quick SSL with Let's Encrypt
Tags: letsencrypt, beginners, devops, ssl
Published: 2019-03-31 14:48:50

---
title: Quick SSL with Let's Encrypt
published: true
tags: Let's Encrypt,Beginner,DevOps,SSL
canonical_url: 
---

 ![Quick SSL with Let's Encrypt](https://images.unsplash.com/photo-1526374965328-7f61d4dc18c5?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ)

Look, I get it...there is no shortage of posts about using Let's Encrypt in almost every imaginable environment.

However, when it came to a situation I had recently, there was nothing...so I'm going to add it to the pile.

## The Problem

I'm going to break this one down into an order of operations:

- I have two servers behind a load balancer.
- One of the servers has been tasked with renewing the cert from Let's Encrypt and copying it up to the load balancer.
- For whatever reason, that fails and the cert expires.
- This is compounded by the fact that due to a recent reformat of my machine, I don't have the ability to SSH into either server.

_What a way to start the day, eh?_

## The Solution

Since I still have control over DNS, I'll use the `dns challenge` for Let's Encrypt to create a cert for a specified domain name.

```
sudo certbot -d <domain-name> --manual --preferred-challenges dns certonly
```

This command will step you through setting up the certificate and then will provide you with a TXT record and subdomain to add to your DNS records. Once you've verified those changes have gone through, you can complete the process and the certificate and key will be stored to be copied to your load balancer.

It's super handy to be able to do this in a lot of cases such as testing out an idea before deploying it.

I hope this helps someone down the road like it has helped me!
PythonDev to GameDev
Tags: python, gamedev
Published: 2019-03-31 13:32:23

---
title: PythonDev to GameDev
published: true
description: I'm currently working as a Python developer, but I'm thinking of changing my career path and get into game development. Would love to have some suggestions on how to go about it. Also, I've been researching a bit and came across Unity and Unreal engines. Which one should I begin with?
tags: python, gamedev
---
I created a JavaScript free portfolio
Tags: portfolioweb
Published: 2019-03-31 13:14:24

---
title: I created a JavaScript free portfolio
published: true
description: How I came out to make my portfolio
tags: portfolio web 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/jdatfxpk3fd6qhxs2wah.png
canonical_url: https://hamza-tam.gitlab.io
---


[Visit my portfolio](https://hamza-tam.gitlab.io)

I always wanted to make a portfolio, I always saw as the medium by which I could showcase my work and my skills. So I wanted it to be a true representation of how I work.

I tried a lot of concepts, build five portfolios before throwing them to the trash can, and emptying it. Finally, I thought what would define how I love making software. Three worlds came out: simple, minimal, beautiful. This is how my portfolio needed to be.

##Simple

The simplicity came from making from it's structure, it's layout, the choice of the technologies used in it. Why would I use JavaScript if everything that I wanted to do could be done using plain CSS. Why would I use frameworks like Bootstrap or foundation, if I could handle everything myself.

## Minimal

In the choice of the information that it provides, the choice of colors and design. Basically, it's overall spirit.

## Beautiful

In this case, this is a subjective matter, but looking at the current design trends, and some award winning portfolios. I think describing it as beautiful fits it.

I am not done making it, there is still a lot of work to be done, I have a lot of projects to add and things to tweak. But I judged that it has reached the point where it could be published. So I thought I would submit it to the people of this wonderful community to seek their opinion and critic.
How do you deal with stress?
Tags: discuss
Published: 2019-03-31 13:07:38

![from unsplash](https://images.unsplash.com/photo-1437623889155-075d40e2e59f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80)
Dragula: A free stock images tool on steroids 🦇
Tags: githunt, showdev, webdev
Published: 2019-03-31 11:44:14

---
title: Dragula: A free stock images tool on steroids 🦇
published: true
description: 
tags: githunt, showdev, webdev
cover_image: https://camo.githubusercontent.com/9fdd3361fd5e2447f8a515a45bdbf4242a082f77/68747470733a2f2f692e696d6775722e636f6d2f32345a774b37752e706e67
---

I just released Dragula on [Product Hunt](https://www.producthunt.com/posts/dragula-2) and I need the support of my dev family. So here I am:

![](https://media.giphy.com/media/Hld9vKjLk3irC/giphy.gif)  

#### What is Dragula?

Dragula is a simple power-tool that lets you easily drag-n-drop Unsplash Stock Images anywhere on your screen!

![](https://camo.githubusercontent.com/69834ebb9ba8256a32d878c6a22dfada2de74579/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f6b356c62326a6f3869346948786d574c44652f67697068792e676966)

#### What can you do with it?

***1) Search with keywords***

![](https://camo.githubusercontent.com/547f1ef57131fd4208cfd8d0c362154e3cdd6b80/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f316b54496c30534f4d733961456d45586c622f67697068792e676966)

***2) Download images***

![](https://camo.githubusercontent.com/14b0e4b3636d8b289aee7b36c9d56084598df8c7/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f3746676f4a636271544c66414a717a6d73322f67697068792e676966)

***3) Use Cropped or Uncropped Original Images***

![](https://camo.githubusercontent.com/575f73b1b3acf33b777b1fcf307ba9a8907e6539/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f394d494954764a49336e61377454333556412f67697068792e676966)

***4) Copy Link or Markdown***

*Note: Markdown feature made especially for Developers and Dev.to*

![](https://camo.githubusercontent.com/9daeffb125235402391e39f25747fb7145461e3a/68747470733a2f2f6d656469612e67697068792e636f6d2f6d656469612f64376f38495864737077526d7358523743702f67697068792e676966)

#### And the best thing about it?

***It's Open Source and Free.***
{% github sarthology/dragula %}


#### How can you help?

Well, apart from contributing, here are a few things you can do:

***1. [Download for macOS](https://github.com/sarthology/dragula/releases/download/v1.0.2/Dragula-1.0.2.dmg) and have fun.***
***2. [Download for Windows](https://github.com/sarthology/dragula/releases/download/v1.0.2/dragula-setup-1.0.2.exe) and have fun. 😃***
***3. [Tweet](https://twitter.com/sarthology) me, any feature you want.***
***4. Give feedback for [Dragula](https://www.producthunt.com/posts/dragula-2) on Product Hunt.***

Let me know in the comments section what you think about it, and feel free to contribute. You guys have always been supportive. Please support me this time, too. Love you all! 

![](https://media.giphy.com/media/AeWoyE3ZT90YM/giphy.gif)
My free software and open source activities of March 2019
Tags: classicpress, mozilla, opensource
Published: 2019-03-31 13:11:14

---
title: My free software and open source activities of March 2019
published: true
tags: ClassicPress,Mozilla,Open Source
canonical_url: https://daniele.tech/2019/03/my-free-software-and-open-source-activities-of-march-2019/
---
A lot of patch this month and you? [...]

[Read More...](https://daniele.tech/2019/03/my-free-software-and-open-source-activities-of-march-2019/)

The post [My free software and open source activities of March 2019](https://daniele.tech/2019/03/my-free-software-and-open-source-activities-of-march-2019/) appeared first on [Daniele Mte90 Scasciafratte](https://daniele.tech/eng).
Creating your Blog using GatsbyJS and Dev.to API
Tags: gatsby, api, showdev, react
Published: 2019-03-31 06:36:50

---
title: Creating your Blog using GatsbyJS and Dev.to API
published: true
description: using Dev.to API as a gatsby source
cover_image: https://thepracticaldev.s3.amazonaws.com/i/87qjvvwrg83auh0e38vl.png
tags: gatsby, api, showdev, react
---

> TLDR: You can go to [the demo](https://gatsby-starter-devto.netlify.com/) on what this is all about. Nonetheless, this is really very easy even if you don't know about GatsbyJS.

I have seen a couple of Dev.to API articles here and decided to make something useful with it. 

If you already have a blog, this article is also for you. I have been struggling to create some content on my own domain because I feel no one would even bother visiting my site.

At [Dev.to](https://dev.to) though, I just keep coming back to write articles because I know someone would be reading it somehow.

Instead of cross-posting from my own blog to Dev.to, I thought I could do the other way around. I am introducing this very basic Dev.to Gatsby source that you could use with your Gatsby website.

{% github https://github.com/geocine/gatsby-source-dev %}

If you do not know what a gatsby source or have never really touched Gatsby, you don't need to worry since I created a starter.

{% github https://github.com/geocine/gatsby-starter-devto %}

Here are the steps how to create your own blog using this starter:

1 - Clone the github repository

```sh
    git clone git@github.com:geocine/gatsby-starter-devto.git
```

2 - Open `gatsby-config.js` and change line 13 with your Dev.to username

```js
    module.exports = {
      siteMetadata: {
        title: 'Gatsby + Dev.to Starter',
      },
      plugins: [
        ...
        {
          resolve: 'gatsby-source-dev',
          options: {
            // your Dev.to username
            username: 'geocine'
          },
        },
        ...
      ],
    }
```
3 - Install and start

```sh
     yarn
     yarn start
```
4 - Navigate to http://localhost:8000

> [This](https://gatsby-starter-devto.netlify.com/) is how it should look like using my username `geocine`.

This is still a work in progress, I will be adding more features, feel free to create a pull request. I hope you like it. 

If you want to learn more about gatsby, checkout this article below:

{% link https://dev.to/geocine/a-static-site-generator-doesnt-have-to-be-static-41i %}
React + GreenSock Integration
Tags: react, gsap, greensock
Published: 2019-03-31 06:08:23

---
title: React + GreenSock Integration
published: true
description: Greensock animation for React ecosystem 
tags: react, gsap, greensock
cover_image: https://cdn.mos.cms.futurecdn.net/252USFwhUaVeFm664hWzFA-320-80.jpg
series: React
---


## React + Greensock

I will explain you how to integrate GSAP animations to React application.

demo: [GSAP](https://cd-gsap.netlify.com/)

Using create-react-app create your react application setup.


Now the react application setup is done, we have to add green sock for animation.

{% gist https://gist.github.com/dani97/2de52567ed340c4cb25b106a934cf57c %}

Now you can see the react icon spinning with the help of css animation. We have to convert it to GSAP.

Change App.css. We are removing all the animations.

{% gist https://gist.github.com/dani97/46a777846623eda93c1584e9caedacfb %}

Its time to add GSAP animation ... 

To add animation to an element using GSAP we need a reference for the element in react. I'm going to use `useRef()` hook.

Now I will show how to get reference to the element using callback ref 

{% gist https://gist.github.com/dani97/01dc79095e1a77233bb39282bc98865a %}

You can see the element in the console.

#### TweenMax

TweenMax in a animation util from greensock. To learn more about TweenMax visit [tweenmax](https://greensock.com/tweenmax).

Inorder to rotate the div we have to use
```javascript
   TweenMax.to(
            logoElement,                  // reference to the element 
            1,                            // duration 
            {
                repeat: -1,               // infinite loop of animation
                rotation: 360,            // 360deg rotation
                ease: Linear.easeNone     // linear speed no acceleration -------
            }
        )

```

Now we can add the animation when the component mounts.
Here is the final version

{% gist https://gist.github.com/dani97/af15b8505ca10d44afda67d264f7d60f %}

The full code is available on github [github repo](http://github.com/dani97/react-gsap-animation)
DataTables holding on to the old data array when try to reload different set of data
Tags: angular7, datatables, datatablestrigger, datatablesdestroy
Published: 2019-03-31 06:07:35

---
title: DataTables holding on to the old data array when try to reload different set of data
published: true
description: In Angular 7, When requesting new set of new data within a date range, datatable holding old data set and some more data. Not loading correct set of data. Used destroy and trigger. Need help!
tags: angular7, datatables, datatablestrigger, datatablesdestroy
---
When to use .io extension?
Tags: domain, webapp, website, seo
Published: 2019-03-31 05:55:37

---
title: When to use .io extension?
published: true
description: 
tags: #domain #webapp #website #seo
---

I want to know when I can use ``.io`` extension? Say I had created a general web app useful to anyone, anywhere so can I or should I use ``.io`` extension? What effect will be in SEO?
Should I learn ReasonML or Elm? 
Tags: javascript, elm, reason, discuss
Published: 2019-03-31 02:26:57

---
title: Should I learn ReasonML or Elm? 
published: true
description: Folks! I want to learn other languages/technologies to build client-side features, What should I choose? ReasonML or Elm? 
tags: javascript, elm, reasonml, discuss
---

Folks! I want to learn other languages/technologies to build client-side feature. What should I choose? ReasonML or Elm?
The Fast Track to AWS Security - Feb 26 2019
Tags: aws, security, certification
Published: 2019-03-30 23:43:01

---
title: The Fast Track to AWS Security - Feb 26 2019
published: true
description: 
tags: aws, security, certification
---

This was a talk I had put together for AWS Toronto User Group. I was studying for AWS Security Certification and I'm embarrassed to say its the first time I failed an exam where I had a score of 74% (1% away from passing).

The AWS Security Certification was not hard but the study material out there was out of date and ExamPro probably now has the most up to date study material and I could certainly pass now.

The big trip up to the AWS Security Certification is cross-service integrations eg. 

* can you trigger an Athena query with the AWS SDK via lambda function?
* can you send CloudTrail events to CloudWatch logs?
* Does VPC flow logs store hostnames or only IP addresses

I hope you enjoy the video above and find it useful. In the future I will take time to transcribe videos I upload here but since is my first video I'm uploading to dev.to I was eager to post a video.

If you are looking to take the AWS Security Certification I've written about 160 practice exam questions and 100 flashcards on ExamPro.
CSS-Only Responsive Navigation Menu
Tags: css, ux, webdev, ui
Published: 2019-07-29 20:38:50

---
title: CSS-Only Responsive Navigation Menu
published: true
tags: css,ux,web-development,ui
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/1*QPc-flKSRuY7awoB4bbSXQ.jpeg)

This week I focused on my CSS skills by building a responsive navigation bar without using Javascript.

I’m really happy with how this project turned out! Here is a link to the [codepen](https://codepen.io/edezekiel/pen/drrQzP?editors=1100). It’s obviously not a full-fledged website, but I’ve wanted to build this kind of navbar ever since I started this blog.

The full desktop view displays a standard navbar links to various pages. If you view the site on a mobile device or if you shrink your browser window, you’ll see that the navbar shrinks to the “hamburger” button style.

### Why This Project? Why No Javascript?

At Flatiron, we mostly used CSS frameworks like semantic UI or Bulma for navigation menu bars. I wanted to see what it would be like to implement a responsive navbar from scratch.

I decided not to use Javascript as a bit of a challenge. I just thought it would be fun to see what kind of advanced features I could build with CSS and HTML.

### Flexbox

Flexbox does a lot of the heavy lifting for this project. If you haven’t used Flexbox before, or just need a refresher, I definitely recommend this [game](https://flexboxfroggy.com/) and this [site](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to get started.

### How does the “Hamburger” Menu Work Without JS?

The trick here has a few parts. First, add checkbox and label tags to the HTML. For the label I used the HTML unicode #9776. This is technically called the “Trigram for Heaven” glyph, but people generally recognize it as the “hamburger icon.”

Next, set the display for these elements to “none” in the stylesheet. After that, create a CSS media query for smaller screens, e.g., when the client is a mobile phone. On smaller screens the media query hides the navlinks and reveals the hamburger icon.

Clicking the hamburger icon toggles the navlinks back to flexbox display. However, the nav’s position is fixed, and the navlinks flex-direction is set to “column.” Taken together, this results in a hamburger menu that pops out navigation links.
Chocolatey, a better way to install software on windows
Tags: windows, packagemanager, tools, operatingsystem
Published: 2019-03-30 23:19:32

---
title: Chocolatey, a better way to install software on windows
published: true
description: 
tags: windows, package manager, tools, operating system
---
This post is aimed primarily to software developers using windows. You should have basic knowledge about your operation system.

When you need to install a new tool, you will have the issue to try to find the location to download it, get the latest version for your SO, and so on.

Trying to improve the user experience related to managing your software installation, [Chocolatey](https://chocolatey.org/) comes to the rescue.

![Image](https://i.imgur.com/u8r7Jzr.png)

This piece of software will allow you to use the windows command line to install, update or uninstall your favorite tools and programs.

You can see a curated list of available packages [here](https://chocolatey.org/packages).

Install instructions are available in the following [link](https://chocolatey.org/install).

In a nutshell, open a PowerShell CLI in administrator mode and execute the following command:

    iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex

If you got an error message about running scripts disabled in your system, just run this in your current PowerShell window ([more info](https://docs.microsoft.com/es-es/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-6)):

    Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

After this, open your windows command prompt as Administrator and use the *choco -?*  command to see more information.
For example, I can install ConsoleZ with:

    choco install consolez

Or update it with:

    choco upgrade consolez

Usually, the same installer will add the program to the path, so, in this case, use the *console* command to open your new installed software.
Machine learning y data science con scikit-learn y pyspark
Tags: python, datascience, sklearn, pyspark
Published: 2019-03-30 20:29:26

---
title: Machine learning y data science con scikit-learn y pyspark
published: true
description: Machine learning y data science con scikit-learn y pyspark
tags: python,data-science,sklearn,pyspark
---

https://udemy.com/machine-learning-y-data-science-con-scikit-learn-y-pyspark/

![python](https://i.imgur.com/LznlysR.png)

![python](https://i.imgur.com/UnGhgfC.png)

![python](https://i.imgur.com/vStIiNy.png)

![python](https://i.imgur.com/wKEjgop.png)
How to Add Transparent Overlay Effect to Images with CSS?
Tags: css, html5css3, addoverlayimages
Published: 2020-02-07 09:26:55

---
title: How to Add Transparent Overlay Effect to Images with CSS?
published: true
tags: CSS,HTML5/CSS3 ,add overlay images,css
canonical_url: https://www.positronx.io/add-transparent-overlay-effect-to-images-css/
---

The post [How to Add Transparent Overlay Effect to Images with CSS?](https://www.positronx.io/add-transparent-overlay-effect-to-images-css/) appeared first on [positronX.io](https://www.positronx.io).

Today I’m going to explore how to **add overlay to image using CSS** , Color overlays are magical. They are great addition to your website. For instance, color overlays can enrich your interactive image gallery like nothing else. Here in this tutorial, we are going to cover CSS aspect of the same:

The problem arises when you want to use images in the case on onclick events or links. As far as text links are concerned, they come with a standard “hover” effect. That is not the same when it comes to images. It gets complicated when we approach it from the UI perspective. Visual indication about a link is a must for the users.

[click here to read more](https://www.positronx.io/add-transparent-overlay-effect-to-images-css/)