teleren/devto huggingface dataset:
File-Specific Vim Configuration
Tags: vim, tools
Published: 2018-10-07 20:33:05

---
title: File-Specific Vim Configuration
published: true
description: A quick tip about making custom settings that are language-specific in
  Vim.
tags: vim, tools
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6tcf2irdfg8ik16m9v8a.png
canonical_url: https://assertnotmagic.com/2018/10/06/file-specific-vim-config/
---

It seems like an indicator of a powerful application if you can use it for a long time without any problems and then suddenly discover useful features that add to your enjoyment or productivity that you didn't even know existed.  This happens to me a lot with the Microsoft Office suite (imagine the look of boyish glee on my face as I discovered conditional formatting in Excel).  This also happens to me in Vim all. the. time.  Granted, this may be more because of a more specialized interface and low discoverability.  But, it's still like an Easter egg hunt that you come across that you weren't expecting because it's the middle of October!

So here's the #spoopy Halloween egg for today: **Language-Specific Vim Configuration**.

## The Tip

Have you ever wanted to have some custom functions, settings, or key-bindings, but only for a specific language, without losing the ability to use those keybindings when working on other languages?  Or (like in my case), multiple languages have a "build" command, but the command is different for each language, and it would be nice to have `<leader>b` do the building for each language so I don't have to learn a million different muscle memories.

## Introducing the `ftplugin` Directory

Inside your home directory, there is a `.vim` directory.  Inside this `.vim` directory, you can put a directory called `ftplugin` (short for "file-type plugin").  Inside *this* directory, you can put `<language>.vim` files for each language you'd like to configure for.  For instance, the plugin for the Rust language  provides the commands `:CBuild` and `CRun`, but no keymappings.  (I'm learning Rust, my first compiled language -- pray for me)  So, I created a `~/.vim/ftplugin/rust.vim` file, and right now, all it has are these contents:

```viml
nnoremap <Leader>b :CBuild<Enter>
nnoremap <Leader>r :CRun<Enter>
```

I'm sure I'll add more to it as I come up with more shortcuts and handy little settings, but that's all I really wanted right now.

## Clutter-Free Configuration

That's the whole tip!  I thought it was neat and wanted to share it.  I like that you can separate things out into different files so that you don't end up with one long convoluted `.vimrc` file.  If you have any cool language-specific customizations or key-mappings that save you time, share them with me!

Happy configuring!
No 'Access-Control-Allow-Origin
Tags: angular, laravel
Published: 2018-10-07 15:37:29

---
title: No 'Access-Control-Allow-Origin
published: true
description: No 'Access-Control-Allow-Origin
tags: angular, laravel
---

I am making an application with angular and backend as laravel but when I hit the api, I get **"No 'Access-Control-Allow-Origin' header is present on the requested resource"** and I am able to solve this issue and here I sharing that and hope it will help others.

[Access-Control-Allow-Origin](https://therichpost.com/question/angular-6-no-access-control-allow-origin-header-is-present-on-the-requested-resource)

Thank you
Therichpost
React Native open website URL in default browser Android Example
Tags: react, reactnative, android, javascript
Published: 2018-10-07 13:33:38

---
title: React Native open website URL in default browser Android Example
published: true
description: React Native open website URL in default browser Android Example
tags: #react #reactnative #android #javascript
---

Post Link  : <a href="https://www.skptricks.com/2018/10/react-native-open-website-url-in-default-browser-android.html">React Native open website URL in default browser Android Example</a>

This tutorial explains how to open website URL in default browser of android or ios application using react native. The Linking API in react native application is used for deep linking process. Linking gives you a general interface to interact with both incoming and outgoing app links. Using Linking API we can open or navigate to any website URL from our Android or iOS application to device default web browser.

<a href="https://www.skptricks.com/2018/10/react-native-open-website-url-in-default-browser-android.html">React Native open website URL in default browser Android Example</a>

<img src="https://2.bp.blogspot.com/-ujdIIC3RmIU/W7oEnM5WIqI/AAAAAAAACAo/yj9XHeCU650WhbxmejTqXYCAbgh5WauqQCLcBGAs/s640/url.png" />

<a href="https://www.skptricks.com/2018/10/react-native-open-website-url-in-default-browser-android.html">Read More...</a>
BxJS Weekly Episode 31 - javascript news podcast
Tags: javascript, node, podcast, news
Published: 2018-10-07 08:31:59

---
title: BxJS Weekly Episode 31 - javascript news podcast
published: true
description: Listen to the best javascript news of the week in a podcast form
tags: javascript, node, podcast, news
---

Hey dev.to community!

BxJS Weekly Episode 31 is now out! 🚀
Listen to the best javascript news of the week in a podcast form right here.
You can find all the mentioned links [here on github](https://github.com/BuildingXwithJS/bxjs-weekly/blob/master/links/18-40-Episode-31.md).

You can also watch or listen to this episode on:
- [YouTube](https://youtu.be/hGTL0oBjBD0)
- [Castbox](https://castbox.fm/episode/BxJS-Weekly-Ep.-31-Oct-6%2C-2018-(javascript-news-podcast)-id1378315-id95074223?country=us)

Any feedback is appreciated 😁

Additional stuff:
- [Twitch channel](https://www.twitch.tv/yamalight)
- [Discord server](https://discord.gg/hnKCXqQ)
- [BxJS Weekly github repo](https://github.com/BuildingXwithJS/bxjs-weekly)

Social media links:
- [Twitter](http://twitter.com/yamalight)
- [Medium](https://medium.com/@yamalight)
- [Github](http://github.com/yamalight)

If you enjoy my content, please consider [supporting me](https://codezen.net/support.html) 😉
How To Build Responsive Layouts With Bootstrap 4 and Angular 6 📐
Tags: angular, javascript, webdev, css
Published: 2018-10-07 08:07:02

---
title: How To Build Responsive Layouts With Bootstrap 4 and Angular 6 📐
published: true
description: Responsive design is very important for the accessibility of our application and Bootstrap 4 provides one of the best responsive grid systems out there, let's learn how to integrate it into our Angular 6 apps!
tags: angular,javascript,webdev,css
cover_image: https://thepracticaldev.s3.amazonaws.com/i/qzoxr4dxeplv6jtheynd.jpg
canonical_url: https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b
---

#Every web app is assumed to be responsive, period.

Yes, even the complex enterprise applications bursting with large data tables and charts. Even if it isn’t the best fit, every type of content should be accessible from any kind of device…

> Responsive web design (RWD) is an approach to web design which makes web pages render well on a variety of devices and window or screen sizes — Wikipedia

or for the more visual folks…

 ![Responsive design animation] (https://thepracticaldev.s3.amazonaws.com/i/l86gtvuiqkerbo7qza3l.gif)

[Read more...](https://medium.com/@tomastrajan/how-to-build-responsive-layouts-with-bootstrap-4-and-angular-6-cfbb108d797b)
The Ultimate Answer To The Very Common Angular Question: subscribe() vs | async Pipe
Tags: angular, typescript, javascript, webdev
Published: 2018-10-07 07:53:35

---
title: The Ultimate Answer To The Very Common Angular Question: subscribe() vs | async Pipe
published: true
description: Most of the popular Angular state management libraries like NgRx expose application state in a form of a stream of state objects which begs the question about what is the best way of consuming that stream in the context of Angular components
tags: angular,typescript,javascript,webdev
canonical_url: https://medium.com/@tomastrajan/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8c0c794
cover_image: https://thepracticaldev.s3.amazonaws.com/i/lwvladimk3l44urk7gkh.jpg
---


Most of the popular Angular state management libraries like NgRx expose application state in a form of a stream of state objects. This is usually implemented with the help of RxJS Observables.

>The state updates get pushed to the components which react by re-rendering their templates to display the most recent version of the application state.

There are multiple ways in which it is possible to consume this observable stream of state updates by the components, the two most popular being:

* Using the `subscribe()` method and storing the state on the component instance, `todos$.subscribe(todos => this.todos = todos)`...

* The | async pipe unwraps the state object directly in the component’s template, `<li *ngFor=”let todo of todos$ | async”></li>`...

I have been thinking about this question and related trade-offs for quite some time now. I was mostly in favor of using subscribe() but couldn’t really point out exact reasons why.

[Read more...](https://medium.com/@tomastrajan/angular-question-rxjs-subscribe-vs-async-pipe-in-component-templates-c956c8c0c794)
Introduction to U2F
Tags: mfa, security, authentication, identity
Published: 2018-10-07 05:06:16

---
title: Introduction to U2F
published: true
description: How does U2F Work. 
tags: MFA, Security, Authentication, Identity
---

U2F (Universal 2nd Factor) is an MFA Protocol introduced by FIDO. It is one of the fastest growing MFA protocol adopted due to ease of use and advanced security it offers. This series of blogs mainly talks about how this protocol works and gives tips on implementing this protocol on any website. 

U2F solved one of the major pain point related to MFA, usability. There isn't any App or  hardware token to generate a pin and input it, all that needs to be done is touch a security key. And vendors (such as Yubico) have developed keys which could be used with USB (Type A or C), Bluetooth or NFC which make it even more comfortable to adapt. 

Security protocols used by U2F keys are another reason for such fast adaptation. It uses public key cryptograph, to make sure every transaction is encrypted between all parties involved. Upon that, the source of every request is validated to prevent any phishing attacks. 

But U2F still has some way to go as not all browsers support, notable exception being Safari. And mobile use of U2F also have some complications that need to be solved. And there are some protocal details (such as the use of attestation) that havent been accepted by all U2F Vendors. 

In the next part of the series, I'll go into details about how the protocol works and the data that get exchanged between all the parties involved.
Embedded JavaScript in Vue-style templating for Go
Tags: go, vue, javascript, showdev
Published: 2018-10-07 04:38:53

---
title: Embedded JavaScript in Vue-style templating for Go
published: true
description: 
tags: golang, vue, javascript, showdev
---
Spending my Saturday night making Vue-style templating in Go that lets you use JavaScript. ¯\_(ツ)_/¯

![some go code](https://thepracticaldev.s3.amazonaws.com/i/m1pft7lpr3ekss5s3dsj.png)
Why did you pick that name?
Tags: discuss, naming, product
Published: 2018-10-07 03:56:30

---
title: Why did you pick that name?
published: true
description: 
tags: discuss, naming, product
---

I'm currently on a quest to re-name a product I've been working on a long time (the fun of dealing with international trademarks). I've read many articles about [what makes a good name](https://www.nickkolenda.com/brand-names/), [why naming](https://dev.to/lefebvre/app-naming-tips-14lp) [is important](https://www.feedough.com/why-brand-name-choose-a-good-brand-name/) and how to get ideas for a name. I've seen [many interesting](https://namechk.com/) and [useful tools](http://www.crazynamer.com/) too.

While I have found notes here or there about specific examples of how Company A came up with a name, I'd like to here from the community here about there experiences coming up with a name for what they are working on.

Was it something that came to you one day? An idea that you had played around with for a while? A derivative of something else? A random word? Is there a hidden meaning behind what you chose?

Why did **you** pick that name?
My shiny new personal page
Tags: showcase, porfolio, hugo, personalpage
Published: 2018-10-07 00:21:57

---
title: My shiny new personal page
published: true
description: Portfolio powered by Hugo, AWS, Gitlab CI
tags: showcase, porfolio, hugo, personal-page
cover_image: https://thepracticaldev.s3.amazonaws.com/i/l56bs2vfa6xqssgvcz0t.jpg
---

After many years of being a developer, I've decided to build my personal page the laziest way, installing Hugo, choosing some template and deploying to AWS S3.

Well, this is not a tutorial at all, I only share my happiness for what has been achieved and looking for tips to improve the content or the user interface

My page is [gonzalomoreno.me](https://gonzalomoreno.me), was built with [Hugo](https://gohugo.io), hosted on AWS S3 and is deployed automatically via Gitlab CI.

Please share your thoughts, good or bad.

Best regards to all
What's the difference between a library and a framework?
Tags: discuss
Published: 2018-10-07 00:13:55

---
title: What's the difference between a library and a framework?
published: true
description: 
tags: discuss
cover_image: https://cl.ly/f948a9e776e2/Image%202018-10-06%20at%204.13.18%20PM.png
---

Having a look at this comment by @kayis from another thread, I'm wondering if you agree with this statement?

{% devcomment 5ngc %}

Yes? No? Why?
Sharing Diffs on Dev.to?
Tags: help, discuss
Published: 2018-10-06 19:32:02

---
title: Sharing Diffs on Dev.to?
published: true
tags: help, discuss
---

Howdy,
I want to share a diff on Dev.to. How would you go about doing that?
I found a nice service called mergely, but I'm not sure if my shared diffs are writable by all, and anyways they can't be embeded. How would you share your diffs?
Discover React Suspense
Tags: javascript, react, suspense, screencast
Published: 2018-10-06 19:30:19

---
title: Discover React Suspense
published: true
description: Learn about React Suspense and try it right now!
tags: JavaScript, React, Suspense, screencast
cover_image: https://thepracticaldev.s3.amazonaws.com/i/obcrp1x6k9rdssj6jam2.png
canonical_url: http://dev.topheman.com/discover-react-suspense/
---

{% youtube Nj4q2fHulqc %}

**Watch screencast [en]** / [Watch talk [fr]](http://dev.topheman.com/decouvrir-react-suspense-video-talk-fr/)

With React v16, the Facebook team shipped a new version of the core called “Fiber”. Thanks to this full rewrite, we’ve already seen new features like Fragments, Portals and ErrorBoundaries. Some other features are still under development:

* Suspense
* Time Slicing

For the last few months, engineers from facebook have made a few [demonstrations](https://youtu.be/nLF0n9SACd4) of the possibilities of these features. Few examples are available (at the time of the writing, those are still unstable/undocumented APIs).

After the [talk of Ryan Florence at React Rally](https://youtu.be/X-kA8B2QzjY) presenting Suspense and how [@reach/router](https://github.com/reach/router) is ready for it, I decided to make a little project:

* to dive into those new concepts
* to share code examples
* to expose a simple tool that could help explain the benefits of using suspense

### [👉Try topheman/react-fiber-experiments👈](https://react-fiber-experiments.surge.sh/)

### What problems does Suspense solves ?

* It lets you start rendering before all data is ready (rendering can be paused when data starts loading and resumed when it finishes)
* It lets you avoid a cascade of spinners, that may cause flashes due to unintentional reflows and repaints
* Code splitting becomes a built-in feature, easy to use (you also can pause rendering while loading script)

What this means:

* Move the fetching of data closer to where it will be rendered – data encapsulation
* Get rid of loading states – cleaner state in components (maybe even stateless in some use cases – no more need of componentDidMount lifecycle hook to go fetch data)
* Finer grain control over spinners (thanks to `<Placeholder>`)

### How to test it today

Suspense is still under active development, be aware that the APIs might change and be unstable, though it’s advanced enough to hack a project with. You’ll need to make your own build of React.

Tophe

This was a short introduction to **React Suspense**, go further by watching the video and play online with **[topheman/react-fiber-experiments](https://react-fiber-experiments.surge.sh/)**.

This post was originally posted on [my blog](http://dev.topheman.com/).
La Ranisima – Space Invaders alike game in JavaScript (February 2006)
Tags: arcade, game, gamedev, javascript
Published: 2018-10-06 19:11:05

---
title: La Ranisima – Space Invaders alike game in JavaScript (February 2006)
published: true
tags: arcade,game,gamedev,JavaScript
canonical_url: 
---

“La Ranisima” is an open source game that was written totally in DHTML (HTML, CSS and JavaScript) and was inspired by the Space invaders classic although uses infantile graphics that will be loved by the youngest children.

![Screenshot](http://dhtmlgames.com/ranisima/ranisima.gif)

It is my first DHTML game and it was made in early 2006 based on DOM manipulation, when almost nobody knew about the power of JavaScript for game development and all the technologies involved related with that were unknown by the vast majority of developers who preferred to develop games using Flash or even Java.

You can also change the game behaviour easily by editing many of the configuration variables which are at the beginning of the script. To change the game images you just need to replace them with others.

Official languages are Spanish and English.

You can find other modified and adapted versions of this game on the Internet, including one Opera widget.

This game has been tested under BeOS, Linux, NetBSD, OpenBSD, FreeBSD, Windows, Mac OS X and others.

Play online in English: [http://ranisima.tuxfamily.org/ranisima\_english/](http://ranisima.tuxfamily.org/ranisima_english/)

Play online in English (mirror): [http://www.dhtmlgames.com/ranisima/ranisima\_english/](http://www.dhtmlgames.com/ranisima/ranisima_english/)

Play online in Spanish: [http://ranisima.tuxfamily.org/ranisima\_spanish/](http://ranisima.tuxfamily.org/ranisima_spanish/)

Play online in Spanish (mirror): [http://www.dhtmlgames.com/ranisima/ranisima\_spanish/](http://www.dhtmlgames.com/ranisima/ranisima_spanish/)

Official web site: [http://ranisima.tuxfamily.org/](http://ranisima.tuxfamily.org/) (mirror at [http://www.dhtmlgames.com/ranisima/](http://www.dhtmlgames.com/ranisima/)).

It can also be found on GitHub: [https://github.com/jalbam/ranisima](https://github.com/jalbam/ranisima)
Lucid Array Differences?
Tags: testing, ruby
Published: 2018-10-06 16:33:54

---
title: Lucid Array Differences?
published: true
description: Elucidating array differences is hard!
tags: testing, ruby
---

As promised, I'm looking to add <code>Array</code> explication to gem [minitest_lucid](https://rubygems.org/gems/minitest_lucid) (documentation at [GitHub](https://github.com/BurdetteLamar/minitest_lucid#minitest-lucid)).

So far, useful elucidations for <code>Hash</code>, <code>Set</code>, and <code>Struct</code> have been pretty straightforward, as will be the case for <code>OpenStruct</code>.

For <code>Array</code>, not so much.

<hr>

*Stipulated*:  None of this matters for small arrays, whose differences are easy to evaluate visually.  More sophisticated comparisons matter only for larger arrays.

Yes, this is overkill -- until it isn't.

For a failed assertion:

- How much information is enough?
- More is better.
- Too much is just about right.

<hr>

I can think of some array treatments that might be useful, but the usefulness of each may depend greatly on the nature of the actual data:

- Element-by-element comparison.
- Diff-LCS comparison.
- Missing elements:  <code>expected - actual</code>.
- Unexpected elements:  <code>actual - expected</code>.
- Common elements:  <code>actual & expected</code>.
- All elements:  <code>actual | expected</code>.

I'll detail these first two.

<h3>Element-By-Element Comparison</h3>

In this comparison, <code>actual[0]</code> is compared to <code>expected[0]</code>, <code>actual[1]</code> is compared to <code>expected[1]</code>, ... <code>actual[n]</code> is compared to <code>expected[n]</code>.

This comparison is ideal when:

- The arrays are the same size.
- Most of the elements are the same.

The comparison may still be useful when:

- The arrays are of similar size.
- Fewer of the elements are the same. 

<h3>Diff-LCS Comparison</h3>

"[Diff::LCS](https://github.com/halostatue/diff-lcs#description) computes the difference between two Enumerable sequences using the McIlroy-Hunt longest common subsequence (LCS) algorithm."

The matching algorithm is good at finding sequences that match, even when they are not in the same position in the arrays.

This comparison is ideal when:

- The arrays have multiple matching sequences.
- The actual array has a few insertions.
- The actual array has a few deletions.

The comparison may still be useful when:

- The arrays have fewer matching sequences.
- The actual array has more insertions.
- The actual array has more deletions.

<h3>Elucidation Output Format

I began by putting the elucidation into the message of the failed assertion.

Because there may be more elucidation data rather than less, I'm experimenting with additional output in HTML, where color and links can help organize and clarify.

<h3>Finally, What Should <code>minitest_lucid</code> Do?

If <code>minitest_lucid</code> implements several of these strategies, should the default be to return the information for all?  If not, what's the default?  And should there be an option for the non-default?
The Elusive Senior Software Developer
Tags: career, jobs, discuss
Published: 2018-10-06 01:57:58

---
title: The Elusive Senior Software Developer
published: true
description: How do you find great developers who aren't looking for a change?
tags: career, jobs, discuss
---
Where does one find great Senior Software Developers?

The biggest problem: they’re not looking!

It’s easier to find programmers fresh from college, through events like job fairs. And in the early years of their careers, many are still looking for a better fit in a job, or looking for experience that can help them deepen their portfolio. So, they occasionally network or check job sites.

 The elusive beast is the person who is not looking. Most companies try to hold on to competent employees. A good senior programmer is probably comfortable in their current job. They’re already doing interesting work. People respect them. They’re a “go to person” for colleagues and managers. They’re paid well. And, more often than not they’ve figured out a work-life balance that meshes their private schedules with the needs of their job.

 They’re not necessarily in their perfect job. Maybe they would rather work on newer technology; maybe they’d rather not be the “go to person” on some subject because it’s old hat; maybe they would like a little more flexibility in managing their work-life balance; maybe they know they could earn a little more elsewhere. No, it isn’t necessarily the perfect job; but, it’s a good job. And, so, they’re not looking.

 If they do not check job boards or otherwise look actively, how do we find them? Most do not make enough post-work time to attend networking events.One might find them on a site like LinkedIn and reach out to them. Chances are, though, that they are inactive on LinkedIn, with outdated profiles. Even if one finds them, the challenge is that they treat recruiter-emails as spam. One can try to break through to the few one can find: get them to click on that email! What about the others?

 Finding them, when they aren’t looking, is the challenge. Thoughts and ideas?