teleren/devto huggingface dataset:
Azure SQL Server Dynamic Data Masking
Tags: azure, azuresqlserver, azuresqldatabase, azuremasking
Published: 2019-10-20 23:56:40

In this [tutorial](https://github.com/patricksameerajayalath/AzureTutorials/blob/master/Azure%20SQL%20Server%20Dynamic%20Data%20Masking.pdf) I’m going to show how to:

•	Setting up Dynamic Data Masking
•	Create different SQL Users to test out Dynamic Data Masking
•	Test Dynamic Data Masking using different logins



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


You can find the PDF version of this tutorial [here](https://github.com/patricksameerajayalath/AzureTutorials/blob/master/Azure%20SQL%20Server%20Dynamic%20Data%20Masking.pdf).

You can find all my Azure/.Net tutorials [here](https://dev.to/patricksameerajayalath) and [here](http://sameerajayalath.blogspot.com/).

Enjoy !!
[ Free ebook ] Learn everything from ES6 to ES2019 and practice with quizzes
Tags: codenewbie, beginners, javascript, tutorial
Published: 2019-10-20 23:37:38

I am the Author of the book "The Complete Guide to Modern JavaScript" which is available to read for free on Github at [this link](https://github.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript).

> The book is currently on live on ProductHunt, if you want to support it with an upvote please go [here](https://www.producthunt.com/posts/complete-guide-to-modern-javascript)

&nbsp;

## Who is this book for ?

Whether you are a complete beginner or you have some knowledge in JavaScript, this book will guide you from the basics of the language to all the new features introduced until 2019. At the end of each chapter test your knowledge with quizzes.

After reading this book, Let Const, generators, promises and async won't be a problem anymore.

If you want to experience something new, this book also includes an introduction to the basics of TypeScript, a must-know for any JavaScript developer in 2019.

&nbsp;

## Free vs Paid Version

The Paid version gives you access to:

- all the core chapters available on Github
- introduction to JavaScript section
- introduction to TypeScript section
- 50+ quizzes
- epub/mobi/pdf version
- paperback version (both color and black and white version available)

&nbsp;

If you want to get the full version of the book, links are provided on Github at [this link](https://github.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/blob/master/README.md#where-to-buy-it)

> The book is currently on live on ProductHunt, if you want to support it with an upvote please go [here](https://www.producthunt.com/posts/complete-guide-to-modern-javascript)

---

Thank you very much for reading. Follow me on [DevTo](https://dev.to/albertomontalesi) or on my blog at [inspiredwebdev](https://inspiredwebdev.com/) for more.

<div class="promotional_banner">
<a href="http://a-fwd.to/5gUojI8" target="_blank">
<img alt="book banner" src="https://raw.githubusercontent.com/AlbertoMontalesi/The-complete-guide-to-modern-JavaScript/master/assets/banner.jpg" />
</a>
<span>Get my ebook on <a href="http://a-fwd.to/5gUojI8" target="_blank">Amazon</a> and <a href="https://leanpub.com/thecompleteguidetomodernjavascript2019" target="_blank">Leanpub</a></span>
</div>
How to implement a working checkbox component in Formik 1.5.8
Tags: formik, react, javascript
Published: 2019-10-20 23:31:59

---
title: How to implement a working checkbox component in Formik 1.5.8
published: true
description: How 
tags: Formik, React, Javascript
---

I was building a form with Formik and I needed a single checkbox to mark a post as "published". In Formik 1.5.8, my values values weren't mapping correctly to checkboxes, so I created a generic Checkbox component to use instead of the Formik Field component.

```js
import { Field } from "formik";

export default function Checkbox({ id, name, className }) {
  return (
    <>
      <Field
        name={name}
        render={({ field, form }) => {
          return (
            <input
              type="checkbox"
              id={id}
              className={className}
              checked={field.value}
              {...field}
            />
          );
        }}
      />
    </>
  );
}
```

I only used for a single true/false value, so your mileage may vary if you're working on something else. 

I extracted the code above from [this CodeSandbox](https://codesandbox.io/s/328038x19q), so please check it out. I think it'll show you how to do a little more than my implementation does. 

It looks like the checkbox issue will be fixed in version 2 of Formik [according to its author Jared Palmer](https://github.com/jaredpalmer/formik/issues/1050#issuecomment-510518029), but this should be a workable solution until then.
Would you buy a design system with React components?
Tags: discuss
Published: 2019-10-20 23:22:26

![Some components currently being designed](https://thepracticaldev.s3.amazonaws.com/i/uh1ezlrva5wcjhfyjwi2.png)

I'm putting together a design system with 100+ (and growing) components in Figma and React. Considering it's well designed and coded, would designers and developers buy it?

If so, what would you need to see to help you make the purchase?

If not, why?

Thank you for your input.
Flip it and Redux it!
Tags: ruby, rails, react, redux
Published: 2019-10-20 23:18:57

<h3><center>Rails + React + Redux - Pt 9</center></h3>
*********************************************************

In the last post I setup the index.js and App.js files for the project. I also created a file structure to work from as the project grows. Here I'll focus on the actions files, with reducers in the next post.

*********************************************************
<h1><center> Let's get started! </center></h1>
*********************************************************

The queen_actions.js file holds fetchQueens and updateQueen. For now, I'm not planning on users being able to add or delete a queen. 

{% gist https://gist.github.com/JaredHarbison/112239199934d1492dd919325707ad87 %}

The trivia_actions.js file is a little more fun. Because trivia (and quotes) must belong to a queen, they add a thin layer of complexity to the interaction with the Rails API. I'm adding the gist for the trivia actions file, but not the quotes file as it is nearly exactly the same. 

{% gist https://gist.github.com/JaredHarbison/da460581a4b1ddebb4a716ec153f0b8c %}

The season_actions.js file is, for now, only the fetch call. I will eventually need to update this so users can update appearance attributes. 

{% gist https://gist.github.com/JaredHarbison/14c45c6f7ba8d6b897e2fe5210c2e4e1 %}

I imagined I'll need a common_actions.js file as the project grows to avoid creating the same function in multiple files. 

{% gist https://gist.github.com/JaredHarbison/3114263891a727db90894e90a46cf348 %}

I created a types.js file to define and export the action constants. 

{% gist https://gist.github.com/JaredHarbison/3a3873170212ae40497a45b4c2e58f95 %}

Even at the beginning stages of this project, indexing the actions files was an obvious necessity to avoid massive files. 

{% gist https://gist.github.com/JaredHarbison/304e482779585e2d2a0a908f9d8c4194 %}

When I started thinking of actions in a similar way to how I think of controllers in a full-on Rails application, they started to make a little more sense to me. Reducers is where I was really thrown, which I can't wait to get back into next week!

*********************************************************
<h1><center> That's all folks! </center></h1>
Using Yarn Global Packages with asdf
Tags: asdf, yarn
Published: 2019-10-20 22:43:48

Anytime I install a global package using [yarn](https://yarnpkg.com/lang/en/), I have issues with being able to find the command at the command line. 

When I run this command:

`yarn global add <some-package>`

And then try to find it at the command line:

`which <some-package-command>`

I get:

`<some-package-command> not found`

I know that yarn adds `some-package` to the global yarn package path. But where is that? And why aren't commands installed this way found on the command line?

Assuming that whatever path they are installed to is probably not on my $PATH, I run:

`yarn global bin`

to find where they are being installed. In my specific case, here:

 `/Users/jennapederson/.asdf/installs/nodejs/8.16.0/.npm/bin`.

Whoops! That's an [asdf](https://asdf-vm.com/#/) path! This particular project is using node and I've recently introduced `asdf` into my workflow to manage node (and ruby) versions.

When I look at my `.bash_profile` or `.zshrc` file (whichever you're using), I found these:

`. /usr/local/opt/asdf/asdf.sh`

`. /usr/local/opt/asdf/etc/bash_completion.d/asdf.bash`

But nothing about putting `asdf` package bins on my $PATH.

I can (temporarily) add the following line and re-source:

`export PATH="$(yarn global bin):$PATH"`

But that's only going to add the yarn global bin directory that's in use when it's sourced, which won't always be the one I want to use.

I originally installed `yarn` via Homebrew, which is the `yarn` recommended way, rather than via `npm` (as some others recommend as a way to solve this problem).

So instead we'll update the yarn global path to be outside of `asdf` and add that to our path.

`yarn config set prefix ~/.yarn`

This adds a setting to our `~/.yarnrc` file (don't edit this file manually):

`prefix "/Users/jennapederson/.yarn"`

Then when we do:

`yarn global add <some-package>`

And try to find it at the command line:

`which <some-package-command>`

It's there! And more importantly, it's not tied directly to the specific node version that `asdf` is using.
I made DEV.to widget for websites/blogs
Tags: showdev, javascript, webdev
Published: 2019-10-20 22:07:10

Hey Everyone! So I made an (Unofficial) DEV.to widget / profile-card which you can use in your websites and blogs (You just have to copy-paste 2 lines of code :D).

# Here's how it looks like
{% codepen https://codepen.io/saurabhdaware/pen/NWWbOvv %}

# Usage ( JUST 2 LINES OF CODE :D )
```html
    <dev-widget data-username="saurabhdaware"></dev-widget>

    <!-- Place script tag before the end of the body tag -->
    <script src="https://unpkg.com/dev-widget@^1/dist/card.component.min.mjs" type="module"></script>

```

And **BOOM** that's it! Just put your dev.to username in data-username attribute and you will get your profile card :D

---

If you want to install it as ES6 module (Mostly used in frameworks)
```sh
npm install --save dev-widget
```

and import at the top of your file
```js
import 'dev-widget'
```

Then you can use
```html
<dev-widget data-username="saurabhdaware"></dev-widget>
```

There are some other attributes like `data-width`, `data-limit` You can checkout full documentation on my GitHub:
{% github https://github.com/saurabhdaware/DEV-widget %}

Do ⭐ the repository 🦄

Also, for the hacktoberfest, if anyone wants to contribute to this project, I would love to help. You can checkout [CONTRIBUTING.md](https://github.com/saurabhdaware/DEV-widget/blob/master/CONTRIBUTING.md) for contribution guidelines.


GitHub: https://github.com/saurabhdaware/DEV-widget
NPM: https://npmjs.org/package/dev-widget
Codepen: https://codepen.io/saurabhdaware/pen/NWWbOvv
Vue Form Builder
Tags: discuss, vue, forms, server
Published: 2019-10-20 22:04:51

---
title: Vue Form Builder
published: true
description: An idea I have for a server side declared vue form renderer.
tags: #discuss,#vue,#forms,#server
---

So I have been looking around for a good vue form builder and I have never really found one that does what I want it to do. Ultimately as a primarily full stack dev I end up having to make both the server side validation and the client side validation. The majority of the time I use client side validation for simple html5 validity checks. Anything more complex then HTML5 checks belong exclusively on the server side, especially since you will need that logic again anyways. What I want in a vue form builder is essentially is to have vue call a formatted API which then vue uses to create the form. 

With that being said this is what I am thinking of creating: a set of vue components that each handle rendering a piece of the form, vuex to store the form state in the form of a module, and some helpers to make it easier to work with.

Here is a stubbed outline, excuse the naming and such as this is in pre-prototype phase.

```typescript

import Vue from 'vue';
import Vuex from 'vuex';
import VueFormBuilderModule from 'vue-builder/Module'; //whatever this is named
import FormBuilder from 'vue-builder/FormBuilder';

Vue.use(vuex);

const store = new Vuex.Store({
  modules: {
    VueFormBuilderModule
  }
});

new Vue({
  store,
  el: "#app",
  async created() {
    try {
      let formData = await fetch("http://apiwebsite/form");
      this.$store.commit("addForm", {
        metadata: formData,
        formName: "myform"
      });
    } catch(e) {
      //catch errors, you know what to do ;)
    }
  }
});
```

Then in our template:

```vue
  <div id="app">
    <form-builder form-name="myform"></form-builder>
  </div>
```

Form builder then takes the the following example API response:

```json
{
  "first_name": {
    "field_type": "input",
    "data": "John"
    "attributes": {
      "type": "text",
      "maxlength": 50
    }
  }
}
```

And turns into rendered HTML:

```html
  <form name="myform">
   <input name="first_name" type="text" maxlength="50" value="John" />
  </form>
```

Of course the input being bound 2 ways with the vuex data. You need more fields then the api would just contain more. If you need to customize rendering then you would use the provided slots. 

This way you can keep all the logic of building and validating your forms in one spot. 

Let me know what you all think of this idea! Would it be something you would use presuming it was flexible enough? Of course this is intended to be a public repo and FOSS.
Parsing a String in D
Tags: dlang, tutorial, string
Published: 2019-10-20 21:50:42



# Parsing a String

First thing is first we want to read in a file. I won't be writing full compiling examples as I'm usually doing this on my phone. However, in general any examples can be pasted directly into a main function because D has nested everything. 

```dlang 
void main() {
   import std.file;
   auto data = readText("filename.ext");
}
```
[`readText`](https://dlang.org/phobos/std_file.html#readText) reads the entire file into memory. Usually not a bad start but could be a problem with very large files. D also utilizes immutable strings, so techniques I'm showing generally do not use additional memory.

## Matching Beginning or End 

[`startsWith`](https://dlang.org/phobos/std_algorithm_searching.html#.startsWith)

Sometimes all that is needed is a check if the beginning or end matches a value. 

```dlang 
import std.algorithm;
auto data = "word word"
assert(data.startsWith("word"));
assert(data.endsWith("word"));
assert(data.skipOver("word"));
assert(data == " word");
```

[`skipOver`](https://dlang.org/phobos/std_algorithm_searching.html#.skipOver) will not only identify if the string is found at the beginning, but also move data past the string. 

## Removing Whitespace

[`strip`] (https://dlang.org/phobos/std_string.html#.strip)

```dlang 
import std.string;
auto data = " str ";
assert(data.strip == "str");
assert(data.stripLeft == " str");
assert(data.stripRight == "str ");
```

Along with whitespace an argument can be past in to specify a specific string to strip off. 

## Find a String

[`find`](https://dlang.org/phobos/std_algorithm_searching.html#.find) 

Rather than reiterate here, see my previous post. I also am preparing the next post which dives into more of the variations. 

{% link https://dev.to/jessekphillips/string-contained-in-a-string-in-d-4po8 %} 

## Regular Expressions 

The standard regex library is very nice. I won't be going over examples because regular expressions themselves are a more advanced topic. 

https://dlang.org/phobos/std_regex.html
How to backup/sync all of your dotfiles​ with Github
Tags: vscode, github, bash, linux
Published: 2019-10-20 21:39:04

As a developer, one of the challenges that we are facing every day is to backup or sync up all of our `dot(.)` files with a new or another environment. There are many dotfiles in my machine such as `.alias`, `.vimrc`, `.zshrc`, `.gitconfig` etc...


I'm not going to explain how to get a back up of all your files because each one of us has a different environment, so I'll explain how to backup your VS-Code setting. I know there is a VS-Code extension that syncs up your setting with Github. Our goal is to understand how to back up #vscode settings, snippets, extensions, and sync it with Github manually.


### Create a Script

- Create a new Github repository in your Github.com
- In your local machine go to the desktop and open an empty folder in your terminal
- Initiate an empty Git repository with `$ git init` and connect the local repo to newly created repo with `$ git remote add git@github.com:yourusername/yourrepo.git`

- Create a shell script and name it whatever you want, like `backup.sh` and past the following code on that file.


```bash
#!/bin/bash


# check to see is git command line installed in this machine
IS_GIT_AVAILABLE="$(git --version)"
if [[ $IS_GIT_AVAILABLE == *"version"* ]]; then
  echo "Git is Available"
else
  echo "Git is not installed"
  exit 1
fi


# copy Vs-Code files
cp  $HOME/Library/Application\ 
Support/Code/User/{keybindings.json,settings.json,spellright.dict} .

# copy snippets folder
cp -r $HOME/Library/Application\ Support/Code/User/snippets .

# copy list of extensions that currently installed
code --list-extensions --show-versions >> ../../vscode/extensions.txt

# copy other dot files 
cp  $HOME/{.zshrc,.vimrc} .



# Check git status
gs="$(git status | grep -i "modified")"
# echo "${gs}"

# If there is a new change
if [[ $gs == *"modified"* ]]; then
  echo "push"
fi


# push to Github
git add -u;
git commit -m "New backup `date +'%Y-%m-%d %H:%M:%S'`";
git push origin master
```

- Change the script permission with `$ chmod +x backup.sh`.
- Run the script with `$ ./backup.sh`

If you want to run in background services:
- `crontab -e` and add your script path and time you want to run the script for example
```bash
$ crontab -e  # this is open the cronjobs table in vim mode use i for insert mode

# this is run the script every minutes
$ 1 * * * * cd /Users/macp15/Projects/dotfiles/scripts/backup && ./backup.sh

# display list of cron jobs
$ crontab -l
```


Done (Khalas).
Terraformize — Apply\Destory Terraform Modules via a Simple REST API Endpoint
Tags: devops, terraform
Published: 2019-10-20 21:22:24

Terraform is a great tool for infrastructure as code & one of my personal favorites, but unfortunately while being very easy to create terraform apply\destroy runs via a CLI & having plenty of tools to ensure terraform runs via git push\pull requests\etc applying terraform runs via an API command is a lot trickier.

Which is why I created Terraformize to fill in that gap, the basic idea being that having the ability to create terraform runs via a simple REST API a developer can integrate terraform environment creation into it’s product code flow in a easy way.


You can read more about it at the project repo at https://github.com/naorlivne/terraformize
Stream 10/20/2019 - POC || GTFO
Tags: devjournal, blog
Published: 2019-10-20 20:53:07

### Check Out the Stream @ [https://twitch.tv/talk2megooseman](https://twitch.tv/talk2megooseman)

Casual shorter stream today. Has a chance to show off some of the new scenes graphics and new gotta started on integrating new Comfy.js feature for a cool down timer on !tts commands. Along with way, I did some refactoring and other minor things. I just hit a snag at the end of the stream with Github Actions needing `git` so that it can `yarn install` Github dependencies.

## Standup Time

- On Friday had very first stream for CodingZeal channel. Looking to do a lot more!
- Just had a great week

# Today Objective

- [x]  What to call today's log
- [x]  Review last streams TODOs
- [x]  Going to tackle Twitch Interactive Overlay todos [https://github.com/talk2MeGooseman/twitch-interactive-overlay/projects/1](https://github.com/talk2MeGooseman/twitch-interactive-overlay/projects/1)
    - [x]  Also handle any random requests

# Notes

- Worked on adding cool down to overlay for !tts command as prototype
    - [https://github.com/talk2MeGooseman/twitch-interactive-overlay/issues/81](https://github.com/talk2MeGooseman/twitch-interactive-overlay/issues/81)
    - Set it as a 30 sec cool down the excludes "premium" users
    - Had an issue with Github Actions no liking installing npm packages that point directly to a repo
    - Will need to deploy overlay later
- Just had a good time

# Shoutouts and Thanks

- indifferentghost
    - Gifting 500 bits + 50 bonus bits because of the promo
- RazdomBukkit
    - Thanks for $5 tip and song request!
- MajorThorn
    - Gifting 200 bits + 20 bonus bits cause promo
    - For good idea for doing premium user chat for subs/vip/mods
    - For the title: [https://books.google.com/books?id=ieejswEACAAJ&source=gbs_book_other_versions](https://books.google.com/books?id=ieejswEACAAJ&source=gbs_book_other_versions)
- Seekaplayer
    - For the RAID!!!!

# Future action items

- [x]  Either fix Github actions `git` dependency or ask Instafluff to release new version of comfy
    - [ ]  Asked for new release in following comment [https://github.com/instafluff/ComfyJS/issues/5#issuecomment-544290813](https://github.com/instafluff/ComfyJS/issues/5#issuecomment-544290813)