JavaScript で CPU が Intel かどうかを判定する（ついでに JIT を検知する）
先日、次のような Tweet を見かけました TIL I discovered that TensorFlow.js uses an interesting trick to sniff your CPU architecture in WebAssembly. pic.twitter.com/LVyywIM48I — Robert Knight (@robknight_) January 4, 2023 面白かったので、なぜこうなるのかの解説と、ついでにこのテクニックを使った JIT 検知方法などについて紹介します。 JavaScript における低レイヤーの扱い JavaScript においては、挙動が比較的しっかりと仕様に定められているために、環境による振る舞いの違いはあまり発生しません。しかし、低レイヤーに降りるほど振る舞いは実装依存になり、環境差が発生する余地が出てきます。 一番
海外のゲーム会社であった制度 - じじいのプログラミング
今まで、バンクーバー→バルセロナ→シンガポール→香港で働いてきました。それでいろいろな職場を見てきたので、海外のゲーム会社であった制度について、列挙してみました。 日本の会社でも、既に同様の制度をやっていて、珍しくない場合も多くあると思います。 複数の会社のケースを混ぜて書いています。 ゲーム開発技術に関することは、ほとんど書いていません。 ご指摘がありましたら、修正したり詳細を追加しますので、お気軽にどうぞ（内容が後で変わる可能性があります） 人事（採用） 面接 ビザ リファラル採用 リファレンスチェック（照会） カンファレンス時の招待者限定パーティー 人事（評価） 相互評価制度 OKR（Objectives and Key Results） 人事（解雇） 解雇 PIP（Performance Improvement Plan） スタジオ閉鎖 人事（その他） 若手が海外スタジオで1年間働
Firebaseの存在をフロントエンドから隠蔽するために
「Firebase は安いし楽だしマジ最高」という一心で技術選定してしまったプロダクトが成功して見えてきた課題、割高なコスト・権限管理・カスタマイズ性、そして （特性やスキルセット的に）RDB 製品が適していたのに無理やり Firestore を採用したことによるデータ不整合。 その結果チーム内で Firebase を抜ける機運が高まるも、Firebase べっとりなアプリケーションすぎて移行しづらいといった問題に出会うかもしれません。 そのような場合に備え、Firebase の存在を隠蔽して開発することに挑戦してみましょう。 注意: Firebase を剥がしているときに「俺、次は絶対そうするわ」と感じたものを書いているだけであり、まだ実際にはこのパターンでプロダクション導入していません。 あくまで個人開発で試してみていけそうと思ったので、提案しますという体です。 また Firebase
CSSで美しいシャドウをつけるbox-shadowの古い書き方とこれからの書き方
CSSで美しいシャドウをつけるbox-shadowの書き方を紹介します。 少し大きめのシャドウを適用し、ネガティブに縮小させることで、通常のシャドウより少しだけ彩度が高くなり、要素がくっきり見えます。
HTTPSに対応したWordPressのローカル開発環境をDockerで構築 - Qiita
はじめに WebサイトのHTTPS対応が必須な昨今、ローカルでWordPressのテーマ開発をするときもHTTPSに対応しておきたいですよね。 そんな環境をDockerを使ってサクッと構築する術をご紹介します。 オレオレ証明書の発行を頑張る必要もないので、比較的楽にできると思います。 概要 公式ドキュメントのdocker-compose.ymlで構築できる環境をhttpsに対応させる mkcertで証明書を発行 ※最新のWordPressを用いてイチから開発、もしくは移行プラグイン（All-in-One WP Migrationなど）を用いて既存のWordPressをローカルへ持ってきて開発することを想定しています。 筆者の動作環境 macOS Mojave 10.14.6 Docker for Mac 2.1.0.4 Homebrew 2.1.15 Chrome 78.0.3904.70
オブジェクトの値をコピーするObject.assign() - 30歳からのプログラミング
JavaScriptでは、オブジェクトが格納されている変数を他の変数にコピーすると、そのオブジェクトへの参照がコピーされる。 そのため、元となるオブジェクトの値を変更すると、コピー先のオブジェクトにも変更が反映されてしまう。逆も然り。 let obj1 = {value:'hoge'}; let obj2 = obj1; obj1.value = 'fuga'; console.log(obj2); // { value: 'fuga' } だがES2015で追加されたObject.assign()を使うと、参照ではなく値をコピーできる。 値が同じだけの全く別のオブジェクトなので、一方で行った変更の影響は、もう一方には及ばない。 let obj1 = {value: 'hoge'} let obj2 = Object.assign({}, obj1); console.log(obj2);
JavaScriptでオブジェクトのコピー・合体ができるObject.assign()が便利
JavaScriptでオブジェクトのコピー・合体ができるObject.assign()が便利 2018/6/7 2018/6/21 JavaScript, プログラミング 真新しい内容でもないのですが、最近JavaScriptに触れている中でよくObject.assign()について触れる機会があったので、ブログに記録しておこうかなと思います。 オブジェクトのコピー・合体ができるObject.assign()は本当に便利だなーと思いますよ！ ちなみにこの記事は、JavaScriptのオブジェクトについて、書き方をご存知の方を対象としていますので、その点ご注意くださいね！ JavaScriptにおける参照渡しを理解する Object.assign()を理解する上で必要なのが、JavaScriptにおける「参照渡し」の仕組みを理解することです。 これを理解しないと、Object.assing(
Flow Type Cheat Sheet - SaltyCrane
Flow is a static type checker for JavaScript. This is a list of Flow types generated from the source code in https://github.com/facebook/flow/tree/v0.111.3/ The script to generate this list is on github. Fixes welcome. See also my TypeScript cheat sheet, TypeScript React cheat sheet, and Docker cheat sheet. There are separate sections for "private" or "magic" types with a $ in the name. See the no
CSSの小ネタ: 画像に枠線をつける際、borderよりもbox-shadowの方がより美しく実装できる
画像をページに配置する際、画像に枠線を与えることがあります。画像とページにメリハリがついて画像がはっきりと表示されますが、borderよりも内側にbox-shadowをつけた方がより繊細なコントラストを与えることができます。 高コントラストの画像では目立たず、低コントラストの画像では繊細なコントラストを与えるCSSのテクニックを紹介します。 borderとbox-shadowの比較 元ネタは、下記ツイートです。意訳すると、 インセットのbox-shadowを使用すると、画像と周囲のページの間に繊細なコントラストを追加するのに最適です。borderよりもシームレスで、カラーがフレキシブルです。 👨🏾💻 CSS tip: inset box-shadows are great for adding subtle contrast between images and the surro
【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい
そうなんです。 2020年夏、ページの読み込み中にレイアウトがシフトしないように、img要素にはwidthとheight属性を記述するのがいいらしいんです。 <img src="link/to/image.jpg" width="300" height="400" alt="画像の説明"> その昔、これが普通の時代もあったんですけどね。レスポンシブな時代にはwidthとheight属性を書かないのが一般的（？）になっていました。また、widthとheight属性が記述してあってもCSSでwidth: 100%; height: auto;が指定されているとレイアウトシフトが発生してしまっていました。 参考： img要素のサイズ属性の記述の有無についてのTwitterのアンケート なんでいまさら？ なぜなら、2019年の後半にブラウザにレイアウトシフトを回避するための新たな機能が実装されたか
Language Learning with Youtube BETA
Improve your skills on your own, effectively and enjoyably, by watching videos in the language you study.
Web Animations API improvements in Chromium 84 | Articles | web.dev
Web Animations API improvements in Chromium 84 Stay organized with collections Save and categorize content based on your preferences. Orchestrating animations with promises, performance improvements with replaceable animations, smoother animations with composite modes, and more. When used correctly, animations improve user perception and memory of your brand, guide user actions, and help users nav
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
スクロール位置取得方法をいい加減忘れないようにメモ - Qiita
const target = document.querySelector('el').getBoundingClientRect().top; 上記の場合、要素の上端がブラウザの表示領域の上端にきたときに値が０となる。 window.innerHeight window.innerHeightは現在のブラウザの高さを取得する getBoundingClientRectはブラウザの上端の位置を境界とするため、ブラウザの下端で判断したい場合にこれを利用する window.pageYOffset ブラウザの上端を基準とした縦方向のページのスクロール量を取得する。 getBoundingClientRectで取得した値にこの値を足した値がターゲット要素の絶対位置になる。 example //現在のブラウザ表示領域の上端からの相対距離(要素の上部がブラウザの一番上にきたときに0になる) const
.matchMedia()でJSでもメディアクエリを使って条件分岐する | SPYWEB
if (matchMedia('(max-width: 798px)').matches) { // ウィンドウサイズが798px以下のとき } else { // それ以外 } .matchMedia() を使うことでCSSのメディアクエリのように条件分岐することができます。しかし、この記述だと ページが読み込まれた時 にしか実行されません。CSSのメディアクエリはウィンドウサイズを変更したらスタイルが適用されますよね。 var mediaQuery = matchMedia('(max-width: 798px)'); // ページが読み込まれた時に実行 handle(mediaQuery); // ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle); function handle(mq) { if (mq.matches)
JavaScript のスニペット集 | knooto
注意 コードのライセンスは CC0 (クレジット表示不要、改変可、商用可) です。 下記のページにも JavaScript 関係のスニペットがあります。 JavaScript DOM のスニペット集 Node.js のスニペット集 できるだけ素の IE11 以上で使用できるように調整しています。(他の想定ブラウザは Edge, Chrome, Firefox) スニペット オブジェクトのソート 昇順ソート (id) const data = [ { id: 1, name: '山田太郎' }, { id: 3, name: '斎藤花子' }, { id: 2, name: '鈴木次郎' }, ]; data.sort(function(aObj, bObj){ const a = aObj.id, b = bObj.id; return ((a < b) ? -1 : ((a > b) ?
返さなくてもいい助成金に助けられた話｜宮崎ひかり
事の発端はツイッター。 学生さんからの「フリーランスになるか会社員になるか迷っている」という言葉に、社会人クリエイターさんたちの様々なアンサーが寄せられていたので、それにのっかってこんな呟きをしました。 私は「できれば就職したいけどできないからとりあえずフリーランスって名乗っといた」クチなのでほんっとーに、できるなら就職しといたほうがいいよって思います。でもいろんな事情でフリーランスをやりたいなら、「返さなくてもいい助成金」の試験を受けよう。 私はそれで年間60万円いただいてました https://t.co/iPegk8QpiA — 宮崎ひかり/メアド変えました (@one_zeroberry) May 17, 2019 この「返さなくてもいい助成金」、知らなかったー！！というリアクションが多かったのでここでちょっとまとめておきます。 私は当時通っていた芸大の先生に教えていただきました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flexbox Froggy
#9 window.matchMedia
セレクタ｜CSS HappyLife ZERO