先週の1/29にリリースされたChrome 72に伴い、デベロッパーツールも新機能がアップデートされました。Web制作に役立つ新機能を紹介します。 What's New In DevTools (Chrome 72) パフォーマンス指標のビジュアル化 テキストノードをハイライト表示 Shadow DOMに役立つ「Copy JS path」 JavaScriptライブラリの検出 動画バージョン パフォーマンス指標のビジュアル化 ページのロードを記録した後、DOMContentLoadedやFirst Meaningful PaintのようなパフォーマンスメトリックをTimingsセクションにマークするようになりました。 TimingsセクションのFMP Performanceパネルに移動。 Recordボタンをクリックして、ロードを記録。 Timingsセクションを展開。 テキストノードをハ

CSSはWebページを表示する際に、「どの要素をどこに配置するのか」を決めるものですが、Webの発展とともにCSSもさまざまな設定が追加されており、「CSSで何ができるのか」という段階でつまずいてしまうことも少なくありません。そんなCSSの項目を視覚化し、一目でどんな効果がでるのかを確かめられるようにまとめたページが「CSS Reference」です。 CSS Reference - A free visual guide to CSS https://cssreference.io/ サイトにアクセスし、下にスクロールすると…… CSSの項目を分野ごとにまとめた「Collections」と、その下に全ての項目を検索できる検索ボックスが出てきます。例えば「margin」と検索し、出てきた「margin」の項目をクリックしてみます。 左側に分野名と検索ボックス、右側にmarginの説明という

どうも、イケダです。最近よくTwitterで知り合った若いデザイナーにお会いしているのですが、どなたにも決まって聞かれることがあります。 「G●●dpatchってぶっちゃけどうなんですか?」 知りません、なんで僕に聞くんだw 2015年に「Dear G●●dpatch」という内容のサイトを作って持っていったところ、「あー、またこれね...」と土屋さんに非常に悲しいリアクションをされてしまったので別の方法で気を引くことをオススメします。 というわけで今日は先日勝手にリデザインしたPolipoliのデザインを使って、UIデザインを行う時に僕が普段どのように色を選択しているのかをとても正直に書いていこうと思います。僕がこれから記す方法に則って色を選べば、誰でもナウでヤングなアプリを作ることができます。 はじめるよ レイアウトに関してはイニシエよりご先祖様がお築きになられたルールに則って並べればオ

■ はじめに top コマンドと言えば、リソースの状況確認に使えるコマンドですが、実は結構多機能です。今回は、個人的によく使う機能や便利そうだと思う機能を調べたので、まとめました。 対象バージョンは次のとおりです。 ■ ヘルプ ( h or ? ) top コマンド実行中に h or ? で、ヘルプを表示できます。top コマンドを終了させずに対話型のコマンドを確認できるので、非常に便利です。 ■ 文字列検索 ( L ) top コマンド実行中に「L -> 文字列入力 -> Enter」で、ヒットした文字列を含むプロセスを上部に表示できます。ヒット部分はハイライトされます。 実行例1 (入力キー: L,"cpu",Enter, L,"bash",Enter, L,"20",Enter) 実行例1 (入力キー: L,"cpu",Enter,L,"bash",Enter,L,"20",Ente

scraivって何 → チャンネルを作ってコンテンツ（文章、イラスト、漫画など）を連載するサイトです 現在279件のチャンネルが連載中です *現在PV数が反映されないバグが発生しております。対応まで少々お待ち下さい。また閲覧や投稿等の機能は通常通りお使いいただけます。

絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか

先日とあるベンチャー企業を辞めた。 ベンチャーの失敗はよくある話だしツイッターでもよく見かけるが、実際に自分の目の前でベンチャーが死んでいく様子を見た。 ----- 僕が働いていたその会社は、入社当時は社員数は数十人くらいの規模、創業してまだ数年ほどのいわゆるベンチャー企業だった。 数年前からのとあるブームの波に乗り「最先端領域のベンチャー」というラベルが付いた会社だった。 僕の入社当時は非常に勢いがあった時で、仕事の引き合いも多くきていたし、市場の成長と共に会社が伸びていっている空気を感じていた。 そんな勢いに乗っていた状況だったが、社長を始めメンバーのほとんどはエンジニアで、ビジネスをつくれるセンスと能力のある人がいないことが課題だった。当時の会社の経営状況がどんなだったか詳細は知らないが、潤沢に利益があるわけではなかったと思う。VCから調達した資金を消費しながらムーンショットを狙って