teleren/devto huggingface dataset:
Simple Differential Privacy
Tags: differentialprivacy, python
Published: 2020-11-25 01:40:36

_Cover Photo by Franki Chamaki on Unsplash_
## Sorry, what are we coding again?
Differential privacy is really simple. Let’s say, I have a data set of info about people that I want to publish but still keep their data private. That’s where differential privacy comes in. It takes your data and alters it in a way that will keep overall facts about your data in the same area (with more complex algorithms you can alter how close you want it to be) while keeping individuals' data private.
## The Random Response Mechanism
Okay, let’s get to the details of how we are going to alter this data. We want to start simple, so we’ll code the Random Response mechanism. This is the most simple mechanism for differential privacy. It flips a coin, if it is heads, then it keeps the same value. If it is tails, it flips it again, and if it is heads, it returns true, and if tails, then it returns false. Now, again, as I said before, this is a very simple algorithm so it only works with zeros and ones or true and false.
## Coding The Random Response Mechanism
Our first step is to get a data set for our algorithm to run on. If you are going to use real data, you’ll need to convert it to an array. You can also use this sample data to test if your algorithm is working:

{% gist https://gist.github.com/Quantalabs/c8feea0ae18c2ace0e1dacb7d41efb2e %}

You could also run a for loop which generates random values and pushes them to an array.

Now that we have our data, let's start by creating a function called rand_response and use it as what we call to privatize our data. We create it with one parameter, `data`, for the data we created earlier.

Now, we call a for loop to go through the array:
```python
for a in data:
```
Then we set a variable, b, as a random number and use if statements to tell if it is a 0 or 1. We’ll need NumPy for this so install it via pip if you haven’t already:
```console
pip install numpy
```
and now import it into our code:
```python
from numpy import random
```
We imported a specific file called random for the random number generation.

Now let’s generate the number:
```python
b = random.randint(2);
```
This generates a random integer, either 0 or 1.

Next, we put the if statements to find the number and change the value accordingly:
```python
if b == 0:        
   a[i] = 0
if b == 1:        
   b1 = random.randint(2)    
        
   if b1 == 0:            
      a[i] = 0  
        
   if b1 == 1:            
      a[i] = 1
```
And now we’ve finished! You should have something like this:
{% gist https://gist.github.com/Quantalabs/0dce130aeadcaa6547b8c52f2dc204e5 %}
When you run rand_response(data) and then print data, you should see the data changed a little bit. Now, this isn’t very private, but it is the first step. Now that you know how differential privacy, try other mechanisms like the Exponential Mechanism and Laplace Mechanism. If you want to use these algorithms, you can use my python package DiffPriv.
{% github quantalabs/diffpriv no-readme %}
Every developer should write. Here's how to get started
Tags: beginners, career, writing
Published: 2020-11-25 01:34:00

Writing is one of the most impactful, high-leverage things I have ever done for my career.

Writing has three main benefits that have made a big difference in my life and career:

## It helps me solidify and ensures I understand my ideas and processes

There is something about writing that forces you to really process and articulate abstract ideas you may have floating around in your head.

When you go through the process of writing about something, you really have to think through what you are actually trying to say to make sure the reader can understand it.

This process leads to increased clarity for yourself along with the reader.

## Demonstrates your skillset and problem-solving process

Portfolios are great, but they can sometimes suffer because they are static ways of demonstrating your work.

When you write alongside building things, it gives people a glimpse into your thought and problem-solving process, which can make your portfolio projects much more dynamic, engaging, and goes a long way towards communicating your value.

## Communicates your values and cultural fit to potential employers

Finally, possibly my favorite benefit and often the most overlooked.

Writing can communicate your values to employers which can help them in determining whether or not you would be a good fit culturally within their company.

Though not talked bout as often, this component of career growth is often as important as technical skills.

By communicating your personality and values in your writing, you give people a look at who you are, what makes you tick, and what is important to you.

It allows people you have never met to get to know a little more, which can be extremely helpful when job hunting.

## How to get started writing
Okay great, writing can help your career, but getting started can seem like a big hurdle.

Here's an easy way you can get started in the next 30 minutes with your first post.

First, create an account and fill out all the information here on Dev. This is an awesome place to start writing with a low barrier to actually getting started.

Next, start a new post and write about your story up until now and where you want to go as a developer.

Talk about where you came from, what other jobs you've had, why you want to be a developer, and what you've done so far to make that happen.

Then post it.

This is not meant to be read by thousands of people, it's not meant to be the best piece of writing you'll ever do.

It's meant to be the first piece of writing. The initial hurdle to jump.

Posting publicly is very important. 

Put yourself out there. It's a fantastic way to grow.

After you write that post, comment here with a link to it so I can check it out!

Looking to land your first job as a developer? You may like my course and mentoring group, [Launch Your Dev Career](https://gum.co/launchyourdevcareer).

You can also [follow me on Twitter](https://twitter.com/KenTheRogers) for more tips on launching and building a successful, fulfilling career as a developer.
Blueprint UI Intro
Tags: react, blueprintui
Published: 2020-11-25 01:28:46

Blueprint is another React UI toolkit that is optimized for building complex, data-dense web interfaces for desktop applications. Part of its aim is to keep things flexible by being reusable and focuses on composition, allowing Blueprint components to be composed to create higher-level structures. It also has a distinguishable content and color perception, allowing contrast and colors, including those that are accessible to colorblind users.

**Installation**

Run in your react app:

`npm install @blueprintjs/core`

Blueprint must be installed with react and react-dom since its additional packages have peer dependencies to these packages.

**Usage**

To import React components in your app:

```
import { Button, Intent, Spinner } from "@blueprintjs/core";
 
// using JSX:
const mySpinner = <Spinner intent={Intent.PRIMARY} />;
 
// use React.createElement if you're not using JSX.
const myButton = React.createElement(Button, { intent: Intent.SUCCESS }, "button content");
```

You need to also include the main CSS file from each Blueprint package. Additionally, the resources/ directory contains supporting media such as fonts and images.

Example using node packaging in CSS file:
```
@import "~normalize.css";
@import "~@blueprintjs/core/lib/css/blueprint.css";
@import "~@blueprintjs/icons/lib/css/blueprint-icons.css";
```

Example of a card component:

```
import React from 'react';
import "@blueprintjs/core/lib/css/blueprint.css"
import { Button, Card, Classes } from "@blueprintjs/core";


const Blueprint = () => (
<Card style={{width: 300}} className={Classes.CARD}>
    <h3>Blueprint card</h3>
    <p>Text</p>
    <Button intent="primary" text="Read more" className={Classes.BUTTON} />
</Card>
  );

export default Blueprint;
```

This is just a glimpse of the Blueprint UI and what you can do with it. It is optimized for data-dense interfaces and while you cannot use its full potential for web apps, it is still a good component library for React apps overall.

**References**

- https://blueprintjs.com/docs/#blueprint/getting-started
- https://medium.com/palantir/scaling-product-design-with-blueprint-25492827bb4a
- https://github.com/palantir/blueprint
Update To Laravel Breeze v0.1.0
Tags: laravel, tailwindcss, breeze
Published: 2020-11-25 01:24:36

Today Laravel Breeze version 0.1.0 was released which includes support for version 2 of Tailwindcss, likewise this release includes a link so that those who have registered can log in directly, as well as Laravel Jetstream.

See https://github.com/laravel/breeze.

Previously, I had created a project with Laravel Breeze version 0.0.4 and was waiting for this release to proceed with the update.

### **Warning** I recommend creating a new branch to do this update

To update our application from Laravel Breeze 0.0.4 to 0.1.0, just change the version of the package in the composer.json file.

![update version](https://dev-to-uploads.s3.amazonaws.com/i/v6cccg75i8cabayv57v8.png)
 
Now we need run the command `composer update`

After composer finishes updating the dependencies it's time to run the command

`php artisan breeze:install`

This automatically updates the new changes coming in the Laravel Breeze 0.1.0 release

Finally we must execute the npm commands

`npm install && npm run dev`

Nice that's all we have to do.

Now if we go to the login page of our project we will see that the UX looks different.

![login pages](https://dev-to-uploads.s3.amazonaws.com/i/8k2zzw91568y1nwrzoh5.png)

This looks nice ... but all of our changes that we made (in my case) to the project before this launch will be overwritten. That is why it is important to do this in a totally new branch.

I hope this helps you :rocket:
Index Signatures in Typescript
Tags: typescript
Published: 2020-11-25 01:21:24

This is a pattern I've found incredibly helpful of late. Let's say you have a collection of fruit in a basket. You may make a type for all the possible fruits. 🍐🍍🍈🥭🍒🥝🍇

```tsx
type Fruit = 'pomegranate' | 'pear' | 'persimmon' | 'guava' | 'jackfruit'
```

Let's say the basket is represented by an object literal, consisting of key-value pairs, the key being the fruit id.

```tsx
const fruitBasket = {
    1: 'jackfruit',
    2: 'guava',
    3: 'pomegranate',
    4: 'pear',
    5: 'guava'
}
```

Every fruit basket will be different, and random to a degree. They will all contain different amounts of fruit, although we expect the baskets to contain only the fruits outlined in the `Fruit` type. To create an interface for the fruit basket, we need to use an index signature in the interface. 

```tsx
type Fruit = 'pomegranate' | 'pear' | 'persimmon' | 'guava' | 'jackfruit'

interface FruitBasket {
    [key: number]: Fruit
}

const fruitBasket: FruitBasket = {
    //...
}
```

This way, the fruit basket can have an innumerable amount of fruit items, the keys can all be unique numbers or ids and the fruit will be safely typed. 

---

> I find this pattern helpful when needing to type objects or  components where they may have a prop or key-value pair  where I don't know the key ahead of time. 

You could take this a step further, say I don't know exactly what kind of fruit is acceptable, or perhaps there are different iterations of fruit baskets, one for fall, spring, and winter fruits. We can adjust the fruit basket interface to accept a parameter.

```tsx
type ClassicFruit = 'apple' | 'banana' | 'orange' | 'strawberry'
type TropicalFruit = 'pineapple' | 'mango' | 'papaya' | 'lychee' 

interface FruitBasket<T> {
    [key: number]: <T>
}

const classicBasket: FruitBasket<ClassicFruit> = {
    //...
}

const tropicalBasket: FruitBasket<TropicalFruit> = {
   //...
}
```

This way, we could swap out the specifics of the fruit, depending on the type of basket.

Dive deeper into this in the [TS documentation](https://www.typescriptlang.org/docs/handbook/advanced-types.html#index-types-and-index-signatures)! Happy coding 🤖
Next.js commerce app, one-click deploy to Netlify
Tags: javascript
Published: 2020-11-25 01:13:13

We launched this Next.js demo and resource back in [July](https://www.netlify.com/blog/2020/07/09/create-a-fully-fledged-jamstack-commerce-store-with-commerce.js-and-netlify/) but have since added more functionality to it so thought I'd share again here for the dev community.

Check out the repo here https://github.com/chec/commercejs-nextjs-demo-store

## What's in the demo

### Products
Using our products API, lists product images, descriptions, and prices in the app. Our products API now automatically detects image height and width.

### Carts
The shopping cart uses the Commerce.js cart API. Carts are persisted for up to 30 days, and Commerce.js automatically remembers carts for visitors.

### The checkout
Commerce.js provides many tools to streamline checkout implementations. The checkout in this demo store makes use of:

Commerce.js's country and region APIs,
the shipping methods API, and
the discounts API (for validating and applying discounts at the checkout).

###Customers
Commerce.js provides inbuilt functionality for supporting customer logins without any server-side code. This demo store features an existing customer login page, and provides detail about previous orders. The customer information is also used to pre-populate the checkout with known customer details.

### Payment gateways
This demo store is configured with the Chec "test gateway" out of the box, which provides a handy payment option while testing your storefront. Additionally, support for Stripe Elements is included if Stripe is configured on the Chec Dashboard.

### Enabling Stripe
You must enable Stripe in the Chec Dashboard by following the instructions provided. You may add your sandbox keys for Stripe, and use a sandbox Chec public API key to test with Stripe. Both the Chec public API key, and the Stripe "publishable" key are configured in the .env file. See step two of "Manual setup and Netlify deployment"

## Motivation

We built this resource to show developers how they can build 100% custom eCommerce experiences from storefront to receipt with [Commerce.js](https://commercejs.com/). 

Due to the complexity of commerce and the proliferation of hosted checkout forms, too many eCom experiences look the same. We want developers (of all levels) to have better tools to create better experiences. Resources like these provide a building block so devs can build eCom projects that don't look and act like every other Shopify store out there.

Please [checkout the repo](https://github.com/chec/commercejs-nextjs-demo-store), fork it, build on top of it, and let us know your thoughts!
COVID-19 Tarcker
Tags: mongodb, express, react, node
Published: 2020-11-25 00:14:33

This is COVID-19 tarcker. you can watch latest COVID-19 news and others 
https://covid19tracker-seven.vercel.app/
<br/>
<a href="">Avishka Dev</a> | <a href="https://avishkadev.vercel.app/about">About Me</a> | <a href="https://avishkadev.vercel.app/contact">Contact Me</a> | <a href="https://avishkadev.vercel.app/project">My Project</a> | <a href="https://www.facebook.com/avishka.devinda.5">Facebook</a> | <a href="https://lk.linkedin.com/in/avishka-devinda-0799971b4">Linkedin</a> | <a href="https://github.com/avishkadev">GitHub</a> | <a href="https://twitter.com/avishkadev">Twitter</a>
Reader Question: How long did it take to migrate from WordPress to Gatsby?
Tags: gatsby
Published: 2020-12-06 04:35:03

---
title: Reader Question: How long did it take to migrate from WordPress to Gatsby?
published: true
date: 2020-11-25 00:00:00 UTC
tags: gatsby
canonical_url: https://www.ankursheel.com/blog/reader-question-how-long-migrate-wordpress-gatsby
---

## Reader Question

> I was reading your blog post about migrating from WordPress to Gatsby and had a question about the necessary timeline we should expect. How long did it take you to make your full migration?

_If you are wondering what post is being referred to its [Why and How I migrated my website from WordPress to Gatsby?](https://www.ankursheel.com/blog/migrating-from-wordpress-to-gatsby)_

## My Answer

The timeline for the migration depends on the contents of your site.

I started the move away from WordPress to Gatsby in August 2019 and switched over in November 2019. You might think that 3 months is a long time for migrating posts and you would be correct. But, it’s important to note that I was spending just a few hours a week on this. It would have probably just taken me a few hours/days to make the switch if I was working on it fulltime.

I used a starter so I had a base to but there were a few things I had to modify(which is why it took time) before I was ready to make the switch.

- getting it to play nicely with Typescript.
- making sure all the internal links work.
- building an image gallery component for the image-heavy posts.
- hunting for the plugins not included in the starter and configuring them

If you are thinking of migrating your site, I would suggest doing what I did.

- Start with a gatsby starter/theme as your base.
- If the theme that you have chosen doesnt have all the plugins just add those plugins in.
- Get an initial version of your site up and running using Netlify.

Update the styling, components, plugin configurations, add automated scripts etc as you see fit. This will probably be a continuous thing.
How to check if a variable is an Array in JavaScript?
Tags: javascript
Published: 2020-11-25 00:00:00

---
  title: How to check if a variable is an Array in JavaScript?
  published: true
  tags: JavaScript
  date: Wed Nov 25 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-if-variable-is-an-array-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-52cd2b613eae27c775e1e074563ae639.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-if-variable-is-an-array-javascript)
  
To check if a variable is an array, there is more than one way to do it in JavaScript.

We can use:

- [The `Array.isArray()` method (Fastest 🚀)](#array-isarray).
- [The `constructor` property in the variable itself](#constructor).
- [The `instanceof` operator in JavaScript](#instanceof).

<a name="array-isarray"></a>

## `Array.isArray()` method

Consider this variable which is an array,

```js
// variable which is an array
const nums = [2, 3, 4, 5];
```

Now let's check if the `nums` variable is an array by passing the variable as an argument to the `Array.isArray()` method like this,

```js
// variable which is an array
const nums = [2, 3, 4, 5];

// check if nums variable is an array
// using the Array.isArray() method
const isIt = Array.isArray(nums);

console.log(isIt); // true ✅
```

See this example live in [JSBin](https://jsbin.com/ganopaleqi/2/edit?js,console).

<a name="constructor"></a>

## `constructor` property in the variable

Consider this variable,

```js
// array of strings
const strArr = ["John", "Roy", "Lily"];
```

Now let's check if the `strArr` variable is an array using the `constructor` property in the variable like this,

```js
// array of strings
const strArr = ["John", "Roy", "Lily"];

// check if strArr variable is an array
// using the constructor proerty in the variable
console.log(strArr.constructor === Array); // true ✅
```

See this example live in [JSBin](https://jsbin.com/yilafiguzi/2/edit?js,console).

<a name="instanceof"></a>

## `instanceof` operator

Consider this variable,

```js
// array of strings
const strArr = ["John", "Roy", "Lily"];
```

Let's check if the `strArr` variable is an array using the `instanceof` operator like this,

```js
// array of strings
const strArr = ["John", "Roy", "Lily"];

// check if strArr variable is an array
// using the instanceof operator in JavaScript
console.log(strArr instanceof Array); // true ✅
```

See this example live in [JSBin](https://jsbin.com/giyonogeri/2/edit?js,console).

### Feel free to share if you found this useful 😃.

---
Targeted Interview Prep
Tags: interview, webdev, jobs
Published: 2020-11-24 23:58:06

Targeted interview prep...what does that mean? I'm sure there is a lot of prep you are doing that applies to a bunch of different jobs. Grinding out some algorithms(icky but unfortunately necessary), Prepping your behavioral question answers with the STAR method etc etc. You can however do some additional prep specific to each of the companies you are applying for. 

Here are some steps I take when I get invited to start interviewing at a company:

##Look up the company on Glassdoor

This might not always work out with smaller start-ups but a great place to start is Glassdoor. There is an interview section where other candidates share their experience doing interviews with the company. It will give you an insight into their process and sometimes people even drop in the specific questions they got during the interview. I got quite lucky with my job someone mentioned the kind of things they were tasked with doing and I reviewed those before going in and got the job. Glassdoor is an incredible resource and I definitely recommend doing at least a quick check before going into your interview.

##Check out their Open source Projects/API's
Are you interviewing for a company like Twilio that has public APIs? Awesome build something super quick with one of their API's and talk about it at the interview. Does the company have open source projects that they put out? Try using one of them or playing around with one. I was once asked if I had ever used a company's open-source projects during an interview and had to respond in the negative.

##Open up the console
If you're going for a web dev position go to their website and open up the console. I've seen some company's leave some random easter eggs in there and if you can bring that up in a conversation you're showing two things - maybe you like their sense of humor and that you're a curious person who likes exploring code. Conversely, if there is a not so great easter egg in there, another thing I've found, you might know it's not worth moving forward with this company. 

These are some things I like doing to prepare specifically for certain companies I interview with. If you have any other suggestions or anything you like doing drop them suggestions below!

If you're a new dev looking for their first job check out the ebook I am working on:

[Build a Product become a Developer](https://www.buildaproduct.dev)

I'm adding some great methodologies and cool tech you can learn to stand out for your job search. Feel free to follow me on [Twitter](https://twitter.com/rahatcodes) or connect on [LinkedIn](https://www.linkedin.com/in/rahatc/) as well!