概要 画像のデコードは、ブラウザのメインスレッドをブロックします。こちらの記事では、例としてブラウザのメインスレッドが800ミリ秒を超えてブロックされています。 decoding="async" は、その解決策として使うことができます。 loading属性との違い loading属性は、loading="lazy"と使うことによって画像の遅延読み込み化ができます。 loading属性は「画像をいつ読み込むか？」という画像の読み込みのタイミングを担当しますが、decoding属性は「画像をいつデコードするか？」という画像のデコードのタイミングを担当します。 loading=lazyとdecoding="async"の併記 loading="lazy"とdecoding="async"は併用することができます。 注意点としては、デコードのタイミングが遅れることによって、スクロール時に画像が表示

Track page speed over time and get the data you need to optimize it. Choosing the right image format is the first and most important step when it comes to image performance. We want our websites to load fast, but we also want our images to look good. Balancing these two concerns is the core of image performance. Image formats are file types for digital graphics that have evolved over time to make

多くのライブラリは利便性のためにたくさんの機能を持っていて、その全てを活用するユーザーはほぼいません。一般的なライブラリにおいては、その中から必要な機能のみをバンドルに含めるための設計プラクティスが普及しており、Firebase JS SDK v9 での変更はその代表例でしょう。しかし、コンポーネントライブラリではそのようなプラクティスが発達しておらず、多くのアプリケーションでバンドルサイズに無視できない影響を与えています[1]。 そこで、バンドルサイズを削りやすいコンポーネント設計を考えます。ここでは例として、以下のようにフェードインするタグコンポーネントを Framer Motion を使って実装することを考えます[2]。フェードインの有無は何らかの方法で切り替えられるものとし、フェードインしない場合に、その関連コードをバンドルから削るようにします。 ❌ Boolean プロパティで切

こんにちは。強いUIはボタンを捨てるをスローガンにScrapboxを開発しています。shokaiですshokai.icon

この記事は DevRel Advent Calendar 2022 の 6 日目の記事です。 授業資料やハンズオン資料に使っている HonKit の設定メモについて書きます。今後も変化していくと思うので 2022 年 12 月版のものです。 ハンズオン資料づくりで自分が求めていること 私が技術を伝える授業資料やハンズオンイベントなどで資料を作っていると、必要なこととして、以下にようなことがあります。 環境を整えるインストールや最低限使えるまでの設定がある程度やりやすいこと Markdown で書いてガシガシ資料が作れること GitHub Pages など静的なページ公開だけで資料ページの設定ができる ある程度デフォルトの設定でも良い感じの資料の見た目になること ソースコードに関してはちゃんとシンタックスハイライトがされて参加者がソースが読みやすいこと 参加者がソースコードをミスなく全文コピ

みなさんは、Web アニメーション使っていますか？ おそらくLottieを使っている人が多いかと思います。 ただ、Lottieには大きな問題がありますね？ そうです。 Adobe の After Effects（AE）がないとアニメーションが作れないという問題です。 たくさんの人たちが嘆き苦しみながら AE を使うために Adobe に課金している事だと思います。 そんな人々を救うため、 最近では AE を使わなくてもアニメーションを作れるようにとLottie Labというサービスが開発されていたりします。 しかし、まだまだ公開には至っていない状態です。（2022/12/07 現在） そこで、Rive 登場 AE で行っていたアニメーションの作成から、書き出しまで全て Web 上で完結できるサービスです。 今回は、アニメーションの設定から React で動かすまでをやってみたいと思います！

このブログ記事は動画バージョンがあります。動画で見たい方はこちらをどうぞ↓ www.youtube.com ちょっと前から「もやもや〜」と考えてることなんですが。 なんかここ数年、急にプログラマ（エンジニアと言われることが多いけど）の仕事が脚光を浴び始めた気がします。 「3K（笑）」から「お給料が良くて、自由に働ける、イケてる職業」に！？ 僕がこの仕事を始めた頃（20年前）とか、ソニックガーデンに入社した頃（10年前）はまだ「プログラマ？おたくっぽい」「あー、3Kでしょ？きつい、帰れない、給料安いw」みたいな扱いだった気がします。少なくとも日本においては。 ところが、この5〜6年で急に「お給料が良くて、自由に働ける、イケてる職業」みたいなイメージに変わってきたんですよね。 それ自体はとてもいいことだと思うんですよ。自分の仕事が「3K（笑）」と馬鹿にされるより、「お給料がいい！自由！イケてる

開発・運用の現場から、IIJのエンジニアが技術的な情報や取り組みについて執筆する公式ブログを運営しています。 こんにちは。IIJ Engineers Blog編集部です。 IIJの社内掲示板では、エンジニアのちょっとした技術ネタが好評となって多くのコメントが付いたり、お役立ち情報が掲載されています。 そんな情報を社内に留めておくのはもったいない！ということで、IIJ Engineers Blog編集部より、選りすぐりの情報をお届けします。 今回は、使わなくなったドメイン名はどのようにすればよいかを紹介します。 そのまま放置しておいてよいのか？（ダメ） 廃止すればよいのか？（もっとダメ） どういった対応を行えばよいのか？ どうぞご覧ください。 終わったサービス・キャンペーンのドメイン名、放置されていませんか？ ドメイン名を放置すると付喪神がやどり、ひとりでにサイトを公開したりメールを出し始め

未払い行動とは何か「未払い行動」とは、認知症の人が買い物をする際に、お会計を忘れて商品を店外に持ち出すことです。 本人が意図的におこなっているわけではないことが、いわゆる万引きとは異なります。 しかし、一般に未払い行動への理解がないことから万引きと間違われて警察を呼ばれてしまったり、未払い行動をきっかけに買い物に行くことが怖くなってしまうことなどが生じ社会課題となっています。 なぜ未払い行動が生じるのか未払い行動が生じる原因はいくつかあります。 一つは、もの忘れによるものです。 認知症の原因としてもっとも多いアルツハイマー型認知症では、もの忘れが初期から生じます。 このため、買い物をしていることを忘れたり、カゴに物を入れたことを忘れてしまい未払い行動が生じます。 また、若年性認知症の原因としてアルツハイマー型認知症に次いで多い前頭側頭型認知症では脱抑制という症状が生じる方がいます。この脱抑

私事ですが、11月15日をもってアイティメディアを退職し、約10年関わってきたねとらぼの編集・運営業務から離れました。 いやー10年もいたのかと我ながら驚いていますが、いたらしいです（ちなみになんかモメたりしたわけではなくただの転職）。 そんなわけで、この記事はいわゆる退職エントリというやつになります。 ねとらぼという得体の知れないサイトのわりと初期から関わらせていただき、10年かけてそれなりの規模にまで育ててこれたというのは、なんだかんだで自分にとってはかなり貴重な経験でした。せっかくなので、ねとらぼがどのようにしてあの形になったのか、中の人は日々どんなことを考えて更新していたのかなど、怒られない程度に書き残しておきたいなと思います。 （といいつつ結構いろいろ書き散らかしたので、怒られたら五体投地してすぐにごめんなさいする所存です） 自分がねとらぼでやったこと自分がアイティメディアに入社

“あの会社”の技術を学ぼう今日から業務に活かせる！ 企業ではたらくエンジニアのための、実例全振り技術ブログコミュニティ。もっと詳しく

note株式会社は、12月21日（水）よりnoteのロゴデザイン、モーショングラフィックス、サウンドロゴをリニューアルして、オリジナルフォントを新たに作成しました。本リニューアルは、あらゆる人がオンラインでの活動拠点に使うプラットフォームとしてnoteが進化することを宣言するものです。 ロゴをはじめとした新しいVI（ヴィジュアル・アイデンティティ）のデザインは、ひとびとの生活に寄り添う企業のブランドを手がけてきた日本デザインセンター代表・原研哉氏が担当。コーポレートロゴも新しいサービスロゴと統一します。 新しいVIについてデザイン：原研哉（日本デザインセンター） （1）ロゴデザイン （2）iOS / Androidアプリのアイコン （3）モーショングラフィックスとサウンドロゴ 以下よりご視聴ください。 （4）note font  ※オリジナルフォント （5）ロゴの展開 封筒、レターヘッド、

営業の仕事は「売る」ことなのか？　「Buyer Enablment」をめぐる冒険 2024年7月12日（金）13:00～18:20

ネットワークの接続に問題が発生しているため、正しくサイトを表示できません。ネットワークの接続をご確認ください。

フリー株式会社 PSIRT 多田正 Abstract フリー株式会社（東京都品川区，以下「freee社」）およびその関連会社，一部の提携先企業でのみ観察される症例が報告されている．著者はエスノグラフィー目的で当社に潜入し，2年間の観察をもってその固有性と症状をまとめた*1．本論文では特にソフトウェアエンジニアのみに見られる症状と，一定の条件下で寛解にいたる手法について報告する． Introduction freee社内において，本来「free」と記すべき文書等に「freee」と誤入力してしまう症例が数多く報告されている．入社後，比較的短期間で発症し，しかしながら人から人への感染性は認められず，退職後は徐々に症状が現れなくなるなど，freee社に特有の風土病として認識されている．症例そのものは当社が「freee」へ改名した2013年から報告されているものの*2，きわめて狭い地域内での発症であ

かぼちゃは幅8mmくらいのくし形切りにし、耐熱の皿にのせる。水大さじ2（分量外）をふってラップをかけ、電子レンジ（600W）で7～10分加熱する。しめじは小房にほぐし、えのきだけは根元を切って、それぞれ細かくきざむ。 ミートソースを作る。フライパンを強火で熱し、ひき肉を入れてほぐしながら強火で炒め（肉から脂が出るので油はひかなくてよい）、肉の色が変わったらにんにく、しめじ、えのきだけを加える。塩をふって2分ほど炒めたらAを加えて2分ほど煮る。 耐熱の皿にバターを塗り、かぼちゃの1/2量を並べてミートソース1/2量をかける。同様にしてかぼちゃ、ミートソースをもう一段重ね、ピザ用チーズをのせる。オーブントースターで焼き目がつくまで焼き、パセリを散らす。

これまで様々な開発組織を牽引してきた株式会社LayerX 執行役員の名村卓さん、Ms.Engineer株式会社 Mother of Engineerの齋藤匠さんのお二人に、株式会社Flatt Security CTOの米内貴志がお話を伺う鼎談企画。 経営・マネジメントの立場から「セキュアな開発組織」のあり方について語り合った前編と打って変わって、後編ではお二人の"新人エンジニア時代"のエピソードを教えていただきました。 今やトップエンジニアとして経営・マネジメントに携わる名村さんと齋藤さんはどんな新人時代を過ごし、どのようにスキルアップしていったのでしょうか？ 3人の若手エンジニア時代の秘蔵写真とともに振り返ります！ ▼前編記事はこちらから flatt.tech 新人時代は"エンジニアがブラックだった時代" 今の新卒エンジニアの方が苦労している？ 「調べて手を動かす」にハマった新人時代 こ

Webフロントエンド界隈の文献などにあたっていると、「コロケーション (co-location)」という考え方が時々登場します。 コロケーションを簡単に説明すると、関連するリソース同士を近くに置いておく、という考え方です。 FooComponent.tsx と同じディレクトリに FooComponent.test.tsx を置く GraphQL fragment は、クエリを発行するコンポーネントファイル (pages/user.tsx) ではなく、fragment を利用するコンポーネントファイル (components/UserInfo.tsx) の中で定義する pages/user.tsx からはサブコンポーネントのファイルで定義されている fragment を import してきて、クエリを組み立てて発行する API ドキュメントは API.md に書くのではなく、コードの中にド

まずは自己紹介 私は、2018年にSansanに中途入社してSansanやEightなどのバックエンドのシステムを開発しているエンジニアです。転職前は主に Ruby on Rails でWebアプリケーションの開発をしていて、Sansanでも Ruby を主に書いてました。最近は Node.js を書いてます。 そんな私ですが、2020年1月から産休育休をいただき、2人出産して今は1歳と2歳の娘がいます。 約2年4ヶ月お休みをいただいて、晴れて今年の4月末に元々いたチームにフルタイムで復帰しました。フルタイムで復帰して半年以上経ったので、産休前と復帰後の変化や今の生活スタイルについて紹介しようと思います。 頭の中はこんな変化がありました 休職前の自分 仕事楽しーい🥳 Ruby楽しーい🥳 お酒大好き🍺週2,3飲みに行って土日は家でダラダラ 海外旅行いきたい！次どこ行こう ただただ好きな

こんにちは。エンジニアの佐々木です。 先日12/6、弊社イベントにてカヤックの藤原さんを交えてクラシコムのSREについてお話をさせていただきました。 当日は96名と多くの方にお申し込みいただきありがとうございました。1時間半があっという間で、時間の関係でお話できなかったことも多々ありました。改めてではありますが、記事にて当日の内容含め話せなかったこともご紹介したいと思います。 当日のテーマは「インフラ強化に向けた具体的な取り組み」と「一人に頼らないチーム体制づくりを目指して」という2つでした。 この記事では前半の「インフラ強化に向けた具体的な取り組み」について紹介します。北欧、暮らしの道具店のインフラ構成の変遷を追いつつ、その時々の課題や実際の取組みについて説明していきます。 5年前(2017年5月頃)のインフラ構成エンジニア3人で作った月間1600万PVのECサイト 「北欧、暮らしの道具

はじめに Next.js + Cloud Runで管理画面をリファクタリング・技術選定編で紹介したとおり、フロントエンドのリファクタリングを行いました。リプレイスも含めて実施したもので、技術選定の部分はその記事でざっくりと書きました。 今回はプロジェクトをチームで勧めた上で良かった点・難しかった点などの知見を共有できたらと思います。 チーム構成としてはフルスタックエンジニアが私を含め6人で、私は全体の進捗と方針をメンバーと話しながら決める担当をしていました。リファクタリングと言いながらデザインの刷新もあったのですが、そのためのデザイナーから事前にFigmaでデザインを頂いている状態でした。 リファクタリングのきっかけ もともとテストの追加できないくらい、１ファイルに複数のコンポーネントが作成されていたり膨大なpropsをもつコンポーネントがあったりコードが煩雑化していました。少しずつファイ

事前準備 M1 Macにnodeとnpmをinstallする こちらの記事にinstall手順がわかりやすくまとめられており、手順通りに行えば、問題なくinstall作業が完了できると思います。 installの際には、LTSの最新版である v16.14.2 を指定してinstallを行いました。 user@localhost ~ % nvm ls-remote v16.13.0 (LTS: Gallium) v16.13.1 (LTS: Gallium) v16.13.2 (LTS: Gallium) v16.14.0 (LTS: Gallium) v16.14.1 (LTS: Gallium) -> v16.14.2 (Latest LTS: Gallium) prisma Quickstart 公式ドキュメントのQuickstartを進めていき、prismaの基本事項をざっと確認しま