Web »

WebDevelop

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

Other tools

Insomnia - So you can finally GET some REST
https://insomnia.rest/download/

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のラッパー

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

クリップボードから画像を追加 (サイズの上限: 100 MB)