ブラウザ上でデバッグするときに使えるテクニック
ウェブ上でJavaScriptを実行してバグが発生した場合、ブラウザに内蔵されている開発者ツールを使ってデバッグすることがよくあります。そうしたブラウザでのデバッグにおいて役立つテクニックをNetflixでフロントエンドの開発に携わっているアラン・ノルバウアーさんがまとめています。 67 Weird Debugging Tricks Your Browser Doesn't Want You to Know | Alan Norbauer https://alan.norbauer.com/articles/browser-debugging-tricks ◆高度な条件付きブレークポイント 開発者ツールの「ソース」タブにはデバッガーが用意されており、JavaScriptの任意の行にブレークポイントを設定することで実行を一時停止して変数やコールスタックの中身を確認できます。ブレークポイントを
UIデザイナーが理解しておくべき11種類のナビゲーションと特徴 | ベイジの社長ブログ
WebサイトやアプリケーションのUIは、いくつかの要素の組み合わせで構成されますが、使いやすさに最大の影響を与えるのはナビゲーション要素でしょう。ナビゲーションのデザインを制する者がUIデザインを制する、といっても過言ではありません。 というわけでここでは、UIで最も大事な要素、ナビゲーションというものを整理して理解するために、その種類と特徴をまとめてみました。 1. グローバルナビゲーション ユーザがWebサイトやアプリを使う際に、もっともよく使われるのが、このグローバルナビゲーションです。通常は画面のどこかに常設されており、画面遷移をしても、決まった場所に、決まった並びで必ず表示されます。 メニューの構成方法としては、情報種別、機能種別、対象者／状況別、利用頻度別などの切り口があります。 Appleサイトのグローバルナビゲーション。どの画面でも、同じメニュー構成・同じデザイン・同じ場所
KPIとは｜KPIの設定方法とKPI/KGI指標をブランディングを例に解説｜KPIツリー例有 - Mission Driven Brand
この記事に辿り着いたあなたなら「KPIの設定方法」や「KPI指標」に関心があることだろう。 このブログ「Mission Driven Brand」は、外資系コンサルティングと広告代理店のキャリアを持つ筆者が、ブランディングやマーケティングの「できない、わからない」を解決するブログだ。 あらゆるビジネス活動は投資を伴う以上、より少ないリソースで、より高い目標を達成する必要に迫られる。そしてそのためには、何らかの形で「目標の設定」「戦略の実行」「達成水準の評価」「次のステップに向けた改善活動」は必要不可欠な要素となる。 よって今回は「KPIとは何か」あるいは「KPIの設定方法とKPI指標」について解説しよう。その内容は以下の通りだ。 KPIとは何か？ KPIを設定する6つの目的 KPI設定の方法と手順 KPI指標の例 KPI設定のコツ KPI管理の仕組み作り 見えないものは管理できない。そして
CSSの進化がすごい！レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシート
シンプルなHTMLで、レスポンシブ対応の六角形のヘキサゴン レイアウトを簡単に実装できるスタイルシートを紹介します。 JavaScriptは完全に不要で、CSS Gridを使用してdiv要素にclassを付与するだけで実装できます。 Hexi-Flexi Grid Hexi-Flexi Grid -GitHub Hexi-Flexi Gridの特徴 Hexi-Flexi Gridのデモ Hexi-Flexi Gridの使い方 Hexi-Flexi Gridの特徴 JavaScriptは必要なし、CSSのみで実装。 六角形のアイテムの高さ・幅、列・行は自由に設定。 セル、列、行のモジュラー形式。 背景画像を自動入力する機能をサポート。 サポートブラウザ CSS Gridで実装するため、サポートブラウザは下記の通りです。 Firefox 56+ Chrome 61+ Safari 10.1+
「GoogleAnalytics見てアクセス解析して」って言われた時にまずしていること - Qiita
はじめに 僕はウェブサイト制作会社でサイトの運用・アクセス解析担当をしている者です。 ウェブサイトの制作・リニューアルを受注した際にプロジェクトに参加し、クライアントの現状サイトのアクセス解析とレポート作成、リニューアル提案が主な仕事です。 クライアントと直接相対するディレクターから「GoogleAnalyticsの権限もらったからアクセス解析して」とオーダーを受け、アクセス解析を行うことになります。 そもそも、初めて見るサイトを構造から理解し、リニューアルに資する提案ができるようなインサイトを得るまで分析するのは本当に骨が折れます。 さらに（全くの主観ですが）、多くのクライアントはGoogleAnalyticsを「タグ貼っただけ」状態で放置しています。 そのため、計測したデータが整理されていない・そもそも正しく計測できていないということはよく起こります。 そして、そのような計測エラーがノ
美しいSVGアニメーションを使ったWebサイト10選【デザインの参考に】 | Handy Web Design
SVGというのはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、拡大縮小しても画質を損なわないベクターデータです。Adobeのイラストレーター使っている人はよくわかると思います。 そんなSVGをブラウザ上でCSS3やJavascriptを使って動かすSVGアニメーションを良く見かけるようになったので、今回はおすすめのものを10個ご紹介したいと思います。どれもきれいなものばかりなので、見てみると自分でもSVGアニメーションを作ってみたくなりそうです。 それではどうぞ。 The 25th Hour Louis Coyleさんの作品。自然の中で夜が明けていく様子がとても綺麗です、蛍のふわふわとしたアニメーションも幻想的。 http://louie.co.nz/25th_hour/ Super Duper Studio ブラジルのデザインスタジオの
多くの採用サイトが間違っていると私が思う理由 | ベイジの社長ブログ
企業にとって、採用サイトあるいは採用ページというのは、既に存在して当たり前のものになっています。Webサイトは本業のビジネスではなくむしろ採用に活用したい、というような声も多く聴きます。実際に私たちが受注する案件でも、採用サイトは少なくない割合を占めています。しかしこのように企業からの関心が非常に高い採用サイトでありながら、マーケティングの一部として作られるWebサイトと比べると、戦略性や考え方の点で大きく遅れをとっているようにも感じます。このエントリーでは、世の採用サイトに関して私が感じている問題点を少しまとめてみました。 採用サイトからの直接エントリーが増える条件採用サイトを立ち上げる多くの企業は、自然検索からの採用サイトへの流入が増え、採用メディアや採用エージェントを挟まない直接エントリーが増えることへの期待を口にします。しかしその考えはいささか早計ではないでしょうか。 採用サイトの
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
食べログのフロントエンドエンジニアってめっちゃ大変やねん･･･
