teleren/devto huggingface dataset:
Use Angular CLI to serve https locally 
Tags: angular, linux, javascript, tutorial
Published: 2020-11-25 06:20:10

Developing an angular application with HTTPS is useful, this is a guide outlining how to do it in a Linux environment.

### Perquisites

- angular-cli
- [mkcert](https://github.com/FiloSottile/mkcert)

### Setup

Initialize an angular application by running `ng new https-dev` in your terminal. Once the application is generated, change directory into it and create a folder called `ssl` . This will contain the certificates needed. 

![Untitled(1)](https://dev-to-uploads.s3.amazonaws.com/i/68lhm8znf2yzisa88hbj.png)

Optionally you can edit `.gitignore` to ignore this folder, preventing it from being committed.

### Using mkcert

There are instructions on the page to guide you through installing `mkcert` regardless of your OS. With mkcert installed, run `mkcert -install` to generate a local Certificate Authority (CA) and restart your browser to make sure it registers the newly generated CA. 

**Firefox**

Head to preferences and type in `certificates` in the search bar. Click on `View Certificates` and head to `Authorities` and locate `mkcert development CA`. 

![firefox-mkcert(1)](https://dev-to-uploads.s3.amazonaws.com/i/l4sf6ibnghr2itslbke8.jpg)
 
**Chrome**

Head to settings and type in `certificates` in the search bar. Scroll down to `Manage certificates` and head to `Authorities` and locate `org-mkcert development CA`. 

![chromemkcerts(1)](https://dev-to-uploads.s3.amazonaws.com/i/oyjg1qf7b8pblpu035hp.jpg)

### Generating certificates

At the root of your project, run the following command:

```bash
$ mkcert -cert-file <folder/filename.pem> -key-file <folder/filename.pem> <space delimeted domain>
$ mkcert -cert-file ssl/local-cert.pem -key-file ssl/local-key.pem localhost 127.0.0.1 192.168.1.109 172.18.0.1 ::1 

Created a new certificate valid for the following names 📜
 - "localhost"
 - "127.0.0.1"
 - "192.168.1.109"
 - "localhost"
 - "172.18.0.1"
 - "::1"

The certificate is at "./ssl/local-cert.pem" and the key at ".ssl/local-key.pem" ✅
```
![localssleedy(1)](https://dev-to-uploads.s3.amazonaws.com/i/h8atnu7r102ex21agzif.jpg)

### Development with https

To use the certificate we generated, use the following:

```bash
$ ng serve --ssl <boolean> --ssl-cert <path-to-cert> --ssl-key <path-to-key>
$ ng serve --ssl true --ssl-cert ./ssl/local-cert.pem --ssl-key ./ssl/local-key.pem
```

After the application is being served, check your address bar for the padlock. Indicating that [localhost](http://localhost) has https

![Untitled(2)](https://dev-to-uploads.s3.amazonaws.com/i/2lt2bb3vez4v8u45eas3.png)

Thank you for reading!!
JavaScript every() method
Tags: javascript
Published: 2020-11-25 05:52:34

Yesterday we had a look at the [JavaScript `some()` method](https://daily-dev-tips.com/posts/javascript-some-method/
), and today we will focus on its brother `every()`.

The main difference between the two:

- `some()`: If at least one matches
- `every()`: All must match!

Both of them will give us a boolean value back.

## Using the Javascript every() method

Let's start by creating an array of items.

```js
const items = [
  { name: 'T-shirt plain', price: 9 },
  { name: 'T-shirt print', price: 20 },
  { name: 'Jeans', price: 30 },
  { name: 'Cap', price: 5 }
];
```

Let's say we want to check if all the items have a name.

```js
const haveNames = items.every(item => {
  return item.name;
});

// Returns true
```

If we now remove the name on our item, it will return false.

Let's take a more accurate example.
We have a list of users, with temperatures, we want to see if everyone is under 37.8, else someone potentially has a risk of Covid-19.

```js
const users = [
  { name: 'Bob', temperature: 36.3 },
  { name: 'Sarah', temperature: 37.9 },
  { name: 'Billy', temperature: 36.9 },
];

const temperature = users.every(user => {
  return user.temperature < 37.8;
});

// Returns false
```

Whoops! Sarah has a high temperature, so now we get a false back, this means we need to do something.

I hope this shows how one line can beat an array to loop over people.

The syntax for every is as follows:

```js
const new = original.every(function(value));
```

Inside our function, we can check on certain properties the value has.

And remember:

![Stay safe](https://media.giphy.com/media/3o72EU6W6bOv2mKw0g/giphy.gif)

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
VSCode task, to give a option to name a file.
Tags: vscode, javascript, json, react
Published: 2020-11-25 05:40:43

How do you create a terminal/console, “question/ prompt” to name a file? Like Test.JS? I have a task setup to create a folder and JS file, but I have to rename it after, so how do I add a “question” of what to name it?
JavaScript Code Daily Challenge #4
Tags: javascript, challenge, codenewbie, beginners
Published: 2020-11-25 05:30:58

# **About**

This is a series of JavaScript Code Daily Challenge. Each day I show a few solutions written in JavaScript. The questions are from coding practice/contest sites such as HackerRank, LeetCode, Codeforces, Atcoder and etc.

> Functions
> [https://www.hackerrank.com/challenges/js10-function/problem](https://www.hackerrank.com/challenges/js10-function/problem)
```javascript
'use strict';

process.stdin.resume();
process.stdin.setEncoding('utf-8');

let inputString = '';
let currentLine = 0;

process.stdin.on('data', inputStdin => {
    inputString += inputStdin;
});

process.stdin.on('end', _ => {
    inputString = inputString.trim().split('\n').map(string => {
        return string.trim();
    });
    
    main();    
});

function readLine() {
    return inputString[currentLine++];
}
```
> Create function in comment
```javascript
/*
 * Create the function factorial here
 */
```
```javascript
function main() {
    const n = +(readLine());
    
    console.log(factorial(n));
}
```
Image with rounded Corners in Flutter
Tags: flutter
Published: 2020-11-25 01:56:16

Recently I was trying to build a Card with **rounded corners** in Flutter.
Inside it, there was an Image.  Just Like this.
![The Widget we want to build](https://dev-to-uploads.s3.amazonaws.com/i/nbgq8xzxvjizhux2yonp.png)

My first attempt was to put our Image inside a container with a radius.
So did I, and the result was not satisfying.

```dart
Container(
      height: 200,
        width: 350,
      decoration: (BoxDecoration(
        borderRadius: BorderRadius.circular(45),
      )),
      child: Image(
        fit: BoxFit.cover,
        image: NetworkImage(
            'https://images.unsplash.com/photo-1526749837599-b4eba9fd855e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'),
      ),
    )
```

The above Code gave me this.

![image inside rounded container](https://dev-to-uploads.s3.amazonaws.com/i/oidsw71ddspuv2fid9f9.png)
:cry:  
clearly, this is not the result we want.

After a fair time of Googling, I found the solution.
It was to use **ClipRRect** instead of **Container**.

So the code,

```dart
ClipRRect(
      borderRadius: BorderRadius.circular(45),
      child: Image(
        height: 200,
        width: 350,
        fit: BoxFit.cover,
        image: NetworkImage(
            'https://images.unsplash.com/photo-1526749837599-b4eba9fd855e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80'),
      ),
    )
```

will give us this.
![image inside ClipRRect](https://dev-to-uploads.s3.amazonaws.com/i/eb3gh9xvvgslokivboib.png)

And that's the result we were hunting. :smile:
ReactJs Step by Step working with Axios - Demo at jsondev.org
Tags: react, axios, parsejsontojava, parsejsontokotkin
Published: 2020-11-25 03:56:40

Today we learn how to use axios to query json in ReactIs. In this article I provide some basic code samples you have an initial approach to axios.

###Install axios:
`npm install — save axios`

###The basic parameters:

```
url: Path to access the json data you want to be.  
headers: headers request For example 'Content-type', 'Authorization', 'Accept' … params: The query parameters on the url.  
data: The data you want to put in the query  
method: The method of query data. For example POST, GET, PUT … 
```
###Getting start with axios:
Step 1: Import library using axios
`import axios from 'axios';`

Step 2: Declare config

```
let url = http://jsondev.org/jsondemo  
let config = {  
    method: 'GET',  
    url: this.state.url_test,  
    headers: headers,  
    params: params,  
    data: data  
};  
```

Step 3: Create a code using the query axios

```
axios(config)  
    .then(function (response) {  
        console.log('Send REST Api result: ');  
        let dataResponse = response.data;  
        if (dataResponse != null) {  
            console.log(dataResponse);  
        }  
    })  
    .catch(function (error) {  
        console.log('error request api');  
        console.log('NetworkStatus: ' + error.toString());  
  
        console.log(error.response);  
        let jsonCallBack = {  
            data: error.toString(),  
            status: 0  
        }  
        component.props.parentCallback(jsonCallBack);  
        let statusText ='';  
        try {  
            statusText = error.response.statusText;  
        }catch (e) {  
  
        }  
        console.log(error.toString() + ".\n" + statusText);  
    });  
```

###Conclusion:

The article is just the first step for anyone new to learning about Reactjs and axios. Thank you for reading and sharing.

###Demo:
http://jsondev.org/

###Source codes:
https://github.com/xuanqh/jsoneditoronline.git
Customizing Webpack for react apps
Published: 2020-11-25 03:52:26

# If you have any of the following question this post might be helpful.

1. How to override default `webpack` config of react apps created with `create-react-app`?
2. How to modify default `eslint` rules/config of react apps?
3. How to add additional `webpack` plugins to react apps?
4. How to use custom eslint file when running react apps?

# Solution : `eject`

### Run `npm run eject` or `yarn eject`.
react-scripts will warn you, simply ignore 😇.

After this process completes CRA (create-react-app) will eject all configs and scripts
There will be 2 new folders in the root of the project
```
/config
..env.js
..getHttpsConfig.js
..modules.js
..paths.js
..pnpTs.js
..webpack.config.js   <----------- webpack config file
..webpackDevServer.config.js
../jest

/scripts
..build.js
..start.js
..test.js
```

There you go, modify the `webpack.config.js` files as you wish.  Questions 1 and 3 are solved.
For Q2 and 4 you don't have to do anything, once we eject all the configs `webpack` will automatically use `eslint` files in the project root.
S2E6 Learn JMeter Series - JSON Extractor
Tags: performance, webperf, testing, tutorial
Published: 2020-11-25 03:40:59

Welcome to Learn JMeter Series!

In this season two, episode six, you will learn following:

🔹 Regular Expression Extractor in JMeter

{% youtube VhNyO1tBVzs %}

☑ Buy me a tea 🍵 : https://www.buymeacoffee.com/qainsights
☑ [My Blog](https://qainsights.com)
☑ [My Udemy Course](https://www.udemy.com/course/performance-testing-using-truweb)
Window Object in JavaScript
Tags: javascript, 100daysofcode, codenewbie, webdev
Published: 2020-11-25 03:22:48

The most important object in the **Browser Object Model** is the window object. 

It helps in accessing information about the browser and its components. To access these features, it has various methods and properties. 
<hr>
(Please scroll a bit below I don't know why this is happening. Use the  scroll bar plz.)

 <table>
  <tr>
    <th>Property</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>window.closed</td>
    <td>Whether the window has been closed</td>
  </tr>
  <tr>
    <td>window.length</td>
    <td>Number of `<iframe>` elements in the window</td>
  </tr>
 <tr>
    <td>window.name</td>
    <td>Gets or sets the window name</td>
  </tr>
 <tr>
    <td>window.innerHeight</td>
    <td>height of the window</td>
  </tr>
 <tr>
    <td>window.innerWidth</td>
    <td>width of the window</td>
  </tr>
 <tr>
    <td>window.screenX</td>
    <td>X-cordinate of the pointer, relative to the top left corner of screen</td>
  </tr>
<tr>
    <td>window.screenY</td>
    <td>Y-cordinate of the pointer, relative to the top left corner of screen</td>
  </tr>
<tr>
    <td>window.location</td>
    <td>current URL of window object</td>
  </tr>
<tr>
    <td>window.history</td>
    <td>Reference to history object for browser window or tab</td>
  </tr>
<tr>
    <td>window.screen</td>
    <td>Reference to object</td>
  </tr>
<tr>
    <td>window.pageXoffset</td>
    <td>Distance document has been scrolled horizantally</td>
  </tr>
<tr>
    <td>window.pageYoffset</td>
    <td>Distance document has been scrolled vertically</td>
  </tr>
<tr>
   <td>window.alert()</td>
   <td>creates dialog box with message OK button</td>
</tr>
<tr>
    <td>window.blur()</td>
    <td>Remove focus from window</td>
</tr>
<tr>
    <td>window.close()</td>
    <td>closes a browser window</td>
</tr>
<tr>
    <td>window.confirm()</td>
    <td>Creates dialog box with message, and OK button and a **cancel **button</td>
</tr>
<tr>
    <td>window.getComputedStyle()</td>
    <td>Get CSS styles applied to an element</td>
</tr>
<tr>
    <td>window.moveTo(x,y)</td>
    <td>Move a window's left and top edge to supplied coordinates</td>
</tr>
<tr>
    <td>window.open()</td>
    <td>Opens new browser window with URL specified as parameter</td>
</tr>
<tr>
    <td>window.print()</td>
    <td>Tells browser that user wants to print contents of current page</td>
</tr>
<tr>
    <td>window.prompt()</td>
    <td>Creates dialog box for retrieving user input</td>
</tr>
<tr>
    <td>windows.scrollBy()</td>
    <td>Scroll the document by the specified number of pixels</td>
</tr>
<tr>
    <td>windows.scrollTo()</td>
    <td>Scolls the document to the specified coordinates</td>
</tr>
<tr>
    <td>window.setInterval()</td>
    <td>Do something repeatedly at specified intervals</td>
</tr>
<tr>
    <td>windows.setTimeOut()</td>
    <td>Do something after a specified amount of time</td>
</tr>
<tr>
    <td>window.stop()</td>
    <td>Stop window from loading</td>
</tr>
</table> 

<hr>
Short and Informative Post for you all. 😀
⚡Happy Coding
OSX Terminal Must Haves
Tags: devops
Published: 2020-11-25 03:20:05

Having a really efficient CMD line is awesome. It can save you a lot of time. It’s good to take the time to set up a terminal that is intuitive and customized to you and your workflow.

With the right software, you can do things like autocomplete your GIT commands, Docker commands and more. This alone is worth it. But also, you get **DARK MODE!**

### Must Haves
[iTerm2](https://iterm2.com/) — Replace and make this your default Terminal NOW. check out all the [FEATURES!](https://iterm2.com/features.html)
[Oh My Zsh](https://github.com/ohmyzsh/ohmyzsh) — Steroids for your terminal. This gives us all the cool shit we need, like Autocomplete features, custom themes, and WAY MORE.
Go and install these two.

#### Docker/Git Auto complete
With iTerm2 and Oh My Zsh downloaded and installed, let’s add some plugins. Open your zsh profile, located in ~./.zshrc

edit the plugins section:

plugins=(
 git
 osx
 docker
 docker-compose
)
Now we get sweet autofill features. Here’s a list of hundreds of others:

such as minikube, node, and more!

#### Quick line jumps!
Are you a peasant that holds -> until they reach the end of the line? Well no more you aren’t!

You can setup iTerm2 to let you jump around the current line. Find the basics here to get you started:iTerm 2: How to set keyboard shortcuts to jump to beginning/end of line?I can see that Ctrl+ left/ right jumps to the beginning/end of line. How to change this to Cmd+ left/ right arrow? In…stackoverflow.com

#### Quick directory jumps!
A command line tool that helps you jump around to different directories using partial strings. Example:

[Click here for the plugin link](https://github.com/agkozak/zsh-z)

If you have more, email me or comment ! Thanks!

Props to my buddy [Rob Davis](https://www.linkedin.com/in/rob-davis/) who shared these tips with me
Firebase SSO?
Tags: webdev, devops, cloud
Published: 2020-11-25 03:16:43

Edit: I've figured out how to implement this with a middle proxy layer, you can watch it on [YouTube](https://www.youtube.com/watch?v=QJC3bb45UgE&ab_channel=SedkyAbou-Shamalah).  I'm leaving the rest of the article unedited as it's still quite accurate.

If you're here because you are trying to figure out how to use Firebase for SSO purposes, let me be the first to tell you:

**Firebase Authentication WAS NOT DESIGNED FOR SSO.**

Turns out that a Federated IdP is not the same thing as an IdP. Who would’ve thunk it ?

**HOWEVER**.  Can you build your own flows around it? Probably!

If you’ve worked with Firebase, you know it’s an amazing suite of products that allows you to rapidly prototype and build extremely scalable websites.

However, if you’re wondering if you can use Firebase Authentication for SSO, well, you can’t. Firebase Authentication is a federated IdP management system. It is the “client” in the OIDC/OAuth flow and for that reason, you can’t be a client in a client relationship.

There are tools that exist for this sort of thing, such as OneLogin, which are true SSO solutions. Firebase authentication is a good authentication tool for your websites, but it will not solve your SSO problems outside of that.

Interestingly enough, you can bypass Firebase and then use one of the underlying IdPs to SSO into platforms. For example, instead of using Google Login through Firebase, you could just use Google Login. Same with Facebook Login. These are true IdP solutions which implement OIDC and OAuth2 frameworks correctly. But when Firebase is in the middle, you cannot use them except to log into a web app you are building.
Code Smell 34 - Too Many Attributes
Tags: oop, codenewbie, programming
Published: 2020-11-25 03:07:56

*A class defines objects with lots of attributes.*

# Problems

- Low Cohesion

- Coupling

- Maintainability

- Readability

# Solutions

1. Find methods related to attributes.
2. Cluster these methods.
3. Break the object related to those clusters.
4. Find real objects related to this new objects and replace existing references.

# Examples

- DTOs

- Denormalized table rows

# Sample Code

## Wrong

{% gist https://gist.github.com/mcsee/b6c664aef3247af3bc48d19f3d47d20e %}

## Right

{% gist https://gist.github.com/mcsee/c34dd227f16b52772f8c4cfbb31841e8 %}

# Detection

Most linters warn when you declare too many attributes. Setting a good warning threshold should be easy.

# Tags

- primitive

# Conclusion

Bloated objects know too much and are very difficult to change due to cohesion.

Developers change these objects a lot, so they bring merge conflicts and are a common problems source.

# Relations

{% post https://dev.to/mcsee/code-smell-10-too-many-arguments-4o67 %}

# Credits

Photo by <a href="https://unsplash.com/@andasta">Andy Li</a> on <a href="https://unsplash.com/s/photos/container">Unsplash</a>

* * *

> So much complexity in software comes from trying to make one thing do two things.

_Ryan Singer_
n98 tools for Magento 2
Published: 2020-11-25 02:57:42


Install / set permission
From project root:
```
wget https://files.magerun.net/n98-magerun2.phar
chmod +x ./n98-magerun2.phar
sudo cp ./n98-magerun2.phar /usr/local/bin/
```

List of commands can be found via the following command.
```
php n98-magerun2.phar
```

Change password of admin
```
php n98-magerun2.phar admin:user:change-password
```

DB dump
```
php n98-magerun2.phar db:dump
```

Debug command line functions
```
export XDEBUG_CONFIG="idekey=PHPSTORM"
php n98-magerun2.phar setup:upgrade
```

```
php n98-magerun2.phar sys:cron:list
```
A bit about myself
Tags: cpp, python, unity3d, godot
Published: 2020-11-25 02:43:18

I'm kinda new to being part of online communities, and thus not really sure where to start, so I'll start with an introduction. Sup lol.

I'm a programmer, music producer, youtuber, and graphic artist who goes by the name Oasi.

Shortly following the acquisition of my first computer (the summer between freshman and sophomore year in highschool), came my first time programming. Well actually, my first program was on my phone a few months prior, but that's a bit irrelevant(at least to this post).

I've never been one to take baby steps, so I immediately downloaded Unity and tried to make some fully fledged open world first person shooter (to no avail, obviously lol). 

Realizing that there's a lot that goes into making video games and programming in general, I began to soak in as much knowledge as possible.

Skip to today, five years later, where I have only ever released one game. Not even an impressive one, I was really just trying to build up some momentum with finishing what I start. I've started lots of projects with cool ideas, but never really followed through on them, which I heard is actually really common. 

Currently, I'm working on a game in Godot that I originally planned on releasing at the beginning of 2021, however things aren't necessarily going as planned cuz life does that sometimes(-_-).

I think I can say that over the years I've become relatively proficient in python. It's really easy to get something up and going with just a couple hundred lines. But more importantly I've come to understand some of the deeper programming concepts that translate between languages. And with that, I'm trying to learn c++, as it's more the industry standard. Though I can kinda get things up and running, it being a statically typed language makes things a bit more complicated.

In conclusion, this was just me saying hi and talking a bit about myself and my history with programming. In future posts, I'll go into details on my experiences with learning python and c++. Until then, I'm open to chat and whatever else.
How do you truly start with Web Design? But, you don’t really like styling? 
Tags: python, react, vue, database
Published: 2020-11-25 02:09:40

So, I started out with Vue, but I switched to React to get better at JavaScript. It helped me a good bit. But.... I moved away from front end to using Python and Django, because I don’t like styling and JavaScript that much at times. 
I like the possibilities with python, except you need college for Datascience and machine learning? 
I’m kinda stuck. “Requirements” or “preferred” knowledge is 2-5 years at times for react or python. 
How do you start as a beginner??? 
What type of “self” projects would be good to make? To then show? I’m liking APIs a little bit, but that’s with python and getting data for stocks and web scrapping at times. But, how do you start as a beginner? 

I’m kinda stuck. I haven’t really been making CRUD apps that much.