teleren/devto huggingface dataset:
100 days of code round 2 update
Tags: 100daysofcode, beginners, codenewbie
Published: 2020-02-23 08:31:09

 I've been absent from writing because I was planning to do some book reviews. Unfortunately my good laptop finally took, uh, I mean decided to not work. I'm still out on the road, so can't complete any android work, which means I will postpone my book reviews for now. 

Instead, to keep coding, I'm doing some ruby on a chromebook I've installed linux on. Good enough for that :) when I go home in 8 days I'll hopefully get my laptop fixed and pick up where I left off.

I'm on my second round of #100DaysOfCode, day 28. Hard to believe I've been coding that long. My confidence has definitely grown. So much that I can look at quite a lot of code and be able to figure out what it's doing, and understanding the basics of most languages isn't hard. The differences seem to boil down to syntax, for the most part. So far I've learned the basics of JavaScript, Java, Kotlin, and Ruby. I didn't plan on hopping around as much as I have. I spent the most time learning Java, and took a break from it when I went home for a couple weeks and decided to do something fun which took me into Kotlin/android.

I am honestly pretty satisfied with where I am so far. I'm not near job hunting yet, but the longer I program, the more sure I am that a dev job is in the cards for me. Hopefully my next company (which I've interviewed for, but isn't a dev job, but has a software engineering department) will see my potential and my dream, and help make it happen. Either way I will keep coding.
Line Clampin'(Truncating Multiline Text) - the smarter way
Tags: css, sass, scss, javascript
Published: 2020-02-23 07:46:10

Line Clampin' is especially useful for cards (news, blogs and etc.) info text where you'd like to keep the cards equal height and thus all text that is bigger than your strict max number of lines to be cut off.

Please mind that I came across so many JS libraries that tend to do this technique and I'm really not a fan of bloating my projects with unneeded/overcomplicated solitions, not to mention the possible negative effect on load times and rendering speed 🐌.

I'm also one of those front-ends that still have to support legacy browsers like IE11 (poor me 😀) and so let me present you my approach that is lightweight, effective and modern + legacy browsers compatible.

**TL;DR -- check my codepen demonstrating the approach in action** https://codepen.io/porg/pen/VwLmOpV

Let's say we want to cut off the text on the 3-rd line (anything bigger is cut off and ellipsized). How big is a line though? Well it depends on the font-size of the text and it's line-height. We got everything we need to do a mixin that does our job:

```scss
@mixin limitTextToLineNumbersMixin( $font-size: $font-size-base, $line-height: 1.2, $lines-to-show: 3 ) {
  max-width: 100%;
  height: calc(#{$font-size} * #{$line-height} * #{$lines-to-show});
  font-size: $font-size;
  line-height: $line-height;
  overflow: hidden;
}
```

And now for the ellipsis ... a bit of vanilla JS (we split the text to be clamped by words and remove those words that are out of visible text area boundaries. In the end the ellipsis got appended.

```javascript
 function ellipsizeTextElement(element) {
    var nodeList = document.querySelectorAll(element);
    var elements = Array.prototype.slice.call(nodeList, 0);
    elements.forEach(function(element) {
      var wordArray = element.innerHTML.split(' ');
      while (element.scrollHeight > element.offsetHeight) {
        wordArray.pop();
        element.innerHTML = wordArray.join(' ') + '...';
      }
    });
  }
```

**BONUS** 💡
Why limiting ourselves to 3 lines when we can tweak that from HTML (let's say we have different sections of cards and we want each to have different line clampin' rules)
We can easily add 'lines-X' class to our element that is to be clamped. Then we need some more SCSS (I restricted the number of lines from 1 to 6 and applied this to all the headings for my project' purposes):

```scss
$heading-font-sizes: (h1: $h1-font-size, h2: $h2-font-size, h3: $h3-font-size, h4: $h4-font-size, h5: $h5-font-size, h6: $h6-font-size );

@for $lines from 1 to 6 {
  h#{$lines} {
    $headingFontSize: map-get($heading-font-sizes, h#{$lines} );

    @for $lines from 1 to 6 {
      &.ellipsize-element.lines-#{$lines} {
        @include limitTextToLineNumbersMixin( $headingFontSize, 1.5, #{$lines})
      }
    }
  }
}
```

Have a better approach 🤓? I'm all ears 👂. Happy coding guys and gals 🙌
Fallacies of Async programming
Tags: showdev, java, codequality, mongodb
Published: 2020-02-23 07:36:14

Hi Guys,

I want to share another fallacy of async programming where developers often think  it is a synchronous program. This situation just happened when I was doing pair programming with one of the team members. There was a an existing code this person has already written and  we were debugging why it is not save as well as not throwing exception. In order to make it more clear.

Consider below code snippet which looks simple, ignoring the syntax and just showing async nature stuff.

public class BasicCrudOperations
caller() {
calledMethod(arg1, arg2, arg3);
}

private calledMethod(String a, String b, String c) {
 System.out.println("This is my work"); 
try {
()-> { MongoDB.save(a,b,c);
}
 
}
} catch(Exception e) {
  e.printStackTrace();
}

In the above code caller is calling called method in sync fashion and doing try catch around async lambda expressions. Now developer expects that if something fails exception will occur and being caught in catch block. Essentially this will never happen as call to Mongo save operation happens in separate thread nothing to do with current thread calling calledMethod from caller. This trap will not be visible until we go to production/preprod/testing environment where things go still developer wonder why i am not seeing exception. Make sure you handle such scenarios proactive during reviews. 
Happy Coding.
Rails Sidekiq configuration for micro services on reverse proxy.
Published: 2020-02-23 07:22:36

We have 4 API services running on ECS. We used a single domain for all the services and segregated them with the namespace in routing. For namespace routing and pointing to Docker containers, we have used Traefik. We can do the same thing using Nginx and some other reverse proxy too.

Link: https://blog.joshsoftware.com/2019/07/31/rails-sidekiq-configuration-for-micro-services-on-reverse-proxy/
Why ReactJS using Object.is() for comparison is better than using `===`
Tags: react, javascript
Published: 2020-02-23 06:59:16

ReactJS uses `Object.is()` to compare the hooks' dependency array, instead of using `===`. It actually is a better choice.  First of all, [this post stated how `Object.is()` is different from `===`](https://dev.to/kennethlum/how-does-javascript-s-object-is-work-5h5p).

Why is it better? It is because:

 1. If we did something for the dependency array `[1, 2, NaN]`, and the next time, it is `[1, 2, NaN]` again, then `===` would have indicated them different, because `NaN !== NaN` in JavaScript. (it is the only value that is not `===` to itself in JavaScript). Example:
    
    https://stackblitz.com/edit/react-yxngvv?file=index.js
     
    ```javascript
       [1, 2, NaN]
    ```
    
    is considered to be the same the next time `useEffect()` or `useMemo()` sees it. They are both called twice only in the example: the first time, and when the array changed from `[1, 2, NaN]` to `[1, 3, NaN]`.
    
 2. On the other hand, for the dependency array `[1, 2, 0]`, if the next time, the dependency array is `[1, 2, -0]`, ReactJS would actually consider them to be different, due to `Object.is()` indicating `0` and `-0` are different.  In a website built by NASA, or even by college students, `0` and `-0` actually may give different results for computations.

Example: 

https://stackblitz.com/edit/react-djex2r?file=index.js

The console log shows that the function inside of useEffect() and useMemo() are called every time. You can also actually see the output of the component showing a result alternating between `Infinity` and `-Infinity`.  ReactJS is actually on a "safer side", in which ReactJS will do something again, when `0` becomes `-0`, because the results could be different, and it won't be desirable when the screen should display `-Infinity` but it keeps the `Infinity` unchanged on screen.
React or Angular or Vue.js or Others ??
Tags: webdev, javascript, discuss, beginners
Published: 2020-02-23 06:55:43

Hi all, I like to get an opinion from you guys for JS framework selection, so i created an Twitter polling to make more devs to give opinion/suggestion about javascript framework for Enterprise application and it will help to choose.

Polling link : https://twitter.com/Rajkumar_MP/status/1231104232436228096

[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9if29nfeg23m01kbizol.JPG)](https://twitter.com/Rajkumar_MP/status/1231104232436228096)
What do you know about Zalgo?
Tags: zalgotext
Published: 2020-02-23 06:33:55

---
title: What do you know about Zalgo?
published: true
description: 
tags: zalgotext
---

Hey guys,

Are you aware of **Zalgo text**? Zalgo is basically a story about a character who usually loves being behind the wall. And that introduced a specific style of writing called Zalgo texting.  


By following @nickymarino's guide, I tried to create this amazing Zalgo text generator: [https://zalgotextgenerator.website/](https://zalgotextgenerator.website/) Let me know guys how's it.
Pending cops in Rubocop to make upgrade easier
Tags: ruby, rails, rubocop
Published: 2020-02-23 16:59:08

---
title: Pending cops in Rubocop to make upgrade easier
published: true
date: 2020-02-23 05:04:16 UTC
tags: ruby,rails,rubocop
canonical_url: https://prathamesh.tech/2020/02/23/pending-cops-to-make-updating-rubocop-easier/
---

Whenever a new version of Rubocop comes out, there are always some new cops. If our code is not compatible with new cops, then the `rubocop` build fails. With every new release, we have to spend time to make our code compatible with the new cops. Well not any more!

Starting Rubocop 0.79.o onwards, new cops will be marked as _ **pending.** _ Rubocop will print a message listing the pending cops so that users know which cops are introduced in a release.

<!--kg-card-begin: code-->
```
➜ codetriage git:(master) ✗ rubocop
The following cops were added to RuboCop, but are not configured. 
Please set Enabled to either `true` or `false` in your 
`.rubocop.yml` file:
 - Style/HashEachMethods
 - Style/HashTransformKeys
 - Style/HashTransformValues
```
<!--kg-card-end: code-->
### Disabling all cops by default

Rubocop also provides a feature to disable all cops by default. This can be achieved as follows:

<!--kg-card-begin: code-->
```
# .rubocop.yml

AllCops:
  DisabledByDefault: false
```
<!--kg-card-end: code-->

In this case, we need to explicitly enable selected cops that we want to use in our codebase.

<!--kg-card-begin: code-->
```
# .rubocop.yml

AllCops:
  DisabledByDefault: false

Layout/ArrayAlignment:
 Enabled: true

Layout/HashAlignment:
 Enabled: true

Layout/ParameterAlignment:
 Enabled: true
```
<!--kg-card-end: code-->

When all cops are disabled as shown above, the warning about pending cops is not shown. Because in this case, we are in control of which cops we are using in our application.

### What happens to pending cops?

Pending cops will be marked as enabled or disabled during a major release of Rubocop. In case of Rubocop, next major release will be 1.0. This policy is on the same lines of how ESLint introduces new linters.
In JavaScript or PCRE regular expression, you have to specify a `0` for a minimum quantity
Tags: javascript, pcre, regularexpression
Published: 2020-02-23 04:39:48

If we try to match "3 characters or more" in JavaScript:

```javascript
> "abcde".match(/.{3,}/)
[ 'abcde', index: 0, input: 'abcde', groups: undefined ]

> "ab".match(/.{3,}/)
null
```

But if we want to do "3 characters or less" (or 80 characters or less, to look for short lines), we can't omit the "lower bound" of the range. We have to supply a `0` in `{0,3}` or `{0,80}`:

```javascript
> "abcde".match(/.{0,10}/)
[ 'abcde', index: 0, input: 'abcde', groups: undefined ]

> "abcde".match(/.{,10}/)
null
```

If you are used to writing regular expressions in Python or Ruby, you actually can omit the lower bound, and if you make it a habit, you may wonder why it doesn't work in JavaScript or in Bash's grep using PCRE mode.  So remember to always put in that `0`.

You may wonder, then what does `.{,3}` match? The answer is: verbatim

```javascript
> "a{,3}".match(/.{,3}/)
[ 'a{,3}', index: 0, input: 'a{,3}', groups: undefined ]
```

The `a` matches the `.`, and the `{,3}` is matched "verbatim".
How does JavaScript's Object.is() work?
Tags: javascript
Published: 2020-02-23 04:26:25

Sometimes you see of frameworks like ReactJS uses [`Object.is()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is), and how can you think of it?

It really is just the same as `===` except two cases:

```javascript
> 0 === -0
true

> Object.is(0, -0)
false

> NaN === NaN
false

> Object.is(NaN, NaN)
true
```

`Object.is()` works just like `===` except these two cases, so next time when you see `Object.is()`, you can think of it roughly equivalent to `===` except these two minor details.

This is in fact the comparison method used in ReactJS Hooks, such as `useEffect()`, where the dependency array elements are compared using `Object.is()`.
Use comments to unit test your code.
Tags: supabase, javascript, testing
Published: 2020-02-23 04:18:23

At [Supabase](https://supabase.io) we love writing as little code as possible, so we decided to combine our unit tests with same JSDoc comments that power VSCode's IntelliSense.

## Intro to JSDoc

If you've never heard of [JSDoc](https://jsdoc.app) before, you've probably seen it. It's the comments that go above a Javascript method or class like this:


```js
/**
 * Returns the sum of 2 numbers
 * @param {number} a The first number
 * @param {number} b The second number
 */
export const sum = (a, b) => {
  return a + b
}
```

## The @example tag

JSDoc has a tag, [`@example`](https://jsdoc.app/tags-example.html), which shows a developer how to use a documented item. 


```js
/**
 * Returns the sum of 2 numbers
 * @param {number} a The first number
 * @param {number} b The second number
 * @example
 * // returns 3
 * sum(1, 2)
 */
export const sum = (a, b) => {
  return a + b
}
```


Although the structure is a bit different, this is very similar to [Elixir's doctests](https://elixir-lang.org/getting-started/mix-otp/docs-tests-and-with.html). Elixir has the additional benefit that you can use these comments to run your tests:

| ![Elixir doc tests](https://dev-to-uploads.s3.amazonaws.com/i/9lyo7hut1bv7z9vz8mif.gif) | 
|:--:| 
| <small>*"4 doctests"*</small> |

So we decided it would be pretty cool to implement the same functionality with Javascript: [@supabase/doctest-js](https://github.com/supabase/doctest-js).

Doctest-JS uses a very similar format to Elixir's Doctests, using `//=>` to specify return values.

```
/**
 * @example sum(1, 2)
 * //=> 3
 */
```


## Doctest-JS

If you want to try this on your own code, it's very simple:

### 1. Install

```sh
npm install @supabase/doctest-js
```


### 2. Write @example comments

Create a JSDoc style @example on any functions that you want tested.

For example, create a file called `sum.js` and add this code:

```js
/**
 * Returns the sum of 2 numbers
 *
 * @example sum(1, 2)
 * //=> 3
 */
export const sum = (a, b) => {
  return a + b
}
```

### 3. Run the tests

Import the doctest function in your test suite and point it at the file.

For example, create a file called, `test.js` and add this code:

```js
import doctest from '@supabase/doctest-js';

describe('Doctests', () => {
  // file paths are relative to root of directory
  doctest('sum.js')
})
```

And then simply run `node test` and you get well documented, tested code, without having to maintain any additional code.

---- 

You can see [doctest-js](https://github.com/supabase/doctest-js) in action over at our [postgrest-js](https://github.com/supabase/postgrest-js) library:

![DocTests](https://dev-to-uploads.s3.amazonaws.com/i/m8jn6yrgjbsg88i3pjl9.gif)

Watch and star [doctest-js](https://github.com/supabase/doctest-js) to keep updated about new releases.

![Watch this repo](https://gitcdn.xyz/repo/supabase/monorepo/master/web/static/watch-repo.gif "Watch this repo")
Personality Determination Algorithm.
Tags: productivity, algorithms, python
Published: 2020-02-23 03:33:24

Using <b>Linguistic Analysis Techniques</b> we could determine the personality and influence of someone based on text, the steps towards determining influence involves <b>word frequency</b> usually a person of bad influence would perhaps do unhealthy things or depending on your definition of bad influence, they probably wouldn't be able to curse a lot either. If we apply the non-cursing rule(which they can curse but excessive amounts of cursing would be added to "bad influence" category, the steps you could take in this case is:<br /><b>1. Blacklist file<br>2. Frequency count towards blacklisted words.</b><br> So if they said <i>let's go to that <b>censored</b> house and pop <b>censored</b></i> using the frequency count of blacklisted words we would know that they said a blacklisted word 2 times. Does this make them bad influence? No but let's say that they increased the frequency count within a short amount of time. Usually a person that curses a lot rely on a lot of impulsiveness which they have a higher chance of being bad influence, in python we could implement:<br> ```python
x = input("Insert word: ")
blacklist = ["punk","kill","drugs"]
y = x.count(blacklist[0])
print(y)
```
<b>^NOTE: This example isn't necessarily recommended, it is suggested that you don't allow user input, but rather user data in a file.</b>

And what you could do to make it better is by converting the input into a list using <b>list()</b> and split it by spaces using <b>split()</b> or vice versa and then check if any of the strings are in the blacklist, if so get the index of the blacklisted word and put it within <b>x.count(blacklist[index])</b> and then compare it with the user inputted list and see how many times it occurred, and then based on the occurrences, tag it as either negative or positive and using this small intel we could try to determine the personality even further.

<b>References:</b><br>https://monkeylearn.com/text-analysis/<br><a href="https://docs.google.com/document/d/1cAqOFXADD68df1q73IdZpSk3iYzgQU426HS7zjJo7K8/edit?usp=drivesdk">unfinished research paper</a>

Also using datasets of positive, negative and multiple phrases used by people with certain disorders you could even take this a bit further. e.g. determining if someone is psychotic based on common usage of words that other psychopaths have used, like most psychopathic serial killers are philosophical for example. This of course could be inaccurate at times but it's also more good clues. also it's a recommended step for the potential to spot possible malicious activities and people.
My CSS Brand Colors Collection
Tags: css, frontend, design, webdev
Published: 2020-02-23 03:07:19

---
title: My CSS Brand Colors Collection
published: true
description: A personal CSS vars collection for brand colors
tags: #css #frontend #design #webdev
---

When creating webpages you will need brand colors at some point. You will need to show social icons, share buttons, profiles, posts, social widgets, etc. So i made this simple CSS Snippet to avoid keep seeking brand colors hex on the internet:

If you dont know how to use CSS vars, you can know more about here:
https://developer.mozilla.org/en-US/docs/Web/CSS/var

```css
:root {
	--color-amazon: #ff9700;
	--color-apple: #737373;
	--color-basecamp: #6bbd6d;
	--color-box: #1277bc;
	--color-dribbble: #ed4584;
	--color-dropbox: #0d84de;
	--color-ebay: #083790;
	--color-facebook: #365397;
	--color-flickr: #ea0066;
	--color-foursquare: #207dc5;
	--color-github: #2f2f2f;
	--color-google: #4285f4;
	--color-googleplus: #e0452c;
	--color-instagram: #fb3958;
	--color-linkedin: #006db3;
	--color-pinterest: #ce1a19;
	--color-skype: #00acf4;
	--color-tumblr: #304c68;
	--color-twitter: #00a9f1;
	--color-vimeo: #48b6ed;
	--color-yelp: #c30f00;
	--color-youtube: #ff3333;
	--color-vk: #4c75a3;
	--color-weibo: #df2029;
	--color-whatsapp: #25D366;
	--color-telegram: #0088cc;
	--color-reddit: #ff5700;
	--color-line: #00c300;
}
```

You can use it like that:

```css
.fb-btn {
  /** ... **/
  background-color: var(--color-facebook);
}
```

🙃
Setup vagrant on Linux/Ubuntu
Tags: vagrant, linux, ubuntu, virtualbox
Published: 2020-02-23 02:26:44

A complete guide to setup vagrant on Ubuntu 18.04

__Install VirtualBox__

 Start by importing GPG keys of the Oracle Virtualbox repository:

######`wget -q https://www.virtualbox.org/download/oracle_vbox_2016.asc -O- | sudo apt-key add -`


######`wget -q https://www.virtualbox.org/download/oracle_vbox.asc -O- | sudo apt-key add -`



Both commands should output OK which means that keys are successfully imported and packages from this repository are trusted.

Next add virtual box APT repository:

######`sudo add-apt-repository "deb [arch=amd64] http://download.virtualbox.org/virtualbox/debian $(lsb_release -cs) contrib"`

$(lsb_release -cs) will print the Ubuntu codename. For example, if you have Ubuntu version 18.04 the command will print bionic.

If you get an error message saying add-apt-repository command not found then you need to install the software-properties-common package.

Once the Virtualbox repository is enabled, update the apt package list and install the latest version of Virtualbox:

######`sudo apt update`

######`sudo apt install virtualbox-6.0`

Now Virtualbox is installed on your Ubuntu system, start:

######`virtualbox`


__Installing Vagrant__

update package list:

######`sudo apt update`

Download the Vagrant package:

######`curl -O https://releases.hashicorp.com/vagrant/2.2.6/vagrant_2.2.6_x86_64.deb`

__NOTE__
if curl is not installed :

######`sudo apt install curl` 

Now try to download the Vagrant package again


Once the .deb file is downloaded, install it:

######`sudo apt install ./vagrant_2.2.6_x86_64.deb`


Verify Vagrant installation:


######`vagrant --version`

The output should be similar to

######Vagrant 2.2.6

__Getting Started with Vagrant__

Now Vagrant is installed on your Ubuntu system let's create a development environment.
The first step is to create root directory for project which will contain Vagrantfile file. Vagrantfile is a Ruby file that contain configurations and provision the virtual machine.

######`mkdir ~/my-first-vagrant-project`

######`cd ~/my-first-vagrant-project`

Next initialize a new Vagrantfile (will create vagrant file):

######`vagrant init` 

and specify the box you want to use.

(You can search other boxes on this link https://app.vagrantup.com/boxes/search we’ll use ubuntu/trusty64)

######'vagrant init ubuntu/trusty64`

Now create and configure the virtual machine as specified in the Vagrantfile:

######`vagrant up`


Next update changes in Vagrantfile:

######`vagrant provision`

Next reload vagrant and virtual box:

######`vagrant reload`

To ssh into the virtual machine:

######`vagrant ssh`


Can stop the virtual machine:

######`vagrant halt`

Can destroys all resources(be careful):

######`vagrant destroy`


###Keep Learning!