teleren/devto huggingface dataset:
Building a Wikipedia App Using React Hooks and Auth0
Tags: javascript, frontend, react
Published: 2019-12-09 18:57:55

---
title: Building a Wikipedia App Using React Hooks and Auth0
published: true
description: Learn how to build a Wikipedia App with React Hooks and secure it with Auth0
tags: #javascript #frontend #reactjs 
canonical_url: https://auth0.com/blog/building-a-wikipedia-app-using-react-hooks-and-auth0/
---
React Hooks have become very popular over the past few months, and for good reason. In one of my previous articles, I demonstrated how you can build an entire group chat application using React Hooks in just 100 lines of code!

React Hooks can be a powerful addition to your application, however, implementing authentication and authorization on your own can still be tricky. Thanks to Auth0, you can implement it mostly out-of-the-box with just a little effort from your side! Auth0 is a managed authentication platform that provides connections to all of the major social media logins such as Twitter, Google, and Facebook.

This article demonstrates the power that React Hooks and Auth0 add to your application. In the course of this article, you will see how both React Hooks and Auth0 can help you build a fully functional Wikipedia-like application. If you'd like to skip ahead, you can view the final code in this GitHub repository.

This post is built upon this very well-written article by Bruno Krebs. It is recommended that you read that first before moving further.

[Keep reading 🚀] ( https://auth0.com/blog/building-a-wikipedia-app-using-react-hooks-and-auth0/?utm_source=dev&utm_medium=sc&utm_campaign=wikiapp_react_auth0)
Is this the coolest / craziest search modal animation ever? :)
Tags: vue, wordpress, gsap, animation
Published: 2019-12-09 18:50:51

---
title: Is this the coolest / craziest search modal animation ever? :)
published: true
description: Search modal animation made with GSAP's MorphSVG and Vue.js
tags: Vue.js, WordPress, GSAP, Animation
cover_image: https://thepracticaldev.s3.amazonaws.com/i/kfqvsruun8ve1pqisn98.png
---

Hey guys what do you think about this animation of a search Modal? :D
https://www.youtube.com/watch?v=aQZumLsSh-g
 
I've made it for my upcoming commercial version of the Wue Theme:
https://wue-theme.app
About Luke Zakka
Published: 2019-12-09 18:48:50

Luke Zakka of Greenwich started his career building out the technology infrastructure necessary to support manufacturing plants, from the ground up. It was in these formative years that Luke Zakka of Greenwich learned what was necessary to be a leader and to drive initiatives for a burgeoning business. Towards the end of his tenure, Amazon Web Services (AWS) began to change the technology landscape, shifting services to the cloud, and embracing Free and Open Source Software. It was at this stage where Luke Zakka's focus shifted to AWS, where he initially worked with the American Kennel Club to support an IoT dog collar, completely powered by the cloud. From there, Luke Zakka of Greenwich assumed a tech-leadership position for RiskMatch, a Data Analytics company that had gone through the start-up lifecycle and become a proven business. As Lead DevOps Engineer, Luke Zakka Greenwich worked closely with Vertafore, the parent company of RiskMatch, to help integrate container technologies and develop new data-driven APIs. At each stage, Luke Zakka Greenwich drove DevOps initiatives to increase agility, automation, security and look ahead for ways to reduce complexity while lowering costs. At present, Luke Zakka Greenwich works as a DevOps Consultant for Amazon Web Services, driving business and technology outcomes for Fortune 100 companies.
Is a design overhaul a failure if you need to offer a toggle?
Tags: discuss, ux
Published: 2019-12-09 18:45:50

Iterative UX design is a staple of the modern web and every few years it seems like our favourite services get a substantial UI update. I've noticed that nearly every time a big UX update comes out, a toggle to switch between the old design and new is included or even demanded for by users. So, do you think a UX redesign that needs a toggle is a failure, or are users always going to want the old version back for a while after launch? Is a staged rollout or beta access the best way to slowly introduce such an update?
Charming the Python: Conditionals
Tags: python, beginners
Published: 2019-12-09 18:44:37

*If coding tutorials with math examples are the bane of your existence, keep reading. This series uses relatable examples like dogs and cats.*

---
## Conditionals

### If
```python
if condition:
    thisstuffwillhappen
```

```python
if 3 > 0:
    print('3 is more than 1')
    print('3 is a positive number')
```
### If-Else
```python
number = 9
if number < 0:
    print('It is a positive number')
else:
    print('It is a negative number')
```
### If Elif Else
Elif allows you to run decisions through multiple levels of logic.

In our example, we want to `play_ball_with_dog`. Then we base our playing with the dog on the weather and other parameters. 

Once a condition is fulfilled, the process stops. Forexample, if it's not `nice_outside`, we move on to decide if `dog_is_napping`. If `dog_is_napping`, we spot going through the decision process and `skip_playing_ball`. If dog is not napping, we move forward to see if it is `raining`. If it is `raining` we `take_dog_to_indoor_dog_park`. If it is not `raining` we move on to our last statement and choose to `play_with_dog_inside`

```python
if nice_outside:
    play_ball_with_dog  # if condition isn’t met, stop here and `play_ball_with_dog`. If not, keep going
elif raining:
    take_dog_to_indoor_dog_park   # if condition isn’t met, stop here and `take_dog_to_indoor_dog_park`. If not, keep going
else:
    play_with_dog_inside   # if no other condition is met, end here and `play_with_dog_inside`.
```

If numbers are more your thing, heres an example with grades.
```python
if 90 > 100:
    print('Congrats, you got an A')
elif 80 < 89:
    print('Nice, you got a B')
elif 70 < 79:
    print('Okay, you got a C. What are you having trouble with?')
elif 65 < 69:
    print('Um, you got a D. What can I explain differently?')
else:
    print('Hmm, you got an F. Would a different environment be helpful?')
```

### Nested Conditions
Nesting jst means some code inside of other code. In this example, we first decide if `you_have_a_dog`. If you don't, we decide if `you_have_a_cat`. If you don't we decide if `maybe_you_have_no_pet`. However, if `you_have_a_dog`, we would've stopped and processed the nested code and decided if it's `nice_outside` and so on.
```python
if you_have_a_dog:
    play_with_dog
    if nice_outside:
        play_ball_with_dog
    elif raining:
        take_dog_to_dog_park
    else:
        play_with_dog_inside
elif you_have_a_cat:
    play_with_cat
else maybe_you_have_no_pet:
    no_play_with_dog_or_cat
```
### If Condition and And Logical Operator
```python
if raining and dog_is_napping:
    skip_playing_ball
```
### If and Or Logical Operator
```python
if you_have_a_dog or you_have_a_cat:
    play_with_your_pet
```

---
Series based on {% post https://dev.to/asabeneh/30daysofpyton-challenge-43ii %}
Charming the Python: Data Structures
Tags: python, beginners
Published: 2019-12-09 18:44:02

*If coding tutorials with math examples are the bane of your existence, keep reading. This series uses relatable examples like dogs and cats.*

---
## Quick Bits on Python Data Structures

### Strings

```python
# Syntax
'string'
"string"
'''string'''
"""string"""
```
{% post https://dev.to/vickilanger/charming-python-day-4-of-30-33d4 %}

---

### Lists
 - multiple data types
 - mutable/changeable
 - ordered
 - indexed
```python
# Syntax
list_name = ['list item 1', 'list item 2', 'list item 3']
```

{% post https://dev.to/vickilanger/charming-the-python-lists-3eh2 %}

---

### Tuples
 - multiple data types
 - immutable/unchangeable
 - ordered
 - indexed
```python
# Syntax
dogs = ('chihuahua', 'golden retriever', 'german shepherd', 'mutt')
```

{% post https://dev.to/vickilanger/charming-the-python-tuples-5f38 %}

---

### Sets

 - unordered
 - no index
 - mutable/changeable

```python
# Syntax
dog_parts = {'paws', 'legs', 'tail', 'fur'}
```

{% post https://dev.to/vickilanger/charming-the-python-sets-1ne4 %}

---

### Dictionaries

 - key/value pairs
 - mutable/changeable

```python
# syntax
dogs = {
    'name': 'Cheeto',
    'colors': ['tan', 'black'],
    'age': 4.5,
    'chipped': True,
    'breed': 'chihuahua',
    'weight': 12.8,
    'vaccines_due':{
        'rabies': 2022,
        'dhpp': 2020,
        'kennel_cough': 2020,
    }
    }

```

{% post https://dev.to/vickilanger/charming-the-python-dictionaries-5ee5 %}
How do I discard or undo changes in Git
Tags: git, undo, reset, versioncontrol
Published: 2019-12-09 18:38:48

Undoing changes is a most common scenario when using Git and one that everyone comes across. There are ways to undo changes that are committed locally(reset) and undo changes that are published remotely(revert). I will cover commands used to undo things that are committed locally. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1wyuhued3iyovmmzmqg9.png)

###Git reset:
`git reset` is the command that one needs to use to reset the changes, whether those changes are in working directory, staging area or the ref HEAD points to. By default, HEAD always points to the latest snapshot in a particular branch. Git reset command comes with few options to move this HEAD to point to the commit you want.

####`git reset --soft HEAD~1`
This tells git to move what the branch `HEAD` points to and stop there. No matter what form of reset with a commit you invoke, this is the first thing it will always try to do. It doesn't go further resetting staging area and working copy. Leave them as they were. Here, it moves the `HEAD` to its parent commit(one commit before it). 

####`git reset --mixed HEAD~1`
This is the default. This is same as `git reset HEAD~1`. Now, git proceeds to make changes to index and update its contents so that it looks like what `HEAD` points to. It means, it unstages everything and this is where the command will stop. It will not proceed to overwrite changes in working copy. Now, the HEAD, and the index are in sync.

####`git reset --hard HEAD~1`
This resets everything. It moves the HEAD, updates index and rolls back changes to working directory. Now, all the players are in sync. You undid your last commit, the git add and git commit commands, and all the work you did in your working directory.

P.S Instead of passing a commit hashcode, one can pass a file path to reset. 
Eg: `git reset index.js`
This unstages all the changes in that file. This is the output of the `git status ` command that suggests you to run this to unstage a file. 

That's it !! You can start using based on your use-case and be careful with `git reset --hard` as it will rmove the changes from working directory as well.
Best practices for React Components
Tags: react, materialui
Published: 2019-12-09 18:33:54

Components should be able to be reusable in different applications and therefore should not be bound to a particular store. A previous way to accomplish this was to use the container/component design pattern and create separate files for the HOC (High Order Components). A similar separation can be accomplished by exporting the component when not connected to Redux. Directly export your unconnected component alongside default export of the connected component. E.g.:
```javascript
    // raw, unconnected component for testing
    export function HeaderLinks(props) {
        ...
        return (
        <Grid container item className={classes.nav}>
            <HeaderMenu renderMenuLinks={() => menuLinks} />
        </Grid>
            )
    }
    // connected (or any other sort of HOC component, etc) for use in App
    export default connect(mapStateToProps)(compose(withStyles(styles), withWidth())(HeaderLinks));
```
## Styles (for MaterialUI JSS for CSS)

In order to create more self-contained code and to reduce the overhead of using extra HoC components. Each component should have their own styles in the same file unless that object becomes too large and it makes it harder to read. makeStyles is preferred for adding custom classes.
```javascript
    import React from 'react';
    import { makeStyles } from '@material-ui/core/styles';

    const useStyles = makeStyles({
      root: {
        backgroundColor: 'red',
        color: props => props.color,
      },
    });

    export default function MyComponent(props) {
      const classes = useStyles(props);
      return <div className={classes.root} />;
    }
```
## PropTypes

PropTypes should be used on every component. The following are the ways that they should be implemented on each type of component.

### Class Components and PureComponent
```javascript
    import React from 'react';
    import PropTypes from 'prop-types';

    export class MyComponent extends React.Component {
        static propTypes = {
            prop1: PropTypes.string.isRequired,
            prop2: PropTypes.bool,
            prop3: PropTypes.func
        };

        defaultProps = {
            prop2: false,
            prop3: () => {}
        };

        constructor() {}
        render() {}
    }

    export default MyComponent:
```
### Functional Component
```javascript
    import React from 'react';
    import PropTypes from 'prop-types';

    export const MyComponent = props => {

    }

    MyComponent.propTypes = {
        prop1: PropTypes.string.isRequired,
        prop2: PropTypes.bool,
        prop3: PropTypes.func
    };
    MyComponent.defaultProps = {
        prop2: false,
        prop3: () => {}
    };

    export default MyComponent;
```
Difference Between Private and FilePrivate Swift
Tags: oop, swift
Published: 2019-12-09 18:18:40

In this article we will discuss Private and Fileprivate in iOS. This is my first article I hope it will be helpful. Now, get started and we will deeply discuss both now:

#Private:
   Private variables and function are only accessible in their scope only where they are created. For example, if we have a class and we declare the function or a variable private then it is accessible only in this class. if we try to access this in another class then we can not access it.

![Private Example](https://thepracticaldev.s3.amazonaws.com/i/7lmhfnip12z2vbygpp6z.png)

As you can see when we try to the private variable of the person class then an error appears saying:

‘name’ is inaccessible due to ‘private’ protection level.

Therefore if we want to access the name of the person class we have to make it public as we created an age variable. which is accessible and we can also assign a value to its object.

#FilePrivate
   Fileprivate variables and functions are accessible within the file they are created. But not in another file and also not in another class as private.

![Fileprivate Example](https://thepracticaldev.s3.amazonaws.com/i/rlvrgrvcpo699n2c1lko.png)


As you can see we created file private variable and it’s accessible in the same file easily but if we try to access in another file and class it will give an error.
My Top 3 Non-Software Development Books For Productivity, Motivation & Well-being
Tags: webdev, mentalhealth, productivity, motivation
Published: 2019-12-09 18:05:22

---
title: My Top 3 Non-Software Development Books For Productivity, Motivation & Well-being
published: true
description: Top 3 Non-Software Development Books For Software Developers
tags: webdev, mentalhealth, productivity, motivation
---

Sometimes we get lost in the software development/tech bubble and have to remember to take a step back from the computer screen and look at the bigger picture of life. 

Don’t get me wrong, making a beautiful, well optimized, scalable, disruptive, innovative software that will leverage the market (did I use enough tech buzzwords here? 😁) is great but a person’s mental health and well-being are more important.

I try to read or listen to a few non-software development books every year. These books usually give me perspective about life. **I may not agree with all the views in these books and that’s OK. I view reading these self-help books as a turkey dinner. I may like eating the drumsticks and thighs but dislike the wings. However, it does not mean it should hate the whole bird, I just take the part I like and move on.**  

These are my **Top 3** non-software development books for 2019:

**#3**
![The Subtle Art of Not Giving a F*ck](https://thepracticaldev.s3.amazonaws.com/i/qoexq9y446bat8sd8tv5.jpeg)

**Title:**  [The Subtle Art of Not Giving a F*ck: A Counterintuitive Approach to Living a Good Life](https://www.amazon.com/Subtle-Art-Not-Giving-Counterintuitive/dp/0062457713) 
**Author:** Mark Manson
**My favorite quote:** *“Being wrong opens us up to the possibility of change. Being wrong brings the opportunity for growth.”*

I guess the name of the book gave it away. If the crude language doesn’t bother you, you can learn a few things that will help you take charge of your life. 

**#2**

![Atomic Habits](https://thepracticaldev.s3.amazonaws.com/i/llvdeeuospe4dg59da2p.jpg)
**Title:** [Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones](https://www.amazon.com/Atomic-Habits-Proven-Build-Break/dp/0735211299)
**Author:** James Clear
**My favorite quote:** *“You do not rise to the level of your goals. You fall to the level of your systems.”*

This book will give a step by step process on how to implement good habits and eliminate the bad ones; creating great habits is essential in every area of your life.

**#1**
![The Fall of Freddie the Leaf](https://thepracticaldev.s3.amazonaws.com/i/pv5uash3sujkvt40zuol.jpeg)

**Title:** [The Fall of Freddie the Leaf: A Story of Life for All Ages](https://www.amazon.com/Fall-Freddie-Leaf-Story-Life/dp/0943432898)
**Author:** Leo Buscaglia
**My favorite quote:** *“Every moment spent in unhappiness is a moment of happiness lost.”*

This is by far the **BEST** book I’ve read this year. Ironically, it is the shortest. It is a must-read as it will take about 5-10 minutes to complete. It talks about the seasons of life and shows that we need to cherish every moment. 

**Do you have any book suggestions for my 2020 reading list? Please let me know.**

Kenny out!
Um estudo sobre Flutter SafeArea
Tags: flutter, widget, google, mobile
Published: 2019-12-09 17:59:03

Esse artigo faz parte de uma série chamada "Widgets da Semana", para saber mais sobre essa ela leia nossa [introdução](https://dev.to/flutter/flutter-um-estudo-semanal-sobre-widgets-56g3).

## SafeArea

O [video](https://www.youtube.com/watch?v=lkF0TQJO0bA&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=2) do Widget da semana postado no dia 14 de agosto de 2018, fala sobre a SafeArea. Esse widget inspeciona o modelo da tela do celular e ajusta a conteúdo para que ele fique formatado dentro dos limites.

Não so o modelo/formato da tela é importante, mas como hoje aparecem varias notificações e também existem os recortes de tela, seu aplicativo pode ficar assim:

![Imagem simulando aplicativo que não se ajusta a tela de um celular com um recorte de tela e com pontas arredondadas](https://thepracticaldev.s3.amazonaws.com/i/2e770q6ef66ukboqqf7i.png)


Para resolver esse tipo de incompatibilidade nós podemos usar o SafeArea.

```dart
SafeArea(
    child: //Seus Widgets
);
```

Para entender a diferença entre usar ou não usar o SafeArea veja o exemplo a baixo:

![Captura de tela de um aplicativo onde o texto invade a barra de notificação](https://thepracticaldev.s3.amazonaws.com/i/czhy4ecm2hsnqmjns7or.jpeg)

Esse aplicativo tem o seguinte código:
```dart
Container(
      color: Colors.white,
      child: Text(
        'Esse texto invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    );
```
Sem usar a SafeArea o texto invade a barra de notificação e, ao olhar no celular, o texto é cortado pelo formato das pontas da tela que é arredondado.

Se você apenas adicionar a SafeArea:

```dart
SafeArea(
        child: Container(
      color: Colors.white,
      child: Text(
        'Esse texto nao invade a barra de notificação',
        style: TextStyle(color: Colors.black),
      ),
    ));
``` 
O resultado é bem melhor:

![Captura de tela de um aplicativo onde o texto não invade a barra de notificação](https://thepracticaldev.s3.amazonaws.com/i/m9dgj9lbd5fa2tv1zsd3.jpeg)



## Sobre Nós

Eu e o pessoal da Flutter Nation estamos em uma [página](https://www.facebook.com/FlutterNationBr/) e um [grupo](https://www.facebook.com/groups/FlutterNation/) no Facebook. 
Também estamos no [Meetup](https://www.meetup.com/pt-BR/FlutterNation/) e no [GitHub](https://github.com/Flutter-Nation)!
To-do list app recommendations
Tags: productivity, recommendation, discuss
Published: 2019-12-09 17:42:31

Today, TechCrunch reported *[Microsoft to finally shut down to do list app Wunderlist on May 6, 2020](https://techcrunch.com/2019/12/09/microsoft-to-finally-shut-down-to-do-list-app-wunderlist-on-may-6-2020/)*. It was only a matter of time before Microsoft pulled the plug on Wunderlist following its 2015 acquisition.

As a dedicated Wunderlist user, however; now what...?

After trying a handful of options many years ago, I settled on Wunderlist thanks to its simplicity. It has enough features to do the job and never felt like its process got in the way.

What are other folks using for reminders and to keep themselves on task?

My basic requirements:
* List format; not cards, not workflows.
* Dirt-simple status indicators: To-do, in-progress, done, favourite.
* Reminder and/or due date notification.
* IFTTT or Zapier integration.
* OS agnostic; either PWA or cross-platform. (aka: Linux support)

Otherwise, I'm going back to pen and paper! :)