Why We believe that email is an extremely important medium for people to communicate. However, we need to stop developing emails like 2010, and rethink how email can be done in 2024 and beyond. Email development needs a revamp. A renovation. Modernized for the way we build web apps today. Getting Started React Email is designed to be incrementally adopted, so you can add it to most codebases in a
概要 4年ほどProductionで使っていたリッチテキストエディタ（Quill on Nuxt.js v2）をTiptap on Next.jsに移行しました。 既存のQuillエディタの使い勝手をTiptapで再現しつつ、改善できるところは改善しつつ、既存の4年分のリッチテキストデータが正しく編集できるようにしなければいけませんでした。 本記事では移行の具体的なプロセスを解説しようと思っていたのですが、リッチテキストエディタは前提知識があまりに多いため、前提となる知識や考え方を解説しているだけでそこそこのボリュームになりました。そこで、一旦考え方や前提知識をまとめた、という体で公開します。 本記事を読んでから各ライブラリのDocsを読んだりカスタマイズを始めたら、少しハードルが下がっていることかと思います。 対象読者の例 リッチテキストエディタに興味がある リッチテキストエディタの開発
What is it? Mail Studio is a desktop application for creating responsive emails that look great everywhere. It combines visual and code editing elegantly, and is suitable for both designers and developers. It runs on Windows, macOS and Linux. Designs are exported as standard HTML and can be imported in your email marketing platform of choice. See Features » What can it do? You can think of Mail St
先日当社のPodcast「ミツエーテックラジオ」で「リンター特集」というエピソードを公開しました。このエピソードでは、社内でよく使われているリンターを紹介しましたが、他にもWeb制作で活用できるリンターはたくさん存在しています。 今回はPodcastではあまり取り上げなかったHTMLのリンターについてご紹介します。 LintHTML 1つ目はLintHTMLです。LintHTMLはhtmllintのフォークとして作られたツールです。htmllintでチェックできる内容は全てLintHTMLでもチェックできます。 リンターでチェックできるルールは多ければ多いほどいい、というものでもないのですが、2014年から開発されていたhtmllintをもとにしていることもあり、さまざまなルールを設定できます。 他のリンターにはない特徴としては、ファイルの一部分に対して個別の設定ができることです。サイト全
「Mercari Engineering」は メルカリのエンジニアに関する情報を、 オープンに公開・共有していくためのサイトです。
最近も HTML を書く機会が多く，HTML を実装するときには「htmllint」と CircleCI を組み合わせて Lint を実行している．「htmllint」の紹介記事は前に書いてある． kakakakakku.hatenablog.com the i tag is banned Font Awesome を使って <i class="far fa-smile-wink"></i> のように絵文字を HTML に追加したら，エラーになった．「htmllint」の Lint ルールの中に tag-bans がある．今回は Font Awesome を使いたく，i タグを tag-bans から除外する必要があった． the i tag is banned i タグ以外だと，b タグと style タグも同じ Lint ルールでエラーになる． the b tag is banned
<ul> <li><label><input type="checkbox"><span>選択A</span></label></li> <li><label><input type="checkbox"><span>選択B</span></label></li> <li><label><input type="checkbox"><span>選択C</span></label></li> </ul> <ul> <li><label><input type="radio"><span>いずれかを選択</span></label></li> <li><label><input type="radio"><span>いずれかを選択</span></label></li> <li><label><input type="radio"><span>いずれかを選択</span></label></l
If there’s only one thing you to know about coding email, it’s that tables rule the day. Forget that old “separation of structure, presentation, and behavior” nonsense you learned in standards-based web design. Unlike modern web design the <table> element isn’t used just for tabular data, it’s all there is for consistent structure. External CSS doesn’t drive the styling, either; emails depend on i
HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方 作者:吉田真麻翔泳社Amazon 最近自分のプロジェクトのデザイナが、JavaScriptで実装しないといけないと思っていたことをどんどんCSSで実装していくのを見かけた。この出来事から、JSで実装したほうが良いか、デザイナにやってもらったほうが良いか、どちらが良いかを自分で判断できてないと感じたので、最近のCSS事情を知りたいと思って読んだ。サラッと流し読みするだけで、CSS3で利用できるようになったよく使うプロパティの概要を把握できたので、今の自分の知りたいことが分かって非常に良かった。 例えば以下のことを学ぶことが出来た。 reset.css, normalize.cssとはなにか beforeやafter擬似要素を使ったいろんな技
今回はHTMLメールのテスト工数を短縮するEmail Testing Serviceを紹介したいと思います。 はじめに HTMLメールと聞くと、気が重くなるエンジニアも多いのではないでしょうか。テーブルレイアウトとインラインCSSという普段と違う開発が求められますし、各メーラー、Webメールの表示対応が必須となります。 2016年になっても何かが解決するどころか、確認するデバイスだけが増え続けています。 コーディング → 配信 → サポートクライアントで表示確認 上記をひたすら繰り返し、多くの時間を消費するのを何とかしたい、そんな思いからEmail Testing Serviceを調査し、サービスの運営に取り入れました。 Email Service メールに関するサービスはたくさんあります。 作成を簡単にするためにエディターやテンプレートを提供するサービス 配信を効率よく、簡単にできるよう
う〜ん… HTMLとか英語とかぜんぜんわかりません。みなさま如何お過ごしでしょうか…(,,-_-) 英語とHTMLって同じようなものだよね。アルファベットで書いてあるし…。ﾎﾞｿ ブログは書いているものの、HTML やら CSS やらなんらぜんぜんわかっちゃいない私なんですが、ふとこんな記事を見かけまして…。 あなたのブログのHTMLの文法の綺麗さが点数としてハッキリ現れるウェブサービス「Another HTML-lint gateway」 | 和洋風KAI 赤ハンコと共に、あなたのブログのHTMLの文法が綺麗かどうかチェックしてくれます。ただ、この先生がちょースパルタで、ちょっとのミスさえもドンドン減点していくので、まさに気力と体力の勝負… なるほど… 自分のサイトのHTMLソースコードの文法を採点してくれるし、アドバイスもしてくれるらしい。 サイトのHTMLソースコードの文法を採点 で
Shipped HTML::Escape, extremely fast HTML escaping HTML::Escape is a drop out module from Text::Xslate. Text::Xslate have a pretty fast HTML escaping feature, but it's a big library. Perl mongers doesn't want to depend Text::Xslate. use HTML::Escape qw/escape_html/; escape_html("<^o^>"); It's pretty faster than HTML::Entities, thanks. Rate HTML::Entities HTML::Escape HTML::Entities 14.0/s -- -91%
追記あり Yuji Shimada / HTML-Filter-Callbacks - search.cpan.org charsbar さんにパッチを送ったら、「commit bit 付けたから自分でリリースしてちょ」って言われたので、先ほど 0.07 をリリースしました。 それはさておき、このモジュールについての情報があんまり世の中に無いようなので、いい機会なので紹介しようかと思います。 このモジュールを使えば 不要なタグの除去 url の変換 属性の追加、削除 text の置き換え などなどが簡単にできます。 似たようなモジュールとして、HTML::Scrubber というのが昔からあって、よく使われてますが、長年メンテされていなかったり*1、インターフェースがとてもわかりにくかったり*2して、今から使うのは気が引けますが、HTML::Filter::Callbacks は大変直感的
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
psgmlというのはSGMLの入力支援のために作られたlispです．当然HTML作成に活用できますし，また，XMLの作成にも対応しています．DTDを読み込んで正しく文書を作成することが出来ます． ここに書かれているのはmakeなどを使わないでインストールする方法です．自分のディレクトリ構成とconfigureファイルなどでの指定が微妙に違うし，そう簡単に修正できそうになかったので，手動で作業しました． 目標はXHTML1.0などを編集できるようにすることです．やり方を眺めれば後はどうすればいいのか分かると思います．自分，Meadowを使っているのでそれように書いていますが，作業自体はemacsenなら大丈夫だと思います．適宜読み替えてください． psgmlのダウンロード まずは本体をInformation about PSGMLからダウンロード．自分は最新の1.3.1を使っています． 解凍
もう5年以上使っているにも関わらず前々使い方を知らなかったりするemacsですが、ようやくきちんと勉強しようと言う気になったので調べてみました。 いままでも、HTMLとかCSSを書くときにもっとemacs使おうと思いつつ、テキストエディタのHTML編集モードやDreamWeaverといった分かりやすいエディタにフラフラ逃げていた訳ですが、今年はモヒカン度合いを高めようと思い、積極的に使って行こうと思います。 なぜviでないかというのはおいておいて。 という訳で、まずはHTML。 emacsでHTMLを書くためのモードはいくつかあり、 html-mode html-helper-mode psgml-mode(xml-mode or sgml-mode) nxml-mode nxhtml-mode といったあたりがよく使われているかと思います。 一つ一つ見てみましょう。 html-mo
Webサイトを制作するとき、「パフォーマンス」を気にしたことがあるだろうか？ もしまったく気にしたことがないなら、気をつけた方がいい。閲覧に時間のかかる“遅いWebサイト”はユーザーにフラストレーションを与え、閲覧をやめさせてしまう恐れがある。 下記のグラフは、「Simple-Talk」という海外のオンラインメディアで発表されたユーザー調査の結果だ。アンケートページの表示にかかる時間を意図的にコントロールし、表示時間によってユーザーが感じるフラストレーションの違いを調べたものだ。 縦軸がフラストレーション（10段階）、横軸が表示までの時間を表している。1～5秒以内にページが表示された人に比べ、ページ表示までに5秒以上かかった人は2倍以上もフラストレーションを感じている。フラストレーションがあまりに高ければ、せっかく何らかの目的を持って訪れてきたユーザーも待ち切れずにブラウザーを閉じてしまう
文字コード宣言は行いましょう(HTML) HTMLで日本語を使用する場合、そのファイルの保存方法が複数存在します。 それはいくつかのルールを使用して日本語を保存し、ブラウザがそのルールに則って読みとることで表示するためです。 このルールのことを文字の符号化方式と言います。 何故文字コードの宣言が必要なのか 保存する時の文字コードとブラウザが読みとる時に使う文字コードが違っていると文字化けが発生してしまいます。 これは一部の符号化方式を除き、そのファイルがどのような文字コードで保存されたものなのかをブラウザが判別できる確実な手段が無いために発生します。 しかし、そのHTMLファイルの作者がブラウザに対してどのような文字コードで保存したのかを明示することによってブラウザは確実に表示できるようになります。 それが文字コードの宣言です。文字コードは次のようにmetaタグを使って宣言します。 ISO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
