Goのテンプレートエンジン「templ」が便利（TinyGoでも動くよ） - kasu.log
あらすじ Go で素朴な HTML を返すアプリケーションを動かしたくなり、 Wasm に変換してデプロイすることができる Cloudflare Workers を使うことにしました。 Cloudflare Workers に Go アプリケーションをデプロイする際には、id:f_syumai さんのテンプレートがオススメです。 github.com Go + text/template まずは、素直に text/template 使ってビルドしてみます。 ❯ ls -lh ./build total 15656 -rwxr-xr-x 1 ergofriend staff 7.6M 8 8 20:12 app.wasm -rw-r--r-- 1 ergofriend staff 1.2K 8 8 20:12 shim.mjs -rw-r--r-- 1 ergofriend staff 16
Qwikの紹介 – HTMLファーストのフレームワーク | POSTD
Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 出力されるコードは速度が最適化されています。 私たちのツールで作成されたサイトは、手作業で作成されたサイトの大部分よりも高速です。 私たちはこれを心から誇りに思っています。 私たちの製品は、スピードがとても重要であるeコマースに焦点を当てています。 優れたTime to Interactiveの実現は困難 どんなにコードが最適化されていても、静的HTMLのみを提供していない限り、 eコマースサイトがPageSpeed Insightsで100点中100点のスコアを
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開
「PyScript」はJavaScriptのようにPythonコードをHTML内に記述して実行可能、Anacondaがオープンソースで公開 Pythonの主要なディストリビューション「Anaconda」などを提供しているAnaconda社は、HTML文書の中にJavaScriptと同じようにPythonのコードを記述し、実行可能にする「PyScript」をオープンソースで公開しました。 Did you hear the news from PyCon!? We are thrilled to introduce PyScript, a framework that allows users to create rich Python applications IN THE BROWSER using a mix of Python with standard HTML! Head to h
Checkboxland
Checkboxland Render anything as HTML checkboxes Overview Checkboxland is a JavaScript library for rendering anything as HTML checkboxes. You can use it to display animations, text, images, video, and arbitrary data. It also supports plugins, so you can add your own APIs. Checkboxland is dependency-free, framework-agnostic, and fun! 🙃 Why does this even exist? Here's some background. Limitations H
Content EditableでWYSIWYGエディタ作るの楽しい！ - maru source
こんにちは丸山@h13i32maruです。 僕は今、Ubie Discoveryで医療従事者向けのカルテエディタを作っています。人生で初めてContent Editableを使ってエディタを作ってるんですが、それがすごく楽しいです！というのも、エディタを作るには色々技術的な課題があります。例えば、テキストをパースするには？ASTからHTMLをビルドするには？パフォーマンスのよい更新方法は？などなど。それらの技術的な課題を解決していくのが単純に楽しいという感じです。また、車輪の再発明は極力抑えつつ、自分たちのプロダクトでやりたいことを実現できるような工夫もしています。 というわけで、今回はそんなエディタ作りで取り組んだ課題と解決策を紹介していきたいと思います。 （訳: 楽しかったので、誰かに聞いてもらいたい！） エディタの概要 メンテしやすいテキストパーサ - PEG.js メンテしやすいH
Lit
Skip the boilerplate Building on top of the Web Components standards, Lit adds just what you need to be happy and productive: reactivity, declarative templates and a handful of thoughtful features to reduce boilerplate and make your job easier. Every Lit feature is carefully designed with web platform evolution in mind. Tiny footprint, instant updates Weighing in at around 5 KB (minified and compr
Alpine.js
<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content... </span> </div> { let keys = Object.keys(steps) direction = keys.indexOf(value) > keys.indexOf(old) ? 'right' : 'left' })" > Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the mode
Introducing Astro: Ship Less JavaScript | Astro
How Astro Works Astro works a lot like a static site generator. If you have ever used Eleventy, Hugo, or Jekyll (or even a server-side web framework like Rails, Laravel, or Django) then you should feel right at home with Astro. In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML
ユーザー体験を向上！Yahoo!ニュースにおけるCore Web Vitals対応事例
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!ニュースを担当しているエンジニアの喜楽です。 2020年5月、GoogleよりWebでのユーザー体験を指標化したCore Web Vitalsが発表されました。本記事では、Yahoo!ニュースにおけるCore Web Vitals指標改善の取り組みとその効果についてご紹介します。 Core Web Vitalsとは Webページを閲覧しているときに、コンテンツの表示が遅かったり、スクロールやクリックなどの反応が悪い、レイアウトが読込中に変更され、クリックしたい要素の位置がずれてしまうなどといった経験はないでしょうか。これらはユーザー体験を低下させる一因となります。Core Web Vitalsは上記のような
react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog
CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する筆者がたどり着いた考えは、Web Componentsをそのまま使えばいいじゃんというものです。Web ComponentsはいくつかのWeb標準の総称で、特にここで重要なのはShadow DOMです。 CSS in JSが達成すべき目標の一つはスタイルのローカル化（書いたCSSを特定のコンポーネントに対してのみ適用し、他に影響を与えないこと）ですが、Shadow DOMはこの機能を備えたWeb標準ですから、これを利用することでスタイルのローカル
表示速度を飛躍的に向上させるHTML/CSS最新仕様「content-visibility」「Lazy loading」「contain」をコード付き簡単解説
これまではJavaScriptを用いて実装するしかありませんでしたが、ついにimgやiframe要素であればloading="lazy"を付与するだけで、簡単に実装できます。 <!-- 画像に適用する場合 --> <img src="pic.png" alt="画像の詳細" loading="lazy"> <!-- iframeに適用する場合 --> <iframe src="external.html" loading="lazy"></iframe>画面外では読み込みが発生しないので、必要になった時（画面内に要素が入りそうになった時）に読み込みが発生するのでパフォーマンスが向上します。 また画像についてはsrcsetを用いたレスポンシブな画像に対しても指定できますし、picture要素を用いてfallback形式でも記述できます。 <img src="normal.png" srcse
面倒な手順は不要！HTMLの記述だけで多機能なユーザー認証を実現する「Authpack」を使ってみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ごく普通の静的なWebサイトにユーザー認証機能を手軽に組み込める無料のサービスをご紹介します。 特に難しいプログラミングは必要なく、単純なHTMLの属性を付与するだけで誰でも簡単に高度な認証機能を実装できるのが大きな特徴です。 また、ログインユーザー向けのコンテンツを作成したり、自動的に画面を遷移させるなど便利な機能もたくさん盛り込まれています。HTMLの基本的な知識があれば誰でも活用できるので、Web開発にご興味ある方も含めてぜひ参考にしてみてください！ なお、paizaラーニングでは、動画で学べる「HTML/CSS入門編」の講座を公開していますので、まずHTMLの基本を学びたいという方にはこちらもおすすめです。 【 Authpack 】 ■「Authpack」の使い方 それでは、「Authpack」の基本的な使い方について具体的に見
使いやすさを重視したHTMLスクレイピングライブラリを作った - 純粋関数型雑記帳
TL:DR レポジトリ https://github.com/tanakh/easy-scraper ドキュメント 背景 このところ訳あってRustでHTMLからデータを抽出するコードを書いていたのですが、 既存のスクレイピングライブラリが（個人的には）どれもいまいち使いやすくないなあと思っていました。 HTMLから望みのデータを取り出すのはいろいろやり方があるかと思いますが、 ツリーを自力でトラバースするのはさすがにあまりにも面倒です。 近頃人気のライブラリを見てみますと、CSSセレクターで目的のノードを選択して、 その周辺のノードをたどるコードを書いて、 欲しい情報を取り出すという感じのものが多いようです。 RustにもHTMLのDOMツリーをCSSセレクターで検索して見つかったノードをイテレーターで返してくれたりする、 scraperというライブラリがあります。 例えば、<li>要素
Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発などでも十分に活用できるものだと思い、その可能性を紹介するために書きました。 「静的サイトジェネレータ」って何？ いわゆる「静的サイトジェネレータ(Static Site Generator, SSG)」は、CMS(コンテンツ管理システム)の一種です。代表的
HTML, CSS, JavaScript それぞれのロード時間が First Paint に与える影響を検証して整理する - Qiita
HTML, CSS, JavaScript それぞれのロード時間が First Paint に与える影響を検証して整理するHTMLCSSJavaScriptGo tl;dr First Paint はウェブページの何らかが描画されたタイミングのこと。これが遅いということは、初回の真っ白な状態が長いということ。 First Paint は Chrome Developer Tool の Audit で簡単に確認できる。 HTML は描画の起点になるので、ロード時間はそのまま First Paint Timing の遅延になる。 CSS は描画に必須なので ロード時間はそのまま First Paint Timing の遅延になる。 JavaScript は同期で読み込むと、ロード時間がそのまま First Paint Timing の遅延になる。 JavaScript は非同期で読み込むと、ロ
現場の Web Components
一部 ES Class の記述に誤りがありました。訂正版は Speaker Deck にアップロードしていますのでそちらをご覧ください 👉 https://speakerdeck.com/aggre/real-world-web-components https://polymer-japan.connpass.com/event/84638/ の登壇資料ですRead less
実は世界を変えるWeb Paymentsについて、グーグルのえーじさんに聞いてきた！
連載： HTML5 Conference 2017特集 (16) こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に、様々なお話を伺おうというものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、Googleのえーじさんです。 えーじさんのセッションは「ウェブのための次世代決済法」でした。 スライド資料はこちらで公開されています。 Web Paymentsは（モバイル）Webの決済体験を変える 白石: 本日は、Web Paymentsについてお聞かせください。 Web Paymentsというのは、その名の通りWeb上での支払い体験を改善するものだと思いますが、そもそもなぜWe
「やはりHTML/DOMは再発明されるべきじゃないか」に対する感想 - 余白
mizchi.hatenablog.com エモにはエモ。 わかる だいたいわかる。そもそもSPAの必須パーツであるクライアントサイドルーティングなんてブラウザ機能の再実装の極致だし、ブラウザ上でアプリケーション作るとなるとブラウザに足りてない部分はラップして、アプリケーションプラットフォームにしたてる必要がある。 Angularはアプリケーションフレームワークとして、HTMLの限界をカバーするために独自にHTMLのパーサーを積んでいる。 テンプレート構文をサポートするためでもあるが、おそらく中途半端にブラウザの機能に頼ってデータモデルからビューへの投影にノイズが含まれるよりは、 Angularという世界に閉じた一気通貫なフローを採用して、ブラウザとのコミュニーケーションを最小限にしたかったのも大きいと思う。 というか、Native ScriptとかWeb WorkerとかSSRとか、クロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - marko-js/marko: A declarative, HTML-based language that makes building web apps fun
Web制作時に便利なHTML, CSS, JavaScriptのツール、文字抽出ツールなどがまとめて利用できる -Href Tools
