teleren/devto huggingface dataset:
Grid and Stack Layout
Tags: xamarin, xaml, xamarinforms
Published: 2020-01-03 04:36:37

Grid and Stack Layout is the most commonly used containers in Xamarin Forms. Both have their own purpose and usage. Grids are used for creating complex user interfaces as compared to Stack Layout as it arranges views (controls) into rows and columns. While Stack Layout is less complex and can be used for creating linear user interfaces either horizontally or vertically.

## Grid

Grids use Row and Column to arrange views. You can use Grids to give each view equal size in one dimension. Rows and Columns information is stored in RowDefinition and ColumnDefinition which specifies how rows and columns will be laid out.

The view is then added to the grid with Specified row and column attached properties which specifies which row or column view will be placed in.

**Row & Columns**

Information for row and column definition is stored inside the Grid’s RowsDefinitions and ColumnDefinitions collections, which has RowDefinition and ColumnDefinition object, respectively. RowDefinition has a property Height and ColumnDefinition has a property named Width. Both properties have the following options to set:

- **Auto** – Automatically sizes to fit view inside row or column. You can use GridUnitType.Auto in Code or Auto in XAML.
- **Star(*)** – Sizes rows and columns equally of the available space. 
You can use GridUnitType.Star in Code or #* in XAML where # will be your desired value.
- **Absolute** – Sizes rows and columns from fixed height/width values. 
You can use GridUnitType.Absolute in Code or # in XAML where # will be your desired value.
By default, the width values for columns are set to * to fill the available space.


```<Grid>
  <Grid.RowDefinitions>
    <RowDefinition Height="*" />
    <RowDefinition Height="*" />
  </Grid.RowDefinitions>
  <Grid.ColumnDefinitions>
    <ColumnDefinition Width="*" />
    <ColumnDefinition Width="*" />
  </Grid.ColumnDefinitions>
  <Label Text="Top Left" Grid.Row="0" Grid.Column="0" />
  <Label Text="Top Right" Grid.Row="0" Grid.Column="1" />
  <Label Text="Bottom Left" Grid.Row="1" Grid.Column="0" />
  <Label Text="Bottom Right" Grid.Row="1" Grid.Column="1" />
</Grid>
``` 

## Stack Layout

**Spacing**

Default spacing between each view inside stack layout is set to 6px margin. You can set or override the default spacing like this:


```<StackLayout Spacing="12">
 <Label Text="Email" />
 <Entry Placeholder="Enter email />
</StackLayout>
``` 

**Sizing**

The following layout options can be used in HorizontalOptions and VerticalOptions places the views according to their positions (Start, Center, End or Fill) and takes as much space as the parent container will give.

- StartAndExpand
- CenterAndExpand
- EndAndExpand
- FillAndExpand

**Positioning**

The below list of positions can be used in HorizontalOptions and VerticalOptions that just position the views and not let take any extra space in the container.

- Start
- Center
- End
- Fill

You can also create complex user interfaces by nesting StackLayouts inside another.

*****
###### **Keep learning and Enjoy!**
Displaying a persistent model from a child widget
Tags: android, flutter, design
Published: 2020-01-03 06:57:27

Have you wanted to display a persistent model from a child widget in flutter?
if you are a mobile developer the answer might be yes...

here are a couple of reason you might need it, you need to show a model but you need your model to show on top of all widget not the child widget, the solution of cause as might guess us to go to the root widget so you can show the model from there, the problem is that by the time you try to do that the flutter will be in process of rebuilding the widget tree and therefore it can not insert a widget during building phase..... aha now you know the problem how do you solve it then???

the answer is to wrap up the new model you want to insert into widget tree like this `` WidgetsBinding.instance
                .addPostFrameCallback((_) => _showBottomSheet());``
this will ensure that the flutter SDK has done rebuilding new widget tree....

I guess this has helped you a lot. thank you please give me feedback about my writing.
My bookmark worthy JavaScript podcast list
Tags: javascript, webdev
Published: 2020-01-03 10:50:41

---
title: My bookmark worthy JavaScript podcast list
published: true
description: Personal list of JavaScript Podcasts, that deserved bookmarking on www.bookmarks.dev
cover_image: https://thepracticaldev.s3.amazonaws.com/i/xii1i1ftuuf8sj6i3e0i.png
tags: javascript, webdev
---

I am an avid podcast listener, but it's been more difficult lately with my two kids swirling around me and audio books competing for my "audio learning" attention. Nevertheless I still find podcasts an invaluable source of information and news. 

In this post I list the JavaScript related podcasts I have bookmarked and listen to. You can also find these links on [www.bookmarks.dev](https://www.bookmarks.dev/?q=%5Bpodcast%5D%20%5Bjavascript%5D%20&sd=public&tab=search-results), where I shared them. 

> Click on the title or the image below it to be taken to the podcast's home page


### [The Vanilla JS Podcast](https://vanillajspodcast.com/)
[![The Vanilla JS Podcast](https://thepracticaldev.s3.amazonaws.com/i/z9kw6rt87qq00757mjc8.png)](https://vanillajspodcast.com/)

### [Front End Happy Hour](http://frontendhappyhour.com/)
[![Front End Happy Hour](https://thepracticaldev.s3.amazonaws.com/i/07wb6li2eyrzg5ixxd0i.png)](http://frontendhappyhour.com/)

### [Syntax.fm](https://syntax.fm/)
[![Syntax.fm](https://thepracticaldev.s3.amazonaws.com/i/oolm1uwtk4ht1zud190t.png)](https://syntax.fm/)

### [Real Talk Javascript Podcast](https://realtalkjavascript.simplecast.com/)
[![Real Talk Javascript Podcast](https://thepracticaldev.s3.amazonaws.com/i/drhfbpyzf7gk07n0ep6f.png)](https://realtalkjavascript.simplecast.com/)

### [JS Party Podcast](https://changelog.com/jsparty)
[![JS Party Podcast](https://thepracticaldev.s3.amazonaws.com/i/t8wjvelc9aqws06li43e.png)](https://changelog.com/jsparty)

### [Podcasts – React](https://reactjs.org/community/podcasts.html)
[![Podcasts – React](https://thepracticaldev.s3.amazonaws.com/i/6ta067u202idib8sve6x.png)](https://reactjs.org/community/podcasts.html)

### [The Changelog](https://changelog.com/podcast)
[![The Changelog](https://thepracticaldev.s3.amazonaws.com/i/tj52c3hdla85axt0mf47.png)](https://changelog.com/podcast)

### [Adventures in Angular](https://devchat.tv/adv-in-angular)
[![Adventures in Angular](https://thepracticaldev.s3.amazonaws.com/i/v30ars67h7hf26o5b21u.png)](https://devchat.tv/adv-in-angular)

Please leave in comments other javascript podcasts you are fond of and you think deserve being eventually published on [bookmarks public repository](https://github.com/CodepediaOrg/bookmarks/blob/master/tagged/podcast.md)
About 2019
Tags: yearinreview, 2019
Published: 2020-01-03 11:14:15


In a couple of sentences the previous year was:

- Started more or less than 20 books
- Finished 12 books
- 8 Trips
- At least, 50 new coworkers
- First tech talk
- Write the first article of my blog
- Complete redesign of Web UI Bootcamp at the company
- Create a seed for React projects

Additionally, I discovered one of my passions. “I love learning and teaching.”

It’s crazy, before the analysis I didn’t feel that proud of my year. From one moment to another, the previous year was full of achievements. Nothing has changed, just the way I see the year.

> It was after the analysis that I discovered the number of achievements.  For 2020, I will try to have that analysis more frequently.

What about you? I will love to hear about your 2019 resumes. What was your 2019 in a couple of sentences?
Using Python to create Teradata tables with random schema
Tags: teradata, database, metadata, python
Published: 2020-01-03 14:15:51

Having a large amount of test data sometimes take a lot of effort,  and to simulate a more realistic scenario, it’s good to have a large number of tables with distinct column types. This script generates random tables schema for Teradata.

## Environment

##### Activate your virtualenv
```bash
pip install --upgrade virtualenv
python3 -m virtualenv --python python3 env
source ./env/bin/activate
```

##### Install the requirements for the metadata generator
```bash
pip install -r requirements.txt
```

## Code
{% gist https://gist.github.com/mesmacosta/86bd6a4b4938eaf67dd2d95a3afa3ef9 %}

## Execution
```bash
export TERADATA_SERVER=127.0.0.1
export TERADATA_USERNAME=my_user
export TERADATA_PASSWORD=my_user_pwd
export TERADATA_DATABASE=my_db

python metadata_generator.py \
--teradata-host=$TERADATA_SERVER \
--teradata-user=$TERADATA_USERNAME \ 
--teradata-pass=$TERADATA_PASSWORD \
--teradata-database=$TERADATA_DATABASE
```

And that's it!

If you have difficulties, don’t hesitate reaching out. I would love to help you!
How to draw a box on hover with CSS
Tags: tutorial, css
Published: 2020-01-03 15:05:27

Hey everyone, I recently learned how to draw a box on hover using CSS and thought I would make a quick tutorial about it.

First you'll need a word or link to hover over. In the example below I'll be using a class called .navA, here is what the html for this could look like.

```
<a>Hover</a>
```

Next you'll want to open a css file that is connected to either your html file or your component if you're using react. We will use transition to draw the box over time. I want to draw my box starting from the bottom and go left to right. So first i'll write out transition and give it a border-bottom and then I can set how long it will take for that part of the border to show up. Repeat this step for each side of the border.



```
.navA {
  text-decoration: none;
  transition: border-bottom .2s, border-left .4s, border-top .6s, border-right .9s;
  
}
```

Cool now you know how to draw a box on hover with CSS. Play around with it and try changing the colors.
Creating and updating users with omniauth
Tags: ruby, rails, omniauth
Published: 2020-01-03 21:57:07

There are a number of tutorials, including the [omniauth overview](https://github.com/plataformatec/devise/wiki/OmniAuth:-Overview), that suggest having a method along the following lines:

```ruby
def self.from_omniauth(auth)
  where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
    user.email = auth.info.email
    user.password = Devise.friendly_token[0, 20]
    user.name = auth.info.name   # assuming the user model has a name
    user.image = auth.info.image # assuming the user model has an image
  end
end
```

That `first_or_create` will try to find a user by the `auth.provider` (e.g. `twitter`) and `auth.uid` (e.g. `rodreegez`) and create one with those attributes if one isn't found. What it _doesn't_ do is update a found user if the user _is_ found. 

So, in the example above if, when an existing user signs in with Twitter having updated their name, our app won't get the new name of the user.

Instead, we should do something like this to ensure we are updating our user information when the user logs in:

```ruby
  def self.from_omniauth(auth)
    user = find_or_initialize_by(provider: auth.provider, uid: auth.uid)
    user.email = auth.info.email
    user.password = Devise.friendly_token[0, 20]
    user.name = auth.info.name   # assuming the user model has a name
    user.image = auth.info.image # assuming the user model has an image

    user.save
    user
  end

```

That `find_or_initialize_by` behaves more like we expect it in this situation. Or at least, it behaves in a way that is more appropriate to the task we have at hand - it either finds an existing record or initializes a new one, but doesn't try to save the record. We are then able to set the attributes of the found-or-initialized user, save it, and return the saved-or-updated user to the caller.

Hope that helps.

🍻
Starter Template #2 | Next JS + Stripe Checkout 
Tags: javascript, nextjs
Published: 2020-01-03 22:19:22

This template is a starter for those looking to use [Next JS](https://nextjs.org/) whit [Stripe Checkout](https://stripe.com/payments/checkout) in a project.

## DEMO
You can check a live sample in [CodeSandbox](https://codesandbox.io/s/template-nextjs-stripe-checkout-single-exf8x). To test the complete flow you need to open the browser in a new tab.

## NOW
You can deploy the project to [Zeit's NOW](https://zeit.co/) directly from codesandbox or by cloning this [repo](https://github.com/thatgoodcompany/template-nextjs-stripe-checkout-single). 

## Setup

### localhost
Create an .env file with STRIPE_SECRET and STRIPE_CLIENT as well as a .env.build file with STRIPE_CLIENT and any other variable that Next needs at build time.

### CodeSandbox
Add [CodeSandbox secrets](https://codesandbox.io/docs/secrets) for STRIPE_SECRET and STRIPE_CLIENT.

### NOW
Keep the now.json file and add the [environment variables with the NOW CLI](https://zeit.co/docs/v2/build-step/#adding-secrets) `now secrets add <secret-name> <secret-value>`.
character controller unity
Published: 2023-03-28 08:15:43

```
gamedev


using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerScript : MonoBehaviour
{
    public float playerSpeed = 2.5f;
    public float playerSprint = 3.5f;    
    public CharacterController cc;
    public Transform playerCamera;
public float turnCalmTime = 0.1f;
float turnCalmVelocity;
public float gravity = -9.8f;
public float jumpRange = 1f;
public Vector3 velocity;
public Transform surfaceCheck;
bool onSurface;
public float surfaceDistance = 0.4f;
public LayerMask surfaceMask;
public Animator animator;
void playerMove(){
    float horizontal_axis = Input.GetAxisRaw("Horizontal");
    float Vertical_axis = Input.GetAxisRaw("Vertical");
    float Jump_axis = Input.GetAxisRaw("Jump");



    Vector3 direction = new Vector3(horizontal_axis,0f,Vertical_axis).normalized;
if(direction.magnitude >=0.1f){

animator.SetBool("Idle",false);
animator.SetBool("Walk",true);
animator.SetBool("Run",false);
float targetAngle = Mathf.Atan2(direction.x,direction.z) * Mathf.Rad2Deg + playerCamera.eulerAngles.y;
float angle = Mathf.SmoothDampAngle(transform.eulerAngles.y,targetAngle,ref turnCalmVelocity,turnCalmTime );
transform.rotation= Quaternion.Euler(0f,angle,0f);

Vector3 moveDirection = Quaternion.Euler(0f,targetAngle,0f)*Vector3.forward;
cc.Move(moveDirection.normalized *playerSpeed* Time.deltaTime);
}else{
 animator.SetBool("Idle",true);
animator.SetBool("Walk",false);
animator.SetBool("Run",false);
}
}








void Jump(){
    if(Input.GetButtonDown("Jump") && cc.isGrounded){
    animator.SetBool("Idle",false);
        animator.SetTrigger("Jump");
        velocity.y = Mathf.Sqrt(jumpRange*-2*gravity);
    }else{
        if(cc.isGrounded){
   animator.ResetTrigger("Jump");
        }
        
   
    }
}
void Sprint(){
    if(Input.GetButton("Sprint") &&Input.GetKey(KeyCode.W)&& onSurface){

      
        Debug.Log("sprint");
    float horizontal_axis = Input.GetAxisRaw("Horizontal");
    float Vertical_axis = Input.GetAxisRaw("Vertical");
    float Jump_axis = Input.GetAxisRaw("Jump");



    Vector3 direction = new Vector3(horizontal_axis,0f,Vertical_axis).normalized;
if(direction.magnitude >=0.1f){
animator.SetBool("Walk",false);
animator.SetBool("Run",true);
 
float targetAngle = Mathf.Atan2(direction.x,direction.z) * Mathf.Rad2Deg + playerCamera.eulerAngles.y;
float angle = Mathf.SmoothDampAngle(transform.eulerAngles.y,targetAngle,ref turnCalmVelocity,turnCalmTime );
transform.rotation= Quaternion.Euler(0f,angle,0f);

Vector3 moveDirection = Quaternion.Euler(0f,targetAngle,0f)*Vector3.forward;
cc.Move(moveDirection.normalized *playerSprint* Time.deltaTime);
}else{
animator.SetBool("Walk",true);
animator.SetBool("Run",false);  
}
    
}
}
private void Update() {
onSurface = Physics.CheckSphere(surfaceCheck.position,surfaceDistance,surfaceMask);

 if(onSurface && velocity.y <0){
        velocity.y = -2f;
    }
velocity.y +=gravity *Time.deltaTime;
    cc.Move(velocity*Time.deltaTime);
    
    playerMove();
        Sprint();
    Jump();
}
}

```













`hello`
Top 10 Hottest Kubernetes tools and Technologies of 2019
Published: 2020-01-04 06:16:29



1. Rancher K3

2. Red Hat codeReady WorkSpaces

3. Styra DAS

4. TrilioVault for kubernetes

5. Pivotal Build Service

6. Kublr Enterprise Platform 2.0

7. Kasten K10 2.0

8. Harbor

9. Alcide kAudit

10. Amazon SageMaker operators for kubernetes.
Composition vs Inheritance
Tags: javascript, oop, functional
Published: 2020-01-05 04:39:20

Composition vs Inheritance
Inheritance is about what it is while composition is all about what it has or what it's ability is.In Inheritance we pre-define the architecture like parent class is inherited by sub classes and this sub class is inherited by another sub classes and this nesting continues the more nesting we have the more rigid is our code that is more harder to change and some times our code may get fragile that is if we change in parent class it may effect sub class in unexpected manner.For example I have a Base class `Human` then three sub class `young,old,adult` then we have inner sub class for each of them which could be `male,female`.But how this inner classes or inheritance make our code rigid or harder to change in future let's understand this issue with an example.

{% gist https://gist.github.com/bhaveshdaswani93/1da104552eda0a4efd3c69fd14518863 %}

In class base inheritance i have created three classes Human -> Young -> Male
The method of Young and Human class are available to Male class instance, this is what i mean the inheritance is all about what it is, we are predefine the relationship and there inheritance. Suppose in future we have certain requirement  for which we need to change the inheritance flow to Human->Male->Young. Some time it is possible to do change like this, but i am sure that in near future it will break because tight coupling that is Young class depend on Human, Male class depend on Young class will definitely will create issue in future because as a human we cannot predict future, changes will be there so how to resolve this. My preference is composition. Composition focuses on what is the ability, for that to understand i have created two function. A man function return an a instance with sleep ability which is provided by getSleepAbility function. So dividing the requirement into ability  and composing  required abilities is the answer to tight coupling which is caused by `what it is` instead of `what ability it has`.
How really works the CSS position property 
Tags: css, html, beginners
Published: 2020-01-09 16:08:11

I have seen a lot of developers using the CSS position property in a wrong way or by try and test "technic", some times, not only the beginners but some mid-level developer also.

So, I decided to write this article to explain how the position rule works.

#### `position: static;`
Is the default value for any `HTML` element. It makes the element follow the standard HTML flow, putting each element after the previous element and before the next element on the DOM.

![Alt Position Static Gif](https://thepracticaldev.s3.amazonaws.com/i/10jv0ntujnawitbqahyg.gif)

#### `position: relative;`
The `relative` value works like the `static` one, but now you can set `top`, `right`, `bottom` and `left` values for this element. 

Also, `relative` elements are used as a reference for `absolute` children elements.

![Alt Position Relative Gif](https://thepracticaldev.s3.amazonaws.com/i/q6dw4wvpu5gzg9cjfkmp.gif)


#### `position: absolute;`
Elements with `absolute` position are removed from the flow of the document. Other elements will follow the flow normally.  

Important to know, `top`, `right`, `bottom` and `left` of `absolute` elements will refer to the first `relative` parent.

![Alt Position Absolute Gif](https://thepracticaldev.s3.amazonaws.com/i/7q69pj4rsrjyrvuwtoez.gif)

#### `position: fixed;`
Is very similar to `position: absolute;`, but the `fixed` elements will refer to the `document` instead a parent.

![Alt Position Fixed Gif](https://thepracticaldev.s3.amazonaws.com/i/34sudmm11w2yn8q5m710.gif)

#### `position: sticky;` (experimental)
the element is treated as a `relative` value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a `fixed` position where it is told to stick.

## Conclusion

I hope this article can help you to understand and use position CSS property with more efficiency. 

Thanks for reading ;)
How to resize image in Laravel ?
Tags: laravel, resize, image
Published: 2020-01-04 14:44:46

In this tutorial we are going to learn how to resize image in laravel ? It is pretty simple and easy. For doing it i will use image intervention package. we will use intervention/image package for resize or resize image in laravel. Intervention provide a resize function that will take a three parameters. three parameters are width, height and callback function. callback function is a optional.

So here i write step by step tutorial of resize image in laravel. So just follow bellow step to create image example for your project.

https://codechief.org/article/resize-image-using-image-intervention-package-in-laravel
Using Githooks for CI/CD
Tags: git, cicd, npm
Published: 2020-01-04 17:35:40

A tutorial on how to to use [git-scripts](https://www.npmjs.com/package/git-scripts) for CI/CD

## Create the package.json

Create a `package.json` by running:

```
npm init
```

Install git-scripts to the package by running:

```
npm install --save-dev git-scripts
```

## Add the Git Hooks

After the `devDependencies` section, add:

```json
  "devDependencies": {
    "git-scripts": "^0.2.1"
  },
  "git": { 
    "scripts": { 
      "pre-push": "<command(s) to run before git push>" 
    } 
  }
```
Sending Whatsapp messages with command line
Tags: python, selenium, whatsapp, commandline
Published: 2020-01-05 20:38:47

---
title: Sending Whatsapp messages with command line
published: true
description: Sending Whatsapp messages with command line
tags: python, selenium, whatsapp, command-line
---
Send message to Whatsapp via "command line" using Python and Selenium.

{% github mayronceccon/send-message-whatsapp-line-command %}
Java 14 - LTS Wrap up
Tags: java, linux
Published: 2020-01-05 23:04:20

---
title: Java 14 - LTS Wrap up
published: true
description: We look at what will come in the next release of java. Java 14, this release will wrap up development for the long time support release.
tags: java, linux
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kdmy78uop71iexm4xnbi.jpg
---

{% youtube 2WLwip0I3Pk %}

We look at what will come in the next release of java. Java 14, this release will wrap up development for the long time support release.
Where can I find a list of *all* dev.to's tags
Tags: meta, help
Published: 2020-01-06 02:01:47

---
title: Where can I find a list of *all* dev.to's tags
published: true
description: 
tags: meta, help
---

Maybe I'm over-looking something obvious, but when I search I only find the page with the *top 100* tags (https://dev.to/tags) but I'm wondering where I can find *all* the tags, thanks