独学者Fossa

独学していることなど

UIkit hook mixin 考察 (3)

UIkit3 使用環境 Name Version Dart Sass 1.70.0 UIkit 3.17.11 前書き 前回と、前々回で、UIkitを@useや@forwardに置き換えられるか試しました。 一つだけ気になったことがあります。 カスタムテーマの位置が、フレームワーク内にあることが前提になれば、…

UIkit hook mixin 考察 (2)

UIkit3 使用環境 Name Version Dart Sass 1.70.0 UIkit 3.17.11 前書き 前回の続きで、今回はSass Variablesです。 現状は、uikit/src/scss/variables.scssに、各コンポーネントのSass Variablesを集約しています。 uikit/src/scss/components/variables.scs…

UIkit hook mixin 考察

UIkit3 使用環境 Name Version Dart Sass 1.70.0 UIkit 3.17.11 前書き UIkitをこよなく愛するFossaです(笑) UIkitでは、mixinをhookするために使っています。 例えば、下記の通りです。 .uk-alert { position: relative; margin-bottom: $alert-margin-ve…

Hugo Data Templates (5)

Hugo 使用環境 Name Version Hugo v0.121.2-extended 前書き お恥ずかしいことに、ずっと気づかなかったことがあります。 HugoのData Templatesは、PHPで言うところの連想配列の場合、Keyでソートするのがデフォルトらしいです。 コミュニティで検索して、Hu…

Hugo Data Templates (4)

Hugo 使用環境 Name Version Hugo v0.121.2-extended 前書き fossa-hobby.hatenablog.com 前回から、ずっと気になっていたことが、2つあります。 1つ目は、Data Templatesのデータは、どんな感じなのか? 2つ目は、Data Templatesのデータに、似たデータ…

Hugo Theme作成を考察する

Hugo 使用環境 Name Version Hugo v0.121.1-extended OS Ubuntu 22.04.3 LTS まえがき gohugo.io Hugoのドキュメントに、Template lookup orderのページがあります。 例えば、layouts/_defaultディレクトリの中にsection.htmlとlist.htmlがあったら、section…

簡易モジュール構造(5)

fossa-hobby.hatenablog.com 使用環境 Name Version PHP 8.2.14 Laravel v10.38.2 laravel/jetstream v4.2.0 inertiajs/inertia-laravel v0.6.11 Node.js v20.10.0 Vue.js 3.3.13 Vite 5.0.10 Laravel Vite Plugin 1.0.0 Inertia.js 最初に書いておきますが…

Table td vertical-align: middle

使用環境 Name Version Uikit 3.17.11 boxicons 2.1.4 前書き vertical-alignは、inlineとinline-blockとtable-cellで、設定します。*1 検索すると、vertical-align: middleが効かない旨の記事は多いのです。 しかし、table-cell のtdタグでvertical-align: …

CodeIgniter 4 + Vite 5

使用環境 Name Version PHP 8.2.13 CodeIgniter 4.4.2 Vite 5.0.7 Vite 5 Vite 5のデフォルトだと、manifest.jsonが.viteディレクトリに格納されるようになりました。 build.manifest欄を、下記のように変更すると、今まで通り使えそうです。 Laravel Vite P…

Mastodon

前書き X(旧Twitter) フォロワー数が少ないサブ垢の方が、ポストすると閲覧数が2〜3桁ありまして、メイン垢でポストする度に、放置プレイ状態だったので、毎回、虚しく思いました。 メイン垢では、ポスト頻度が低かったので、仮にミュートされることはなく…

Hugo + Dart Sass

Hugo 使用環境 Name Version Hugo v0.115.3-extended Vanilla Framework 4.0.0 OS Ubuntu 22.04.2 LTS 昔も今も、 "transpiler" "dartsass"を指定したら、HugoでDart Sassが使えます。 昔、Hugoで、Dart Sassを使うには、別途、dart-sass-embeddedが必要でし…

簡易モジュール構造(4)

fossa-hobby.hatenablog.com 使用環境 Name Version PHP 8.2.6 Laravel 10.11.0 Node.js v18.16.0 Vue.js 3.3.4 Vite 4.3.9 Laravel Vite Plugin 0.7.8 Laravel Vite Plugin 今回は、Laravel Vite Pluginを使います。 Laravel Modulesのvite.config.js(vite.…

待てない人?

レジで並ぶ人たち レジでお会計時に、お支払いに時間がかかりすぎて、後ろに沢山の人が並んでいても、平気な人がいます。 並んでいる人の中には、待つ事に理不尽に感じる人がいて、待てない人(待ちたくない人)というのが、いるらしいです。 待てない人は、…

Hugo targetPath

Hugo Info この記事は、忘れそうな内容なので、私自身の為に書き記しています。 Hugoで、SASS and SCSS filesしか使わなかったからか、PostCSSを使うようになって、気づいたことがあります。 targetPathは、resources.ToCSSで使えるオプションであって、reso…

Vite + Nunjucks

Vituumを使わず、Viteを使って、NunjucksでHTMLを生成する方法です。 2023-06-28 追記 Vituumが1.0.0となり、仕様が変更されました。 @vituum/vite-plugin-nunjucksの1.0.0では、下記の通りには動作しません。 使用環境 Name Version Vite 4.0.3 @vituum/vit…

Fossa Advent Calendar 25日目

アドベントカレンダー 書き終えた感想 10月から準備していましたが、11月中に書き終えることは出来ませんでした。 ブログにアウトプットすることで、復習したのと同じ効果が得られ、後で読み返して、思い出す時に役立っています。 だからといって、毎日…

Fossa Advent Calendar 24日目

アドベントカレンダー Fossa Advent Calendar 2022 目次 日付 内容 12/01 Bulma 12/02 Laravel ValetとViteの組み合わせ 12/03 Dart Sass @import 12/04 PostCSS Port-1 12/05 PHP Enum 12/06 Horizontal form 12/07 CSS Prefix 12/08 Rollup Part-1 12/09 R…

Fossa Advent Calendar 23日目

アドベントカレンダー FullCalendar 6 + Laravel 9 Laravel 9のAPI Resourceを使って、FullCalendar 6を表示します。 Resource::collectionを使うと、dataキーでラップしますが、FullCalendar側も対応させる必要があります。 使用環境 Name Version PHP 8.1.…

Fossa Advent Calendar 22日目

アドベントカレンダー PHP Coding Standards Fixer 使用環境 Name Version Ubuntu 22.04.1 LTS VS Code 1.74.2 PHP 8.2.0 PHP CS Fixer 3.13.1 PHP CS Fixer for Visual Studio Code v0.3.8 PHP CS Fixerは、まだPHP8.2に対応していないみたいです。 PHP CS …

Fossa Advent Calendar 21日目

アドベントカレンダー 動作環境 Name Version Ubuntu 22.04.1 LTS VS Code 1.74.0 Prettier Formatter for Visual Studio Code v9.10.3 Visual Studio Code + Prettier Prettierの設定をpackage.jsonに記述したり、prettier.config.jsに記述したりしていまし…

Fossa Advent Calendar 20日目

アドベントカレンダー Tailwind CSS v3 JITが標準になり、生成されるCSSファイルのサイズが、非常にコンパクトになりました。 v3になって、カラーの定義が変更されているので、CSSのソースから確認したいと思いました。 CSSが、全部定義されているものを生成…

Fossa Advent Calendar 19日目

アドベントカレンダー OrbitCSS fossa-hobby.hatenablog.com 2020年のFossa Advent Calendar 13日目で、OrbitCSSを紹介しました。 バージョンが上がって、2021年の10月27日に、2.0.0になりました。 orbitcss.com このフレームワークの良さは、Examplesが…

Fossa Advent Calendar 18日目

アドベントカレンダー AQOUS Sense 6 今年の4月頃、3年ぶりに、スマホを購入しました。 SHARPのAQOUS Sense 6( ROM 128GB / RAM 6GB )です。 SIMフリーなので、型番はSH-M19です。 指紋認証 指紋認証に対応している液晶フィルムを購入しました。 指紋認証…

Fossa Advent Calendar 17日目

アドベントカレンダー Visual Studio Code Workspace Workspaceという言葉自体、馴染みがないからか、何度、説明を読んでも、スッキリしませんでした。 複数ルートのフォルダを同時に開くという説明を読んで、私が使う時には全く関係ない話だと、やっと、わ…

Fossa Advent Calendar 16日目

アドベントカレンダー Vituum 使用環境 Name Version Vite v4.0.3 Vituum 0.0.38 @vituum/nunjucks 0.1.1 @vituum/vite-plugin-nunjucks 0.1.5 ツイッターの呟きで知ったのですが、Vituumというのがあるのを知りました。 vituum.dev Template engine用のプラ…

Fossa Advent Calendar 15日目

アドベントカレンダー FullCalendar 5 & 6 使用環境① Name Version @fullcalendar/core 5.11.3 @fullcalendar/daygrid 5.11.3 @fullcalendar/vue3 5.11.3 使用環境② Name Version @fullcalendar/core 6.0.1 @fullcalendar/daygrid 6.0.1 @fullcalendar/vue3 …

Fossa Advent Calendar 14日目

アドベントカレンダー Rollup Part-4 使用環境 Name Version Rollup v3.7.1 rollup-plugin-scss v4.0.0 sass 1.56.2 rollup-plugin-scss rollup-plugin-scssのドキュメントを再確認しました。 ドキュメントから引用します。 // Run postcss processor before…

Fossa Advent Calendar 13日目

アドベントカレンダー Visual Studio Code + Title Bar Style 使用環境 Name Version Ubuntu 22.04.1 LTS VS Code 1.73.1 and 1.74.0 VS Codium 1.73.1 数ヶ月前から、ウインドウを2つ以上開くと、タイトルバーにあるメニューをクリックしても、メニューの…

Fossa Advent Calendar 12日目

アドベントカレンダー PostCSS Port-2 使用環境 Name Version PostCSS v8.4.19 postcss-rename 0.6.1 fossa-hobby.hatenablog.com 7日目の続きです。 PostCSSで、prefixと付くプラグインは、色々あって、下記のようなプラグインが見つかりました。 postcss-…

Fossa Advent Calendar 11日目

アドベントカレンダー Vite 使用環境① Name Version Rollup v3.5.1 rollup/plugin-replace 5.0.1 rollup-plugin-scss v3.0.0 sass 1.56.1 vite 3.2.3 使用環境② Name Version Rollup v3.7.1 rollup/plugin-replace 5.0.1 rollup-plugin-scss v4.0.0 sass 1.5…