iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
認証にまつわるセキュリティの新常識 - Speaker Deck
2016-2017年でのNIST SP800-63-3改定を通じて、認証を含むデジタルアイデンティティの世界では様々な議論が湧き起こりました。 そんな本ガイドラインの内容を通じて、デジタルアイデンティティフレームワークを考える上での共通言語、特に「認証方法」について記載したNIST SP800-63Bについての理解と体得を試みつつ、議論になったいくつかのテーマについて取り上げて、この領域の面白さに触れてみます。 [rev3] 2022年1月までのアップデートを追加して、個別依頼を受けて実施したプライベートセミナー向けの版をサニタイズしてアップロードしました。〆切ドリブンで改定機会をくださった会社様には感謝です。 主な改定 ・SMSへの攻撃としてSS7とSakari/Bandwidth社の事例 ・よくある追加認証のトピックス ・アカウントリカバリの文言改善（解釈文書を元に） ・NIST SP
あなたの生産性を向上させるJupyter notebook Tips | リクルートテクノロジーズ メンバーズブログ
このエントリは全9回を予定する18卒新人ブログリレーの第3回です． はじめまして．今年度よりリクルートテクノロジーズに入社した河野 晋策です． 7月からQassチームにて検索ロジックの改善を行っています． Qassチームは，検索基盤の運用や検索ロジックの改善を行っているチームです． 詳しくは以下の記事をご覧ください． 検索組織の機械学習実行基盤 リクルート全社検索基盤のアーキテクチャ、採用技術、開発体制はどうなっているのか Elasticsearch＋Hadoopベースの大規模検索基盤大解剖 本記事の想定読者：普段Jupyter notebook・Jupyter Lab，Google Colaboratoryを使っている方，またこれから使おうと考えている方 本記事の概要：jupyter notebookの知見共有 はじめに Jupyter notebookとは 近年，データの重要性が様々な
vimのファイル名補完 - てきとうなメモ
vimでファイル名をタブ補完する時、bashの補完と感覚が違うので使いづらい。 タブ補完はwildmodeで動きを設定することができる。 wildmodeは以下の値を設定できる 値 説明 "" 最初のマッチのみ補完 full TABを押すごとに次のマッチを補完する。wildmenuが有効ならwildmenuを開始する longest 共通する最長の部分まで補完する list マッチするものをリスト表示する longest:full longestと同じだが、wildmenuが有効ならwildmenuを開始する list:full マッチするものをリスト表示しつつ、TABを押すごとに次のマッチを補完 list:longest マッチするものをリスト表示しつつ、共通する最長の部分まで補完 言葉で説明してもわかりづらいので例示する。 $ ls sample1 sample2 sample3という
15年目のVim | POSTD
(注：2017/04/19、いただいたフィードバックを元に翻訳を修正いたしました。修正内容については、 こちら を参照ください。) Vim使用について述べた先の投稿（ 1 、 2 ）は好評だったこともあり、そろそろ更新が必要になりました。Vim 8には非常に要望の多かった機能がたくさん追加され、 VimAwesome のような新しいコミュニティサイトができたことでプラグイン探しと評価が容易になりました。最近では私もVimで仕事をする機会がとみに増え、 ピーク効率 に向け自分のワークフローの設定に時間を費やしたりもしています。ですから、この記事は私の現在の状況を写し取ったものです。 大まかには次の内容です。 ファイル特定にはfzfとfzf.vim *ファイル検索にはack.vimと ag Vim + tmuxが勝利への鍵 ALEは新Syntastic。理由はその非同期性 …などなど多数。ぜひ
会社の本番環境をDocker(ECS)に置き換えるために準備したこと気づいたこと
エンジニアの@macs_6です。 このブログでは社内のAWS EC2上で運用しているアプリケーション群をECS移行したプロジェクトについて紹介します。 ローカルの開発環境をDockerした話は以前の記事(複数の rails プロジェクトが共存する開発環境を Docker 化した話を晒してみる)で西辻が紹介しているので、そちらを参照して下さい。 概要 プロジェクトを始める前に感じていた課題 目指す状態 ECSを選択する理由 設計 移行のために必要な作業 Digdagによるスケジューリングについて ECSを使って見て気づいたこと 今後やりたいこと プロジェクトを始める前に感じていた課題 ローカル・本番で再現性のある環境を簡単に作れるようにしたい 簡単にスケールできるようにしたい コストを抑えたい ECS移行プロジェクトを始める前にはこれらの3つの事に課題感を持っていました。 1.ローカル・本番
Dockerfileはなぜ複雑になるのか - Qiita
はじめに Dockerfileとは docker imageを作成する際のコマンドをコード化したもの 公式ドキュメント Dockerfileは「コンテナを動かす」ためだけなら簡単に作成することが出来るが、工夫せずに書くと運用上いろいろな問題が発生する。 それらの問題点のほとんどは書き方のテクニックによって回避することが出来るが、それらのテクニックを駆使すると、今度はDockerfileの中が複雑になっていく。 Dockerfileはなぜ複雑にならざるを得ないのか 発生する問題とそれに対するテクニックを例を上げて説明していくことで理解してもらう。 rails5.1 hello world projectを例に説明する。 簡単なDockerfileの例 重要なのはFROMとRUNとCOPYのみ FROM ベースとなるimageの指定 https://docs.docker.com/engine
Pythonを書き始める前に見るべきTips - Qiita
Pythonを使ってこの方さまざまな点につまずいたが、ここではそんなトラップを回避して快適なPython Lifeを送っていただくべく、書き始める前に知っておけばよかったというTipsをまとめておく。 Python2系と3系について Pythonには2系と3系があり、3系では後方互換性に影響のある変更が入れられている。つまり、Python3のコードはPython2では動かないことがある(逆もしかり)。 Python3ではPython2における様々な点が改善されており、今から使うなら最新版のPython3で行うのが基本だ(下記でも、Python3で改善されるものは明記するようにした)。何より、Python2は2020年1月1日をもってサポートが終了した。よって今からPython2を使う理由はない。未だにPython2を使う者は、小学生にもディスられる。 しかし、世の中にはまだPython3に
入社からの半年間でコードレビューで指摘されたことのまとめ - 30歳からのプログラミング
実務未経験でプログラマとして入社して半年以上が経った。 コードレビューで指摘されたことを備忘録としてまとめておく。 自分なりにまとめたものなので、レビュアーが言いたかったこととニュアンスや解釈がずれている可能性はある。 初歩的な内容ばかりで我ながらうんざりする。 せっかく優秀な同僚ばかりなのだからもっと高度なことを学びたいが、こういう初歩的なことが出来ないのが俺の現状なのだから、仕方ない。 そもそもPullRequestを送ったこともなかったわけだし。入社初日は、一人でPullRequestの出し方を練習していた。 それを考えればまあ、こんなものだろうか。 当たり前のことをちゃんと当たり前に出来るようになって、早く、次のステージに進みたい。 PullRequest(PR) PRのタイトルは分かりやすいものに。必要に応じてチケットの番号なども入れる。 コミットやPRは出来るだけ粒度を細かくす
tail -f to the web-browser
Ever wanted to pipe “tail -f” to a web-page? Here’s a one liner… On the server$ (echo -e ‘HTTP/1.1 200 OK\nAccess-Control-Allow-Origin: *\nContent-type: text/event-stream\n’ && tail -f /path/to/some/file | sed -u -e ‘s/^/data: /;s/$/\n/’) | nc -l 1234That should all be on a single line. Note: This is for the GNU version of Sed, typically found in Linux distros. If using the BSD version of Sed (e.g
誰も教えてくれない「分かりやすく美しい図の作り方」超具体的な20のテクニック
【追記】この記事をきっかけに、名著「ノンデザイナーズ・デザインブック」の20周年記念特典eBookの制作に協力させていただきました。詳しくはこちらを御覧ください。 ノンデザイナーズ・デザインブック20周年記念の特典に寄稿しました デザイナーである・なしに関わらず、仕事の中で伝えたいことを「図」で説明する機会は多々あります。提案書で事業内容を説明することもあるでしょうし、具体的な数値をグラフで説明することもあるでしょう。そんな中でこんな指摘を受けたことはありませんか？ ・最終的に何を言いたいのか結論が見えないよ。 ・関係性が複雑すぎて理解しずらいんだけど。 ・要素が多すぎて全てを把握するのが大変。 ・何をどこから見れば良いの？ ・結局一番言いたいことはなんなの？ ・文字サイズがたくさんありすぎてまとまりがないね。 ・安っぽいチラシみたいでダサイなぁ。 ・全体的にバランスが偏ってて不安定。 ・
JavaScript Debounce Function
One of the biggest mistakes I see when looking to optimize existing code is the absence of the debounce function. If your web app uses JavaScript to accomplish taxing tasks, a debounce function is essential to ensuring a given task doesn't fire so often that it bricks browser performance. For those of you who don't know what a debounce function does, it limits the rate at which a function can fir
至高のDockerイメージ生成を求めて - Qiita
本稿は良いDockerイメージを良い方法でビルドすることを探求した記録である。 Supership株式会社 Advent Calendar 2016の21日目にあたる。 2019年現在は@inductor氏の改訂版を見たほうが良い。 この記事で論じた望ましいコンテナイメージの姿は2019年でも変わらない。ただし、multi-stage buildのような新しい仕組みが普及したりツールの評価が定まってきたりと、実現に用いるツールの状況が2016年からやや変化している。 良いDockerイメージ 良いDockerイメージとは何だろうか。Dockerの利点は次のようなものだから、それを活かすイメージが良いものであるに違いない。 ビルドしたイメージはどこでも動く 適切にインストールされ、設定されたアプリケーションをそのままどこにでも持っていける。 コンテナ同士が干渉し合うことはないので、任意のイメ
私の Docker TIPS - Qiita
Docker TIPS あれこれ Docker を使っているとアレどーすんだっけ？って探しまわることが多いのでここにまとめておこうと思います。 随時更新予定です。 先日のまとめの分も再度記載しておきます。 基本、ホストは ubuntu-server 12.04、コンテナ側は普段使いしている13.10前提で記述しています。 docker のイメージ格納先を変更したい apt で docker をインストールしている人がほとんどだと思います。 デフォルトでは /var/lib/docker になります。 # Docker Upstart and SysVinit configuration file # Customize location of Docker binary (especially for development testing). #DOCKER="/usr/local/bi
知っておきたい！Herokuを使う上では当たり前？の16の常識 | mah365
Herokuの公式ドキュメントは英語なので読みづらいですよね。herokaijp/devcenterのように、有志が日本語訳してくれているドキュメントもありますが、その中でも特に抑えておきたい16個の常識について挙げてみました。（16日に公開する予定の記事なので、何となく16個挙げてみました。。） （補足）Herokuを使う上での登場人物の名前 Dyno 「だいの」と呼びます。1Dynoと言ったとき、一つサーバが立ち上がっているようなものだと考えて下さい。 Routing Mesh Herokuアプリにアクセスがあったときに、Dyno間の負荷をロードバランスしながらリクエストを振り分ける機構をRouting Meshと呼びます。たまに「Router Error」というログを吐くのですが、そのとき障害が起こっている場所はここです。 常識1. Dynoは1時間アクセスがないとアイドル状態になる
LINE DEVELOPER DAY 2016 開催のお知らせ « LINE Engineers' Blog
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog saegusa2017-04-16Yoshihiro was a network engineer at LINE, responsible for all levels of LINE's infrastructure. Since being named Infra Platform Department manager, he is finding ways to apply LINE's technology and business goals to the platform. こんにちは。LINEでネットワークやデータセンターを担当している三枝です。2017年1月にJANOG39で登壇する機会を頂きましたので、今回
ReactをjQueryの数行に要約する | POSTD
「Reactが素晴らしい理由は、UIをアプリケーションの状態の純粋関数にできるからだ」いうような話を聞いたことがあるでしょう。しかしそれだけではなく、不変性と仮装DOMを利用して動作するということも聞きますよね。その上、保存、読み込み、取り消し、それにタイムトラベル・デバッグと呼ばれるすごい機能まで自由に手に入れられる。でも知っていますか？ Reactの核となるアイデアを利用し、その恩恵に預かるのにこれらのことは必要ありません。jQueryの数行にしてお見せします。 <span id="colored-counter">0</span> <input id="color"></input> <button id="inc"></button> <script> $('#color').on('keyup', function () { $('#colored-counter').css('
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Basics_of_DNS_that_application_engineers_should_know - Speaker Deck
GitHub English Challenge Cheat Sheet - Qiita
USキーボードでキーを押しっぱなしでa… - Apple コミュニティ
