もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
IT業界で横行する恥ずかしい英語発音 - Qiita
プログラマやデザイナと話してるとしょっちゅう変な英語発音に出くわします。 例えばheightを**「ヘイト」と発音したり。 そういう時、私は心では「ヘイトじゃないよハイトだよ！」と呟きつつ、口では「そうですね、ではヘイトは80pxにしましょう！」なんて言ってるのであります。 まあ、所詮我々が話しているのは英語ではなく、日本語の中に出てきた英単語をカタカナで発音しているに過ぎないですし、テレビのテロップでmainをメーンと表記する時代ですので正解などは無いと思っています。 ですから、何でもかんでも正しい英語っぽく発音するべきなどとは思っていませんが、やはり「こいつ適当にスペルを日本語読みしてるだけだろ！」**ってのが明らかな場合は、聞いているこっちが恥ずかしくなってしまうものです。 というわけで、この業界で横行してる妙な発音をまとめてみました。 間違って発音すると恥ずかしい英語 これらは間違
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は
数学を避けてきた社会人プログラマが機械学習の勉強を始める際の最短経路 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 巷ではDeep Learningとか急に盛り上がりだして、機械学習でもいっちょやってみるかー、と分厚くて黄色い表紙の本に手をだしたもののまったく手が出ず（数式で脳みそが詰む）、そうか僕には機械学習向いてなかったんだ、と白い目で空を見上げ始めたら、ちょっとこの記事を最後まで見るといいことが書いてあるかもしれません。 対象 勉強に時間が取れない社会人プログラマ そろそろ上司やらお客様から「機械学習使えばこんなの簡単なんちゃうん？」と言われそうな人 理系で数学はやってきたつもりだが、微分とか行列とか言われても困っちゃう人 この記事で行うこと
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
Hubotをインストール、hipchatと連携し、foreverでデーモン化(CentOS6.4) - Qiita
2017年に新たに書き直したのでこちらも参考にしてください [[2017年版]HubotをSlackで利用 ローカル環境構築、デバッグ、およびHerokuへのデプロイ方法] (http://qiita.com/kon_yu/items/57fb169cb871a009393b) ブログより転載 http://konyu.hatenablog.com/entry/2014/05/13/214812 hubotとは GitHub社が開発しMITライセンスで公開しているNode.jsでbotを作り動かすためのフレームワークです。 Hubotの大きな特徴に，様々なチャットツールに対応している点があります。たとえば，先ほど取り上げたikachanは，IRC用のbotを作るためのフレームワークであり，Twitterのbotを作る目的には使えません。一方でtwittbotはTwitter専用であり，IR
Naming -名前付け- - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #Naming -名前付け- プログラミングで最も重要な技術の一つが、名前付けです。 且つ、センスが問われるものなので、上達は難しいものでもあります。 この記事では、様々な文献から抽出した名前付けに関する情報を雑多にまとめました。 -名前重要- ソフトウェアの設計のアプローチとして、『まず名前から入る』というのは、あまり語られていない秘訣としてもっと広く知られても良いように思います。 まつもとゆきひろ 『プログラマが知るべき９７のこと』 #コミュニケーションの基礎 名前は、コミュニケーションの基礎となるものです。 私にもあなたにも名前が
ウェブにプッシュ通知をもたらすウェブサービス「bpush」を作った - Qiita
2017年3月26日追記 bpushは2年弱の運営の後、OSSとして生まれ変わりました。詳しくは下記の記事をご覧ください。 国内初のウェブプッシュサービスbpushのOSS化と運営して学んだことについて ##ブラウザだけでプッシュ通知ができるようになった Chromeのバージョン42からプッシュ通知が可能になったという記事は読まれましたでしょうか？ 「Google Chrome 42」安定版リリース プッシュ通知機能追加と45件の脆弱性対 Chrome 42から、Service Workerという新しい仕組みによって、ブラウザを閉じていても、スマートフォンのプッシュ通知のようにサービス側からお知らせを届けることができるようになりました。この機能はデスクトップ版とAndroid版のChromeに導入されています。通知の仕組みにGoogle Cloud Messaging(GCM)を使っている
炎上案件に突如ディレクターとして投入されたときにやってみたこと - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ぼんやり1メンバーとして眺めていたプロジェクトが、リリース1週間前になって「あれも足りない！これも出来てない！どうすんじゃゴラァ」となったときに突如ディレクターとしてぶっこまれ投入されたときにやってみたことのメモ。 一次対応 とにもかくにもPJTに投入されて最初にやったこと。 コミュニケーションルールをみんなで確認して、守ってもらうようにした 誰が何の情報を持ってて、そして誰から誰にどんな指示が出てて、それらがどんなステータスか、、、 もうぐっちゃぐちゃになっていた。 ディレクターは一度死ぬが、一旦全部ディレクターに報告させて、ディレク
破綻しにくいCSS設計の法則 15 - Qiita
ブラウザスタイルは平坦化しておく リセットCSSはオプトアウト可能にしておく 登場頻度の高い組合せはplaceholderとして登録してから利用する 可能な限り画像はスプライト生成してから利用する それ以上分解不可能なコンポーネントは要素のように扱う コンポーネントは自己完結型のものを使う BEMはDRYになるよう粒度を下げる 可能な限り@extendは利用しない レスポンシブでない場所では、Utilitiesクラスを活用する shame.cssはいつも綺麗にしておく 詳細度または特異性の高いものほど後方に記述する 可能な限り!importantしない 可能な限りハックしない 変数をデザインガイドとして活用する CSSファイルを分割するメリットはほとんどないので一つにまとめる 1. ブラウザスタイルは平坦化しておく 例えば、こういうScrap & Buildは単に通信量のムダ。
Webパフォーマンス管理の基本 1 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #はじめに Webパフォーマンスはパフォーマンスエンジニアリングの1つの分野 Webパフォーマンス管理は、Webサイトの非機能要求の性能や可用性を扱います。 専門用語では、コンピュータの登場と時期を同じくして登場したパフォーマンスエンジニアリングという分野に属します。 パフォーマンスエンジニアリング パフォーマンスエンジニアリングとは、Wikipediaでは以下のように記載されています。 Performance engineering encompasses the techniques applied during a systems
CasperJS Utils + Chrome でhtml要素を選択する方法 - Qiita
課題 html要素を一個だけ選択したいのに出来ない場合に、対処したい やりかた ◆ Chromeを立ち上げ、右側の設定ボタンをクリックしてブックマークツールバーを表示させる ◆ 下記URLを開き、青色の「CasperJS Utils」ボタンをツールバーへドラッグする http://docs.casperjs.org/en/latest/modules/clientutils.html#index-2 ◆ html要素を選択したいページへ移動する。 ※ 以下、例として既に開いておいたGoogle Analyticsページを使用する ◆ ブックマークツールバーへドラッグした CasperJS Utils をクリックする ※ クリックするだけで良い。 ◆ 選択したいhtml要素を表示させる。 ※ 以下、例として下画面のカーソルがかぶさっているチェックボックスを選択させたいものとする ◆ チェック
Node.js + Express4を使っていて、つまづいた注意点まとめ - Qiita
最近、色々Node.js + Expressを試しながらWebサービスを作ってみたりしてます。その中で自分がよくつまづいた所をまとめておきます。 前提 Node.js : v0.10.29 Express : v4.2.0 Vagrant どうでもいいけど Node.jsがv0.12リリースされてES6対応になったら、Express4がオワコンで、generator対応なKoa.jsが盛り上がりそうな気配。 http://koajs.com/ つまづきポイント なんか欲しくなったらnpmで探す たいていの欲しい機能は、すでにnpmにモジュール登録されてます。 https://www.npmjs.org/ 似たような機能がたくさんあります。なので、そのモジュールがちゃんとメンテされているか、みんな使っているくらい人気があるかを確認した方がいいです。中には、昔は王道だったけど、メンテされてなく
encodeURIComponentが世界基準だと誤解してた話
URLをいじくるプログラムをいじっていて、仕様がよくわからなくて悩んだのでまとめます。 2/23: 追試部分を追記 2018/7/14: JavaScriptのURLSearchParamsと、GoのPathEscapeについて追記 ことの経緯 HTTPとはなんぞやとか、GETとPOSTがどうの、それぞれでパラメータがどういう経緯でウェブアプリケーション(とかCGI)に渡って来るのかぐらいは知っていました。で、ウェブでXHRでGETリクエストを送る場合にはJavaScriptのencodeURIComponent()で各パラメータをエンコードして、&でくっつけて、URLの末尾に?で付与すればいいんだよね？と思っていました。こんな感じに。 これを受け取る側は、JavaScript(node.js)ならdecodeURIComponent()を使っているはずだ。ウェブの世界ではJavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
珍しいCSSプロパティたち - Qiita
「ソフトウェアエンジニアならば1時間以内に解けなければいけない5つの問題」をHaskellでやってみた - Qiita
PHPオブジェクト指向入門（前半） - Qiita
コミットログお作法の資料 - Qiita
fluentdでつくる監視系 - Qiita
【javascript】やさしいクラスの作り方 - Qiita
