teleren/devto huggingface dataset:
Bone Buttons: A simple button generator
Tags: html, javascript, productivity, design
Published: 2019-09-04 18:44:46

##🎉 New free tool is coming 🎉

I'm working on **#BoneButtons** a CSS button generator. It's still on development 🔧 but you can test it. 

Feel free to give me your feedback 🤓

This is the link to the tool:

**[Bone Buttons: Buttons generator](https://bonebuttons.netlify.com)**

And this is the github repo:

{% github lboneluv/bone-buttons %}


{% user lboneluv %}
College Reaction Polling 
Tags: career, help, webpack, hiring
Published: 2019-09-04 18:32:05

College Reaction is hiring a part-time web engineer. This is a great starting opportunity to showcase technical skills, working with a small team on projects that are discussed on the national stage. College Reaction Polling has been featured in the Washington Post, CNN, MSNBC, Axios, and other sources.


The ideal developer for this project will have a strong understanding of front-end development and have experience writing custom webpack configurations. This project is built with preact; a compact component-based module that uses the React API and shares similar lifecycle methods to React with some notable differences (a detailed comparison can be found at https://github.com/preactjs/preact/wiki/Differences-to-React). Additionally the project uses mobx and mobx-react-form for state management and form handling. 



Necessary Skills/Experience:


	- Experience with preact or a strong React background 

	- Experience with custom webpack configurations

	- Experience with Mobx or similar state management systems (Redux, etc)
Does automated testing reduce the technical debt in your team?
Tags: discuss, automatedtesting, technicaldebt, juniordevelopers
Published: 2019-09-04 18:20:52

---
title: Does automated testing reduce the technical debt in your team?
published: true
description: Does automated testing reduce the technical debt in your team?
tags: discuss, automated-testing, technical-debt, junior developers
---

I have observed that automated have contributed to reducing the technical debt in my projects by allowing new or junior developers to get set up quickly; from debugging, developing new features, fixing bugs to publishing the code to production, with little or no effort.

Whats your experience?
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q7tcl1bhf1xh7ixlpc22.png)
When the Company You Work for Turns 10
Tags: watercooler, wordpress, startup, womenintech
Published: 2019-09-04 18:05:09

Double digits, y'all!

This month marks 10 years in operation for Pagely, the place I've called my work home for the last 2+ years. 

It's both inspiring and exciting to see a mom & pop tech company (literally, the founders of Pagely are a wife/husband duo, and they are our team's work parents) not only make it this long but continue to innovate and dominate in an industry they created. 

Are there huge whales in the waters we swim? Yes. 

Do we have big competition with deep investment? Yes. 

Are we scared? *Hells no.* 

Our co-founder and CEO wrote about what it's been like, and where we go from here. [You should read it if you've got a minute.](https://pagely.com/blog/pagely-turns-ten/)
Variables in Dart
Tags: beginners, dart
Published: 2019-09-04 17:56:29

# Variables - EN

## What are variables?

In this post we're going to learn about variables in Dart, variables are like tiny-boxes that keeps references to a value, and this tiny-box can have a name so we can identify and remember it pretty easily.

## How do we create them in Dart?

In Dart, we can create variables in three ways:

### **Using the reserved keyword var**

We can create a variable using the reserved keyword var before the name of the variable and the value. Here's an example:

    var year = 1990;
    print(year)
    //The result is going to be: 1990

This is called **Type inference.** What it does is that the compiler can automatically deduce the type of the variable or an expression.

### Declaring the type of the variable

We can also declare the type of the variable as follows:

    String name = "John";
    print(name)
    //The result is going to be: John

### **Using the reserved keyword dynamic**

The dynamic keyword allows us to declare a variable that the type can change at execution type and can be defined in this way:

    dynamic changeType = 1234
    The type can change at runtime
    changeType = "I'm a string now"
    //The result is going to be: I'm a string now

## Now is your turn

You can try these concepts in IDE like Intellij idea community which is free, all you need is to install the Dart Plugin. Or in some online editors like [**Dartpad**](https://dartpad.dartlang.org/).

## Learn more

If you liked this post I'm actually writing more like these in a free ebook which is a basic course of Dart that can help you to start with Flutter, that awesome framework for develop multiplatform apps. If you're interested you can get it for **free** [following this link.](https://www.codingpizza.com/en/free-dart-course).
Decoupling Web Application Eventing from the DOM
Published: 2019-09-04 17:56:18

<i>Sometimes I think, I write things which make no sense at all. Then I frame them up for farther consideration.
</i>
---

TL;DR: Can you guys tell me about programs which:

<blockquote>
1. implement "events" and "event listeners" ...
2. ... on web clients... (not servers)
3. ... outside of the the DOM (events are not attached to DOM elements)
</blockquote>? 

---

I just found a bug in common web applications. This has been bugging me for some time, and I'm relieved to have nailed it finally (I think). Caveat emptor: this is an architectural bug that is expansive throughout the web application ecosystem, so it may not be easily viewed as a bug.

The DOM is supposed to be a document, not a business processor. But for quite a few years now, people have been using DOM events & event-handlers as business processors, instead of as mere documents. This has royally fucked up the separation of concerns between the DOM tree, Web Application APIs (Javascript), and Rendering (CSS, etc.).

It just so happens that usually, the only place to plant event listeners, and the only place to trigger events, is on DOM elements. So what happened is that in pursuit of writing event-driven business processes into code, people have been writing event-driven business processes into the DOM. 

The data structure of a web application is NOT supposed to depend on a DOM tree. Therefore close-coupling between {data models in a web application} (read in 2019 as "stores"), and {specific node trees in a DOM} is an anti-pattern.

But isn't the DOM supposed to mediate such user-interface actions as receiving input from the user, and sending feedback to the user, you might ask? Yes, of course, these can be modelled as events, and the DOM provides us data structures pertaining to those events, as well as ways to operate on those structures (listeners). 

But that does NOT mean that the DOM is also supposed to handle traffic control for events throughout an entire web application. A web application should have an eventable control centre which lies OUTSIDE the DOM. (That is, outside any light, shadow, or virtual DOM, in case it wasn't clear). We generally know how to do this on the server, since NodeJS lit the rage on this. But web applications are not always supposed to run on the server - often times we want a web application to run robustly on the client side, and to depend on servers only for federated data stores. So how do we go about writing web application CLIENTS that have EVENT-driven traffic control OUTSIDE the DOM?

With that in mind, I searched for implementations of event listeners outside the DOM, and was pointed to the <a href="https://subscription.packtpub.com/book/web_development/9781783287314/1/ch01lvl1sec09/the-reactor-pattern">Reactor pattern</a> by this <a href="https://stackoverflow.com/questions/15308371/custom-events-model-without-using-dom-events-in-javascript">thread</a>.

I look forward to examining it more closely, perhaps with your input.
How would you go about detecting the height of content within an iframe?
Tags: help, webdev, javascript
Published: 2019-09-04 17:42:46

Let's say you have an `iframe` and you'd like to detect the height of its `window` once the content is loaded, how would you go about doing that?

This approach seems satisfactory, but I feel like this is a domain with possible edge cases and gotchas, so I'm super open to differing approaches.

{% stackoverflow 9163087 %}
Designers can unleash your potentials as a frontend developer
Tags: javascript, css, ui, ux
Published: 2019-09-04 17:04:54

---
title: Designers can unleash your potentials as a frontend developer
published: true
description: for beginners only
tags: js,css,ui,ux
---

Learning to be a front-end developer and web designer was not easy for me, and creating awesome websites was even harder. In fact, I had assumed I was not the creative genius and decided to learn Django to be a back-end developer, but I really wanted to code awesome-looking sites.

A few months ago, I joined Fiverr, a freelancing site, because I needed some cash. So I registered as a Django guy, then a Dutch buyer contacted me and said he had some Figma designs that he would love me to convert to code. 

![Money](https://media.giphy.com/media/h0MTqLyvgG0Ss/giphy.gif)
I should have rejected the job because I was not experienced yet but I needed a 5-star rating, and so, with a short deadline (7 days) and 13 pages of design to convert, I accepted the offer.


Once I started, I quickly got lost at the header of the page. The designs were just so weird that CSS Tricks and stack overflow became my friend. And I was so close to canceling the order at some point where it got too complex, but I still don’t know why I didn’t (Spoiler: I eventually lost the Job). I managed to persist till day 7 with only 6 out of 13 pages completed. The client got angry and I had to cancel the job as a result, and for some other reasons.
Interestingly, I was not sad; I was happy because I JUST CONVERTED AN AWESOME UI INTO CODE!!!  

![Happy](https://media.giphy.com/media/5GoVLqeAOo6PK/giphy.gif)

Ever since, I have been constantly improving and getting more comfortable with designs.

Now, my advice to beginners wanting to be the next Chris Coyier or Sarah Drasner: 

1)Register on Dribbble.com or Behance.com, get awesome designs and try converting to code.
2)Sign up on frontendmentor.io, as there are some awesome challenges there.
3)Check out codepen.io and try to reverse engineer awesome stuff.

Hahahaha. Thank You

![Happy](https://media.giphy.com/media/3oEjHWXddcCOGZNmFO/giphy.gif)

cc - proofreader
[Samuel 0'Daniels](https://twitter.com/samuelodan)
UnityでPackage Managerが提供するパッケージにパッチを当てる
Tags: unity3d
Published: 2019-09-04 17:00:00

---
title: UnityでPackage Managerが提供するパッケージにパッチを当てる
published: true
tags: Unity
date: 20190904T17:00Z
canonical_url: https://qiita.com/shiena/items/4d4aa3ab91176a4ab850
---
# はじめに

Unity2019.2.3f1でShader Graph 6.9.1を使ったらプロパティ名をリネームするとフリーズしてしまいます。
修正されていないか調べると案の定、[[6.9.x] Fix InputView freeze by alindmanUnity · Pull Request #4386 · Unity-Technologies/ScriptableRenderPipeline](https://github.com/Unity-Technologies/ScriptableRenderPipeline/pull/4386)で修正されていました。
そこでShaderGraphを修正するためにPakcage Managerが提供するパッケージにパッチを当てる方法を調べました。

# プロジェクト固有の場合

Package Managerからパッケージをインストールすると以下のフォルダにキャッシュが作成されます。

```
[Project Folder]/Library/PackageCache/*
```

ここから該当パッケージを探して以下のフォルダにコピーしてパッチを当てます。
コピー先のフォルダはキャッシュより優先されるのでこれで済むわけです。

```
[Project Folder]/Packages/
```

バグ修正版がリリースされてPackage Managerからバージョン更新したらパッチを当てたフォルダは不要になるので削除してしまいましょう。

# 特定のPCのみの場合

Package Managerからパッケージをインストールすると以下のフォルダにダウンロードされてUnityプロジェクトにキャッシュがコピーされます。

Windows

```
%LOCALAPPDATA%\Unity\cache\packages\packages.unity.com\*
```

macOS

```
~/Library/Unity/cache/packages/packages.unity.com/*
```

ダウンロードしたパッケージを変更するとUnityプロジェクトにもキャッシュが反映されます。
ただし複数人でUnityプロジェクトを共有している場合は他のPCには反映されないのでこの方法はあまりおすすめできません。
📄 Cheat sheet - How to promote your open-source project? 
Tags: opensource, showdev, tutorial, beginners
Published: 2019-09-04 16:51:40

---
title: 📄 Cheat sheet - How to promote your open-source project? 
published: true
description: Cheat sheet about open-source projects promotion
tags: #opensource, #showdev, #tutorial, #beginners
cover_image: https://repository-images.githubusercontent.com/200076618/62b23b00-c392-11e9-8f8d-4b39ea67adcf
---

You've created an open-source project? Great. But what happens when your project is mature enough to be used? You've put a lot of effort building an awesome project that could help the open-source community, but the reality is that if you don't spread the word about it, almost no one will see or use it.

Some colleagues and I went through a lot of open-source projects promotion these last months, and we found some good practices that helped our open-source projects gain popularity. And guess what? We created a cheat sheet to summarize everything we learned 😎.

👉 **[Click here to check out the cheat sheet on Github](https://github.com/zenika-open-source/open-source-promotion-cheat-sheet)** 👈

Is this article a way to promote this Github cheat sheet? Yes. See, you learn fast 😜.

### Want to get started with open-source?

If you're new to the open-source world, I strongly recommend you to read these two articles first:
- [Getting started in open-source](https://dev.to/bpetetot/getting-started-in-open-source-2pf2) 
- [Preparing your project to be open-sourced](https://dev.to/yvonnickfrin/preparing-your-project-being-open-sourced-5bdp)


### Show your support

Do not hesitate to support us if this helped you:
- [Share the cheat sheet on twitter](https://twitter.com/intent/tweet?text=How%20to%20promote%20your%20open-source%20projects%20@ZenikaOSS&url=https://github.com/zenika-open-source/open-source-promotion-cheat-sheet&hashtags=OpenSource,CheatSheet)
- [Contribute to the cheat sheet to improve it](https://github.com/zenika-open-source/open-source-promotion-cheat-sheet/blob/master/CONTRIBUTING.md)
- [⭐️ the github repository](https://github.com/zenika-open-source/open-source-promotion-cheat-sheet)
Struct callback.
Tags: help, rust
Published: 2019-09-04 16:43:56

I am writing a grammer defined as a bTreeMap, the key is the token and the value is a GrammerDefinition struct. The struct in question stores metadata about a specific token, such as the error name, rules about what is allowed to follow a token and so on. I want to be able to optionally set a callback to handle errors and rules of said metadata. Is this the most optimal pattern and how might this look in code? Any help would be greatly appreciated, I have been googling for around a month.
Advice please: VR training/learning (C++ || C#)
Published: 2019-09-04 16:24:16

Hi, I'd appreciate it if I can get a little guidance on a question that I've been researching for a while now. I am planning on picking up/learning a game engine to produce VR content. I have been reading a bit on both. My choice of the game engine is based on:

1. C++ or C# :  I was leaning towards Unreal Engine 4 (UE4) due its choice of using C++, even though they have blueprints (flow-chart type pick and drop code pieces)

2. Employability: Unity wins this one which means learning C#

3. Graphics/Design: I'd like to use design assets to start off with rather than make my own. 

4. Content: most of my content will be learning/education based so I need a mix of gamefication +  lessons(lecture or store style)

5. Future use cases of C++ and C#: I know C++ is used in machine learning, any use cases of C# (besides .NET framework)

The engines I've narrowed down are:

1. UE4
2. Unity
3. Godot

Any other advice/comments/suggestions are HUGELY appreciated! Thanks
LeetCode "Merge Two Sorted Lists"
Tags: leetcode, python
Published: 2019-09-04 16:12:23

---
title: LeetCode "Merge Two Sorted Lists"
published: true
description: 
tags: [leetcode, python]
---

It's good to draw box during solving problems✍️

[Merge Two Sorted Lists](https://leetcode.com/problems/merge-two-sorted-lists/)

```python
class Solution:
    def mergeTwoLists(self, l1: ListNode, l2: ListNode) -> ListNode:
        
        first = ListNode(-1)
        ret = first
        l1_node = l1
        l2_node = l2
        
        while l1_node or l2_node:
            if not l1_node:
                ret.next = l2_node
                break
            elif not l2_node:
                ret.next = l1_node
                break
                
            if l1_node.val <= l2_node.val:
                tmp = l1_node.next
                ret.next = l1_node
                l1_node = tmp                
            else:
                tmp = l2_node.next
                ret.next = l2_node
                l2_node = tmp
            ret = ret.next
            ret.next = None
                
        return first.next
```
No Longer Tim Baker, Jane Fisher, Joe Taylor. What Would Be Your Chosen Occupational Last Name?
Tags: discuss, watercooler
Published: 2019-09-04 16:11:01

---
title: No Longer Tim Baker, Jane Fisher, Joe Taylor. What Would Be Your Chosen Occupational Last Name?
published: true
description: Many family names are derived from the jobs of ancestors. If we were to reset everyone right now, what name would they end up with?
tags: #discuss #watercooler
---

I've yet to come up with a real good one, but maybe you will?
¯\\_(ツ)_/¯
docker-https-proxy to proxy your docker containers
Tags: showdev, docker, github, javascript
Published: 2019-09-04 15:56:26

Hey,

as a developer I use docker on my servers and sometimes I want to have multiple containers running on one server and they should be reachable through different hostnames. As this proxy feature is my only requirement I don't want to use Apache or Nginx bloated services. They have a lot of features but they are not needed for just a splitting purpose.

So I created a little neat docker image that can easily be used as a main proxy container to proxy requests among hostnames accross your containers.

Also I wanted to have HTTPs working for my proxy so I added a self-signed certificate that can easily be used behind a Cloudflare account. You can also add your own certificate if want to. The whole thing is #opensource!

GitHub: https://github.com/shroomlife/docker-https-proxy
Docker Hub: https://hub.docker.com/r/shroomlife/docker-https-proxy

### easy setup with docker-compose

```yml
version: '3.3'
services:
  proxy:
    container_name: proxy
    image: shroomlife/docker-https-proxy:latest
    ports:
      - "80:80"
      - "443:443"
  example.com:
    container_name: example.com.proxy
    image: httpd:latest
```

Just add `.proxy` to your `example.com` domain and you are ready to go!

There you can also find a helpful README for setting it up for your own needs. I hope I can help other developers solve a common problem with ease.

Would love to hear some feedback from the community!

Best,
shroomlie
Oops don't forget to test
Tags: codenewbie, css, beginners, testing
Published: 2019-09-04 15:52:39

So managed to make a newbie mistake. I forgot to recheck my layout after editing css in *all* the screen sizes. Ended up with a desktop layout that I pushed to my deployed branch that looked like

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

instead of 

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


oops. Easy fix at least and a friendly reminder to check everything before deploying =)
Binary Gap of a Number
Tags: career, ruby
Published: 2019-09-04 15:52:05

when ever I think of interview, this question always have a JamesBond entry in my mind.


#**Question:**
Given a number, you need to convert it to binary format and then find the maximum no.of zero's between two 1's(binary gap)


#**Approach:**
_One among Many_
1. Convert the number to binary
2. Have a loop and find the maximum no.of zero's b/w 1's


##_1. Convert to binary_
   1) Well this can be done using basic mathematics(My Approach)
{% gist https://gist.github.com/sureshpathipati/4212ca6e8e53212c0fd11422ffa99c05.js %}
   2) Ruby has inbuilt function "to_s(< format >)" for Fixnum(Best, Clear and Easy)
{% gist https://gist.github.com/sureshpathipati/2012fadc332ceea14a28f5dc00d7b968 %}


##_2. Find the BinaryGap of the string_
   1) My approach was having a loop inside a loop, and iterate over the entire string/array and making it more complex. Yes, its horrible :) and we can do this in a better way.

   2) Here, we will be checking the entire string. we decide what to do when 1's and 0's are encountered.
{% gist https://gist.github.com/sureshpathipati/4fb3bd671b20afeabaad4a7099411b60.js %} 



__[Note]__
FlagVariable is required only when we intentionally pass a binary string starting with zero.

Let me know, if this can be done differently ;)

Thanks for your time.
PostgreSQL: What is it & How To Install it
Tags: beginners, tutorial, javascript, postgres
Published: 2019-09-04 15:29:14

---
title: PostgreSQL: What is it & How To Install it
published: true
description: PostgreSQL: What is it & How To Install it
tags: beginners, tutorial, javascript, postgres
series: Intro to PostgreSQL (for NodeJS & Express)
---

## Intro

I am creating a new series about PostgreSQL.

In this short article, we will learn how to install it.


## What is PostgreSQL?

- a free and open-source [relational database management system (RDBMS)](https://en.wikipedia.org/wiki/Relational_database) to manage data
- primarly uses [SQL (Structured Query Language)](https://en.wikipedia.org/wiki/SQL) to write commands
- primarly stores data in tables consisting columns and rows
- can get easily connected to backend applications (e.g. in Node, Python, Java etc.)
- comes with a terminal-based front-end named [psql](https://www.postgresql.org/docs/9.3/app-psql.html)

---

## How To Install it?

### Windows

1. Go to the [PostgreSQL download page](https://www.postgresql.org/download/windows)
2. Follow the instructions


### macOS

1. Go to the [PostgreSQL download page](https://www.postgresql.org/download/macosx)
2. Follow the instructions


### Ubuntu

1. Go to the [PostgreSQL download page](https://www.postgresql.org/download/linux/ubuntu)
2. Follow the instructions


### Arch

1. `pacman -S postgresql`


---

## Further Reading
[PostgreSQL Homepage](https://www.postgresql.org/)
[PostgreSQL Download](https://www.postgresql.org/download/)
[PostgreSQL on Wikipedia](https://en.wikipedia.org/wiki/PostgreSQL)
[SQL Syntax](https://en.wikipedia.org/wiki/SQL_syntax)

---

## Questions

- What's your favorite SQL database?
Code Story E6: Jonathan Perichon on Simple APIs
Tags: podcast, codestory
Published: 2019-09-04 15:24:55

{% youtube URn5vTYwZTk %}

Through a chance internship in LA, Jonathan Perichon made his way from France to the United States. In doing so, he fell in love with the culture and opportunity. After working for a startup requiring background checks for its users, he saw first hand how antiquated and slow the process can be. After about 6 months, he and his co-founder set off to build an API driven solution, facilitating the submission, reporting and workflow of background checks for candidate workers… and much more. 

In the above clip, Jonathan Perichon discusses why he loves simple APIs. If you like what you hear, check out the full episode below.

{% podcast https://dev.to/codestorypodcast/e6-jonathan-perichon-checkr %}