teleren/devto huggingface dataset:
My Minimal Linux Setup 2020
Tags: linux, webdev
Published: 2020-06-30 07:44:20

My preferred Os of choice is Linux, and with that, I often spend quite a lot of time setting up my environment. After 'distro' hopping, [PopOS](https://pop.system76.com/) is my distro of choice. My bare minimum includes: 
. Git
. Node & npm 
. Ruby & rails via RVM(version manager for all things ruby)
. SQLite
. Atom text editor


## Installations

This installation guide assumes you are using a Debian/Ubuntu-based Linux distro.

before you start it's helpful to update your package information and do any necessary upgrades.
```bash
$ sudo apt-get update
$ sudo apt-get upgrade
```

#### Git

Installing Git is as simple as running the install command and setting up your global user. 
```apt-get install git```
To configure your profile run the following:
```bash
$ git config --global user.name "John Doe"
$ git config --global user.email "johndoe@example.com"
```

Next, you can generate a new SSH key for authentication with this [guide](https://help.github.com/en/enterprise/2.15/user/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent).
You can follow this [guide](https://help.github.com/en/enterprise/2.15/user/articles/adding-a-new-ssh-key-to-your-github-account) to add the new SSH key to your account.

#### Node & NPM

To keep this setup minimal, I'll be installing the distro-stable versions for Ubuntu. Run ```$ sudo apt install nodejs``` and ```$ sudo apt install npm```.

#### RVM (Ruby & Rails)

RVM's official installation guide is the best source to use when installing RVM. It even offers a few diffent install options. 
After installing GPG keys with this: ```gpg --keyserver hkp://pool.sks-keyservers.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB```
You can choose any of the basic installs. I go for the "Poor man's Rails installer" ```\curl -sSL https://get.rvm.io | bash -s stable --rails```
```\curl -sSL https://get.rvm.io | bash -s stable --ruby```
This installs the latest stable version of Ruby and Rails.
After everything is finished installing, restart your terminal.

#### Sqlite
  
Check to see if you currently have Sqlite installed with `$ sqlite3 ---version`
If you don't get a version number, install it with `$ sudo apt install sqlite3`

#### Text Editor

The default text editors don't usually do it for me so I'll end up installing [Atom](https://atom.io/) instead.
Shorten your if statements using the '&&' operator
Tags: javascript, codenewbie, 100daysofcode, todayilearned
Published: 2020-06-30 07:33:55

Today I learned a pretty cool trick!

You can use the '&&' operator to shorten your if statements.

So instead of using this:
```javascript
if (iAmHungry) {
  bakeAnEgg()
}
```


You can use it like this!
```javascript
iAmHungry && bakeAnEgg()
```


Would you use this in your own code?
How would this impact the readability of your code?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jc9tskafc0citwydabzv.png)
Dynamic News Reporting added to J.A.R.V.I.S
Tags: python, news, devops
Published: 2020-06-30 07:13:36

Made J.A.R.V.I.S recently which is a program which does our basic commands such as open Github, play music, open StackOverflow, send emails, tells about time and date with just a voice command..But, now I added Dynamic News Reporting to it with NewsAPI to get news at any time with just a voice command..

<a href="https://github.com/GauravSingh9356/J.A.R.V.I.S">GitHub</a>
Understanding Istio: part 13 – (Automatic) mutual TLS
Tags: kubernetes, devops, docker, beginners
Published: 2020-06-30 07:13:01

---
title: Understanding Istio: part 13 – (Automatic) mutual TLS
published: true
description: Serie of sketchnotes about Istio. Explaining in a visual way Istio principles.
tags: Kubernetes, DevOps, Docker, beginners
series: Understanding Istio in sketchnotes
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/tpc9ovleknf08iw7cqvd.jpg
---

Understanding Cloud technologies, like Kubernetes, can be difficult or time-consuming. In order to spread knowledges about it, I started to create [sketchnotes about Kubernetes](https://dev.to/aurelievache/kubernetes-sketchnotes-pods-4ib0) and know it's time to talk about a perfect companion of Kubernetes, a service mesh, Istio.

We continue our new serie of Sketchnotes about Istio, with a sketchnote about mTLS.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/tpc9ovleknf08iw7cqvd.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1q39m686k79ud0ykltpe.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/huxeup34kz6fhjfcmxp9.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vsy0vkaiz48fwe5tpytm.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gzp9fyj726fz0sf5ctct.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zi0rx1jin9l3xabj3o2u.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/neubpt76jyr67gqrtyod.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v25d8tkhi3apb15im9dq.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6tplw3yjat60u673hq18.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u458ti4ftfwso1el77qn.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wttwvwlvrxjpz8jv47le.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ynkh96ra0mz8oma42ab.jpg)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gmdk3d5pu6qb2szplhjn.jpg)

If you are interested, I published a book with all the sketchnotes on Istio (and new ones!): ["Understanding Istio in a visual way"](https://gumroad.com/aurelievache#vJYhM).

As usual, if you like theses sketchnotes, you can follow me, and tell me what do you think. I will publish others sketchs shortly :-).
My new game Push It Up is out.
Tags: game, itch, gamedev, android
Published: 2020-06-30 07:06:50

Hello everyone. Yesterday i published my new platformer game called PUSH IT UP. It is a physics based platformer game with procedural level generation. I hope you like it and if you do make sure to leave a feedback. 

indigo123.itch.io/push-it-up/
RxJS - Nuggets of wisdom
Tags: defaultifempty, rxjs, javascript, typescript
Published: 2020-06-30 06:55:03

Do you know **"defaultIfEmpty"** operator? 
It emits the default value if the source completes without having emitted any value.
It could be helpful in several scenarios.

```javascript
import { of } from 'rxjs'; 
import { map, defaultIfEmpty } from 'rxjs/operators';

// source2 doesn't have any values; using defaultIfEmpty, we can have a "default" value.
const source1 = of().pipe(
  defaultIfEmpty('Hello There')
);

source1.subscribe(x => console.log(x));


// source1 has a value
const source2 = of('Hello World').pipe(
  defaultIfEmpty('Hello There')
);

source2.subscribe(x => console.log(x));
```


**Live Code**
{% stackblitz rxjs-defaultifempty file=index.ts %}
VGQL CLI
Tags: vue, graphql, node, typescript
Published: 2020-06-30 06:26:59

<img src="https://dev-to-uploads.s3.amazonaws.com/i/h288vntgrr7y5zsvj36x.png" width="200">

The main goal of the [VGQL](https://github.com/FlorianWoelki/vgql) command line tool, is to simplify the process of generating a project for a Vue.js and GraphQL techstack.

Currently, the following techstack is supported:
* JavaScript/TypeScript
* GraphQL (with TypeGraphQL)
* TypeORM
* Vue.js

In the future there will be Nuxt.js and other ORM extras you can generate your project with.

## Why VGQL

Whenever I create a new fullstack project with Vue.js and GraphQL, every time I do the same thing. Installing TypeGraphQL, set TypeScript up and setup your database connection with TypeORM. Therefore, I made this CLI to simplify this process in a dynamic way.

Right now, there is not much dynamic, because the projects get generated with my default settings. But this will change in the future.

## How to use VGQL

It is pretty straightforward. You just install the CLI globally and run it. After that it will generate two directories (web and server). The web directory contains the Vue.js application and the server directory contains the GraphQL back-end. Furthermore, the connection is already setup, so you just need to start both services and you are ready to go.

Install the CLI:
```bash
npm install -g vgql
```

Start the CLI:
```bash
vgql
```

Start the web application:
```
cd web/
npm run serve
OR
yarn serve
```

Start the server application:
```
cd server/
npm run start
OR
yarn start
```

## Can you contribute?

Of course! You can contribute by helping to improve the code quality or writing tests. Go on [GitHub](https://github.com/FlorianWoelki/vgql) and start coding!

What do you think about this CLI? Is it useful?

Thank you for reading :)
Quick setup Laravel (with Tailwind scaffold)
Tags: tech
Published: 2020-07-09 19:41:27

---
title: Quick setup Laravel (with Tailwind scaffold)
published: true
date: 2020-06-30 06:21:07 UTC
tags: Tech
canonical_url: https://martinbetz.eu/article/quick-setup-laravel-extended
---

I often install a fresh Laravel app to test a new package or replicate the setup for a tutorial. This is the fastest way to get a vanilla Laravel with Auth and Tailwind. The first step is only required if you have not installed the Laravel installer before (`$` means that you have to enter that to your terminal):

- (`$ composer global require laravel/installer`)
- `$ laravel new project`
- `$ cd project && code .` (opens in VSCode)
- Open `.env`
- Change `DB_CONNECTION=mysql` to `DB_CONNECTION=sqlite`
- Remove all lines not needed for SQLite: `DB_HOST`, `DB_PORT`, `DB_DATABASE`, `DB_USERNAME` and `DB_PASSWORD`
- `$ touch database/database.sqlite` to create the SQLite database
- `$ composer require laravel-frontend-presets/tailwindcss --dev`
- `$ php artisan ui tailwindcss --auth` to scaffold Tailwind frontend
- `$ npm install && npm run dev` to install the frontend
- `$ php artisan migrate` to migrate the database
- `$ valet open` or `$ php artisan serve` to open the site

![](https://martinbetz.eu/files/articles/laravel-quick-setup.jpg)Source: [https://twitter.com/Martin\_Betz/status/1256610649716723716](https://twitter.com/Martin_Betz/status/1256610649716723716)

P.S. If you want to automate the installation and add Git and some more, you might find [Tighten Co's Lambo](https://github.com/tightenco/lambo) useful.
[Beginner Angular] Duomly coding challenge #2 Fintech app
Tags: challenge, beginners, codenewbie, angular
Published: 2020-06-30 06:05:16

Hey guys,
we created a coding challenge that you can complete to test your skills and build a coding portfolio.

### Today's info:
- Create an Angular 9 app with these requirements
- Go use market/get-trending-tickers endpoint from the financial API
- Show all the trending tickers in the table
- Add sorting
- Create git repository with name Duomly challenge #2
- Push the code to the GitHub and share a link to the repository in the comments

### API to get tickers:
https://rapidapi.com/apidojo/api/yahoo-finance1?endpoint=apiendpoint_b7ffa4cd-6857-45bb-8eb9-51d0987c6f01

### HELP:
- Angular tutorial How to build application in Angular with API:

https://www.youtube.com/watch?v=WYRLYw2rYj0

- Angular 9 fintech course:

https://www.youtube.com/playlist?list=PLi21Ag9n6jJI2PTSIGeZ8796s1qiHC6QT

Let's start!

<a href="https://www.duomly.com?code=lifetime-80">![Duomly promo code](https://dev-to-uploads.s3.amazonaws.com/i/0g4daype9eb0aydh4iv9.png)</a>

Radek from Duomly
Positioning a navbar and logo in Landing Page
Tags: positioning, cssbasics, layout, visualdesign
Published: 2020-06-30 05:51:52

## Introduction 
Positioning is often overlooked property in CSS. This may be because the elements normally follow the flow of the document and positioning is not always needed.The elements of an HTML document can be either block elements like p,div or h1 that spans through entire line or inline elements like span or images which fills the surrounding space in a container.There are four basic positioning properties that are static, relative, absolute and fixed. 
## Static and Fixed 
The static is dafault positioning which is normal flow of elements.The fixed positioning places an element at a certain position which remains unchanged on scroll or resizing the browser window.Fixed positioning removes an element from the normal flow of the document, which is similar to absolute positioning.In example, an unordered list is positioned fixed at bottom of browser window with 20px pixels from right.

```css
ul {
    position: fixed;
    bottom: 0px;
    right: 20px;
}
```

## Relative positioning
 The other two positioning that needs more illustrations are relative and absolute positioning. The relative positioning is basically moves an element from the original position(normal flow of document) to a new position specifically dictated by values of left, right, bottom and top  properties. Relative positioning does not affect the surrounding elements or parent elements.

```css
.nav-bar {
    position: relative;
    top: 0px;
    right: 0px;
}
```
In above code, lets assume a menu with class .nav-bar is pushed from normal flow to top-right corner from its usual position.

## Absolute positioning
In contrast, the below code places the element  shifted with coordinates (20px, 25px) from the left corner of the browser window.Coordinates for absolute elements are always relative to the closest container that is a positioned element. 

```css
.logo {
    position: absolute;
    top: 25px;
    left: 20px;
}
```
So, if we change .logo's parent element which may be a header element to be relatively positioned, it should appear in the position 25px from top and 20px  from the left of its parent element instead the browser window.


![Free Web Learning Background animation](https://freeweblearning.com/wp-content/uploads/2019/10/Css-Background-Animation.jpg)
Haven't Given Up Yet!
Tags: laravel, webdev, beginners, design
Published: 2020-06-30 05:22:50

Weekly check in again, I should have done this yesterday but I was in a foul mood. So here we are on another update of my Laravel e-commerce project. Lets start of with the positives, I think I'm doing good, I'm currently working on the interface for the user to add a new product to the store. I am having a bit of trouble with this however and I think it's because I'm trying to bite off more than I can chew. Oh right, since I'm making this post, lets see if I can get some help here. I'm using a template that looks like this: 
![Template](https://i.ibb.co/7yvqFy8/2020-06-30.png)
Now I can very easily just create one singular form to post the data to my route, but I'd prefer to use this layout which is using multiple cards to add/edit product details. How would I be able to Post all the data with just one button? Could I just wrap everything in a form tag and then use the one button to send all the data at once?

If you guys have any suggestions or guidance I'd be glad to hear it.
A Little More Than Commit And Fork 
Tags: git, github
Published: 2020-06-30 05:20:00



Every person who is in tech field has or will use git in their workflow. Git and Github are amazing tools for version control and helps you to collaborate with other people working on the same projects. The basics of the git contains pull requests, commits,forks, merges,cloning etc. Now we are going to discuss topics beyond these basics that helps in making your workflow efficient.

#1.Git bisect:

Git bisect is generally used for large code bases where a number of commits takes place. In such bases if a bug occurs , it becomes difficult to trace the origin of the bug. This is where the git bisect tool becomes valuable. All you have to do is find a commit where the code works and a commit where it does not , and you don't have to do this manually with the commits. You can use git log tool to find a good commit and a bad commit. After setting a margin, the git bisect starts a step and step elimination process to find the bad commit.

You can start the git bisect with ﻿`git bisect start` command and end it with `git bisect reset` command.

#2.Git blame:

First of all, don't get fooled by the name. Git blame is a very useful command to find out the history behind a line of code. If you are working with many people and someone changed something in the code base and you want to know who did it, you can use git blame.

You can initiate git blame with `git blame fileName` .

There are other aliases for git blame like `git show` , `git who` , `git fame`

#3.Git stash:

Git stash allows you to save your code without committing it into a branch. This is helpful when you are working on different branches and want to move from branch to other. Git stash records the work in your current directory and gives you a clean directory to work with.

You can initialize `git stash` with git stash command and it saves your current state in a stack. If you want to restore the last saved state, you can use `git stash pop` command.
Measuring Angular Performance with Source Map Explorer
Tags: angular, performance
Published: 2020-07-04 20:42:18

---
title: Measuring Angular Performance with Source Map Explorer
published: true
date: 2020-06-30 05:00:00 UTC
tags: angular,performance
canonical_url: https://coryrylan.com/blog/measuring-angular-performance-with-source-map-explorer
---

Web Performance is becoming more and more demanding as Web applicationscontinue to grow in size and complexity. One of the biggest culprits of Web Performance issues is JavaScript. JavaScript can be slow to download but also slow to execute depending on the network and device capabilities.

To keep Angular performance fast we can use [lazy loading](/blog/custom-preloading-and-lazy-loading-strategies-with-angular) and [dynamic imports](/blog/angular-tips-dynamic-module-imports-with-the-angular-cli) to load code as needed on demand. This can greatly reduce the amount of JavaScript required to load and run on the client. However, even when following best practices, sometimes a single third party dependency can break all performance progress.

In this post, we will see how we can better understand what JavaScript we are sending down to the client within our Angular applications.

## Angular CLI

To understand our Angular application’s performance characteristics, we will need to build our app with the production flag to ensure we are testing with what our prod environment will be using.

In the root of the Angular CLI project, we can execute the following:

```bash
ng build --prod --source-map
```

This command will build our Angular application with all the optimization the Angular CLI uses and produce source map files of the output code. The source maps allow the compiled final output to be mapped to its original code before compilation.

With the source maps, we can use a tool like `source-map-explorer` to inspect and show precisely what code is being sent to the client. To use Source Map Explorer, you will need to install via NPM.

```bash
npm install source-map-explorer
```

Once installed, we can add it as an NPM stript to the `package.json` in our Angular application.

```json
{
  "bundle:report": "source-map-explorer dist/demo-app/**/*.js"
}
```

When we run our script `npm run bundle:report`, we will get the output in the browser.

![Measure Angular Performance with Source Map Explorer](https://coryrylan.com/assets/images/posts/2020-06-30-measuring-angular-performance-with-source-map-explorer/angular-performance-source-map-explorer.png)

Here we can see the output of the [ng-pokedex project](https://github.com/coryrylan/ng-pokedex). We can see all the JavaScript and dependencies within each JavaScript bundle. This visualization makes it easy to identify what code is being loaded.

While the Angular CLI uses Webpack for some of its bundling, it also makes additional optimizations on top of Webpack. Because of these optimizations, it’s important to use the `source-map-explorer` to test the final output and not the `webpack-bundle-analyzer` that is commonly used with Webpack based applications.

You can find the [demo application on Github](https://github.com/coryrylan/ng-pokedex)!
Add Cron to your Jupyter server
Tags: docker, linux, machinelearning, datascience
Published: 2020-06-30 04:37:45

# What is Cron? ⏰
> The software utility cron is a time-based job scheduler in Unix-like computer operating systems. Users that set up and maintain software environments use cron to schedule jobs (commands or shell scripts) to run periodically at fixed times, dates, or intervals. It typically automates system maintenance or administration—though its general-purpose nature makes it useful for things like downloading files from the Internet and downloading email at regular intervals. - [Wikipedia](https://en.wikipedia.org/wiki/Cron)


**Learn more 📚:**
- [Nice explanation on how to set up your own cron job](https://dev.to/shuaib/setting-up-cron-jobs-to-run-bash-scripts-n5n)
- [Examples of cron schedules](https://crontab.guru/examples.html)
- Some notes on running Cron:
  - Cron daemon (server, service) has to run with root permission. Users then can submit their tasks to it and cron would faithfully execute the code at a specified schedule.


### Some Cron jobs for Jupyter server
As an example, cron could run notebooks periodically and send diagnostics to slack channels or emails. It could run a backup script of data you are working with or schedule heavy computations at night so that the results are ready in the morning. You get the idea.


### Example: Weather fetcher
{% github Bobrinik/anaconda_with_cron no-readme %}

This repo contains a setup showing how Cron and Jupyter server can be run together. `weather_fetcher.ipynb` is executed every 2 minutes. It fetches weather data from a static API provided by [OpenWeather](https://openweathermap.org/api) and sends the result in a text message using [Twillio](https://www.twilio.com/).