teleren/devto huggingface dataset:
Motivation to Code
Tags: motivation, beginners, codenewbie, womenintech
Published: 2019-05-15 16:56:29

---
title: Motivation to Code
published: true
description: Finding motivation to code and work on projects while working full time in a different field.
tags: motivation, beginners, codenewbie, womenintech
---

When I take vacations from my full-time job, I work harder at my other job - learning how to code and create applications. However, I struggle to find the energy to sit down and focus on my projects after I work all afternoon/evening every day. It is sometimes harder on the weekends when opportunities to see family and friends arise.

So how do I combat this? I started by having an end-goal of being in an internship or junior developer position that is less physically demanding and more mentally stimulating that my current job. Well, that worked for a while, then the exhaustion and burn-out led to me not focusing on my learning or projects and just relaxing before and after work. 

Another plan - get a passion planner to lay out my goals for the year, month, week, and even day. I usually am pretty good at following through on to-do lists, especially things that need to get done. Great! (Plus, there are stickers, and the child in me *loves* stickers!) Since I got the planner on a Thursday, I figured I would start it the following week and had the weekend to plan. I finished the preparations (i.e. vision board, goals for the year, month, week, days for the first week) for it by Monday - so far, so good! By Thursday of that week, though, I already fell off that track and have not been back to it.

What worked for me? Well, I found out that I could change the favicon (aka: the icon found on the tab on each web page) and I got so excited that I have been finding myself working on my projects before *and* after work! I feel like I have so many things that I want to do right now that I am struggling with working on one thing at a time on my to-do list. This is a new problem, but much better than my problem of not finding the motivation to continue working on my projects.

My motivation definitely increased by being able to create my own [favicon](https://www.favicon.cc/), but why? It gave me the opportunity to have *my own brand* and display it on the projects that I am working on. Since it has my signature on it, I want it to be good, and I want to have a variety of applications to show off.

Putting my brand/name on my applications has helped me with my motivation. What works for you?
Survey: Building Apps Ethically

Tags: ios, android, startup
Published: 2019-05-15 16:45:09

Hey all!

I'm running an anonymous study on app development / tech ethics. I do a ton of work with indie devs and startup founders but with Facebook being wildly covered, one thing I wondered is that if "the smaller guys" care about ethics.

There's no right or wrong answers, I'm just looking to get a sense of things. So if you have 60 seconds to spare, your candid feedback would be so massively appreciated. 🙏🏼

https://docs.google.com/forms/d/18d5twj61AHDt8fmK1xXvIDlw4rOcsupqcpLkBaFZSlQ/edit#responses
CSS Only Calendar (Datepicker)
Tags: codepen, html, css, ui
Published: 2019-05-15 16:15:58

---
title: CSS Only Calendar (Datepicker)
published: true
tags: codepen, html, css, ui
---

<p>I originally intended to write this in PHP (The HTML controls), but decided to translate, then improve in Pug.</p>

<p>I'm just playing with HTML, and CSS loops.<p>

<p>I did not put too much animation in this example, because it will cause a slowdown on rendering.</p>

<p>I hope you'll like it, thank you!</p>

{% codepen https://codepen.io/takaneichinose/pen/PvWbaV %}
I Am an Internet Urban Legend From the 90s, Ask Me Anything!
Tags: ama
Published: 2019-05-15 16:09:42

I am the most famous employee McDonald's never had.

I started a humor blog in 1995 before the word "blog" was coined. In 1997, one of my jokes, [a snarky job application (with my name on it)](http://bulmash.com/04-10-97.html), was posted to a mailing list (not by me) with my intro stripped and the claim it was real added. It blew up. 

The joke has its own [Snopes page](https://www.snopes.com/fact-check/mcdonald39s-is-his-kind-of-place/). A few years ago, George Takei posted it to Facebook, claiming it was real. The joke reached drinking age last year, but still pops up now and then.

In the 90s I was also the technical editor of "Marketing Online for Dummies," wrote a snarky "where are they now" column that ran on [the Internet Movie Database](https://www.imdb.com) with tens of thousands of readers, and even ran the Internet Movie Database's homepage for a while.

Then, in the aughts, I taught myself to code and had more adventures in tech as an SDE, Developer Content writer, and Technical Evangelist. I also founded and run the [Seattle chapter of CoderDojo](https://www.seattlecoderdojo.com), which puts on free meetups where kids learn STEM skills. 

I have appeared on tech conference stages talking about how to [tell a robot to shake its booty](https://www.youtube.com/watch?v=USqhE2-qFxE), doing [a puppet show about being trolled by a broken knock-knock joke bot](https://www.youtube.com/watch?v=oF4OX1KzK58), and reading [a fairy tale about how a wily merchant tricked a king out of his army](https://www.youtube.com/watch?v=b_5ARK4B3kc) using a recursion algorithm and the king's willingness to over-optimize.

Ask me anything.
100% height to all divs - Gatsby
Tags: gatsby, css, react
Published: 2019-05-15 16:02:37

---
title: 100% height to all divs - Gatsby
published: true
description: Make a sticky footer which occupies bottom of the view if body does not fill the view and gets pushed down if body exceeds the view
tags: gatsby, css, reactjs
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ama1shf37ddtc0soal7l.png
---

#Use Case
A simple UI containing a header, main and footer. 

The footer should stick to the bottom if content above it (main) does not fill the whole view and get pushed down if the content (main) exceeds the view height.

![What we Have!](https://thepracticaldev.s3.amazonaws.com/i/9nmvdxs1nvu995y6zh0d.png)
<figcaption>What we Have!</figcaption>
![What we Want!](https://thepracticaldev.s3.amazonaws.com/i/cw5bmw5znid8bpqpmlao.png)
<figcaption>What we Want!</figcaption>     

#The Simple Solution
My first thought was assigning all html tags above the div which holds the `<main></main>` tags `height: '100%'`. 

##But!!! 😮😮😮
![gatsby html structure](https://thepracticaldev.s3.amazonaws.com/i/iho2sk8cs1n1x1ax2wel.png)<figcaption>Additional div __Highlighted__</figcaption> 

Gatsby uses [@reach/router](https://github.com/reach/router) which wraps the `Layout` component in an additional div. This is done so, 

> @reach/router can automatically manage the focus as part of making sure sites are usable by screen readers.

So you can see how adding style to a javascript injected div without any `class` or `id` might be an issue. 

#The Real Solution
Well the __real solution__ is actually still the same, we need to assign a `height: '100%'` to all parent divs.

* Create a new css file and name it `global.css`. I've put it in a separate styles folder in my repo.
```
/* 
 * Purpose:
 * Assign height: "100%" to
 * html, body, #___gatsby &  
 * div with role="group"
*/

html, body, #___gatsby {
    height: 100%;
}

body {
    margin: 0px;
}

div[role="group"][tabindex] {
    height: 100%;
}
```
* In the root of your directory, look for `gatsby-browser.js` and import `global.css`.
```
import './src/styles/global.css'
```
* I like to start my projects from scratch. This is my take on `Layout` Component. 
```
<div style={{
  height: '100%',
  display: 'flex',
  flexDirection: "column"
}}>
  <header>
    <Header siteTitle={data.site.siteMetadata.title} />
  </header>
          
  <main 
    style={{
      backgroundColor: 'pink',
      flexGrow: 1
    }}
  >{children}</main>
        
  <footer style={{
    backgroundColor: 'aquamarine'
  }}>
    © {new Date().getFullYear()}, Built with
    {` `}
    <a href="https://www.gatsbyjs.org">Gatsby</a>
  </footer>
</div>
```

#The Result as Promised !!
![Gatsby CSS - 100% Height](https://thepracticaldev.s3.amazonaws.com/i/z1cdwannqfd42xs7vqrx.gif)
<figcaption>Footer pushed down by content</figcaption>

> This solution is based on a [github thread](https://github.com/gatsbyjs/gatsby/issues/7310).
RFC: JSONx Framework
Tags: showdev, java
Published: 2019-05-15 15:46:12

Hi dev.to community, I wanted to share an open-source project I released 2 days ago, and request for comment. The project is called **JSONx Framework**, and it is created to help developers work with JSON in Java. I started this project in 2015, and have invested hundreds and hundreds of hours into it. In short, the **JSONx Framework** provides:

1. JSON Schema Definition Language (JSD), for Consumer Driven Contracts, for instance.
2. A Java API for binding to JSDs, implemented with annotations to be light-coupling.
3. A JSD->Java binding generator, and a Java->JSD reverse generator.
4. A `jsonx-maven-plugin`, for generating binding classes during the `generate-sources` phase, for instance.
5. A JAX-RS provider for `MessageBodyReader` and `MessageBodyWriter`, to plug into a JAX-RS runtime.
6. A sample project called: "Consumer Driven Contracts".

The project is _thoroughly_ tested via a custom test framework that generates random JSON documents (392000 with each run) conforming to a schema that expresses the full declarative scope of the JSD language, across all success and failure cases.
The project is available here: [JSONx](https://github.com/jsonx-org/).
I would very much appreciate a glance, a star, or trying it out. It has been a loooooong time coming for me to release this, and I'm excited contribute this work to the open-source community.
You Don’t Need to Be a JavaScript Expert
Tags: javascript, beginners
Published: 2019-05-16 13:28:29

---
title: You Don’t Need to Be a JavaScript Expert
published: true
tags: JavaScript,Beginner
canonical_url: https://carlanderson.xyz/you-dont-need-to-be-a-javascript-expert/
cover_image: https://images.unsplash.com/photo-1507679799987-c73779587ccf?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjExNzczfQ
---

Learning JavaScript, there's a question that burns in everyone's mind: "When will I be done? When will I finally be an expert?" - You've fought hard, toiled for months, and you have a good grasp of the basics, but how long until you finish?

After all this effort, you still haven't learned about functional programming; you don't know how prototypal inheritance works under the hood; how do you actually _use_ generators?

_How much more time before you become a master and finally take that next step?_

I'm going to put this out there: how much JavaScript you know doesn't matter. You should be taking that next step _now_.

It's easy as developers to want to see the entire picture before taking the first step. It's admirable to think ahead, but only if you aren't paralyzed by all the things you don't know.

You should put aside that long list of JavaScript you haven't learned. Instead, start working on the projects you want to, whether it's learning React/Vue, or creating a fun project, then focus on this much shorter list: _What do you need to learn right now?_

Don't worry about not knowing enough. There is always time to go back and learn more.

[Having a hard time learning JavaScript? Sign up to my newsletter for articles like this straight to your inbox](https://pages.convertkit.com/9f030a68c9/cd303b3d7b).
Create Errbot backend/storage plugin as PyPI package
Tags: python, errbot
Published: 2019-05-15 15:04:09

In develoving some Errbot plugins, I am thinking that storage and backend plugins have better managed as package (if possible, should be register at PyPI)

# 1. In bootstrapping, Errbot does not install dependencies of backend and backend.

To run bot, I call `errbot` command. In this command, load plugins in order of storage, backend and bot-plugins.
When bootstrap load storage and backend plugin, it does not check dependencies.

Actually some plugins let to install dependencies by command-line.

ex:

- https://github.com/errbotio/errbot-backend-skype
- https://github.com/Vaelor/errbot-mattermost-backend

If plugins have dependencies and need to install manually these, I think better to define as module and package. 


# 2. In running, Errbot does not change dynamically storage and backend.

Errbot is running as daemon generally. for that reason, storage and backend plugin will not almost be changed in running.

Therefore, these can be managed as requirements together with Errbot core.
If this, `pip install -r requirements.txt` in your local repository can install all dependencies.

ex: (these plugins are not registered in PyPI)

```
errbot
errbot-backend-gitter
errbot-storage-firebase
```

# Create as project

## List of files

Project structure is same to standard python package.

- `setup.py`
- `setup.cfg`
- `README.rst`
- `MANIFEST.in`
- `errbot_backend_demo`
  - `__init__.py`
  - `demo.py`
  - `demo.plug`

## Writings 

### `setup.py`

It can write simply.

```python
#!/usr/bin/env python
from setuptools import setup

setup()
```

### `setup.cfg`

Currently, all metadata can write in setup.cfg.
Please define `options.package_data` section and `include_package_data` key  to include .plug file as installation resource.

```ini
[metadata]
name = errbot-backend-demo
version = attr:errbot_backend_demo.__version__
author = Kazuya Takei
author_email = attakei@example.com
description = Demo backend plugin for Errbot
long_description = file:README.rst

[options]
install_requires = YOUR_DEPENDENCIES
packages = find:
include_package_data = True

[options.package_data]
errbot_backend_demo = *.plug
```

### `LICENSE.rst`

Write normally.

### `MANIFEST.in`

As same as `setup.cfg`, define .plug as include file.

```
include errbot_backend_demo/*.plug
```

### `__init__.py`

Define version of package here. And define function to return path of installation path.

```python
from pathlib import Path


__version__ = '0.0.1-alpha.1'


def get_plugin_dir() -> str:
    module_dir = Path(__file__).parent
    return str(module_dir)
```

### `demo.py` and `demo.plug`

Write normally as plugin.


# Use in Errbot config.py

If plugin define as package by these, you can write config.py to use plugin.

```python
import errbot_backend_demo

BOT_EXTRA_BACKEND_DIR = errbot_backend_demo.get_plugin_dir()
BACKEND = 'Demo'
```
Weekly Picks #75 — Development Posts
Tags: javascript, productivity, webdev, vscode
Published: 2019-05-16 10:05:13

---
title: Weekly Picks #75 — Development Posts
published: true
tags: javascript,productivity,webdev,vscode
canonical_url: https://medium.com/daily-now/weekly-picks-75-development-posts-edf0fae1b9e
cover_image: https://cdn-images-1.medium.com/max/1024/1*CBE9zwNXuJioz1_UUukZhA.jpeg
---

> If everything seems under control, you’re just not going fast enough

### Weekly Picks #75 — Development Posts

- [Improve your workflow with these awesome CLI tools](https://app.dailynow.co/r/ac24617e1158a0a21f9e17148016204f) by [Dylan Tientcheu](https://medium.com/u/8e5a4a00345c)
- [12 tips for writing clean and scalable JavaScript](https://app.dailynow.co/r/daecf96e8a8510b533333c1a0295dc0f) by [Lukas Gisder-Dubé](https://medium.com/u/e529c47d0c9a)
- [Rethinking loading states for the modern web](https://app.dailynow.co/r/f7a89cd902342153f6e86f0f8337a500) by [Simon Schwartz](https://medium.com/u/4fa5f4692997)
- [JavaScript console is more than console.log()](https://app.dailynow.co/r/4f3a7fbcd26ab7844acad63c8afb6a1c) by [Grigor Khachatryan](https://medium.com/u/10727a0f02a7)
- [Top-5 popular programming languages to learn](https://app.dailynow.co/r/edd7b2aac5a05c507c67fa1911af7047) by [John Selawsky](https://medium.com/u/390a59d672a2)
- [7 VS Code Extensions that will make your life significantly easier](https://app.dailynow.co/r/f3ad8fb2cd76bff2edd7e22ff14878b5) by [Jason Gomez](https://medium.com/u/ada7af6b126a)
- [Developer’s choice: an overview of the best front-end frameworks in 2019](https://app.dailynow.co/r/95ed67fc2cbf32bf96733bd7dba38b21) by [WebDataRocks](https://medium.com/u/e334c2078da7)
- [5 CLI Utilities to Boost Your Productivity](https://app.dailynow.co/r/12027f90edfd6e36e27dac7c48929848)
- [650 Free Online Programming & Computer Science Courses You Can Start This Summer](https://app.dailynow.co/r/c69ba94baa06769789cdcd1989f67ae4) by [Dhawal Shah](https://medium.com/u/587ae1d1b9ba)
- [How You Can Become A Productive Developer By Escaping Tutorial Purgatory](https://app.dailynow.co/r/46b0290ae120f3a3a4d8ca8e9c26dc36) by [B. Remus](https://medium.com/u/5af984ee1851)

* * *

[_Thanks to Daily_](https://www.dailynow.co/) _developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab._

[![](https://cdn-images-1.medium.com/max/1024/1*7bwIhcH467BKX5Ni8XWpQg.jpeg)](https://www.dailynow.co/)
What are your five most used terminal commands?
Tags: linux, terminal, unix, discuss
Published: 2019-05-15 12:59:49

---
title: What are your five most used terminal commands?
published: true
description: community post to share our most used terminal commands.
tags: linux,terminal,unix, discuss
---

**I start:**

```
     1	1874  18.3942%     git
     2	709   6.95917%     sudo
     3	622   6.10522%     cd
     4	565   5.54574%     kubectl
     5	480   4.71143%     docker
```



I found this nice gem in [the-book-of-secret-knowledge](https://github.com/trimstray/the-book-of-secret-knowledge/blob/master/README.md#list-of-commands-you-use-most-often). (A good link for any terminal user. Have a look!)


**show your top 5 most used commands including their usage %**
```bash
history | \
awk '{CMD[$2]++;count++;}END { for (a in CMD)print CMD[a] " " CMD[a]/count*100 "% " a;}' | \
grep -v "./" | \
column -c3 -s " " -t | \
sort -nr | nl |  head -n 5
```
*(the original was slightly modified to only show the top 5, instead of 20)*

I tought it would be fun to share our most used commands here. Show me yours! ;)


## ❤️ Let's connect!
I would love to grow my network with other tech enthusiasts. Let's connect here or over on twitter! [👋 @langhard](https://twitter.com/langhard) 

## Heads up
I mean I almost don't need to say this, but: **Please have a close look at your commands before you share them, don't share private information!**
Don't make fun of JavaScript
Tags: javascript, frontend
Published: 2019-05-15 12:57:15

---
title: Don't make fun of JavaScript
published: true
description: I need your help :)
tags: javascript, front-end
---
<div align="center">
  <img src="https://42f2671d685f51e10fc6-b9fcecea3e50b3b59bdc28dead054ebc.ssl.cf5.rackcdn.com/illustrations/code_review_l1q9.svg" alt="Dont't make fun of JavaScript" width="400"/>
  <br>
  <p>
    <em>Credits: illustration by <a href="https://undraw.co/">unDraw</a></em>
  </p>
</div>

## I need your help :)

I am working on a presentation that will be based on this repository: https://github.com/pixari/dmfojs

It would be great if you could help me/contribute/share/star/anything you want.


## What is it?

JavaScript is a easy to learn and easy to use or at least we can all agree that has a attractive and gradual learning curve.
In fact, anyone can run its first "Hello World!" script in 1 minute just opening the browser's console and typing "console.log('Hello World!')". 

This is one of the (many) reasons why it is one of the most widely used programming language supported by an extremely large community.

Despite those unquestionable greatest attribute, JavaScript has also a bad reputation: I heard it's the "worst language in the world", or "it's totally unreliable" and "it's just  stupid interpreted language used to animate buttons".

I understand where all these concerns are coming from, but I'm truly convinced that JavaScript it's just the world's most misunderstood programming language.

That's why I decide to start collecting all the jokes, the critics and the misconceptions about JavaScript and try to 
demystify most of them.

Feel free to contribute 🙏

https://github.com/pixari/dmfojs
Optimizing cache with predictive expire and compression
Tags: redis, cache, stampede, compression
Published: 2019-05-15 12:31:45


---
title: Optimizing cache with predictive expire and compression
published: true
description: Some tricks to improve cache performance
tags: redis, cache, stampede, compression
---

One of the obsecure problems in very high traffic scenarios is **cache stampede** or the **cache miss-storm**. Turns out it's not that hard to solve if you know what you are doing. Also with Redis streams picking up and people storing larger pay loads in Redis, reading or writing large payloads can be now be slower. In following talk I talk about details of not only what these problems are, but also how can we fix them. So without further ado:

{% youtube QkUz2_kRV9g %}

### Slides
{% slideshare r4750Et9lRXplt %}

### Simulation demo
{% replit @maxpert/DebounceSimulator %}


### Resources/References
 - [Optimal Probabilistic Cache Stampede Prevention](http://www.vldb.org/pvldb/vol8/p886-vattani.pdf) Paper
 - Original article [Speeding up Redis with compression](https://doordash.engineering/2019/01/02/speeding-up-redis-with-compression/)
How to pass variable to inline background image in Vue
Tags: vue, imagevue, javascript
Published: 2019-05-15 12:30:34

---
title: How to pass variable to inline background image in Vue
published: true
description: Multiple ways to use Vue variable in inline HTML
tags: vuejs, vue, image vue, javascript
---

![Cover](https://jakzaizzat.com/wp-content/uploads/2018/10/How-to-pass-variable-to-inline-background-image-in-Vue.png)


Passing a style binding into Vue is easy. You can pass like this

```vuejs
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
```

Example from Vue official website

You can use directly from the variable like this

```vuejs
<div class="progress">
   <div class="progress__fill" :style="{width: progress}"></div>
</div>

<script>
export default {
    props : ['percent'],
    data() {
        return {
            progress: this.percent + '%'
        }
    }
}
</script>
```

If you’re same like me, which is I liked to use image as a background image into the div.

I think this kind of method will make the div has a consistent size when the browser is changing and can handle different type of image size.

Normal HTML would look like this

```vuejs
<div class="box" style="background-image: url('<https://vuejs.org/images/logo.png>')"></div>
```

But how would you pass the data if the background image is dependent on the data binding; It’s a little bit messy because we need to deal with special characters in one string.

There are 2 ways to handle it.

## 1. If you have a static data

```vuejs
<template>
    <div class=" bg-no-repeat bg-cover  bg-white hero relative" :style="{ backgroundImage: `url(${backgroundUrl})` }"></div>
</template>

<script>
import backgroundUrl from '~/assets/img/bg-wp.png'
export default {
  data() {
    return {
      backgroundUrl
    }
  }
}
</script>
```

Import the file and pass it into Vue data binding.


## 2. Dynamic data

```vuejs
<template>
    <div class="min-h-screen bg-grey bg-cover flex items-end block md:fixed w-full md:w-1/2 shadow-md" :style="{ backgroundImage: `url(${member.coverImage})` }">
        <p>{{ member.name }}</p>
    </div>
</template>

<script>
export default {
  data() {
    return {
      member: {
                name: "Jakz",
                coverImage: "<https://vuejs.org/images/logo.png>"
            }
    }
  }
}
</script>
```

You can directly pass the variable into the inline-style


Original submitted from [my blog](https://jakzaizzat.com/how-to-pass-variable-to-inline-background-image-in-vue/)