夜な夜なBlender生活の始め方
はじめに Blender。めっちゃ楽しいです。 仕事が終わって帰ってきてから、ほぼ朝の時間までBlenderにひたすら打ち込んで 休日の大半もBlenderに捧げるような生活をここ3週間くらい続けてきました。 ここまでの学びの整理と、Blender布教のために この記事に概要をまとめたいと思います。 Blenderの世界観 Blenderを始めるにあたって、まず第一にぶち当たる壁として 「3Dソフト特有の概念」があると思います。 他の、3Dソフトを触ったことがある人はすんなり扱えるかもしれませんが、 僕はなかったので、概念理解にちょっと苦戦しました。 Blenderの世界を構成する主な要素として シーン オブジェクト ライト カメラ これらが挙げられます。 シーンとは、 一つのBlenderファイル内に格納されている要素全てを包含する3Dワールドのようなものです。 オブジェクトとは、 一次
TL;DR: jQueryはDrupalのバーター リニューアルするたびにWeb界隈の一斉レビューを受けることでお馴染のデジタル庁ポータルサイトがいつの間にかまたリニューアルされていて、フロントエンドがNext.jsからDrupalに変わって話題になっていたので1、私も旅券所持者として国政に関心を持ってゆく また、まわりのフロントエンドエンジニアの間でjQuery氏の入庁について「モダンブラウザ全盛の時代に必要か？」と疑念がとなえられていたので、これも追求してゆきたい どのような変更があったのか システム変更の経緯はプロジェクトの関係者であるHal Sekiさんの発言が正確なところだと思う Drupalが話題ですが、元々CMS側は2年前からずっとDrupalだったんです。設立当初はサイトもシンプルだったのでフロントエンド側はNextjsでヘッドレス構成だったのですが、構成が複雑になってきて
先日アップデートされた、VS Code v1.86で、スティッキースクロールがツリービューでも使用できるようになったので、紹介します。 エディタのスティッキースクロール（紹介記事）ができるようになった時もその便利さに喜びましたが、ツリービューでもできるようになり、深い階層でもすべての親を常に表示しておくことができます。 ツリービューのスティッキースクロールを使用するには、デフォルトではオフになっているので、機能をオンにする必要があります。 ※オンになっている人もいるようですね。
古いリセットCSSからはもう卒業！ モダンブラウザに最適化された新しいリセットCSS -A (more) Modern CSS Reset
モダンブラウザをターゲットにしたWeb制作では、リセットCSS自体が必要ないかもしれません。とは言っても、設定しておきたいスタイルや一部のブラウザ用に設定しておきたいスタイルがあります。 現在のWeb制作に合わせて制作されたリセットCSSを紹介します。なぜそうするのか、なぜそれを使用しないのか、CSSの知見やテクニックも満載です！ A (more) Modern CSS Reset by Andy Bell 他のリセットCSSが気になる人は、こちらも注目です。 A (more) Modern CSS Resetの前のバージョンも解説しています。 2023年、現在の環境に適したリセットCSSのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに モダンブラウザに適切なデフォルトのリセットCSS 各リセットCSSの解説
Google Analytics 4 でミスされやすい・誤解されやすい「設定」７選（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4 の本格利用がGoogle Analytics終了とともに始まり、多くのサイトや企業が移行を完了したと思われます。しかしGA4は新しい計測形式になり、混同しやすい内容が増えました。特に今までGAを使っていた人ほど、誤った理解で設定を行ったり、数値の定義を間違えて理解してしまいます。 そこで今回は注意するべきポイントを7個まとめてみました。みなさんが正しく設定や理解をできているかを１つずつチェックしながら、ぜひ本記事をご覧ください。 事実１：Google Analytics 4ではコンバージョンのカウント方式が２種類ある 事実２：「データ保持」の期間設定は「探索レポート」のみ反映される 事実３：拡張計測機能で設定した取得項目を見るためには設定が必要な項目もある 事実４：内部トラフ
Whispy
Failed to subscribe - try again, if it doesn't work follow on Twitter @whispy to find out when this will be fixed. Your email will only be used to notify you about the launch of Whispy and news related to it. You can unsubscribe at any time. Read more in our Privacy Policy. Why Whispy is worth checking outWe know, there's a lot of new social medias emerging, and you might think Whispy is just anot
こんにちは、みみぞうです。 ナビタイムジャパンで『システムや開発環境、チームの改善』を担当しています。 今回はターミナルで動くGitクライアントツール『GitUI』を紹介します。 本稿は以下のいずれかに当てはまるような方をターゲットにしています。 ターミナルで動くGitクライアントツールを探している方 NeovimからシームレスにGitの操作をしたい方 Windowsで使えるGitクライアントツール探しに困っている方 ℹ️ Neovimは、Vimをベース拡張性を考慮してモダンな技術で作られたプロダクトです。 GitUIとは『GitUI』はターミナル上でもGUIのように快適なGit体験を提供するOSSのツールです。 GitUI provides you with the comfort of a git GUI but right in your terminal extrawurst/gi
2023年9月7日 CSS CSS小技集シリーズの第5弾！「【第4弾】少しのコードで実装可能な10のCSS小技集」から約2年。またまた便利でサクッと使えるコードが続々登場しています！初心者さんからベテランさんまで要チェック！ ↑私が10年以上利用している会計ソフト！ 目次 ネストで親子セレクターを管理 チェックボックスやラジオボタンの色を変更 アスペクト比を指定する 新しいメディアクエリーの範囲指定方法 背面の要素をぼかす 要素を画面のど真ん中に固定表示 空の要素にスタイルをあてる 条件に合致しないセレクターにスタイルをあてる スムーススクロールのジャンプ位置 動いているCSSアニメーションを止める HTML・CSSの全コードは各サンプルの「HTML」や「CSS」タブを、別タブでのサンプル表示は右上の「EDIT ON CODEPEN」をクリックしてご覧ください！ 1. ネストで親子セレクタ
［追記あり］Mac のここがダメ - tmtms のメモ
追記したよ！ 注意 Mac にもいいところはあるけど書いてない Windows の方がいいとは言ってない ハード / MacBook Pro 14インチ 会社から貸与されているのは MacBook Pro 14インチなのでそれについて。他のは知らない。 JIS キーボード キーボードは US でも JIS でも選べたんだけど、慣れてるので JIS を選択した。 そしたら変な配列のキーボードだった。「1」の左にキーが無い。数字キーの列が全体的に左によってる。「1」が「TAB」よりも長いってどういうこと？ [追記] 対策と言っても外付けキーボードを使うくらい。自分は ThinkPad トラックポイントキーボード II を使ってる。 会社に行くときもキーボードを持っていってる。薄くて軽いので良い。 重い 今どき 14インチで1.6kg って重すぎるでしょ。ThinkPad T14 の 1.3kg
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
知らなかったCSSプロパティ 3選 - Qiita
はじめに 意外と知らなかったCSSプロパティを3つ紹介します。 1. currentColor currentColor（CSS:カスケーディングスタイルシート） 特定の要素に指定されている色を参照するCSSプロパティです。 要素内の任意のプロパティで使用できますが、特にボーダーや背景などの色を親要素の色と同じにしたい場合に便利です。 currentColorの利点は、色の変更が親要素のcolorプロパティによって自動的に反映されるため、親要素のテキスト色を変更するとcurrentColorを使用している要素の色も新しい色に変更されることです。 使用例 .parent { color: red; border: 1px solid currentColor; /* テキストの色と同じ色（red） */ .child { color: currentColor; /* 親のテキストの色と同じ
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
オウンドメディアサイトの評価に役立つGoogle Analytics 4のカスタムレポート作成ガイド（寄稿：小川卓） - はてなビジネスブログ
株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytics 4には多様なレポートや機能が備わっており、どれを利用すれば良いか迷うことが少なくありません。複数のレポートを行き来しながら見るのも手間ですし、改善に直接役立ちにくいレポートや指標もあります。 そこで今回は、オウンドメディア向けのGA4カスタムレポートの作成方法と見方について紹介いたします。まずはこのカスタムレポートを見ておけば、各記事の評価が適切に行えるようになります。 カスタムレポートとは？ 作成するカスタムレポート カスタムレポートを見る上でのポイント カスタムレポートの作成方法 最後に カスタムレポートとは？ GA4のレポート内にある機能で、任意のディメンションと指標を選んで表を作成することができます。必要な項目だけを表示することができるため、必要なデータに絞り込むことが可
仕事が早い人は使っている最新Web便利ツール34選
「Webサイト制作がもっと楽になる方法ってないの？」 「Web制作の最新ツールを試してみたい」 そんな方へオススしたい、Webデザイン制作に役立つツールや素材をまとめてご紹介します。 「これ、もっと早く知りたかった」と思うような便利ツールを中心にセレクトしています。 2024年のデザイントレンドにもぴったりな新Webテクニックを、次のプロジェクトに活用してみてはいかがでしょう。 一緒に最新デザイン素材やツールも目を通しておくと良いでしょう、特に今回は豊作でした。 コピペ系CSSツール 60 CSS 3D Buttons Free Collection CSSとHTMLのみで作られた3Dボタンと、本物そっくりな見た目の「スキューモーフィック」ボタンのコレクション。クリックするとコピーできます。 275 CSS Gradients Collection 美しいCSSグラデーション250カラーが
git stashをもっと便利に扱いたいと思い、fzfを使って使いやすくしてみた。以下のURLに載っているものを参考にして自分にとって使いやすいように改変した。 fzfでGUI選択したファイルをgit stashするシェルスクリプト git-stash-explore できたこと 今の変更ファイルをfzfを使って選択して、選択したものだけをstash (git-stash-select) stash一覧の中から中身をpreviewしながら選び、apply or deleteする (git-stashes) 現在の変更ファイルから一部を選んでgit stashするコマンド fzfでGUI選択したファイルをgit stashするシェルスクリプト を参考に、git-stash-selectというコマンドを作った。 #!/usr/bin/env bash # Get the root direct
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
企業ぐるみでハッキングを行ったとする暴露記事を掲載したロイターに対し現地裁判所経由で圧力をかけ、記事を一時的に削除させたベンチャーキャピタリスト「Appin」が、ロイターだけでなく世界的な情報操作に加担していることが明らかになりました。 Who Is Killing All These Stories About Rajat Khare, Controversial Tech Mogul? https://www.thedailybeast.com/who-is-killing-all-these-stories-about-rajat-khare-controversial-tech-mogul 2023年11月、ロイターが「インドの新興企業がいかに世界をハッキングしたか」という見出しの特別調査記事を掲載しました。内容は「インドに拠点を置くAppinがいかにして世界中の重役、政治家、軍関
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
As your web app matures, it becomes challenging to ensure your GUI doesn’t break with any given update. There are a lot of browsers and devices, and countless states for every one of your components. Unit tests ensure your code remains consistent, and E2E tests will ensure your system remains consistent, but neither will catch visual anomalies, layout issues, or platform compatibility issues. Ente
iOSのブラウザ（Safari、Chromeなどなど）で体験の良いWYSIWYGエディタを作るのは無理ゲーである。色々と理由はあるが、いちばん辛いのはバーチャルキーボード（オンスクリーンキーボード）を表示したときの挙動だと思っている。 キーボードが表示されているときにposition: fixedが効かない WYSIWYGエディタではテキストの装飾や画像挿入などのボタンを画面のどこかに固定したくなることが多い。 しかし、iOS Safariではキーボードが表示されているときにposition: fixedなどのCSSだけで画面上に何かを固定させることが難しい。 position: fixedとbottom: 0 やtop: 0を使っても要素が画面に固定されない仕様となっている（これはposition: stickyにしても同じ）。 ワークアラウンドも上手く動かない noteやscrapbo
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
Elasticsearch 6系および7系への無停止アップグレード事例 - はてなブックマーク編 - Hatena Developer Blog
はてなブックマークチームのエンジニアリングマネージャー id:yigarashi です。はてなブックマークでは全文検索エンジンとしてElasticsearchを利用しており、最近6.8および7.10への無停止アップグレードを実施しました。非互換な変更の影響を真っ向から受けるユースケースでしたが、リスクを分割し少しずつ対処することで迅速かつ安全にアップグレードできました。本記事ではポイントを絞りつつアップグレードの様子をまとめます。 アップグレードに至る経緯 はてなブックマークでは長らくElasticsearchの5系を使っていました。エントリーとブックマークの検索を中心にサービスのかなりの部分を支える重要なミドルウェアですが、大きな変化は以下の記事にある2020年のAWSへの移転が最後（その時もメジャーバージョンは変わらず）で、なかなかElasticsearchの面倒を見られていませんでし
CSSだけで要素がスクロールできるかどうかを検出する方法を紹介します。 先日紹介したスクロール駆動アニメーション（Scroll-Driven Animations）はスクロール可能なオーバーフローがある場合にのみアクティブになるため、要素がスクロール可能かも検出することができます。 Solved by CSS Scroll-Driven Animations: Detect if an element can scroll or not by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSで要素がスクロールできるかどうかを検出する アクティブと非アクティブなスクロール駆動アニメーション CSSの変数を追加して、スクロール検出機能を作成 実装でより使いやすくする 実装例 はじめに スクロール駆動ア
ここ数年、CSSの進化はとても早いと感じている人は少なくないと思います。当ブログでもCSSの新機能をたくさん紹介してきましたが、一昔前にはこんなことができるようになるとは驚くばかりです。 そんなCSSの新機能に対して、どのように向き合えばよいのか、実際にどのように使用すればよいのか、その手引きとなる記事を紹介します。 元記事の「Old Dogs, new CSS Tricks」は、わたし達は老犬であり、老犬のような年配者や頭の固い人には新しいことを学ぶのは難しい、というニュアンスです。 Old Dogs, new CSS Tricks by Max Böck 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 新機能による疲れ サポートを言い訳にする 目に見えない改善 実際の使用例とデザイントレンド 習慣を断ち切る 確立さ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デジタル庁でjQueryが何をしているのか - laiso
VS Codeの新機能がすごく便利！ ツリービューのスティッキースクロール機能をオンにすると格段に使いやすくなります
『GitUI』を使ってターミナルからでも直感的なGit操作を｜NAVITIME_Tech
【第5弾】少しのコードで実装可能な10のCSS小技集
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
Reactの気持ちになって理解するWebパフォーマンスチューニング
fzfを使ってgit stashを便利に扱えるように - $shibayu36->blog;
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
ロイターやその他大手メディアに圧力をかけて記事を削除させるインドのベンチャーキャピタリスト「Appin」とは？
Ultimate Guide to Visual Testing with Playwright
iOSブラウザで快適に書けるエディターを作るの大変すぎ問題
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
知っておくと便利！ CSSだけで要素がスクロールできるかどうかを検出する方法
CSSの新機能にどのように向き合えばよいか、新しいことを学んだり覚えることは頭の固い人には難しい