登壇中にうっかりSlackの通知が出ちゃうみたいなことを避けたいですよね。うっかりを防ぐ対策が集まるスクラップです。
登壇中にうっかり見せちゃいけないもの見せないようにするための技術
登壇中にうっかりSlackの通知が出ちゃうみたいなことを避けたいですよね。うっかりを防ぐ対策が集まるスクラップです。
少しの記述でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニック集 – TAKLOG
少しの記述・工夫でユーザビリティやアクセシビリティを向上させるHTML/CSSテクニックを独断と偏見で集めてみました。最近クローズドな場所で登壇を行ったのですが、そちらで話した内容を纏めたものにいくつか内容を追加したものとなります。 原則的にこのブログで取り入れられている手法だったり過去の記事で触れた手法を紹介したものです。 button要素には touch-action:manipulation を指定するiOS限定の話ではありますが、button要素をつい連続でタップすると画面が拡大表示されてしまい非常に煩わしいです。 ポストを別枠で表示する そのため、パンおよびズームのジェスチャーは有効にしつつダブルタップ時のズームなどの標準外の追加的なジェスチャーを無効にするtouch-action:manipulationを指定して誤作動を防止しておくと良いでしょう。
TypeScriptで知ってコードの安全性が上がったtips集
TypeScriptを用いた開発では、その型システムを活かしてランタイムエラーを事前に防いだり、実装漏れを防いだりとコードの安全性の向上を図ることができます。 本記事では、個人的に知ったおかげでコードの安全性が増した！と感じたtipsをまとめました。 ※ なお、linterを用いたコードの安全性向上も非常に有効ですが、この記事では主にTypeScriptの型システムに焦点を当てています。 tips集 配列周りのtips まずは配列を扱う際に役立つ、tipsを紹介します。 配列からUnion型を作成する ↓のように(typeof array)[number]で配列の全要素を持つUnion型を作成できます。 const fruits = ["apple", "banana", "lemon"] as const; type Fruit = (typeof fruits)[number]; //
GitHub Actions のベストプラクティス
1 フロー 1 ワークフロー 一連のフローがある場合は 1 つのワークフローにまとめる。 トリガーしたイベントの JSON が使える needs での制御がしやすい 全体を追える グラフが表示される ファイルを分割したい ファイルを分割したい理由として以下が挙げられると思います。 行数が増えて読みづらい 処理を共通化したい 複合実行ステップアクション や workflow_run トリガー や Reusable workflow 🆕 を使うことになると思いますが、基本的には一連のフロー制御はメインのファイルに書いてその下を Reusable workflow や複合実行ステップアクションで外部ファイルへ分離するのが良さそう。 workflow_run はログが分断するのでおすすめしません。
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
yarn v3 の独自機能を避けつつ yarn v1 から v3 へのアップグレードをする
yarn v3 が出ました。詳しい解説は譲るとして、esbuild integration や パフォーマンス向上が目玉です。 Yarn 3.0 🚀🤖 Performances, ESBuild, Better Patches, ... - DEV Community 流石に v1 はもう古いが、 v2 からの独自路線は受け付けがたい…という立場なのですが(yarn オリジナル作者の sebmck も難色を示しています)、今回は yarn 特有の機能をできるだけ避けて、できるだけ npm や pnpm 等と互換な部分だけで yarn v3 を使います。なので pnp も使いません。eslint や vscode の typescript 等でハマりどころが多すぎます。 ゼロインストールも否定派です。git blob objects のサイズが爆発して仕事にならなくなったことがあります。
JavaScript のクロージャーと for 文の let 初期化の例外
先日、次のような JavaScript クイズを Twitter で出しました。 // JavaScript quiz: 出力は？ const a = []; { for(let i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { let i; for(i = 0; i < 10; i++) { a[i] = () => console.log(i); } } a[3](); { for(let i = 0; i < 10;) { a[i] = () => console.log(i); i++; } } a[3](); — Takuo Kihira (@tkihira) August 15, 2022 答えは 3, 10, 4 なのですが、for 文の let 初期化専用の例外処理がない場合は 10, 10,
TypeScript で string 型の値に自動補完を効かせる: Days on the Moon
結論 type X = 'foo' | 'bar' | (string & {}); のように、文字列リテラル型の共用体型に | (string & {}) を付け足した型 X を定義します。X 型は任意の文字列を受け付けますが、IDE (Visual Studio Code など) で X 型の値を入力するときには 'foo' と 'bar' が自動補完の候補として提示されます。 解説 単純に type X = 'foo' | 'bar' | string; と書いてしまうと、共用体型の各要素がまとめられて、X は単なる string 型になってしまいます。{} 型は null と undefined を除く任意の値を受け付けるので、string & {} 型は実質的に string 型と同一なのですが、TypeScript 4.4 の時点では同一扱いされず、共用体型の各要素がまとめられ
アプリが依存している Swift Package ライブラリのライセンスを一覧表示するためにライブラリを作りました - Cybozu Inside Out | サイボウズエンジニアのブログ
はじめに こんにちは、モバイルエンジニアの中村（@Kyomesuke）です。 私が担当している kintone のモバイルアプリ（iOS）では、現在脱レガシーを目指して幾つかの課題に取り組んでいます。 その一つとして、パッケージマネージャーを CocoaPods から Swift Package Manager に移行するリファクタリングに挑戦していたのですが、この移行に際して一つ課題がありました。 kintone モバイルやサイボウズ Office 新着通知アプリなど、サイボウズのモバイルアプリには依存している外部ライブラリのライセンスを一覧表示する画面があるのですが、これまでその機能をAcknowListというライブラリを使用して実現していました。 しかし AcknowList は CocoaPods にしか対応していないため、Swift Package Manager に対応するため
Node.jsをRustに書き換えるのはどのくらいかかる？ 実験的導入でわかった、メリット・デメリット
ウェブアプリケーションをRustで開発している、株式会社estie。今回開催された「Rust、何もわからない…」では、実サービスで活用されているRustについて、その活用方法の事例を紹介しました。ここで登壇したのは、ソフトウェアエンジニアの松本健太郎氏。アプリケーションのバックエンドをRustに書き換えた事例について発表しました。 バックエンドをRustに書き換えた実例報告 松本健太郎氏：私からは、まさにバックエンドをRustに書き換えるということで、実例報告的なことをやりたいと思っています。よろしくお願いします。 本日は、どういうことをしたかというところと、それをやるにあたっての意思決定。実際にやってみてどういうところが問題になったか。あとは、特にTypeScriptとの連携周り、どういう工夫をしたかをお話しできればと思います。 自己紹介です。松本健太郎と言います。 アプリケーションの概
家庭のカレーが本格的になる「8つの隠し味」を試してみた - ソレドコ
家庭のカレーを本格的にする隠し味8種類、どれが一番おいしくなるかを検証！チョコレートやインスタントコーヒーなど定番のちょい足し調味料をそれぞれ試してみました。最もコクが増したのは？さらにそれぞれのベストな「入れるタイミング」も紹介します。 インド人風コスプレでブログを書いている、カレーパフォーマー加藤です。 最近「スパイスからカレーを作った方が美味しいと分かっているが、大変そうだからいつも市販品のカレールーで作ってしまう」と相談されることがあります。その相談を受けて、カレーパフォーマー加藤は考えました。ルーで作ったカレーを、もっと美味しくできる“手軽な隠し味”はないのだろうかと。 そこで今回は、スパイスからカレーを作らなくても、入れるだけで本格的なカレーになる「隠し味」を8つご紹介します。 家庭にあるもの＆気軽に買える8つの食品 今回使用するのはこの8つです。 チョコレート インスタントコ
TypeScriptのmoduleSuffixesについて考えて納得した - Qiita
みなさんこんにちは。今日は、TypeScriptの新しいコンパイラオプション（おそらく4.7で導入）であるmoduleSuffixesについての話題がTwitterで見られました。 moduleSuffixesについて詳しくはこちらをご参照ください。 これについては、「モジュール解決がさらに複雑化する」などいくつかの方向性から否定的な意見が見られました。しかし、筆者が考えてみたところ、正当性のある機能追加だと納得できたので考えをご紹介します。 3行でまとめると これまで通りランタイムの挙動に影響しないから大丈夫だよ pathsが怖くないならmoduleSuffixesも怖くないよ TypeScriptはJavaScript環境に追随するよ moduleSuffixesとは では、moduleSuffixesはどんなコンパイラオプションなのかという解説をまず少しします。これはTypeScri
Startup Playbook
Your goal as a startup is to make something users love. If you do that, then you have to figure out how to get a lot more users. But this first part is critical—think about the really successful companies of today. They all started with a product that their early users loved so much they told other people about it. If you fail to do this, you will fail. If you deceive yourself and think your users
JS のビルドサイズを極限まで絞るための TIPS 集
ビルドサイズ限界まで絞りたい人向け。 あらゆる環境で実践するものではないが、知ってたら簡単に避けることができるのもあるので知っておくと便利なTIPS書いていく。 基本ポリシー 未使用コードはビルド時に全部落とす。 何が未使用コードで、何が定数かわかるようなインターフェースを人間が心がける。 用語 Dead Code Ellimination(DCE) Rollup や Terser で、未使用コードを削除すること
JavaScript で parseInt / parseFloat を使わない方が良い理由
となるのが原因です。parseInt というのは、文字列を解析して整数値（int）を返すグローバル関数であり、引数をまず文字列に変換する仕様となっております。その段階で 0.0000005 が "5e-7" という文字列に変換されてしまい、その文字列の先頭の 5 だけが数字として解析されてしまったため、結果として parseInt(0.0000005) === 5 となりました。 なぜ String(0.000005) === "0.000005" に、String(0.0000005) === "5e-7" になるのかについては、この記事の最後で余談として説明します。 整数化には Math.trunc を使おう このように、parseInt は文字列を引数にすることを前提にしているため、速度の面でも可読性の面でも「小数値を整数値に変換したい」という場合に使うのは望ましくありません。最も望
set -eのもとで特定のコマンドの終了ステータスを変数に入れるシェルスクリプトのスニペット - Islands in the byte stream
課題編 シェルスクリプトで「あるグローバルな状態を変える操作を行い、その結果をチェックし、状態をもとに戻す」みたいなタスクをするときに「その結果をチェックし」のところでコマンドの終了ステータスを変数に入れて置きたいみたいなことがあります。例えば、次のようなコマンド操作です。 set -e # グローバルな状態を変える操作を行う git merge --no-ff --no-commit $main_branch || true # 結果をチェックしてexit codeを変数に入れる git diff --cached --exit-code --quiet ; code=$? # グローバルな状態をもとに戻す git merge --abort # 上位プロセスに結果を渡す exit $code スクリプト全体には set -e （コマンドが失敗するとシェルスクリプトが即座に終了する）を効
知っておくと便利で役に立つHTMLの属性のまとめ
あまり知られていないけど、知っておくと便利で役に立つHTMLの属性を7つ紹介します。 Google翻訳が翻訳しようとするのを防ぐtranslate属性、リンクをダウンロードするように指示するdownload属性、アップロードできるファイルのタイプを指定できるaccept属性など、HTMLだけで実装できるのかという便利な属性ばかりです。 7 useful HTML attributes you may not know by Mariana 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに multiple属性 accept属性 contenteditable属性 spellcheck属性 translate属性 poster属性 download属性 終わりに はじめに HTMLは、Web制作の要です。しかし、多くのプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
パチンコの三店方式、ソープは自由恋愛みたいな何かしらの方法でギリギリ規制を逃れているやつが他にあったら教えてくれ
「Gmail」の不要メールを大掃除！ Googleのストレージを取り戻すテクニックが話題に／GB単位で空きストレージを増やせるかも【やじうまの杜】
GPT4内のプログラム、地味に特許とろうと温めてたけど、間に合わなさそうなのでもう出しちゃお。 以下みたいに書くと、雑なプロンプトでも勝手に高品質になる。
