teleren/devto huggingface dataset:
Burger Animation with React Hooks
Published: 2019-03-12 20:23:06

---
title: Burger Animation with React Hooks
published: true
description: How to use hooks to create a burger animation
tags: 
cover_image: https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/uh59Wh0/burger-cartoon-illustration-hand-drawn-animation-transparent_41i6dql__F0004.png
---

I was recently messing around in Codesandbox with a react app and wanted to animate a burger SVG but in order to do this, I needed to use refs which meant I had to change my functional component to be a class! I also needed to use the lifecycle method `componentDidMount` so it looked like I was all out of options.  

But...maybe...this Hooks thing everyone is talking about will save me?  Turns out it did.

Previously I had to create my refs in the constructor like so:
```
constructor(props){
  super(props)
  this.burgerRef = React.createRef()  
}
```

Now I could do:
```
const burgerRef = useRef(null);
```

Still I needed some way to detect when my component mounted, otherwise I would try to animate an undefined element which is not fun!  `useEffect` comes to the rescue:

So instead of:
```
componentDidMount(){
    ....
}
```

I could just do:
```
useEffect(() => {
  ....
})
```

And voila! I could now do a nice animation without needing to change my component to be a class.

I simply discussed the theory here, all the code including the animation is on the following Codesandbox (Codesandbox is really great, I am a patreon and I think everyone should be, I don't get anything for saying this or promoting Codesandbox but I just love it!!!!)

{% codesandbox xrr2pyjkw %}
Creating Custom Validators in Angular 9|8|7 Reactive Forms
Tags: angular, angular987, customvalidatorsinangular, angularreactiveforms
Published: 2020-02-01 19:07:13

---
title: Creating Custom Validators in Angular 9|8|7 Reactive Forms
published: true
tags: Angular, Angular 9|8|7 , Custom Validators in Angular,Angular Reactive Forms
canonical_url: https://www.positronx.io/custom-validators-angular-reactive-forms/
---

The post [Creating Custom Validators in Angular 7 Reactive Forms](https://www.positronx.io/custom-validators-angular-reactive-forms/) appeared first on [positronX.io](https://www.positronx.io).

In this tutorial, We’ll learn to create custom validators with Angular 7 Reactive Forms. I’ll create the functionality that tells your users if they’ve entered the correct information in the form field.  

In simple terms, we’ll create custom form validations in Angular.

[Click here to read more](https://www.positronx.io/custom-validators-angular-reactive-forms/)
How do you create valid WordPress websites?
Tags: discuss, w3c, wordpress, wp
Published: 2019-03-12 19:41:05

---
title: How do you create valid WordPress websites?
published: true
description: 
tags: discuss, w3c, wordpress, wp
---

In a web where we very much use WordPress for a lot of agency work I wanted to know  how do you validate your WordPress websites against the standards set by the W3C?
Last call! Be a co-author of the complete guide for junior devs
Tags: book, beginners, career, firstyearincode
Published: 2019-03-12 18:54:43

---
title: Last call! Be a co-author of the complete guide for junior devs
published: true
description: 
tags: book, beginners, career, firstyearincode
cover_image: https://thepracticaldev.s3.amazonaws.com/i/o68w7jh4gei9t506o0qo.png
---

If you missed my prior post, here it is:

{% link https://dev.to/isaacandsuch/im-writing-a-book-for-junior-developers-3ph0 %}

I'm looking for writers and storytellers to contribute to a complete guide for junior developers. It's already shaping up to be a great project and a lot of awesome people have signed up, but I want to make sure nobody misses the opportunity.

Want to write a guest chapter, tell your story about overcoming stereotypes, or give feedback on the book before it's released? See the original post, then send me an email.

**If you've already signed up to help**, there's an email in your inbox right now with important details about the project. If it went to your spam box, please mark it as Not Spam.

As the project progresses, I'll be posting updates with the tag #firstyearincode. I'm hoping to publish the finished book in July of this year, so stay tuned!

{% tag firstyearincode %}
Kadena Discord AMA - PoW vs PoS
Tags: kadena, blockchain, pow, pos
Published: 2019-03-12 18:27:50

---
title: Kadena Discord AMA - PoW vs PoS
published: true
description: discord.io/kadena
tags: kadena, blockchain, pow, pos,
---
Kadena will be hosting a town hall style live Discord AMA with Will Martino (Founder Multicoin Capital) and Kyle Samani (CEO Kadena) on March 20th, 2019 @ 2pm EST. The conversation will primarily be about Proof-of-Work vs Proof-of-Stake and how these consensus mechanisms will impact the future of blockchain. We welcome all blockchain developers, investors, and enthusiast to join the conversation! discord.io/kadena
.NET Core 2 Publish with Symbols
Tags: dotnet, publish, symbols, showdev
Published: 2019-03-12 18:24:19

---
title: .NET Core 2 Publish with Symbols
published: true
description: Publish web project in .NET Core 2 with Symbols
tags: dotnet, publish, symbols, showdev
---

# Missing pdb files

Default dotnet publish behaviour omits all pdb files, leaves you with puzzle of where the exception has occurred. I never liked omitting pdb on production, if one does not have source code, a line number would do what?

# Hack

Really dirty hack, found after 2 hours of digging github issues.

# Code

Edit your csproj file, and add following lines.

```xml
  <Target Name="_ResolvePublishNuGetPackagePdbsAndXml" AfterTargets="RunResolvePublishAssemblies">
    <ItemGroup>
      <ResolvedFileToPublish Include="@(ResolvedAssembliesToPublish->'%(RootDir)%(Directory)%(Filename).pdb')" RelativePath="$([System.IO.Path]::ChangeExtension(%(ResolvedAssembliesToPublish.DestinationSubPath), '.pdb'))" DestinationSubPath="$([System.IO.Path]::ChangeExtension(%(ResolvedAssembliesToPublish.DestinationSubPath), '.pdb'))" Condition="'%(ResolvedAssembliesToPublish.PackageName)' != ''&#xD;&#xA;                    and Exists('%(RootDir)%(Directory)%(Filename).pdb')" />
      <ResolvedFileToPublish Include="@(ResolvedAssembliesToPublish->'%(RootDir)%(Directory)%(Filename).xml')" RelativePath="$([System.IO.Path]::ChangeExtension(%(ResolvedAssembliesToPublish.DestinationSubPath), '.xml'))" DestinationSubPath="$([System.IO.Path]::ChangeExtension(%(ResolvedAssembliesToPublish.DestinationSubPath), '.xml'))" Condition="'%(ResolvedAssembliesToPublish.PackageName)' != ''&#xD;&#xA;                    and Exists('%(RootDir)%(Directory)%(Filename).xml')" />
    </ItemGroup>
  </Target>
```

# Warning

It is subjected to completely change in .net core 3. I will post an update here when it is shipped.
La chaîne d'authentification
Published: 2021-11-09 22:21:54

---
title: La chaîne d'authentification
published: true
date: 2019-03-12 18:00:45 UTC
tags: 
canonical_url: https://blog.limawi.io/fr-fr/posts/la-chaine-dauthentification/
---

Cette série d’articles expose simplement les processus et les bonnes pratiques pour se connecter.

## Étape 1, la base

On commence par le début, donc. La toute première étape est le mot de passe, la méthode d’authentification la plus courante.

Qu’est ce qu’un bon mot de passe, comment gérer au mieux la multitude de mots de passe.

> [Tout sur un bon mot de passe](https://dev.to/micheelengronne/tout-sur-un-bon-mot-de-passe-47m2-temp-slug-2740311)

Pour les développeurs, cet article explique comment gérer l’authentification par mot de passe sur votre système. Attention, les indications de cet article sont valables pour le premier trimestre 2019. Si vous regardez cet article en 2038 (ben bonjour aux transdimensionnels déjà, ou « −··· −−− −· ·−−− −−− ··− ·−· ·−−·− ·−·· ·−−−−· ·· −· − · −· − ·· −−− −· −·· · ·−·· ·− −−· ·−· −−− ··· ··· · ···− −−− ·· −··−  » dans votre langue), les indications seront peut-être (sûrement) obsolètes.

> [Implémentations de la phrase de passe](https://dev.to/micheelengronne/implementations-de-la-phrase-de-passe-2c0c-temp-slug-7273083)

## Étape 2, on renforce

Une fois le mot de passe au point (donc plus de « 1234567890 »), on passe à la deuxième étape (qui porte bien son nom).

La double authentification relève du principe « Quelque chose qu’on sait, quelque chose qu’on a ».

> [Tout sur la double authentification](https://dev.to/micheelengronne/tout-sur-la-double-authentification-fgb-temp-slug-9344673)

## Étape 3, on distribue l’authentification

Une fois authentifié sur un système, pourquoi le refaire sur d’autres. C’est sensible à l’erreur et pas très agréable.

Il existe une solution qui permet de distribuer son authentification en toute sécurité. Avec cette solution, on s’authentifie à un service et les autres services, systèmes, sites web qu’on utilise peuvent reconnaître notre identité et nous authentifier à notre demande sans repasser par les deux premières étapes.

> [Les social logins, comment ça marche ?](https://dev.to/micheelengronne/les-social-logins-comment-ca-marche--7fg-temp-slug-9007477)

## Étape 4, on contrôle l’accès

Une fois authentifié, on n’a pas accès à toutes les ressources fournies par les services non plus. Il y a des règles pour sélectionner ce à quoi on a accès et ce qui nous est refusé. Les utilisateurs d’un service sont organisés selon des groupes ou rôles. Ce que sur les réseaux sociaux on appelle tribu, clan, horde, communauté, comité, section, commission, (·−−· −−− ·−·· −·−− ·−−· ···· −−− −· ·· · ··· pour les transdimensionnels)…

> [C’est quoi une commu ? Groupes et rôles](https://dev.to/micheelengronne/cest-quoi-une-commu-groupes-et-roles-1m3o-temp-slug-2599022)

Voilà. Bien sûr, c’est une base. Il existe de multiples variantes et cas particuliers.
TIL: Curly Bracket Substitution
Tags: bash, shell
Published: 2019-03-13 00:51:47

---
title: TIL: Curly Bracket Substitution
published: true
tags: [bash, shell]
canonical_url: https://scottw.com/cbs
---

You can use curly brackets for quick substitution in a shell command.

![Curly Backet Example](https://scottw.com/assets/images/posts/bash_curly_bracket.png)

Instead of manually typing the path out twice (or even tab completing it), you can list the parts to be swapped within curly brackets ({}).
👩‍🎓 Open Source Exam Simulator 
Tags: javascript, node, electron, react
Published: 2019-03-12 17:25:57

---
title: 👩‍🎓 Open Source Exam Simulator 
published: true
description: A JSON based, open source exam simulator
tags: javascript,nodejs,electron,react
---

####[Introduction](#introduction) ◽ [Exam Simulator](#exam-simulator) ◽ [Exam Maker](#exam-maker) ◽ [Moving Forward](#moving-forward)

{% youtube KLlTQULbxhU %}

### Introduction

The last class I needed to pass before snagging my college degree entailed an Oracle Database Certification. The study material provided by the school was not enough to prepare students as evidenced by a course chatroom full of people complaining about failing miserably. I too failed my first attempt by 4 points 🤯. It turns out that the best way to study for these things is to find *VCE* files and a simulator to run them on.

The downside to *VCE* is that it often costs 💲💲💲 for the files, the simulator, or some sort of membership. Since I was majoring in Software Development I decided to make my own open source solution using JavaScript. As of today, everything is in alpha and I could use some feedback, exam creators or contributors to help move the project forward. 

### Exam Simulator

The simulator portion of the project is built with *Electron* and available for *Windows* and *MacOS*. I have not used/tested the *MacOS* version yet. Data for the simulator comes from JSON files stored on the user's local machine. I have built features including an exam timer, 4 question types (multiple choice, multiple answer, fill in & drag and drop list), exam review reports, saved exam sessions, exam validation and more.

### Exam Maker

Even though exams can be created in any text editor I thought it would be a good idea to make online exam editor to create exam files and to act as a central repository for all exams. This site is a *Next.js* app with an *Node.js* backend and a *Prisma* database. Its up on *Heroku* on the free hobby-tier so it is sort of slow to boot. Users creating and sharing tests is what would make the app have value.

### Moving Forward

Who knows. No one might ever use this thing 🤦‍♂️, but at least its fun to work on. Check out the following resources if you are interested. There is no shortage of bugs, performance optimizations to make and features to create.

[Exam Simulator Download](https://github.com/exam-simulator/simulator/releases)

[Exam Simulator Docs](https://exam-simulator.gitbook.io/exam-simulator/)

[Exam Maker on Heroku](https://exam-maker.herokuapp.com/)

{% github exam-simulator/simulator %}

{% github exam-simulator/maker-frontend %}

{% github exam-simulator/maker-backend %}
Node.js and Express Tutorial: Building and Securing RESTful APIs
Tags: node, express, javascript, api
Published: 2019-03-12 16:42:14

---
title: Node.js and Express Tutorial: Building and Securing RESTful APIs
published: true
description: Learn how to develop secure RESTful APIs with Node.js and Express.
tags: #nodejs #expressjs #javascript #api
canonical_url: https://auth0.com/blog/node-js-and-express-tutorial-building-and-securing-restful-apis/
---
In this article, you will learn how to develop RESTful APIs with Node.js, Express, and Auth0. You will start from scratch, scaffolding a new Node.js project, then you will go through all the steps needed to build a secure API. 

[Read on 💚](https://auth0.com/blog/node-js-and-express-tutorial-building-and-securing-restful-apis/?utm_source=dev&utm_medium=sc&utm_campaign=nodejs_expresstutapis)

![Node.js and Express Tutorial: Building and Securing RESTful APIs](https://thepracticaldev.s3.amazonaws.com/i/820mzy0h8iwdyrr53l36.png)
React Lifecycle Methods Flows
Tags: newbie, react, lifecyclemethods
Published: 2019-03-12 16:29:51

---
title: React Lifecycle Methods Flows
published: true
description: How lifecycle methods work in React and what is the use of it.
tags: newbie, react, lifecycle methods
---

#In What order react lifecycle methods execute.

**React execution flows of lifecycle methods**

**Constructor()**
    It helps to set up an initial state of the component.

**Render()**
    It renders an initial state with the use of constructor

**After these two methods React Lifecycle methods stars executing**

**ComponentDidMount()**
    After render methods are done. It looks for this method and mounts the component. In this method, you can make an API call, create an Ajax request etc.

**ComponentDidUpdate()**
    This method runs whenever your component state changes or when the component receives an update.

**ComponentWillMount()**
    This has been deprecated in version 16.4 and removed completely from version 17.

**ComponentWillUnmount()**
    Invokes whenever a component is removed from the DOM. i.e. If you use react router and changes the route then it will call this method.

**You don't need to physically bind these methods as react does it for you**
Observer Design Pattern [Behavioral]
Tags: blog, concepts, designpattern, designpatterns
Published: 2019-03-12 16:21:01

---
title: Observer Design Pattern [Behavioral]
published: true
tags: blog,concepts,Design Pattern,Design Patterns
canonical_url: https://itscoderslife.wordpress.com/2019/03/12/observer-design-pattern-behavioral/
---

 **What is Observer Pattern**? It’s a way of notifying a group of objects about state changes in another object. The observers subscribe to receive notifications and the subject updates them when its state changes. The observer pattern achieves this while keeping the subscribers independent from the subject’s implementation. All of these objects remain loosely coupled.

- There is an object referred to as the subject. This subject sends notifications.
- The subject maintains a list of subscribed objects otherwise know as observers and notifies them of changes in its state.
- The observers need to subscribe to receive notifications from the subject.
- There is no tight coupling between the subject and the observers.

> The observer allows subscribers to get notified about changes in another object without being tightly coupled to the sender.

Example:

Let's take the Auctioning system as an example. Here the subject is represented by the auctioneer. The bidders are the observers. The auctioneer updates the bidders when the new bid is accepted or when the reserve price has been met. The auctioneer is independent of the bidder.

Another example is the Notification system in software. There are apps which subscribe or observe certain events in the operating system. These events can be user-generated events or OS generated events. OS is the subject which on event generation notifies all the observers about the event.

The observer design pattern allows objects to subscribe to receive notifications about changes in another object. The Notification Center, also known as the subject, updates the observers when its state changes. The subject only knows that the receivers adopt the observer protocol. No further implementation details are needed. This loosely coupled design lets us easily add or remove observers. There is no need to modify the subject when creating new observer types. The only requirement is to make the new type conform to the Observer protocol.

Disadvantages: One of the potential issues is related to observers being kept alive by the subject. When an observer is about to be released, we should detach it from the subject. Otherwise, the subject will keep the observer alive and it’s going to update it long after it should have been released. This may cause undesired side effects and all kinds of weird bugs. Another pitfall with this pattern is allowing the observers and the subject to become tightly coupled. The observer pattern is implemented correctly if the subject only caused the observer’s update method.
If designers could give you a working UI that you could modify programmatically, would you use it?
Tags: ios, android, swift, reactnative
Published: 2019-03-12 16:07:14

---
title: If designers could give you a working UI that you could modify programmatically, would you use it?
published: true
description: 
tags: #iOS, #android, #swift, #reactnative
---
How long does a great presentation takes to put together? 🤔
Tags: career, presenting
Published: 2019-03-12 15:52:32

---
title: How long does a great presentation takes to put together? 🤔
published: true
description: We often see the end result, but how long does it take to put a presentation together? 🤔
tags: career, presenting
---

Answer: **A long freaking time.**

Hmmmmm...that's kind of vague. So, let's use more a concrete number: 12 hours.

At least, that's how far it has taken my buddy [Arthur Doler](https://twitter.com/ArthurDoler) to put his next awesome talk together.

So, why 12 hours? 

- Is it a magical number?
- Am I in love with number 12?
- Is it the meaning of life? 

No, to all of the above.

Arthur committed to record his journey on streaming his talk preparation.

{% twitter 1105456165650157570 %}

And, as of this post, he has 12 hours of recording!

https://www.twitch.tv/arthurdoler/videos


## Intimidated no more

It takes time to put a great talk together. It's not easy and a lot of work. 

I hope you realize that even seasoned speakers have to go thru this every time they are putting a new talk together. 

**It's normal.**

If you are currently working on a talk, keep on going!

## Appreciation for speakers

Arthur's work reminds me to appreciate the time, effort, and energy put into each of their talks.

It's humbling to realize how much goes into a 45-min or 1-hour talk. 

They make it look easy...the sign of a master.

**Thank you to all the speakers out there.**

## TL; DR

Watch my buddy [Arthur Doler](https://twitter.com/ArthurDoler) on twitch.tv as records the creation of his new talk.

Can't make it live? [Watch his recording](https://www.twitch.tv/arthurdoler/videos).
STOP! Automating everything for "regression" is a waste of time
Tags: testing, testautomation, automation
Published: 2019-03-12 14:53:24

---
title: STOP! Automating everything for "regression" is a waste of time
published: true
description: Why trying to regression test and automation everything is bad value
tags: Testing, TestAutomation, Automation
cover_image: https://thepracticaldev.s3.amazonaws.com/i/ihpxg80ntvbsqbdlr3va.jpeg
---

## Before you automate
![Gears](https://thepracticaldev.s3.amazonaws.com/i/4z91y0jzhpsg1e6qeciy.jpeg)

Do your analysis, identify your biggest risks and choose how you can mitigate those risks. This is abstract, so what kind of risks might you identify?

- Allowing invalid input crashes the application or allows corrupt data to be recorded
- Users can no longer do something they could before
- Users can do something now they were prevented from doing before, that they should not be allowed to
- Usability is compromised so it's now more difficult or confusing to use the application
- Application on longer performs as required
- Application no longer projects privacy or security

There are many more risks you could identify for your own applications, but militantly it boils down to this:
The application on longer behaves how it is expected, preventing the customer or business getting the desired value.

## Be selective
![Doors](https://thepracticaldev.s3.amazonaws.com/i/yx3jv0mrgf1uer4lom4f.jpeg)

Given you have identified your key risks, ask yourself, will automating your UI give you confidence you have mitigated these risks?

If yes - stop reading and go make that automation happen!

If, like me, the answer is almost always "not completely", think carefully before you sink too much time into UI and front-end automation. And start asking the question "so how do I mitigate the risks identified?".

At some point, there is no single answer, but stick with it. Work with your business and/or client you will get there.

So what options might you have?

- API Automation combined with UI automation
- Chaos or "Monkey" testing
- Exploratory testing, supported by tools and scripts executed "on demand"
- Data-driven automation

If you come up with some good ideas on this, let me know!


## If it doesn't bring you joy, throw it away
![Joy](https://thepracticaldev.s3.amazonaws.com/i/1mpb7m2knuscufwo5a03.jpeg)

So - you already have an automated regression suite? Is it giving you value? is it bringing you joy?

Remember, it's important not to let your regression tests to go stale. Make sure they are still giving you value, and they are not getting flaky. If they are taking a long time to run, are they still worth it?

Don't be afraid to stop running regression tests if they no longer bring you joy! For joy, read "confidence to make changes".
Visual editor for app prototyping
Tags: graphql, webdev, beginners, discuss
Published: 2019-03-12 14:18:31

---
title: Visual editor for app prototyping
published: true
description: 
tags: graphql, webdev, beginners, discuss,
---

###[Visual Editor](https://graphqleditor.com) for logic prototyping

GraphQL from its core name is something more than new API standard. Some users describe it as a tool for the specification of new solutions. Thanks to graph sourcing we can visualise existing database schema and show existing solutions on the screen. From the other side, you can prototype new business applications. With visualised graph possibilities are endless. Think about the potential advantages of giving access to internal systems for a business manager at company meeting or speeding up onboarding of new developers. Some companies have significant and complex systems; therefore it slows down digital transformation. Check below how Github’s schema in action.

Try here [GraphQL Editor](https://graphqleditor.com)

![Design Schema](https://thepracticaldev.s3.amazonaws.com/i/w7oo4vqe0mo0h1le7qwc.gif "")