teleren/devto huggingface dataset:
舊瓶也能裝新酒 Ubuntu 14.04 硬裝 Docker 實戰
Tags: ubuntu, docker
Published: 2021-10-27 04:37:29

在 2020 的年頭，因為某些因素，必須評估把陳年的 Ubuntu 14.04 撿起來裝 Docker 的方案，在 2020 年幹這事，當然不是 `apt install docker.io` 這麼簡單，否則這篇文章就不會出現了。

## Which Docker?

在 Ubuntu 原始的套件庫內就有 Docker，也就是前面提到的 docker.io ，不論是 Ubuntu 14.04 或現在的 18.04 甚至是未來的 20.04，都一律不建議使用這個套件來安裝 Docker，因為這些 Ubuntu 自帶的 docker.io 並非由 Docker Inc. 官方維護，因此更新永遠慢一步甚至很多步。更新慢會有什麼樣的問題？答案是不安全，讓我們看看 [Docker 的漏洞清單](https://www.cvedetails.com/product/28125/Docker-Docker.html?vendor_id=13534)，可以想像一下如果裝了幾乎不更新的 docker.io 我們的系統會暴露在多大的安全風險中。

因此，在 OS 必須是 Ubuntu 14.04 的先決條件下，我們還是要盡可能的降低系統的安全風險，所以必須使用 Docker 官方的最新套件來安裝 Docker。

就像寒戰電影中保安局局長陸先生所言：

<figure>

![非常時期 用非常的方法](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3kcqtwd4gixb7nape573.jpg)
<figcaption>非常時期 用非常的方法（可是還是不能打民眾）</figcaption>
<figcaption>版權：華映娛樂股份有限公司</figcaption>
</figure>

## 安裝 Docker

先裝一些基礎套件：

```sh
> sudo apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common
```

下載並把 Docker GPG 金鑰加入系統：

```sh
> curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
```

正式的把 Docker 官方套件庫加入系統：

```sh
> sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
```

安裝 Docker：

```sh
> sudo apt install docker-ce
```

按照上面的步驟把 Docker 裝完後，如果嘗試操作 image 甚至建立容器，乍看之下會覺得都是正常的，但是一旦想要進入容器內就會噴錯：

```
> sudo docker start --interactive 62ba

docker: Error response from daemon: OCI runtime create failed: container_linux.go:348: starting container process caused "process_linux.go:301: running exec setns process for init caused \"exit status 23\"": unknown

```

得到上面這堆不知所云的錯誤訊息。

必須更新 Linux 核心才能夠正常使用。

## 安裝新版 Linux 核心

在動手硬幹前先了解一下為何必須這麼做。

為了解決 [CVE-2019-5736](https://www.cvedetails.com/cve/CVE-2019-5736/) 這個漏洞，Docker 對 Linux 核心的版本需求為 3.17 以上版本，不幸的 Ubuntu 14.04 的 Linux 核心最高只有到 3.13，幸虧透過 Ubuntu 的 [LTS Enablement Stacks](https://wiki.ubuntu.com/Kernel/LTSEnablementStack) 機制，能夠讓我們在 Ubuntu 14.04 上有辦法安裝 16.06 的 Linux 4.4 核心。

安裝新版 Linux 核心：

```sh
$ sudo apt-get install --install-recommends linux-generic-lts-xenial
```

裝完之後要重開機一下，重開機後，系統應該就會是 4.4 版的核心了。

再次嘗試進入容器內，應該就會是成功的了。

## 後話

儘管技術上可行也測試 OK，不過這樣的解法最後並沒有應用到正式運作的機台上，開玩笑怎麼可能拿正式版的機台來換核心，當然要先研究不傷身體再講求療效啊！

<figure>

![第一先研究不傷身體](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f204d1u383pc6biqweoy.jpg)
<figcaption>第一先研究不傷身體</figcaption>
<figcaption>版權：五洲製藥</figcaption>
</figure>
Write docz in 5 steps.
Tags: webdev, javascript, beginners, programming
Published: 2021-10-27 04:26:10

---
cover_image: https://www.docz.site/static/img/header-img.ac3ca468.png
---

When I wanted to write some documentation. Earlier I had used Jekyll with Github pages. Then I had to create all the stuff by hand. Now I am going to introduce Docz in 5 steps...

![](https://www.docz.site/static/img/logo.4f4f7bc5.svg)

## It's never been easier to document your things!
![Built-in components](https://www.docz.site/static/img/header-img.ac3ca468.png)

- Powered by Gatsby
- Zero config
- Easy to customize
- Based on MDX
- Fully pluggable
- TypeScript support

Run following commands to setup it
### 1. Create
```bash
npm init # Use `-y` to quick run
```
### 2. Installation
```bash
yarn add docz react react-dom
```
or
```bash
npm install docz react react-dom
```
### 3. Start dev build
```bash
yarn docz dev
```
or
```bash
npx docz dev
```
### 4. Write
write this file to 
```markdown
---
name: Hello world
route: /
---

# Hello world

Hello, I'm a mdx file!
```
### 5. Enjoy
open `https://localhost:3001` or what else printed in console. 
![Example](https://cdn-std.dprcdn.net/files/acc_649651/Fgbg4F)

Visit https://www.docz.site/ for more
Follow me for more articles.  
Thanks 💖💖💖
[![support me](https://media.giphy.com/media/513lZvPf6khjIQFibF/giphy.gif)](https://www.buymeacoffee.com/ksengine)
Divtober Day 27: Film
Tags: codepen, divtober, css, art
Published: 2021-10-27 04:24:56

---
title: Divtober Day 27: Film
description: 3D-looking clapperboard/slate drawn with CSS and a single HTML element for divtober 27 (film).
published: true
tags: codepen,divtober,css,art
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nwcg62ckc3vf6u5mom8x.png
---

Day of the word is "film", so here is a clapperboard (a.k.a. slate) needed in every film set to help with the audio/video synchronization. It animates a little on hover.

{% codepen https://codepen.io/alvaromontoro/pen/qBXmKOr %}

It uses `perspective` to simulate the 3D, but there's more to it: as the clapperboard is drawn with a single HTML tag we don't have enough elements to go "full 3D." The solution was using shadows and stacking them in a way that provides a fake sense of perspective (on top of the CSS perspective.)
How To Check Occupied Disk Space In Laravel
Tags: laravel, php, ubuntu, webdev
Published: 2021-10-27 03:25:23

In this tutorial I will give you example about how to check occupied disk space in laravel or check free RAM in server. Many time we need requirments to check occupied disk space of server in adminside dashboard and we are checking manually if disk space are fully occipied or not. So, In this tutorial I will explain you how to check occupied disk space in laravel so you can check directly in adminside without any manual action. Also you can use this code in ubuntu as well.

PHP provide built-in function to check total space and free space of server, here we will use disk_total_space() and disk_free_space() functions and will get output.

The disk_total_space() function returns the total size, in bytes, of the specified filesystem or disk.

---

> **_[Read More : How To Check Occupied Disk Space In Laravel](https://techsolutionstuff.com/post/how-to-check-occupied-disk-space-in-laravel)_**
How to change git branch name (local and remote)
Tags: git
Published: 2021-10-27 03:20:20

It's possible that we will do something wrong, well, we're all just human, we always do something wrong (or may be right).

Git branch are something that I always define it in wrong pattern 🤣.

Here how to fix it.

1. you need to change branch name in local first 

```sh 
$ git branch -m old-branch-name new-branch-name
```

What it does? it dose change local branch name from `old-branch-name` to `new-branch-name`. You can check with `git log` you will found that the `old-branch-name` are gone!

2. change branch name in remote 

This part are required when the `old-branch-name` are in remote. What you need to do is just push the `new-branch-name` into remote then remove the `old-branch-name` in remote that's it.

```sh
$ git push origin -u new-branch-name
$ git push origin -d old-branch-name
```

Now, the `old-branch-name` are gone both local and remote.
Code Smell 97 - Error Messages Without Empathy
Tags: opensource, ux, programming, javascript
Published: 2021-10-27 03:06:20

*We should take special care with error descriptions for the users (and ourselves).*

> TL;DR: Use meaningfull descriptions and suggest corrective actions.

# Problems

- The Least Surprise Principle

# Solutions

1. Use declarative error messages

2. Show clear exit actions

# Context

Programmers are seldom UX experts.

We also underestimate the fact we can be on both sides of the counter.

# Sample Code

## Wrong

[Gist Url]: # (https://gist.github.com/mcsee/e35210910d75821224dd75de8053b46f)
```javascript
alert("Cancel the appointment?", "Yes", "No");

//No consequences
//Options not clear
```

## Right

[Gist Url]: # (https://gist.github.com/mcsee/220e4c4d8eea96d15a0f34de2c5e96e3)
```javascript
alert("Cancel the appointment? \n" +
      "You will lose all the history", 
      "Cancel Appointment", 
      "Keep Editing");

//Consequences are clear
//Choice options have context
```

# Detection

[X] Manual

We need to read all exception messages in code reviews.

# Tags

- Exceptions

- UX

# Conclusion

We need to think in our end users when raising exception or showing messages.

# Credits

Photo by <a href="https://unsplash.com/@visuals">visuals</a> on <a href="https://unsplash.com/s/photos/error-message">Unsplash</a>
  
* * *

> While it is a known fact that programmers never make mistakes, it is still a good idea to humor the users by checking for errors at critical points in your program.

_Robert D. Schneider_ 
 
{% post https://dev.to/mcsee/software-engineering-great-quotes-26ci %}

* * *

This article is part of the CodeSmell Series.

{% post https://dev.to/mcsee/how-to-find-the-stinky-parts-of-your-code-1dbc %}
How to Parse bash Variables
Tags: python, parsing, bash, csv
Published: 2021-10-09 07:08:24

## The Problem

I sometimes need to parse a shell script to pick out variables declarations. Consider the following bash script, myscript.sh:

```
echo hello
server="server1.example.com"
port=8899
echo done
```

## The Solution

The first step is read the contents of the script:


```python
with open("myscript.sh") as stream:
    contents = stream.read().strip()
print(contents)
```

    echo hello
    server="server1.example.com"
    port=8899
    echo done


Next, we would pick out those lines which contains the variable declaration using regular expression:


```python
import re

var_declarations = re.findall(r"^[a-zA-Z0-9_]+=.*$", contents, flags=re.MULTILINE)
print(var_declarations)
```

    ['server="server1.example.com"', 'port=8899']


Finally, we use the `csv` library to parse these declarations and return a dictionary:


```python
import csv
reader = csv.reader(var_declarations, delimiter="=")
vars = dict(reader)
print(vars)
```

    {'server': 'server1.example.com', 'port': '8899'}


Putting it all together:


```python
import re
import csv

def parse_bash_vars(path: str) -> dict:
    """
    Parses a bash script and returns a dictionary representing the
    variables declared in that script.
    
    :param path: The path to the bash script
    :return: Variables as a dictionary
    """
    with open(path) as stream:
        contents = stream.read().strip()

    var_declarations = re.findall(r"^[a-zA-Z0-9_]+=.*$", contents, flags=re.MULTILINE)
    reader = csv.reader(var_declarations, delimiter="=")
    bash_vars = dict(reader)
    return bash_vars
```

Test it out:


```python
parse_bash_vars("myscript.sh")
```

    {'server': 'server1.example.com', 'port': '8899'}


## Conclusion

When mentioning the `csv` library, most thinks of it as a way to parse comma-separated-values files, but it has other uses such as parsing the bash variables or parsing /etc/os-release file.
database is there easier way then this?
Tags: database, aws, webdev, node
Published: 2021-10-27 02:23:39

Hello all,
I'm just trying to get pointed into right direction.
I am stuck and any advice appreciated.

Building API (new to backend) for practice that retrieves thousands of images and each image has details such as 
name of image
id
year
description 


Is there anyway to automate it or map it?
Or do i have to enter each image and details by hand :S

take STAMP.io for instance how did they add hundreds of thousands of stamps with details surely not by hand or did they just import existing databases?

thank you any books or topics appreciated.
code every day with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-10-27 02:08:38

##--DAY 9--
Hi, I am going to make #100DaysOfCode Challenge. Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
Now let's solve problem today:
-Problem: Maximum Subarray
-Detail: https://leetcode.com/problems/maximum-subarray/
-My solution (javascript):
```
var maxSubArray = function(a) {
  let max=a[0],maxE=0;
  for(let i in a){
    maxE+=a[i];
    if(maxE>max) max=maxE;
    if(maxE<0) maxE=0;
  }
  return max;
};
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
#100DaysOfSwift: Project 14 
Tags: ios, beginners, swift
Published: 2021-10-27 01:55:05

Hello ! 

For this project I created a Whack a Penguin game by using SpriteKit. GameScene.swift is where the layout of the game was created such as the holes the penguins will emerge from, and the score. A subclass of SKNode was created to hold all the functionality of the holes like when the penguin hides and is visible. 

Key Takeaways:

1. SKCropNode uses an image as a cropping mask where anything that is colored will be visible and anything in the transparent part will be invisible. 

2. The SKAction called moveBy:(x:,y:,duration) is used to move the penguin upwards and downwards out of the hole.

3. The character node was added to the crop node and the crop node was added to the hole. This line of code (let whackSlot = node.parent?.parent as? WhackSlot) was needed because the player tapped the penguin sprite node and not the hole. This code gets the parent of the parent node and typecast it as a WhackSlot. SKCropNode only crops nodes that are placed inside of it. 

4. Objects are sorted by Z position, where higher numbers are placed on top of the lower numbers. For example, zPosition = - 1 would be behind zPosition = 1.

5. Action sequences are in an array and execute in order, not at the same time.
#100DaysofCode days 1-7 to-do list
Tags: 100daysofcode, javascript, css, beginners
Published: 2021-10-27 01:17:23


I spent the first few days working on the html and css, and the last few days have been spent on javaScript.  I'm going through an HTML and CSS course on Udemy right now, so a lot of that was still fresh in my mind.  It's been MONTHS since I learned javaScript.  Here are the things I accomplished this week...

Got the "checkmark" and "remove" buttons working on the hardcoded elements.

Set up the "completed" section to automatically remove elements after a certain number.

Set up the "plus" button to add elements to the to-do list
What I'm really stuck on is this...

Getting the "checkmark" and "remove" buttons to work on elements added with the "plus" button

I made some improvement with this today.  I made an array to hold the elements instead of using the node list(which I was previously using).  I read that the node list is read only and I needed to add elements.  

At first, I couldn't get the array to update with adding elements to it, but I did get that working today.  Now for the weird part... if I add two elements to the list, I can remove the first item I added with the "remove" button.  That is the only "remove" button that works.  

Now I'm taking a little break from it.  I spent the rest of my hour today working on the CSS on this blog.  I felt that it was a better use of time, otherwise, I might have just stared blankly at code for the rest of the hour.

This is just a roadblock, and I know I'll get past it.  I am planning on creating a simpler to-do list using just text elements and see if I can get that to work.  The code on this to-do list is getting complicated and it's hard for me to see the bigger picture, which is exactly what I need to do.  

I hope everyone doing this challenge is having fun working on their projects!  Drop a line below and share what you're working on :)
Google refusing to connect to other sites?!
Tags: chromium, google, webdev, help
Published: 2021-10-27 01:17:13

This may or may not end up being related to [my previous post about Chromium devtools not working](https://dev.to/baenencalin/chromium-console-stopped-working-whats-wrong-hod-do-i-fix-it-1a8e).

So, for a few days now, I've been experiencing some issues with Google's services on third-party websites, such as Hulu, SoloLearn, etc...
When I've tried to log into [SoloLearn](https://www.sololearn.com/], [Twitter](https://www.twitter.com/), and [Reddit](https://www.reddit.com/) using "Sign-in with Google", none of them worked/were able to log me in (I was logged into my Google account, as I could access my GMail account).<sup> NOTE: All of the services listed don't require a CAPTCHA to login manually, or with SIwG.</sup>
When I try to log into [Hulu](https://www.hulu.com/), I go to enter my (mother's) email and password.
And what's this? - It's a... well- um- it's <b>meant</b> to be a reCAPTCHA, but it refuses to connect, as it shows with the frowning paper icon, and reads "[www.google.com](https://www.google.com/) refused to connect.". -- Note that it doesn't always have the textbox with the text that says that Google refused the connection. - When I first go to the login page, the box is much smaller, and has no textbox under it (or container).
Here are some images to show what I'm talking about:
![Hulu welcome page, where it does not show Google refusing to connect.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gk8inszssmy1hebj5y4e.png) ![Hulu welcome page, where it shows Google refused to connect.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1zk0wlz1rej9cfm7y6a.png)

Going back to one of the services mentioned briefly earlier (Reddit), I tried logging in using SIwG, and nothing happened, even after refreshing and [hard-refreshing](https://www.documate.org/automation/what-is-a-hard-refresh-how-to-do-a-hard-refresh-in-any-browser/) the page (and trying again).
I had to reset my password, and when I did, logging in manually worked perfectly fine. Same for Twitter (except I knew my password there, so no reset was needed).

I've tried clearing my browser's cache and profile cache.
I've tried clearing all my cookies.
I've tried reconnecting to the wifi, and restarted the router.
I've logged onto other Google products, showing that I am able to use Google products within Google's own domain.

So, does anyone have any ideas as to whats going on, and how I can fix it?

<h1><b>Thanks!<br/> Cheers!</b></h1>
What other ways to enforce immutability in Angular beside using Immutable.js?
Tags: discuss, angular
Published: 2021-10-27 00:20:40

If we use `OnPush` change detection strategy, immutability is helpful to ensure change detection works expectedly. 

## Problem in Immutable.js

One of the way to enforce immutability is using `Immutable.js`. However, using `Immutable.js` is not really straightforward. It adds another layer instead of using JS object directly e.g

```ts
const apps = List([{ name: 'slack' }, { name: 'skype' }]);
apps.get(0); // { name: 'slack' }

const app = Map({ name: 'slack' });
map.get("name"); // 'slack'

// Using Record if we want to access property directly
const AppRecord = Record({
    name: ''
});

class App extends AppRecord {
    constructor(props) {
        super(props);
    }
}

const newApp = new App({ name: 'slack' });
newApp.name; // 'slack'
```

We have to use `get` when using `List` and `Map`. Using `Record` could solve the issue, but if we have a very large object, using `Record` will be hard to maintain because we need to create each record per object and it's nested object.

Other issue is about JS compatibility because it needs to use `fromJS` and `toJS` methods to convert from and to JS object. 

I'd say that I'm not a fan of that lib and it makes things more complicated. 

Other possible approach I'm thinking of: 

## TS `readonly` + ESLint immutable
Since Angular using Typescript, let's use `Readonly<T>`, `ReadonlyArray` to enforce immutability. 

Also add this `no-mutation` ESLint rule as extra protection https://github.com/jonaskello/eslint-plugin-functional/blob/master/docs/rules/immutable-data.md


is there any better approach? 

Thank you
Use Next.js 12 on Netlify
Tags: nextjs, netlify, react
Published: 2021-10-27 21:18:19

---
title: Use Next.js 12 on Netlify
published: true
date: 2021-10-27 00:00:00 UTC
tags: nextjs, netlify, react
cover_image: https://images.unsplash.com/photo-1551431009-a802eeec77b1
canonical_url: https://www.netlify.com/blog/2021/10/27/use-next.js-12-on-netlify/
---

Yesterday Next.js 12 was released, and there are so many cool features coming out!

There’s a new Rust compiler, which will make builds and refreshes nice and speedy, React 18 support, native ESM support, and a few other really neat things.

You can get started with a new Next.js 12 project here to try all of these projects out of the box!

[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/cassidoo/next-netlify-starter&utm_source=github&utm_medium=nextstarter-cs&utm_campaign=devex-cs)

(Clicking this button will clone a starter repo to your Git provider of choice, and deploy it instantly to Netlify)

## Middleware support and the Edge

Out of the box, Netlify supports Middleware features with `next/server`! Middleware lets you run code before a request is completed. Based on the user’s incoming request, you can modify the response they receive!

To use Next.js Middleware, if you’re on the latest version of Next.js, create a `_middleware.js` or `_middleware.ts` file in your `pages/` directory. It will run on all routes within the `pages/` directory, similar to how `_app.js` works in wrapping all pages in that directory. Unlike `_app.js`, it can work on nested routes as well.

For example, let’s say you want a page to show up differently based on a cookie in the user’s request. You can use the `NextRequest` and `NextResponse` objects like so to rewrite the route:

```js
// pages/_middleware.js

import { NextRequest, NextResponse } from 'next/server'

export function middleware(req) {
  const someCookie = req.cookies['something']
  const res = NextResponse.rewrite(`/something/${someCookie}`)

  return res
}
```

As for geolocation, that requires access to [Edge Handlers](https://www.netlify.com/products/edge/edge-handlers/), which is in beta.

## Native support out of the box on Netlify

[Next.js works out of the box on Netlify](https://www.netlify.com/with/nextjs/) with zero configuration thanks to our open source build plugin! The latest version of it is in beta, which you can read more about [here](https://www.netlify.com/blog/2021/10/25/preview-whats-new-with-next.js-on-netlify/).

## Help ‘n’ tips ‘n’ fun

If you would like to learn more about Next.js, have questions about it, or would like to build your own plugins for your projects, check out [our community site](https://www.netlify.com/community/). There you’ll find our [forums](https://answers.netlify.com/) full of helpful folks, [Jamstack Explorers](https://explorers.netlify.com/) (a free course platform with courses on Next.js, serverless functions, and more), the [Netlify docs site](https://docs.netlify.com/), and moooore!