tacamyのブックマーク - はてなブックマーク

マンションリフォーム虎の巻

本来は親友に向けたマンションリフォームのアドバイスだが、LINEで送るには長すぎるので、増田の日記として公にさらしてみる。ブコメやトラバで有用な反論が得られるかもしれない。祝1000user超え。いろんな意見が聞けて楽しい。おそうじ浴槽がみんなに届いてうれしい。祝2000user超え。自分の知識がみんなの役に立ったようでうれしい。はてブ愛してる。増田は建築士としてそれなりに経験値はあるが、住まいのあり方や価値観は本当に多様なので、N=1の意見として参照するぐらいがちょうどよい。大前提適切な断熱壁と二重ガラス樹脂サッシが装備されていること。それがない建築が許されるのは安藤忠雄だけ。既存のサッシが交換できないならインプラスなどの内窓をいれればよし。風呂編おそうじ浴槽！これが言いたくてこの長い日記を書いているといっても過言ではない。 google:image:おそうじ浴槽他の設備投

tacamy 2024/02/18

リンク

CSS color-mix() | Chrome for Developers

Chrome でビルドする Chrome の仕組み、オリジントライアルに参加して、あらゆる場所で Chrome を使って構築しましょう。

tacamy 2023/12/19

リンク

高解像度 CSS カラーガイド | CSS and UI | Chrome for Developers

25 年以上、sRGB（標準の赤、緑、青）は CSS のグラデーションと色における唯一の色色域であり、rgb()、hsl()、16 進数などの色空間サービスがあります。ディスプレイの中で最も一般的な色域機能であり、共通点です。この色域内の色を指定することに慣れてきました。 https://almanac.httparchive.org/en/2022/css#colors ディスプレイでさまざまな色を表示できるようになったため、CSS ではこれらの広い範囲から色を指定する方法が必要になります。現在のカラー形式には、広い色範囲に対応する言語がありません。 CSS が一度も更新されなければ、90 年代の色域に恒久的に留まり、画像や動画で見られる広色域の製品に合わせられなくなります。トラップ: 人間の目に見える色の 30% のみを表示します。この落とし穴から抜け出すために助けてくれた CSS C

tacamy 2023/12/19

リンク

Vue Datepicker

PowerfulSupports multiple modes such as range, various pickers, multiple calendars, custom components, and many more. ModularOffers a great range of features, slots and props, while providing a way to customize for specific needs.

tacamy 2023/11/20

vue

リンク

Google re:Work - ガイド: OKRを設定する

イノベーションイノベーションを起こすためのスキルを習得し、業務に活かす方法を学びます。

tacamy 2023/10/23

OKR

リンク

CSS設計における、すべてがコンポーネントであるという誤謬

後日追記: WEB+DB PRESS Vol.133でさらに詳しく書いた。 BEMによってもたらされた、コンポーネントベースのアプローチでは、「ページはコンポーネントの集合によって表現されるべきであり、ページに含まれるのはすべてがコンポーネントである」と考える。しかしこれまでCSSを書いてきた経験から、これではデザイン意図をまともに表現することができないと感じ始めた。なぜなら、普通デザイナーはページのすべてがコンポーネントであるとは考えないからだ。もちろんページの構成要素のなかには、明らかにそれが「コンポーネント」であると意識して作られたものもある。ただしそれは一部であり、全部ではない。「コンポーネントもあれば、コンポーネントではないものもある」という感覚のほうが普通なのだ。典型的なUIライブラリにある、「ザ・コンポーネント」みたいなものだけではページは完成しない。例として、一貫してB

tacamy 2023/08/28

css
tailwind

リンク

複雑なJavaScriptアプリケーションを考えながら作る話

autoscale: true theme: Plain Jane,5 複雑なJavaScriptアプリケーションを考えながら作る話自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info #jsprimerを書いています JavaScript入門書に興味ある人はウォッチ :star: :warning: 注意 :warning: 作成するアプリケーションによって必要な構造は異なります今回の話はある程度の規模で複雑性を持つクライアントサイドライブラリ抜きで数万LOC >= 長期的にメンテンナンスや変更が発生するアプリケーションサーバサイドレンダリングはしないクライアントアプリケーション 3行でOK 複雑なJavaScriptアプリケーションを作るにあたりドメインモデルをどう実装するか悩んだ色々と試行錯誤した

tacamy 2023/08/28

状態管理で難しくなったら参考にする

リンク

GitHub - yuheiy/sdenv: ウェブサイト（not ウェブアプリケーション）のためのフロントエンド開発スターターキット

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

tacamy 2023/08/02

全部入り太郎

リンク

テクニカルライティングの基本 2023年版

テクニカルライティングの基本を学べます。業務マニュアル、報告書、仕様書、技術解説書などのドキュメントを書く機会がある方向け。サイボウズの2023年度新入社員向け研修の資料です。 Twitter：https://twitter.com/naoh_nak 2022年版（初版）：https://speakerdeck.com/naohiro_nakata/technicalwriting

tacamy 2023/06/23

リンク

「後味が悪すぎる究極の映画」30本が地獄のような映画ぞろいで観たいけど観たくない…けどやっぱり観たい

宮岡太郎@映画レビュー @kyofu_movie 気の向くままに映画の紹介をし続けるアカウント。エンタメ系ならなんでも観ますがサスペンス、ホラー、アクションなどハラハラする作品が特に好き。映画・テレビドラマの監督もしています。主な作品に「恐怖人形」「成れの果て」「ラストサマーウォーズ」「ガールズドライブ」など。監督、執筆の依頼はDMまで tm19880113.com 30本後に後味が悪すぎる究極の映画 @kyofu_movie 第30位「愚行録」(2017年) king of 胸糞邦画。嫌な気分になる映画は数あれど、ここまでリアルに、人間の愚かさと生々しさを描ききった映画はなかなかない。一家惨殺事件の謎を追う迫真のシナリオ。上手い人しかいないキャスト陣の圧倒的演技力。そしてラストのバスのシーンの凄味...隠れた傑作 pic.twitter.com/zF9ziB8jU6 2023-04-2

tacamy 2023/05/10

リンク

Corepackを使ってNode.jsをアップデートする ⬆️⬆️

Corepackを使ってNode.jsをアップデートする ⬆️⬆️ 自己紹介 Name : azu Twitter : @azu_re Website: Web scratch, JSer.info [.background-color: #FFFFFFF] Node.js 14は2023年4月でEOL Node.js 14.xは2023-04-30、Node.js 16.xは2023-09-11でEOL(End Of Life) 2023年10月からはNode.js 18と20のみがLTSとしてサポートされるバージョンとなる https://github.com/nodejs/release#release-schedule サマリ Node.jsのバージョンアップは面倒だけどほとんどのBREAKING CHANGEはライブラリにある npmのバージョンアップは面倒 npm 6とnpm

tacamy 2023/04/28

リンク

Awesome Dev Tool Tips 🔥

Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera

tacamy 2023/01/12

リンク

CSSでこんなことができるの知ってた？要素・コンテナのサイズに関係なく、ボーダーや背景をはみ出して配置するテクニック

h1やpなどブロック要素にボーダーや背景をつけると、通常はその要素のコンテナボックスいっぱいに適用されます。要素やコンテナのサイズに関係なく、ボーダーや背景を拡張させるCSSのテクニックを紹介します。入れ子で実装？と思いましたが、全然違いました。h1要素は1つだけ、他の要素はなし、疑似要素もなし、複数行になっても問題なし、CSSのプロパティ1つで実装できます。しかもすべてのブラウザにサポートされています。下記のようにボーダーや背景をボックスからはみ出して配置できます。

tacamy 2022/07/14

リンク

IEのサポートが終了した現在、古いCSSリセットからもう卒業！最近のデバイス・ブラウザの仕様に適した新しいCSSリセット -EllyLoel/reset.css

*{margin:0;padding:0;line-height:calc(0.25rem + 1em + 0.25rem)}*,::before,::after{box-sizing:border-box}*:where(:not(fieldset,progress,meter)){border-width:0;border-style:solid;background-origin:border-box;background-repeat:no-repeat}html{block-size:100%;-webkit-text-size-adjust:none}@media (prefers-reduced-motion:no-preference){html:focus-within{scroll-behavior:smooth}}body{-webkit-font-smoothing

tacamy 2022/07/04

リンク

Web における画像ロードベストプラクティス

Picture perfect images with the modern <img> element - Stack Overflow Blog という記事によくまとまっている。また、関連して Priority Hints の fetchpriority 属性とあわせて紹介する。導入として、Web における画像のペイロードは大きくなる一方で、Core Web Vitals にも大きく影響している。 Largest Contentful Paint のために、<link rel="preload"> や fetchpriority 属性でヒーロー画像のリクエストを早めたり、srcset 属性や <source> 要素で適切なフォーマットの画像をロードし、画面外の画像は loading 属性でロードを遅らせる Cumulative Layout Shift のために、画像の縦横サイズを

tacamy 2022/07/03

リンク

Preline UI, crafted with Tailwind CSS

Update v2.2 - New Creative Agency & Studio Templates, Dashboard Page and more...

tacamy 2022/06/16

リンク

CSSの新しい単位「lvh」「svh」これでiOSのSafariで100vhがビューポートの高さではない仕様に対応できる

Safari 15.4（最新は15.5）で新しいビューポート単位「lvh」「svh」がサポートされました。ビューポートを基準にした単位で、この単位を使用することで、iOSのSafariで100vhがビューポートの高さではないという仕様に対応できます。今まではCSSの-webkit-fill-availableがその対応方法でしたが、ネストされた要素やcalc()内では使用できません。新しいビューポート単位を使用すると、そういった問題もなくなります。 The Large, Small, and Dynamic Viewports by Bramus 2021年の記事ですが、Safari 15.4でこれらの新しいビューポート単位がサポートされたので、このタイミングで紹介します。下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。はじ

tacamy 2022/05/27

css

リンク

Chrome拡張つくりかた令和最新版

数年ぶりにChrome拡張のつくりかたを調べた。本当に何も分からなかったので、Twitterで「2022年にChrome拡張つくりたかったら何見て学べばいい？」とつぶやいてみたところ、何人かの人が教えてくれた。教えてもらった中から幾つかのリンク先を紹介するような形で記述していく。 Create a Vite-React Chrome Extension in 90 seconds - DEV Community 2022年時点だと比較的新しめのフロントエンド向けツールであるviteと、viteのChrome拡張向けプラグインである@crxjs/vite-pluginを使ってChrome拡張をつくってみよう、という記事。今回自分は主にこれを参考にしながら開発を進めた。Reactと言っているが、自分のChrome拡張ではUIは存在しなかったので、Reactに関する部分は読み飛ばして、vite

tacamy 2022/05/08

リンク

The Component Gallery

Designed to be a reference for anyone building component-based user interfaces, The Component Gallery is an up-to-date repository of interface components based on examples from the world of design systems.