teleren/devto huggingface dataset:
SSG for generating html
Tags: javascript, css, html, webdev
Published: 2021-09-18 03:17:09

<strong>OSD600</strong> feels like a subject that composes a program (?) on a specific topic by mobilizing everything that has been learned so far. In the first week, instructions were released to create release 0.1, and I tried to tailor the code as best as possible to the requirements of that list.

When creating the api, I chose node js, which I was most confident and used the most.

After that, I created a repository in Git and named it "jun-ssg" after me. :)

#The SSG for text file!
Open Source Project 0.1

jun-ssg is a simple html generator. You can extract your file contents and put them as HTML content.

#How to use?
Before start to use
After downloaded files delete the package-lock.json
run "npm install" at terminal
You can dowload and run the repository files -node src/app.js

or

can run by npm

npm i -g https://github.com/juuuuuuun/jun-ssg.git

Example statements
Options:

-i, --input Input a file or a directory [string] [required]

-o, --output Specify the output directory [string]

-s, --stylesheet Import css URL [string]

-v, --version Show version number [boolean]

-h, --help Show usage information [boolean]

Examples: After install my package, jun-ssg -i 'Silver Blaze.txt'

#Example

1. Cloning my repository![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ljpioxhj5y1x77sau6w.png)
2. After complete the cloning terminal should show like this![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4wgsq3p2ukftnzbuasl.png)
3. Change the dir location to the cloned folder![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/697udi8h3vbuex6gz8wf.png)
4.  Run "npm install" to use pre-set npm modules![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q49q02gjqxz6momm2ojl.png)
 
5. Try to run "node src/app.js" if everything is fine the terminal should show how to use this api.![5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fp6v4utel61e3thoo89t.png)

6. Type any command which is set, but in this case will run -input option type "node src/app.js -i 'Sherlock-Holmes-Selected-Stories'".![6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vegjcm7qwhs3441u5hd.png)
 
7. You can check generated htmls.![7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vizppsak96u3s5o07pq.png)
8. Also, you can apply any css stylesheet like this way.![8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r8saqdx6ipjtotrgu794.png)
9. Then, you can see the htmls with nice design :)![9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4nvevrr4lui0wllrcheq.png)
10. Text file what you wished.![10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u20bvotlne1mylgv85ih.png)

#My Github Repo
View the repo on <a href="https://github.com/juuuuuuun/jun-ssg">Github</a>.
Validating an upload as an image OR a video with Laravel
Tags: laravel, php
Published: 2021-09-18 03:10:10

---
title: Validating an upload as an image OR a video with Laravel
published: true
description: Configure Laravel's validator to accept an image or a video in a single field with different file size rules for each.
tags: laravel,php
---

Laravel's Validator makes it simple to validate a request's file field as an image using the `'image'` rule, and you can hack together rules for validating a video by restricting MIME types.

```php
$request->validate([
    'image_upload' => 'image|max:1024',
    'video_upload' => 'mimetypes:video/avi,video/mpeg,video/quicktime|max:102400'
]);
```

But what happens if you have a single `upload` field that should accept a video that's up to ten megabytes, _or_ accept an image that's a megabyte or less? That's a lot trickier with Laravel's Validator: there doesn't seem to be an elegant solution for this using Laravel's built-in validation rules.

Thankfully, Laravel allows us to create our own custom validation rules. We can create [a custom rule closure](https://laravel.com/docs/8.x/validation#using-closures) that checks if the upload is an image or a video, then validates the rules based on the upload type.

```php
$request->validate([
    'file', // Confirm the upload is a file before checking its type.
    function ($attribute, $value, $fail) {
        $is_image = Validator::make(
            ['upload' => $value],
            ['upload' => 'image']
        )->passes();

        $is_video = Validator::make(
            ['upload' => $value],
            ['upload' => 'mimetypes:video/avi,video/mpeg,video/quicktime']
        )->passes();

        if (!$is_video && !$is_image) {
            $fail(':attribute must be image or video.');
        }

        if ($is_video) {
            $validator = Validator::make(
                ['video' => $value],
                ['video' => "max:102400"]
            );
            if ($validator->fails()) {
                $fail(":attribute must be 10 megabytes or less.");
            }
        }

        if ($is_image) {
            $validator = Validator::make(
                ['image' => $value],
                ['image' => "max:1024"]
            );
            if ($validator->fails()) {
                $fail(":attribute must be one megabyte or less.");
            }
        }
    }
]);
```

I'll be the first to admit: this code looks pretty inelegant. But it works, and the closure leverages existing Validator rules like `'image'` and `'max'`. 

If you prefer a more object-oriented approach, you could extract this code to a [Custom Rule Object](https://laravel.com/docs/8.x/validation#using-rule-objects), and maybe extract methods for `is_video()` and `is_image()`. You could even make the max upload sizes configurable in the Rule object's constructor–the sky is the limit!

Hopefully this post saves you some time if you run into this particular challenge in one of your own projects. Also, please drop a comment if you know a more elegant way of accomplishing this!
How To Create Laravel Relationship Tables
Published: 2021-09-18 02:51:55

Take the example where you have a users table and a user_address table. A user can have many addresses and an address belongs to a user. 

Default user table 

     Schema::create('users', function (Blueprint $table) {
                $table->bigIncrements('id');
                $table->string('name');
                $table->string('email')->unique();
                $table->timestamp('email_verified_at')->nullable();
                $table->string('password');
                $table->rememberToken();
                $table->timestamps();
            });

user_addresses table with user_id as the foreign key 

      Schema::create('user_addresses', function (Blueprint $table) {
                $table->bigIncrements('id'); // by default the primary key is set to unsigned big integer
                $table->unsignedBigInteger('user_id'); //associate the address with a user
                $table->text('address');
                $table->string('city');
                $table->string('country');
                $table->timestamps();
    
                $table->foreign('user_id')->references('id')->on('users')->onDelete('cascade');
            });

After defining the migrations, next step is to define the relationship in their respective model classes 

In the User Model, add 

    public function address(){
            return $this->hasMany(UserAddress::class );
        }

And in the UserAddress Model, add 

     public function user(){
            return $this->belongsTo(User::class, 'user_id');
        }

source: https://stackoverflow.com/questions/48180314/how-to-create-foreign-key-by-laravel-migration#48180439
Learning to speak about your code to non-programmers is essential (100 Bytes Of Wisdom: Day 70)
Tags: career, journey, advice
Published: 2021-09-18 02:43:13

---
title: Learning to speak about your code to non-programmers is essential (100 Bytes Of Wisdom: Day 70)
published: true
description: Bytes of Wisdom is a new project by Sam Jarman that brings together snippets of advice for software engineers
tags: career, journey, advice
//cover_image: https://direct_url_to_image.jpg
---

![Learning to speak about your code to non-programmers is essential](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mujez0vdai9duwxel981.png)

Too often I see developers struggle to communicate their progress, challenges or even successes to people who are not familiar with programming in the nitty gritty level. This causes suffering for both them and the person they are communicating with. Learning to use figurative languages, simplications, examples and many other techniques to help you communicate accurately but abstractly about your work will serve you incredibly well over your career. You will be called upon more to represent your team, be first in thought for presentations and of course move up the technical chain faster with more promotions. It's a skill a lot of developers don't think to work on, but those who do very much reap the rewards.

Heads up: As with any terse bit of advice, there will be exceptions of course, and subtleties and nuance that can't possibly be captured in a Byte of Wisdom. This has been what I've experienced, I'd love to hear yours in the comments too!

You can catch up with all the other bytes at http://bytesofwisdom.com/
HTML: Una cosa llamada !DOCTYPE
Tags: html, programming, coding, frontend
Published: 2021-09-18 02:41:30

¡Hola, ahora en español!

Pues la idea de la serie de conceptos sobre cosas de frontend, es poder ayudarles a preparar sus entrevistas técnicas y por otro lado, me ayuda a repasar cosas que de pronto se olvidan. 

En HTML existe una cosa llamada !DOCTYPE. Primero, debemos de saber que no es una etiqueta del HTML. Ahora bien, aunque no es un tag, es una keyword o declaración importante dentro de nuestros archivos de HTML. 

Primero, pues cualquier cosa que hagamos, el navegador es el encargado de interpretar lo que estamos construyendo. En un inicio se supone que el !DOCTYPE se encagaba de avisar al navegador el tipo de documento que tendría que esperar, pero actualmente lo que informa es el versionado del HTML que estamos usando en el proyecto.  

En el caso de HTML 5, la declaración es muy fácil, pues solo tenemos que poner:

<!DOCTYPE html>

La declaración anterior no indica explícitamente que sea un archivo de HTML 5, en realidad es una declaración por default, dado que antes del HTML5 se tenían que agregar algunos elementos de DTD que sí especificaran la versión del HTML que estábamos usando. 

Por ejemplo, para especificar un HTML 4, teníamos que colocar algo así: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Otra cosa a resaltar es que nuestro !DOCTYPE no es 'case sensitive', esto quiere decir que no importa si lo escribimos en mayúscula o minúscula; el navegador podrá interpretarlo.
หัดใช้งาน GraphQL ด้วย Apollo Server
Published: 2021-09-18 02:39:24

1) เริ่มต้นการทำงานของ Apollo Server ด้วย Koa

app.ts
```typescript
/*
import Koa from 'koa'
import Router from 'koa-router'
*/
// จาก lib `apollo-server-koa`
import { ApolloServer } from 'apollo-server-koa'

// ไฟล์นี้สร้างในข้อสอง
import graphqlSchema from './graphqlSchema'

/*
async function createApp(): Promise<Koa> {

 const application = new Koa()
 const router = new Router()
 */

 
 const graphqlServer = new ApolloServer({
  introspection: true,
  schema: graphqlSchema,
  context: ({ ctx }) => ctx
 })
 
 await graphqlServer.start()
 
 router.post("/graphql", graphqlServer.getMiddleware())
 router.get("/graphql", graphqlServer.getMiddleware())
 
 /*
 application.use(router.routes())
 return application

}
*/
```

2) กำหนด schema เริ่มต้น

schema.ts
```typescript
import { GraphQLObjectType, GraphQLSchema } from 'graphql'
import GetUser from '.......'

export default new GraphQLSchema({
  query: new GraphQLObjectType({
    name: 'Query',
    fields: {
      // สามารถเพิ่มประเภทของการ Query ได้เรื่อย ๆ
      GetUser,
      .
      ..
      ...
    }
  }),
})
```

3) กำหนด Query `GetUser`
```typescript
import User from '.......'

export default {
  type: User,
  resolve: async () => ({
    id: "test_id",
    name: "test_name"
  }),
}
```

4) กำหนด Schema `User`
```typescript
import { GraphQLObjectType, GraphQLID, GraphQLString } from "graphql"

export const User = new GraphQLObjectType({
  name: 'User',
  fields: () => ({
    id: {
      type: GraphQLID,
    },
    name: {
      type: GraphQLString,
      resolve: async args => {
        // args จะเป็น resolve ของ query สามารถเอาไปใช้งานต่อได้
        console.log(args) // { id: 'test_id', name: 'test_name' }
        return 'finish'
      }
    }
  }),
})

```
25+ Awesome HTML Progress bar
Tags: html, css, codenewbie, beginners
Published: 2021-09-18 02:10:43

Hello Friends, in this article I have listed 25+ Awesome CSS Progress bar Examples. Check out these excellent HTML Progress bar which are available on CodePen.

### Best collection of CSS Progress bar
***In this collection, I have listed over 25+ best HTML Progress bar Check out these Awesome Progress bar like: #1 SVG Circle Progress Bar, #2 Gradient Progress Bar, #3 Dynamic Bootstrap Progress Bar and many more.***

#### #1 Cool Progress Bar
Cool Progress Bar Animation, which was developed by Gabriele Corti. Moreover, you can customize it according to your wish and need.
{% codepen https://codepen.io/borntofrappe/pen/gNLKBw %}

#### #2 Pure CSS radial progress bar
Radial progress bar, which was developed by Alex Marinenko. Moreover, you can customize it according to your wish and need.
{% codepen https://codepen.io/jo-asakura/pen/stFHi %}


#### #3 HTML 3D Progress bar
3D Progress bar, which was developed by Rafael González. Moreover, you can customize it according to your wish and need.
{% codepen https://codepen.io/rgg/pen/QbRyOq %}


#### #4 Dynamic Bootstrap Progress Bar
Dynamic Bootstrap Progress Bar, which was developed by Gusti Tammam. Moreover, you can customize it according to your wish and need.
{% codepen https://codepen.io/gustitammam/pen/RRXGdj %}

#### #5 Form Progress Bar
Form Progress Bar, which was developed by Himanshu C. Moreover, you can customize it according to your wish and need.
{% codepen https://codepen.io/himanshu/pen/syLAh %}


#### <a href="https://blog.stackfindover.com/css-progress-bar-examples/">Check out all awesome CSS Progress bar</a>
After peer testing and review _ Lab01
Tags: opensource, lab, peer, testing
Published: 2021-09-18 01:33:08

This time I had difficulties with finding a partner for this release.  I tried to find a partner on slack to exchange codes and review each other's codes. And I found one to work together. However, the one who promised to review my code is disappear and did not read my messages. So, I found another partner. He was also Korean like me! 

 My partner was using C# and I know C# but am not an expert of the language and I didn't have C# on my personal laptop. So, it took some time to download tools for C# on visual studio, review, and run his code. It surprised me because compare to Node.js what I used, there are lots of folders to run a simple program. 

I am a person who feels so shy to get code reviews from my friends. After he reviewed my code, I was quite surprised by his feedback. There is some part that I didn't notice that is a defect but it was a defect and it fails my program. For my program, there was a problem that My code does not accept the files with spaces. (<https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/issues/2/>) Also, there was some problem reading the whole file in a folder. (<https://github.com/suhhee1011/suhheeKim_OSD_release0.1_create_ssg/issues/2/>)

And as I also reviewed my partner's codes. I found some issues, such as all the text file information goes into one "h1" tag, not into "p" tags.(<https://github.com/mkim219/kimchi-ssg/issues/1/>), The same Style sheet is included in the head tag twice(<https://github.com/mkim219/kimchi-ssg/issues/2 />) and files in the dist folder are not deleted before creating new HTML.(<https://github.com/mkim219/kimchi-ssg/issues/3 />)

After both of us reviewed each other's code. I revied his issues on my codes and try to fix them. I was able to fix both of the issues by just adding a few more lines. 
With this testing and reviewing process, I think it is quite an important process in creating a program. Because one person can find all the issues that exist in the program. Especially, if the program is written by themselves. I think I will keep this procedure for my future codes and programs to make it better.
CodeLand is almost here! 🌈
Tags: codeland, codenewbie, meta
Published: 2021-09-18 00:55:43

---
title: CodeLand is almost here! 🌈 
published: true
description: Join us at CodeLand 2021! 
tags: codeland, codenewbie, meta
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/teehhlk6nt94xk2p6hxi.png
---

Hey everyone! 

I just wanted to share a quick reminder that [CodeLand 2021](https://codelandconf.com) is coming up _next week_. This event is such a special celebration of the challenging, fascinating, and fun journey that is coding. I hope to see you there (virtually 😉). 

Whether you're an early-career developer, brand new to coding, or you care about making this industry friendlier for all levels, CodeLand is the place to be. 

### Some quick info:
- **If you are registered already**, expect an email next week with all the details you'll need to join us on Thursday and Friday (September 23 & 24).  
- **If you are registered and have a workshop ticket**, you should have gotten an email this week with some specific reminders for the one you'll be participating in. Check your spam folder if you don't see it!
- **If you haven't registered yet**, don't worry... there's still time! Grab your ticket (starting at $0) [here](https://ti.to/codenewbie/codeland-2021).  

---

Have a great weekend!

![Spongebob Rainbow](https://media.giphy.com/media/SKGo6OYe24EBG/giphy.gif?cid=ecf05e47slj3mexidjjk8nyf1nyf8caoe62jrwohccyumfdb&rid=giphy.gif&ct=g)
Static IPv4/IPv6 Addresses - Debian 11
Tags: linux
Published: 2022-08-04 05:08:24

---
title: Static IPv4/IPv6 Addresses - Debian 11
published: true
date: 2021-09-18 00:45:00 UTC
tags: Linux
canonical_url: https://blog.engyak.co/2021/09/static-ipv4ipv6-addresses-debian-11.html
---

 Here's how to set both static IPv4 and IPv6 addressing on Debian 11. The new portions are outlined in **_italics._**

First, edit `/etc/network/interfaces`

```
auto lo
auto ens192
iface lo inet loopback
# The primary network interface
allow-hotplug ens192
iface ens192 inet static
    address {{ ipv4.address }}
    gateway {{ ipv4.gateway }}
iface ens192 inet6 static
    address {{ ipv6.address }}
    gateway {{ ipv6.gateway }}
```

Then, restart your networking stack:

```
systemctl restart networking
```
🏺Writing A Post With Markdown
Tags: markdown
Published: 2021-09-18 00:38:11

I am taking a course on Scimba about ~~HTML~~ markdown.

The course asks the students to create a **DEV.TO** post using markdown. So this *is* my post.

---

> "Get Good, Get Great, Get Better" - Dylan Israel

---

The three best online coding resources are:

* Scrimba
* Team Treehouse
* freeCodeCamp

You can learn cool stuff like this:

```html
<h1>Coding is fun</h1>
<p>You will like it.</p>
```

```js
let number = 1;
number +=1;
console.log(number);
```
Here is an image I grabbed on [unsplash](https://unsplash.com):

![Alt Text Example](https://images.unsplash.com/photo-1564865878688-9a244444042a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80)

#h3 About Me

I am a technology professional who really loves to code and learn new things. In my free time I like to run and bike.

[![My Bitmoji](https://sdk.bitmoji.com/render/panel/e0c8b93f-c246-46e8-9db2-ec0cb01ec9eb-a203b507-a7de-4f53-977d-41580e136650-v1.png)](https://www.bitmoji.com/)
Release 0.1
Published: 2021-09-18 00:26:20

> The first assignment required us to create a static site generator. I choose Python to write a simple Static Site Generator tool named Magic-SSG is, and it can help user to generate .html from . txt files.

## Features
> So far, this tool has the following functions:
* Allows the user to specify an input file or folder to open a .txt file and generate a .html file.
* Automatically identify titles and content.
* Specify a different output directory using --output or -o.
* Allow the input to be a deep tree of files and folders.
* Allow user to check the tool's version.

## Installation
> Make sure you have installed Python version 3.8.5 or above.

## How to use
1. Generate a .html file from a file or folder:
> `  python magic_ssg.py -i/--input <file name or folder name>`

2. Specify a different output directory using --output or -o.
> python magic_ssg.py --input <input file name or folder name> --output <out put folder>
  
3. Check the tool's version
> `  python magic_ssg.py –v/--version`
  
4. Display how to use the tool
> `  python magic_ssg.py –h`

## Example
> Full list of features:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvd5ao4h7r1bm1prpk4g.png)
> input file:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2lv22xz6b8byl84cn8r.png)
> output file:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r08erike6kspvnx3yd9u.png)


## Links
> Link to my github repo from [here] (https://github.com/Yoda-Canada/Magic-SSG)
Shinny-ssg CLI Tool 
Tags: csharp, opensource, commandlineutils
Published: 2021-09-18 00:10:33

This week, I have a chance to create a command line tool to generate an .html file or folder from .txt file. My tool's name is shinny-ssg and it was built with C#, .Net Core 3.1 and Command Line Utils.
## Features:
* generate  .html files from .txt files with title
* accept folder as input path to generate .html files in the destination folder which will has the same structure as original folder
* give user the options to specify destination folder and/or stylesheet URL link

## Options
![Options](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/idsyct8arj00q6zwi47m.png)

## How to use
* Download or clone the shinny-ssg folder to your local machine
* Use command prompt navigate to the folder netcoreapp3.1 in the shinny-ssg folder ( path `shinny-ssg\bin\Debug\netcoreapp3.1`)
* In the command prompt, run shinny-ssg.exe -h to see the options
* The file will be generated in the `shinny-ssg\bin\Debug\netcoreapp3.1\dist` folder by default or in the destination folder if specified by user.

## Examples
Source folder: 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsu18j3jawegwoe4vqek.png)
Command:
 `shinny-ssg.exe -i C:\Users\khoit\Desktop\OSD600\Sherlock-Holmes-Selected-Stories -o ../../Destination -s https://cdn.jsdelivr.net/npm/water.css@2/out/water.css`

Destination folder 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmcwxpdt90s9zypplysi.png)

File HTML is generated with Css style
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rtghd05wif37t3a6ub1b.png)

## Source Code
You can find my source code in this repo: 
{% github hphan9/shinny-ssg %}