chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

rel="noreferrer"

先日の記事でrel="noopenerについて記述しました。 今回は補足として、rel="noopener noreferrer"と設定する事がより良い事がわかりました。 noopnenerはIE/Edgeやある端末ブラウザで対応していません。 Can I use... Support tables for HTML5, CSS3, etc …

rel="noopener"

aタグにtarget="_blank"を設定している場合は、rel="noopener"をつけておくのがよさそうです。 というのも、遷移先のページのjavascriptで元のページを操作することができてしまうそうです。 遷移先でwindow.opener.location=hogehogeとしてあると元タブのペ…

Cache-Control immutable max-age

Cache-Controlにmax-ageを指定することで、ブラウザにリソースをキャッシュさせることができます。 ブラウザはmax-ageに満たないキャッシュを持っていてもConditional GETによってキャッシュの有効性の問い合わせを行います。 Immutableは、キャッシュがmax-…

nofollow

nofollowについて クローラーにページ内のリンクを辿らせず、リンク先にページの評価を渡さないために指定する値です。 aタグのrel属性でも指定できる値です。 nofollowの使い方 <meta name="robots" content="nofollow"> <a href="http://sample.jp/" rel="nofollow">サンプル</a> 信頼できないリンク先のページが保証できない、あるいは保証したく</meta>…

noindexタグ

noindexとは noindexとは、検索エンジンにページを認識(インデックス)させないために指定するmeta要素のcontent属性に指定できる値です。 noindex属性の使い方 <meta name="robots" content="noindex"> のように設定します。 - 検索結果に出したくないページがあるとき - 複製のコンテンツを扱う</meta>…

history.replaceState

history.replaceStateメソッドは現在の履歴エントリを修正します。 history.replaceState(state, title, url) 第一引数にはstate。 第二引数にはtitle。 第三引数にはurl。 これらを引数に渡して実行することにより、現在の履歴を変更します。 SPAを実装した…

safariでbuttonタグにdisplay:flexが効かない問題

buttonタグを使って表現する時に困った事です。 このようなボタンを表現する時に <button>さらに記事を見る</button> のように作るとしてcssで button { width: 100%; height: 50px; display: flex; align-items: center; justify-contente: center; } のようにテキストを上下…

ページネーションによるcanonicalタグの対応

ページネーションは一連の長い記事を複数のページに分けたり、いくつかのまとまりに分けたりするときによく使われます。 例えば 1ページ目はhttps://hogehoge?page=1 2ページ目はhttps://hogehoge?page=2 のようなURL設定する場合があるとします。 このよう…

運動しましょう!

今日はケータイからの投稿です。 中学高校でやってたバスケしてきました!定期的にやってます! 社会人になってから風邪で本格的に休んだのは2日ぐらしかないのでいたって健康です。 適度に運動して健康を維持する事はとても大事ですね!仕事のパフォーマン…

cpコマンドでハマった事

cpコマンドを使ってファイルやフォルダをコピーしようとした時にハマった事です。 cp hoge/assets build のようにやると、もともとbuildフォルダが存在しないのでエラーになってしまいます。 buildフォルダが作成されbuildフォルダの中にhogeの中のassetsフ…

ステータスコード1xx系3xx系

Webを支える技術 ── HTTP,URI,HTML,そしてREST(WEB+DB PRESS plusシリーズ)|gihyo.jp … 技術評論社 先日購入した本から1つ。 よく見るステータスコードは 2xx系のリクエストの成功 4xx系のクライアントエラー 5xx系のサーバエラー 他に1xx系の処理中…

sketchで透明度を簡単に変更する

あるレイヤーのopacityを調節する時にinspector内にあるopacityを設定する箇所でいじれます。 ここで設定することもできますが、やっぱりショートカットキーを使ってさくさく操作したいところ。 そこで1~9のキーを押すことで簡単にopacityを変更することが出…

sublimeText 戻るショートカットキー

こんばんは。chocotakaです。 コーディング中に入力した内容を無かったことにしたかったり、入力前に戻りたいに使うショートカットキーは cmd + Z このキーはとてもよく使います。 しかし過去に戻りたい時にたまにあるのが、cmd + zで戻りすぎてしまう時。 …

cssでカスタムイージング

cssでアニメーションをしたい時にはtransitionを設定したりanimationを設定したりします。 さらにアニメーションにイージングを細かく指定したい時にcubic-bezierを使うととても便利でした。 トランジションの変化が進行する時間をX軸、変化の度合いをY軸と…

sketchで要素間の幅を測る

sketchである要素間のマージンが何ピクセルあるか調べる時にとっても便利なショートカットキーがあります。 それは調べたい要素にフォーカスをあてた状態でaltを押し続けるだけです。 あとはカーソルを動かしてみると、数値が表示されます。 とても便利でデ…

URIとURLとURN

Webを支える技術 ── HTTP,URI,HTML,そしてREST(WEB+DB PRESS plusシリーズ)|gihyo.jp … 技術評論社 先日購入した本から1つ。 世間一般的に使われている言葉でURLがあります。 URLはサイトのアドレスを指す時に使ったりしますが、正しい名称はURIです…

【css】 クラスの付け替えで擬似要素は上書きできない?(解答編)

先日書いたこちらの記事 【css】 クラスの付け替えで擬似要素は上書きできない? - chocotakaの日記 こちらchromeの仕様のようで、safariやfirefoxで検証した結果上書きする事が出来ていました。 もしこのような実装にぶつかることがありましたら、気をつけ…

【css】 クラスの付け替えで擬似要素は上書きできない?

cssの擬似要素でよく使う:beforeと:afterがあります。 クラスを付け替えてスタイルを指定しようとしていたのですが、擬似要素のcssは上書きできませんでした。 最強の!important攻撃ですら効きませんでした。cssは奥が深い。

【css】特定の属性を持つ要素に適用する

cssで表現できる事がどんどん増えていますが、意外と知られてなかったり知っておくと便利な方法があります。 今回はその中の1つの、特定の属性を持つ要素にcssを適用する。 a[title] { color: red; } 見慣れない書き方の人もいると思いますが、この指定の仕…

sublimeText 関数の定義元を検索

使用している関数等の定義元のコードを探すときに便利なショートカットキーがありました。 検索したい関数名にカーソルを合わせて cmd + shift + I で、参照元のファイルが一覧で表示されます。 sublimeText3ではホバーさせるだけで表示されるようになってい…

おすすめの本①

プログラマーとして知識力UPとしておすすめの本を紹介①です。というよりおすすめしていただいた本です。 Webを支える技術 ── HTTP,URI,HTML,そしてREST(WEB+DB PRESS plusシリーズ)|gihyo.jp … 技術評論社 今回こちらをamazonでポチりました。 プログ…

sublimetext 行選択ショートカットキー

今日も作業効率の上がるショートカットキーです。 行をコピーするショートカットキーです。 cmd + Lでカーソルのある行全部を選択することができます。 そのまま cmd + Lを続けて押すと次の行、次の行と選択される範囲が広くなっていきます。 その行をコピー…

sublimeTextで小文字⇄大文字

エディターはsublimeTextを愛用してかれこれ5年以上経つのですが、ずっと無料版で使っていました。 そして購入しました。無料版いままでありがとう。有料版これからよろしくお願いします。 せっかく購入したので意欲的にショートカットキーを覚えようと思い…

sketchで色をすぐ調べる方法

sketchである要素の色を調べたい時に、レイヤーからその要素をクリックしていって調べる方法もありますが、階層が深い場合手間になります。 そこで簡単な方法で、ctrl + cでカラーの抽出が可能になります。 このようにカーソルが丸い円になりその範囲内にあ…

テキストをCSSで縦書き表示

テキストは基本横書きで、文字は左から右へ表示されます。 縦書きで表示する案件がなかったので、縦書きで表示する場合はどうしたらいいか調べました。 writing-mode これをcssで定義すれば縦書きになります。 writing-mode: vertical-rl なら右から左へ wri…

コミットログを修正

こんばんは、chocotakaです。 gitのコミットログは、自分で過去のコミットを参照するときにも大事ですし、他の人がチーム加わった時にもログを辿るために大切な要素になります。 先ほど作業した内容をコミットしたときに、内容が不十分だったり書き間違えた…

axiosでbasic認証を設定をする

axiosでget処理やpost処理をする時にbasic認証を設定をすることができます。 axios.get('/user?ID=12345', { auth: { username: abcd password: 1234 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(er…

brotliについて

先日紹介したzopfli。 今回はさらに圧縮率が高いbrotliについてです。 https://github.com/google/brotli brotliはzopfliと同じくGoogleが開発した圧縮アルゴリズムです。 自分の中ではzopfliの上位互換??のような印象。 zopfliでの圧縮率は3〜8%程と先日…

zopfliについて

zopfliはGoogleが開発した圧縮アルゴリズムです。 よく使われているgzipと比較して、圧縮率は3〜8%程度向上するみたいですが、圧縮時間がそれなりにかかってしまうのが欠点です。 zopfliは圧縮処理を何度も繰り返します。回数が多い程圧縮率は上がるみたいで…

expressのPOST処理時のrequest.bodyがundefined

nodemailerを使ってメール送信の実装をしていた時にexpressのPOST処理時のrequest.bodyの中身がundefinedになって困っていました。 解決方法はbody-parserを使う事でした。 GitHub - expressjs/body-parser: Node.js body parsing middleware expressの.use(…

iphoneでinput要素にfocus時に拡大してしまう問題

iphoneで名前や住所を入力する画面はよくあると思います。 ただiphoneの仕様で入力要素のfocus時に勝手に拡大されてしまう、ありがた迷惑な機能があります。 入力してfocusが外れても拡大されたままなので、とてもめんどくさい状態のままになってしまいます…

sketchの簡単切り出し

自分が普段使っているちょっとした小技を紹介します。 sketchでとりあえず画像を切り出したい時ってありませんか?? 右下にあるExportから選択して保存先を指定して…っていちいちめんどくさいですよね。 そんな時はドラッグ&ドロップで簡単に画像が切り出せ…

markdownリスト記述方法

markdown記述でリストで記述する方法で、HTMLでいうとolにあたるものの書き方が独特でした。 リスト1 リスト2 リスト3 これで頭につく数値が 1. 2. 3.と数字が増えて行きますが、 1. リスト1 1. リスト2 1. リスト3 このような書き方で1. 2. 3.と表示されま…

npm version

このコマンドはpackage.jsonのバージョンを上げてgitのコミットとタグを追加してくれるコマンドです。 gitのワーキングディレクトリがクリーンになってるか確認する preversionのスクリプトを実行する package.jsonのバージョンを上げる versionのスクリプト…

ショートカットの大切さ

macでアプリケーションを変更する時のショートカットキーがあります。 command + tabこれはmacを使っている人ならほとんどの人が知っていると思います。 ただ自分は今までこのようなショートカットキーを使ってきていませんでした。 弊社の優秀なエンジニア…

placeholderに装飾をする場合

ちょうどform周りの実装をしていて、placeholderにオリジナルの色を付けたい時にどうしたらいいのだろうと思い、調べたら簡単にできました。 ちなみに端末や、ブラウザによってplaceholderの文字色はそれぞれ違う設定になっています。 例) ::-webkit-input-…

Passive Event設定によるスクロールイベントの改善

javascriptのイベントハンドラはevent.preventDefault()スクロールを止めてしまう事があります。 なのでイベントハンドラの処理が完了するまでスクロールする事ができずに、ユーザビリティのて低下につながってしまいます。。 document.addEventListener('to…

Node.jsで例外処理によるプログラムの終了を回避する

Node.jsでは例外処理が発生するとデフォルトでは標準エラー出力にスタックトレースが出力され、プログラムが停止してしまいます。 Node.jsは1つでもエラーが発生してしまうと停止してしまいますので、予期せぬエラーにも対応できるようにしておくのが望まし…

githubのプルリクエストのテンプレート設定

githubでプルリクエストを送る時にどのような変更をしたのかの説明を記述すると思います。 そこでプルリクエストをするたびに毎回記述するのはめんどくさいですよね。 そこでリボジトリ直下に.githubフォルダを作りその中にPULL_REQUEST_TEMPLATE.mdを設定し…

git rebaseコマンドを使うようになって

今までgitでのコミットログをまとめる事をやっていなかったため、rebaseコマンドを使ってきませんでした。 最近使うようになったので書き溜めておきます。 git rebase -i HEAD~~ ~ の数でどこまでのコミットを扱うかの範囲指定します。 上記のコマンドだとHE…

CSSでカラー等を変数で管理する

:rootに定義する :root { --theme-color: #FFF } というように :root 擬似クラスに --theme-color という変数名で #FFF が定義する事ができます。 あとはここで定義された変数は .text { color: var(--thema-color); } として var(--theme-color) として使用…

npm installでのmodulesのバージョン指定でのハマり

npm install コマンドを叩いて package.json で管理されている modules 達をインストールします。 typescript を使っているのですが、バージョン2.4~ に上げてしまうとrxjs との互換性がまだできていなくエラーになってしまいます。 ローカル環境での typesc…

環境変数にBasic認証の設定する

Node.jsの開発環境によってBasic認証を設定する場合があると思います。 例えばAPIにBasic認証を設定する時に、javascriptで定数にそのまま入れてしまうと、コードにそのまま吐き出されてしまうのでバレてしまい、Basic認証をしている意味がありません。 そこ…

SPAでhistory backでのスクロール位置

SPAを実装したことのある人なら誰もが一度はつまづく画面遷移時のスクロールポジション。 自分も「このタイミングでこの位置にいてほしいのに。。。」と思う事が多々ありました。 特にブラウザバック時にいたスクロールポジションを保持している時の対応。 …

iPhoneでスクロールモジュールに慣性を持たせる

webサービスでよく見るカルーセル。 普通にスクロールするモジュールとしても利用されてると思います。 例)Amebloから iPhoneでスクロール時にCSSで慣性を簡単に持たせる事ができる。 -webkit-overflow-scrolling これを設定するだけです。 あるのとないの…

コマンドをカスタマイズしてみました

git や npm のコマンドをよく使うものの、特にカスタマイズせずそのまま使っていました。 alias に登録するとすごい省略できて便利でした! .aliases ファイルを作ってそこに記述するだけです。 例えば alias g='git' とすると 今まで git commit だったり g…

svgを使ったアイコンの表示設定

ロゴだったり、ツイッター・フェイスブックのアイコンを表示する時に、svgを使うと便利です。 <svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="filePath#svgId"></use> </svg> filePath のところに参照するsvgファイルををセット。(例:sample.svg) svgファイルのサンプル <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> </svg>

expressでfaviconを設定していなかったために。。。

nodeをあまり触った事が無かった自分が 現開発中のサービスのexpress内サーバサイドレンダリングをさせる実装をしていました。 が、開発初期段階にレンダリングが2回走っていた。。。 原因はfavicon を設定していなかったためでした。 app.get('*', (req, r…

CloudFrontを経由した時に起こる UserAgentへの影響

nodeでのUAで判別して何か処理を分けている時にハマったので共有します nodeでモバイルかPCかの判別をしたくて、 express-useragent や ua-parser 等を使ったりして実装をしていました。 ユーザ体験の向上のために、CroudFront を経由してキャッシュし、レス…

同じfont-familyで普通文字と太字の正しい設定方法

cssで @font-face を設定する場合の方法を学びを共有します。 文字の太さの種類でフォントを設定する場合 @font-face { font-family: "Noto Sans CJK JP"; font-weight: 400; font-style: normal; src: local("Noto Sans CJK JP"), url(NotoSansCJKjp-Regula…