ターニングポイントさん!?

10bace LOG

タグ: Webフロントエンド Page 1 of 2

【Web】BabelってなにPolyfillってなにPolyfill.ioってなに

ググれカス!

あ、ググってここに来たの。ごめん。そりゃそうか。

◆ハイケイ

ブラウザによって処理可能なJavaScriptは違う。

上記から、ふたつの事柄が想起される。

  1. JavaScriptの仕様らしい仕様がなかった時代の話
  2. 仕様ができて、みんなノリ気になってからの話

JavaScriptがこの世にリリースされた際、それが動作するWebブラウザはひとつっきゃなかった。それから暫くして「便利だねぇ」っつって他のブラウザもJavaScript動くように追従してきたんだけど、各ブラウザベンダーがてんでに実装したら馬鹿げた事態になるでしょう。SQLみたいに、各ブラウザ向けのJavaScriptを書かねばならなくなる。エンジニアが死んじゃう。だから仕様(標準)を整理しようという話になり、ECMAScriptが策定された。

ECMAScriptという仕様にはバージョンがあって、バージョンを重ねれば当然に機能が追加されたりする。各ブラウザはECMAScriptの仕様に則ったJavaScriptが正常に動くよう実装を進めるわけだが、古いブラウザは古いJavaScriptしか動かないままになる。

古いブラウザを古いまま使うチンパン知能のクズ人間が大勢いるもんで、新しめのJavaScriptで書いても「動かないよぉ」とか苦情くる。そういう奴らは一列に並ばせてから順繰りに殴れば良いんだけど、いかんせん数が多いので殴る方も腕が持たなくなってくる。そこで、もっと簡単に殺せるように近頃は竹槍を使って喉元を突くようになった。

…ちがう。すごい間違えた。Babelを使ってそのへんの問題を解決するようになった。

◆余談:compatibility

どのブラウザがどのJavaScriptの機能を実装しているのかってのはコンパチテーブルと俺が勝手に呼んでいるサイトを参考にすればいい。

【Azure Pipeline】yarnとかpnpmでvsts-npm-authっぽいことする

この記事は「真空・大おちんちん感謝祭アドベントカレンダー」という存在しないアドベントカレンダーの25日目の記事です。メリークリスマス。

◆結論

Package: npm Authenticate task (for task runners)

◆何がしたいのか

Azure DevOpsArtifactsっていう機能使えばオリジナルのnpmライブラリを配信できる。して、オリジナルなライブラリだから、そのライブラリを配信できるregistryが必要になりますよね。それもArtifactsから提供できる。提供できるんだけど、誰からでもregistryを使えるのは困る。だから認証が必要。

◆ローカルからregistry見る

JavaScript、TypeScript、Vue、Vuetifyで要素描画時にアニメーションする

フェードインとか。

おまけもあるよ💖

◆おことわり

古いブラウザは知らない。帰れ。

…いや、帰れよ。何だよその目は。

…かーえーれっ!かーえーれっ!

ウェヒヒヒwww

あ!泣いてやんの!だっせ!だっせ!

◆Intersection Observer

まえに、画像の遅延読み込みについて書いたんです。そこで登場したIntersection Observerくんが活躍します。応援してあげてください。

12時間悩んだ末にDocker + VS Code なWeb開発環境が出来たよ^~

んほ^~

※Windowsを対象にしてるけど、デスクトップ環境でコンテナ動けばどうでもいい。

知っ得情報は後のほうに書いてあるから、実施の段を読み飛ばしてもいい。

◆要確認事項:2020/9/6

手を出すのが、ちょっとはやいかも。あんま悩んでもしょうがねぇから、つみですと思ったら諦めて時が経つのを待てばいいと思う。

どっから話せばいいのかわからんが。すべては時間が解決するものであったりする。

▼Windowのバージョン

Windows Homeはまだ無理かも。なんやかんや試したけど動かんかった。Docker Desktopが動かなくて謎。いやでも18462以上であればHomeでイケるって情報ある。謎。

「僕のフロントエンド技術に対するスタンス」に対する伺か

僕のフロントエンド技術に対するスタンス | note

文句言いたいわけじゃなくて、補足というか。多分、そんなに深くないところの人をターゲットに書いただろうからしょうがないとも思う。だから深いところをサワサワしてみる。

ってのと、「TypeScript対応に時間がかかりすぎているため、スタート地点に立つことが厳しい」ってのを読んで、Vueで開発してないんやなと思ったから書いとく。というかそれを書きたかった。あとはおまけ。

◆Vueの補足

メリットについて語っておく。というかデメリットらしいデメリットが見当たらないのが強みなんだけども。

まず、エコシステムの結託具合。Reactは企業(Facebook)が主体であるというのにメリット/デメリットがあると思わんかね。

コイツは何時になったらVue.jsの導入記事を書くのか

いや書きてぇわ俺も。フロントエンドエンジニア達は不安よな。とは思えどもタイミングがちょっと違う気がする。

◆理由

導入簡単すよ。公開も簡単すよ。APIサーバー立ち上げんのも簡単す。でもね?Vue.jsの3.0が来るんすよね。

その時にお前ら「あのブタ畜生、3.0来るってわかってんのに2.6の導入方法教えやがったな。よし。決めた。殺そう。」

こうくるでしょう。俺はそんな理由で死にたくない。

だから教えようにもなかなか。

IE11でPromiseのunhandled regectionをハンドる

IE11ってマジ糞ウンチofウンコのファッキン無能ゴミブラウザだからPromiseは使えないんだけど、BabelでバベればPromise使えます。

で、それとは別に、「発生したエラーをすべてキャッチしたいね」っていう話がありまして、Vueのmain.tsでcatchしようと思った。

だけどもVue.config.errorHandlerがPromiseのrejectionを拾ってくれないという事実が判明して無事死亡。死亡しながら色々ググったらどうやらwindowに「unhandledrejection」のEventListenerをAddすりゃいいという結論に至った。

参考:Window: unhandledrejection イベント

で、IE11で動かなかった。ビルゲイツ殺す。

Vue.jsとナマのswiperを使ってaxiosで取得したデータを表示したい時のあるある早く言いたい

◆ひとりごと

Swiperじゃなくてtiny-slider使った方が良いような気がする。

◆要件

IE11でpointer-events: noneがnot working

IE11はホントにMost FuckableなWeb Browserですね。HAHAHA。

◆結論

pointer-events:none; したい要素の z-index を奈落に叩き落とす。

↓こんなん

a{
  pointer-events: none;
  //FUCK IE11
  z-index: -1145141919810;
}

実際のところ「-1」とかでいいよ。あとコードにFuck的なワードを入れて納品すると上長にガチビンタされるから気を付けよう。(114514敗

▼追記:2019/4/12

「img」の上に「a」を置いてたんだけど

  • 「a」のdisplayをblockにして
  • imgのmarginを0

にしたらz-indexいじらんでも効くようになった。イミフ。

▲追記以上

◆理由

知らん。知らねぇのもそうだけど知りたくもない。気色悪い。クソ気色悪いことが起きているのは分かる。

「いや…まさか…」と思いながら試したら効いたから、もう耳から血が出たよね(驚き)

noneが効かなくなる条件の最小構成を作ろうと結構頑張ったんだけど再現不能だった。
どうしても駄目だった人は試してみてくれ。

Vue.jsでimgの:srcにaxiosのresponse.dataをbindしてerrorをcatchした時は違う画像みせたかった人の逸話

◆修正しました

◆2019/6/23

修正したんだけど、ちょっとまー残念な感じではある。というのも、Vue 3.0になるまでフラグメントが使えない。だから泣く泣くdivで囲う羽目になった。スタイル当てるのも場合によってはちょっと辛いな。2パターン紹介しているから、好きな方を使え。

Vue 3.0が来たらフラグメント使え。

◆したいこと

  • APIで画像を表示する。(SVGじゃないやつ)
  • APIで画像が取得できなかった時は、指定の画像を表示する。(SVGでもなんでも)
  • APIを2回投げたくない。画像が取得できたのならそれをDataURIの形にしてしまおうと思う。

◆おことわり

以下の成分を含みます。

これから説明するんだけど、どっから説明したもんかわからんから適当に説明する。「わかんね」って人はコメントしてくれ。

Page 1 of 2

Powered by WordPress & Theme by Anders Norén