最近読んだ記事で、参考になったと感じるもの?
# この記事を書こうと思ったきっかけ
未経験からフロントエンドエンジニアになるべく勉強を初めて、早2ヶ月。Qiita初めての投稿で、これまでのインプットを一度アウトプットしてみようと思います。
# 参考にさせていただいた記事 -３選-
https://zenn.dev/praha/articles/prepare-book#%E6%9C%AC%E3%81%AE%E4%BA%88%E7%BF%92%E3%81%A8%E5%BE%A9%E7%BF%92
分からないことが分からない時の対処法
理解できていることとできていないこと、それぞれはっきりさせること。
特に新しいことを学ぶことしかない初学者の私にとって、学習の指標になっています。
***
https://qiita.com/Yametaro/items/f9e449b9335051acebf3
このような記事の書き方もあるよ、という感じ
この記事見ていると、アウトプットはやはり自身が楽しくないと続かないなと思う。
楽しくなるような書き方を模索していきます
***
https://qiita.com/degudegu25
# あらすじ
Microsoft Azureを使用したGo + Gin + GormのWebアプリのデプロイができたので、メモ程度に書き込みます。
## 環境
・Mac OS
・Microsoft Azure
・Visual Studio Code
# Microsoft Azure操作
## アカウントの作成、またはログイン
[Azure公式サイト](https://azure.microsoft.com/ja-jp/free/search/)でアカウントの作成、またはログインを行う。
## Webアプリの作成
[Webアプリ]の[作成]を選択
[基本]画面の各種項目設定後、[確認および作成]ボタンクリック後、作成
例）
“`html
“`
Bootstrapと違い、すでに用意されたコンポーネントから拡張するのではなく、自身が作成したいコンポーネントに対してクラスを当てるため非常にカスタマイズ性と自由度が高いです。
また、ユーティリティクラスで構成されるため、コンポーネントに
ウェブセキュリティを扱った[OvertheWire Natas](https://overthewire.org/wargames/natas/)のLevel 0 ~ 17までの解法
## natas0
開発者ツールでソースを確認するだけ
“`html:index.html
natas0
You can find the password for the next level on this page.
“`
## natas1
右クリックが禁止されているが、F12キーで開発者ツールを開ける
“`html:index.html
natas1
文字列を配列と乱数を使って天気を表示するプログラムを実装しました。
“`html
文字列の置換テスト
```
あとは `body` の `py-script` 内にpythonのコードを書くだけ。
```html
print("Hello, world!");
```
」では以下のように解説されています。
> ウェブパフォーマンスとは、遅い処理を速く見せることも含めて、ウェブサイトを速くすることです。サイトがすぐに読み込まれるか、ユーザーがすぐに操作を始めることができるか、何かの読み込みに時間がかかっている場合には安心感のあるフィードバック (ローディングスピナーなど) を提供しているか。スクロールやアニメーションはスムーズか。
今回は下記の2つの点に着目してチェックリストを考えていきます。
1. サイトの読み込み時間を削減する
1. ユーザーが操作可能な状態を早く実現する
## 1. サイトの読み込み時間を削減する
# はじめに
だいぶ初歩的な部分ではありますが、ちょっとハマったのでメモ。
# 事象
form内にあるbuttonのclickイベント時にjQueryで処理を実行していたが、何らかの別のイベントも発火していたらしく意図した挙動になっていなかった。
# 原因
form内にあるbuttonでtype属性指定なしだと、submitイベントが発火する仕様があるとのことでそれが原因だった。
```html:qiita.html
```
# 対策
type属性をbuttonに設定すると、submitイベントが発火しなくなるとのことで解決！
```html:qiita.html
```
# 最後に
割と単純なことではあったが、ハマってしまった。。。
# 参考
【HTML】form 内で button 要素を押した場合に必ずsubmitしてしまう原因
## XAMPP 環境構築
公式サイト：[XAMPP](https://www.apachefriends.org/jp/index.html)
①Headerにある『ダウンロード』をクリックする。
②『Launchpadは使用しないでください。Launchpadではショートカットメニューにアクセスできません。』と表示されたので、Controlキーを押しながらアプリケーションアイコンをクリックして、ショートカットメニューから「開く」を選択し、「開く」をクリック。
③インストールする。
## スーパーグローバル変数
全てのスコープで使用できる組み込みの変数の事。
PHPの定義済みの変数の中には、『スーパーグローバル』というものがあり、スクリプト全体を通して全てのスコープで使用可能な変数の事。
## htdocsにファイルを作成
作成したファイルをVScodeにドラッグ＆ドロップする
```index.php
HTML4.01からHTML5に移行する過程で、同じ機能を持つ別の要素や、
CSSの機能への統合などによって削除された要素。
## acronym
* title属性と組み合わせることで、略語の正式名称を指定する要素。
* abbr要素に統合されたため廃止。
## applet
* 文書にJavaアプレットを埋め込むための要素。
* Javaアプレット自体がJava 11で廃止されたため、こちらも廃止に。
## basefont
* この要素以降のテキストのフォント（サイズ、色等）を指定する。
* CSSで実現可能な内容だったため廃止。
## bgsound
* headタグ内に記述することで、Webページを開いた時にBGMや効果音を再生することができる。
* Internet Explorer(IE)独自の要素であり、IEが2022年6月に廃止された今では無用の長物。
* audio要素を使えば、IE以外のブラウザでも同様の事が可能。
## big
* タグで囲った部分の文字サイズが周囲より一回り大きくなる。
* CSSで実現可能な内容だったため廃止。
## blink
7行テトリスの記事を読んだ
https://qiita.com/ryuichi1208/items/f9e6ac2b99bbe4fc82d3
7行マインスイーパー(`618 byte`)を作った。
下記を.htmlなテキストファイルに貼り付けて保存してブラウザで開くと遊べる。
リロードでリセット
[ミニファイア](https://www.toptal.com/developers/javascript-minifier)に噛ませたらもうちょっとだけ短くなるけど自前の範囲で記載する。
```html:7行マインスイーパー
