teleren/devto huggingface dataset:
Simple Chrome Extension 
Tags: html, css, json
Published: 2020-12-29 15:44:36

![Chrome_Extension](https://dev-to-uploads.s3.amazonaws.com/i/tzwcg0agqlaetjbtofxd.jpg)

My first chrome extension build using simple html , css and and very less or not javascript . 
Link to My git Repository  [Prashik_Social_Launcher](https://github.com/prashikdewtale10/Prashik_Links_Launcher)

the main part of this simple project to developed manifest.json file which contains all the icon source and other html file .


![carbon (2)](https://dev-to-uploads.s3.amazonaws.com/i/xyf8sq1bdiyfxyzb68wp.png)


Find  any suggestion please Write to me.

 **Lets Connect** 
          [Github](https://github.com/prashikdewtale10)     [DEV.to](https://dev.to/prashikdewtale10)
Add a Header to the Flyout Menu in Xamarin.Forms
Tags: xamarinforms, mobile, design
Published: 2020-12-29 15:40:51

Just like flyout items, menu items, and the flyout footer, we can customize the header. This can be positioning fixed, or scroll away as desired. You can quickly add content directly in the `AppShell.xaml`, or break it out into a separate template.

This video shows how to add content to the flyout.

{% youtube VZxV5lAzDZ0 %}

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

{% github davidortinau/Xappy %}
Complete Control of Flyout Items with Templates in Xamarin.Forms
Tags: xamarinforms, mobile, design
Published: 2020-12-29 15:38:08

Everything on a Xamarin.Forms flyout can be templated, and the first you'll likely want to customize is the flyout items themselves. You have bindable properties for things like the image and the title text, and visual states are propogated as well. You can define your template inline with the Shell file, or in a separate file. Both work with Hot Reload.

{% youtube jc9STyYtB_M %}

### Resources
* [Docs: Visual State Manager](https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/visual-state-manager)
* [Docs: Templates](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/templates/data-templates/creating)

{% github davidortinau/Xappy %}
Style Flyout Items with Visual States in Xamarin.Forms
Tags: xamarinforms, mobile, design
Published: 2020-12-29 15:35:34

Use Styles and Visual State Manager to quickly style the different looks of your Flyout Items. This video sets the selected background color of the menu item to orange, though I'm sure your design could do much better. 

{% youtube Yw7YZCZDB4A %}

{% gist https://gist.github.com/davidortinau/1e438e2a3e1ccbd227cc12a14253309e %}

### Resources
* [Docs: Flyout Style Classes](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyoutitem-and-menuitem-style-classes)
* [Docs: Visual State Manager](https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/visual-state-manager)

 {% github davidortinau/Xappy %}
Adding Icons to Flyout Items (and Tabs) in Xamarin.Forms
Tags: xamarinforms, mobile, design
Published: 2020-12-29 15:31:58

Using font icons is one of the most flexible ways to quickly add useful design to your flyout menu. Of course, you can use images as well. With font icons you can also us Visual State Manager to further style them.

{% youtube 693wmMzc3lQ %}

### Resources
* [Docs: Flyout](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-items)
* [Docs: Fonts & Icons](https://docs.microsoft.com/xamarin/xamarin-forms/user-interface/text/fonts#display-font-icons)

{% github davidortinau/Xappy %}
Change the Flyout Icon in Xamarin.Forms
Tags: xamarinforms, mobile, design
Published: 2020-12-29 15:29:15

You can swap out the menu icon with any image or even font icon on the Xamarin.Forms Shell. This video quickly demonstrates both options, and introduces how easy it is to embed a cross-platform image using the Resizetizer library for SharedImage.

{% youtube e2rymiDOTrA %}

### Resources
* [Docs: Flyout](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/flyout#flyout-icon)
* [Resizetizer](https://github.com/Redth/ResizetizerNT)
Hide Shell Flyout Items and Tabs in Xamarin.Forms
Published: 2020-12-29 15:26:04

Xamarin.Forms Shell has an `IsVisible` property you can use to show and hide pages in a flyout or tab bar, and control if those pages are routable based on any criteria such as authorization role.

{% youtube 6QZp9nERxvg %}

{% gist https://gist.github.com/davidortinau/9273749e6fcbc9b5580065b5a6e967fb %}

### Resources
* [Docs: Tabs](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/shell/tabs#shellcontent-class)
* [Docs: Messaging Center](https://docs.microsoft.com/xamarin/xamarin-forms/app-fundamentals/messaging-center)

{% github davidortinau/ShellLoginSample %}
React Image Upload with Preview example
Tags: react, javascript, webdev, todayilearned
Published: 2020-12-29 15:23:42

In this tutorial, I will show you way to build React.js Image Upload example with Preview to a Rest API. The React App uses [Axios](https://github.com/axios/axios) and [Multipart](https://www.w3.org/Protocols/rfc1341/7_2_Multipart.html) File for making HTTP requests, Bootstrap for progress bar. You also have a display list of images' information (with download url).

Full Article: [https://bezkoder.com/react-image-upload-preview/](https://bezkoder.com/react-image-upload-preview/)

Overview
--------

We’re gonna create a React Image upload application in that user can:

*   see the preview of image before uploading
*   see the upload process (percentage) with progress bar
*   view all uploaded images
*   link to download the image when clicking on the file name

![react-image-upload-with-preview-example](https://dev-to-uploads.s3.amazonaws.com/i/x2hol0pbfk8uw2pnfp41.png)

Technology
----------

*   React 16/17
*   Axios 0.21.1
*   Bootstrap 4

Rest API for File Upload & Storage
----------------------------------

Here is the API that our React App will work with:

- POST `/upload`: upload a File
- GET `/files`: get List of Files (name & url)
- GET `/files/\[filename\]`: download a File

You can find how to implement the Rest APIs Server at one of following posts:
\- [Node.js Express File Upload Rest API example](https://bezkoder.com/node-js-express-file-upload/)
\- [Spring Boot Multipart File upload (to static folder) example](https://bezkoder.com/spring-boot-file-upload/)
\- Or: [Spring Boot Multipart File upload (to database) example](https://bezkoder.com/spring-boot-upload-file-database/)

React App for upload/download Image with preview
------------------------------------------------

After building the React project is done, the folder structure will look like this:

![react-image-upload-with-preview-example-project-structure](https://dev-to-uploads.s3.amazonaws.com/i/ojaj4szismayng7gkobr.png)

Let me explain it briefly.
- _file-upload.service_ provides methods to save File and get Files using Axios.
- _image-upload.component_ contains upload form, image preview, progress bar, display of list of images with download url.
- _App.js_ is the container that we embed all React components.
- _http-common.js_ initializes Axios with HTTP base Url and headers.
- We configure port for our App in _.env_

For more details, implementation and Github, please visit:
[https://bezkoder.com/react-image-upload-preview/](https://bezkoder.com/react-image-upload-preview/)

## Further Reading
\- [React Multiple Files upload example with Progress Bar](https://bezkoder.com/react-multiple-files-upload/)
\- [React.js CRUD example to consume Web API](https://bezkoder.com/react-crud-web-api/)
\- [React JWT Authentication (without Redux) example](https://bezkoder.com/react-jwt-auth/)
\- [React + Redux: JWT Authentication example](https://bezkoder.com/react-redux-jwt-auth/)
Day 6 of 100DaysOfCode: Python Code to Find Even and Odd Numbers From List
Tags: 100daysofcode, programming, codenewbie, python
Published: 2020-12-29 15:23:11

This is my 6th day of 100daysofcoding. I continue to learn from Coursera Python Data Structure course and also did some assignments. I tired to write code to find even and odd numbers from list. My code is right below.
My Solution 
* Create a empty dictionary
* Give list of numbers 
* Loop through each numbers and find out even numbers and keep it in even list similarly find odd numbers and keep it in odd list. 
```python
my_dict = {}
numbers = list(range(1,11))
even = []
odd = []
for n in numbers:
    if n % 2 == 0:
        even.append(n)
    else:
        odd.append(n)
        
my_dict["odd"] = odd
my_dict["even"] = even
print(my_dict)
```

<blockquote class="twitter-tweet"><p lang="en" dir="ltr"><a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> , day 6 <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* More about python Dictionary<br>* More about Loop<br>* Python program to find out even and odd numbers from list. <a href="https://t.co/YTrsgbmSy7">pic.twitter.com/YTrsgbmSy7</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1343936614708305920?ref_src=twsrc%5Etfw">December 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Adding to Lottie Animations to Xamarin.Forms
Tags: xamarinforms, design, mobile
Published: 2020-12-29 15:20:38

Lottie is a simple file format that brings expressive animations from programs like After Effects to your applications. These are great for complex animations such as you might use in an onboarding flow, and simple animations for providing meaningful user feedback.

Lottie Files hosts tons of ready-made and even free animations if you choose to not make your own. 

{% youtube x-XpNWuR4bk %}

{% gist https://gist.github.com/davidortinau/910a00df4ddf143a18d32ff24eedfdb0 %}

### Resources:
* [Lottie Files](https://lottiefiles.com/41812-christmas-tree)
* [Baseflow Lottie Library](https://github.com/Baseflow/LottieXamarin)

{% github davidortinau/Lottiemas %}
🌍Auth0 Customers: Your Brexit Questions Answered
Tags: brexit, compliance, laws
Published: 2020-12-29 14:54:48

📈Making sense of regulatory uncertainty in Brexit impact planning
[Read more...](https://auth0.com/blog/auth0-customers-your-brexit-questions-answered/?utm_source=content_synd&utm_medium=sc&utm_campaign=brexit_q_a)
EL PSY CONGROO
Tags: dohackathon
Published: 2020-12-29 14:51:11

## What I built
I have build my portfolio using html, css, javascript...
### Category Submission: 
Personal Site/Portfolio

### App Link
https://my-portfolio-qe3jq.ondigitalocean.app/

### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/al776tvi416ibdfxfmgy.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/mcpva5xmjql59wx6mume.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1g38c70ocolikefo8vh5.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/haq94mlmbtt84l19madd.png)
### Description
 This is my portfolio website and I have shown here some of my projects which I have done...
### Link to Source Code
https://github.com/bakiyaswanth/my-portfolio
### Permissive License
MIT

## Background
Actually I wanted to share some of my projects and wanted to showcase my skills in one place so I have created my portfolio...
### How I built it 
I have build my portfolio site using html, Css, Java script and deployed on Digital Ocean app platform


### Additional Resources/Info
while going through my portfolio you can actually have a good time here by playing some of the games that i have build and enjoy
Thank you Digital Ocean
Commit to Committing
Tags: learning, git, developer, blogging
Published: 2020-12-29 14:42:56

---
title: Commit to Committing
published: true
description: As a beginning developer, I've learned it's essential to write about what you're learning and working on to help cement everything. Learning anything, especially growing technologies and stacks, can become overwhelming. 
tags: learning, git, developer, blogging
//cover_image: https://direct_url_to_image.jpg
---

As a beginning developer, I've learned it's essential to write about what you're learning and working on to help cement everything. Learning anything, especially growing technologies and stacks, can become overwhelming. Granted, it can also take some additional motivation to get into the habit of writing about what you've learned or even going back to read what you've learned; but I feel the payoff will be worth it. Git is a valuable tool to help with this!

If you haven't learned Git yet, I recommend taking the time to do so as early as possible. I won't go into it any detail here as there's plenty of excellent guides out there already. But Git is a priceless tool with many helpful commands, particularly `git log`. I realized committing is extremely handy, especially when learning. Commit early, commit often. Being as detailed as you would like in your messages, you can even write [multi-line commit messages](https://stackoverflow.com/questions/5064563/add-line-break-to-git-commit-m-from-the-command-line). 

Having a string of commits to look back on can not only show your progress, what you've achieved (or gotten stuck on) but also help writing about what you've learned. That is, using `git log` will show a detailed history of each commit made to your repo. I like to filter down on the output. Using the following command below, I can view just the author, timestamp, and commit message to export to a file. 

`git log --pretty=format:"%h%x09%an%x09%ad%x09%s" > history.md`

Once exported, I can use it as an outline for a blog post. There are also some additional [log formatting options](https://stackoverflow.com/questions/1441010/the-shortest-possible-output-from-git-log-containing-author-and-date) that you may find useful as well.

In this example, I exported to a [markdown](https://guides.github.com/features/mastering-markdown/) file as I use [Jekyll](https://jekyllrb.com/) sites as my primary blogging engine, but you can really use anything you'd like. Markdown seems to be a standard in blogging these days, so it couldn't hurt to learn this syntax if you haven't already. 

This is just a quick overview of my workflow I designed recently, but I'd be curious if other folks find this handy or are using something similar.
I guess I should introduce myself...
Published: 2020-12-29 14:42:37

Links:

* [Toby Ink Ltd](https://darlingtondesign.co.uk) - professional stuff - cheap bespoke Wordpress websites, Darlington, UK 
* [@tobyink](https://github.com/tobyink) - GitHub profile
* [TOBYINK on CPAN](https://metacpan.org/author/TOBYINK) - open source Perl code
* [Personal website](https://toby.ink/)
Exploring The Meal DB API
Tags: api, javascriptprojects, javascript
Published: 2021-03-26 07:55:15

---
title: Exploring The Meal DB API
published: true
date: 2020-12-29 14:39:42 UTC
tags: API,JavaScriptProjects,api,javascript
canonical_url: https://nikhilsawantse.com/exploring-the-meal-db-api/
---

*Cooking is like love. It should be entered into with abandon or not at all.* 
*- Harriet Van Horne* 

In this example we are exploring one of the most popular freely available food recipes api i.e The Meal DB API To start with, we will be searching recipes with keyword and display the result in card […]

The post [Exploring The Meal DB API](https://nikhilsawantse.com/exploring-the-meal-db-api/) appeared first on [Nikhil Sawant](https://nikhilsawantse.com).
Password generation in PowerShell Core (6+)
Tags: security, dotnet, powershell, password
Published: 2020-12-29 14:15:29

In PowerShell (as in Windows PowerShell), the commonly referenced way to generate a user password is to call the `Membership.GeneratePassword` method from the System.Web assembly.

```PowerShell
Add-Type -AssemblyName System.Web
# Generate random password
[System.Web.Security.Membership]::GeneratePassword(8,2)
```

This is all well and good but `System.Web` is not part of .NET Core that Powershell Core (6+) depends on.

Fret not. 

While there is no built-in password generation method out of the box, it doesn't take much to write our own.

The key to generating a strong random password is to use a [cryptographic random number generator](https://en.wikipedia.org/wiki/Cryptographically_secure_pseudorandom_number_generator).

> Don't roll your own crypto

Meet [Get-Random](https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/join-string?view=powershell-7.1).

In the absence of `-SetSeed` parameter, `Get-Random` takes its seed from the cryptographic [RandomNumberGenerator](https://docs.microsoft.com/en-us/dotnet/api/system.security.cryptography.randomnumbergenerator?view=net-5.0), which makes it suitable for our scenario.

Let’s generate a password that meets the following requirements, to satisfy common password restrictions:
- At least 12 characters long
- Requires 3 out of 4 of the following:
    - Lowercase characters.
    - Uppercase characters.
    - Numbers (0-9).
    - Symbols (`!@#$%^&*`).


```PowerShell
$symbols = '!@#$%^&*'.ToCharArray()
$characterList = 'a'..'z' + 'A'..'Z' + '0'..'9' + $symbols

function GeneratePassword {
    param(
        [ValidateRange(12, 256)]
        [int] 
        $length = 14
    )
    
    do {
        $password = -join (0..$length | % { $characterList | Get-Random })
        [int]$hasLowerChar = $password -cmatch '[a-z]'
        [int]$hasUpperChar = $password -cmatch '[A-Z]'
        [int]$hasDigit = $password -match '[0-9]'
        [int]$hasSymbol = $password.IndexOfAny($symbols) -ne -1

    }
    until (($hasLowerChar + $hasUpperChar + $hasDigit + $hasSymbol) -ge 3)
    
    $password | ConvertTo-SecureString -AsPlainText
}
```

The logic is to randomly select characters from the allowed list 
for a given length, and to keep trying until the password meets the restrictions.

If this script is too slow for your needs,[here is a slightly altered faster version](https://gist.github.com/onlyann/00d9bb09d4b1338ffc88a213509a6caf) (~0.4ms instead of 10ms on a Mac Book Pro 2015).
React and components, axios
Tags: react, javascript, style, help
Published: 2020-12-29 14:13:05

With react, and a reusable, or reactive component..... is there a default Axios layout? That you just add the desired code you want? Or is it suppose to be different? 

I have a snippet for a component, useComponent type of setup, but.... is a basic template ideal? Or should it be different?
🛡FIDO Security Key Support Comes To Auth0
Tags: security, fido, auth0
Published: 2020-12-29 14:06:50

🗣 Announcing Beta support for **WebAuthn** with FIDO Security Keys for Multi-Factor Authentication in Auth0.
[Read more](https://auth0.com/blog/fido-security-key-support-comes-to-auth0/?utm_source=content_synd&utm_medium=sc&utm_campaign=auth0_fido)
asdf - Manage multiple runtime versions
Tags: tutorial, productivity, linux
Published: 2020-12-29 14:01:17

Tool called **asdf** is a simple CLI tool for managing multiple runtime or tool versions. You can switch them whenever is needed or assign different versions for different folders or projects.

> 🇨🇿 V češtině si lze článek přečíst na [kutac.cz](https://www.kutac.cz/pocitace-a-internety/asdf-rozsiritelny-spravce-multi-verzi-runtime)

---

There are package managers like **apt**, **snap**, **DNF**, and many more, based on the distribution. However, those managers very often replace the old package version with a new one. And very often automatically.

How asdf can help is visible in the picture below. When I switched to a different folder, the `node` command runs a different version of NodeJS.

![Preview of asdf with global and local versions](https://dev-to-uploads.s3.amazonaws.com/i/sqm1m63ygs1t71takjq8.png)

# Installation and updates directly from git

Even asdf can be very handy and useful, it is very easy to install. The whole process consists of 3 steps and is well described in [asdf-vm.com](https://asdf-vm.com/#/core-manage-asdf?id=asdf). It is enough to have installed `curl` and `git` and asdf can be installed just by `git clone` and integrating into the Shell. The update is done simply by `asdf update` and uninstalling by removing asdf directory.

> asdf is supported with `Bash`, `Fish`, and `ZSH`.

# All is about plugins

The pure installation of asdf cannot do much. And because of that, there are **plugins**. Every plugin is specialized for 1 runtime or tool. There are plugins for NodeJS, Ruby, Elixir, PHP, Python. But also C#, .NET Core, Java. And tools like 1Password, GCloud, or SQLite. There are **more than 250 plugins** already.

## Step By Step - NodeJS with asdf

When asdf is installed and integrated into the Shell, it is possible to run some asdf command described below.

```bash
# Prints current versions of runtimes/tools for current directory
# But now prints: Oohes nooes ~! No plugins installed 
asdf current 
# Lets install NodeJS plugin
asdf plugin-add nodejs
# Now current produce different output
# nodejs   ______   No version set. Run "asdf <global|shell|local> nodejs <version>"
asdf current
```

Now it is possible to install a concrete version of NodeJS. However, plugins can have some prerequisites as well. Check Readme of [NodeJS plugin to asdf](https://github.com/asdf-vm/asdf-nodejs#install) and add PGP keys. Now we are ready to continue.

```bash
# List all available versions for NodeJS
asdf list all nodejs
# Install selected version of NodeJS
asdf install nodejs 15.5.0
# Activate same version globally 
asdf global nodejs 15.5.0
```

It is possible to repeat the last 3 steps again and again with a different version. And instead of `asdf global` we can use `asdf local` to activate a specific version only for the current directory. It will also create `.tool-versions`, which can be shared via git and all co-workers will use the same versions always.
Sports Whiteboard App
Tags: showdev, javascript
Published: 2020-12-29 13:59:00

When coaching, it’s always helpful to visually explain to players what’s expected. Using a whiteboard, you can illustrate set plays, formations, drills, etc. However, whiteboards are usually big, take up space in your bag, cost money, and you can never seem to find the pen! Since a mobile phone is something you probably have with you all the time nowadays, why not use it as your whiteboard!

We developed a Sports Whiteboard web application using [p5](https://p5js.org/). The entire screen is a canvas allowing you to drag and drop objects and draw lines to illustrate anything you’d like!

## Links

* [Demo](https://nightwolf.dev/demos/sports-whiteboard/)
* [GitHub Repo](https://github.com/nightwolfdev/sports-whiteboard)
* [p5.js](https://p5js.org/)

## Features

* Generic board and objects to allow for use by a variety of sports
* Select from 12 different color options when adding objects or drawing
* Add objects easily by clicking/touching wherever you want them
* Adjust object location by dragging
* Draw and erase
* Easily clear the whiteboard and start over
* Works offline

---
**Visit our website at [https://nightwolf.dev](https://nightwolf.dev) and follow us on [Facebook](https://www.facebook.com/NightWolfDevelopment) and [Twitter](https://twitter.com/nightwolfdev)!**