teleren/devto huggingface dataset:
General Data Protection Regulation (GDPR)
Published: 2021-01-23 18:59:54

__What exactly is GDPR ?__

It is a regulation passed by the EU government which applies to dealing with the data of all EU citizens, irrespective of where the data is stored or sent to. Even if we pass data from  India to Europe, we have to respect GDPR. They have brought GDPR into effect in order to protect the right of any EU citizen to privacy and security of their personal data. Even if we fully operate EU user data outside EU, we have to follow the legislation.

__So for whom is GDPR applicable ?__

GDPR is applicable to any business located within and outside Europe. It applies to any business which collects data, organise and store them, and perform some operations over this data. Companies have to be responsible and accountable for the user data, this is where GDPR applies.

__How a software should be GDPR compliant__

Following are the principles of GDPR that any company should deal with when they handle EU citizens personal data :

1. Data must be processed by following the laws and also very 
   transparently

2. All data about the user must be correct and it should be up 
   to date. (Accuracy)

3. No unwanted or additional data than for the purpose of it 
   should be collected from the user (Purpose limitation)

4. Collected data needs to be always relevant about what is 
   needed for processing (Data minimisation)

5. Collected data must be processed safely without any 
   security breach. (Data integrity and confidentiality)

6. Data must be maintained in a state that it should be not 
   available when it is no longer needed. (Storage limitation)

__User rights over personal data__

Below mentioned are the rights that the user have over their personal data :

1. Access and update their personal data

2. Request personal data deletion whenever the user needs

3. Be informed about what data the business is collecting

4. Download the personal data in any format like json, xml etc.. whenever the user needs them

5. Restrict processing of data whenever they need.

Please follow the link which contains the checklist for making a SaaS product GDPR compliant - https://www.cloudways.com/blog/saas-gdpr-checklist/
Welcome to Draftbox
Tags: gettingstarted
Published: 2021-02-19 07:25:52

<p>We are excited to have you on-board. To give you a glimpse of what Draftbox is, we have populated it with sample posts.</p><h2>A short story</h2><p>We are building Draftbox on the promise of bringing JAMstack to content creators. We are very bullish on results when content creators can fully utilize JAMstack, and we want to empower them. Draftbox is a <strong>no-code JAMstack</strong> blogging platform that provides performance, user experience, SEO, security, and scalability without breaking a sweat.</p><h2>Under the hood</h2><p>Draftbox sites are created using <a href="https://www.gatsbyjs.com/">Gatsby</a>. Gatsby is a framework for building blazing-fast apps and websites. Gatsby has a flourishing ecosystem, strong community, and is being used by companies like Nike, Tinder, and AirBnB.</p><p>Draftbox sites are deployed to <a href="https://www.netlify.com/">Netlify </a>Edge. Netlify is a market leader in hosting services for static sites. Netlify has been at the forefront of the JAMstack revolution and loved by thousands of developers worldwide.</p><h2>Next up — Draftbox Editor</h2><p>As a content creator, you would be excited to learn what kind of content blocks you can add using <a href="/powerful-editor-built-for-pro-content-creators/">editor</a>.</p><p>BTW, you can delete these sample posts from dashboard.</p>
How to Handle Stale Element Reference Exception in java
Tags: testing, java, python
Published: 2021-02-20 13:29:25

_Android app for all Automation Testing Interview Questions from PlayStore_
⬇️[Download Here](https://bit.ly/2MpAcj0)👈


> Background: 
What is StaleElementReferenceException? Stale means old, decayed, no longer fresh. Stale Element means an old element or no longer available element. Assume there is an element that is found on a web page referenced as a WebElement in WebDriver. If the DOM changes then the WebElement goes stale. If we try to interact with an element which is staled then the StaleElementReferenceException is thrown.


Selenium keeps a track of all elements in form of a Reference as and when findElement/findElements is used. And while reusing the element, selenium uses that Reference instead of finding the element again in the DOM. But sometimes due the AJAX request and responses this reference is no longer fresh, hence StaleElementReferenceException is thrown.

Lets see how this issue can be resolved, I know on the internet many people suggest to use the Lazy Initializer or the Page Object Model to minimize the Stale Element Exceptions. But this method is full proof and can work in any framework.

> Solution: 


```
public void clickElement(WebElement element)
{
    try
    {
        element.click();
    }catch(StaleElementReferenceException stale)
    {
        System.out.println("Element is stale. Clicking again");
        element = reInitializeStaleElement(element);
        element.click(); 
    }
}



//method to re-initialize the stale element
public WebElement reInitializeStaleElement(WebElement element)
{
    //lets convert element to string, so we can get it's locator
    String elementStr = element.toString();
    elementStr=elementStr.split("->")[1];
    
    String byType = elementStr.split(":")[0].trim();
    String locator = elementStr.split(":")[1].trim();
    locator=locator.substring(0,locator.length()-1);   


    switch(byType)
    {
        case "xpath":
            return DRIVER.findElement(By.xpath(locator));
        case "css":
            return DRIVER.findElement(By.cssSelector(locator));
        case "id":
            return DRIVER.findElement(By.id(locator));
        case "name":
            return DRIVER.findElement(By.name(locator));
    }
}

```


The above code is only for reference, please don’t blindly copy it into your project.

Be smart enough to know how to use the driver instance in this method. I would suggest create a Singleton class for click methods or you can put this in to your TestUtil class depending on your framework design pattern.
4 Ways of creating React Components
Tags: webdev, react, codenewbie, programming
Published: 2021-02-21 03:36:13


Most developers probably know only the 2 most fundamentals types of components. But technology is developing every day, right? And now there are 4 types. 

To be relevant, we must keep our tech skills up-to-date ;)

---

## Functional Components

Also called dull or template components, their main purpose is to receive props/return JSX. 

> Use more as possible

```react
import React from 'react'; 
const HelloWorld = () => {
    return (
    <span>Hello!</span>
    )
}

export default HelloWorld; 
```

---

## Class Components

They can do everything a functional component does, but more. Also called smart components. they can receive props, have state and lifecycle methods. We use and connect all functional components. Here, in our smart components. 

> Not everyone is a king. Use as less as possible

```react
import React from 'react'; 
class HelloWorld extends 
React.Component {
    // LOGIC HERE
    render() {
        return (
        <span>Hello!</span>
        )
    }
}

export default HelloWorld; 
```

---

## Pure Components

This is generally used for optimizing the application. The pure components are also used for increasing performance as it works like `shouldComponentUpdate()` lifecycle methods which will reduce the number of operations in the application. 

> Essential component type which I suggest using basically when building larger apps

```react
class example extends 
    PureComponent () {
        return (
        <Text>
        {this.props.text}
        </Text>
     ); 
  }
```

---

## High-Level Components (HOC)

Advanced technique in React for reusing component logic. HOCs are functions that return component (s). They are used to share logic with other components. 

> You can use to 'hack' the rule that you can only return one JSX element from a component

```react
import React from 'react'; 
import MyComponent form './path'

class HelloWorld extends 
    React.Component {
        render() {
            return (
            <div>
                {this.props.myArray.map((el) => (<Comp data={el} key={el.key} /> ))}
                </div>)
        }
    }
export default HelloWorld; 
```

---

📘Thanks For Reading | Happy Coding ☕

Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
UI Trends: Center Column Squeezing
Published: 2021-02-21 15:05:50


> We've just opened our desktop browser to full screen and clicked on a link to one of the sites below. Our browser zoom is 100%.



- Dev.To, 
- FaceBook 
- LinkedIn,
- Git Api Docs

The important column; which is either column (two or three) in a four column layout is squeezed as shown below.

High Resolution and Wide Monitors show this: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1j4m6ix45qak15tcn9oq.jpg)

Here's a random 'current' API doc on Git. In this one, the left hand menu item is not resizable.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ejt1w0j40hubnkbbnw0f.jpg)

**Facebook**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1lr6kbhn6h8ntg5z1oy.jpg)

**LinkedIn**
Probably the most wasted space of all.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6otrdz7155q0cilz7038.jpg)


**Good Examples**

- StackOverFlow

Passable but just barely.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l20gfes0ne7e9tt71l1.jpg)

- Google Developer Docs

At first, it looks like too much space, but a browser resize will collapse both asides and just show important stuff, like this. Great example of responsive focusing on 'important stuff'.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6qfond31nn9y25z2yav.jpg)

- Amazon
At it for over 15 years now.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8e95ouijbodl2i9tunz.jpg)


- Azure

Microsoft wakes up, in their new designs.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdftnis5z4kad6algbcu.jpg)

- .NET Core
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9b6s6cnxvumhg5m9ikg.jpg)

- Gmail

KISS (Keep it stupid simple)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rwh5xqcpg68j8rtytuwc.jpg)

- MDN
KISS
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0trqt2ch8gw6vkbkfod.jpg)

Note: I don't claim to be an expert stylist; however, as a programmer; I read tons of material daily. I am a smart user of programming information.  If I have to fuss with it too much to read it better, I'm apt to quit using that site altogether. 

Sites I've quit over the years:
- Any Medium site
- Most sites that are not updated often.
- Secondary sites that do not have the Subject Matter Expertise I require.
- Any API or Training site which hides a table of content. This forces continual searches.
- Any site who has a built-in search that doesn't work well. 

Smart Users know their stuff, as developers we owe a good experience to them.

**Take Away**

- The mobile first philosophy is good, but don't forget wide screen and high res desktop monitors
- Responsive sites, should always favor the stuff our users are there to read. 
- Collapse asides when resizing width and focus only on the center column. 
- Get rid of outdated layout styles and favor fully responsive sites that adapt to any width and resolution.
- Continuously improve.
Day 44,45,46:100DaysOfCode
Tags: 100daysofcode, programming, productivity
Published: 2021-02-21 16:09:57

not much within these days but ...
studied spring boot further...


continued with dp
some good leetcode medium on dp, bst and array..
few past codeforces ques..

few past kickstart ques.....
completed binary search various ques from cp sheet.


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/
Day.js with RelativeTime in Nuxt.js
Tags: dayjs, nuxt, vue
Published: 2021-02-23 23:21:42

This is a relatively short guide, and it's just to show how easy it is to implement [day.js](https://day.js.org/) inside a Nuxt app.

I've always just used Moment.js for date formatting, but since Moment.js has now been abandoned and they're encouraging people to use alternatives, I needed to find a way to convert timestamps that are provided by the API's I consume. They usually return timestamps in the following format: 

```
2020-10-08T07:51:58Z
``` 

Which to be honest, isn't really useful to anyone. That's where day.js comes in, it can convert the timestamp above into something like

```
Oct 8th 2020
```

It's pretty simple to do.

First we need to pull in the `@nuxtjs/dayjs` package with the following command.

```
yarn add @nuxtjs/dayjs
or
npm install @nuxtjs/dayjs
```

Once that is installed, open up your `nuxt.config.js` and add
`'@nuxtjs/dayjs'` to the `modules` section, and then outside of that, add the following `dayjs` object.

```js
modules: [
    '@nuxtjs/dayjs',
    ...
],
dayjs: {
    locales: ['en'],
    defaultLocale: 'en',
    plugins: ['relativeTime', 'advancedFormat'],
},
```

Set any *locales* you want, for me, being in the United Kingdom, I set my locale to `en` and then add any additional dayjs plugins you need. I'm using the [RelativeTime](https://day.js.org/docs/en/plugin/relative-time) and [AdvancedFormat](https://day.js.org/docs/en/plugin/advanced-format) plugins.

Once everything is installed, you from within any component you can do the following

```js
{{ $dayjs('2020-10-08T07:51:58Z').format('MMM Do YYYY') }}
```
Which will output this

```
Oct 8th 2020
```

You can also use the RelativeTime plugin to turn it into this:

```js
{{ $dayjs('2020-10-08T07:51:58Z').fromNow() }}
```
Which will return

`a year ago`

You can obviously, not use hard-coded dates and use props/variables such as

```js
{{ $dayjs(post.published_at).fromNow() }}
```

Day.js is a simple and ultra-lightweight replacement for Moment.js and is super easy to use.
The font-size trick in layouts
Tags: css, html, tips, webdev
Published: 2021-04-22 19:13:14

---
title: The font-size trick in layouts
published: true
description: When you try to fit two 50% containers and they stack down
tags: css, html, tips, webdev
//cover_image: https://direct_url_to_image.jpg
---

Have you ever faced the issue when 50% and 50% does not fit in 100%? 🤯 Where has the math gone?

I remember my first days learning CSS, putting markup tags here and there then styling them out! yeah! the least aesthetic page ever xD

Flexbox had just appeared and then barely used, we still fought aligning items with `float: left` and `float: right` and the famously used `clear: both`

Nothing worse than dealing with those properties and then boom! we played the fools trying to split a view evenly in two pieces 50/50 using `display: inline-block` and `width: 50%` ending with something like this:

### HTML
```html
<div class="container">
  <div class="item">
    item 1
  </div>
  <div class="item">
    item 2
  </div>
</div>
```

### CSS
```css3
.container {
  width: 100%;
}

.item {
  display: inline-block;
  width: 50%;
}
```

# Fooling!
And you know the end, how 50% plus 50% is different than 100%? then more than one ended doing the weirdest thing ever done 50% and 49% 🤦🏻‍♂️ others tried to heal the wound a bit by evenly distributing the difference like 49.5% and 49.5%

But you know what? just to make it worse guess what? That's not gonna behave as well as expected if you're aiming for responsive views

# Problem solved!
Do you know what's the real issue here?

Well it's even simpler than you thought! The reason why 50/50 doesn't fit 100 is because of the `font-size` yeah!

Remember we're using `display: inline-block` right? to change the default `block` value of divs, and as fact in CSS all the inline elements by default share a property called `font-size`.

Wait! divs could have `font-size`? for sure they can once you change their display property from *block* to *inline*, even *inline-block*

## Conclusion
If you do not set a `font-size` property to your 50/50 elements they will inherit from their parent (which most of the time might not be zero)

All you have to do is set `font-size: 0;` to your items and boom! out of magic everything will work! Here's an example of the result so you could check it out:

{% codepen https://codepen.io/kenystev/pen/PoGMRNe %}

### Before you go!
Note: The example above it's working pretty well just because we don't have content inside those divs, once you have some content there by default most of the browsers set the property `box-sizing: content-box;` and I'd suggest you to set that property to `box-sizing: border-box;`.

Thanks for reading and see you soon... 🤗
An better way to map over components in React
Tags: react, javascript, webdev, tutorial
Published: 2021-02-23 06:48:27

So earlier this week, I found out about an interesting way to map components in react. Here's an example of what I most commonly see. 

A Todos component then returns a list of TodoCard:

```javascript
export const Todos = () => {
  return (
    <div>
      {todos.map(todo => (
        <TodoCard key={todo.id} todo={todo} />
      ))}
    </div>
  )
}
```
Here we have to explicitly give react the key, or your console will be filled with a nasty error 🤮. Turns out we can let react handle the key with React.Children.toArray(). Lets refactor the above component:

```javascript
export const Todos = () => {
  return (
    <div>
      {React.Children.toArray(todos.map(todo => <TodoCard todo={todo} />))}
    </div>
  )
}
```

And tada 🎉, we no longer have to handle keys!
Looking for vscode and git coconut oil for complete novices
Tags: vscode, windows, git
Published: 2021-02-23 10:21:35

Hi,  I'm coming from an nvim poweruser and linux background.  I haven't used windows outside of work for 20 years.  That said I need to get someone with very basic office computer skills set up with vscode and git.   Any suggestions on what extensions would be best?  Here are a couple of examples of initial issues/observations. (and there are problably a lot more!)

1)  Vscode asks if you want to fetch periodically.   I answered NO!  Because I only want to merge. There is very low probablitly of any conflicts and if there are we can deal with it.  The user doesn't even have to know what merge and fetch are.  The file is 'synced' to the cloud.  Period.  Can't vscode ask me if I want to merge periodically?  That would be ideal.  Maybe there is a setting for that.

2) After initial install (with no extensions) the user has edited a file then (it seems to me) they must save it with a ctrl-s, then it appears under changed files in the navigator.

The user has to then stage and commit the changes, and *then* click on the minucule sync icon on the bar at the bottom of the screen.  This is ok, (we *can* deal with it),but is there an extension that would allow the user to click on something and have it stage, commit and push no questions asked?

3) NEW FILES: If the user creates a new file there is a U showing it as untracked.  But it seems really convoluted (for this type of user) to go to the command pallet and add this.  It seems to me that out of the box, vscode would have an icon or at worst a right click button for this???  Similar to the tiny icon to stage changes???

OK, I think you get the point, we need this to be as easy and transparent as possible.   Any suggestions appreciated!
This Is How I Would Explain The Front-End, Back-End, And Apis To A Four-Year-Old Child
Tags: beginners, javascript
Published: 2021-02-23 11:38:09

Recently, I told a friend of mine that I am a back-end developer. He asked me what the meaning of “back-end” web development was. It took me lots of explanation and illustration to explain what back-end means in web development. I understand, he is not a techy guy. I noticed that not just non-techy are finding it hard to understand the terms, a lot of coding newbies can’t decipher the meaning. While some who think they “understand” probably misunderstood.

Just like I explained to my friend, this article is aimed at explaining various aspects (“ends”) of web development to newbies as I would explain to a 4-year-old. Don’t be offended when I say ‘like a four-year-old’, the phrase is to tell how simple and explicit the explanation would be.

I would represent the world of web development with a medium-sized restaurant. In a restaurant, you enter and give your order,  the waiter brings the order to your table.

Basically, you are the user of the restaurant(website). You are less concerned with the processes of making the food. You just want your food and make payment.

The Front-end Aspect Of The Restaurant.
The front end is everything you can see in the restaurant. The HTML is synonymous with the structure of the restaurant, the tables, chairs, and other things. The CSS is the arrangement of things, the restaurant’s painting, the styles and every other thing put in place. The JavaScript handles how you are attended to. When you walk into the restaurant, the waiter gives you the menu, you check your favourite and make a request.

Then the waiter knows what to do with your request. The waiter can also help you with other things in the restaurant.

Therefore, everything happening right there is the front-end aspect of the restaurant.

The Back-end Aspect Of The Restaurants.
After making your request, you are less concerned with the cook or the ingredients the restaurant’s cook is using. You are there enjoying the serene environment and expecting the waiter to deliver your food.

You can think of the back-end as the cooks working tirelessly to prepare the food you ordered. The waiter hands over the menu, then the cook prepares the food and give it to the waiter.

You can think of everything happening in the kitchen as the back-end. The management of the restaurant, which includes decisions on pricing, payment of staff salaries, is done behind. This is the back-end!

The APIs Aspect Of The Restaurant.

You can think of the APIs as the waiters. They serve as a medium between the user and the cook/management.

Just like the way mini restaurants can do without waiters (case of a user requesting the cooks directly), websites can also do without APIs.

The API makes it possible to communicate with other mediums.

For example, if you own a blog app, you can get data across to a mobile app via the API.

APIs also makes it possible to deliver foods outside the restaurant. You can think of the delivery men as the APIS.