現代ウェブフロントエンド（ウェブアプリケーション）について理解する唯一の方法｜erukiti
この記事は、ウェブ技術の開発者（Java, PHP, Ruby, Go... 全て含む）のうち、少しでもJavaScriptを触ったことがあるけど、現代ウェブフロントエンドというか、特にウェブアプリケーション —— React, Vue, Angular など—— が分からない人に向けて、たったひとつの理解方法を提示するものです。 追記: ちなみに果てしなくどうでもいいですが、今回の記事が記念すべき100記事目らしいです。（Noteさん！その手のヤツはいっそ自動で記事にバッヂを表示するとかしてくれるとうれしいです！） 対象読者は、Java, PH(以下略）などのコードと一緒に、ほんの少しでもJSのコードを触った、見たことがあるというレベル感の人なので、既にReact, Vue, Angular などでガリガリコードを書いている人は対象ではありません。 あとホームページ屋さんとかウェブコーダ
「HTTP/3」がHTTP-over-QUICの新名称に。IETFのQUICワーキンググループとHTTPワーキンググループで合意 － Publickey
現在IETFで仕様策定が進められている、UDPをベースに効率的で高速な通信を実現するためのプロトコル「QUIC」をトラスポート層に用いる新しいHTTPの名称が「HTTP/3」になることが決まりました。 HTTP/3のベースはGoogleが開発したQUIC。IETFで標準化へ もともとQUICは、Googleが高速なHTTPの通信を実現するためのプロトコルとして2013年に発表し、同社のChromeブラウザやクラウドサービスなどに実装してきました。 QUICは、従来のHTTPでトランスポート層に用いられているTCPの代わりに、UDPを用いています。 TCPはエラー訂正機能などを備え信頼性の高い通信が可能な一方、比較的オーバーヘッドの大きなプロトコルです。そこでTCPの代わりに通信の信頼性は保証されないもののオーバーヘッドの小さいUDPを用い、独自に一定の信頼性を保つ実装を組み込みつつHTTP
ちょっと良さげな負荷ツール vegeta をつかって分散負荷試験を実現してみる - Qiita
motivation Scalaのgatlingを使っていたけど、test_caseとして実装する必要があり、ローカル以外から仕組み的に実行するのがちょっと手間だった。（testをjarにするというのが難しい) シンプルにインストールせずに実行できる負荷ツールはないものか 負荷をかける側の限界でパフォーマンスを正しく測定できないこともあるので、クラスタ的に投げれたらなお良い そんなフワーッとした雰囲気で調べてみたら面白そうなものがあった。 その名も Vegeta 。 名前がやばい。そう、みんな知ってるアレ。 github にもこんな画像がデカデカと というわけで早速試してみましょう。 最初に結果を書くと、結構いい感触。おすすめしたい。 インストール方法 インストール方法は複数あります。 公式のドキュメントにあるのは2種類で、 Homebrewでインストールする（mac）
Web廃墟を作るときに心がけるべき7箇条
お初です！ ホームページを作り始めたウエンツといいます！ 普段はエンジニアをやっています。 最近ふと思い立ってホームページを作り始めました。 ■わたしのホームページ http://2nd.geocities.jp/ssd_kfk/ するととっても楽しく、自由に溢れていることに気が付きました。 仕事でウェブサイトづくりにまみれている中、様々なルールや常識に縛られかつて熱中したホームページづくりのの自由を忘れているのでは？と感じました。 この楽しさを、みんなに楽しんでほしいと思い、このホームページを作っていくにあたって、心がけている、または心がけたこと事をまとめました。 皆さんのホームページ作りを再度始める切っ掛けになれば幸いです。 必要なもの ジオシティーズのアカウント html4の知識 懐かしむ心 30超えた年齢 各種心得 仕事でやってるいつもどおり作ってしまうと、廃墟ではなく普通の家がで
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017
Server Side Renderingについて知るべきこと。Server Side Renderingとは何か？ それによって何が改善されるのか？（前編） ng-japan 2017 JavaScriptフレームワークとして知られるAngularのイベント「ng-japan 2017」がAngular Japan User Group主催で6月17日に都内で開催されました。 Angularは基本的にWebブラウザで実行されるJavaScriptアプリケーションのフレームワークですが、一方でサーバサイドでAngularが備えるHTML構成機能を実現する、いわゆるServer Side Rendering機能の開発も「Angular Universal」として進んでいます。 そのため、Server Side Renderingに興味を持つAngularデベロッパーも増えてきました。 ng-
Zaif のセッション情報が盗まれた原因のひとつについて。JavaScript からクッキー値を取得させない方法。 - clock-up-blog
HTTP Headers という 5万人が使っている Chrome 拡張のマルウェア疑惑。セッション盗まれて BTC も盗まれそうになった話。 の続き。 今回は Chrome 拡張とは関係ない、サイト設計側の話です。 ※本記事では Zaif のセキュリティ上の問題について指摘していますが、非難の意図はありません。 続報：11月4日 Facebookコメントより。 Ryosuke Hosoi · テックビューロ CTO ご指摘ありがとうございました！少し事情があってすぐに対応出来なかったのですが、先ほどZaifの認証情報にもhttp_only属性がつくようになりました。 しかしながら、jsが汚染されていると他にもいろいろ攻撃出来てしまいますので、今回の件はこれでもう安心、というわけではないと考えています。 15時間前 11月14日時点で httponly 属性が付くようになったようです。対応
CSS スタイルシート制作を楽にする！知っておきたい便利ツール25選まとめ
海外サイト Envato Blog で公開された「25 Free Web-Based Apps & Tools For Working With CSS」の著者 Paul Andrew より許可をもらい、翻訳転載しています。 CSS スタイルシートを作成していると、時間ばかりかかる退屈な作業をこなさなければいけない時があります。 たとえば、CSSアニメーションや FlexBox レイアウトを作成、調整したり、モダンブラウザ対応の書き方を思い出したり、レスポンシブ用にemをpxへの変換や CSS ファイルの圧縮やクリーンアップ、画像をデータURIへ変換など、どれもクリエイティブとは程遠いものばかり。 今回は、作業時間を大幅に短縮し、より快適なスタイルシートの作成ができる便利なツール25個をまとめてご紹介します。 紹介するツールを活用することで、これまで時間がかかっていた頭の痛くなる作業も、ボ
レスポンシブWebデザインでハマりがちな%指定 │ Design Spice
レスポンシブWebデザインでは要素を可変にするために数値を%で指定することが多いですが、%指定の仕様を理解してないとハマることがあります。自分もそのような経験があったので備忘録としてまとめました。 要素の幅と高さの%指定 レスポンシブWebデザインのように、ある要素の幅を一定の比率を保ったまま可変するようにするには、通常、値を%で指定します。この時の値は、 求める要素の幅÷親要素のコンテンツ幅×100% の式で求められます。 例えば求める要素の幅が20px、親要素のコンテンツ幅が200pxの場合は、10%となります。 また、ここで言うコンテンツ幅とはmargin、padding、borderを含まない幅です。 同様に高さを%で指定する場合は、 求める要素の高さ÷親要素のコンテンツの高さ×100% となります。 marginとpaddingの%指定 左右のmargin、paddingを%で指
webassembly - 【最新】WebAssemblyが熱い - Qiita
"Today's Big News" 来る2015年6月17日、JavaScriptの生みの親でもある超有名人のBrendan Eichが以下の記事を発表しました。海外では結構この話題がもちきりみたいです。そういえば最近のRebuild.fmでもこの話題が出ていましたね。 （注） 訳は意訳です。原文との乖離があれば教えてください。 Today's Big News It’s by now a cliché that JS has become the assembly language of the Web. Rather, JS is one syntax for a portable and safe machine language, let’s say. Today I’m pleased to announce that cross-browser work has begun
JavaScriptを補完してウェブを高速化する「WebAssembly」をChromeがついに実装したので実行速度を試してみた
「WebAssembly」は、JavaScriptの生みの親のブランダン・アイクが「ゲームチェンジャー」と表現するほど期待されているウェブ向けのバイナリフォーマットです。モバイル端末やIoT端末の普及が見こまれる中、マシンパワーの劣る端末でも効率よく実行できるように、ウェブの標準言語と言ってよいJavaScript以外の言語をコンパイルするためのユニバーサルなローレベルバイトコードが求められていましたが、ブラウザ開発者はそれぞれ独自にツールを開発する状況でした。 そんな中、2015年6月にMozilla、Google、Microsoft、Appleなどのウェブブラウザの主要プレイヤーが標準フォーマットとして開発に合意したのがWebAssemblyで、プロジェクトを推進するWebAssembly Community Groupが結成され、まずはC/C++をコンパイルしてJavaScriptエ
V8、Firefox、Microsoft Edgeが「WebAssembly」の実装を発表。将来のWebの共通バイナリフォーマットへ期待 － Publickey
V8、Firefox、Microsoft Edgeが「WebAssembly」の実装を発表。将来のWebの共通バイナリフォーマットへ期待 WebAssemblyは、JavaScriptのようにどのWebブラウザでも実行可能なポータブル、かつコンパイル済みでロード時間が小さくて済み、汎用的なハードウェアの能力を活用したネイティブスピードで高速に実行できるという特性を備えた共通のバイナリフォーマットを目指してオープンソースで開発が進んでいます。 2015年6月には、Chrome、Firefox、WebKit、マイクロソフトなど主要なWebブラウザやW3Cが相次いでWebAssemblyのサポートを表明しました。 そして、ChromeのJavaScript実行エンジンであるV8、MozillaのFirefox、そしてMicrosoft Edgeで、このWebAssemblyのテスト実装が相次いで
Weather Icons - 222 font icons inspired by Font Awesome and designed for Bootstrap
Weather Icons is the only icon font and CSS with 222 weather themed icons, ready to be dropped right into Bootstrap, or any project that needs high quality weather, maritime, and meteorological based icons! The Freedom of CSS Anthing you can do to text, you can do to the icons. Scale, rotate, flip, change color, add shadows... and more! Use In Graphic Apps Weather Icons come with OTF and TTF files
Chrome開発者ツールの小技集 | POSTD
最近、普段以上にChromeの開発者ツールを使うことに時間をかける機会がありました。その過程で、自分が今まで気づいていなかった機能をいくつか見つけました（少なくとも今までその機能を探す必要に迫られていなかった、とも言えるのですが。例えばブラックボックス化や非同期のスタックトレースなど）。そのため、開発者ツールでとても気に入っているいくつかの機能についてまとめてみたくなったのです。 小さな虫眼鏡ののアイコンは、特定の要素やCSSプロパティに対して、「どのCSSファイルに書かれているどのセレクタ/クラスが最終的なスタイルを決めているか」を示してくれます。例えば、どれかDOM要素に対して「要素を検証」を選び、右側の「Computed」というタブを選びます。確認したいCSSプロパティを見つけてその虫眼鏡アイコンをクリックすることで、すぐさま右側に正しいCSSファイル内のクラス/セレクタを表示してく
URLを入力するだけ！コンテンツをスクレイピングしてデータ化してくれる無料ツール「import.io」
import.ioとは import.ioは、データ化したいページのURLを入力するだけで、自動でデータ箇所を判断して情報を集めてくれるスクレイピングサービスです。 無料で利用することができ、セットアップも、データ収集用のトレーニングなども必要ありません。 URLを入力して、ボタンを押すだけという簡単さから、誰にでも利用できるデータ収集ツールだと思います。 以下では、その簡単な使い方や、利用例などを紹介したいと思います。 定期的なサイトへのスクレイピングは相手サイトの負荷になるので、一日に何度も何度も同一サイトに使用するのはやめましょう。加えて、取得したデータを、そのまま何かに利用すると著作権違反になる恐れもあります。 基本的な使い方 import.ioの最大の特徴は、使い方の簡単さです。 以下では、その使い方の例として、IKEAのソファー検索結果ページのデータを取得してみたいと思います。
Check your SSL/TLS certificate installation
Check your CSR Remove cross certificates View browser warnings Check certificate installation Search certificate logs Check your SSL/TLS certificate installation Enter the URL of the server that you want to check.
HTTPのパケットを確認したり、書き換える事が出来るWeb Debugging Proxy「Fiddler」の勉強会に行って来ました - 強火で進め
Fiddler の勉強会に行って来ました。 Fiddler は HTTP の通信データを観たり、書き換えたりする事が出来るツールです。 イベントページ はじめての Fiddler reloaded | Peatix http://peatix.com/event/55312?utm_campaign=recommend&utm_medium=email&utm_source=55312&utm_content=7893 資料ページ はじめての Fiddler http://www.hebikuzure.com/fiddler/ Fiddler Scriptデモ http://www.slideshare.net/hagurese/fiddler-script-38509440 書籍 実践 Fiddler 作者: Eric Lawrence,日本マイクロソフト株式会社エバンジェリスト物江修,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSでフォント指定する時の安全な記述方法、OSにプリインストールされているフォントのまとめ -CSS Font Stack
TechCrunch | Startup and Technology News
TechCrunch | Startup and Technology News
GitHub - httpie/cli: 🥧 HTTPie CLI — modern, user-friendly command-line HTTP client for the API era. JSON support, colors, sessions, downloads, plugins & more.
