独学者Fossa

独学していることなど

インターネット

app.jsが原因ではない

間違った記事のせいで、間違った記事を読んだ人も、間違った結論を出してしまうパターンを発見しました。 間違った記事も、間違った記事を読んだ人も、app.jsのせいだと結論づけていますが、本当にそうでしょうか? app.jsを読み込むと、jQueryやjQuery UIが…

Volar

github.com Visual Studio Code (以下、VSCode)で、Vue3を使う時に、お世話になるのが、Volar。 私は、Vue2から使っているOption APIを使い、TypeScriptは使わないので、下記のwarningが出ました。 長ったらしいので、省略します。 Component options are …

nodebrewからfnmへ

長年、nodebrewを使っていまして、今もnodebrewに不満はないです。 ずっと更新されないし、そろそろ移行した方がいいかなと思って、調べてみました。 検索するとVoltaが出てきますが、私が以前、試した時に採用を見送ったので、他のものを探してみました。 f…

UIkit 3 + Less

UIkit3 fossa-hobby.hatenablog.com 以前は、Laravel Mixを使いましたが、今回は、npm scriptsです。 使用環境 Name Version Less 4.1.2 UIkit 3.10.1 インストール ドキュメントから引用します。 npm i less --save-dev package.json "scripts": { "less": …

Vanilla Framework 3.0

Vanilla Framework Vanilla Framework 3.0 リリース リリースされたので、試してみました。 最初に結論を書きますが、私が使う分には、以前のVanilla Frameworkを使うのが、最善だと思いました。 しかし、ドキュメントは新しくリリースされたものしか見れな…

UIkit uk-card-body uk-overflow-auto

UIkit 使用環境 Name Version UIkit 3.7.6 uk-card-body uk-overflow-auto <div class="uk-card-body uk-overflow-auto"> uk-card-bodyに、overflow:auto;を指定して、コンテンツの高さが溢れた場合、スクロールさせたい場合があります。 以前は、JavaScriptで、uk-card-bodyのheightを計算していました</div>…

UIkit 3(Less) + Laravel Mix 6

UIkit3 使用環境 Name Version Laravel Mix 6.0.28 Less 4.1.1 less-loader 10.0.1 UIkit 3.7.2 UIkit 3のテーマをコンパイルしてみようと思い、久しぶりにLessを使いました。 知らない内に、最新版は、4.1.1になっていました。 以前、試した時は、下記の通…

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…

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

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

ルビをふる

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

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になったらしいです。

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名様なので、ゲット出来るかどうかは、微妙です。 は…

はてなブックマーク

まだ、はてなブログや、はてなブックマークを使いこなせてないなぁと、実感する出来事がありました。 凹む はてなブックマークで、嫌なコメントを読んでしまったのですが、調べてみると、2つ方法があるらしい。 嫌なコメントだけ非表示にする 嫌なコメント…

HTMLタグ

HTMLタグですが、よく使うタグ、あまり使わないタグや、存在自体、知らないタグもあります。 いろんな人のブログを読んで、『あれ?』と思ったブログがありました。 タグの存在自体、知っていたけど、使ったことがなかったのです。 HTMLソースを見てみると、…

Composer 2.0

Twitterで、Composer 2.0 is now releasedの呟きが、目立っていました。 Composer 確認すると、私のComposerの現在のバージョンは、1.10.15でした。 最新の1.10.16にするには、下記の通り(試しました)。 composer self-update --1 こんなメッセージが出ま…

テーマの表示確認

Markdown記法で、ブログを書いています。 HTMLの表示を、確認できるものを作ってみましたが、少しずつ、CSSをいじっているので、私にしか役に立ちません。 まだ途中なので、随時、更新します。 見出し H1タグ H2タグ H3タグ H4タグ H5タグ H6タグ 強調など …