Vue.jsとNuxt.jsを使用して、スマホアプリで見かけるようなアニメーションを伴った滑らかなページ遷移をWebページに実装するチュートリアルを紹介します。 Native-Like Animations for Page Transitions on the Web 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 最近見かけたページ遷移のアニメーション 使用する理由 前提となる知識 始めてみよう フックの設定 最近見かけたページ遷移のアニメーション フロントエンドのUIで、最近私が最も刺激を受けたのは、スマホアプリで見かけるような滑らかなページ遷移（トランジション）です。こういったインタラクションを実装するのは難しそうに見えますが、一度実装方法をマスターしてしまえば、さまざまなUIに使用することができます。 ここで紹介する方

Accelerated Mobile Pages （AMP）の新しい拡張コンポーネントとして、「AMP stories」 が発表されました。このフォーマットは、タップ操作によって軽快に閲覧可能なフルスクリーンのビジュアルコンテンツを提供可能にします。 AMP stories が v0.1 から v1.0 へとアップデートされ、2019年 3月 19日をもって、v0.1 は廃止される予定です。これに伴い、下記で紹介しているサンプルは少し古くなっていますので、補足記事を別途書いています。詳しくは 「Re: AMP stories が発表されたので早速簡単なストーリーを作ってみた件 （v1.0 対応版）」 をご覧ください。 Accelerated Mobile Pages （AMP） については過去、この Blog でも何度か触れていますが （文末、「関連エントリー」 を参照）、先日、新たに 「

ブラウザからアセンブリ（機械語）を実行できるようにする技術 高速化手段、あるいはJavaScriptの処理系にできないことをするといった目的で提案された 2015年6月、Mozilla、Google、Microsoft、Appleが標準フォーマットとして開発することに合意した WebAssemblyが生まれた経緯 JavaScriptに実行速度が求められる時代になった 1. なぜJavaScriptは遅いか？ インタプリタ言語で 動的型付けをしている → 解析に時間がかかってしまう よって、コンパイラ言語と比べると遅い😭 当初、JavascriptはHTMLに飾り付けをする程度だった さっと書いて、すぐに動く、それが売りだった しかし最近では・・・ 複雑なアニメーション WebGLなどのグラフィック処理 計算速度の遅いモバイル端末 などにも用途が広がり、実行速度が求められるようになってき

TL;DR プログラムのネーミングで迷ったら GitHub でキーワードを検索して、ヒットした件数が参考になるのでは？ 複数キーワードを検索して結果の一覧を表示する CLI 作りました https://github.com/kyoshidajp/ghkw ネーミング迷いますよね？ みなさん、コードを書いていて変数やメソッド名のネーミングって迷いますね。 こんな時に自分たちはチームを横断して「こういう名前考えたんだけど、これってどうかな？」という確認を Slack 上で行っています。先日、この Slack チャンネルを見ていて考えました。 「GitHub で検索すれば世の中のコードでどのぐらい使われているかざっくり分かるので参考になるのでは？説」 GitHub で検索できるという条件付きではありますが、コードの規模からするとある程度期待できそうです。 GitHub で検索 例えば「除外条件」

It makes me smile when someone raves about how fast this website loads, because that's no accident. We put a lot of effort into making it so. It is the sort of thing that usually goes unnoticed, but when your readers are developers, there's a better chance they notice and appreciate it. I have written about this in the past, but it's worth re-examining because these ideas are always evolving. From

自分でもびっくりしてるいぬさん僕はフリーランスをしながら脱受託を目指してアプリを作って生活しています。だいたい1年のうち7割ぐらいをアプリ作りの時間に充てています。本稿では、Inkdropというマルチプラットフォーム対応のMarkdownエディタを一人で開発して月15万円の売上を達成するまでにやった事を包み隠さずにシェアしたいと思います。 Inkdropの月間売上の推移やったこと概要毎日感じるちょっとした問題を見つける自分自身がこれだ！と思えるまでプロトタイプを作るプライベートβ期間でヘビーユーザを作る継続性を重視して価格をつける決済処理はStripeで楽に実装する良いランディングページを作るユーザサポートを最優先にする自分の得た知見を惜しまずブログに書くクオリティで勝負する批判を全て無視する毎日感じるちょっとした問題を見つける僕は別に特別でもなんでもありません。人は意外と同じ事を感じたり

なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不

Sass/Lessでテーマを書いて、リアルタイムで確認しながら開発できるツールです。 github.com 目次 インストール 使い方 hbt の使い方 0. 開発用ブログを作成する 1. テーマの雛形を作成する 2. 開発用ブログにCSSが読み込まれるようにする 3. テーマを開発する 4. 完成したテーマを出力 インストール 動作にはNode.jsが必要です。 未インストールの方はこの辺からインストールしてください。 https://nodejs.org/ja/ ターミナルで以下のコマンドを実行すると、 hbt コマンドがインストールされます。 npm install -g @fand/hatena-blog-theme-boilerplate 使い方 hbt の使い方 0. 開発用ブログを作成する テーマの開発には、開発用のブログを開設しておくと便利です。 既存のブログをエクスポート