teleren/devto huggingface dataset:
🗞️State of JS, freeCodeCamp, GitHub Mobile, App Actions, Unicorn Project
Tags: news, freecodecamp, aws, books
Published: 2019-12-20 15:04:12

---
title: 🗞️State of JS, freeCodeCamp, GitHub Mobile, App Actions, Unicorn Project
published: true
date: 2019-12-03 05:00:00 UTC
tags: news, freecodecamp, aws, books
canonical_url: https://ajonp.com/blog/aj-s-week-in-web-december-04-2019
series: ajweekinweb
---

{% youtube 3A5xqupPbTU %}

# AJ's Week In Web Links

## The State of JavaScript 2019

[https://stateofjs.com/](https://stateofjs.com/)

## freeCodeCamp 5 years later

[https://changelog.com/podcast/369](https://changelog.com/podcast/369)

[https://www.freecodecamp.org/](https://www.freecodecamp.org/)

## GitHub Mobile

[https://github.com/mobile/beta](https://github.com/mobile/beta)

## [Google Fusion Tables to be shut down on December 3, 2019](https://gsuiteupdates.googleblog.com/2018/12/google-fusion-tables-to-be-shut-down-on.html)

[https://gsuiteupdates.googleblog.com/2018/12/google-fusion-tables-to-be-shut-down-on.html](https://gsuiteupdates.googleblog.com/2018/12/google-fusion-tables-to-be-shut-down-on.html)

## Google App Actions

[https://developers.google.com/assistant/app](https://developers.google.com/assistant/app)

[https://developers.google.com/assistant](https://developers.google.com/assistant)

## Google Cloud Code

[https://cloud.google.com/code/](https://cloud.google.com/code/)

[https://cloud.google.com/code/docs/vscode/quickstart](https://cloud.google.com/code/docs/vscode/quickstart)

## The Unicorn Project

[https://itrevolution.com/the-unicorn-project/](https://itrevolution.com/the-unicorn-project/)

[https://www.amazon.com/Phoenix-Project-DevOps-Helping-Business-ebook/dp/B078Y98RG8/](https://www.amazon.com/Phoenix-Project-DevOps-Helping-Business-ebook/dp/B078Y98RG8/)

[https://www.amazon.com/Unicorn-Project-Developers-Disruption-Thriving-ebook/dp/B07QT9QR41](https://www.amazon.com/Unicorn-Project-Developers-Disruption-Thriving-ebook/dp/B07QT9QR41)

[https://aws.amazon.com/blogs/aws/aws-deepracer-update-new-features-new-racing-opportunities/](https://aws.amazon.com/blogs/aws/aws-deepracer-update-new-features-new-racing-opportunities/)

## AWS DeepRacer

[https://aws.amazon.com/blogs/aws/aws-deepracer-update-new-features-new-racing-opportunities/](https://aws.amazon.com/blogs/aws/aws-deepracer-update-new-features-new-racing-opportunities/)

## AWS re:Invent 2019

[https://aws.amazon.com/blogs/aws/aws-launches-previews-at-reinvent-2019-tuesday-december-3rd/](https://aws.amazon.com/blogs/aws/aws-launches-previews-at-reinvent-2019-tuesday-december-3rd/)
Advent of Code - Day 2
Tags: java
Published: 2019-12-03 04:35:19

---
title: Advent of Code - Day 2
published: true
description: We solve the day 2 challenges for the Advent of Code.
tags: java
cover_image: https://thepracticaldev.s3.amazonaws.com/i/6pd94i8a9yn9x67hl8zl.png
---

{% youtube MDQ97NCzx4U %}

We solve the day 2 challenges for the Advent of Code.

Please follow me on twitter
http://twitter.com/kalaspuffar

Outro music: Sanaas Scylla
Angular 8 Custom Validator Tutorials
Published: 2019-12-03 09:16:49

---
title: Angular 8 Custom Validator Tutorials
published: true
date: 2019-12-03 04:06:47 UTC
tags: 
canonical_url: https://www.itsolutionstuff.com/post/how-to-create-custom-validators-in-angular-8example.html
---

Here i will guide you how to create custom form validator in angular 8 application you will learn to angular 8 custom validator example step by step we can simply write custom validation in angular 8 for reactive formCustom validation is a most important thing in programming language most of
How to Publish ASP.NET Core MVC/Web API application to Azure and Consume it using jQuery
Tags: netcore, webapi, azure, jquery
Published: 2019-12-03 03:56:08

In this [tutorial](https://github.com/patricksameerajayalath/AzureTutorials/blob/master/How%20to%20Publish%20ASP.NET%20Core%20MVC_Web%20API%20application%20to%20Azure%20and%20Consume%20it%20using%20jQuery.pdf) I’m going to show how to:

•	Create a SQL Database
•	Create a .Net Core Web API App and .Net Core Web App
•	Deploy Web API to Azure
•	Deploy Web App to Azure
•	Consume the Web API using jQuery



![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ieiyd63he4nvn8qx1ov5.jpg)


You can find the PDF version of this tutorial [here](https://github.com/patricksameerajayalath/AzureTutorials/blob/master/How%20to%20Publish%20ASP.NET%20Core%20MVC_Web%20API%20application%20to%20Azure%20and%20Consume%20it%20using%20jQuery.pdf).

You can find all my Azure/.Net tutorials [here](https://dev.to/patricksameerajayalath) and [here](http://sameerajayalath.blogspot.com/).

Enjoy !!
Megatypers Invitation Code
Tags: megatypersinvitationcode
Published: 2019-12-03 03:49:33

<a href=" https://megatypers-invitation-codes99.blogspot.com">megatyper invitation code</a>: ELEK (100% Active) Megatypers is a best data entry (captcha) website from where you can earn money by just captcha typing words you see on your screen. You can unlimited earn $(100-500)/ month from this website. They payment transfer on Monday. You can easily transfer. At least minimum payout is $3, pays via PayPal, Payza, Bitcoin, Perfect Money, and Western Union.
how to insert space in html ?
Published: 2019-12-03 03:24:55

some HTML space tag 

The HTML "br" tag denotes a line break, like a carriage return in a word processing program. You’d use it at the end of each line of an address, for example, to get the block format people are accustomed to seeing.

The "p" tag generates a paragraph break. It is applied to a section of text that is a block of text separated from nearby blocks of text by a blank space and/or first-line indent.

The "pre" tag is used with preformatted text. It instructs the browser that the text is to appear exactly as written in the HTML file including any spaces or blank lines. If you type five spaces inside "pre" tags you get five spaces on the website.character

The "nbsp" character creates a space that does not break into a new line. Two words that are separated by a non-breaking space always appear on the same line.

a live example is here 

<a href="https://w3codemasters.in/how-to-insert-space-in-html/"> HTML insert space</a>
Want to learn about workflows in Serverless? Check out my interview
Tags: serverless, fsharp, azure
Published: 2019-12-03 20:24:42

---
title: Want to learn about workflows in Serverless? Check out my interview
published: true
date: 2019-12-03 02:32:15 UTC
tags: serverless,fsharp,azure
canonical_url: https://www.aaron-powell.com/posts/2019-12-03-learn-about-serverless-workflows-on-sswtv/
---

At NDC Sydney I was invited by the [SSW.tv](https://ssw.tv) team to sit down with [Anthony Ison](https://anthonyison.com/) and chat about a topic that I'm really passionate about, using Durable Functions to create workflows.

You can check out the recording on YouTube, and my previous blog posts on the topic through my [`serverless`](https://www.aaron-powell.com/tags/serverless) tag.

{% youtube Rky82FF700Q %}
My Time Management Tool
Published: 2019-12-03 02:26:46

It is obvious that time is a great asset. Once lost can't be retrieved the same again. So it is crucial to manage your time. And being a person working on Software Development Industry, we have to deliver the products on time i.e. following DEADLINES is most.  One day, while surfing through the internet, I came to know about Pomodoro Technique and decided to give it a try. Let me explain what this technique is: It is a time management method developed by Francesco Cirillo in the late 80s. This method basically breaks the time in small chunks of 25 minutes followed by a break of 5 minutes. Each interval is known as Pomodoro. The word Pomodoro came from a tomato-shaped timer that he used to track his time as a university student. The core process of this technique is divided into six small steps:

1)    Choose a task that you want to get accomplished.
2)    Set the timer to the length of 25 minutes.
3)    Work on the task without any distraction for this set time.
4)    When time is up, Pomodoro will ring and then put a checkmark on a paper.
5)    Take a short break for 5 minutes.
6)    Every four pomodoros take a longer break.

Here, longer break refers to the time length ranging from 15 to 30 minutes. Grab a cup of coffee, go for a short walk, meditate or do anything that refuels energy to your body for another 25 minutes. It’s a basic yet highly productive tool who wants to use their time in a great way.

 But one thing to remember, if you don’t complete a Pomodoro then you have to set the timer to 25 minutes again. This is the penalty that you have to pay if you don’t complete the Pomodoro.

Why should you use it?

1)    It encourages to focus on some important tasks for a short period hence increases productivity.

2)    Rather than thinking we have endless time, it makes us think we only have 25 minutes to get the task completed.
 
3)    We can keep track of our invested time on certain tasks.

How to get started?

To keep track of your time, you can use following web apps:

1)    Tomato timer: I have been using this since I knew about the Pomodoro technique. It’s a neat and clean web-app with a sleek interface. You can give it a try.

2)    Marinara timer: It is another timer that has more variations than the tomato timer. It has a Pomodoro timer, Custom timer, and Kitchen timer. The timer set in here can be customized according to your need. Feel free to try this.
Bye bye, Medium! Hello, Jekyll 4.0! 👋🏼
Tags: jekyll
Published: 2019-12-03 03:40:41

---
title: Bye bye, Medium! Hello, Jekyll 4.0! 👋🏼
published: true
date: 2019-12-03 02:25:00 UTC
tags: jekyll
canonical_url: https://etagwerker.com/bye-bye-medium.html
---

This year Medium decided to [implement a paywall](https://techcrunch.com/2019/02/27/medium-twitter-paywall/) with all their content (meaning my content, and your content, and anyone’s content published in their platform)

When that happened I thought it was a good idea to leave their platform and use [Jekyll](https://jekyllrb.com/) instead. It took me almost 10 months to finally move away from Medium! This Thanksgiving break was a good time to spend a few hours migrating my content to Jekyll + [GitHub Pages](https://pages.github.com/).

Here is how I did it:

<!--more-->

1. I started with [FastRuby.io](https://fastruby.io)’s blog’s source code (which is [open source](https://github.com/fastruby/blog)). Then I followed the instructions in this article: [https://hackernoon.com/medium-2-md-convert-medium-posts-to-markdown-with-front-matter-c044e02c3cbb](https://hackernoon.com/medium-2-md-convert-medium-posts-to-markdown-with-front-matter-c044e02c3cbb)

2. I tweaked some of the content and file names. I had to massively edit file names so that Jekyll could figure out that it had to generate HTML pages for them.

3. I migrated from Jekyll 3.0 to 4.0. Fortunately the migration was quite easy! You can see all the changes over here: [https://github.com/etagwerker/etagwerker.com/pull/1/files](https://github.com/etagwerker/etagwerker.com/pull/1/files)

4. I implemented [Hyde](https://github.com/poole/hyde) and tweaked a few details to find a look & feel that I liked.

5. I configured [Route 53](https://aws.amazon.com/route53/) and [GitHub](https://github.com) to [serve the domain without `www`](https://help.github.com/en/github/working-with-github-pages/about-custom-domains-and-github-pages#using-an-apex-domain-for-your-github-pages-site). The nice thing about GitHub Pages is that it is simple, easy, and free for open source projects.

![GitHub's Pages DNS Settings](https://etagwerker.com/assets/images/github-pages-configuration-dns.png)

Here is the end result!

![Screenshot of etagwerker.com using Jekyll + Hyde (Poole)](https://etagwerker.com/assets/images/jekyll-end-result.png)

If you are thinking about migrating away from Medium, Jekyll is a great alternative to have full control of your platform and content! ❤️

PS: And if you want to take advantage of a great, developer-focused platform, you can cross-post all your articles to DEV! You just need to set up the right settings in your profile:

![Screenshot for RSS import settings in dev.to](https://thepracticaldev.s3.amazonaws.com/i/ixluozr33jpwiryphdsp.png)
Protip - return from exceptional conditions early
Tags: protip, react
Published: 2019-12-03 02:04:24

---
title: Protip - return from exceptional conditions early
tags: protip,react
published: true
---

This article was originally posted on [nicholascloud.com](https://www.nicholascloud.com/2019/11/protip-return-from-exceptional-conditions-early/).

---

During a recent code interview, I noticed a React component with a render method written in the following (abbreviated) form,

```jsx
render() {
  return this.state.items.length > 0 ? (
    <ComponentWithLotsOfProps
      prop1={}
      prop2={}
      propN={}
      ...
    />
  ) : (
    ''
  );
}
```

where `ComponentWithLotsOfProps` had at least a dozen props, some of which were not simple primitive values. 

While there is nothing *technically* wrong with this render method, it could be better. It suffers from a few deficiencies.

First, ternaries are objectively difficult to read when they are not *short*. It is difficult to grok what the method actually produces because the whole ternary is returned, requiring the reader to do double work to find the "implicit" returns (there are two) rather than looking for the easily identifiable `return` keyword.

Second, one must read the entire method to know what gets returned if there are no items in state. Is it a component? Is it `null`? Is it an empty string? That is unknown until the whole method has been read.

Third, if additional conditions are required in future work to determine what will be rendered, they cannot easily be introduced in this method.

A better alternative is to omit the ternary, and explicitly return the *exceptional* condition values first.

```jsx
render() {
  if (this.state.items.length === 0) {
    return '';
  }

  return (
    <ComponentWithLotsOfProps
      prop1={}
      prop2={}
      propN={}
      ...
    />
  );
}
```

Due to reduced nesting, this is far easier to read, and return values are also easily identifiable. If additional conditions must be evaluated in the future, modifying this method becomes much simpler:

```jsx
render() {
  if (this.state.items.length === 0) {
    return '';
  }

  if (this.state.items.length == 1) {
    return (<SingleItemComponent item={this.state.items[0]} />);
  }

  return (
    <ComponentWithLotsOfProps
      prop1={}
      prop2={}
      propN={}
      ...
    />
  );
}
```

As with most things in programming: the simpler, more explicit, the better.
Layering a docker image
Tags: docker, devops, go, kubernetes
Published: 2019-12-03 01:47:28

# Introduction

{% youtube II4PFe9BbmE %}

I’ve been a fan of [immutable infrastructure](https://www.digitalocean.com/community/tutorials/what-is-immutable-infrastructure) ever since I used tools like [Terraform](https://www.terraform.io/) and [Packer](https://www.packer.io/). I wouldn’t say I understood the pros of it right away, but with time spent managing deployment of services in high traffic environments, one sort of understands the importance of being able to have an infrastructure which is scalable, predictable and can be recovered automatically. Who better to explain what immutable infrastructure is than Armon Dadgar himself?

## Image layering

![](https://miro.medium.com/max/900/1*kTDjPNUqGX8ZdLidbukheA.png)

If you go through [Section 2.3](http://docs.projectatomic.io/container-best-practices/#_image_types) of the book [container best practices](http://docs.projectatomic.io/container-best-practices/), they have a good section on various types of images. This brought back few of the steps I used to use previously on maintaining and building container images.

![Poor quick drawing credits: sketchpad.io](https://cdn-images-1.medium.com/max/7680/1*1qVJea7oq1rW6fNtvhLoaw.png)*Poor quick drawing credits: sketchpad.io*

### Base Layer

This base layer contains the operating system, core system tools, (eg: such as vim, bash, software-properties-common, curl, vim etc) and tools necessary to install packages and make updates to the image over time. The best example of such base layers are the [alpine images](https://hub.docker.com/_/alpine).

{% gist https://gist.github.com/arriqaaq/42eab427192abe69c8ae9a4c363da40c %}

### Dependency layer

Dependency image layers are where you would install the platform related dependencies (eg: such as Java runtime, mysql, Go, Erlang etc)

{% gist https://gist.github.com/arriqaaq/ba62abdd8608f3e08256808c9c2ecc83 %}

{% gist https://gist.github.com/arriqaaq/9cc948c0c57fcfa6dca49a80d1b809b3 %}

### Application layer

Application layer is where the dependencies specific to the container would go (eg: Database configurations, Go application code etc)

{% gist https://gist.github.com/arriqaaq/7b45fa6c3f6af95ad7105b107752d5ec %}

One can add the application specific endpoints here or add something like [dumb-init](https://engineeringblog.yelp.com/2016/01/dumb-init-an-init-for-docker.html).

What this helps us do is to reuse the layers at one specific stage and to use it for multiple purposes. Images being layered in this fashion will help break down large sized images into smaller images with well defined layers. It will help in faster builds, maintenance and also for reusing them as components.

## References

* [http://docs.projectatomic.io/container-best-practices/](http://docs.projectatomic.io/container-best-practices/)

* [https://tasdikrahman.me/2019/04/10/docker-rkt-containerd-container-image-structuring-for-container-runtimes/](https://tasdikrahman.me/2019/04/10/docker-rkt-containerd-container-image-structuring-for-container-runtimes/)

Please follow [TechLog](https://medium.com/techlog) for more.
Self created Laravel Link doesn't works
Tags: laravel, composerphp
Published: 2019-12-03 01:24:48



I installed laravel 6.0 through composer and tried to create own link as blog.laravel.com by changing vhosts file as

DocumentRoot "C:/xampp/htdocs" ServerName localhost

DocumentRoot "C:/xampp/htdocs/blog/public" ServerName blog.laravel.com

and C:\Windows\System32\drivers\etc\host file as

127.0.0.1 localhost 127.0.0.1 blog.laravel.com

but now instead of showing blog.laravel.com page my browser redirecting me to https://blog.laravel.com/dashboard/ page

What should I do?
Explore and Delete Files in vim
Tags: vim
Published: 2019-12-03 01:10:50

---
title: Explore and Delete Files in vim
published: true
description: 
tags: vim
---

Hello World! I'm back to talk to about my favorite editor.  

Did you know that you are not just restricted to editing in `vim`?  

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5l0i7sh15k3hodiohjfv.gif)

You can explore your current directory by hitting `:Ex`.  
This will show a list view of your files and you can navigate up (`j`) or down (`k`) with the usual methods.    

You can also delete a file by hitting: `SHIFT` + `D` and confirming with `y`.

To go back to editing, select the file and hit `ENTER`.
What are Props in React?
Tags: react
Published: 2019-12-03 00:43:57

Props are how we configure and customize our React Components.
They're just like function arguments because they **are** function arguments!

## How do we pass props to components?

Using JSX, we pass props as XML attributes:

```js
<Pokemon name="Bulbasaur" />
```

Keep in mind that JSX is turned into a `createElement` function call that looks like this:

```js
React.createElement(Pokemon, { name: "Bulbasaur" })
```

## How do we receive props?

Props are received by components as a function argument:

```jsx
function Pokemon(props) { /* ... */ }
```

`props` are *always* an object with all received attributes represented as key/value pairs.

In this case, `props` is an object with one key/value pair: `name: "Bulbasaur"`.

## How do we use props **in** components?

Using JSX, we use curly braces (`{}`) to interpolate expressions into our React Elements.

We can use object property access and call `props` with the key we'd like to access — `props.name`.

```jsx
function Pokemon(props) {
  return <h1>{props.name}</h1>
}
```

That's it!
Now you know how to use `props` in your custom React Components!


## Give it a try!

Open this CodeSandbox directly in your browser and send some props to the `Pokemon` component.
Show off your Pokemon knowledge and fill this component out with some HP, abilities, whatever you like!


{% codesandbox ygnk3 %}

---

Follow the 🧵 on Twitter:
{% twitter 1201594413350342657 %}

Subscribe on YouTube:
{% youtube diOW8heKqus %}
AUTHeNtication VS AUTHoriZation
Tags: codenewbie, security, auth
Published: 2019-12-03 00:35:16

I decided to write this small post up because I get AUTHeNtication and AUTHoriZyr ation confused a lot and want to help make it more clear for anyone else struggling.
<hr>

**Authentication** and **authorization** are two related words that are often used interchangeably, but mean different things and have very functionality within a system.


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

## Authentication (Auth-N)
_Authentication is the act of validating that users are who they claim to be._

Validating authenticity can be accomplished by having something physical like a key card, by having a user login with passwords or 2FA, utilizing Captcha tests, or even biometrics for a user.

Authentication is used in conjunction with authorization usually as it is important to authenticate that a user is who they say they are before giving the authorization.
 

## Authorization (Auth-Z)
_Authorization is a process of giving a user permission to access a specific resource(s) or function(s)._ 

Authorization levels are the difference between a general user and an admin user. An admin user will have more abilities that a general user and it is important to authorize the rolls properly to ensure general users don't accidently, or intentionally, harm a system.



Keep in mind that authentication is not 100% needed to gain authorization. This depends on the system and what information/abilities the systems has if it needs different levels of authorization and where authentication is needed. 

Think about a blogging platform... 
-Everyone should have access to read public posts. 
-Users should need to authenticate themselves as users to post a blog and not post as someone else.
-Admins should need a different level of authorization, after they authentication themselves, to monitor the platform, the associated database, and its users activity.
In this case authentication is needed before authorization is given to ensure users can't post a blog as a different user and users can't modify things like admins.

<hr>

Happy Hacking
![](https://media.giphy.com/media/l3vRmVv5P01I5NDAA/giphy.gif)

#### References 
1. Security+ cert book
2. Web Application Hackers Handbook
3. https://auth0.com/docs/authorization/concepts/authz-and-authn
4. https://www.ssl2buy.com/wiki/authentication-vs-authorization-whats-the-difference


###### Please Note that I am still learning. If something that I have stated is incorrect please let me know. I would love to learn more about what I may not understand fully.