teleren/devto huggingface dataset:
NUXT.js using Prettier/ESlint with standardJS rule set
Tags: eslint, prettier, nuxt, vscode
Published: 2020-08-04 20:59:06

I lost some hair setting this one up correctly.
So i want to share my "vscode nuxt prettier eslint standardJS config" with you.

Assuming you have a fresh install of nuxt like:
```
npx create-nuxt-app EsLintTest

cd EsLintTest

yarn add -D prettier-standard
yarn add -D eslint-config-standard eslint-plugin-standard eslint-plugin-promise eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-config-prettier prettier-config-standard eslint-config-prettier-standard
```

Inside your eslintrc.js extend:
eslintrc.js
```
extends: [
    ...
    'prettier-standard'
  ],
```

Enable eslint on save inside vscode like:
.vscode/settings.json
```
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
```

Enjoy.

Thanks to:
https://github.com/sheerun/prettier-standard
https://github.com/npetruzzelli/eslint-config-prettier-standard
Weird Unicode Behaviors 
Tags: unicode, testing, security
Published: 2020-08-04 20:40:58

So you know about Unicode codepoint and encoding (UTF-8, UTF-16), but are you aware that few standard conversions have surprising outcomes? In this short post, I'll list some of the most surprising behaviors.

## Case Mapping

Case mapping is the behavior behind the uppercase and lowercase functions in your favorite language. Unexpected behaviors can sometimes lead to bugs, some of them affecting software security. 

While the strings `“go\u017Fecure”` and `“gosecure”` are not equal, a code that applies the uppercase transformation to both strings could mistakenly interpret both strings as being equal.

Here is a demonstration in Python.
```python
>>> "GO\u017FECURE" == "GOSECURE"
False
>>> "GO\u017FECURE".upper() == "GOSECURE"
True

```
The same behavior applies to Java
```java
>>>"ADM\u0131N".toUpperCase().equals("ADMIN")
$1 ==> true
```

This behavior occurs because the characters `ı (U+0131)` and `ſ (U+017F)` are converted to an ASCII characters as part of Unicode specification. Aside from a few exceptions, you can assume that your language apply these transformation by default.

## Normalization

The purpose of normalization is to simplify expressions to allow matching equal or equivalent “meaning”.

Here is a demonstration using normalization functions in Ruby. The five unicode characters become six unicode characters (ASCII only).
```ruby
irb(main):003:0> "\u216E\u32CE\uFF0E\u209C\u2134".unicode_normalize(:nfkc)
=> "DeV.to"
```

API can sometimes hide those transformations. For example in C#, the class Uri normalize the hostname from URI entered.
```csharp
> Console.Write(new Uri("https://faceboo\u212A.com").Host == "facebook.com");
True
```

Here is a [list of APIs with such behavior (see Section **Auditing Source Code**)](https://www.gosecure.net/blog/2020/08/04/unicode-for-security-professionals/).

## Testing your application

If you have an application that susceptible to issues related to Unicode, you can use [this simple cheat sheet](https://gosecure.github.io/unicode-pentester-cheatsheet/).
This cheat sheet can be used by developers to build regression test cases to make sure no characters are being misinterpreted.

![Unicode Cheat sheet](https://dev-to-uploads.s3.amazonaws.com/i/wlbocnjj5ong7hg41z2l.png)


-------------------------------------------------

If you are curious, you can read the [full article](https://www.gosecure.net/blog/2020/08/04/unicode-for-security-professionals/) with a security focus.
A quick guide to Extreme Programming (XP)(Agile development)
Tags: agile, todayilearned
Published: 2020-08-04 20:34:46

## What is Extreme Programming?

* A set of principles in agile software development that aims to help developers produce higher quality code. 
* It is said that the name comes from encouraging teams to perform these essential practises to the best of their ability, almost to the *extreme*.

## When would you employ these principles?

XP and agile software development is typically applied in a team environment (although there is nothing suggesting you can’t apply some/all of these practises to your own individual processes). 

Specific examples of when you should employ XP principles include: 

* When dynamically changing software requirements
* When there is the potential for risks caused by fixed time projects using new technology
* When you are part of a small, co-located extended development team
* When the technology you are using allows for automated unit and functional tests


## The five principles (or values as they are sometimes called) are:

### Communication 

![Communication Gif](https://media.giphy.com/media/Y4bvZnhDzt5VRQn7f5/giphy.gif)

This principle stresses the importance of communication to transfer knowledge from one team member to the rest of the team. 

XP stresses that communication should, in the best case scenario, be face to face, with the aid of a white board or other drawing mechanism. This could be in the form of retrospectives and stand ups 

### Simplicity 

![Simplicity Gif](https://media.giphy.com/media/3OvvA11fPUvfYRFjxS/giphy.gif)

This is all about addressing the requirements that you need to. Keep the design of the system as easy to maintain and support as possible. 

In other words, you should keep in mind “What is the simplest thing that will work?” 

### Feedback 

![Feedback Gif](https://media.giphy.com/media/Ca5Dk7CaI6BBC/giphy.gif)

In order to identify areas for improvement and revise practises, both in the product and the team, constant feedback is necessary. 

In this sense, feedback is though two support the simplicity principle and help keep your design as simple as possible. 

### Courage 

![Courage Gif](https://media.giphy.com/media/gbgJ5rRrLXltK/giphy.gif)

This is all about having the confidence to raise issues to the team, try something else when something isn’t going right and accept and act on constructive feedback, even when it can be difficult. 

### Respect
![Respect Gif](https://media.giphy.com/media/yCAoGdVUCW5LW/giphy.gif)

Lastly, and in my opinion the most important one is respect. In order to do all of the above, you need to respect one another. 

Respect your team members enough to:

* Communicate with them 
* Give them feedback and accept the feedback you are given
* Work together to design in the simplest way

___________________________________________________________

I hope this was an informative guide to extreme programming in agile development. 

Check out these links for more information: 
* https://www.altexsoft.com/blog/business/extreme-programming-values-principles-and-practices/
* https://www.agilealliance.org/glossary/xp/
Change Header Color when Scroll your page.
Tags: html, css, javascript, tutorial
Published: 2020-08-04 20:32:43

Hi Dev friends!
🙋

I want to write a small tutorial trick for change color of your fixed header when scroll your HTML page: it's simple and it's a nice view!

###HTML: 📖
First of all create your classic header section:

```html

<header>
   <div id="container-header">
      <h1> THIS IS MY HEADER </h1>
   </div>
</header>

<main>
   <div id="container-main">
     <h1> THIS IS MY BODY </h1>
   </div>
</main>

```

###CSS: 💅
Create your style, and add a class (in this case ".change-color", and i added a border bottom) for change color of your header when will scroll the page.

```css
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header */

#container-header {
    height: 70px;
    width: 100vw;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

/* Add this class when scroll page */

.change-color {
    border-bottom: 0.5px solid #EDEDED;
}

/* Main */

#container-main {
    width: 100vw;
    height: 1100px;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}


```

###jQuery: 🕺
Activate your class when scroll the page when is > 30, and remove this when is < 30.

```javascript
$(document).on('scroll', function(){
    if ( $(window).scrollTop() > 30) {
        $('#container-header').addClass('change-color');
    } else {
        $('#container-header').removeClass('change-color');
    }
});

```

Thank's for reading!
[Filebeat] how to combine "and" and "not" conditions
Tags: devops, filebeat, kubernetes
Published: 2020-08-04 20:32:08

Let's say you ended up on the official documentation page for conditions that you can use with [processors](https://www.elastic.co/guide/en/beats/filebeat/current/defining-processors.html#conditions) and you want to use both "and" & "not" keywords at the same time, but it's not as easy as it sounds regarding dashes and indentation. 

Here is a snippet that may help you, I use it to only push logs from **kube-system** namespace that belong to pod named **kube-dns** :

```
processors:
  - drop_event:
      when:
        and:
          - equals:
              kubernetes.namespace: "kube-system"
          - not.contains:
              kubernetes.pod.name: "kube-dns"
```

Hope it helps, do not hesitate in comments to let me know or suggest other tips.

Have a great day!
CoreLMS: Specs and Project Organization
Tags: dotnet, webdev, csharp, learning
Published: 2020-08-04 20:29:39

Let's get into the nitty-gritty.

Last week I kicked the project off with some design notes, listed my goals, got the brand spankin' new solution scaffolded, and started the first entity for my open source learning management system built on an ASP.Net Core / EF Core stack.

## Get the Git

{% github FitzyCodesThings/core-lms no-readme %}

## Watch the Vid

I'll detail the important bits below, but if you want to catch the whole (lightly edited) replay from the live stream, check it out here:

{% youtube KUHvtYaPeuE %}

## Basic Functionality Overview

I covered my goals for this as a learning project in the first post of the series:

{% link https://dev.to/fitzycodesthings/corelms-let-s-build-a-cleanish-solidish-lms-from-scratch-in-asp-net-core-34hh %}

Here's a bare-minimum list of the "things this thing should do:"

- Support both on-demand (pre-recorded) and live online courses
    - Both simple (single video) and complex (modules/lessons) on-demand course formats
    - Integration with Wistia for pre-recorded content   
    - Support embedding third-party video players for live content
    - Course progress tracking
        - Simple certificate issuance on completion
- E-commerce functionality including:
    - Store front and course catalog
    - Stripe integration for billing and payments
    - *Stretch:* integration with Zapier, possibly specific marketing solutions
- Administrative interface for management of content, students, orders, etc.

## What I Got Done This Week

- Scaffolded out the solution into the various "clean architecture"-style projects we'll be using:
    - **Core** for all common interfaces, entity definitions, common types, etc.
    - **Application** for internal business logic concerns
    - **Infrastructure** for external concerns (email services, etc.)
    - **Persistence** for managing storage concerns
    - **Tests** for... I'll give ya three guesses
    - **Web.MVC** for the primary web-based UI
- Started the first entity (Course) 
- Created first DB migration and tested the migration flow

## Wrapping Up

Didn't get a MASSIVE amount done on this first pass, but that's okay: thinking through things and organizing properly is *critical* to project success (not that I don't expect to reorganize along the way, too).

Next time, I'll be building out a few more basic entities, starting the first business logic service, and building the first unit test (in TDD fashion) for the project!

Join me [live on Twitch](https://twitch.tv/fitzycodesthings) on Wednesdays at 12pm Central / 5pm UTC to watch along and tell me how to fix things!

Until next time,
John / Fitzy
What is forwarding ref and how do you use it?
Tags: javascript, react, webdev
Published: 2020-08-04 20:07:27

Before reading this article, it is very important to familiarize yourself with `useRef` hook and `createRef` API. This has been covered in my earlier article [useRef hook and createRef API](https://dev.to/nibble0101/what-is-useref-hook-and-how-do-you-use-it-5emo).

`Ref` forwarding is a technique for automatically passing `ref` from a component to one of its children. According to [React documentation](https://reactjs.org/docs/forwarding-refs.html), this might not be necessary in most applications but might be useful for some kinds of components, especially in reusable component libraries. 

In the example below `App` renders `Form` component.
```javascript
export default function App() {
  const myRef = useRef();
  return (
    <div className="App">
       < Form ref = {myRef} />
    </div>
  );
}
```
If you want to reference a `DOM` element or a class component rendered by `Form` from `App`, you can pass a `ref` to `Form` component. `Form` is  wrapped in `forwardRef` so that it passes or forwards the `ref` to a `DOM` element or class component it renders.

```javascript
function Form(props, ref) {
  return (
    <form>
      <input type="text" placeholder="Name" />
      <input type="submit" ref={ref} />
    </form>
  );
}

export default React.forwardRef(Form);

```
`Form` takes two parameters. The first parameter is `props` and the second is `ref` passed to it from its parent Component `App`. It then forwards the `ref` to either a `DOM` element or a class component it renders which in the example above is the `input` element. Take note of how  `Form` has been wrapped in `forwardRef`. The second parameter to `Form`, `ref`, only exists if you wrap it inside `forwardRef`and `ref` JSX attribute has been passed to it from its parent component. The above example can also be written as:
```javascript
export default React.forwardRef(function Form(props, ref) {
  return (
    <form>
      <input type="text" placeholder="Name" />
      <input type="submit" ref={ref} />
    </form>
  );
});

```
The parent component `App` then references` <input type="submit" />` via `myRef`'s `current` property. 

That is a brief summary of how `forwardRef` is used. 

Thanks for reading this article till the end. If you find anything technically inaccurate, please leave a comment below. You can also share it on [twitter](https://twitter.com/login?lang=en-gb) if you find it useful. Someone might find it useful too.

## Reference

[React documentation](https://reactjs.org/docs/forwarding-refs.html)
Starting a React Project with create-react-app
Tags: react
Published: 2022-02-01 13:55:31

---
title: Starting a React Project with create-react-app
published: true
date: 2020-08-04 20:05:52 UTC
tags: react
cover_image: https://cdn.hashnode.com/res/hashnode/image/upload/v1596571659435/pmDYSZLdO.png
canonical_url: https://sabinadams.hashnode.dev/starting-a-react-project-with-create-react-app
---

Setting up a React project used to be such a pain! Between gathering dependencies, setting up build processes and putting together configuration files, just stepping in to the world of React was a daunting task.

Fortunately, that is no longer the case!

Using Facebook's library, `create-react-app`, you can have a project up and ready to go in minutes!

* * *

## Installation

If you don't already have node/npm installed, make sure to go [here](https://nodejs.org) to download and run the installer.

Run the following command in your terminal to install `create-react-app`:

```
npm install -g create-react-app

```

You can verify the installation by checking the version you installed (3.1.1 in my case):

```
create-react-app -V 
> 3.1.1

```

`create-react-app` is installed! Now we can get started.

* * *

## Creating an app

To get started, run this command to generate the boilerplate project:

```
 npx create-react-app <name-your-project>

```

This will generate a boilerplate project in a folder with the given project name. You should see output as the CLI generates the project and installs all the required dependencies.

At the very end of the output you will see a list of available commands:

![cra-commands.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1596571220390/9nzz2NNnx.png)_You may notice `yarn` is used as the default package manager instead of `npm`. `yarn` is used by default if installed but `npm` works as well!_

* * *

## Running the project

Following the directions provided by the output above, move into the generated folder and run the start command:

```
cd <project-name>
npm start

```

This will serve the project to `http://localhost:3000` and automatically opens the window in your default browser.

Viola! Your React project is up and running. Not too bad, huh?

By default this process watches for file changes and will automatically re-compile and reload the page in your browser, so now all that remains is for you to start coding that application!

* * *

## Conclusion

As you can see, `create-react-app` does a great job at simplifying the setup for a React project so you can get to what you really want to be doing, coding an awesome React application!

There are other commands and configurations available for `create-react-app`. If you would like to learn more about what it has to offer, such as generating a production build, visit their [website](https://create-react-app.dev/) and check out the documentation.

Thanks for the read! Now go build something awesome!
AzureFunBytes Short - @Azure Storage
Tags: beginners, azure, storage, cloud
Published: 2020-08-04 19:56:23

AzureFunBytes - A Twitch show on how to use all the fundamentals that are Microsoft Azure.

This time we talk about storage options on Azure!

{% youtube 75IKxdomFoY %}

Follow AzureFunBytes on Twitter - https://twitter.com/azurefunbytes and Twitch - https://www.twitch.tv/azurefunbytes for updates on future episodes.

Links for you!

Introduction to the core Azure Storage services - https://cda.ms/1k4
What is Azure Blob storage? - https://cda.ms/1k5
Introduction to Azure managed disks - https://cda.ms/1k6
Use the portal to attach a data disk to a Linux VM - https://cda.ms/1k7
Microsoft Learn: Core Cloud Services - Azure data storage options - https://cda.ms/1k8
Microsoft Learn: Azure Fundamentals - https://cda.ms/1kb
Microsoft LearnTV - https://cda.ms/1kc 
Get $200 in free Azure credit along with 12 months of free services - https://cda.ms/1k9
Hosting Angular App to GitHub Pages for Free
Tags: angular, github, webdev, tutorial
Published: 2020-08-04 19:49:08

## **Introduction**
> This is my very first article on dev.to and i would truly appreciate your valuable suggestions and feedback.

In this article i am going to share with you my learning while i was deploying my portfolio website to GitHub pages and also i will give you some of the other articles to go through if you foresee any  difficulties with my way of deploying the app.

#### **Heads up**
Before you start deploying your app, make sure to have your GitHub repo as public in order to opt for free hosting service. GitHub does charge if you do want to host your app that is private.

## **Getting started**
Assuming that you have already built a beautiful app and waiting for it to kick off and deploy. If that is not the case and you need to know how to get started with building angular app please go ahead and refer the angular [documentation](https://angular.io/docs).

To get started with, here is an another [article](https://dzone.com/articles/deploy-angular-app-on-github-pages) which explains you about one of the ways of deploying your App to GitHub pages. If this works for you i am happy for you and you do not have to come back here. 😉

But if you still want to know the other alternatives or if the above method did not work out for you , please continue reading further. Personally i found the below method pretty cool and easy to manage later stages.

Now here is the thing, once you have all your app ready, install this package called `angular-cli-ghpages` by using below command in your Angular CLI.
```
npm install -g angular-cli-ghpages
```

once you have installed this package globally, the very next step is to build your project with production flag and set the correct base href address.

```
ng build --prod --base-href "https://username.github.io/"
```

if you are confused with the base-href address that's okay. you can always change that to whatever works out for you later on.

If you are working on Angular6+ then make sure to set your outputpath from `dist/[PROJECTNAME]` to `dist/`.This is because Angular 6 changed angular.json's `"outputPath": "dist/"` into `"outputPath": "dist/[PROJECTNAME]"`, which placed everything in the dist folder in a sub folder. if this is not changes then it might break **ngh's** functionality.

## **Hosting**
Now just run the below command to start deploying your app to github pages.
```
ngh
```
and your app will be hosted at `https://username.github.io/`.

You can optionally add a message to the commit when deploying:

```
ngh --message="First deploy"
```
You can also specify which branch to deploy:

```
ngh --branch=master
```
And finally, you can always do a dry run before actually deploying to see the output:

```
ngh --dry-run
```
That’s wrap 🙂. I hope you have understood how easy it is to deploy your app/project over GitHub.

> *If you find this useful please help others by spreading the word*.😊
Do You Use Python For Anything Besides Data Science?
Tags: discuss, python
Published: 2020-08-04 19:36:02

I am curious if Python is still seeing use in enterprise application development. Do you use Python (professionally or otherwise) for anything outside of the following areas:
* Data Science (like heavy statistics work)
* AI/ML
* NLP

I know you *can* do other stuff in Python, but *do* you?
What is semantic HTML5?
Tags: html, discuss
Published: 2020-08-04 19:34:25

If you know a little bit of HTML, you'll know that HTML tags are (mostly) used to format the content - these tags tell the browser how to display the content on the page. They do not give an indication of the type of content they contain or what role the content plays on the page.

Semantic HTML5 addresses this shortcoming by defining specific tags to clearly indicate what role the content these tags play. This explicit information helps robots / crawlers like Google to better understand which content is important, which is a subsidiary, which is navigation and so on.

For blind or visually impaired users who rely on screen readers to verbally describe what is on a page, proper use of HTML5 semantic elements will allow screen readers to communicate their content more accurately, making the visual audible. It is essential to adopt this latest version of HTML so that you can make your content accessible to all possible site visitors.

Example of non-semantic tags:
```html
<div> <span>
```
Example of semantic tags:
```html
<header> <footer> <nav> <article> <main> <section>
```
Computer science students: do you have classes about tools?
Tags: discuss, computerscience, students
Published: 2020-08-04 19:24:11

I'm talking about things like version control, the command line, IDEs, etc.
Things that are wonderfully explained in the following MIT course, "The Missing Semester of your CS Education"
https://missing.csail.mit.edu/

And I'm wondering, since I got out of school in 2004 and such classes weren't in the cursus: is it still the case? And is there a difference between "classic" schools and bootcamps?