10bace LOG

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

10bace LOG

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

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

追記:IE11とかEdgeとかのクソブラウザがスカポンタンでハゲゴミのパッパラパーだから書き直してる。

◆要件

  • カルーセル
  • 両端に前後のスライドちら見せ
  • 自動送り
  • 無限ループ
  • 親要素から要素数不明のオブジェクト列を受け取り、その内容からスライドを生成。
  • 親要素はaxiosでそのオブジェクト列を取得する。レンダリングとは非同期な通信である。
  • TypeScriptで、単一ファイルコンポーネントで、SCSS

続きを読む

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敗

◆理由

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

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

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

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

◆したいこと

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

◆おことわり

以下の成分を含みます。

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

続きを読む

DataURIでSVG定義してCSSの変数で使いまわす

Webフロントエンドの記事ばっかでごめん。でも伝えたいこの思いアナタに。

◆結論

URL-encoder for SVGで変換した結果のReady for CSS欄のアレをいい感じに変数にぶち込んで使えばよろしい。

url-loaderとかの話が分かる人は、変数にurlを格納して使えばよろしい。

◆発端

  • ul要素配下のli要素について、リストマーカーにカスタムアイコンを使いたい。
  • ul要素のlist-style-imageプロパティに画像を設定してあげればいいらしい。
  • でも、ちんまいアイコンのためにリクエスト回数増やしたくないよね。
  • じゃあ、DataURIつかってSVGを定義してCSSで参照すればいいじゃない。
  • え?どこに定義すんの?死ぬの?

続きを読む

IE11でGridのAutoprefixerが効かないとか要素が全部重なるとか

ア!壊れたァ!(レイアウト)

IE死ね

◆結論

autoprefixer:options

◆登場人物

  • IE11
    そびえ立つクソブラウザ。人間の屑。稀代のゴミ。人類の敵。
  • grid
    CSSのプロパティ。便利。便利というか、正しい。
  • autoprefixer
    CSSの実装がブラウザごとに違うから、そのへんの違いをバベる。
  • a
    アンカー要素。そして、どインラ(イ)ン要素

続きを読む

【CSS】button押したときに限りfocusしつつoutline出さない

やーホント詰まった。「なんでできねぇんだよ」が久々に来たね。

英語圏兄貴の検索に引っかかることを願って、英単語まじえて説明していく。

◆したいこと

  1. htmlでbutton要素をclickする。
  2. focusは当てたい。けど見せたくない。つまるところ、outlineをhiddenしたい。outlineをinvisibleしたい。outline: none;したい。
  3. しかしながらtabで移動してきたときはfocusを当てたい。

◆前提知識:CSSの疑似クラス

条件によりCSSをあてたい時に使用。

MDN:疑似クラス

続きを読む

Vue CLIのserveをVS CodeからChromeでF5デバッグ

聖夜なので記事を捧げます。この狂った世界(Webフロントエンド)へ。
この記事がいつか、世界の片隅に打ち捨てられた震えるチワワフロントエンドエンジニアチワワを救うと信じています。

◆結論

続きを読む

【ゴミ記事】Webのバカヤロウ

Webのバカヤロウ!

続きを読む

typescript TS2688「 ‘node’ の型定義ファイルが見つかりません。」

Visual Studioで使用することができる「基本的な Vue.js Web アプリケーション」テンプレートでプロジェクトを作成した際に

TS2688 ‘node’ の型定義ファイルが見つかりません。

とか言われた。

続きを読む

【Node.js】hrefでページ遷移できない → server.jsの書き方

Webフロントエンドを自学しているんだが、まぁ詰まる。
詰まる度に5セントもらってたら今頃大金持ちだぜ。

Visual StudioでTypeScriptなWebプロジェクトを作ってたんだが、index.htmlに書いた<a href>が動作しない。hrefで遷移できない。
相対パスで遷移先のhtmlを指定していたんだが、そもそもindex.htmlに入る方法がなんか特殊だったような気がしたからserver.tsを確認してみた。

これは、Webフロントエンドに挑んだ男たちの、苦難と煩悶、そして、希望の物語である。

続きを読む

Page 1 of 2

Powered by WordPress & Theme by Anders Norén