イラストや漫画を描くときに「こういう参考写真が欲しい……！」となってもなかなか自分で撮影するのは難しく、インターネットで参考画像を探すのも時間がかかります。「Blank Phostock」はそんなクリエイターのためのストックフォトで、面倒な会員登録はなく、カテゴリやタグから目当ての画像をサクッと見つけてダウンロード可能、ウェブサイトの素材として使用したりイラストの背景としてトレースしたりし放題とのことなので、実際に使ってみました。 Blank Phostock – 無料ストックフォト、テクスチャ配布サイト_ブランクフォストック https://blankcoin.com/photo/ 絵師による絵師のための無料写真素材サイト『Blank Phostock』(ブランクフォストック)公開! – BLANK COIN https://blankcoin.com/?p=5569 Blank Pho

Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS

エンジニアリングマネージャーの村上 (@mura_mi) です。採用関連で面談に出ることが多いのですが、大体7割くらいの確率で 「なんで Rust 使ってるのですか？」「Rust 使っててどうですか」と聞かれるので先回りして書いておこうと思った記事です。 なんで Rust を選んだの Rust をエンジニアリングチームの武器の中心に据える意思決定がされたのは私の入社前ですが、伝え聞いている話しと自分の解釈を混ぜ合わせた話を書きます。 「データ指向アプリケーションを堅牢に作るのに必要な型システムを求めたこと」と、「キャディがもともと C++ の会社だったこと」の2つが、キャディが Rust を使っていることの背景にあったのだと理解しています。 後述しますが、キャディが 原価計算システム やサプライチェーン・マネジメントシステム を Rust を使って開発しはじめたのは、2019年の中頃だった

俺流レスポンシブコーディングの覚書。「人には人のレスポンシブ」があるのでこれが正解だってわけではないのですが、レスポンシブコーディングで悩んでいる人にとって参考になる記事になってくれたら嬉しいです。 ブレイクポイントは特定のデバイスの画面サイズを基準にしない 以前アンケートを取った時にデバイスのサイズを意識して決める人が半数以上を占めていた。 アンケート結果を抜きにしても「2021 年のブレイクポイント決定版はこれだ！」的な記事がバズっているのを定期的に目撃し、主流のデバイスのサイズを比較するアプローチがほとんどであるが、僕はデバイスの端末のサイズを基準にブレイクポイントを決めることには否定的である。 主流のデバイスのサイズなんてものは時間が経てば変化する。 昨年 iPhone 12 が発表された時に従来の画面サイズとは違うバリエーションになることが分かるやいなやタイムラインが慌てふためい

2021 年 1 月に CSS Cascading and Inheritance Level 5 の First Public Working Draft が公開された。 CSS Cascading and Inheritance はその名の通り、CSS の Cascade や継承などについての仕様を定義しているもので、つい先日 Level3 が晴れて W3C Recommendation となった。 CSS Cascading and Inheritance Level 3 is a W3C Recommendation そして、新たに First Public Working Draft が公開された Level5 では、今までの Cascading に、新たにLayerという概念の導入が検討されている。 本記事では CSS の Cascading についておさらいし、新しい概念であ

開発プロジェクトに新しく加わった時は、まずプロジェクトの理解が第一。しかし、全体像を把握できるようなドキュメントがなく、コードから断片的な情報をかき集めるしかない場合もあります。新参の開発者がスムーズにプロジェクトを理解できるよう、大規模なプロジェクトでは「プロジェクト全体のアーキテクチャ」を示した「ARCHITECTURE.md」を添えた方がよいと、エンジニアのAleksey Kladov氏が指摘しています。 ARCHITECTURE.md https://matklad.github.io//2021/02/06/ARCHITECTURE.md.html Kladov氏はオープンソースプロジェクトの開発に携わる中で、「プロジェクトのアーキテクチャに対する知識量」によって開発スピードに大きな差が生じると気づいたとのこと。アーキテクチャに関する知識がない開発者にとって、大量のコードは「バラ

Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi

サインインした状態で「いいね」を押すと、マイページの 「いいね履歴」に一覧として保存されていくので、 再度読みたくなった時や、あとでじっくり読みたいときに便利です。

（※2021/6/29　Outer Wildsをこれからプレイするorプレイ中という方のための初心者用記事を書きました。未クリアの方はこちらの記事の方をおすすめします） （※2021/2/24　Switch版発売に伴う翻訳修正の可能性と掲示板 について追加） 『Outer Wilds』(steam/Epic/PS4/XBOX) 『Outer Wilds』ほど「人を選ぶ」ゲームはないだろう。 インディーズゲームらしい鬼畜難易度に、自由度の高すぎる突き放し方、なにより「好奇心だけを駆動力にする」というコンセプトはあらゆる意味で昨今のゲームとは一線を画していて、たぶん１０人にオススメしてもエンディングまで辿り着いてくれるのは３人ぐらいなんじゃないだろうか。 だけど、そのクリアした３人のうち１人は、生涯忘れられないゲームになるんじゃないかとも思っている。 かくいう自分もその一人で、クリアして半年以

浄土真宗の僧侶です。初めて書き込みます。 不慣れなため、先ほど書いた文章がすべて消えてしまい心折れかけましたが、やはり大事なことなので、増田さんに伝わればと願って改めて書き直します。 お祖父様のことをお悔やみ申し上げるとともに、今回このような形で、増田さんやお母様が悲しまれる結果になってしまったこと、痛惜に堪えません。 結論から言わせていただくと、リモート葬儀それ自体に否はありません。そんなもので台無しになるのが仏の教えならば、仏法は2500年も受け継がれたりなどしません。 私から言わせれば、死者を軽んじ、葬儀を台無しにしているのは、ご親族の方だと思います。 葬儀とは「弔(とむら)い」であります。弔いとは元来、「訪(とぶら)い」という字を用いました。これは遠近様々な場所から死者の元へと人々が訪れる様子を意味していますが、決してそれだけではありません。 死者に出会うということは、まだ生きてい

この記事は 2020 年に書かれたものです これまでのあらすじ 財テクを書いた後に、いままで賃貸に住んでいて、戸建かマンションを買ってみるかとなった COVID-19 の影響で在宅勤務が長期化しており、都心の 1LDK よりも、少し郊外で広い家に引っ越して、書斎というかオフィス的な空間を自宅内に用意したいと考えた 家の買い方に関する本をいろいろ買って読んでみたり、ネットの記事を読んでみたり、実際にマンションの購入手続きを進めてみたり (途中でキャンセルしたけど) 、仲介業者の紹介でファイナンシャルプランナーに相談したりした 前提 shunirr の独自研究による財テクをまとめています shunirr は、そこそこの規模の会社勤務なソフトウェアエンジニア、東京 23 区内在住、実家は田舎の賃貸で、相続できる資産とかは無い shunirr の思想・価値観によってまとめられているので異なる価値観

はじめに 新年早々に面白そうな記事を見つけました。ReactでのAPI呼出しを最適化するために「部分的にサーバサイドで実行するコンポーネントを作る」というもののようです。 あるいは去年の記事ですが気になってたものとしてBlitz.jsでReactベースのFWであるnext.jsに永続化層を持たせてRailsのようなFWにしようというアプローチもあります。 どちらの記事も書かれてる内容自体は分かる気がするものの 「それをフロントエンドでやる意味あるの？」 というのが拭えずイマイチ腑に落ちなかったんですが、単純に 「私と最前線でやられてる方々で期待してるものがたぶん違う」 という気がしてきたので、その辺を整理のために書いてみます。 注意書き Vue.js/Nuxt.jsは少し触ったことがありますが、React Server ComponentsやBlitz.jsを触ったことは無いです 「なんで

フロントエンド初心者が無事に Hugo のブログを Gatsby で一から作り直すことができた。その振り返り。 歴史 インターネットを小中学生(もはや 25 年以上前)に触り初めた頃に、HTML で文章の構造を作り CSS でデザインする、ということができるのを知って感動したけど、結局自分には何かが合わなくてそれを突き詰めることができなかった。というか、それを知ったが故にテーブルレイアウトとかがどうしても気に入らず、かといって CSS は float が難しすぎて、結局ウェブサイトを作る、という根本的な営みをずっと避けてきてしまった。 時は過ぎ、Wordpress の様なブログエンジンや Hugo の様な仕組みがあったおかげでブログを初めて続けることはできた。13 年前にレンタルサーバに Wordpress を置いて始めたこのブログも 9 年前には VPS での Wordpress 運用に

「ファイル・フォルダ名を一括で変更する機能」とか、標準装備で良いじゃん！ Microsoft謹製、Windowsの作業効率をアップさせる「PowerToys」というソフトの紹介・解説です。 記事のベースと画像はバージョンは0.27.1。執筆時現在は0.29.3が最新版ですが、内容はバグの修正と日本語化なので機能面の差異はなし。 PowerToysとは？ PowerToysは、Microsoftがオープンソースで開発中のソフト。元々Windowsに搭載するつもりだったが搭載されなかった利便性向上機能を複数提供するもの。 元々Windows 95時代から名前が続いているソフト。Windows XPまで提供が続けられていました。Vista以降は提供されていませんでしたが、2019年5月にWindows 10向けにオープンソースとして提供を再開しています。 各機能の詳細 FancyZones（複数

作家の甘糟りり子氏が、「ハラスメント社会」について考察するシリーズ。今回は、「奥さん」、「お母さん」、「おばさん」…といった呼びかけや「嫁」呼称問題について語る。 ＊　＊　＊ 古い日本家屋で暮らしているので、修繕を含めた業者さんをよくお願いする。先日は、役所から派遣された三人のシニアがうちにやって来た。初めてお会いする方々だ。もちろん対応するのは私で、名前を名乗って挨拶をしたのだが、いきなりこういわれた。 「じゃあ奥さん、現場に案内してくれるかな？」 「もちろんです。でも、あのう、私、奥さんではないんですが」 「あ、そ」 現場を見て、どうやって対処するかを話し合う。 「そいでね、奥さん。ここはまずやってみてからでないと」 その人の言葉が終わり、私が話す番になった時、私はもう一度やんわりとこの家の奥さんではないと伝え、「甘糟です」といってから発言をした。それでも、三人はずーっと私のことを「奥

anond:20201227223731 元増田をdisってたやつ来てください 俺が本物の科学的で合理的で健康的な食事ってもんを見せてやりますよ 大学に進学して一人暮らしを始めた19歳(一浪）の俺は貧乏学生で、外食しようにも金がねンだわだった。 つまり、自炊をしなければ飢え死ぬ。 しかし家庭科では非実用的なおままごとしか習っておらず、米を炊くことすらできない。 そこで俺は「食事」を学ぶところから始めた。 図書館で栄養学についての本を読み、古今東西の人間がどのような食事を行っていたかを文化人類学から学んだ。 遠回りすぎるかもしれないが、なにか調べたい際には、地球の常識や文化について何も知らない宇宙人が一から調査するようにロールプレイングすると楽しい。 これまではその場の気分でなんとなくウマそうなものを食うという猿畜生のようなことをしていたが、この調査のおかげで一日の栄養素から逆算して何を食べ

フューチャーアドベントカレンダー2020の24日目です。 はじめに フューチャーに入ってテックリード（社内だとアーキリーダーと呼ぶことも多い）のような役割をし始めて4,5年ほど経過しました。 いくつかの案件を回して自分なりに汎化・パターン化してきた部分も増えてきたので、気を付けていることをまとめました。 テックリードとは エンジニアのためのマネジメントキャリアパス――テックリードからCTOまでマネジメントスキル向上ガイド によると、以下のように説明されています。 テックリードはエンジニアの階層におけるランクのひとつではなく、シニアのレベルに達したエンジニアが担うことのできる職責群である 技術的なプロジェクトの管理者 部下に効率良く仕事を割り振って自身の負担を適宜軽減するよ う心がける チーム全体の生産性に照準を定め、しかるべき成果を上げるよう全力を尽くさなければならない 管理やリーダーシッ

おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小

近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能（あるいは責務）を持った部品です。また、コンポーネントによっては再利用される（アプリ内の複数の箇所から利用される）ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに

JavaScript QuestionsのLydia Hallie氏の「JavaScript Visualized」シリーズすべての翻訳を完了したので、まとめて紹介します。 JavaScriptエンジンの仕組みをはじめ、イベントループ、スコープチェーン、プロトタイプ継承、非同期処理、ジェネレータ関数、Hoisting（巻き上げ）など、GIFアニメを使用して詳しく解説しています。 シリーズ7本すべてと、プラス1として楽しく学べるクイズもあります。 JavaScript イベントループの仕組み JavaScriptでエラーの原因となるHoisting（巻き上げ）の仕組み JavaScriptのスコープチェーン・変数参照の仕組み JavaScriptエンジンの仕組み JavaScript プロトタイプ継承の仕組み JavaScriptのジェネレータ関数とイテレータの仕組み JavaScriptの