teleren/devto huggingface dataset:
The ary.map(&:to_s), what is this?
Tags: rails
Published: 2019-09-30 12:07:10

---
title: The ary.map(&:to_s), what is this?
tags: rails
published: true
---

## 👍 Instant summary
They are equal.
 
```ruby
# ary = [:jack, :justin, :jojo]
ary.map(&:to_s) === ary.map{|obj| obj.to_s}
# => true

ary.map(&:to_s)
# => ["jack", "justin", "jojo"]

ary.map{|obj| obj.to_s}
# => ["jack", "justin", "jojo"]
```
 

## 🦄 Understanding
### 1. The & pass Proc object as a block.
The & in arg, ruby pass the Proc object as a block.

📚 [map(&b) (Japanese)](https://docs.ruby-lang.org/ja/latest/doc/symref.html#and)
​
### 2. automated to_proc
You may have a question that the `to_s` isn't a Proc object. That's right 👍 and, ruby automatically calls `Symbol#to_proc` before blocknized by the &.

It means that ..,

```ruby
ary.map(&:to_s) === ary.map(&:to_s.to_proc)
# => true
```
​
### 3. Symbol#to_proc method
[Symbol#to_proc](https://ruby-doc.org/core-2.5.0/Symbol.html#method-i-to_proc) 

> Returns a Proc object which respond to the given method by sym.

```ruby
ary.map(&:to_s.to_proc) === ary.map(&Proc.new{|obj| obj.to_s })
# => true
```
​​
## Sumarry
They are same.

```ruby
ary.map(&:to_s)
ary.map(&:to_s.to_proc)
ary.map(&Proc.new{|obj| obj.to_s })
ary.map{|obj| obj.to_s}
```
​
---

## 🔗 Parent Note
{% link n350071/my-rails-note-47cj %}
VS Code Extension - Render Process Diagrams with bpmn.io
Tags: vscode, plugins, bpmn, webdev
Published: 2019-09-30 12:35:17

---
title: VS Code Extension - Render Process Diagrams with bpmn.io
published: true
description: VS Code Extension for Displaying BPMN 2.0 Files
tags: #vscode #plugins #bpmn #webdev
---

As another exciting pet project, we created a [Visual Studio Code](https://code.visualstudio.com/) extension for rendering BPMN 2.0 process diagrams. It is built on top of the amazing modeling toolkit [bpmn-io](https://bpmn.io/) and can be [found on GitHub](https://github.com/pinussilvestrus/vs-code-bpmn-io). 

You can directly download it from [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=bpmn-io.vs-code-bpmn-io) or [follow the setup instructions](https://github.com/pinussilvestrus/vs-code-bpmn-io#development-setup) to get it running locally. 

With this extension, it is possible to display a preview for your BPMN 2.0 diagrams. It also refreshes the preview whenever you re-focus it, to adapt made changes in the XML content. 

![vs-code-bpmn-io extension](https://thepracticaldev.s3.amazonaws.com/i/biyef5hjcnorlng8bs22.gif)

As a next step, we plan to also add a modeling functionality to enable the powerful BPMN diagram editing capabilities of `bpmn-io`. This will help to easily create BPMN process diagrams in Visual Studio Code without writing one line of XML.

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

Feel free to [try out the extension](https://github.com/pinussilvestrus/vs-code-bpmn-io) and leave some feedback or a star for our work!
Minimize redux boilerplate with these 7 lines of code!
Tags: redux, react, node, javascript
Published: 2019-10-03 12:51:42

### The Setup

Have you ever worked with applications where you use redux for state management? I am sure you have. It's beautiful how the framework lets us use the one way state flow by dispatching actions, making use of pure functions and immutability to provide a nearly perfect state management option for small/medium apps. 

But there is an issue I have with redux: the boilerplate that comes associated with it. 

### The Issue

Although redux is not opinionated, there is generally a standard way of doing stuff: write action creators, use functions like 'mapStateToProps', 'mapDispatchToProps', use the 'connect' function, use thunk for async actions etc.

One of those "standards" is the way in which one performs a simple request, success/failure operation on an API. 

Here's the drill: 
1. Create a 'REQUEST' action and dispatch it. 
2. Make the network request. 
3. On success, dispatch the 'SUCCESS' action with the payload.
4. On failure, dispatch the 'FAILURE' action with the error.

This is so common that react official documentation has an entire article on how to minimize boilerplate for this pattern:
https://redux.js.org/recipes/reducing-boilerplate

### The actual Issue
But what if your problem statement does not fit into the straightjacket of this pattern mentioned above and you are unable to use any of the solutions mentioned in the link above. Same was the case with my problem statement and I thought to myself how I can still reduce my boilerplate. 

Then, I Stumbled upon my constants.js file that held my actions. It looked something like this:
![React actions mess](https://thepracticaldev.s3.amazonaws.com/i/8ju1jv75olziw8rtvotc.png)

and whenever I wanted to import actions, I did this:
![Use actions like this](https://thepracticaldev.s3.amazonaws.com/i/y68vdzr5tghw517unjkb.png)

Or worse still, in some cases the constants were imported like so:
![Other usage of constants](https://thepracticaldev.s3.amazonaws.com/i/64ngjhel8ygt0wirdgek.png)

### A better way
Here's how the constants file can be made smaller, concise and easier to read.
First, write a util function and call it something like:
![Generate actions helper](https://thepracticaldev.s3.amazonaws.com/i/pfrwhk5ybq6uexvfw37r.png)

Then, the constants.js file can look something like this:
![Modified constants file](https://thepracticaldev.s3.amazonaws.com/i/ge4uorzkco61f2t9pxjk.png)

And the constants can then be used in this manner:
![Constants usage](https://thepracticaldev.s3.amazonaws.com/i/dnhtq3gklgeedkx7fwk3.png)

or like this:
![alternate constants usage](https://thepracticaldev.s3.amazonaws.com/i/97zsli7i7mbkmoh7a0v3.png)

So, in this way, we can minimize at least the constants boilerplate that causes files to bloat up and makes the code less understandable.
Fun with Unicode in Java
Tags: unicode, encoding, java
Published: 2019-10-03 06:14:19


Normally developers don't pay much attention to character encoding in Java. However, when we crisscross between byte and char streams, things can get quite confusing unless we know the character set basics. Many tutorials and posts about character encoding are heavy in theory with little real examples. In this post, we try to demystify Unicode with easy to follow examples.

read the [Post ... ](https://www.codetab.org/post/java-unicode-basics/)
Nebular Hacktoberfest
Tags: angular, hacktoberfest
Published: 2019-10-03 08:55:43

Hacktoberfest is started a few days ago! And you still have no idea on how to start your​ amazing journey into the open-source world and finally get your T-Shirt? I have an answer for you. One of the best ways to start open-source contributions is to help us with [Nebular](https://github.com/akveo/nebular).

## What is Nebular?

Nebular is a customizable Angular 8 UI Library with a focus on beautiful design and the ability to adapt it to your brand easily. It comes with 4 stunning visual themes, a powerful theming engine with runtime theme switching and support of custom CSS properties mode. Nebular is based on Eva Design System specifications.

## How to start contributions?

- Open issues at the [GitHub repository](https://github.com/akveo/nebular)
- Search for issues for starters (issues which contain following labels on GitHub):
  * help wanted
  * good first issue
- Deal with those issues!
- Get your T-Shirt!

---

What's more important here, don't hesitate! Find interesting issues, deal with them and have fun! 🥳
Drop me a line if you have any questions - [@nikpoltoratsky](http://twitter.com/nikpoltoratsky)
Few Awesome CSS Snippets I Recently Learned
Tags: css, beginners, webdev
Published: 2019-10-31 14:15:18

# Center the absolute positioned content

```css
.center{
  top : 50%;
  left : 50%;
  transform : translate(-50%,-50%);
}

```
Codepen: https://codepen.io/3sanket3/pen/LYYOWwV


# Maintain aspect ratio of the container
```css
.container{
  padding-bottom:56.4%; /* aspect ratio 16:9*/
}

```
The percentage should be calculated as: 16:9(w:h) = h*100/w => 56.25%. Similarly,
- 1:1 => 100%
- 4:3 => 75%


Codepen: https://codepen.io/3sanket3/pen/dyyZWMX

# Truncate the text
```css
.truncate{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

Codepen : https://codepen.io/3sanket3/pen/OJJOmqB

# Set width as the available rest of the space

It is useful when you have two adjacent containers. One has a fixed width and the other one should adjust according to the available remaining space.


```css
.fix-width-container{
  float: left;
  width: 200px;
}
.adjustable-container{
  width: calc(100%-200px);
}
```

### Using CSS Variable
```css
// Declaring variable at root level, you can set it at common parent level
:root{
  --left-pane-width : 200px; 
}

.fix-width-container{
  float: left;
  width: var(--left-pane-width);
}

.adjustable-container{
  width: calc(100%-var(--left-pane-width));
}
```

Codepen: https://codepen.io/3sanket3/pen/qBBVjgy


# Preserve line breaks in the preview 
It is useful when we want to show a preview of the content user entered in let say `<textarea>`
```css
.preview{
  white-space: pre-line;
}
```

CSS is something, which has no ends of learning. I would love to learn if you have such interesting snippets or links.

Icon Courtesy: https://thenounproject.com/term/css/60411/
Learn to Program 03: The How
Tags: learning, beginners
Published: 2019-10-03 11:55:42

Finally we get to the _how_. _How_ exactly will this series be structured to help you (the reader) learn programming? _How_ will you be able to measure your progress? _How_ exactly will this work?

The first answer concerns structure. The series will be structured as short posts (typically less than 5min to read) that cover a _single_ topic, concept etc. Attached to these posts will be small programs, where appropriate, where you can see and test the concept in question. 

My advice would be to use a site like [Repl.it](https://repl.it/) in which to run and practise the programs provided. The examples will not be written in one language only. Different languages have different strengths and will be used in this way to showcase various aspects of programming. This is not a series in which you will learn _python_, or _rust_ or any specific language.

(As an aside a _proper_ Computer Science professor like [Donald Knuth](https://en.wikipedia.org/wiki/Donald_Knuth) writes a whole new language just to teach programming. I am not anywhere close to that level so my readers will need to be content with existing language!).

The idea is for bite sized pieces of content that you can read while standing in line at your local coffee joint. In the same way programmers will often tell you to keep your _methods_ to a size that fits on one computer screen, so too will I try and fit each post unto one screen (one screen while writing it, your reading experience might differ).

Finally, the entire process will follow (loosely), the _Socratic_ method. In other words each post will tend to end with a question or task, and the following post will start with a possible answer to that question or task.

This nicely leads to Task 1: Update the _rust_ example below to display your own name instead of mine:

```rust
fn main() {
  println!("Hello Pieter!");
 }
```

---

Link to [Main Content Post](https://dev.to/pieterjoubert/learning-to-program-02-the-what-4n2g). If you are confused about this post start here.
Looking for Advice: Best Method for Adding Fill-in-the-Blank Functionality to WordPress Plugin
Tags: wordpress, php, javascript
Published: 2019-10-03 14:58:12

Hi All,

I'm building a new WordPress plugin for interactive fill-in-the-blank notes. Goal: Anyone who is presenting information and likes to use fill-in-the-blank style handouts could do so using this plugin (without the need for printed copies while retaining interactivity).

My rough plan is to:

1. Create a Custom Post Type.
2. Provide an editor for text notes (and images / other media) to be added by the presenter.(a)
3. Presenters would select a word/phrase they wanted to blank out.(b)
4. Participants at the presentation could pull up the notes on their phone/laptop and fill out the blanks as the presentation occurs.(c)
5. At the end of the presentation participants could enter their email address and have the notes (including their filled out answers and perhaps the correct ones if they differ) emailed to them.

It is a pretty simple/straightforward plugin and this is essentially an MVP. I'd love to add additional features in the future (save to PDF, Evernote, Google Drive, etc.; easy analytics for the presenter to gauge actual participation, etc.).

There are three areas in particular that I'm looking to gain additional perspective on, I've noted them as (a), (b), and (c) above. Below I provide additional details on these along with questions I have.

(a) I could use the Gutenberg block editor to create a block that handles this OR I could use the traditional TinyMCE non-Gutenberg editor. Thoughts on advantages of one over the other? Am I missing any additional (better) options?

(b) Ideally there would be several ways to do this, e.g., select the word and use a key combination (say Ctrl+Shift+B) and an editor button. Once this is done CSS will be used to show that the selected word/phrase will be shown as blank from the front end.

This could be done using a shortcode, like:
The best programming website is [lqdnotes]dev.to[/lqdnotes]

Or it could be done using an html attribute like:
The best programming website is &lt;span class=&quot;lqd_blank&quot;&gt;dev.to&lt;/span&gt;

I tend to prefer the latter as it doesn't clutter the editor interface notes with shortcodes. Any reason to go with the former or another method altogether?

(c) When the front end page is displayed the parser would display the text as-is except for when it found a blanked word, in which case it would replace the blanked word with a form text box with some styling to ensure it looked as if it was in the regular flow of the page (e.g., no borders, sizing with rest of text, no difference in color, etc.).

Are there any better ways to accomplish this? Ideas you'd suggest?

I'd love to hear your thoughts!
Git Workflow: How much change is too much change for one commit for you?
Tags: git, discuss, opensource
Published: 2019-10-03 15:32:29

---
title: Git Workflow: How much change is too much change for one commit for you?
published: true
description: Sometimes we need to fix a typo and sometimes we need to hunt down a particularly ugly bug. How much change to your code is too much change for one commit? What do you use to decide when to commit changes?
tags: git,discuss,opensource
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1e4x1hvxcy1g78sdk96a.jpg
---

>Cover Photo by [Yancy Min](https://unsplash.com/@yancymin) on [Unsplash](https://unsplash.com)


As I work more and more with git and GitHub I have become really interested in the version control processes of individuals and teams for developing software.

{% link daveskull81/git-workflow-do-you-commit-to-master-on-your-solo-projects-hi4 %}


Today, I am wondering about how much change is too much change for a single commit? What do you use to decide when to commit? When is it the right time for you to commit changes?

In developing software we are tasked with a variety of changes or fixes to make to an application. Sometimes it is just a typo or changing the color of a button. Sometimes we are tasked with hunting down a really ugly, difficult to reproduce bug that will take a few days to figure out and solve.

The ability to make commits with git allows us to pull the changes we make out of our application when needed. But, if the change is so drastic it can have serious consequences if the code is removed, especially when other code has come to depend on our changes.

How do you decide you have done enough change to a codebase that you should commit those changes? Is there a point for you when there is too much change for a single commit? How do you make that decision? Do you ever think about what would happen if this commit was rolled back and how the codebase would handle that when you make this decision?
Neo - спаситель человечества
Tags: javascript, программирование, кодинг
Published: 2019-10-04 15:25:13

---
title: Neo - спаситель человечества
published: true
date: 2019-10-03 16:11:00 UTC
tags: JavaScript,Программирование,Кодинг
canonical_url: https://dev.to/ryanlanciaux/neo-vim-for-web-development-56n9
---

Очень [обнадеживающая новость](https://dev.to/ryanlanciaux/neo-vim-for-web-development-56n9): на смену ветерану Vim спешит NeoVim - редактор кода, делающий всё то же самое, но "более лучше". Это хорошо, потому что как устроен Vim изнутри знают в мире человек 5. Случись с ними что - и мир погрузится во мрак. А тут свежие силы, оказывается, подоспели! Надо будет попробовать.
Yarn Workspaces does not Honor .npmrc Location Precedence: Implications and Possible Solutions
Tags: yarn, yarnworkspaces, troubleshooting
Published: 2019-10-04 14:33:48

---
title: Yarn Workspaces does not Honor .npmrc Location Precedence: Implications and Possible Solutions
published: true
description: Yarn Workspaces has a bug that does not respect the location precedence of .npmrc / .yarnrc files to configure registry settings if you run a yarn command in a selected workspace.
canonical_url: https://doppelmutzi.github.io/yarn-workspaces-bug/
tags: yarn,yarnworkspaces,troubleshooting
---

Yarn Workspaces has a bug that does not respect the location precedence of .npmrc / .yarnrc files to configure registry settings if you [run a yarn command in a selected workspace](https://yarnpkg.com/lang/en/docs/cli/workspace/). Consider the following situation:
- A _.npmrc_ file located at home folder specifies a [registry](https://docs.npmjs.com/configuring-your-registry-settings-as-an-npm-enterprise-user) entry to use a private npm registry.
- A _.npmrc_ file located at a project root specifies a registry entry to target a public npm registry like this `registry=https://registry.npmjs.org`.

In my current project, I have such a situation. The default situation is that projects need a registry setup to use the internal [Artifactory](https://jfrog.com/artifactory/). One project requires a setup to target the public npm registry. The problem of this project is that adding a dependency to a specific yarn workspaces package with the following command uses the wrong registry setup (the setup of `~/.npmrc` instead of `.npmrc` file located at project root):

```bash
$ yarn workspace package-a add @rooks/use-previous
```

The problem is that wrong URLs are put into the `yarn.lock` file (targeting the private registry).

However, if you add a dependency globally with the `-W` flag, then the `.npmrc` precedence is honored:

```bash
$ yarn add @rooks/use-previous -W
```

This bug seems to exist [for a very long time](https://github.com/yarnpkg/yarn/issues/4458).

The following workarounds are possible:
- Use the `--registry` flag

```bash
$ yarn workspace package-a add @rooks/use-previous --registry 'https://registry.yarnpkg.com'
```
- Manually add the dependency to the `package.json` of _package-a_ and run `yarn install` from the root folder of the project.
- Copy `~/.npmrc` to every project root folder that need this registry setup and delete `~/.npmrc`. If you have private settings (e.g., your user credentials) in the file, pay attention that you do not push the file to VCS (add it to `.gitignore`).
- Don't use yarn workspaces. E.g., use [Lerna](https://github.com/lerna/lerna) with npm.
How to avoid undefined error when comparing in JavaScript
Tags: javascript, beginners, tip
Published: 2019-10-04 15:35:11

Hey there people

One of the most common errors we encounter in JavaScript is the undefined error when trying to compare two values.
Let me give you an example so you understand it better.

Imagine you have an object that you want to check if a property value is equal to another value, what you are going to do is this:

```javascript
let myObj = {
	firstName: "Adnan",
	lastName: "Babakan",
	age: 19
};

if(myObj.firstName === "Adnan") {
	console.log("Yes it is true!");
}
```

This is OK and it will work pretty well, but when you have a scenario in which you don't know if the variable you are using is a object or not what will you do?

```javascript
let myObj = undefined;

if(typeof myObj === 'object') {
	if(myObj.firstName === "Adnan") {
		console.log("Yes it is true!");
	}
}
```

You'll do a `typeof` comparison of course and that is totally fine.

There is another thing that can happen which is if you want to add some `else` statement in order to control the opposite result, which you will end up with a code like below:

```javascript
let myObj = undefined;

if(typeof myObj === 'object') {
	if(myObj.firstName === "Adnan") {
		console.log("Yes it is true!");
	} else {
		console.log("Nope!");
	}
} else {
	console.log("Not at all!");
}
```

So this is kinda messed up. Isn't it?
What is my solution? To use `try` and `catch` brothers! (Or maybe sisters)

Using those will give you a neater code and a solid one.

```javascript
let myObj = undefined;

try {
	if(myObj.firstName === "Adnan") {
		console.log("Yes it is true!");
	} else {
		console.log("No");
	}
} catch(err) {
	console.log("No");
}
```
So what's the point in this you might ask?
I'll give you few reasons for this:

1. It looks cool XD
2. It is way better since you now have access to the error which occurred
3. You have avoided unnecessary condition

Always remember that conditions are OK until you have no other choice. You better try to avoid them as much as possible.

A real life scenario for this to me was when trying to compare an object which I got from Mongoose (an ODM for MongoDB) like below:

```javascript
import userModel from './models/userModel'

app.post('/api/user', function() {
	userModel.findOne({ username: 'adnanbabakan' }).then(user => {
		let result = false;
		
		try {
			if(user.age == 19) {
				result = true;
			}
		} catch(err) {}
		
		res.json({
			result
		});
	});
});
```

As you might have guessed this an API made with Express and I wanted to check a simple condition.
My code might have looked really messy with those conditions in it so I decided to do it like this and change the result to true only if my condition was true in any matter.

I hope you enjoyed this and let me know if I'm wrong or there are any better ways to accomplish this. I just wanted to share this solution of mine with you.
Day 5 : Best Life
Tags: hiphop, code, blog, lifelongdev
Published: 2019-10-05 01:23:31

_liner notes_:
- Professional : Made it through my first week as a JavaScript Developer Advocate. My manager said I had a great week, so that made me feel good. I'm just out here trying to live my best life. haha. Worked on wrapping up the projects assigned to me and got my pull requests in. Also did some on-boarding tasks. Pretty productive Friday.
- Personal : One perk of working remote was that I was able to do my laundry. Right now, I'm putting together tomorrow radio show. After that, I want to work on my site.

![Crete, Greece coastal beach side photo](https://thepracticaldev.s3.amazonaws.com/i/l2w5tfhrh7ch2ovi558h.jpg)
This weekend, like most weekends will be focused around HIPHOP and CODE activities. Tomorrow is OUR show (https://kNOwBETTERHIPHOP.com). Looking forward to doing that.

Sunday. My plan is to finish or get close to working on my site and watch a bunch of anime. haha 

Going to try and get as ahead I can now so I can get more done during the weekend.

Have a great day and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube zcloEzJU27E %}