teleren/devto huggingface dataset:
A Question Diary Shortcut
Tags: shortcuts, showdev
Published: 2019-01-05 00:40:40

---
title: A Question Diary Shortcut
published: true
description: An IOS Shortcut that asks you a couple of questions every day
tags: shortcuts, showdev 
---

Earlier this week, I wrote [a post on my theme of the year](https://dev.to/_bigblind/new-years-resolutions-suck-pick-a-theme-of-the-year-2kh1). I wanted to put more *structure* in my life, in the form of systems that would help me improve in areas where I'm too scatterbrained, impulsive, or otherwise acting in ways that aren't making me happy or healthy in the long term.

The fundamental system I want to set up is a *feedback loop* with myself. Every day, I want to ask myself the same questions and see how my answers evolve. I tried to find an app to do it, but I couldn't find one that worked for me.

# The Shortcut

I created an IOS shortcut. It looks in my dropbox for the file `/diary/questions.txt`, and expects there to be a question on every line. It asks me each question in turn, and lets me dictate an answer. The responses are saved back to the diary folder in dropbox, named by the current date.

[You can download the shortcut here](https://www.icloud.com/shortcuts/c541d8c6d8f846c5834ee517cff2325b).
libVES: End-to-End Encryption API. Encrypt Everything without fear of losing the Key
Tags: security, encryption, c, linux
Published: 2019-01-04 22:47:04

---
title: libVES: End-to-End Encryption API. Encrypt Everything without fear of losing the Key
published: true
description: 
tags: #security #encryption #c #linux
---
<pre>
/*************************************************************************** 
 *          ___       ___ 
 *         /   \     /   \    <b>VESvault</b> 
 *         \__ /     \ __/    Encrypt Everything without fear of losing the Key 
 *            \\     //                   <a href="https://vesvault.com">https://vesvault.com</a> <a href="https://ves.host">https://ves.host</a> 
 *             \\   // 
 *     ___      \\_// 
 *    /   \     /   \         <b>libVES</b>:                      VESvault API library 
 *    \__ /     \ __/ 
 *       \\     //            <b>VES Utility</b>:   A command line interface to libVES 
 *        \\   // 
 *         \\_//              - Key Management and Exchange 
 *         /   \              - Item Encryption and Sharing 
 *         \___/              - Stream Encryption 
 * 
 ***************************************************************************/ 
</pre>
Source Code:
https://github.com/vesvault/libVES.c

VES utility docs:
https://ves.host/docs/ves-util

libVES Docs:
https://ves.host/docs/libVES-c
Flutter: Apple Music Card UI 
Tags: flutter, ui, android, ios
Published: 2019-01-04 21:46:21

---
title: Flutter: Apple Music Card UI 
published: true
description: 
tags: flutter, ui, Android, iOS
---

Flutter is great and building beautiful Uľ's is a breeze. In this tutorial I will show you how to get the Apple Music Card look with the colored drop shadow. Let's get started! 

_Note this isn't a Apple Music UI replication, but simply Apple Music inspired._

#shadowColor vs. boxShadow

The Material Widget has a shadowColor property, but it doesn't have the same look
property.

{% gist https://gist.github.com/AIDXNZ/58d1bdeb864b5b01d06655e73ca836fc %}

#Here's how it looks!
![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/dicm3us5jujjv6g3sllb.png)

This is what our card looks like now! You can customize this to fit your app’s theme by changing the blur and spread radius as well as the color.

_Let's change some properties..._

Let's change the blurRadius: 30.0 and the spreadRadius: 4.0 and see how it looks.

![Alt text of image](https://thepracticaldev.s3.amazonaws.com/i/ftgk4sj4oc98avd0mad8.png)

As we can see the spreadRadius broadened up the shadow and the blurRadius increase made for a more fuzzy cotton candy look.

#Conclusion 
Today I showed you a brief overview of the boxShadow property in which to show you how to make colorful Cards come to life. In essence you can tweak the settings to your liking and wahlah!
Enabling Dark Mode On Websites Based On Surrounding Light
Tags: webdev, javascript, experimental
Published: 2019-01-04 20:21:28

---
title: Enabling Dark Mode On Websites Based On Surrounding Light 
published: true
description: Switching between dark mode and normal mode on a web app based on the illuminant light around you.
tags: webdev, javascript, experimental
---

Now you can switch between a "dark mode" and "normal mode" on a website based on the surrounding light! It can really help in curating a better user experience based on the conditions users are viewing your website.

So, here's how you do it-

*Adding the short and simple javascript.*
```javascript

if ( 'AmbientLightSensor' in window ) {
  const sensor = new AmbientLightSensor();
  sensor.onreading = () => {
    console.log('illuminance level :', sensor.illuminance);
      if(sensor.illuminance < 15) {
            document.querySelector('body').classList.add('dark');
      }
      else {
            document.querySelector('body').classList.remove('dark');
      }
  };
  sensor.onerror = (event) => {
    console.log(event.error);
  };
  sensor.start();
}

```

Then, add specific css for your dark mode under the class you've just set. Like here I am adding and removing the class `dark` based on the level of ambient light.
You can play around with the `illuminance` value and see what works better in your case.

I also found [this cool experiment](https://twitter.com/tomlokhorst/status/837037624003031040) by [@tomlokhorst](https://twitter.com/tomlokhorst/), where he changed font weight based on ambient light using variable fonts.
However, he mentions further in the thread that he did not use the aforementioned `AmbientLightSensor` but it still makes a pretty good use case.

----------------

*Disclaimer:* The browser support for this feature is low. 
On chrome it's only available under a flag. Check the [caniuse](https://caniuse.com/#feat=ambient-light) stats for more details. Despite that the future of web is bright or in a dark mode, however you like it! :)


**EDIT-**
If you're getting an error, something like `AmbientLightSensor does not exist on type Window` while trying to make this work in Angular, [refer to this comment](https://dev.to/ananyaneogi/comment/8107) for a solution.


## Reference

- [Ambient Light Sensor W3C Spec](https://w3c.github.io/ambient-light/)
- Since I mentioned variable fonts, [here is an interesting read on that](http://www.alphabettes.org/responsive-variable-fonts/)
Hi (again), I'm Amara Graham
Tags: introductions
Published: 2019-01-04 20:10:20

---
title: Hi (again), I'm Amara Graham
published: true
description: My (re)introduction post
cover_image: 
tags: introductions
---

Rather than deleting the previous post, I figured I would just re-introduce myself, particularly after the whole name change deal.

My previous post says I've been coding for 8 years. I'm not sure when I started counting and if that needs to be incremented. So let's call it 8++.

You can find me on Twitter as [@MissAmaraKay](https://twitter.com/MissAmaraKay)

I live in the Austin, TX.

I work for IBM.

I mostly program in these languages: JavaScript, Node.js, and C# (Unity3d).

I am currently a developer advocate focusing on AI, Watson, and AR/VR. I've been dabbling in game dev to help the games industry understand where to use AI and how. 

Nice to meet you.
Incorrect string value issue during migration database in Jira.
Tags: jira, migration, database, troubleshooting
Published: 2019-01-04 20:09:40

---
title: Incorrect string value issue during migration database in Jira.
published: true
description: Incorrect string value issue during migration database in Jira.
tags: jira, migration, database, troubleshooting
---

# Problem
I was using H2 database (embedded database) for Jira but this caused a performance problem which consumes a lot of CPU.

> the embedded database can fail any time, it's not as secure as MySQL. It's just a basic DB for testing purposes. When your Jira instance grows you'll experience performance problems as well.

Quoted from: [So whats wrong with the embedded database?](https://community.atlassian.com/t5/Confluence-questions/So-whats-wrong-with-the-embedded-database/qaq-p/707696)

When I tried to migrate Jira database from H2 to MySQL, I got an error, 'Incorrect string value: '\xF0\x9F\x98\x96...' due to multibyte problems.

## My environment
- `$ lsb_release -a`: Ubuntu 14.04.5 LTS
- `$ mysqld -V`: Ver 5.5.62-0ubuntu0.14.04.1
- Jira v7.12.1

# Cause
MySQL seems not to handle well multibyte characters.

# Resolution
Use PostgreSQL instead MySQL. That's because you will have less multibyte problem by using PostgreSQL.[^1] The easiest way to migrate to PostgreSQL is the followings:

[^1]: I spent many hours on multibyte things, but many people recommend to convert your data's char-code into a specific char-code during import of Jira's data. I tried everything but all the approaches did not fix the problem in my case.

> 1. Create an export of your data as an XML backup. See Backing up data for details.
> 2. Create a new database on your new database server to house JIRA's data. See the appropriate database configuration guide in the Connecting JIRA to a database section for the database creation instructions.
> 3. Shut down your JIRA server.
> 4. Make a backup of your JIRA home directory and JIRA installation directory.
> 5. Delete the dbconfig.xml file in your JIRA home directory.
> 6. Restart JIRA and you should see the first step of the JIRA setup wizard for configuring your database connection.
> 7. Configure JIRA's connection to your new database (created in step 2 above) and click the 'Next' button.
> 8. On the 'Application Properties' setup page, click the 'import your existing data' link and restore your data from the XML backup created in step 1 above.

Quoted from: [Migrating JIRA's data to a different type of database server](https://confluence.atlassian.com/adminjiraserver070/switching-databases-749382658.html)

# Reference
- [SQL Exception while updating issues or importing data in JIRA applications with MySQL due to encoding](https://confluence.atlassian.com/jirakb/sql-exception-while-updating-issues-or-importing-data-in-jira-applications-with-mysql-due-to-encoding-134480131.html)
- ['Incorrect string value' error thrown when restoring XML backup in Confluence](https://confluence.atlassian.com/confkb/incorrect-string-value-error-thrown-when-restoring-xml-backup-in-confluence-777009599.html)
Overriding the Default Theme in Element UI with SCSS
Tags: scss, vue, css, styles
Published: 2019-01-04 20:01:25

---
title: Overriding the Default Theme in Element UI with SCSS
published: true
description: 
tags: scss, vue, css, styles
---

If you want to use the [Element UI library for Vue](http://element.eleme.io/#/en-US) (and you should) then you will quickly find yourself overriding specific styles in order to get it looking just right. They used to offer a tool for copying and generating a custom theme .css file to include in your project. This was a pain because it required another tool dependency to generate it, and that theme was completely isolated from any other styles preprocessors you might be using.

Element used to use CSS custom properties and PostCSS for pre-processing but they have migrated to SCSS now, and this makes it possible for us to tap into their variables if we also use SCSS/Sass in our project.

I have a big file full of variables at `src/styles/_settings.scss` - this file gets included at the top of all of my component scss files - and injected into each Vue scss style block in any single file components that use the `lang="scss"` attribute. This settings file is where I set up my color palette and create all my global variables that get used throughout the rest of the project.


### Instructions

First of all it's important to note that you should not import the element-ui theme css file directly like they [show on the instructions](http://element.eleme.io/#/en-US/component/quickstart).

```js
// DON'T ADD THIS LINE
import 'element-ui/lib/theme-chalk/index.css';
```

Instead you will import the scss files one at a time when you need them inside of your own components.

Add the following variable definition into your settings file.

```scss
$__color-primary: $my-primary-color; // primary color override for Element-UI (underscores are interchangeable with hyphens)
```

Let's say you are writing a custom "Tabs" component. You are going first import your variables at the top of the file.

```scss
@import "../../../styles/settings";
```

Then import the element-ui scss files.

```scss
@import "~element-ui/packages/theme-chalk/src/tabs";
@import "~element-ui/packages/theme-chalk/src/tab-pane";
```

Then you will need to write your custom tab selectors and tie it to the class names of the tabs the element-ui vue component will be using internally.

```scss
.tabs, .el-tabs__nav {
   // ...
   .tab, .el-tabs__item {
    // ...
    }
}
```

Any time you import the element-ui scss files your variables will override their variables. You can see [a list of all their theme variables here](https://github.com/ElemeFE/element/blob/dev/packages/theme-chalk/src/common/var.scss). When you override their variables you might get a parsing error from scss-lint if you have it installed. You need to change the leading two dashes (after the `$`) into underscores. Starting variable names with two dashes is the syntax for css custom properties, but it throws errors in some scss parsers. Luckily underscores and dashes are interchangeable in Sass variable names, for reasons that are now lost to the sands of time.
What free open API's do you use to demo code?
Tags: discuss, api
Published: 2019-01-04 19:58:39

---
title: What free open API's do you use to demo code?
published: true
description: 
tags: discussion, api
---

You are demoing some code. That code needs to hit an API... any API.

It's gotta be basic. Probably just an HTTP GET.

I found [REQ | RES](https://reqres.in), which looks interesting. There's also [The Cat API](https://thecatapi.com), which looks fun.

What do you reach for?
MailCatcher
Tags: php, mailcatcher, smtp, docker
Published: 2019-01-04 19:48:27

---
title: MailCatcher       
published: true
description: interceptar emails con MailCatcher
tags: php, mailcatcher, smtp, docker
---
En ocasiones, debemos realizar pruebas de nuestros métodos o proyectos
en las que de alguna manera deberemos enviar un email.

Ya sea en un entorno de pruebas o de desarrollo, y en anteriores experiencias
el protocolo ha sido, crear un email ficticio y enviartelo a tu bandeja de entrada , ya
sea de email, protonmail, yahoo?,,,, etc.

Muy profesional.

Desde hace bien poco, vengo utilizando una herramienta , [Mail Catcher](https://mailcatcher.me/), que 
precisamente sirve para esto. 
Se trata de un servidor **SMTP** que intercepta los mensajes de salida que enviemos al puerto
por defecto: **http://127.0.0.1:1025** .

La forma de instalarlo, más cómoda es utilizando una imagen de Docker **(Dockerfile)** utilizando
un fichero **.yml** y docker-compose instalado. Esto es:

<pre><code class="yml">version: "3"
services:
  mailcatcher:
    restart: on-failure:10
    image: dockage/mailcatcher:0.7.1
    ports:
    - "1086:1080"
    - "1030:1025"
</code></pre>

El puerto **1086** de nuestro host, se corresponderá con el **1080** del contenedor de Docker
y el **1030**, se corresponderá con el **1025** del contenedor.

De forma que para poder enviar un email a esta bandeja de entrada "virtual" , podemos configurar
nuestro fichero **.env** ( suponiendo que trabajemos con symfony 4.^) de la siguiente manera:


<pre><code class="yml">###> symfony/mailer ###
MAILER_DSN=smtp://127.0.0.1:1030
###< symfony/mailer ###
</code></pre>


Arrancamos el contenedor :
<pre><code class="yml">docker-compose up</code></pre>

Y ya podemos enviar nuestros emails, desde [SwiftMailer](https://swiftmailer.symfony.com/docs/introduction.html) , el [componente Mailer](https://symfony.com/doc/current/mailer.html) de **Symfony** , PHP u otra herramienta para el envío de correos electrónicos, que serán interceptados por
**MailCatcher**	y podremos visualizar lo que hemos enviado sin tener que utilizar correos electrónicos reales.

fdo: **roberto manchado**
New badge coming soon: 4 Week Streak
Tags: meta, rails, contributorswanted, writing
Published: 2019-01-04 18:43:50

---
title: New badge coming soon: 4 Week Streak
published: true
description: 
tags: meta, rails, contributorswanted, writing
---

We will be launching a new profile badge that folks can earn if they post on [dev.to](/) once a week for four weeks in a row. As it's the first week of 2019, we wanted to make a new badge that rewarded folks with writing goals in the new year. 

We try not to go overboard on gamification of the platform, but we see this as a fun reward for those struggling to sit down to write.

***

We have not yet written the functionality, but I promise we will do so by January 28th, when the first badges are to be awarded.

If you'd like to contribute the functionality yourself, feel free to make a PR.

Here is the file where the functionality would live:

### [app/labor/badge_rewarder.rb](https://github.com/thepracticaldev/dev.to/blob/master/app/labor/badge_rewarder.rb)

And the tests should go here:

### [spec/labor/badge_rewarder_spec.rb](https://github.com/thepracticaldev/dev.to/blob/master/spec/labor/badge_rewarder_spec.rb)

The function should be designed to run once a day and award the badge to anyone who has had one `article` with `published: true` in each of the past four weeks. No badge can be awarded more than once via validation, so it is not necessary to guard against that in the code.

Happy coding ❤️
Run Node Scripts or Gulp/Grunt Tasks From Gradle
Tags: githunt, javascript, gradle
Published: 2019-01-04 17:30:54

---
title: Run Node Scripts or Gulp/Grunt Tasks From Gradle
published: true
description: Run Node Scripts or Gulp/Grunt Tasks From Gradle
tags: 
  - githunt
  - javascript
  - gradle
---

I recently came across this Gradle plugin while getting started with Kotlin/JS. It will download Node as part of your build (so it doesn't even need to be installed on your CI server), let you run arbitrary Node scripts, and setup Gradle tasks that mirror your Gulp or Grunt tasks.

I haven't done much with it yet, but its potential for making one seamless build for full-stack Gradle projects is huge.

{% github srs/gradle-node-plugin %}
Free Rust server
Published: 2019-01-04 16:43:05

---
title: Free Rust server
published: true
description: 
tags: 
---

<p style="text-align: center;"><strong>Free Rust server&nbsp;</strong></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><strong>About :</strong></p>
<p style="text-align: center;">Hello I own a cuple of servers, and I want to give someone the&nbsp;opportunity to own/manage their own Rust server, The Rust server <strong>will</strong> be paided for.</p>
<p style="text-align: center;"><strong>How to enter :</strong></p>
<p style="text-align: center;">1. Add me on discord :&nbsp;<span class="username headerTagUsernameNoNickname-2_H881 weightSemiBold-NJexzi">Videogames2k</span><span class="discriminator">#7226</span></p>
<p style="text-align: center;">2. Message me why you want to own your own Rust server.</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><strong>Why I am doing this? :</strong></p>
<p style="text-align: center;">I meet people in servers on Rust and everything I ask them "why don't you make a Rust server" They always repound with <strong>two</strong> things are they are the following :</p>
<p style="text-align: center;"><strong>"</strong>1. I don't know how to code/make a Rust server.<strong>"</strong></p>
<p style="text-align: center;"><strong>or</strong></p>
<p style="text-align: center;"><strong>"</strong>2. I don't have any money to own a Rust server.<strong>"</strong></p>
<p style="text-align: center;"><strong>About the server :</strong></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;">You will be able to pick the following about the server&nbsp;</p>
<p style="text-align: center;">1. The server name</p>
<p style="text-align: center;">2. The server game</p>
<p style="text-align: center;">3. The server plugins (I will help with them)</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><strong>Things needed to enter :</strong></p>
<p style="text-align: center;">1. A microphone</p>
<p style="text-align: center;">2. A discord account</p>
<p style="text-align: center;">3. Must know english</p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><strong>[If you meet all the requirements please message me on discord]</strong></p>
<p style="text-align: center;">&nbsp;</p>
<p style="text-align: center;"><strong><img src="http://prntscr.com/m31ypc" alt="Will you be next?" width="500" height="500" /></strong></p>
Tea Break Challenge, Day #4
Tags: career, teabreakchallenge
Published: 2019-01-04 16:22:56

---
title: Tea Break Challenge, Day #4
published: true
description: Intuition can be tricky.
tags: career, teabreakchallenge
---

Intuition is a very powerful tool; it can lead to amazing outcomes, both good and bad. Reflect on a recent event where your intuition served you well.

http://tea.is/d/4
Let's talk about importance of concentration (for developers) 
Tags: developer, productivity, concentration
Published: 2019-01-04 15:17:37

---
title: Let's talk about importance of concentration (for developers) 
published: true
description: 
tags: developer, productivity, concentration
---
I have been thinking about this for a while now. Concentration is one the most important skill to have as a developer. 
The best developers I have seen have rock solid concentration, they are like saints meditating while working.

But in todays distracted world this is becoming a rare skill to find. I myself find it difficult to concentrate on many occasions.

What's your story? were you able to concentrate since day one or learned it with time ? did you used any techniques or it was long stretches of coding that taught you this?