teleren/devto huggingface dataset:
Showing All the Way Up
Tags: devjournal, womenintech, codenewbie, codeland
Published: 2020-06-29 17:32:30

_This post was originally published on June 29, 2020 on [my blog] (https://alexlsalt.github.io/blog)._

Happy Monday, folks. I usually write in the morning, but today's post is comin' atcha at 7pm, so hi!

I'm really excited for this week and I don't really know why. It's possible that since I had a full, fun weekend 100% away from my computer, I'm just ready to get back into it, but it could just be one of those happy, excited weeks.

I just submitted a rehearsal recording of my CodeLand:Distrubted 2020 talk (I'm so, so excited about it), and I'm happy to have crossed off a big item of this week's to-do's at the beginning of the week.

The rest of this week is all about Ladies Code Collective (launching my podcast!!! communicating with my email list!!!!) and probably returning a bit to my JS course on Udemy to work on a recipe finder app.

We're with it. We're here. We're showing all the way up.

Have a great week! I hope you take a few big steps in the direction of wherever you want to go in life.

Thanks so much for reading along! [Now let's be friends over on Twitter >>] (https://twitter.com/alexlsaltt)

P.S. I'm on the cusp of launching a brand-new podcast! Stay up to date by [signing up for the newsletter here >>] (https://www.ladiescodecollective.com/)
Authentication in Phoenix Framework Using Guardian - Boilerplate Code
Tags: elixir, phoenix, authentication
Published: 2020-06-29 17:27:42

---
title: Authentication in Phoenix Framework Using Guardian - Boilerplate Code
published: true
description: I made this project since it took me a while to set up authentication in Phoenix using Guardian library. This should get you up and running.
tags: elixir, phoenix, authentication
cover_image: https://images.pexels.com/photos/60504/security-protection-anti-virus-software-60504.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
canonical_url: https://mikeck.elevatika.com/posts/authentication_elixir_phoenix_guardian_boilerplate_code/
---

As mentioned in the comments by [David](https://dev.to/wulymammoth):

> Phoenix now has its own auth written by Jose Valim and Aaron Renner - github.com/aaronrenner/phx_gen_auth

Therefore the method below might be unnecessary..

---

Here is the repo [Barebones Phoenix 1.5.1 Project Using Guardian for Authentication](https://github.com/CkCreative/phoenix_151_guardian/)

The protected route is `/products`. All other routes are free to access.

> For some weird reason, the project won't compile under Windows since it requires Argon2_elixir (which requires native compilation that is not easy to set up).

To get the project working, I used WSL from within VS Code and everything works 100%.

## Installing Elixir and Its Tools in WSL

```bash

wget https://packages.erlang-solutions.com/erlang-solutions_2.0_all.deb && sudo dpkg -i erlang-solutions_2.0_all.deb
sudo apt-get update
sudo apt-get install esl-erlang
sudo apt-get install elixir
sudo apt-get install build-essential
mix archive.install hex phx_new 1.5.1
sudo apt-get install -y inotify-tools

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bas
nvm install --lts
```

In case you need to access a PostgreSQL instance that you installed inside Windows, you can do:

```bash
sudo apt install postgresql-client-common
sudo apt-get install postgresql-client
psql -h 127.0.0.1 -p 5432 -U postgres

```

To start your Phoenix server:

* Install dependencies with `mix deps.get`
* Create and migrate your database with `mix ecto.setup`
* Install Node.js dependencies with `cd assets && npm install`
* Start Phoenix endpoint with `mix phx.server`

Now you can visit [`localhost:4000`](http://localhost:4000) from your browser.

Ready to run in production? Please [check deployment guides](https://hexdocs.pm/phoenix/deployment.html).

## Learn more

* Official website: https://www.phoenixframework.org/
* Guides: https://hexdocs.pm/phoenix/overview.html
* Docs: https://hexdocs.pm/phoenix
* Forum: https://elixirforum.com/c/phoenix-forum
* Source: https://github.com/phoenixframework/phoenix
Creation lifecycle of a class-based React component
Tags: react, webdev, javascript
Published: 2020-06-29 17:23:14

## Lifecycle hooks
After React Hooks were introduced in React 16.8, lifecycle hooks - which were only available in class-based components, are now also available in functional components with the help of the `useEffect` hook.

Although `useEffect` gives us similar control over the lifecycle of a component, lifecycle hooks are only available in class-based components.

The following are the lifecycle hooks called during the creation of a class-based component:

## Creation lifecycle of a class-based component

#### 1. Constructor

When a component is to be created, the first thing that runs is not a lifecycle hook but the component's **constructor**. The *constructor* is a default ES6 class feature and gets added to a class automatically, if we do not specify one. A constructor can be used to set the initial state of the component, initialize variables and bind functions. Since the constructor is essential in a class, it is called before the lifecycle hooks when creating a class-based component.

#### 2. getDerivedStateFromProps
After the constructor, **getDerivedStateFromProps** runs. It is invoked right before the render function does. *getDerivedStateFromProps* is called during the initial mount of the component and on subsequent updates.

It is a rarely used lifecycle hook, for when the state of our component has to be derived from changes made in props over time. The reason this lifecycle hook is not used often is due to simpler alternatives available. These alternatives make our code less verbose and are thus used instead of this hook. That being said, this hook is not completely useless.

One handy use-case would be using it to implement a `<Transition>` component that compares its previous and next children to determine which of them should be animated. You can read more about this lifecycle hook on the [React docs page](https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops).

#### 3. render()
After invoking the constructor of the component and the *getDerivedStateFromProps* lifecycle hook, the **render** function is called. It returns all of our JSX.

The *render* function should remain pure and should only be used to prepare the data we would need to render the JSX. Any HTTP requests or timeouts that can block the rendering process should not be used here.

#### 4. componentDidMount
After the JSX from the *render* function finishes rendering, **componentDidMount** is invoked. Asynchronous tasks like HTTP requests can be run here. For example, if you need to fetch data from a remote endpoint, this is a good place to do that.

Initialization that requires DOM elements is done here.

## Wrapping up
There are several hooks involved during the lifecycle of a class-based React component. The hooks mentioned in this article are the ones which are involved during the creation of a component. When the component is updated, there are a few more hooks which are invoked. We will go over them in the next article.
Converting your GitHub.com public GoLang repo into a class diagram
Tags: go, uml, github
Published: 2020-06-29 17:18:58

In the past few months, I have been working with a friend on a website to create UML class diagrams of public GitHub projects made in GoLang. Last year, I made a post where I showed a library I built called [GoPlantUml](https://github.com/jfeliu007/goplantuml); the response was very positive. Many provided me with issues they found and suggestions that I could include as features in the project. But the feedback that worried me more was the fact that some users didn't know about Plantuml at all. So, I spoke with a friend of mine, and we built a service that renders the diagram right from a github.com public repository.

https://www.dumels.com

We discovered that using the library manually, was very useful for us when we wanted to understand how other libraries worked. However, downloading the code, converting it to Plantuml, and rendering it was a bit slow for our liking. With www.dumels.com, we speed this process. I shared a bit more information on [this blog post](https://www.jazzcoding.com/a-brand-new-way-to-understand-your-code/) if you are interested in reading a bit more about the project.

I hope you guys can find it useful as well.
Read blocked medium stories without subscription
Tags: medium, free, subscription, hack
Published: 2020-06-29 17:13:05

tl;dr — In medium.com, if a premium story is blocked like below, open the article link in browser’s private tab without logging into medium account. The article will get opened. Been using this hack for a while now. Make hay while the sun shines!

*Blocked content*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hgwp8im1n8hjcaefydxh.png)

*Same content unblocked in browser's private window*
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ffoq1avsfr58yv3kbidk.png)

I started to not like medium after they switched from free to premium service. Users can read only 3 premium stories for free/month, common guys that’s too less, also we, the users read a title and open it if we find it interesting. We do not bother whether it is a premium story or not and before we realize the count is 3 and we cannot read more premium content. IMHO this is not fair, users contribute amazing content to the site and the business is expecting the same users to subscribe makes me feel that the business is too money-minded and I don like it.

These days I follow and write in https://dev.to more than medium.com. dev.to feels at home, with fellow developers contributing amazing content.
Unconditional FizzBuzz with only CSS
Tags: css, showdev
Published: 2020-06-29 17:10:17

To celebrate you, my first 100 followers here on dev.to, I wanted to do a small cross-over post between my [with only CSS](https://dev.to/kallmanation/building-a-tooltip-with-only-css-4k9) series and my ["Unconditional" FizzBuzz challenge](https://dev.to/kallmanation/unconditional-challenge-fizzbuzz-without-if-2ock). 

A solution to FizzBuzz using only CSS (and HTML); so there's _definitely_ no `if` statements here! As is tradition, I've output the first 100 FizzBuzzed numbers. My twist is that I've made it the numbering to my list of you all. Thanks for following!

{% codepen https://codepen.io/kallmanation/pen/XWXgJZE default-tab=result %}

And if you're new, welcome! I'll be continuing both this with only CSS series as well as wrapping up my comparison of OOP and FP using this FizzBuzz challenge. Follow me if either of those things interest you!
Create a shorcuts page for your work
Tags: vscode, productivity
Published: 2020-06-29 17:01:32

As an autonomous developer, I work with more thant one customer, and several projects. For each customer, there are a lot of links to use: Development, Test and production environments, dashboards. 
To make my life easier, I created a html page with this links and I use it as my start page. The interesting point is you can create links to your source code or programs you use. I'll show how in this post.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qa4a04sn54d1ifi83xl8.png)

You can create the layout of this page as it fits better for you. As you can see, I divided the links into groups for each project. The first tip I gave you is to use another browser for that, so you can use this page as your start page and still have a browser for common navigation. I recommend Firefox Developer Edition for that.

 **Open Visual Studio code projects**
Visual studio code register a vscode:: url prefix, so you can use that to link your projects. Just create a link to : vscode://c:/your/project/folder/ and the project will be opened on VSCode

**Other executable and utilities**
You can't run a exe directly from a link, for security reasons, but you can easily register a custom url handler, like vscode:, to open a file. You can see details [here](https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/platform-apis/aa767914(v=vs.85)?redirectedfrom=MSDN), but in short you will have to create some registry keys. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/njrmdvirnsk2n5wds5h5.png)

I created a custom 'open:' url handler that points to a small commmand line tool I wrote on c#, that receives the full url as a parameter, treat it and open it using Process.Open.

This procedure might be complicated at first, but it will save you time every time you have to open an web site or application.
Creating a Custom RegEx
Tags: ruby, codenewbie, tutorial
Published: 2020-06-29 16:57:47

Want to have a little programming fun? Let's create a RegEx! What is a RegEx? Well funny you should ask that! A RegEx or Regular Expression is a search string of condensed datum. Let's say you wanted to search for all capital letters in a given set of text. How would you go about it? A RegEx.  This post will explore creating a RegEx for few different situations.
Before we start, three resources that will help anyone trying to build a RegEx are the following websites: 
[Regexr](https://regexr.com/)
[Rubular](https://rubular.com/) 
[Ruby Docs Regexp](https://ruby-doc.org/core-2.6/Regexp.html#method-i-match)
![starts_with_a_vowel](https://dev-to-uploads.s3.amazonaws.com/i/kk8a2rvqwfruix5v461z.jpg)Lets walk through method
 ```
starts_with_a_vowel
``` 
and the steps I used to successfully find a working RegEx. We'll start by picking out a list of words.  Find some that are capitalized and some that are not. Pick at least one, or more that starts with each vowel, capitalize some and leave some lower-case.  Pick out a few words that start with consonants.  Throw in some punctuation.  Maybe some numbers.  Now we have our list.  Go to either [Regexr](https://regexr.com/) or   [Rubular](https://rubular.com/)  and enter your list in the text area. Make sure that you delete any sample text that was there already.  In the RegEx area (which you might have to delete as well) you start entering possibilities.  Play with it. Both sites give you plenty to go on.  See if you can solve it differently than I did.
Now let's do something a little more complicated! Let's see if we can match all valid phone numbers but kick out all invalid phone numbers! You are really going to have to use your imagination and maybe do some research on this one! Here's what I came up with.![valid_phone_number](https://dev-to-uploads.s3.amazonaws.com/i/i3nm1a65yc014063puas.jpg)
I hope you have some fun with this programming problem.
How To Validate Forms In Flutter.?
Tags: flutter, flutterdeveloper, flutterloginpage, formvalidationflutte
Published: 2020-07-02 15:44:17

---
title: How To Validate Forms In Flutter.?
published: true
date: 2020-06-29 16:51:55 UTC
tags: flutter,flutterdeveloper,flutterloginpage,formvalidationflutte
canonical_url: https://medium.com/innovation-incubator/how-to-validate-forms-in-flutter-640159a85ce5
---

![](https://cdn-images-1.medium.com/max/600/0*DMISHEmhHmBD_QX0.png)

#### NEED:

To show that something is wrong with the submitted data, we use form validation.

Widgets Used:

1. **Form**

2. **TextFormField**

Lets go to the Steps:

#### STEP 1:

Inside your project, add a Scaffold with a Floating Action Button.

We use this button to submit and validate the form.

![](https://cdn-images-1.medium.com/max/475/1*qruHGxQwHMKXCQFFufIB4w.png)

![](https://cdn-images-1.medium.com/max/269/1*xHiebXk7MwHzWM7zaIs0BA.png)

#### STEP 2:

Add a Form widget to the body of the Scaffold.Give a global key to this form to validate it from anywhere.

After that, add two TextFormField’s to the form.

![](https://cdn-images-1.medium.com/max/467/1*inEUJICtDuBkuNZGfLmuoQ.png)

![](https://cdn-images-1.medium.com/max/260/1*T0shbwCA4SPs7Ll9ddI8eA.png)

#### STEP 3 :

Apply decoration and onChanged method to these Text Form Fields.

Then add the validator, which will validate the submitted string.

![](https://cdn-images-1.medium.com/max/517/1*ha9gWRyjvHXiJLoL0Vysmw.png)

![](https://cdn-images-1.medium.com/max/265/1*77reGSobrQLSUGx0TU5X_g.png)

#### STEP 4 :

At last, when we press the FAB , we need to validate the form.

So, inside OnPressed method of FAB, carryout the validation of the form.

![](https://cdn-images-1.medium.com/max/427/1*M5JhmUDcl4cNWIECnwfjJw.png)

![](https://cdn-images-1.medium.com/max/264/1*2me3ZN5IquG2LyTZ7wJj-w.png)

And DONE ..!

* * *
How to add support for dark mode on your website
Tags: css
Published: 2020-06-29 16:51:48


In recent years, dark mode has grown in popularity as more and more devices and browsers are adding support for it.

Those reasons make it a great little feature that we can add on our websites to improve the experience of the users who prefer to use dark mode.


Let's see how we can support this feature in 3 steps!


First, we will take advantage of another great CSS feature: [CSS variables]({{ "/tips/2020/06/17/css-variables" | absolute_url }})



On the `:root` level, we will define two variables; one with the color of the background and one with the color of the text.
```css
:root {
    --background-color: #FFF;
    --text-color: #000;
}
```

Then, we will define a `prefers-color-scheme` media query for the dark color theme. In this media query, we will override the values of the variables that we defined in the previous step.


```css
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #000;
        --text-color: #FFF;
    }
}
```

Lastly, we will use those variables to assign their values to CSS properties. In our case, we will use the variable to set the background and the color of the body.

```css
body {
    background: var(--background-color);
    color: var(--text-color);
}
```

Now all you have to do is to find a color palette for the dark theme and apply it following those steps!

---
➡️ This post was originally published on my [blog](https://diamantidis.github.io).
Working on Portfolio site
Tags: hugo, eleventy, portfolio, freelance
Published: 2020-06-29 16:33:12

---
title: Working on Portfolio site
published: true
description: 
tags: hugo, eleventy, portfolio, freelance
//cover_image: https://direct_url_to_image.jpg
---

I've started working on a website for my personal portfolio. 

Background: I was laid off in mid-April due to this pandemic. Since then I've been freelancing a little bit at home along with keeping the kids' schoolwork sorta happening. And WoW... lots of WoW. Lots of WoW AH.

I've been in the industry over 15 years now and I've never really put together a portfolio site for myself, I've always been employed so never felt an urge to promote myself.

In the past week I started fiddling with Hugo as I've seen it recommended on Twitter in the past. However, after digging into it it felt like too high of a learning curve for a couple page website.

In the past couple days I started looking at [11ty](https://www.11ty.dev/) and it's coming along nicely so far.
JSX beginners guide
Tags: react, javascript, webdev, jsx
Published: 2020-06-29 16:25:23

Hello all👋
This article is all about the basics of JSX(`Javascript extension`)for beginner react devs.even if you're intermediate react developer you can repaint/refresh things you learned before.

**Things we are going to learn/repaint🖌🔁**
* JSX is syntactic sugar for React.createElement
* In JSX we can self-close the components
* In JSX user-defined components should start with capital letters
* You can use Javascript expressions inside of JSX
* You can nest components in JSX just like we do in HTML
* Nested contents can be accessed in (props.childern)

**Detailed description**
 
**JSX is syntactic sugar for React.createElement.**
<p>
In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer.
**As it turns out, JSX is actually transpiled into standard JavaScript behind the scenes. React uses a preprocessor called Babel to translate our code before it is rendered in the browser.**
</p>
Example:-
This code⤵
```js 
<Button onClick={() => alert('YES')}>Click me</Button>
```
converted to this code ⤵
```js
React.createElement(Button, { onClick: () => alert('YES') }, 'Click me');
```
For more details,you can check on [babeljs.io](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx/)

**In JSX we can self-close components**⤵
So we write HTML tags like this ⤵
```js
<div></div>
```
we have to add closing tag there that is necessary otherwise it won't work 

but in JSX we can simply self-close that tag⤵
```js
<div />
```
**In JSX user-defined components should start with capital letters**⤵
```js
function App() {
  return (
    <div className="App">
    <Jumborton/>
    <Projects/>
    <Social/>
    <Footer/>
    </div>
  );
}

export default App;
```

**You can use Javascript expressions inside of JSX**
we can evaluate javascript expression JSX with help of curly braces ⤵
```js
<div>{5+5}</div>

```
**You can nest components in JSX just like we do in HTML**
Example
```js
<header>
<div>
<h1>Hello Header</h1>
</div>
</header>
```

**Nested contents can be accessed in (props.childern)⤵**
```js
function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}
```
```js
function Avatar(props) {
  return (
 <img className="Avatar"
 src={props.user.avatarUrl}     
 alt={props.user.name}  /> 
 );
}
```

Thank you for tunning in i hope you find something useful here good day friends.😊👋
A Taxonomy of VR Platforms
Tags: taxonomy, virtualreality, design
Published: 2020-06-29 16:23:05

Genesis first, then classification; this is the design pattern for new productions. After seeing current efforts, we realize that writers are struggling to create a virtual reality platform taxonomy and are not reaching a satisfying conclusion. Thus, we present a taxonomy that suits our own priorities of accessibility, immersion, and functionality.
Plus it is in 3D.

And includes Special Quadrants.

Because we're cool that way.

Written together with Heather Dodds

 #taxonomy #accessibility #immersion #functionality #virtualreality #VR #classification #AltspaceVR #MozillaHubs #FrameVR #SomniumSpace #ENGAGE #rumii #VirBELA #RecRoom #iSeeVC #Sansar #NeosVR #JanusXR #VESTAJanusXR #Anyland #cryptovoxels #sinespace #universaldesign

Read more about it here - https://www.linkedin.com/pulse/taxonomy-vr-platforms-tiago-martins-peres-%25E6%259D%258E%25E5%25A4%25A7%25E4%25BB%2581