Hatena Blog Tags
はてなブログ トップ
Haml
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

Haml

(ウェブ)
【はむる】

Hamlとは，簡単に正しい(X)HTMLを記述するためのマークアップ言語．
インデントとCSSセレクタを用いた記述を行うことによって，少ない行数で正しい(X)HTMLを記述することができる．
また，Ruby on RailsにおけるView Templateとしての利用を主眼にしており，以下のような主義をうたっている．

  • Markup should be beautiful（マークアップは美しくあるべき）
  • Markup should be DRY（マークアップはDRY*1であるべき）
  • Markup should be well-indented（マークアップは字下げを上手く活用すべき）
  • XHTML structure should be clear（（生成される）XHTMLはすっきりしているべき）

*1:Don't repeat yourself

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
メドピア開発者ブログ•12日前

お財布に優しいCI改善小ネタ集

こんにちは。サーバーサイドエンジニアの三村（@t_mimura）です。 主に保険薬局と患者さまを繋ぐ「かかりつけ薬局」化支援アプリ kakariのサーバーサイド開発（Ruby on Rails）を担当しています。 今回はRailsシステムのCI時間をコスト追加なしで半減した話をします。 目次 前提 対象プロジェクト CIの状況 改善結果 改善内容 前提知識: CIのキャッシュ機能 webpack buildのキャッシュを活用 RuboCopのキャッシュを活用 ESLintのキャッシュを活用 Jestのキャッシュを活用 RSpec Jobをテスト特性ごとに分割 CircleCIのリソースクラスと…

ネットで話題

もっと見る
233ブックマークHamlを3倍速くした - k0kubun's blogk0kubun.hatenablog.com
207ブックマークウノウラボ Unoh Labs: 5分で分かるHaml先日、まちつく！が正式リリースになりました。よろしければ是非携帯でアクセスして遊んでみてください。 こんにちは、ryosukeです。 ラボブログの前々回のエントリーで ruby で実装された web application framework の Sinatra が紹介されていたのですが、私もあまりのお手頃感に触発されて少しさわってみました。 そ...labs.unoh.net
174ブックマーク日本 Haml の会Haml/Sass の普及を目的としたユーザグループです。Rails 勉強会@東京の分科会のような位置付けで活動しています。略称は日本ハムです。 活動内容 Haml/Sass に関する情報交換 (Rails 勉強会@東京、または irc.freenode.net の #rails-tokyo チャンネル) 各種イベントにおける Haml/Sass の宣伝 オープンソースプロダク...haml.ursm.jp
148ブックマーク第9回　SinatraとSequel・Hamlで掲示板アプリを作る | gihyo.jpgihyo.jp
142ブックマークSlimより高速なHaml実装「Hamlit」をリリースしました - k0kubun's blogk0kubun.hatenablog.com
124ブックマークマークアッパー的 Haml入門21の手引き - Web学びfukuyama.co
123ブックマーク安いむね肉がメチャ柔らかいザンギからあげ by hamlcookpad.com
120ブックマークRails 4でHeroku Pushまでの詳細手順 [haml/bootstrap 3.0/postgresql or MySQL]morizyun.github.io
99ブックマークhaml の高速なレンダリングエンジン faml を書いた - eagletmt's blogeagletmt.hateblo.jp

関連ブログ

TMS_tech’s blog•2ヶ月前

現在の学びの状況

テックエキスパートにて ・Ruby ・RubyonRails ・HTML(haml) ・CSS(SCSS) ・JavaScript ・SQL ・AWS のことを学び実際にアプリ開発をチームでアジャイル開発という手法で行ったのが3年前。 今回、職業訓練で学習中なのが ・Java（現在進行形で基礎の練習問題を解く） ・Python（基礎学習部分は一旦終わっています） ・VBA（基礎を勉強中） ・AndroidStudio（現状：環境を整えたところです。） ※基礎（基本文法と関数や配列など） です。 個人学習として、 ・Scratchプログラミング で実際に、教科書の内容ではあるが、実際に入力し、動…

Promote my favorite artists•3ヶ月前

2023年6月21日

Rockon Social Clubさん「／ 7/14(金)19時〜 文化放送「WILD KNIGHTS」が限定復活！ ＼ #成田昭次 #高橋和也 #岡本健一 #寺岡呼人 出演！ ▼詳細 https://t.co/Mhtna559NI 番組名：文化放送「WILD KNIGHT 成田です」 番組メール：special@joqr.net 推奨ハッシュタグ：#ワイルドナイト #男闘呼組 #RockonSocialClub」https://twitter.com/rockonsocialclu/status/1671032523357585408 DEZERT SORA(4444)さん「Focus o…

株式会社ヘンリー エンジニアブログ•3ヶ月前

StorybookをReact以外のプロジェクトでも使いたい！

はじめまして。今月から株式会社ヘンリーのフロントエンドエンジニアをしている kobayang です。この記事では Storybook を React や Vue などの UI ライブラリを使っていないプロジェクトでも活用できるかも、という話をしていこうと思います。 Storybook storybook.js.org もはや説明不要な気がしますが、Storybook は UI を実装する上で便利な、UI プレビューのためのライブラリです。また、プレビューだけでなく、Jest から Story を呼び出すことで簡単にテストが書けたり、Chromatic と連携することで、VRT ができるようにな…

あまブログ•4ヶ月前

【VSCode+Prettier】Railsのコードを自動フォーマットする

この記事では、Prettier for Rubyを使って、Railsのコードを自動フォーマットする方法を紹介します。 VSCodeでファイルを保存する際に自動フォーマットできるようになります。 1. 検証環境 2. 設定手順 2-1. @prettier/plugin-rubyのインストール 2-2. gemのインストール 2-3. prettier-vscodeのインストール 2-4. rubocopと一緒に使う場合 3. フォーマット結果 1. 検証環境 Ruby：3.1.0 Rails：6.1.4.7 node：16.13.0 yarn：1.22.19 bundler：2.3.6 VSC…

DIGGLE開発者ブログ•5ヶ月前

【RubyKaigi 2023】スポンサーに当選したので弾幕シューティングゲームを作ってみた

こんにちは。DIGGLEエンジニアリングマネージャーのzakkyです。発売以来スプラトゥーン3のフェスに全敗しているので「zakkyと逆張りすれば勝てる説」が立証されつつあります。 はじめに 早速本題です。 弊社では、今年RubyKaigi 2023のPlatinum Sponsorsに初めて応募しまして、そして無事に当選することができました。 弊社以外のRubyKaigi 2023スポンサーには、本当に有名な企業が並んでおりまして、そんな有名企業に挟まれる初参加企業ということで、「何かかまさなきゃ！ 何か目をひくものを作らなくちゃ！」という事で、弾幕シューティングゲームを作りましたのでご紹介…

カニゲーム攻略日記ブログ•5ヶ月前

progate Ruby on Rails ２講座目　メモ

progate Ruby on Rails ２講座目 Progateの、Ruby on Rails 2講座目をやったメモ 気になったことをメモしたのでprogateと関係ないこともある chatGPTさんと学習中 progate Ruby on Rails ２講座目 余談 RailsとDjangoのそれぞれ適した業界 railsで投稿ページを作る場合は、postsコントローラーを使う？ postsの一覧ページはindexというアクション名が一般的？ rails generate controller posts index で生成される主なファイル railsでwordpressみたいにレイア…

rochefort's blog•6ヶ月前

lefthookでgit hooksのタイミングでlintを行う

ざっとlint系を揃えたので、pre-commit のタイミングでlintをかけるようにしてみます。 ・standardとsnazzyでjsのlint結果をeslint風にする ・stylelintでscssのlintを行う ・haml-lintでrubocopのlintをviewに対しても実行する どのライブラリを使うか 選択肢は以下のようなものがあります（他にもあるかもですが）。 ・lefthook (Github Star: 2.8k) ・Husky (Github Star: 29.9k) ・pre-commit (Github Star: 10.1k) lefthookはgo製で高速…

rochefort's blog•6ヶ月前

haml-lintでrubocopのlintをviewに対しても実行する

なんかlint色々整理したくなってきたので、続いてはhamlです。 sds/haml-lint を入れればokです。 おすすめポイントは、rubocopも見てくれます（もちろんindentなどviewに適用できないやつ以外）。 個人的には 昔記事に書いたslim-lint同様、お仕事でも使いたいやつです。 Installtaion # Gemfile gem 'haml_lint', require: false bundle install すれば良いです。 実行 ディレクトリの指定なしでも動作しますが、対象は絞っておくと良いでしょう。 あとは、必要に応じて、.haml-lint.yml を…

UUUO Tech Blog•6ヶ月前

既存のFlutterアプリからFlutter Webを立ち上げて運用してみた

ランキング参加中アプリ開発者 こんにちはウーオでエンジニア兼PdMをしている三京（t3qyo）です。 UUUOではモバイルアプリの開発言語にFlutterを採用しています。 最近そのモバイルアプリを既存のリソースを活かしながら同じリポジトリを使って（モノレポで）Webにデプロイしたので、デプロイの際の注意点や運用の感想を書きます。 デプロイしたのは以下の出品者用の管理画面です。 デプロイしたWebページ

rochefort's blog•6ヶ月前

cropper.jsを使ってActiveStorageで画像アップロード時に切り抜きを行う

ググってもあんまり出てこなかったのでメモを残しておきます。 JSは Cropper.js を利用しています。ライセンスはMITです。 こんな感じ やり方 cropper.jsを使って画像を表示し、保存ボタン押下時に切り抜くための情報をRailsに送ります。 Rails側では保存前に切り抜き処理を行い、保存するだけ。 view ライブラリ yarn add で cropperjs を入れます。 file inputを用意します Stimulusでmodalを表示する設定も入れておきます。 # show.html.haml .uploading-images.pt-3 = form_with ur…

rochefort's blog•6ヶ月前

RailsのHotwireでCSSアニメーションさせる方法（登録処理もTurbo/Stimlusで実装）

昨日の続きです。 RailsのTurboでAjaxで要素を削除したときにCSSアニメーションさせる方法2（Stimlus化） 画像の登録もTurbo/Stimulusで実施してなかったので修正してみます。 やってみる css fade-in用を追加。 .fade-in { animation: fade-in .4s linear; opacity: 1; } .fade-out { animation: fade-out .4s linear; opacity: 0; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; }…

rochefort's blog•6ヶ月前

RailsのTurboでAjaxで要素を削除したときにCSSアニメーションさせる方法

Ajaxでデータ追加・削除するのにRailsのTurbo便利ですよね。 でも、CSSアニメーションが効かなくて困ってました。 Turbo以前 image-wrapperクラス以下に画像とxボタンを配置します。 # haml .image-wrapper.position-relative = image_tag image = link_to user_image_path(user, image), remote: true, data: { method: :delete, confirm: "Can I delete it?" }, class: "delete-image-link p…