独学者Fossa

独学していることなど

インターネット

Hugo taxonomy? term?

Hugo ブログに書いておかないと、忘れそうなので、書きます。 今回、使用したHugoは、v0.86.0 extendedです。 Hugoで、CategoryやTagを使う時、Taxonomyを使いますね。 opll-inaka.hatenablog.com v0.73.0で、名称が変更されました。 過去にHugoでブログサイ…

Laravel Modulesで、npm Workspaces

以前、Yarnを使っていましたが、YarnにWorkspacesがあったなんて、知りませんでした。 npm v7になって、Workspacesが使えるようになったらしいです。 ずっと前から、Laravel Modulesを使って思っていたのが、各モジュール毎に、package.jsonがありますが、共…

Windi CSSを試す

windicss.org Tailwind CSS v2を使っているのですが、Windi CSSに興味があって、試してみました。 使用環境 Name Version node 14.17.1 npm 7.19.0 Windi CSS 3.1.3 インストール npm i windicss 今回は、Windi CSS CLIを使います。 オプション オプション名…

Nunjucksで、配列判定

Formをいじっています。 Radioボタンだと、選択肢の内の一つだけクリックするので、文字列。*1 Checkボタンだと、選択肢の中から、いくつかクリックするので、配列。*2 文字列なのか、配列なのか、判定する必要が出てきました。 Nunjucksは、Jinja2に影響を…

LiquidJS

liquidjs.com 日本語で検索しても、あまり記事が見つからないですね。 LiquidJSは、Shopifyで使われているテンプレートエンジンLiquidと互換性があるJavaScriptのテンプレートエンジンという認識で、あっているのかな? ずっとNunjucks + Gulpを、使っていま…

Dart Sass

UIkit3 使用環境 Name Version node v16.2.0 npm 7.15.0 sass 1.34.0 uikit 3.6.22 Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0. UIkit3で、sassを使うと、上記のようなメッセージが出ました。*1 解決…

Bootstrap Icons v1.4.0

github.com たぶん、お天気アイコンがいくつか、追加されたように思います。*1 ドキュメントを読むと、使い方は、色々あるみたいです。 私が使っている方法は、良い方法なのかどうかわかりませんが、メモとして残しておきます。 インストール npm i bootstra…

前記事の続き

Hugo Hugoの新機能、Attribute Lists after Markdown Blocksを試してみました。 対象のタグは? tables, lists, paragraphs etc. config.toml config.tomlの一部分です。 [markup] defaultMarkdownHandler = "goldmark" [markup.goldmark] [markup.goldmark.…

Hugo v0.81.0リリース

Hugo 2日ほど前に、v0.81.0がリリースされました。*1 追加された機能の中で、一つ気になった機能があります。 Attribute Lists after Markdown Blocksです。 試してみたいと思ったのですが、下記の理由で、まだです。 インストール Hugoをインストールする…

Hugo + 検索

Hugo Hugoで制作した制作物に、検索機能を追加したいと思っていました。 ありふれた内容ですが、私が試した範囲で理解したことを書きたいと思います。 Name Version Hugo v0.80.0 Lunr.js v2.3.9 Lunr Languages v1.4.0 いろんな記事を読みましたが、バージ…

週間テレビ番組表

週間テレビ番組表 テレビと書いていますが、見逃し配信と、Yahoo! JAPANのGYAO!で、無料で見れる海外ドラマのことです。 毎週、何曜日に配信されるのか忘れることがあるので、一週間分見たら、すぐわかるのを作りました。 約2年前から使い続けているので、…

デザインテーマ作成 挫折する

はてなブログのデザインテーマを作成していましたが、時間の都合で、間にあわないかもしれません。 先日のVanilla Frameworkで作業していた時に、心が折れたことがありました。 心が折れたこと リンク(HTMLのaタグ)をクリックすると、クリックしたところに枠…

Bookmark (2)

fossa-hobby.hatenablog.com Name 昔 Foundation for Sites 前回 Spectre.css 今回 Vanilla Framework 前回、完成した作品 イメージ図 今回、完成した作品 イメージ図 今回は、Vanilla Framework v2.23.0を使って、作ってみました。 ずっと前から試してみた…

Hugo includepaths 再考

Hugo fossa-hobby.hatenablog.com scssをHugoで使う一例として、先日のブログで書いたのが、コレ。 {{ $options := (dict "targetPath" "assets/css/style.css" "outputStyle" "compressed" "enableSourceMap" true "includePaths" (slice "node_modules")) …

ルビをふる

fossa-hobby.hatenablog.com 以前、HTMLタグで、rubyを使った記事を書きました。 HTMLについて、私自身が理解するために書いたのですが、今回は、その続きです。 仏典にルビをふる momonori11.hatenablog.com 上記の牟子『理惑論』(5)序伝⑤から、引用して…

前回のおさらい

fossa-hobby.hatenablog.com Webブラウザのブックマークの管理を、HTMLファイル形式にしようと思ったキッカケは、Firefoxです。 Firefoxって、ブックマークをエクスポートすると、HTMLファイルが出力されます。 ブックマークをHTMLで管理するのも有りだと思…

Bookmark

昔から、Bookmarkの管理に悩まされていました。 FirefoxとGoogle Chrome、訪問するサイトによって、ブラウザを使い分けています。 Firefoxでブックマークしたサイトは、Firefoxにしか登録されないので、Google Chromeで見たい場合、不便でした。 Raindrop.io…

Grav v1.7.0

Grav getgrav.org Name Version PHP 7.4.14 Composer 2.0.8 ようやく、Grav v1.7.0が、リリースされました。 1.7.0-beta.1が、2019年6月にリリースされてから、1年以上たってます。 Gravとは、MySQLなどのデータベースを必要としないFlat-File CMSです。 デ…

Bootstrap v4.6.0

Bootstrap github.com Bootstrap v4.6.0が、リリースされました。 Documentsが、Hugoになったらしいです。

Hugo includepaths

Hugo Hugoで、scssを使う時、node_modulesにあるファイルを@importで指定したい場合があります。 includepathsについて、理解がなかった頃、themes/<theme名>配下に、node_modulesを作成していました。 テーマ毎に、使用するCSS Frameworkが違うからです。 . ├── LICE</theme名>…

Hugo Menu

Hugo Name Version Hugo v0.79.0/extended UIkit v3.6.5 Hugoで、Document風なサイトを制作しています。*1 Hugoを使っていて、私が1番面倒だと思うのが、Menuを生成することです。 メニューが少ない場合は、config.tomlに記述すればいいと思います。 メニュ…

Foundation for Sites

Name Version Foundation for Sites v6.6.3 Hugo v.0.80.0 Foundation for Sitesを使っている人は多いと思いますが、日本語の記事は少ないのかな? Hugoで、scssを使って、Foundation for Sitesを使う一例を書いておきます。*1 themes/foundation/assets/scs…

デザインテーマ作成(2)

fossa-hobby.hatenablog.com 続きです。 #mainを掘り下げようと思いましたが、前回まで調べた内容で、色分けしてみました。 iPad iPhone iPad(1024*768)とiPhone(375*667)で、表示しています。 id color #container 薄い灰色 #content 少し濃い灰色 #blog-ti…

デザインテーマ作成(1)

fossa-hobby.hatenablog.com 続きです。 #container <div id="container"> <div id="container-inner"> <header id="blog-title" data-brand="hatenablog"> </header> <div id="content" class="hfeed"> </div> </div> </div> 大まかに分けると、#blog-…

無謀な試み

今、取り掛かったところですが、はてなブログのデザインテーマに挑んでいたりします。 blog.hatenablog.com 目指すは、もちろん参加賞です。 レッドスター100個プレゼントと書いてあるけど、最大100名様なので、ゲット出来るかどうかは、微妙です。 は…

Fossa Advent Calendar 25日目

Fossa Advent Calendar 25日目 書き終えた感想 最初は、予約投稿を使って、書いていました。 しかし、だんだんネタが無くなってしまい、10日目を過ぎたところから、しんどかったです。 25日目は、1〜24日を書いた感想を書くつもりにして、少し負担を…

Fossa Advent Calendar 24日目

Fossa Advent Calendar 24日目 FullCalendar v5.5.0 リリース github.com FullCalendarのバージョンが上がる度に、日本語で記述されている情報は少ないように感じます。 FullCalendar v5.0.0になった時に、Vue.jsで書き直しました。 v5.5.0にしてみましたが…

Fossa Advent Calendar 23日目

Fossa Advent Calendar 23日目 Framework7 github.com v6.0.0が開発中ですが、Framework7 Vueは、Vue3対応になりそうです。 しばらく、Vue.js 2.xを使う予定なので、Framework7 v5.xを使い続けるしかなさそうです。 ReactやSvelteにも対応しています。

Fossa Advent Calendar 22日目

Fossa Advent Calendar 22日目 Adventarに登録 adventar.org 25日まで毎日、書き続けられるのか不安でした。 数日分の記事を書けば、全部、埋められる目処がたったので、登録してみました。 Twitterのアカウント連携で登録したので、楽ちんでした。 アクセ…

Fossa Advent Calendar 20日目

Fossa Advent Calendar 20日目 Laravel Mix v6.0.0リリース github.com ようやく、v6.0.0がリリースされました。 Webpack v5やVue3に対応するために、時間がかかったような印象があります。 変更された点を書いておきます。*1 Laravel Mix v5(webpack.mix.js…