teleren/devto huggingface dataset:
Hack: Hijack Tabs for Custom Actions in Xamarin.Forms
Tags: xamarinforms, mobile
Published: 2020-12-30 17:12:33

I was asked yesterday how to customize tabs to execute actions rather than routing to a page. This is not something we can do by design, but since when has that ever stopped us before! Challenge accepted.

So I took a few minutes to whip of this variation of an existing sample that shows how you can have your first page be a login screen without tabs, and then a main screen with tabs.

{% twitter 1344031993223376896 %}

Kick things off by creating a tab without any real content.

{% gist https://gist.github.com/davidortinau/4591d40b0617d5c5f68528eb26f06143 file=HackTabs.xaml %}

Noticed the content there is aptly named because the page is blank.

Now we need to register to handle the `Navigating` event on the `AppShell.xaml`.

{% gist https://gist.github.com/davidortinau/4591d40b0617d5c5f68528eb26f06143 file=Navigating.xaml %}

And now we are ready for the interception! Making sure that we aren't handling the boot route when `e.Current` is null, we first grab the deferral token so Shell knows to not immediately complete the routing request. 

Next, we use the `Route` to identify which tab was tapped, and then we can execute our custom intentions. In this case we are going to trigger a "back" action which will work if there is actually a page to be popped off the stack. As you can see we have another tab here that will log out of the app.

Finally, we need to complete the deferred navigation request so Shell knows we are finished.

{% gist https://gist.github.com/davidortinau/4591d40b0617d5c5f68528eb26f06143 file=HandleNavigating.cs %}

That's it! Check out the video from Twitter, and the complete code is on [GitHub](https://github.com/davidortinau/ShellLoginSample/tree/sen).
(n)vi(m): look and feel plugins
Tags: vim, productivity
Published: 2020-12-30 17:05:31

[Last time](https://dev.to/mariocarrion/n-vi-m-basic-settings-3o9d) I blogged about my basic nvim settings, this time I would like to share all the plugins I use as a heads-up-display when editing text.

### 1) vim-airline/vim-airline

[`vim-airline`](https://github.com/vim-airline/vim-airline) will draw a statusline at the bottom of each window indicating information relevant to file itself, like detected type, encoding, path and _vim stuff_ like modes, pressed keys or columns number.

`vim-airline` is the foundation for literally all the plugins I currently use that are going to be listed below.

### 2) ryanoasis/vim-devicons

[`vim-devicons`](https://github.com/ryanoasis/vim-devicons) adds file type icons to vim, usually displayed on the statusline and in combination with other plugins like `controlp`. A really important thing about this plugin is the that you must use a patched nerd font compatible one. My current favorite is [**Fura Code**](https://github.com/ryanoasis/nerd-fonts/blob/master/patched-fonts/FiraCode/Regular/complete/Fura%20Code%20Regular%20Nerd%20Font%20Complete.ttf), I also enable _ligatures_ on iterm2 when selecting this font.

### 3) airblade/vim-gitgutter

[`vim-gitgutter`](https://github.com/airblade/vim-gitgutter) shows a git diff in _the gutter_ to indicate added, changes and removed lines.

The configuration I use is:

```vim
set updatetime=500
```

### 4) mkitt/tabline.vim

[`tabline.vim`](https://github.com/mkitt/tabline.vim) allows displaying succint tabs and as expected it supports the usual [`g` commands](https://vim.fandom.com/wiki/Using_tab_pages) to navigate them.


### 5) NLKNguyen/papercolor-theme

[`papercolor-theme`](https://github.com/NLKNguyen/papercolor-theme) defines color schemes. The configuration I use is:

```vim
set termguicolors
set background=dark
colorscheme PaperColor
```

In practice all of this combined looks like this! 

<a data-flickr-embed="true" href="https://www.flickr.com/photos/mariocarrion/49130851277/in/dateposted-public/" title="nvim look and feel plugins"><img src="https://live.staticflickr.com/65535/49130851277_cc350b5409.jpg" width="500" height="336" alt="nvim look and feel plugins"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>

---

_Productivity_ plugins are next!

![The more you know](https://media.giphy.com/media/83QtfwKWdmSEo/giphy.gif "The more you know")
Mutating vs Non-Mutating JS Arrays
Published: 2020-12-30 17:00:04

In my last blog post I talked about some mutating methods to manipulate your JS arrays. Such as .push and .unshift. This week I wanted to talk about different ways you can manipulate a JS array using non-mutating methods. 

There are two key methods used for adding new items to an array without mutating the original array. They allow you to do something similar to .push/.unshift. The first being the .concat() method. The syntax is very similar to the others. 
Lets say we had an array that looked like this:

```let numbersArray = [ 1, 2 ,3 ] ``` and we wanted to add 4 to that array without mutating the original. You could use concat like so: ```let numbersArray2 = numbersArray.concat(4) ``` The original numbersArray would still show as [ 1, 2, 3 ] while our new array would show the 4 added in. 

Another way to go about adding elements into an array is to use JS's spread operator. The syntax looks like this:

To add to the end:
``` let numbersArray2 = [ ...numbersArray, 4 ] ``` or to add to the beginning:
``` let numbersArray2 = [ 4, ...numbersArray ] ```

This takes all of the values from numbersArray and creates a new array with the addition of the number 4 either at the end for the first example or the beginning for the second example. 

Let's move on to ways to remove elements from an array without mutating the original. These methods are going to do something similar to .pop/.shift. You could use a method called .filter. This method will sort through an array and create a new one based off of a condition you set. It looks like this:

``` numbersArray2 = numbersArray.filter( value => value !== 3  ) ``` numbersArray2 would only include [ 1, 2 ] however the original array would remain unchanged. 

Another method you can use is called slice. In this method you pass in the parameters of where you want to start your new array and where you want it to end. If you leave the second number out then slice will just go to the last value of the array. Using slice would look like this:

``` numbersArray2 = numbersArray.slice(0, 2) ``` So we are saying that we want our numbersArray2 to start at the 0th index and finish on the 1st index. The ending point you pass in to slice is non inclusive, meaning it won't be included in your array. So our numbersArray2 would look like [ 1, 2 ]. 

I hope this was helpful in understanding a few non-mutating functions with JS arrays. Stay tuned next week I will be going over some functions that iterate over JS arrays. We already saw one in this blog, .filter!
How to Create Striped Backgrounds with CSS
Tags: html, css, webdev, tutorial
Published: 2020-12-30 16:57:25

Stripes look cool in the background and are very easy to create using *repeating gradients*. CSS has the properties `repeating-linear-gradient` and `repeating-radial-gradient` which we can use to create stripes. These two properties are widely supported in all [browsers](https://caniuse.com/css-repeating-gradients) - Firefox 10+, Chrome 26+, Safari 6.1+, IE 10, 11 and Opera 11.6+ (use prefixes for ancient browsers). That means, you can spice up your next project with gradient stripes without worrying about browser support.

**Syntax**

```
 background: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...); 
```
These examples should help you understand better.

### Horizontal Stripes
{% codepen https://codepen.io/dasshounak/pen/MWjQwqo %}

**Working**
There's no magic happening here. It is exactly the same as normal linear or radial gradients. Here, think of each stripe as a separate container which has a gradient background having same color at both ends. The first two color-stops act as the endpoints of the first container's gradient. The above code reads: *From the top, start with dark blue from 0px and end with dark blue at 20px. Then start with light blue from 20px and end with light blue at 40px. Repeat the steps.*

### Vertical Stripes
Just change the direction towards right or left to create vertical stripes.
{% codepen https://codepen.io/dasshounak/pen/LYRQVJg %}

### Diagonal Stripes
Use any angle to create diagonal stripes.
{% codepen https://codepen.io/dasshounak/pen/wvzyaYK %}

### Radial Stripes
Use `repeating-radial-gradient` to create radial stripes.
{% codepen https://codepen.io/dasshounak/pen/abmqORK %}

Why stop at only two colors when CSS doesn't get angry with more.
{% codepen https://codepen.io/dasshounak/pen/xxEYOEM %}

I hope you learnt something new from this quick tutorial and this motivated you to keep creating beautiful things with CSS.

Happy Coding!😎
The server is back, baby
Tags: webdev, rails, react, healthydebate
Published: 2020-12-30 16:56:12

2021 could well be the year of the server's glorious return.

The React team at Facebook have previewed [server components](https://reactjs.org/blog/2020/12/21/data-fetching-with-react-server-components.html), and the people at Basecamp have released [Hotwire](https://hotwire.dev/).

{% twitter 1341072021099327489 %}

{% twitter 1341420143239450624 %}

The approaches are very different, but both tools seem to be about:

- writing less JavaScript
- doing more on the server
- dealing in plain old HMTL whenever we can

## Why does it matter?

The past few years of web development have been about [shifting as much as possible _off_ the server](https://jamstack.org/).

Companies like Netlify have been arguing hard for making our apps as _static_ as possible, and building our dynamic features with client JavaScript,APIs and serverless functions.

This is arguably a faster, more secure way of doing things, but it does have downsides.

Doing everything statically can add complexity, and shifting the burden of work from our servers to the user's browser makes it harder to progresssively enhance our apps: we're beholden to the speed of the user's connection and hardware.

{% twitter 1344376354955935744 %}

Client-rendered single page apps _still_ have [accessibility issues that are hard to solve](https://www.gatsbyjs.com/blog/2020-02-10-accessible-client-side-routing-improvements/).

After a few years of this, it looks like the pendulum is now swinging back in the other direction.

Maybe the server is good for some things after all!

## How do they work?

React's server components are a carefully-considered redo of what Next.js does now with `getServerSideProps`.

With Next.js today, you can only do server-side operations on top level "page" components. This would remove that limitation.

Meanwhile, Basecamp's Hotwire is an evolution of the [Turbolinks](https://github.com/turbolinks/turbolinks) library that comes standard with all new Rails apps.

It seems intended to be a Rails companion, though I expect there's a way to use it seperately.


## Should I learn it now?

Probably not quite yet!

React's server components are a way off yet—all we can do is experiment with the demo.

While Hotwire is apparently production-ready, it'll take a little while for examples, documentation and patterns to get good enough for me to consider using it, at least.


## What's the reaction been?

Everyone seems to love Facebook's server components, though there's a lot of unanswered questions.

{% twitter 1343086245665067010 %}

People seem more confused about Hotwire. Maybe it's a sense of humour thing?

{% twitter 1341479796287676416 %}

Either way, I'm keen to see where this goes.

Exciting times ahead!
Postman Newman Tutorial
Tags: webdev, testing, tutorial, beginners
Published: 2020-12-30 16:55:26

Postman provides the capability to run Postman Collections through the command line tool called Newman. In this post, we will do a quick tutorial on the Postman Newman tool.

### **What is Newman?**
Newman is a command-line Collection Runner for Postman. With Postman, you can run collections in two ways –

- With the Postman Collection Runner
- With the Newman tool

With Newman, it allows you to run and test a Postman Collection directly from the command line.

Since you can run the collections via the command line, you can also easily integrate it with your continuous integration servers and build systems like Jenkins, TravisCI, etc…

### **How to run a collection using Newman?**
To run a collection using Newman, you need to export the Postman collection and then pass that collection name and address to the Newman CLI. Example run command –

```
newman run tests\Trello.postman_collection.json -e tests\Production.postman_environment.json
```
Running the Newman run command will generate a basic tabular CLI report –

![Newman Test Run](https://automationbro.com/wp-content/uploads/2020/12/image-16.png)
---

### **Check out the video below to learn more about Newman CLI tool –**
{% youtube ee-T6skoMjM %}

---

#### To learn about API Test Automation using JavaScript, check out my free tutorial series here –
[JavaScript API Test Automation Tutorial Series](https://www.youtube.com/watch?v=ZSVw3TyZur4&list=PL6AdzyjjD5HDR2kNRU2dA1C8ydXRAaaBV)

---

📧 Subscribe to my [mailing list](https://automationbro.com/mailing-list) to get access to more content like this 
👍 Follow [automationbro](https://twitter.com/automationbro) on Twitter for the latest updates

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

<a href="https://www.buymeacoffee.com/automationbro">![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/i/4aw2ub3f4qkyjk0ivwt4.png)</a>

You can also support me by liking and sharing this content.

Thanks for reading!
Disable Right Click
Tags: html, css, javascript, beginners
Published: 2020-12-30 16:53:23

Hello guys in this tutorial we will disable the right click on website using JavaScript.
JavaScript methods are used to disable the right click on the page. The used methods are listed below:
01. <a href="https://www.w3schools.com/jsref/met_element_addeventlistener.asp">HTML DOM addEventListener()</a> Method: This method attaches an event handler to the document.
Example:
Attach a click event to a `<button>` element. When the user clicks on the button, output Hello World in a `<p>` element with id='demo':
```js
document.getElementById("myBtn").addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});
```
In this tutorial we will use **<a href="https://www.w3schools.com/jsref/event_preventdefault.asp">event.preventDefault()</a>** method.

First we need to create two files **index.html** and **style.css** then we need to do code for it.
###Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to disable right click using JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <div class="center">
      <h2>Click on the button to disable right click</h2>
      <button class="btn" onclick="contextmenu()">Click Me</button>
      <small id="disable_msg"></small>
    </div>
    <script type="text/javascript">
      var disable_msg = document.getElementById("disable_msg");

      function contextmenu() {
        document.addEventListener('contextmenu', 
          event => event.preventDefault()
        );
        disable_msg.innerHTML = "Right Click Disable";
      }
    </script>
  </body>
</html>
```
###Step:2###
Then we need to add code for style.css which code i provide in below screen.
<a href="https://blog.stackfindover.com/disable-right-click-on-website-using-javascript/" rel="dofollow"> Download Css </a>

###Disable Right Click output:###
{% youtube kB3c75jH_tM %}

> For more interesting content like ▼▼▼

<a href="https://blog.stackfindover.com/how-to-create-custom-checkbox/" rel="dofollow">How to create custom checkbox</a>
Popup history with tmux and fzf
Tags: tmux, fzf, cli, fish
Published: 2020-12-30 16:36:39

![fzf-tmux history popup](https://dev-to-uploads.s3.amazonaws.com/i/3eorhwin6w2j68n73guc.png)

Many times a minute I use the <ctrl-r> keyboard shortcut in my terminal to pull up my history. The [80/20 rule](https://en.wikipedia.org/wiki/Pareto_principle) states that 80% of the input comes from 20% of the output. Applying that principle to my activity in the terminal means the majority of commands I want to run I 

Thankfully fzf wrote a [fzf-tmux script](https://github.com/junegunn/fzf/blob/master/bin/fzf-tmux) that makes it easy to integrate fzf with tmux.

Make sure you have installed the keybindings for your shell (you'll run something like `/usr/local/opt/fzf/install` in macOS). After running that command your `<ctrl-r>` command will be bound to your history.

Going one step further, tmux has [floating window support](https://github.com/tmux/tmux/issues/1842). To set your history to popup, add the following variables to your shell.

Here's my configuration with fish:
```sh
export FZF_TMUX_OPTS="-p"
export FZF_CTRL_R_OPTS="--reverse --preview 'echo {}' --preview-window down:3:hidden:wrap --bind '?:toggle-preview'"
```

The `-p` flag will now change all `fzf_tmux` behavior to pop up instead of creating a separate pane.

I chose to use `--reverse` on the `<ctrl-r>` options because I like the way it looks. I also added an optional preview flag bound to `?` as described in the [fzf key binding wiki](https://github.com/junegunn/fzf/wiki/Configuring-shell-key-bindings#ctrl-r).

I hope you like it! `fzf-tmux` with popup support has been a game-changer. I had some hesitations moving away from Visual Studio Code, mostly that tmux and neovim felt outdated when it came to visuals. But now, I'm liking this setup MORE than vscode and am excited to continue to tweak the system to be even more stylish and functional than any other IDE out there.

This is a simple change, but having a polish balanced screen makes all the difference for me, here it is one more time:

![fzf-tmux history popup](https://dev-to-uploads.s3.amazonaws.com/i/3eorhwin6w2j68n73guc.png)

Thanks for reading, I will continue to post tips and tricks for how to be more productive in the terminal and macOS, hit that follow button if you want to get more articles like this and hit one of those emojis in the sidebar if you liked this tip.
Adding a Footer to the Flyout in Xamarin.Forms
Tags: xamarinforms, mobile, design
Published: 2020-12-30 16:35:23

Header templating has been available since the beginning, and now you can also add a footer template without having to touch custom platform renderer code. Yay! 

{% youtube mT1s9YCXIS0 %}

### Resources
* [Docs: Flyout](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout)
* [Docs: Templates](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/)

{% github davidortinau/xappy %}
Amazing Strategy to Make Your Content Influential
Published: 2020-12-30 16:35:20

No one believes in word-of-mouth. Everyone wants the written material to claim about the strategies and services they are providing to the customer. Every industry needs to increase the traffic to their pages. This can happen if you have the best writers. The [Wikipedia writers](https://wikipagewriting.services/) give you the aesthetic content for your website. They work to establish a good image of your organization by providing qualitative content for your page. They are professional and know how to do deep research and give detail about the products. A good writer has the ability to compose productive content, improves SEO services, and give healthy digital content.

However, effective content plays a major part to increase the leads. It is essential to provide creative or attractive content that grabs the viewers’ attention. Here is the article that guides what a writer can do to your business.

Make Your Content Focused

You only have to provide the keyword for your message that supports your idea to convey to your onlookers. The writers play a keyword to target your audience. They make such content that delivers perfect knowledge about your products.
Draft Your Idea

Effective content is the healthy part that enhances your business. In simple words, it is the method to publish the voice of the company. Even more, the writers help you to give the exclusive image of your company. After the research, they have sufficient knowledge that increases your reliability.

Unique Way to Fascinate the Customers

You all know the viewers avoid lengthy content. After reading the headline or heading, they move forward. In a few minutes, the writers help you to grab the attention. Furthermore, they create limited content with strong verdicts that capture the customer’s attention. The writing also builds the brand persona and helps to achieve business goals.
Justify-content and Align-items in a nutshell
Tags: css, frontend, flexbox, webdev
Published: 2020-12-30 16:28:59

##Justify-content:
This is one of the most useful properties in flexbox. It provides alignment along the main-axis, distributes the free-space in an order. Lets's understand this visually. 
```
justify-content:flex-start| flex-end| center| space-between| space-around| space-evenly;
```
######There are start | end | left | right values too, that we don't use much often

![justify-content](https://dev-to-uploads.s3.amazonaws.com/i/mqoly1ayftpd3c5flawv.jpg)

**Flex-start** (default): items are towards the start of the flex-direction.

**Flex-end**: towards the end.

**center** : at the center.

**space-between**: Items are evenly distributed in the line; the first item is on the start line, the last item on the end line.

**space-around**: Items are evenly distributed in the line with equal space around them. Each item has equal space around them, look at the illustration carefully. 

**space-evenly**: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

### Align-items:

This gives positioning in the cross-axis of the flex-direction. It's just like justify-content but in cross-axis. Its values are,
```
align-content:stretch | flex-start | flex-end | center | baseline;
```
![align-items](https://dev-to-uploads.s3.amazonaws.com/i/t83shx6rjd8bfio2zj5o.jpg)
All the values are pretty self explanatory, 

**stretch** (default): stretch to fill the container.

**flex-start**: items are placed at the start of the cross axis.

**flex-end**: items are placed at the end of the cross axis.

**center**: items are centered in the cross-axis

**baseline**: items are aligned such as their baselines align

That's it for justify-content and align-items.
This is a part of my [complete guide to Flexbox](https://aidevv.in/master-flexbox-the-easy-way/ "Master Flexbox: The easy way")  post on my website. Hopefully, You liked it, if so then do check out the complete guide on my website. You can follow me on [Twitter](https://twitter.com/aidevv_in) for daily tweets about development and design. Thank u. Happy coding :)