teleren/devto huggingface dataset:
Why I hate Infinite Scrolling
Tags: design, css, discuss, ux
Published: 2018-07-08 20:26:26

---
title: Why I hate Infinite Scrolling
published: true
description: 
tags: #design #css #discuss #ux
---

I am sure you have seen old Pre-Material Design YouTube homepage layout where they had the menubar and essential details in the footer. And you have to rely on low speed internet connection, to access the footer. 

YouTube's recent design has changed this. However there are lot of websites out there who make use of the bad UI design with infinite scrolling to create distracting experience. 

Here's why I hate infinite scroll. 

1. I can't find your menubar if it's under scroll. 
2. I can't find your contact details under page that has endless images like pinterest. 
3. I can't find way to navigate between the different pages apart from infinite scroll. 
4. I can't find map or business details under scroll. 
5. I don't know when the infinite scroll will end. 

Here are few things I think people who implement infinite scrolling should keep in mind. 

1. Don't keep menubars in the bottom footer.
2. Avoid keeping essential website details under infinite scrolling. 
3. Offer manual triggers for infinite scrolling with buttons. 
4. Don't put map or media element under infinite scrolling. 

Think like an ordinary web user who spends less time on the internet. And then design your website interface. 

As a front end developer, I find it really annoying that people who design websites don't keep user experience in mind. 

What's your experience with Infinite scrolling and other fancy web design trends?
What’s something that should be obvious that developers seem to misunderstand?
Tags: discuss
Published: 2018-07-08 20:08:07

---
title: What’s something that should be obvious that developers seem to misunderstand?
published: true
description: 
tags: #discuss
---


I found this on Twitter, but I don’t have a twitter account so I thought I’d bring it over here. It seems like a good fit for #discuss!

{% twitter 1015086438277435392 %}
web-riimote
Tags: showdev, javascript, vue, node
Published: 2018-07-08 16:04:26

---
title: web-riimote
published: true
description: Turn your smartphone into a 3D controller with just a web app
tags: showdev, javascript, vue, node
---

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

[`web-riimote`](https://github.com/konaraddio/web-riimote) turns your smartphone into a 3D controller (think Wii remote). No need to install a mobile or desktop app.

Just visit [web-riimote.herokuapp.com](https://web-riimote.herokuapp.com) on a smartphone (it'll be your controller) *and* a laptop/desktop (it'll be your display). [Here's a video showing it in action](https://www.youtube.com/watch?v=O2r1-lR6Xq8).

This project was inspired by the [2016 Android Experiments Winner](https://experiments.withgoogle.com/3d-controller). The 2016 Android Experiments winner turns your smartphone into a 3D controller using Chromecast and an Android app. But `web-riimote` demonstrates that it's possible to do the same with just a web app.

Here's a link to the source code: https://github.com/konaraddio/web-riimote

Technologies Used: Vue, Node, Socket.io
The Reverse Polish Notation evaluator using only call stack
Tags: go, programming, help
Published: 2018-07-08 15:44:10

---
title: The Reverse Polish Notation evaluator using only call stack
published: true
description: 
tags: go,programming,help
---

I wrote evaluator for RPN(Reverse Polish Notation) using the call stack in Go.

```go
package main

import (
	"bufio"
	"fmt"
	"os"
	"strconv"
)

func main() {
	r := bufio.NewReader(os.Stdin)

	var v []interface{}
	for {
		var s string
		if _, err := fmt.Fscan(r, &s); err != nil {
			break
		}

		var t interface{}
		n, err := strconv.Atoi(s)
		if err == nil {
			t = n
		} else {
			t = []rune(s)[0]
		}

		v = append(v, t)
	}

	calc(v)  // should be nil
}

type f func(int) f

func calc(v []interface{}) f {
	if len(v) == 0 {
		return f(func(n int) f {
			fmt.Println(n)
			return nil
		})
	}

	switch t := v[0].(type) {
	case int:
		return calc(v[1:])(t)
	case rune:
		return c(v[1:], t)
	default:
		panic(t)
	}
}

func c(v []interface{}, t rune) f {
	switch t {
	case '+':
		return op(v, func(a, b int) int {
			return a + b
		})
	case '-':
		return op(v, func(a, b int) int {
			return a - b
		})
	default:
		return op(v, func(a, b int) int {
			return a * b
		})
	}
}

func op(v []interface{}, fn func(int, int) int) f {
	return f(func(b int) f {
		return f(func(a int) f {
			return calc(v)(fn(a, b))
		})
	})
}
```

It inputs the space-separated notation like `1 2 + 3 4 + +` and prints like `10`.

I guess it do same things as the usual way to solve RPN(using real stack, not call stack) but unsure. Does it make sense?
What books did you used as a display/laptop stand?
Tags: office
Published: 2018-07-08 13:25:12

---
title: What books did you used as a display/laptop stand?
published: true
description: 
tags: office
---

I couldn't find a real picture with my old setup, but I've used 2 large C++ books, the **Bjarne Stroustrup** "bible" and one other that had 1000+ pages.


What books did you used? It's ok, you can come clean now, it will be our little secret.

![pic](https://thepracticaldev.s3.amazonaws.com/i/iria093kp90vvrvxvmtm.jpeg)
Do password rules impact security?
Tags: security, passwords, rules
Published: 2018-07-08 12:59:32

---
title: Do password rules impact security?
published: true
description: Password rules reduce the possible available passwords
tags: security, passwords, rules
---

Recently I had a shower thought about passwords, namely that any rules we apply limit the possible passwords the user can choose. Which also means that there are less passwords an attacker has to go through when brute-forcing a password. 

## Setup

For simplicity I chose 4 character groups:

+ lowercase letters: 26
+ uppercase letters: 26
+ numerals: 10
+ special characters: 34

The calculations assume that there has to be at least 1 character of each group in the password. 

This is not exhaustive of course, but I have to start somewhere. 

## Impact

In total there are **96** allowed characters.  
This means, for an 6 character long password, without any rules, there are `96^6`, or `782.757.789.696`, options. Almost **800 billion**.  
With the rules above applied, there are only `26*26*10*34*96^2`, or `2.118.205.440`, options. Just a bit more than **2 billion**.

That's a **370x difference**!

To put that in perspective, instead of 1 year, it will take an attacker less than 1 day to brute-force that password.

## Is that bad?

To be honest, I don't know. It sounds like much, but on the other hand, increasing the length by ~1.3 characters will negate the difference. So a password that's 1 character longer will almost do so, and one that's 2 characters longer will provide even better security.

What are your opinions on that topic? Please comment below 👇

---

Follow me on [Twitter](https://twitter.com/Domysee) for more of my thoughts, articles, projects and work.
Creating linear gradients in SVG
Tags: svg
Published: 2018-06-04 06:23:08

---
title: Creating linear gradients in SVG
published: true
description: A short guide how to create simple linear gradients in SVG
tags: svg
---

I recently had to figure out, how to create linear gradients within SVG without using PNG files or anything else. Since the way is simple and also very powerful, I like to share with you a very simple example.

Let's consider this simple SVG structure:

```html
<svg width="220" height="120">
    <g>
        <rect x="10" y="10" width="200" height="100" class="rectangle" />
    </g>
</svg>
```

That simply renders a black rectangle. I now want a left to right linear gradient as a fill color of the rectangle. We need to define this within the `<defs>` tag of the SVG element.

```html
<svg width="220" height="120">
    <g>
        <rect x="10" y="10" width="200" height="100" class="rectangle" />
    </g>
    <defs>
        <linearGradient id="myGradient">
            <stop offset="0%" class="start" />
            <stop offset="100%" class="end" />
        </linearGradient>
    </defs>
</svg>
```

The id of the `linearGradient` tag we will use as a fill reference for the rect element. `stop` tags are used to define the breakpoints and color changing points for the gradient. You can define even more than just two.

The needed CSS looks like that:

```css
.rectangle {
  fill: url(#myGradient);
}

.start {
  stop-color: #a0ced9;
}

.end {
  stop-color: #83a9b2;
}
```

As you can see we just need to reference the gradient using `url(#myGradient)`. This directly searches for the defined linear gradient (or different gradient).  The colors for the different stop elements need to be defined by using the stop-color attribute.

Here is the result:

{% codepen https://codepen.io/neatoro/pen/JZGoZN %}

__Post:__ If you want to create a linear gradient from top to bottom then you need to change the linear gradient definition to `<linearGradient id="myGradient" x2="0%" y2="100%">`.
Display Image From Android Asset Folder In React Native 
Published: 2018-07-08 09:49:11

 # Display Image From Android Asset Folder In React Native
 
Post Link : https://www.skptricks.com/2018/07/display-image-from-android-asset-folder-in-react-native.html

This tutorial explains how to get image from the android asset folder and display the image in react native application. This example covers, fetching and displaying an image from network location using Image Component of react native.
React native provides a unified media management system so developers can easily manage all the image files by placing them together into a single folder. So here is the complete step by step tutorial to display Image from Android Asset Folder in react native application.

<a href="https://www.skptricks.com/2018/07/display-image-from-android-asset-folder-in-react-native.html" > Display Image From Android Asset Folder In React Native </a>

<img src="https://2.bp.blogspot.com/-SI17IqyEP7s/W0D4O-sEpeI/AAAAAAAABro/9O6z0Y4TAvgMfP2KOH4ybhuyCy0bR5MdgCLcBGAs/s400/asset.jpg" />

 #react #javascript #webdev #reactnative
BxJS Weekly Ep. 18 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-07-08 09:04:23

---
title: BxJS Weekly Ep. 18 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 18 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/episodes/Episode-18-2018-07-07.md).

You can also watch [this episode on youtube](https://www.youtube.com/watch?v=tciH9Rp5efI).

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)
Testing Tip: Testing a Controller with a Model in Masonite
Tags: python, framework, tutorial, testing
Published: 2018-07-08 03:34:17

---
title: Testing Tip: Testing a Controller with a Model in Masonite
published: true
description: How to test a controller that contains a model with Masonite
tags: python, framework, tutorial, testing
---

# Introduction

We're going to keep this one real short. I'll just make this some code snippets and explanations.


Almost 80%+ of the time, we will have some models within our controllers but it's usually hard to mock those models up. For example we might have a controller with some logic like:

```python
from app.User import User

class MikeController:

    def show(self):
        return User.find(1).name # returns Mike
```

But if we go into our test we have something like:

```python
from app.http.controllers.MikeController import MikeController

class TestController:

    def setup_method(self):
        self.controller = MikeController()

    def test_controller_show_returns_mike(self):
        assert self.controller.show() == 'Mike'
```

We are not able to mock the User class because it is hard coded into our controller. It will be pulling in directly from the database. What if we wan't our tests to run without even touching the database?

# The Solution

We can simply add that user as a class level attribute:

```python
from app.User import User

class MikeController:

    __user__ = User

    def show(self):
        return self.__user__.find(1).name # returns Mike
```

and then we can mock up that model:


```python
from app.http.controllers.MikeController import MikeController

class MockUser:
    name = 'Mike'

    def find(self, index):
        return self

class TestController:

    def setup_method(self):
        self.controller = MikeController()
        self.__user__ = MockUser()

    def test_controller_show_returns_mike(self):
        assert self.controller.show() == 'Mike'
```

TADA! We can now throw in any model there inside the `self.controller.__user__` attribute and it will be mocked when we test the code. This is a nice little tip for testing controllers. Our controllers might look something like:

```python
from app.User import User
from app.Phone import Phone


class MikeController:

    __user__ = User
    __phone__ = Phone


    def show(self):
        return self.__user__.find(1).name # returns Mike
    
    def call(self):
        return self.__phone__.where('user_id', self.__user__.find(1).id).first()
```

This is really testable and a cool little trick.
Freelancers and digital agency owners, what do you use to deploy client websites?
Tags: discuss, webdev, agency
Published: 2018-07-08 03:21:18

---
title: Freelancers and digital agency owners, what do you use to deploy client websites?
published: true
tags: discuss,webdev,agency
---

I've noticed that most ecommerce online stores are hosted on Shopify nowadays, as I noticed from this post:

{% link https://dev.to/samjarman/starting-an-agency-with-kelly-vaughn-5699 %}

How about other kinds of websites created by the freelancers and digital agency owners of this community? Do you host on shared hosts? Or VPS providers such as Digital Ocean? Or Cloud services such as AWS? 

The most challenging part (for me) about VPS providers and cloud services is the management of your servers across different services, once the number of your servers goes past 4 or 5.
Changelog: Mentor Matchmaking!
Tags: changelog, meta, mentorship
Published: 2018-07-06 21:05:09

---
title: Changelog: Mentor Matchmaking!
published: true
description: We're excited to announce our new initiative.
tags: changelog, meta, mentorship
---

Finding a mentor to help navigate your career can be positively life changing, but we know it's way easier said than done. And that goes both ways! Finding someone to mentor isn't that easy either. 

That's why we're excited to announce our new initiative: **mentor matchmaking**. We'll be connecting members who are looking to learn, with members who are looking to teach. We'll be doing this manually to start, and evolve the service as we go. 

If you're interested in this beta program, please let us know **[by filling in this new section in your settings](https://dev.to/settings/mentorship)** and we will be in touch via email. You can also help us by fully filling out your profile (if you have not already) so we can get a sense of your personality. 

![profile-settings](https://cl.ly/0A0O0T321m1V/download/Image%202018-07-06%20at%204.39.04%20PM.png) 


A few more thoughts: 

- Mentors don't need to be deep subject matter experts! One of the best ways to reinforce what you know is by teaching others or showing them how you would troubleshoot. Oftentimes, you end up learning together. So if you're on the fence on whether or not you 'qualify' as a mentor, you should go for it. 

- Mentors can also be mentees! Just because you're mentoring someone in Rails, doesn't mean you can't be a CSS mentee. 

- We have had extensive demand for this sort of program from folks who saw this as a natural fit for our diverse community and we agreed wholeheartedly. We hope you will also give us feedback to help improve now that it's underway.

Thanks everyone for being a wonderful part of this community. We're so excited to see the collaborations that come out of this.
Multiple HTML files with HtmlWebpackPlugin
Tags: webpack, javascript, html, htmlwebpackplugin
Published: 2018-07-07 23:41:11

---
title: Multiple HTML files with HtmlWebpackPlugin
published: true
description: Generating multiple HTML files with HtmlWebpackPlugin
tags: webpack, js, html, HtmlWebpackPlugin
---

# Generating multiple HTML files with HtmlWebpackPlugin

In the last days, I made some modifications in my blog and one of them was to stop using Gulp and to use the Webpack. During the configurations, I faced some difficulties and one of them was the process of generating multiple HTML files using the plugin HtmlWebpackPlugin.

##Versions

```
"html-webpack-plugin": "^2.30.1",
"webpack": "^3.11.0"
```

We assume that you already have the webpack configured and want to implement the HtmlWebpackPlugin plugin to generate multiple HTML files. So, we need to install the plugin, using the command below:

`$ npm i --save-dev html-webpack-plugin`
or
`$ yarn add --dev html-webpack-plugin`

##Default HtmlWebpackPlugin Configuration

Once you have the requirements configured, usually use the plugin like this

```
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

let HWPConfig = new HtmlWebpackPlugin({
  template: __dirname + "/index.html",
  file: "index.html",
  inject: "body"
});

module.exports = {
  .
  .
  .
  plugins: [
    HWPConfig
  ]
}
    
```

I like to store the plugin settings in any variable and then use it inside plugins

##Custom HtmlWebpackPlugin Configuration

If we used the default setting for each new file and depending on the number of files, would leave our webpack configuration file, very extensive. So let's create the following configuration :

```
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin')

let HWPConfig = new HtmlWebpackPlugin({
  template: __dirname + "/index.html",
  file: "index.html",
  inject: "body"

let articlesHtmlPlugin = ['sass-react', 'chart-js', 'copy-right', 'object-literal', 'spread-operator'];

let multiplesFiles = articles.map(function(entryName) {
  return new HtmlWebpackPlugin({
    filename: entryName + '.html',
    template: __dirname + `/articles/{entryName}.html`
})

module.exports = {
  .
  .
  .
  plugins: [
    HWPConfig
  ].concat(articlesHtmlPlugin)
};
    
```
1 - We create an array, with the exact name of each article in the articles folder, but without the extension.

2 - We create a "multiplesFiles" variable, where we store in it the "articles.map" return. It will go through each item of the array, add the name + extension in filename and then inform the directory with the name of the file in the template.

3 - Concatenate our variable articlesHtmlPlugin at the end of plugins, using "concat (articlesHtmlPlugin)"

##Conclusion

This is one of the alternatives for generating multiple HTML files using the HtmlWebpackPlugin plugin. 
Now with each new file created just insert the exact name in the array, that the map would take care of the rest. 

Thanks!!
I've noticed a lot of improvement in error messages across several libraries lately, is this Elm's influence?
Tags: discuss
Published: 2018-07-07 16:10:09

---
title: I've noticed a lot of improvement in error messages across several libraries lately, is this Elm's influence?
published: true
description: 
tags: discuss
---

I've noticed that Rails has gotten a lot more helpful with error messages lately, as have many of the other popular libraries I use.

This post made me really think about it:

{% link https://dev.to/alshakero/the-true-delight-of-reacts-error-and-warning-messages-168j %}

It makes sense. As a library matures there's only so much you can do to improve the API, but you can endlessly improve error messages for clarity and guidance.

I'd love any discussion on the topic, but most specifically I wonder if this is really a trend and can it be traced to the great work of the Elm language?

That is the project which really burst onto the scene making compiler messages a true point of pride. And it really is awesome. Developing in Elm is a great experience. I've only used it for toy projects but I'm still a hoverer in that community.

Thoughts on this matter?
Gem debug_helper Goes All Modular
Tags: ruby, debugging
Published: 2018-07-07 16:01:12

---
title: Gem debug_helper Goes All Modular
published: true
description: Now you can use the class method or the new module method.
tags: ruby, debugging
---
Per a user suggestion, I have enhanced Ruby gem <code>debug_helper</code> so that it can be used either as a class or as a module.

Per the suggestion, the new module method, <code>putd</code>, has the look and feel of method <code>puts</code>.

Now you can analyze an object using either of these methods (with appropriate <code>require</code> and <code>include</code>):

- Class method:  <code>DebugHelper.show(object, message)</code>
- Module method:  <code>putd object, message</code>

Links:

- GitHub debug_helper [README](https://github.com/BurdetteLamar/debug_helper#debug-helper).
- Section about using as a [module](https://github.com/BurdetteLamar/debug_helper#class-method-or-module-method).
- RubyGems [debug_helper](https://rubygems.org/gems/debug_helper).
Confused on how to start
Tags: beginners, discuss
Published: 2018-07-07 15:51:34

---
title: Confused on how to start
published: true
description: 
tags: beginner, discuss
---

I'm starting a nonprofit that is (will be) an online network of high school students doing humanitarian work. I have a specific vision (and low budget haha), so I am trying to self-teach. 

I don't know whether to start for the front-end on Dreamweaver or use Wordpress. I am a CS student, so I'm not a beginner coder, though certainly no expert. A graphic designer is going to do the layouts and graphics for the site- does that mean I translate that into code using Dreamweaver/Wordpress? Thanks!!