タグ

JavaScriptとarticleとHTMLに関するefclのブックマーク (9)

  • Popover API lands in Baseline  |  Blog  |  web.dev

    It's happening! One of the features I am most hyped about has just landed across all modern browsers and is officially a part of Baseline 2024. And this feature is the Popover API. Popover provides so many awesome primitives and developer affordances for building layered interfaces like tooltips, menus, teaching UIs, and more. Some quick highlights of popover capabilities include: Promotion to the

    efcl
    efcl 2024/05/03
    Popover APIについての紹介記事。 `popover`属性と`popovertarget`属性を使ったPopover APIの使い方について。 `<dialog>`要素と`popover`属性の違いについて
  • HTML attributes vs DOM properties

    Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol

    HTML attributes vs DOM properties
    efcl
    efcl 2024/04/25
    HTMLの属性とDOMプロパティの違いについて。 属性とプロパティの型の違い、大文字小文字の区別、Reflectionについて。 また、Preact/VueやReactなどのUIフレームワークでの扱いについてなど
  • Lightweight Javascript Framework Review (For Django Developers)

    Lightweight Javascript Framework Review (For Django Developers) Introduction Many developers are confused when they try to find a Lightweight Javascript Framework for the Django project because there are so many options. In this post, I will talk and compare lightweight javascript frameworks, and help you decide which one is the best for your Django project. If you want to: Render HTML in Django,

    Lightweight Javascript Framework Review (For Django Developers)
    efcl
    efcl 2023/11/19
    おもな記述がHTMLで完結するタイプのJavaScriptフレームワークの比較。 HTMLXやAlpineなど
  • The balance has shifted away from SPAs

    21 May The balance has shifted away from SPAs Posted May 21, 2022 by Nolan Lawson in Web. Tagged: spas. 24 Comments There’s a feeling in the air. A zeitgeist. SPAs are no longer the cool kids they once were 10 years ago. Hip new frameworks like Astro, Qwik, and Elder.js are touting their MPA capabilities with “0kB JavaScript by default.” Blog posts are making the rounds listing all the challenges

    The balance has shifted away from SPAs
    efcl
    efcl 2022/06/01
    クライアントサイドルーティングを扱うものとしてのSPAは、ページ移動の問題がブラウザ側で解決されてきているので、ナビゲーション問題を解決するためだけにSPAである必要性はなるなるのではという話。 ブラウザ側のPa
  • Form Validation Using JavaScript's Constraint Validation API

    Form validation is one of the primary reasons to use client-side JavaScript. It can prevent user entry errors before your app attempts to submit data to the server. But… client-side validation is not a substitute for server-side validation! Always check incoming user data on the server. Not every request will come from a browser nor will every browser run validation code. Client-side validation is

    Form Validation Using JavaScript's Constraint Validation API
    efcl
    efcl 2022/01/17
    FormのHTML要素、CSS、JavaScriptでのバリデーションについての記事。
  • crossorigin 属性の仕様を読み解く

    記事では HTML タグに指定可能な crossorigin 属性について仕様を参照しながら詳しく解説します。crossorigin 属性は複数の意味を表しており、またそれを指定するタグの他の属性値によって振る舞いが変わってしまうことから、その挙動を正確に理解するのがなかなか難しい属性です。 HTML 仕様は日々進化しています。記事で説明している内容は記事執筆時点のものであり、閲覧時点では古くなっている可能性があります。正確な情報を知りたい方は必ず最新の仕様を確認するようお願いします。 要点だけを知りたい方は最後の「まとめ」を読んでください。 目次 crossorigin 属性はどこで使われている? crossorigin 属性は何を意味するのか? request mode credentials mode crossorigin 属性の意味のまとめ crossorigin 属性の振る

    crossorigin 属性の仕様を読み解く
    efcl
    efcl 2021/01/11
    CORSに関するrequest modeとcredentials modeの振る舞いを指定する`crossorigin`属性について。 `<img>`, `<script>`, `<link rel=preconnect>`における`crossorigin`属性の指定による振る舞いの解説。 Fetch APIでの表現方法について。
  • X3D: Declarative 3D for the Modern Web

    Introduction Modern web technologies enable developers to create clean, yet visually rich, user experiences which are widely supported as standard by all of the major browsers. So, how do you actually go about writing standards-based visualisations for the web…? And what support is there exactly for 3D graphics? Let’s start by reviewing the two main supported approaches in the HTML standard: SVG a

    X3D: Declarative 3D for the Modern Web
    efcl
    efcl 2019/09/17
    宣言的な3D表現を行うX3Dという仕様とX3DOMという実装について。 SVGのようにHTML中にタグを書くことで3D表示を行う
  • Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types  |  Articles  |  web.dev

    DOM-based cross-site scripting (DOM XSS) happens when data from a user-controlled source (like a username, or a redirect URL taken from the URL fragment) reaches a sink, which is a function like eval() or a property setter like .innerHTML that can execute arbitrary JavaScript code. DOM XSS is one of the most common web security vulnerabilities, and it's common for dev teams to accidentally introdu

    efcl
    efcl 2019/02/16
    Chrome 73でTrusted Typesがフラグ付きで実装され、76までOrigin Trialとして試せる。 TrustTypesはXSSのsinkとなる部分をポリシーでチェックする。 ポリシーに一致しない場合はエラーに落とすことで回避するAPIと仕組み
  • LINE BLOGアプリ開発で contenteditable と戦った話

    こんにちは、LINE Fukuoka の tarunon です。LINE BLOG iOSのリリースまで、クライアントとエディタの開発を担当していました。昨年11月に、LINE BLOG は一般開放と、iOS/Androidクライアントの公開を行いました。ほぼ1年がかりの開発だったのですが、クライアント側で最も大変だったのがエディタの開発でした。この記事では LINE BLOG のエディタの根幹を支えている Workaround について解説します。普段は Swift を書いていて、ほぼその話しかしていないのですが、今回は HTMLJavaScript の話になります。 LINE BLOG はこういったサービスです。 LINE BLOG - 芸能人・有名人ブログ LINE BLOGエディタはWebブラウザの上で動作しています。開発は iOS/Android 共通のソースコードで、 i

    LINE BLOGアプリ開発で contenteditable と戦った話
    efcl
    efcl 2017/04/27
    contenteditableの問題とそれを回避するワークアラウンドについて。 また、contenteditableにおけるDOM Treeとカーソルの位置についての解説
  • 1