若者はどうやってCSSを覚えたのか - Qiita
先日、@Jxckさん主催で行われた次世代WebカンファレンスでCSSのセッションに登壇させていただきました。（動画） セッション中に@cssradarさんに「morishitterはどうやってCSSを覚えたのか」と聞かれ曖昧にしか答えられなかったので、 自分が今までどうやってCSSを学んできたのか を振り返ってみる。 黎明期 プログラムを書き始めたのは3年半ぐらい前からだと思う。PHPでWebアプリを書いたのがはじめで、そのときにBootstrap v2をベースに何もわからないまま、雑にCSSを書いた。 BootstrapのようなCSSフレームワークからCSSを始めると、floatやpositionのようなレイアウトに関わるプロパティがどういうものなのかを知らなくても、何となくでWebアプリのレイアウティングができる。 そしてブラックボックス化されたBootstrapのコードを読もうとして
遅延読み込み用のぼやけた画像
Mediumでとある記事を高速にスクロールして読んでいたら、さりげなく画像を遅延読み込みしていることを知った。読み込み発火のタイミングがうまいのかあまり遅延読み込みの存在を感じさせないのもすごいと思ったが、プレースホルダー画像の実装方法が良さそうだった。単純に元の画像を幅30px程度まで小さくしてそれをブラウザーにリサイズさせることでぼやけた画像をプレースホルダーとして表示しているだけだが、十分に機能していそうで目から鱗だった。 画像の遅延読み込みはなかなか曲者で、読み込むタイミングやプレースホルダーとしている画像が悪いと大きくユーザーにストレスを与える。プレースホルダーでよく使われるローディング画像は読み込み中のインジケーターではあるが、同時に何か遅いことをやっていますというネガティブな印象も与えてしまう。ユーザーはローディング画像を見るとスクロールを止めなくてはならないのかと感じること
リンクではなくキャプチャ - 若年世代の「シェア」で問われるメディアの生き残り戦略（朽木誠一郎） - エキスパート - Yahoo!ニュース
ウェブメディアをしていて時折おそろしく感じるのは、スマホネイティブ世代の行動が予測できないことです。 LINEの巨大グループやMixChannelのカップルキス動画など、理解が追いつくより先に新しい現象が発生する様子を見聞きすると、このような感覚のズレがやがて自分の職域にも影響を及ぼすであろう予感がします。 【1万人を超える巨大グループも!?】大人が知らない中高生のLINEグループの使い方を調査したら、闇が深かった。｜Social Native Life - kakeru 本当に「リア充中高生」はキスばかりしているのか？ ～MixChannelのキスを数えましょう～ - Yahoo!スマホガイド スマホネイティブ世代、さらにその先の、もっと今と違う何らかの世代が大多数になった世の中では、ウェブメディアもまたオールドメディアとしてくくられるのでしょう。このスピード感では、それはそう遠くない未
フレームワークに見る Web セキュリティ対策 - Qiita
セキュキャン 2015 高レイヤートラック(Jxck) 本資料は、セキュキャン 2015 高レイヤートラックの講義資料です。 セキュキャン参加者であるセキュリティエンジニアの卵を対象に、 Web のセキュリティの知見が、実際どのように Web アプリ開発に反映されているか、もしくはどう反映すべきかを、フレームワークの視点から解説することを目的としています。 将来、 Web のセキュリティに興味を持ったエンジニアが、その知見を多くの開発者に啓蒙する手段として、フレームワークに反映するというのは非常に有効な方法です。 ここではその実例として Rails を例にとり、 Rails がこれまでに積み上げてきたセキュリティに関する知見を振り返るとともに、フレームワークとしてそれをどう取り入れているかを解説します。 Intro Web アプリケーションを開発する場合、 Web アプリケーションフレーム
前方秘匿性 (forward secrecy) をもつウェブサイトの正しい設定方法
前方秘匿性（forward secrecy）とは、以下のような性質を指します。 公開鍵暗号の秘密鍵のように、比較的長期に渡って使われる鍵が漏えいしたときでも、それまで通信していた暗号文が解読されないという性質 鍵が漏れることも想定せよ――クラウド時代における「楕円曲線暗号」の必然性 - @IT 鍵が攻撃者や諜報機関など第三者の知るところとなった場合でも、それまで通信していた暗号文が解読されないようにしないといけない、という考え方とともに、最近 HTTPS を利用するウェブサイトにおいても導入が求められるようになってきた概念です。 前方秘匿性を満たすウェブサイトの設定方法については、TLSの暗号化方式をECDH_RSAあるいはECDHE_RSAに設定すれば良い、と述べている文献が多いです。 ですが、ほとんどのウェブサーバにおいて、それは誤りです。 なぜか。 通信を暗号化する鍵（セッション鍵）
2015年Webサーバアーキテクチャ序論 - ゆううきブログ
2023年03月31日追記：この記事を基に、@sadnessOjisanさんより、コードレベルにより踏み込んだ、かつ、グリーンスレッドベースの新しいWebサーバアーキテクチャも含めて整理された記事 Webサーバーアーキテクチャ進化論2023 | blog.ojisan.io が公開されました。 主に新卒のWebエンジニア向けに、古典的なWebサーバアーキテクチャを学ぶ道のりと代表的な実装モデルの概要を紹介します。 この辺りの話題がWeb界隈で流行っていたのは数年以上前というイメージですが、Webサービスは相変わらずWebサーバの上で動いているので、流行り廃り関係なく学ぶべき内容だと思っています。 また、HTTP/2がいよいよRFC化し、既にh2oやtrusterdなどのHTTP/2のサーバ実装があり、今後Webサーバアーキテクチャを再訪することが増えるような気がしています。 ところが、We
InfoQ: HTTPSコネクションの最初の数ミリ秒
ほとんどの人がHTTPSとSSL (Secure Sockets Layer) を結びつけて考えます。SSLは1990年代半ばにNetscape社が開発した仕組みですが、今ではこの事実はあまり正確でないかもしれません。Netscape社が市場のシェアを失うにしたがって、SSLのメンテナンスはインターネット技術タスクフォース(IETF)へ移管されました。Netscape社から移管されて以降の初めてバージョンはTransport Layer Security (TLS)1.0と名付けられ、1999年1月にリリースされました。TLSが使われだして10年も経っているので、純粋な"SSL"のトラフィックを見ることはほとんどありません。 Client Hello TLSはすべてのトラフィックを異なるタイプの"レコード"で包みます。ブラウザが出す先頭のバイト値は16進数表記で0x16 = 22。 これは
ASP.NET MVC 3 開発入門 - インデックス - しばやん雑記
全 24 回で完結しました。 はじめに 前提知識 構成図 完成したアプリのイメージ 環境の構築 プロジェクトを作成 ビューエンジンの選択 作成されたプロジェクトを確認 サーバ側のロジックを開発 モデルをコードファーストで作成 リポジトリパターンを適用する コントローラの追加 コントローラの実装 アクションの追加 強力なモデルバインダ アクションの実装 動画アップロードの実装 クライアント側のロジックを開発 ビューの作成 Razor の文法 ビューの実装 Details アクション Create, Edit アクション Delete, Index アクション HTML ヘルパーを活用 タグ・コメント登録を実装する クライアントサイド検証を利用する ローカル環境で動作を確認 IIS 7.5 Express で動作検証 ルーティング定義を確認、追加 自動的に作成されたテーブルを確認 ASP.NE
GET /@:id みたいなURLで他との衝突を避ける - Qiita
Webアプリのルーティングにおいて、各ユーザの個別ページを特殊なものにしたい場合にどういうURLにすると便利かという話に触れる。例えばr7kamuraというIDのユーザ用のページは、Twitterだと https://twitter.com/r7kamura で、GitHubだと https://github.com/r7kamura というURLになっている。 GET /:id だと他のパターンと衝突してしまう もしユーザページに GET /:id というパターンを採用すると、他のURLのパターンと競合してしまうという問題がある。どんなときに困るかと言うと、例えば https://twitter.com/about でTwitterというサービスについて説明するWebページを提供しようとすると、aboutというIDを持ったユーザ用のページが提供できなくなってしまう。 この問題に対してよく
0から始めるAWS入門：概要 - Qiita
研修向け。0からAWS上に基本的なWEBアプリケーションの環境構築していく。 前提 ・一般的なLAMPのWEBアプリケーション向け(※1)に環境を構築しますが、それらミドルウェアのインストール・設定等はあまり対象にしてません。 ・すでにAWSのアカウントを取得しているものとします。サインアップはこちら ちなみに、新規登録であれば無料枠があるため、この研修向け内容をやったとしても$3ぐらいに収まります。 ※1 アプリケーションの要件・内容には触れませが、一般的なLAMPアプリケーションでも同様になるかと思います。 構築する環境 今回のシリーズで目指す環境は、下記の通り。 簡単に各AWSサービス紹介 Elastic Compute Cloud (EC2) 一般的に言う仮想サーバー。スケーラブルに展開可能。 今回はここにアプリケーションを配置する。 詳細はこちら Relational Datab
TheC10kProblem - 「C10K問題」（クライアント1万台問題）とは、ハードウェアの性能上は問題がなくても、あまりにもクライアントの数が多くなるとサーバがパンクする問題のこと
TheC10kProblem - 「C10K問題」（クライアント1万台問題）とは、ハードウェアの性能上は問題がなくても、あまりにもクライアントの数が多くなるとサーバがパンクする問題のこと 目次 この文書について C10K 問題 関連サイト まず読むべき本 I/O フレームワーク I/O 戦略 1. 各スレッドが複数のクライアントを受け付ける. そしてノンブロッキング I/O と レベル・トリガ型の完了通知を利用する. 伝統的な select() 伝統的な poll() /dev/poll kqueue() 2. 各スレッドが複数のクライアントを受け付ける. そしてノンブロッキング I/O と 変更型の完了通知(readiness change notification)を利用する. kqueue() epoll リアルタイム・シグナル fd 単位のシグナル (Signal-per-fd)
Webサイトに必要なfaviconが21個になっていた - IT探検の追憶
久しぶりにWebサイトのfaviconを変えようと思い、調べてみると、必要なfaviconが大幅に増えていることがわかりました。 その数、何と21個！ そんなに増えていたとは。 一応、以下にリストアップしてみます。 faviconのリスト favicon.ico: IE用 favicon-16x16.png: タブ表示用 favicon-32x32.png: Mac版Safari用 favicon-96x96.png: Google TV用 favicon-160x160.png: Opera 12 までのスピード・ダイアル用 favicon-196x196.png: Android版Chrome用 mstile-70x70.png: Windows 8 用 mstile-144x144.png mstile-150x150.png mstile-310x310.png mstile-31
『例えば、PHPを避ける』以降PHPはどれだけ安全になったか
この記事はPHPアドベントカレンダー2014の22日目の記事です 。 2002年3月に公開されたIPAの人気コンテンツ「セキュアプログラミング講座」が2007年6月に大幅に更新されました。そして、その一節がPHPerたちを激しく刺激することになります。 (1) プログラミング言語の選択 1) 例えば、PHPを避ける 短時日で素早くサイトを立ち上げることのみに着目するのであれば、PHPは悪い処理系ではない。しかし、これまで多くの脆弱性を生んできた経緯があり、改善が進んでいるとはいえまだ十分堅固とは言えない。 セキュアプログラミング講座（アーカイブ）より引用 「PHPを避ける」とまで言われてしまったわけで、当然ながらネット界隈では炎上を起こし、現在はもう少しマイルドな表現に変わっています(参照)。 本稿では、当時のPHPの状況を振り返る手段として、この後PHPのセキュリティ機能がどのように変化
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
はじめに この話はGuillermo Rauch氏が書いたhttp://rauchg.com/2014/7-principles-of-rich-web-applications/ という記事の翻訳です。許可を得て翻訳しています。 ここ最近Web業界を賑わしているSingle Page Applicationの必要性、HTTP2/SPDYといった技術、リアクティブプログラミングやIsomorphicデザインという考え方について包括的にまとめたすごく良い記事になっております。 最初に断っておきますが、ものすごく長いです。各セクションがわかれているので時間がない方はセクションごとに書かれたtl;DRとまとめを読むだけでも参考になるかと思います。 ちなみに明日のNode学園祭には、本記事を記述したGuillermo Rauch氏が見えるので、そこで詳しく聞いてみるのもいいのではないでしょうか。
クソエンジニアが最速でそれなりのWebデザインをできるようになる方法 - UIU
趣味などでWebサービスを作るときにもっとも悩ましいことのひとつがデザインだと思う。外観は重要な要素だとは理解しているし興味も一応あるけれど、実践に乏しいからどうしていいのかわからない。かといって、タダで頼めるような都合のいいデザイナーはいない。結局めんどうになって、Twitter Bootstrapで体裁だけでっち上げた妙にオタク臭いデザインになってしまう。僕もかつてはデザインを気にも留めないクソエンジニアだったけど、必要に迫られて勉強したらそれなりに手を動かせるようになったのでその方法を紹介する。僕が今年入社したスタートアップにはデザイナーがおらず、新機能を作るときなど仕方なくデザインをこなす必要があった。結果的に、仕方ないなりにPhotoshopを使ってプロトタイプを作りHTML/CSSコーディングするくらいはできるようになった。ここに書くのは仕方なくそれなりのWebデザインをする方
You have been hacked! | Hold Security
Over the past 18 months, this was our conversation starter with many companies and individuals. Helping our clients prevent breaches or find their stolen data is our business. If you have been following information security, or even if you haven’t, you have probably heard of Hold Security and our work. In October 2013, we identified a data breach with Adobe Systems. Later in December that year, we
Big Sky :: C++ 製 micro web framework「crow」を使って lingr の bot 書いてみた。
先日、github で crow という、python の flask からインスパイアされた C++ 製 micro web framework を見つけました。 ipkn/crow - GitHub https://github.com/ipkn/crow ルーティングの書き方が flask ぽく、かつモダンな C++ な書き方だったの気に入りました。 crow::Crow app; CROW_ROUTE(app, "/") .name("hello") ([]{ return "Hello World!"; }); app.port(18080) .multithreaded() .run(); 何か作ってみたくなったので、lingr の bot を書いてみました。crow には JSON パーサ(シリアライザ)が同梱されているので API サーバを作るのも簡単そうです。 #incl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Serverless Architecture on AWS（20151023版）
ウェブパフォーマンスの基礎とこれから
Go言語入門者が Webアプリケーション を作ってみた話 #devfest #gdgkyoto
