サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 9
weblike-curtaincall.ssl-lolipop.jp
2 日間持病の薬を飲み忘れてかなり気分悪いなか書いてます … はじめに 明日, 2019 / 03 / 19 (Tue) を最終出社日として, 2 年と約 4.5 ヶ月修行させていただいたサイバーエージェントを退職します … 入社までの経緯や業務内容 FRESH を卒業しました を見ていただけるとほぼすべてです. サイバーエージェントで得たこと 前職では, 社内ニートだったのでサイバーエージェントで得たこと = 社会人エンジニアとして得たことです いまどきのフロントエンドエンジニアとして最低限のスキル ES2015 ~, TypeScript BEM, styled-components などの CSS 設計 React Flux フレームワーク (主に Redux) Redux 周辺ライブラリ (主に redux-saga) Service Worker パフォーマンス・アクセシビリティ
この記事は, 個人の経験にもどづく考えが非常に多いです. すべてのケースにあてはまるわけではないことに考慮していただければと思います. 万能は無能とは ? ひとことで言えば, なんでもできるということはなんにもできないことと同じということです. ある種の逆説を含んでいるように思われます (なんでもできるのだからなんにもできないことはないのでは ?) … すでに万能であると思われる人は問題ありません. 問題は, これから万能を目指そうとする人です. なぜなら, 誰しも, 1 日は 24 時間しかないという不変の事実を考えるとその逆説も納得していただけるかと思います. 万能を目指してしまう理由 かなり個人的な見解ではありますが, 万能を目指してしまう人は以下のいずれかにあてはまることが多いように思います (わたし自身がそうだったのですが …) 完璧主義である 好奇心が強すぎる 独力でなんとかし
1. Overview なにかと破壊的な変更が多い webpack ですが, v3 から v4 にアップデートする際にも破壊的な変更があるので, 自分の備忘録として残しておきます. 2. webpack-cli webpack 4 からは, コマンドライン機能が webpack-cli に分離されました. したがって, npm install する際に以下のようにする必要があります. $ npm install --save-dev webpack webpack-cli この対応は, あっという間に完了するかと思います. 3. mini-css-extract-plugin 以下の, webpack.config.js は v3 であれば正常に動作するものです. const webpack = require('webpack'); const ExtracktTextPlugin =
デモ 03 時間領域の波形描画 AnalyserNodeインスタンスのgetByteTimeDomainDataメソッドで, 時間領域の波形描画に必要なデータが取得可能です. getByteTimeDomainDataメソッドは, Uint8Array型の配列を引数にとります. この配列に波形描画に必要なデータが格納されます. 引数に指定するUint8Array型の配列のサイズの上限はfftSizeプロパティの値です. これより大きい値を指定してもエラーは発生しませんが, 意味はありません. なぜなら, getByteTimeDomainメソッドは, fftSizeプロパティの単位で時間領域の波形データを取得するので, fftSizeプロパティ以上のインデックスに対応する配列の要素は0になるからです. 具体的には, fftSizeプロパティのデフォルト値は2048ですが, これより大きな配
1. Overview Web フォントはその性質上, ブラウザがテキストの表示に必要なフォントを知ることができるのは他のリソースと比較するとずっと後になります. @font-face が含まれた CSS をロード スタイルとドキュメントを結合した視覚部分を表現するツリーの構築 テキストとフォントの関係が示された時に, 必要なフォントを確定する といった, フローとなっているからです. これが引き起こす問題として, FOUT (Flash of Unstyled Text) / FOIT (Flash of Invisible Text) があります. FOUT リクエストしたフォントがロードされるまでの間, いくつかのブラウザではタイムアウトするまでの時間が設定されています. タイムアウトまでの間にロードが完了しなかった場合は, 代替フォントが表示され, 代替フォントから指定フォントへの
tag は画面上に表示されるものではないので, 使い方がわかりにくいかもしれませんが, これは主に, すでに表示されている通知を置き換えるために使います. 通常, 1件以上の通知が表示されている状態でさらに通知を生成すると, 既存の通知とは別に新たな通知が表示されます. しかし, tag の値が既知の通知と一致する場合は, 新しい通知が別に表示されるのではなく, 当該通知の中身が新しいもので置き換えられます. tag オプションをうまく活用することで, 通知まみれになるのを防止することができます. ユーザーがデスクトップ通知をクリックしたときに何らかの処理を実行するには, Notification インスタンスに対して, イベントリスナーを設定します. notification.addEventListener('click', (event) => { console.dir(event
Overview 「Web Push 通知を実装してみた」で Web Push 通知の概要と, web-push モジュールを利用した Web Push 通知の実装を記載しました. しかしながら, web-push モジュールを利用した Web Push 通知は鍵のやりとりが少々煩雑で実装も複雑になってしまいます. Firebase Cloud Messaging (FCM) を利用すると, 鍵のやりとりの代わりにトークンを利用することで Web Push 通知を簡単に実装することができます. What is Firebase Cloud Messaging ? クロスプラットフォームのプッシュ通知のためのソリューションです. 詳細は, こちらのドキュメントを参考にしてください. How to use Firebase Cloud Messaging ? Firebase console
Canvasのrotateメソッドは斜めに矩形を描画するときなどに役に立ちますが, デフォルトの状態では回転の中心はCanvasの左上, つまり, (0, 0) が中心となるので意図した回転にならないことが多いです. そこで, translateメソッドを利用します. translateメソッドを利用することで, そのメソッドを呼び出し以降描画の位置を, 指定したぶんだけ移動させることが可能になりますが, それがrotateメソッドの回転の中心にも影響させることが可能です. こんな感じ. var canvas = document.querySelector('canvas'); var context = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; //回転の中心を中央に移動
頻繁に使うことはないですが, WYSIWYGエディタの実装などでは使うこともあるかと思います. まず, テキストを選択している状態で以下のスクリプトを実行して, 選択範囲を保持します. var selection = window.getSelection(); var range = null; if (selection.rangeCount > 0) { range = selection.getRangeAt(0); } 次に, テキストの選択を解除している状態で以下のスクリプトを実行して, 選択範囲を復元します. selection.removeAllRanges(); selection.addRange(range.cloneRange()); ポイントは, 選択範囲を復元するときに, いったんすべての選択範囲を解除する (selection.removeAllRanges(
contentEditable領域でキャレットを移動するには, SelectionオブジェクトとRangeオブジェクトを利用する. ただし, IE10以下はまったく異なるIE独自のインターフェースを理由するので, IE10以下では動作しません (IE以外のメジャーなブラウザ, IE11では動作します). 例えば, キャレットをcontentEditable領域の先頭に移動させたい場合. document.querySelector('[contentEditable]').addEventListener('click', function(event) { var selection = window.getSelection(); //Selectionインスタンスの取得 var range = document.createRange(); //選択範囲をもたないRangeインスタン
自作しているWeb Audio APIのライブラリ XSound.jsでKarma + Jasmineによるユニットテストを始めたので, その備忘録として記載しておきます. Karma + Jasmineによるユニットテストの環境構築は前日の記事を参考にしてください. 1. Karma設定ファイルの生成 まず. テスト対象となるディレクトリで以下のコマンドを実行します. $ karma init コマンドを実行すると, 初期化ウィザードが出力されるので, 順に入力していきます. 1 – 1. テスティングフレームワークの選択 Which testing framework do you want to use ? Press tab to list possible options. Enter to move to the next question. > jasmine 1 – 2.
Node.jsでメール送信するためのモジュールであるnodemailerをインストールする必要がありますが, インストールするためにはNode.jsのバージョンが 0.10 以上でないといけなかったので, npmを利用してNode.jsをアップデートしました. そのコマンドを備忘録として残しておきます. $ sudo npm cache clean (-f) //Macのローカルだと -fは不必要っぽかったです. $ sudo npm install -g n $ sudo n --latest //最新版のバージョンを表示 $ sudo n --stable //安定板のバージョンを表示 $ sudo n latest //最新版の場合. 安定板であればstable $ node -v 0.11.13 //現時点での最新版のバージョンっぽいです. ちなみに, node-ninjaでは同
AngularJSを利用して, チェックボックス主体のフォームを作成する場合にいろいろはまったので備忘録的にまとめておきます. ただし, チェックボックスをトグルボタン的に利用する(つまり, チェックされているかどうかが重要)ケースではなく, 例えば, 該当する項目をチェックしてサーバーに送信するといったフォームの場合(つまり, チェックされている値が重要) です. 1 . まとめてチェックの実装 チェックボックスが多い場合, この機能を実装することが多いですが, AngularJSであれば, モデルのバインドだけで実装可能なので, コントローラーが不要です. <dl> <dt><input type="checkbox" ng-model="checkAll" /> Check All </dt> <dd> <input type="checkbox" ng-checked="check
エフェクターの実装に必要な知識 Web Audio APIを利用する楽しみの1つはエフェクターを実装することかもしれません. Web Audio APIが定義するノード (DelayNode, BiquadFilterNode, WaveShaperNode, DynamicsCompressorNode…) を利用することによって, 比較的容易にエフェクターを実装することが可能です. しかしながら, Web Audio APIによるハイレベルな (抽象度の高い) APIを利用することによって, エフェクターを実装する場合でも, 基本となる知識が2点ほどあります. LFO (Low Frequency Oscillator) AudioParamへの接続 LFOに関しては, Web Audio APIに限ったことではなく音信号処理に関係することです. また, connectメソッドはAud
このページを最初にブックマークしてみませんか?
『weblike-curtaincall.ssl-lolipop.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く