teleren/devto huggingface dataset:
Day 1 - 10DaysOfJavaScript
Tags: challenge, javascript, computerscience, programming
Published: 2020-07-24 05:00:27

![Day 1 - 10DaysOfJavaScript](https://dev-to-uploads.s3.amazonaws.com/i/cue8dcr1w3dtoopqdzas.jpg)

### Day 1: Arithmetic Operators

- A length and width are sent to two different functions
- getArea must return the area of the shape dimensions sent
- getPerimeter must return the perimeter of the shape dimensions sent
- Complete the functions

```javascript
/**
 *   Calculate the area of a rectangle.
 *
 *   length: The length of the rectangle.
 *   width: The width of the rectangle.
 *   
 *	Return a number denoting the rectangle's area.
 **/
function getArea(length, width) {
    let area;
    // Write your code here
    area = length * width;
    return area;
}

/**
 *   Calculate the perimeter of a rectangle.
 *	
 *	length: The length of the rectangle.
 *   width: The width of the rectangle.
 *   
 *	Return a number denoting the perimeter of a rectangle.
 **/
function getPerimeter(length, width) {
    let perimeter;
    // Write your code here
    perimeter = 2 * (length + width);
    return perimeter;
}
```

### Day 1: Functions

- A integer of value n is provided
- 1 ≤ n ≤ 10
- Output the factorial value of n (n!, 4! = 4 x 3 x 2 x 1 = 24)

```javascript
/*
 * Create the function factorial here
 * Recursion: To call itself is called recursion.
 */
function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}
```

### Day 1: Let and Const

- A float value r is provided for the radius
- 0 < r ≤ 100
- Print (console.log) the area of the circle (π x r²)
- Print (console.log) the perimeter of the circle (2πr)
- Do not overwrite the try and catch but make sure the code still works

```javascript
function main() {
    // Write your code here. Read input using 'readLine()' and print output using 'console.log()'.
    let r = readLine();
    const PI = Math.PI;
    // Print the area of the circle:
    console.log(PI * (r * r) );
    // Print the perimeter of the circle:
    console.log(2 * PI * r);
}
```

**Check out [30 Days of Code| CodePerfectplus](https://codeperfectplus.com/category/10daysofjavascript/) for All solutions from this series.**

React ❤️ to encourage Author.
Security on localhost?
Tags: security, discuss, webdev
Published: 2020-07-24 04:36:18

What do you think about,

- Disabling CORS? (Actually, can non-CORS, like proxy, be faked by malicious local apps?)
- HTTPS? Other protocols with SSL? 
- Coffee shops (Public network) vs Trusted / Private?
- Exposing to `0.0.0.0`, especially for mobile testing? (Don't know if there is better way.)
How to Improve Routing In Laravel
Tags: laravel, webdev, php
Published: 2020-07-24 04:17:05

Routing allows the user to route application requests to its appropriate controller. Laravel has inbuilt API which is really helpful and time saving. Hence, it is important for newcomers to know and extend their knowledge about routing.

Users can learn about routing technique basics from here. Please go through the link to get more familiar with routing.

Here are a few tricks that can help you to use routing in Laravel:
Using Custom Namespace

Users can define namespace for a group of routes using fluent routing API.
```
Route::namespace('Admin')->group(function () {
    // Controllers Within The "App\Http\Controllers\Admin" Namespace
});
```
Run the command given below to create controller in App\Http\Controllers\Admin:

```
php artisan make:controller -r Admin/UsersController
```

After running the command, routes/web.php will look like this:

```
Route::namespace('Admin')
    ->prefix('admin')
    ->group(function () {
        Route::resource('users', 'UsersController');
    });
```

Debug Routes

To find or debug all defined routes, users can run php artisan route:list . Basically what this command does is that it helps to see name of all routes and attached middleware to the route.

```
php artisan route:list
+--------+----------+----------+------+---------+--------------+
| Domain | Method   | URI      | Name | Action  | Middleware   |
+--------+----------+----------+------+---------+--------------+
|        | GET|HEAD | /        |      | Closure | web          |
|        | GET|HEAD | api/user |      | Closure | api,auth:api |
+--------+----------+----------+------+---------+--------------+
```

If you are interested, you can continue this post on https://laravelproject.com/how-to-improve-routing-in-laravel/.
10 Days of JavaScript Challenge
Tags: challenge, javascript, computerscience
Published: 2020-07-24 04:05:30

### Overview: 10 Days of JavaScript

This series focuses on learning and practising JavaScript. Each challenge comes with a tutorial article, and you can view these articles by clicking either the Topics tab along the top or the article icon in the right-hand menu.

![10 Days of javascript](https://dev-to-uploads.s3.amazonaws.com/i/rzundv7nrw0uovnstqk2.jpg)

### Solution 

{% post https://dev.to/codeperfectplus/day-0-10daysofjavascript-1fnc %}
{% post https://dev.to/codeperfectplus/day-1-10daysofjavascript-1e11 %}
{% post https://dev.to/codeperfectplus/day-2-10daysofjavascript-5hj7 %}

**Check out [30 Days of Code| CodePerfectplus](https://codeperfectplus.com/category/10daysofjavascript/) for All solutions from this series.**

## Other Article By Author

- [HackerRank Solve Python Algorithm Series](https://codeperfectplus.com/category/Solve-python)
- [HackerRank Problem Solving Algorithm Series](https://codeperfectplus.com/category/Problem-solving)
- [30 Days of Code HackerRank](https://codeperfectplus.com/category/Hackerank-30-days-of-code)
- [10 Days of JavaScript HackerRank](https://codeperfectplus.com/category/10-days-of-javascript)
Are you an Ops Eng or SRE? Do you feel excluded by the term 'developers'?
Tags: discuss
Published: 2020-07-24 03:30:43

---
title: Are you an Ops Eng or SRE? Do you feel excluded by the term 'developers'?
published: true
description: do SRE's not appreciate the term 'developers'?
tags: discuss
//cover_image: https://direct_url_to_image.jpg
---

I was talking to a friend recently and I mentioned "I mainly write articles for developers." They mentioned that the other engineering roles in a technical team might feel excluded by the term 'developers.'

I'm curious if you feel that way? I want to use language that includes all the technical roles inside a team so I'd love to hear ideas to replace 'developers' as a general term for 'people who touch computers to make software happen'
Create your own simple RSS feed for your blog in a Laravel application
Tags: laravel, rss
Published: 2020-07-24 03:15:40

Facing to a problem, people often find some packages, install and use it even when the problem is simple, and those packages are too overkill.

I always prefer solving a problem by a "vanilla way" first. And in this case, it's really simple.

In your routes:

```php
Route::get('/feed', 'FeedController');
```

In your `FeedController`:

```php
<?php

namespace App\Http\Controllers;

use App\Post;
use Illuminate\Http\Request;

class FeedController extends Controller
{
    public function __invoke()
    {
        $posts = Post::all();

        $content = view('feed', compact('posts'));

        return response($content, 200)
            ->header('Content-Type', 'text/xml');
    }
}
```

In your view `feed.blade.php`, put the XML feeds content in:

```php
<?xml version="1.0" encoding="UTF-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
    <id>{{ url('/feed') }}</id>
    <link href="{{ url('/feed') }}"></link>
    <title><![CDATA[{{ config('app.name') }}]]></title>
    <description></description>
    <language></language>
    <updated>{{ $posts->first()->updated_at->format('D, d M Y H:i:s +0000') }}</updated>
    @foreach ($posts as $post)
    <entry>
        <title><![CDATA[{{ $post->title }}]]></title>
        <link rel="alternate" href="{{ $post->path() }}" />
        <id>{{ $post->path() }}</id>
        <author>
            <name> <![CDATA[{{ $post->user->name }}]]></name>
        </author>
        <summary type="html">
            <![CDATA[{!! parsedown($post->content) !!}]]>
        </summary>
        <category type="html">
            <![CDATA[]]>
        </category>
        <updated>{{ $post->updated_at->format('D, d M Y H:i:s +0000') }}</updated>
    </entry>
    @endforeach
</feed>
```

Change the content on your demand. And enjoy your result!
IT Help Desk Là Gì? Những Điều Bạn Nên Biết Về It Help Desk
Tags: ithelpdesk
Published: 2020-07-24 03:05:19

IT help desk được dự định là điểm tương tác chính giữa người dùng và tổ chức CNTT. Theo ITIL, IT help desk là điểm liên lạc duy nhất (SPOC) giữa nhà cung cấp dịch vụ (IT) và người dùng cho các hoạt động hàng ngày. IT help desk thông thường quản lý các sự cố (gián đoạn dịch vụ) và yêu cầu dịch vụ (các nhiệm vụ liên quan đến dịch vụ thường xuyên) cùng với xử lý thông tin liên lạc của người dùng cho những việc như mất điện và thay đổi theo kế hoạch đối với dịch vụ. IT help desk thường có phạm vi rộng và được thiết kế để cung cấp cho người dùng một nơi duy nhất đáp ứng mọi nhu cầu CNTT của họ. Điều này dẫn đến việc IT help desk đóng vai trò then chốt trong việc tạo điều kiện tích hợp các quy trình kinh doanh với hệ sinh thái công nghệ và cơ sở hạ tầng quản lý dịch vụ rộng hơn.
https://blog.itnavi.com.vn/it-help-desk-la-gi/
July 23rd, 2020: What did you learn this week? CodeLand Edition
Tags: weeklylearn, discuss, weeklyretro
Published: 2020-07-24 03:03:04

It's that time of the week again except we're doing it a little earlier as it's [CodeLand](https://dev.to/codeland) and if you attended day 1, you probably learnt a few things. 😺

So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![An animated stack of books saying "Learn new tings!"](https://media.giphy.com/media/Ec5RkrmARxPmTuXgrZ/giphy.gif)

</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-29kh %}

<center>

![Kid riding flying animal in the Neverending Story movie](https://media.giphy.com/media/cOB8cDnKM6eyY/giphy-downsized-large.gif)

</center>
Affordable Books for Learning JavaScript
Tags: books, javascript
Published: 2020-07-26 01:20:06

---
title: Affordable Books for Learning JavaScript
published: true
date: 2020-07-24 02:47:35 UTC
tags: books,javascript
canonical_url: https://thewebdev.info/2020/07/24/affordable-books-for-learning-javascript/?utm_source=rss&utm_medium=rss&utm_campaign=affordable-books-for-learning-javascript
---

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

**Follow me on Twitter at https://twitter.com/AuMayeung**

**Many more articles at https://medium.com/@hohanga**

**Even more articles at http://thewebdev.info/**

# Free Books

## React Quick Guide

[Download](https://thewebdev.info/downloads/react-basics/)

## Vue Quick Guide

[Download](https://thewebdev.info/downloads/vue-basics/)

# Affordable Books

## React Basics

[Buy Now](https://www.amazon.com/dp/B08CGG3Y29)

## Vue Basics

[Buy Now](https://www.amazon.com/dp/B08CGL4TYS)

## Vue Router Basics

[Buy Now](https://www.amazon.com/dp/B08CGN47DK)

## Quick Guide to Material UI

[Buy Now](https://www.amazon.com/dp/B08DK8C3WM)

## Short Guide to JavaScript

[Buy Now](https://www.amazon.com/dp/B08DCPG39G)

## JavaScript Code Tips

[Buy Now](https://www.amazon.com/dp/B08DDD688Y)

## Bootstrap 5 Basics

[Buy Now](https://www.amazon.com/dp/B08D9SM6N9)

## JavaScript Unit Test Best Practices

[Buy Now](https://www.amazon.com/dp/B08D8T6CYZ)

## Node.js Best Practices

[Buy Now](https://www.amazon.com/dp/B08D7W1LBK)

## TypeScript Best Practices

[Buy Now](https://www.amazon.com/dp/B08D7WTDSV)

## JavaScript Best Practices

[Buy Now](https://www.amazon.com/dp/B08D6B6YJD)

## Node GraphQL Basics

[Buy Now](https://www.amazon.com/dp/B08CYCJ69P)

## DOM Manipulation Basics

[Buy Now](https://www.amazon.com/dp/B08CXSC1GD)

## Basic JavaScript Interview Questions

[Buy Now](https://www.amazon.com/dp/B08CTV725L)

## Refactoring JavaScript

[Buy Now](https://www.amazon.com/dp/B08CWRNGJ9)

## TypeScript Basics

[Buy Now](https://www.amazon.com/dp/B08CTPCHJ7)

## Express Basics

[Buy Now](https://www.amazon.com/dp/B08CGKFDB8)

The post [Affordable Books for Learning JavaScript](https://thewebdev.info/2020/07/24/affordable-books-for-learning-javascript/) appeared first on [The Web Dev](https://thewebdev.info).
HTTPS on Localhost for Any Web Application
Tags: tutorial, webdev, beginners, security
Published: 2020-07-24 02:44:23

Having a TLS certificate is not a common requirement for local development. Moreover, many tools, like Angular or Parcel allow you to seamlessly generate certs with a runtime options. That said, sometimes you might need to serve HTTPS traffic to an application that doesn't support TLS certificates auto-generation. In this cases, there is no elegant workaround, rather than actually generate the certificates manually. It can be done using tools, like openssl, and there is a number of great how-to articles on the topic, for example [this one](https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/). 

## One-Command TLS with Caddy

[Caddy](https://caddyserver.com/) is a web server written in go that among other features automates TLS certificates generation. All you need for Caddy to proxy traffic to your app is one simple command:

```sh
# considering the app is running on port 3000
caddy reverse-proxy --to http://localhost:3000
```

For more complex usecases, Caddy also has a notion of [`Caddyfile`](https://caddyserver.com/docs/caddyfile), which is the same as configuration file.

## Installation

For the install process, refer to the [Download](https://caddyserver.com/docs/download) section of the Caddy docs. 

Depending on preferred method of your installation, you might need to make your system trust the TLS certificates Caddy generates.

```bash
# adds certs into the local trust store
caddy trust
```

## Google Chrome Issue Fix

Up until Caddy's recent release, there is a [know issue](https://github.com/caddyserver/caddy/issues/3571) affecting Google Chrome browsers (or other Chrome-based).

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

In case you see the warning from above, please check that you have the latest version of Caddy installed!
Day 53: #100DaysofCode - Created user log in and log out functionality
Published: 2020-07-24 02:43:02

Today I created user log in and log out functionality for the following app that I have been coding along with:

{% github SincerelyBrittany/todo-mvc-lv-codealong no-readme %}

Tomorrow I will go into detail on exactly how I created the functionality. 

Feel free to checkout the repo and the notes in the repo. 

As always, thanks for reading. 

Sincerely,
Brittany 

Its been a while, song of the day:

{% youtube hkEJmUDX47U %}
Learn pfSense - Open Source Firewall
Tags: firewall, pfsense
Published: 2020-07-24 02:24:09

Hi, pfSense is an open source firewall/router computer software distribution based on FreeBSD. It is installed on a physical computer or a virtual machine to make a dedicated firewall/router for a network.

So, if you are looking for the open source firewall, pfSense is the best one.

Learn More: https://www.gns3network.com/how-to-install-pfsense-firewall-in-vmware-workstation/
Deploy a REACT app with Flask API backend on Kubernetes Cluster - Part 1
Tags: kubernetes, jenkins, react, python
Published: 2020-07-24 02:14:42

Recently I started learning React Framework for web development. I really like how easy it is to build a frontend using the Component pattern in React. If you don’t know what React is, it is a frontend web development framework developed by Facebook. It really simplifies the way how frontend is built. So while learning this I thought why not have a post on a react app deployment.  

When it comes to deployment, why not on Kubernetes, the most used system to deploy and manage containerized applications. This post will give you the knowledge to easily deploy an app built using React framework connected to a backend API built on Flask using Python. This will be actually a series of two posts since the process is too long to fit in one post. Both of the posts together should give you a good understanding of the app deployment on Kubernetes cluster using Jenkins.  

You can read the whole post here: https://amlanscloud.com/reactappdeploy/
All I can learn in a month...
Tags: webdev, codenewbie, help
Published: 2020-07-24 01:47:14

##Help me to plan a 30 days of intense learning experience in front end skills

I'll be on staycation next month, and I'm planning study as much as possible this month. I'm 40 years old, and I decided to move on my career to development. 

I currently work in a bank, I have some knowledge of HTML, CSS and (superficial) Javascript. I just fished my *Responsive Web Design Certification* on [freeCodeCamp](https://www.freecodecamp.org/learn). 

I confess I'm a bit lost, just realized how much I have to learn. I can't waste this precious time. So I want to be well prepared to study the entire month focused on what is worthy.

So **please give me some tips**, in what should I focused, how can I concetrate on a quick improvement of my skills!!! 

## Tips

{% devcomment 12gp4 %}
Road to Genius: superior #59
Tags: javascript, beginners, computerscience, codenewbie
Published: 2020-07-24 01:32:15

Each day I solve several coding challenges and puzzles from Codr's ranked mode. The goal is to reach genius rank, along the way I explain how I solve them. You do not need any programming background to get started, and you will learn a ton of new and interesting things as you go.

```JS
function RPN(tokens) {
  const stack = [];
  for (let index = 0; index < tokens.length; index++) {
    const token = tokens[index];
    if (!Number.isNaN(Number(token))) {
      stack.push(token);
    } else {
      const a = Number(stack.pop());
      const b = Number(stack.pop());
      if (token === '*') {
        stack.push(b * a);
      } else if (token === '/') {
        stack.push(b / a);
      } else if (token === '+') {
        stack.push(b + a);
      } else if (token === '-') {
        stack.push(b - a);
      }
    }
  }
  return stack.pop();
}

let arr = ['1', '8', '5', '6', '+', '5', '*', '/', '*', '6', '+', '7', '+']
let A = RPN(arr);
A = Math.floor(A)

// A = ? (number)
```

Our good old friend the Reverse Polish Notation (RPN) is back again. To complete the challenge we have to solve the notation, let's do that in pseudo-code:

```
arr = 1 8 5 6 + 5 * / * 6 + 7 +
stack = []

index: 0, 1, 2 & 3
stack = [1 8 5 6]

index: 4
token: +
push(5 + 6 = 11)
stack = [1 8 11]

index: 5
stack = [1 8 11 5]

index: 5
token: *
push(11 * 5 = 55)
stack = [1 8 55]

index: 6
token: /
push(8 / 55 = 0.145)
stack = [1 0.145]

index: 7
token: *
push(0.145 * 1 = 0.145)
stack = [0.145]

index: 8
stack = [0.145 6]

index: 9
token: +
push(0.145 + 6 = 6.145)
stack = [6.145]

index: 10
stack = [6.145 7]

index: 11
token: +
push(6.145 + 7 = 13.145)
stack = [13.145]

A = Floor(stack.pop())
A == 13
```

![coding challenge answer](https://dev-to-uploads.s3.amazonaws.com/i/ngrtxsxb82syv0mblytt.png)

By solving these challenges you train yourself to be a better programmer. You'll learn newer and better ways of analyzing, debugging and improving code. As a result you'll be more productive and valuable in business. Get started and become a certified Codr today at https://nevolin.be/codr/
Styling Links for Print
Tags: css
Published: 2020-07-06 21:53:28

---
title: Styling Links for Print
published: true
date: 2020-07-03 00:00:00 UTC
tags: css
canonical_url: https://www.lowmess.com/blog/styling-links-for-print/
---

A few weeks ago, amid the ongoing COVID-19 pandemic, my apartment building left a note in my mailbox. Among the helpful information and polite requests to wear masks in shared areas, I noticed a piece of text that had a very familiar style. It was blue, and underlined, and seemed to hint at a missing piece of content. In short, it was a link. Of course, this being a printed piece of mail, the link wasn't much help to me. And, while this note was certainly a Google Docs or Word document, it made me think about the way links are styled on the web.

While people aren't printing out websites at the same volume they used to, print styles are still very important. Modern browsers use these styles when saving a page as a PDF, for example. The problem is that links in this context are not always clickable. But with a little CSS we can ensure the user is always shown the URL the link points to:

```css
@media print {
  a:link[href^='http']::after {
    content: ' (' attr(href) ')';
  }

  a:link[href^='/']::after {
    content: ' (https://mywebsite.com' attr(href) ')';
  }

  a:link[href^='#'] {
    text-decoration: none;
  }
}
```

This CSS takes advantage of the `print` media query to set special styles on links in that context. Specifically, we are creating [a psuedo-element](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements) on links that begin with `http` (absolute links) and `/` (root-relative links). The `content` of those elements is set to the link element's `href` attribute using [the `attr` function](https://developer.mozilla.org/en-US/docs/Web/CSS/attr). As a bonus, we also remove the link-styling for anchor links, since those have no practical purpose in print contexts.

Of course this isn't an advised solution to _every_ link, but it is particularly useful for blog posts, technical documentation, and any content that a user might want to save to refer to later. Printing websites not be a common occurrence anymore, but setting print styles absolutely should be.
Configure Go Programs Using the Viper Package 🐍
Tags: go, tutorial, video
Published: 2020-07-24 01:09:12

{% youtube ggxGznvdKMo %}

Shout out to my wife who makes these hilarious thumbnails, follow her on [twitter](https://twitter.com/bonecloset) and [instagram](https://www.instagram.com/bone_closet/) for more art stuff.

You can get quite far configuring your go programs with the standard library. You can read in your config file, or pass in arguments and parse them with the flag package. However, what you wanted to do all these things interchangeably and with much more ease?

Enter [viper](https://github.com/spf13/viper), go configuration with fangs as they say! With viper, you can do ALL of the following:

* setting default values for your configuration
* read from popular config file formats, such as JSON, TOML, and YAML
* watch your config file and live reload any changes
* reading from environment variables
* reading from remote config systems, such as etcd
* reading from command line flags
* reading from buffer
* setting explicit values

Check out the video to see an example of some of things you can do with viper.

If you liked it and want to know when I post more, be sure to [subscribe] (https://www.youtube.com/channel/UCTHij3Ac5GizLsn5yB4IX_Q?sub_confirmation=1) and thank ya'll again for your time!