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 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…

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

アドベントカレンダー 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 …

アドベントカレンダー 動作環境 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に記述したりしていまし…

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

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

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

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

アドベントカレンダー 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用のプラ…

アドベントカレンダー 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 …

アドベントカレンダー 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…

アドベントカレンダー 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 数ヶ月前から、ウインドウを２つ以上開くと、タイトルバーにあるメニューをクリックしても、メニューの…

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

アドベントカレンダー 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…

アドベントカレンダー Rollup Part-3 前回の続きです。 使用環境 Name Version Rollup v3.7.1 rollup-plugin-scss v4.0.0 @rollup/plugin-replace 5.0.1 sass 1.56.2 @rollup/plugin-replace RollupのCore Pluginsの中に、@rollup/plugin-replaceがあるのを…

アドベントカレンダー Rollup Part-2 前回の続きで、scssファイルをコンパイルします。 コンパイルしていると、いつの間にか、 困憊る(コンパイル)しますよね（笑） 今回は、失敗した例なので、お役に立つことは、なさそうです。 rollup-plugin-scss prefix …

アドベントカレンダー Rollup Part-1 使用環境 Name Version Rollup v3.5.1 rollup-plugin-scss v3.0.0 sass 1.56.1 ついこないだまで、Webpack や Laravel Mixを使っていたのに、いつのまにか、Vite や Laravel Viteを普通に使っていて、変な感じがします。…

アドベントカレンダー CSS Prefix Autoprefixerの話じゃなくて、CSS Frameworkで使われるPrefixの話です。 CSS Frameworkの UIkitで例えるなら、uk-のことです。 AというCSS Frameworkで制作していて、BというCSS Frameworkのコンポーネント一つだけ利用した…

アドベントカレンダー Horizontal form 各CSSフレームワークのHorizontal formを比較してみました。 今回は、時間の都合、HTMLを記述するだけです。 ドキュメントから引用させていただいています。 Bootstarp 5.2.3 Layout · Bootstrap v5.2 <form> <div class="row mb-3"> <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label> <div class="col-sm-10"> </div></div></form>

アドベントカレンダー PHP Enum Enumの使い方は、いろんな人が説明しているので、省きます。 私が遭遇して知ったのですが、逆に使えない場合を記載します。 使用環境 Name Version PHP 8.1.12 定数を可変で取得できない enum Oil: string { case HighOctane …

アドベントカレンダー PostCSS Part-1 PostCSSは、大勢の人が使われているのだと思いますが、検索の方法が正しくないからか、欲しい情報にめぐり会えません。 PostCSSは、使いたいプラグインを限定すると、コストを下げることが出来ると思いました。 Bootsra…

アドベントカレンダー Info 解釈が間違っていて説明が相応しくなかったら、ごめんなさい。 Dart Sass @import しばらくメンテナンスされていないCSS Frameworkを使用する為に、勉強がてら@useや@forwardに書き換えようと思って、調べてみました。 ２０２２年…

アドベントカレンダー Laravel ValetとViteの組み合わせ 使用環境 Name Version Node.js v18.12.1 Vite 4.0.3 @vitejs/plugin-vue 4.0.0 PHP 8.1.13 cpriego/valet-linux v2.2.37 Laravel + Viteの場合は、Laravel Viteがあるので、不便に感じませんでした。…

アドベントカレンダー 去年は病院通いに追われたので、断念しましたが、今年は１０月から準備しました。 内容は、限定せずに、書き残したいことを書く方針です。 使用環境 Name Version Bulma 0.9.4 Hugo v0.104.3-extended Bulma Horizontal formをBootstra…