You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

BASE Advent Calendar 2021 9日目の記事です。 フリーランスのフロントエンドエンジニア 坪内です。 BASE のお手伝いをさせていただくようになって 1ヶ月が経ち、色々見えるようになってきた中で最も気になっていた点の 1つが、 「HMR されていない」 でした。 BASE の Web フロントエンドは webpack でビルドされているのですが、 ローカルの開発環境が Docker 上で動いている事もあってか、残念ながら HMR はされていない状況でした。 「Docker 環境だから無理？」 「“webpack HMR docker” とかでググると色々出てくるし出来そうな？」 さっそく取り掛かってみました。 HMR とは？ 一応、HMR の説明をしておきます。 https://webpack.js.org/guides/hot-module-replacement

こんにちは。BASE BANK 株式会社 Dev Division にて、 Engineering Manager をしている東口（@hgsgtk）です。 弊チームではプロダクト開発のリズムの中で振り返りを継続的に行っていますが、YOT という振り返りワークを作成、使用しています。BASE 社内の他チームでも「YOT っていう振り返り方法があるらしい！」と興味を持ってもらい活用されていたり、社外でもスクラムやアジャイル関連のカンファレンスでの登壇でちらっと紹介した際に「それ良さそう！」と一定の反響がありました。しかし、その一次情報はインターネット上のどこにもない状態でしたので、作成の背景も含めて参考にできる YOT の一次情報をここに記します。 TL;DR 振り返りの場のファシリテーターには、発言量が少なくてうまく場が盛り上がらない、というあるあるな悩みがありますよね 起こったことや思った

こんにちは、さとみです。 みなさん、ミルクの作り方ってどうしてますか？ 産院で習った方法や、ミルクの箱に書いてある通りに作ってる方が多いですよね。 子供がお腹が空いて泣き始めたあとに、70度以上のお湯でミルクを溶かして、流水で人肌に冷ます。 正直…あの通りに作ると時間がかかってしょうがないんですよね。 深夜や朝方に、寝不足のまま、いきなり子供の声で飛び起きて、ミルクを調乳して、冷まして・・・10分くらいかかってしまいますよね。その間、子供は泣き叫び続けている。 ストレスが半端ない！毎回毎回スボラな私には無理だ！ ということで今日は最速でミルクを子供に届ける作り置きミルクをご紹介。 【子育て効率化】Amazonファミリーでおむつをお得に購入しよう 最初に注意点作り置きをすれば当然雑菌の繁殖の可能性もあるので、心配な方はこんなズボラなお母さんがいるんだなぁとだけ思っていてください。安全第一なら

こんにちは。エンタメ領域のDXを推進するブロックチェーンスタートアップ、Gaudiyでフロントエンドエンジニアをしているkodai（@r34b26）です。 Gaudiyでは、数ヶ月前からエンジニアによる「デザインレビュー」をワークフローに取り入れました。僕自身は、デザインとエンジニアリングをつなぐことに関心があるのですが、一般的にデザイナーとエンジニアの協業については語られているケースが少ないですし、あったとしても、デザイナー側から寄り添ってくれるケースがほとんどだと感じています。 そこで今回は、Gaudiyでエンジニア側としても課題意識を持って取り組んできたデザインレビューについて、ご紹介したいと思います。 プロダクト品質を高めるために大事な観点だと思うので、よければご参考ください！ 1. エンジニアによるデザインレビューを導入した理由 2. チーム全体でデザインレビューを強化 2-1.

秋のブログ週間連載の7本目です。 はじめにPlantUMLで使えるテーマについてのご紹介です。 以前、チームで機能設計するためのPlantUML標準化の記事でも書かせていただきましたが、PlantUMLのデフォルトカラーって少しドライですよね。 色の好みは人それぞれで、あれはあれでカッコよさはありますが、複雑な図は少しでも可愛く描きたい・楽しく見たいものです。 この記事ではPlantUMLのテーマについて、いくつかのオプションを紹介していきます。「PlantUMLの色を変えてみたい！」という方は是非ご活用いただければ嬉しいです。 前提 PlantUMLでは、skinparamを利用して図のビジュアル各要素を定義しますが、「テーマ」はskinparamの集合体です この記事ではテーマの作り方や、各運用方法等については触れません この記事で紹介するオリジナルテーマはシーケンス図のために作られた

川野優馬 / LIGHT UP COFFEE @yuma_lightup おいしいコーヒーで世界を変える。LIGHT UP COFFEE（@lightupcoffee )代表。果実味あるコーヒーが好き。 🗒note書いてます→note.mu/yuma_lightup 📺YouTubeにコーヒーの動画載せてます→youtube.com/c/YumaKawano instagram.com/yuma_lightup

shinshinohara @ShinShinohara もう１０年近く前になるけれど、「すいえんさー」というNHK教育の番組が面白くて。特に衝撃的だったのは、大学対決。私が初めて大学対決を見たのは、京都大学との対決だった。A4の紙で作った物体の滞空時間を競うという競技。京大の学生は博学さと理論値を発揮して、様々な形の物体を作った。かたや。 2021-10-22 23:19:29 shinshinohara @ShinShinohara アイドルグループのすイエんサーガールは、中学高校生の女の子たち。飛行体の知識も理論もなく、流体力学ももちろん知らなかった。理論からいけない彼女たちは、ともかく紙を色々折っては、落としてみた。すると意外なことに、無加工のA4の紙が一番滞空時間が長くなることに気がついた。 2021-10-22 23:22:34 shinshinohara @ShinShino

A game for learning CSS grid layout

テキストを画像の上に配置、タグを重ねたい、ヒーローセクションで画像の上にコンテンツを配置、画像のアスペクト比を維持させたい時など、CSSの絶対配置（position: absolute;）を使用することがあります。もちろん、それでうまくいく時はありますが、なんらかの制約があったり、テキストが長いと崩れたりします。 position: absolute;が必要だと思われていた実装で、使用しなくても実装できるモダンCSSのテクニックを紹介します。 Less Absolute Positioning With Modern CSS by Ahmad Shadeed はじめに ケース1: カードのオーバーレイ ケース2: カードのタグ ケース3: ヒーローセクション ケース4: display: contents; ケース5: カードアイテムの並べ替え ケース6: 中央寄せ ケース7: 画像のアス

JavaScriptはシングルスレッドであることが知られています。そして、Promiseを用いた非同期処理ができることは周知の事実です。では、なぜシングルスレッドで非同期処理ができるのでしょうか？ その点について、非同期処理のための2種類のQueuesについて触れつつ、コードベースでの説明も行います。

2021/09/13 Open8 で発表したフロントエンドテストプラクティスの話です。

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではないCSSでしたが、新しい記述方法ではそれらが解消されています。 CSSの中央揃えのいろいろな方法は、以前の記事をご覧ください。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価しています。

JavaScriptやTypeScriptのコードには?.のような記号やasのようなキーワードが使われます。こういった記号やキーワードはGoogleで検索しづらく、意味を調べるのは難しいものです。 この索引は、JavaScriptとTypeScriptの記号やキーワードから、その名前や意味を調べられるようにするためのものです。コードを読んでいて未知の記号やキーワードに出くわしたら、その意味や使い方を調べる手がかりにしてください。 ここで扱う記号とキーワードには、JavaScript由来のもの、つまり、JavaScriptとTypeScriptに共通して使えるものと、TypeScriptでのみ使えるものを併記しています。JavaScript由来のものにはのマークを、TypeScript固有のものにはマークを表示しています。 記号​! 論理否定演算子 (logical not operator

こんにちは、kz_moritaです。 最近はVue.js / Nuxt.js あたりで Web フロントを書いたりしています。 今回は、ページの最上部からある特定のDOMの位置座標を取得するのにちょっとつまづいたため、そのことについてまとめておきます。 試した方法 以下の二種類の方法を試しました。 HTMLElement.offsetTop Element.getBoundingClientRect().top + window.pageYOffset 結論から言うと、ページの最上部からの位置を取得する仕様は２つ目の方法で実現することができました。 HTMLElement.offetTop HTMLElement.offsetTopの仕様は以下のサイトに詳しく書いています。 https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/

JavaScriptで指定した要素の位置にスクロールするコードを紹介します。 概要 JavaScriptで指定した位置にスクロールするには、 document.documentElement.scrollTop にスクロールしたい位置の座標を代入することで指定位置にスクロールできます。指定した要素の位置にスクロールする場合は、あらかじめ、要素の座標を取得して、その値を document.documentElement.scrollTop に代入します。 プログラム コード 下記のHTMLファイルを作成します。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> <!-- .section{ height:320px; border:1px solid #ff6a00; } --> </

TypeScriptでググっても出てこなくてよくわからないやつ。 他人が書いたTypeScriptのコード見てるとたまに const isString = (arg: any): arg is string => typeof arg === "string"; のように「引数 is 型」と書かれたものを見かける。 このコードは引数になんか受け取って、それがstringなのかどうかを判別するくん。 返り値の型に『arg is string』と書かれている。 この記事はこれについてのはなし。 "is" is なに… この"is"というキーワード、ググラビリティがめちゃくちゃ低くてどうググったらいいかわからないし、ググってもあんまりそれっぽいのがヒットしなくて困る。 What is this "is" keyword? という気持ちになる。isがゲシュタルト崩壊。 "is"は型の絞り込みができ

Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ