teleren/devto huggingface dataset:
Session 3 Create Github pages + Markdown.
Tags: osdc
Published: 2023-04-16 10:20:28

---
title: Session 3 Create Github pages + Markdown.
published: true
description: 
tags: #osdc
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-28 11:44 +0000
---

## Craete my own page in github
- First I have Download and installed the git client from [git-scm](https://git-scm.com/)
- start the git-bash application
- On Github create the USERNAME.github.io repository
- I got Error Permission denied [solution here](https://stackoverflow.com/questions/12940626/github-error-message-permission-denied-publickey)
- [Adding a new SSH key to your GitHub account](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account)
- I clone to my repository
- config my name and email
- create [My new Site](https://yaellevy.github.io) 
- [How To: Vi / Vim Save And Quit The Editor Command] (https://www.cyberciti.biz/faq/linux-unix-vim-save-and-quit-command/)
- [How to fix ‘fatal: refusing to merge unrelated histories’ Git error](https://komodor.com/learn/how-to-fix-fatal-refusing-to-merge-unrelated-histories-error/)
- add some picture and style - fun!!!
5 Amazing Project Ideas To Get Hired As A Full-Stack Developer 🔥
Tags: javascript, webdev, react, node
Published: 2023-04-16 10:19:55


![5 Amazing Project Ideas To Get Hired As A Full-Stack Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/007u53ofqxzj1w349a2n.jpg)
![5 Amazing Project Ideas To Get Hired As A Full-Stack Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2oyxw5jy3rqr4ezd9g4c.jpg)
![5 Amazing Project Ideas To Get Hired As A Full-Stack Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw2ux4r8f7y6r1evbfde.jpg)
![5 Amazing Project Ideas To Get Hired As A Full-Stack Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hgfnatrtvwvzt2rg2p9z.jpg)
![5 Amazing Project Ideas To Get Hired As A Full-Stack Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d8kzp0mj7dbv6otqpil5.jpg)
![5 Amazing Project Ideas To Get Hired As A Full-Stack Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahewqt3amkxucqovyuh9.jpg)
![5 Amazing Project Ideas To Get Hired As A Full-Stack Developer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxq3vklskd4k8oplxdd0.jpg)

---

𝗙𝗼𝗹𝗹𝗼𝘄 me on **[Linkedin](https://Linkedin.com/in/rammcodes)** for more:
Tips 💡+ Guides📜 + Resources ⚡ + Quizzes 🎲 related to Programming and Web Development 👨‍💻

![Ram Maheshwari (@rammcodes) Linkedin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l4sv1gkolhc4dulj1m8.png)

---

Do **Follow** me here on dev.to ✅⬇️
Ex 4- Familiarity with github Projects & PR for fixing
Tags: osdc, github
Published: 2023-04-16 10:17:11

**_Send PR To change MetaData on thus projects:_**

- 
https://github.com/git-cola/git-cola/pull/1309

https://github.com/davvid
------------------------------------------------------------

- 
iterative
/
dvc-data

https://github.com/iterative/dvc-data/pull/340
https://github.com/jdavid

----------------------------------------------------------

- 
popsims

https://github.com/caganze/popsims/pull/2
"Review required
At least 1 approving review is required by reviewers with write access."

--------------------------------------------------------

- 
Python Packaging Authority

https://github.com/pypa/sampleproject/edit/main/pyproject.toml
has author

------------------------------------------------

- 
dvclive
https://github.com/iterative/dvclive/compare/main...yaellevy:dvclive:patch-1
https://github.com/iterative/dvclive/pull/513

**_following this projects to final project on studies:_**

1. https://github.com/Messi-Q/Smart-Contract-Dataset
2. https://github.com/Messi-Q/GNNSCVulDetector
3. https://github.com/kadenzipfel/smart-contract-vulnerabilities
A new kind of working
Published: 2023-04-16 10:16:17

https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1

Streamlining, guidelines such as "convention over configuration" and a concise naming convention were the beginning of the success of the rails.

2021 DHH published [Rails-7 fulfilling a vision](https://rubyonrails.org/2021/12/15/Rails-7-fulfilling-a-vision) and there is an expectation that we can now build React-like applications, but as a true full-stack development with much less effort than a front-end separated application.

Along the way I found some details:

- Streamline Stimulus naming [npm vite-stimulus-initializer](https://www.npmjs.com/package/vite-stimulus-initializer)
- Working consistently with turbo means that part of the page hasn't changed between page changes. So they need to be refreshed in some other way: Popups often have content that needs to be refreshed when the popup or menu opens. I don't use lazy loading frames, but set a javascript trigger when the menu opens and reloads that part, and then set a trigger on `turbo:render' that makes sure all menus and popups are closed when a link is clicked.
- [Streamlining rendering of turbo frames](https://rubygems.org/gems/render_turbo_stream)

With all this and Vite as the frontend engine, full stack development feels like it should. Building such an app is much easier than separating frontend and backend, is minimally more effort than a classic Rails app bild React-like frontend apps, but with one huge advantage: having a consistent testing (rspec / capybara) over the whole app.

Rails was the most agile framework from the start. Then others caught up. These are added values that can make Rails an interesting framework for years to come.

https://dev.to/chmich/setup-vite-svelte-inertia-stimulus-bootstrap-foundation-on-rails-7-overview-1bk1

P.S.:
As a alternative to the default [trix](https://trix-editor.org/) editor i found [Jodit](https://www.npmjs.com/package/jodit) because of [issue on summernote on vite](https://stackoverflow.com/questions/75836943/summernote-on-vite-rails-production-not-working)
HTML CSS 基礎 Part 04 -- Web サイトに使うイラストを調達して加工する
Tags: html, css, img
Published: 2023-04-16 10:10:44


## freepik / pch.vector

https://www.freepik.com/search?author=10171402&authorSlug=pch.vector&format=author&last_filter=color&last_value=all&type=vector

よくスタートアップなどで使われれるイラストがある。

1. 会議中
2. 売り上げアップ
3. チームワーク

このようなイメージが多い。

---

## freepik / vectorjuice

https://www.freepik.com/author/vectorjuice

青のモニョモニョ背景にビジネスっぽいイラストが多い。

--

## 画質を落とす

https://www.reduceimages.com/

加工するためには、低画質にする必要があったりする

---

## 背景透明化

https://www.remove.bg/

freepik などで取得した、白背景の画像を透明背景にできる

---

## 透過フレームへの嵌め込み

MS Powerpoint

Google Slide では不可能。

重ねた後に「オブジェクトとして保存」をすると、
透過を保ったまま加工して画像で出力できる。

---

## その他イラスト系

https://twitter.com/kazunokoblog/status/1639960397334872064?s=20

kazunokoblog さんのツイート

ビジネスに使えそうなイラスト系素材がいっぱい！
Mean, Median, Mode Solver-CPP
Published: 2023-04-16 09:43:33

This is a solver that allows users to input data, and the computer will compute the ***mean, median, and mode*** of ***grouped data*** using a specific formula.

Github link: [Mean-Median-Mode-Solver-CPP](https://github.com/aaronmarayaa/mean-median-mode-GD-solver-CPP)
Create Music Player using HTML, CSS, and JavaScript
Tags: html, css, javascript, incoderweb
Published: 2023-04-16 09:38:07

Hello friends, today in this blog, we will learn how to create a music player with HTML, CSS, and JavaScript. In our previous blog, we saw [how to create Weather App using HTML, CSS, and Javascript](https://incoderweb.blogspot.com/2023/04/weather-app-javascript.html). You can check my other [javascript projects](https://incoderweb.blogspot.com/search/label/Javascript) after reading this blog.

Music is an integral part of our daily lives. Whether we're working, exercising, or just relaxing, music has the power to enhance our moods and make our experiences more enjoyable. As a web developer, creating a music player using HTML, CSS, and JavaScript can be a fun and useful project to undertake. 

In this tutorial, we will explore how to build a music player using these three core web technologies. We will cover the essential steps needed to create a functional music player, including setting up the HTML structure, writing the JavaScript code, and adding additional features such as a progress bar and volume control. 

By the end of this tutorial, you will have a solid understanding of how to create a music player using HTML, CSS, and JavaScript. You will also have the skills necessary to customize the player to your liking and add additional functionality. So, let's get started and create a music player that will help us enjoy our favorite tunes!

## 1 - Setting up the project
To begin creating a music player using HTML, CSS, and JavaScript, we need to set up the HTML structure. Here are the steps to follow:

- Create a new HTML file and name it index.html.
- Within the HTML file, create a basic structure by adding the <!DOCTYPE html> declaration and the <html> tags.
- Within the <html> tags, create the <head> and <body> tags.
- In the <head> tag, add the necessary metadata such as the title and any external stylesheets or scripts.
- Within the <body> tag, create a container for the music player using the <div> tag.
- Inside the container div, create a heading element that will display the name of the current track being played.
- Add an audio tag inside the container div, which will allow us to play and pause music.
- Create play and pause buttons using the <button> tag, and add them to the container div.
- Finally, add any additional elements or styling necessary to make the music player visually appealing.

> NOTE:
**You Can Check Live Demo of this project and download code and image files from [here](https://incoderweb.blogspot.com/2023/04/weather-app-javascript.html).**
Parch Linux new releases
Tags: linux, parchlinux, bssfoundation, archlinux
Published: 2023-04-16 09:29:13

Hello everyone,
We are proud to offer you the new releases of the Parch Linux.
Important changes of these releases:
- Removing Kde Falkon and changing the default browser to Firefox (in the version of CuteFish, the default browser is Chromium)
- Fixed slow boot problem
- Added ibus to CuteFish version to solve the problem of changing the keyboard layouts
- Fixed network manager problem in GNOME version
- Fixed the sudden closing of the installer in the xfce version
- Fixed reported problems

Click on The version names to download them:

[XFCE version](https://github.com/parchlinux/parch-iso-xfce/releases/download/2023-04-15.beta.2/Parchlinux.XFCE-2023.04.15-x86_64.iso)

[Gnome](https://github.com/parchlinux/Parch-iso-gnome/releases/download/2023-04-10.alpha.3/Parchlinux.Gnome-2023.04.10-x86_64.iso)

[Cinnamon](https://github.com/parchlinux/parch-iso-cinnamon/releases/download/2023-04-15.beta.1/Parchlinux.Cinnamon-2023.04.15-x86_64.iso)

[CuteFish](https://github.com/parchlinux/parch-iso-cutefish/releases/download/2023-04-15.alpha.2/Parchlinux.Cutefish-2023.04.15-x86_64.iso)

[Plasma](https://github.com/parchlinux/parch-iso-plasma/releases/download/2023-04-15.beta.4/Parchlinux.Plasma-2023.04.15-x86_64.iso)
ETAL.dev
Published: 2023-04-16 09:13:31

What's up dev.to community. Tyler here.  Looking for some ideas on what to do with my domain [etal.dev](https://www.etal.dev) 
I use it now for a back up of some of my companies services and descriptions however I want to give it more purpose, more interaction. It has so much potential but me with the small amount of skills I do have, and the fact I over think it all the time, can't make a decision. Lmk some good ideas! Thanks for letting me be a part of this community! 

[T](https://dev.to/tdev)
Statistics related to 6 Business Case(s) of EquipAny - Report Incidents and Identify Risks at Workplace
Tags: observability, construction, software, visualization
Published: 2023-04-16 09:09:29

# **Fatal Injuries due to Industry**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7edf2dv1sk3rvypd4s4.png)

## **Statistics of Issues due to Mobile Phone Usage**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0lwmfj0koainvi1t8hb.png)

## **Falls Lead in Workplace Fatalities**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddc9m4tzlhgfb9p1h1wl.png)

## **FPS and AGS Data Format, are 1991 Metadata Information**

DCPG and DCPT are used together to record dynamic cone penetrometer (DCP) tests where data is recorded as penetration per blow. If
data is recorded as blows over an interval, data shall be recorded in DPRG and DPRB

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s48rze78coatchu0oj4.png)

### **Data Format and Information Exchange**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdk9q61iy2ern7fxm4d1.png)

## **Labour Quotient Productivity is an increase, but Multi-Factor Productivity is dipping**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6cujowe8w858phszsrzv.png)

## **Monitoring Construction Activities on a small Building Project with an Open Space**

[![Object Detected from a Timelapse Video, of CCTV Camera Pros](https://res.cloudinary.com/marcomontalbano/image/upload/v1681683468/video_to_markdown/images/youtube--zUiXM8oOjwg-c05b58ac6eb4c4700831b2b3070cd403.jpg)](https://youtu.be/zUiXM8oOjwg "Object Detected from a Timelapse Video, of CCTV Camera Pros")

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yptah8af2z1tk3os6fgx.png)
Configuration object that does not match the API schema
Tags: javascript, beginners, react, nextjs
Published: 2023-04-16 09:03:39

`ready - started server on 0.0.0.0:3000, url: http://localhost:3000
Error [ValidationError]: Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration[0].cache.cacheDirectory: The provided value "G:\\.Arya\\!Project\\.new\\NextJS\\fullnext\\.next\\cache\\webpack" contains exclamation 
mark (!) which is not allowed because it's reserved for loader syntax.
   -> Base directory for the cache (defaults to node_modules/.cache/webpack).
 - configuration[0].context: The provided value "G:\\.Arya\\!Project\\.new\\NextJS\\fullnext" contains exclamation mark (!) which is not allowed because it's reserved for loader syntax.
   -> The base directory (absolute path!) for resolving the `entry` option. If `output.pathinfo` is set, the included pathinfo is shortened to this directory.`

Im new at reactjs and nextjs , i wanna learn it but i always get this error messages , and i don't know how to fix it :(
Trying to input values in mysql with validation
Published: 2023-04-16 08:34:08

I'm trying to input values in mysql that validates and use filter_var but it doesnt work and now error shows. this is my Controller 

```
public function appointmentStore(Request $request) {

    $request->validate([
            'appointmentDate' => 'required',
            'appointmentTime' => 'required',
            'services' => 'required',  
            'Others' => 'nullable',
            'appointmentDescription' => 'required',
         ],
        [
            'appointmentDate.required' => 'Appointment Date is required',
            'appointmentTime.required' => 'Appointment Time is required',
            'services.required' => 'services is required',
            'Others.required' => 'Other is required ',
            'appointmentDescription.required' => 'appointmentDescription is required',
        ]);
            $appointment = new appointment();

            $appointment->appointmentDate = filter_var($request->appointmentDate, FILTER_SANITIZE_STRING);
            $appointment->appointmentTime = filter_var($request->appointmentTime, FILTER_SANITIZE_STRING);
            $appointment->Others = filter_var($request->Others, FILTER_SANITIZE_STRING);
            $appointment->appointmentDescription = filter_var($request->appointmentDescription, FILTER_SANITIZE_STRING);
            $appointment->services = filter_var($request->services, FILTER_SANITIZE_STRING);
            $appointment->save();

            return redirect()->route('setAppointment.show')->with('success', 'Appointment Saved'); 
    }
```
Flutter Dio Interceptor
Tags: flutter, dio
Published: 2023-04-16 08:32:05

Terkadang dalam membuat aplikasi kita perlu mengetahui data request yang dikirim ke server guna memastikan apakah data yang dikirim apakah betul.

Hal ini bisa dilakukan dengan *tracing* menggunakan Interceptor pada package Dio. Interceptor sendiri merupakan suatu mekanisme yang digunakan untuk memodifikasi request sebelum dikirim dan response sebelum diterima. Fitur ini sangat berguna bagi developer dalam mengirimkan request dengan header khusus atau juga mengambil data pada setiap response yang diterima.

Ada beberapa jenis interceptor, pada kasus ini interceptor yang dipakai adalah **DioLoggingInterceptor**. Berikut langkah - langkah penggunaannya:

1. Pastikan project sudah menggunakan package Dio, lalu buat kelas baru yang berisi seperti berikut

```dart
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';

class LoggingInterceptor extends Interceptor {
  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    super.onResponse(response, handler);
    debugPrint('\n\n');
    debugPrint('<--- HTTP CODE : ${response.statusCode} URL : ${response.requestOptions.baseUrl}${response.requestOptions.path}');
    debugPrint('Headers: ');
    printWrapped('Response : ${response.data}');
    debugPrint('<--- END HTTP');
  }

  void printWrapped(String text) {
    final RegExp pattern = RegExp('.{1,800}');
    pattern.allMatches(text).forEach((RegExpMatch match) => debugPrint(match.group(0)));
  }
}
```

2. Kemudian tinggal mentautkan dengan objek Dio-nya

```dart
final dio = Dio();

dio.interceptors.add(LoggingInterceptor());
```

Setelah itu pada saat running akan mendapatkan output seperti ini

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qk954wetztu960cdaqji.png)
Trying to put input values in mysql that validates entries with this controller but doesnt work
Published: 2023-04-16 08:28:49

Im using filter_Var for sanitizing string to my input values

```
public function appointmentStore(Request $request) {

    $request->validate([
            'appointmentDate' => 'required',
            'appointmentTime' => 'required',
            'services' => 'required',  
            'Others' => 'nullable',
            'appointmentDescription' => 'required',
         ],
        [
            'appointmentDate.required' => 'Appointment Date is required',
            'appointmentTime.required' => 'Appointment Time is required',
            'services.required' => 'services is required',
            'Others.required' => 'Other is required ',
            'appointmentDescription.required' => 'appointmentDescription is required',
        ]);
            $appointment = new appointment();

            $appointment->appointmentDate = filter_var($request->appointmentDate, FILTER_SANITIZE_STRING);
            $appointment->appointmentTime = filter_var($request->appointmentTime, FILTER_SANITIZE_STRING);
            $appointment->Others = filter_var($request->Others, FILTER_SANITIZE_STRING);
            $appointment->appointmentDescription = filter_var($request->appointmentDescription, FILTER_SANITIZE_STRING);
            $appointment->services = filter_var($request->services, FILTER_SANITIZE_STRING);
            $appointment->save();

            return redirect()->route('setAppointment.show')->with('success', 'Appointment Saved'); 
    }
```
Simplify your EKS Cluster Observability with Prometheus & Grafana
Tags: aws, kubernetes, cloudnative, devops
Published: 2023-04-16 08:15:00

Good day fellow Bloggers,

Its been a while since I posted a blog, I have been settling down in my new role and studying for a beast of an exam coming up.

**<u>Without further delay, Kuberenetes Observability Made Easy! </u>**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52jb947236jkr2ddb2x3.PNG)

I would encourage everyone get used of the CloudFormation YAML Manifest construction, whilst we are seeing more vendor agnostic IaC platforms such as Terraform, it definitley helped me prepare for my AWS DevOps Professional Exam coming up, so I would encourage you to make sure you sharpen up your skillsets wherever you can. I have the link to the AWS CloudFormation Documentation so familiarize yourself with the whitepapers and dive right in!

https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html

The below context will give you an example of my custom YAML CloudFormation Stackset:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gji9h07ck0jrn3qbvzv6.PNG)

Once compiled you can use API Calls with the AWS CLI installed either to your WSL (Windows Sub-System for Linux) or PowerShell Terminals. The CloudFormation stacks simply build and can be destroyed and re-constructed in minutes.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k9e0ffyair94tdw433u.PNG)

So utilizing the above toolsets I created a EKS Cluster and added a second stack with references to my existing stack. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhgs8c2jckl0ggqug50m.png)

Once deployed you can then add further toolsets such as the Prometheus stack set using the Helm Community Install and your almost at the end of your race.

I will recommend installing Kubernetes Lens as its much easier to install and manage your K8s cluster then directly managing it via CLI / However I am a CLI Jockey and still prefer the terminal.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6pfpv33m9d8hkczm8gz.PNG)

Ensure that within your settings you configure your ./Kube/Config context destination so that lens can get straight to work as per the below:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5mpzgv1p8ginbgl89p7h.PNG)

Finally once the prometheus and helm stack completes the install you will be ready to start monitoring logs, alerting & Graphs / Dashboards using both Prometheus and Grafana.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q2rf5apabqccq38r4y67.PNG)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d9sw4r2jqzj69gn7c9yx.PNG)

For more tutorials feel free to visit: https://deadkithedeveloper.click/

Or 

Connect with me on LinkedIn via 
https://www.linkedin.com/in/devonpatrick-adkins-%E2%98%81-1068781a3/

Have a great week ahead!

Regards
DevonPatrick
AWS Community Builder & Cisco Champion