A painter and a black cat

# WebDevelop

{{toc}}

# FrameWork

## Article

POSTD - Javaのマイクロフレームワーク ― この新トレンドは見逃せない

http://postd.cc/java-micro-frameworks-the-new-trend-you-cant-ignore/

3つのフレームワークで学ぶエンタープライズJava開発入門（3）：いまさら聞けないRESTの基礎知識、JAX-RSを使ったREST APIの作り方と使い方

http://www.atmarkit.co.jp/ait/articles/1604/18/news020.html

GitHub - takahashiakira - Technology for Web Developers

https://github.com/takahashiakira/tech_for_web/wiki

>Webエンジニアリングに関するトピックで、フロントエンドをメインにバックエンドやインフラ周りまで、個人的にまとめたドキュメントを公開してます。

Qiita - JavaScriptフレームワーク選定の議論

http://qiita.com/azu/items/2921f62127b8d3a1aa03

The best front-end hacking cheatsheets — all in one place.

https://medium.freecodecamp.org/modern-frontend-hacking-cheatsheets-df9c2566c72a

## React

React Cheat Sheet

http://reactcheatsheet.com/

POSTD - 生のReactを知ろう – JSX、Flux、ES6、Webpackを使わず

http://postd.cc/learn-raw-react-no-jsx-flux-es6-webpack/

30分間React入門「いいねボタン」作成チュートリアル

http://c16e.com/1510161700/

yuumi3のお仕事日記 - サーバーサイドプログラマーのためのReact.js 入門 2. 開発環境の構築の続き

http://yuumi3.hatenablog.com/entry/2016/02/15/152357

# Chrome Developper Tool

## Article

最高にわかるChromeデベロッパーツールの使い方(チートシート付き)

http://commte.net/blog/archives/5882

chromeデベロッパー・ツールでローカルファイルに直接保存しながらCSSコーディングする方法

http://buchineko.website/chrome-devtools-cording/

かちびと.net - Chromeの設定画面等を表示するコマンドをまとめた・「CHROME://COMMANDS」

http://kachibito.net/useful-resource/chrome-commands http://www.chromecommands.com/

ShikousakuGo - リンクもまるごとキャプチャしてSVGで出力するChromeスクリーンショット拡張をつくりました

http://daiiz.hatenablog.com/entry/2016/04/06/235000

Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本

https://employment.en-japan.com/engineerhub/entry/2017/05/30/110000

Qiita - Chrome デベロッパーツールの Console を使いこなす

https://qiita.com/howdy39/items/c22c2cfafab88fa73d15

Qiita - 驚愕！その先に見えたdeveloper tool

https://qiita.com/ossun/items/0025a72056123e491082

chrome devtools の tips N連発

https://scrapbox.io/mizdra/chrome_devtools_%E3%81%AE_tips_N%E9%80%A3%E7%99%BA

ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ

https://blog.jxck.io/entries/2023-11-05/reload-and-cache.html

ブラウザ上でデバッグするときに使えるテクニック

https://gigazine.net/news/20231118-browser-debugging-tricks/

# Headless Chrome

## Article

Qiita - Dockerを使ってHeadless Chromeを動かしてみる

http://qiita.com/dd511805/items/dfe03c5486bf1421875a

# Web制作者向けのオンラインツール

## Article

Web便利ツール@ツールタロウ

http://tool-taro.com/

Dans Tools

http://www.danstools.com/

paiza開発日誌 - Web上からソースコードの圧縮・整形・変換など190以上のツールを利用可能な「BeautifyConverter」を徹底解説！

http://paiza.hatenablog.com/entry/2017/01/06/Web%E4%B8%8A%E3%81%8B%E3%82%89%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%9C%A7%E7%B8%AE%E3%83%BB%E6%95%B4%E5%BD%A2%E3%83%BB%E5%A4%89%E6%8F%9B%E3%81%AA%E3%81%A9190%E4%BB%A5%E4%B8%8A

Unused CSS - scan your website for unused CSS selectors

https://www.jitbit.com/unusedcss/

>URLを入力するだけで、使われてないCSSを検出してくれるサイト

A New Code Editor For The Web

https://scotch.io/bar-talk/a-new-code-editor-for-the-web

>ちょこっと見た目と動作を検証するのに使えそう

CoderTrick - さまざまなソースコードを別の言語に変換できるWebエディタ

https://codertrick.com/

HTMLのタグ内に含めて良いタグかどうかを教えてくれる、HTMLタグのネスト可否チェックツール・「Can I Include」

http://kachibito.net/useful-resource/can-i-include https://caninclude.glitch.me/

お客さんの端末でバグが出た際「OS／ブラウザ教えて」でなく「このURLの結果をコピペして」で網羅的に相手の環境を把握できます。

https://env.mount.jp/ https://twitter.com/kenjiokabe/status/1495572596825509889

1Tools - さまざまなツール

https://1tools.co

Web 開発者にとって必須の 100 の無料リソース

https://qiita.com/violetalexander120/items/22f43bd74209b84303a1

# Other tools

Insomnia - So you can finally GET some REST

https://insomnia.rest/download/

1buran/rHttp

https://github.com/1buran/rHttp

>TUIでHTTPリクエストの調整（メソッド、パス、QueryString、リクエストヘッダー、POSTデータなど）して送信できるツール

# Security

非機能要件のセキュリティのこと

## Document

GitHub - Webシステム／Webアプリケーションセキュリティ要件書 2.0

https://github.com/ueno1000/secreq

Webサービスにおけるファイルアップロード機能の仕様パターンとセキュリティ観点

https://blog.flatt.tech/entry/file_upload_security

開発者が知っておきたい「XSSの発生原理以外」の話（XSSって実際にアラート以外になにができるの？）

https://blog.flatt.tech/entry/xss_risk

XSSの脅威を考察する

https://techblog.securesky-tech.com/entry/20220308/

## Tools

nikto 2.1.5 の利用方法

http://www.checksite.jp/nikto-215/

# Performance

非機能要件の性能のこと

## Article

POSTD - サーバの負荷テストのための、何百万ものHTTPリクエストを発生させる方法

http://postd.cc/how-to-generate-millions-of-http-requests/

 > Tsung が一番良いということでFA

RAPID START - 簡単・手軽にWEBサイトを高速化できるCDNサービス

https://cdn.tokyo/

フロントエンドのパフォーマンスチューニングを俯瞰する

https://numb86-tech.hatenablog.com/entry/2021/05/05/224611

手軽に負荷テストができるツール「Taurus」がスゴい

https://zenn.dev/tonchan1216/articles/11afd147ea3dd2734315

>Jmeterのラッパー

# Cache

## Article

ブラウザキャッシュの仕組みについてまとめた

https://zenn.dev/mesi/articles/e218457fc6c52e

# Misc

## Article

テストサーバーへのアップが面倒なときはngrokでローカル環境を外部公開してみよう

http://liginc.co.jp/web/programming/156484

グーグルのJavaScriptツール集大成「Google Closure Tools」

http://itpro.nikkeibp.co.jp/article/COLUMN/20091112/340473/

貳佰伍拾陸夜日記 - APIへのPUTやDELETEもブラウザから試す

http://tarao.hatenablog.com/entry/2016/02/05/141516

Push7(プッシュ通知サービス)

https://push7.jp/

paiza開発日誌 - Web制作のクオリティを飛躍的に高めるJavaScriptライブラリ10選を一挙公開！

http://paiza.hatenablog.com/entry/2016/02/09/Web%E5%88%B6%E4%BD%9C%E3%81%AE%E3%82%AF%E3%82%AA%E3%83%AA%E3%83%86%E3%82%A3%E3%82%92%E9%A3%9B%E8%BA%8D%E7%9A%84%E3%81%AB%E9%AB%98%E3%82%81%E3%82%8BJavaScript%E3%83%A9%E3%82%A4%E3%83%96%E3%83%A9%E3%83%AA10

コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット40個まとめ

http://photoshopvip.net/archives/89320

You Don't Need jQuery

http://qiita.com/tatesuke/items/b9548dd484b01b139b74

Stale-While-Revalidate ヘッダによるブラウザキャッシュの非同期更新

https://blog.jxck.io/entries/2016-04-16/stale-while-revalidate.html

Design Patterns on CodePen

http://codepen.io/patterns/

Web制作の実装や勉強に役立つ便利なチートシートのまとめ

http://coliss.com/articles/build-websites/operation/work/cheat-sheets-for-front-end-developer-201604.html

小江戸プログラム群について - Selenium等を利用した自動実行の例

https://github.com/hirokundayon/koedo

Qiita - フロントエンドにテストを導入

http://qiita.com/howdy39/items/cdd5b252096f5a2fa438

kachibito.net - スタイル変更やグラフの種類の変更も可能でExcelライクに使えるembed対応のチャート生成サービス・「Statpedia」

http://kachibito.net/useful-resource/statpedia

Qiita - そろそろ真面目に、HTMLで帳票を描く話をしようか

http://qiita.com/cognitom/items/d39d5f19054c8c8fd592

coliss - head内に記述する要素の総まとめ -meta要素、link要素、ソーシャルサービス用の要素、ブラウザやスマホアプリ用の要素など

http://coliss.com/articles/build-websites/operation/work/collection-of-html-head-elements.html

DevDocs API Documentation - DevDocs combines multiple API documentations in a fast, organized, and searchable interface. 

http://devdocs.io/

リクルートテクノロジーズ　新人研修特別編を公開します

https://recruit-tech.co.jp/blog/2017/06/07/bootcamp2017/

TechRach - Webアプリのセッション管理とデータ保存を学ぶ#1（社内勉強会）

https://techracho.bpsinc.jp/hachi8833/2018_09_19/61260

これだけは押さえよう！住所フォームの作り方

https://blog.kenall.jp/entry/address-form-best-practice

デザイナーが抱くReact+TypeScriptの疑問を紐解き、フロントエンドに一歩近づこう

https://www.estie.jp/blog/entry/2023/04/10/123339

Webサービス公開前のチェックリスト

https://zenn.dev/catnose99/articles/547cbf57e5ad28