Skip to content

Instantly share code, notes, and snippets.

Avatar
🏠
Working from home

Kazunari Hara herablog

🏠
Working from home
View GitHub Profile
@herablog
herablog / web-vitals-collection.html
Created Dec 4, 2020
Send CWV (Core Web Vitals) to Firebase Performance with the Target Element Names
View web-vitals-collection.html
<!-- Firebase Performance SDK should be loaded before this script -->
<script type="module">
/**
* Combine element with its ID and class names
* @pamam {HTMLElement} element
* @return {string} element name - e.g. div#id.classname
*/
function combineElementWithIdAndClass(element) {
const idName = element.id ? `#${element.id}` : '';
const className = element.className
@herablog
herablog / cwv-report-to-slack-gas.js
Last active Dec 14, 2020
CWV (Core Web Vitals) Report to Slack with CrUX API
View cwv-report-to-slack-gas.js
/**
* This is an example code for Google App Script
* You can run this script with time-driven triggers
* @see https://developers.google.com/apps-script/guides/triggers/installable#time-driven_triggers
*/
// Settings
const CRUX_ORIGINS = []; // e.g. https://example.com
const CRUX_METRICS = ['first_input_delay', 'largest_contentful_paint', 'cumulative_layout_shift']; // first_contentful_paint, first_input_delay, largest_contentful_paint, cumulative_layout_shift
const CRUX_FORM_FACTOR = ['PHONE', 'DESKTOP']; // ALL_FORM_FACTORS, PHONE, DESKTOP, TABLET
@herablog
herablog / amp-conf-2017.md
Created Mar 13, 2017
AMP Conf 2017まとめ
View amp-conf-2017.md

AMPとは

  • AMPの立ち位置
    • 1番はやいのはハードチューニングしたサイト、それができるエンジニアのいる企業
    • AMPは2番手の位置
    • 遅い良くないサイトを2番手の位置まで押し上げるのが目的
    • AMP単体での使い方も今後考えられるので、アメブロでは両方持っておく方針 (Pinterestとかと一緒)

事例集

  • Pinterestの事例
    • 150M+ MAU, 400+ engineers, 1000+ experiments
View universal_links.md
View gaiq_memo.md

デジタル分析とは

自社や競合の質的・量的データの分析を通して 顧客に対する体験を絶えず改善し、 成果を高めること

  • 主導権はユーザーにある
  • ビジネス目標に対する重要な行動がある
    • eコーマス 商品購入
    • ブランディング 認知されているか
    • 情報提供 情報が探しやすく見られているか
View how_to_be_a_tester_on_iOS.md

How to be a tester on iOS

Install TestFlight from App Store

Requires iOS 8 or later.

App Store

Launch TestFlight and Accept Apple Privacy Policy

Push "Accept" button.

View gist:6a7030effd2cbdc46e1c

第1回チキチキ カート大会@北千住 (エンジョイレベル)

開催概要

2014年10月25日(土) 17:30 - 20:00@シティカート
東京都足立区千住関屋町19-1

持ち物

費用: 5,000 ~ 6,000円 (人数によって変わります。)
サンダル・ヒールはNGです。汚れてもいい服装でお越しください。

View gist:10103423

Header 1

Header 2

Header 3 ### (Hashes on right are optional)

Header 4

Header 5

Markdown plus h2 with a custom ID ## {#id-goes-here}

Link back to H2

This is a paragraph, which is text surrounded by whitespace. Paragraphs can be on one

View css3recipe.md

CSS3デザインレシピ

この記事はFrontrend Advent Calendar 2013 18日目への投稿です。

Webサイトの装飾を担当するCSSには様々な機能追加・改良が加えられ、レベル3(CSS3)となった今、かつて画像やFlashなどでしか表現できなかったようなことが、CSSのコードを書くだけで実現できるようになりました。

CSS3で実装されたプロパティやセレクタを使うと従来画像にしていたものが、CSSだけで表示できたり、デザインのためだけに必要だった無駄なHTML要素が減ったりして結果的に読み込み速度とメンテナンス性の向上に役立ちます。

ここではCSS3で表現されたデザインサンプルをご紹介します。