LightNews — News, ranked by scholars

Random MDN

@random-mdn.bsky.social

🦖 Random MDN: HTMLObjectElement: setCustomValidity() m… 🦖

https://developer.mozilla.org/en-US/docs/Web/API/HTMLObjectElement/setCustomValidity

The setCustomValidity() method of the HTMLObjectElement interface sets a custom validity message for the element.

#webdev

HTMLObjectElement: setCustomValidity() m…

The setCustomValidity() method of the HTMLObjectElement interface sets a custom validity message for the element.

developer.mozilla.org

September 28, 2025 at 12:37 PM

Jake Lazaroff

@jakelazaroff.com

crazy thing is that you *can* avoid all that in react as well. at my job i wrote form validation that uses uncontrolled inputs and the native HTML form validation API — `invalid` events, setCustomValidity, etc. the crap is self-imposed!

April 6, 2026 at 1:01 PM

Random MDN

@random-mdn.bsky.social

🦖 Random MDN: HTMLInputElement: setCustomValidity() me… 🦖

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity

The HTMLInputElement.setCustomValidity() method sets a custom validity message for the element.

#webdev

HTMLInputElement: setCustomValidity() me…

The HTMLInputElement.setCustomValidity() method sets a custom validity message for the element.

developer.mozilla.org

January 24, 2026 at 1:51 AM

Yawar Amin

@yawaramin.bsky.social

Yes...this is why even React, an elegant abstraction, breaks down at the edge of the DOM...why couldn't React elements automatically proxy the imperative methods like .focus() and .setCustomValidity() and handle the ref stuff internally? Very mysterious.

July 19, 2026 at 3:22 PM

David Myers

@david.fyi

Anyone out there writing custom form validations with modern browser APIs? Specifically looking into things like using ValidityState, the <output> element, setCustomValidity, :user-valid, etc.

June 21, 2025 at 2:57 AM

midudev · Miguel Ángel Durán

@midu.dev

¿Sabías que puedes hacer esto en JavaScript?
Valida formularios con atributos HTML...

Y personaliza los mensajes con setCustomValidity.
Sin bibliotecas y soporte en todos los navegadores:

Código HTML y JavaScript para validar fomrularios y cambiar los mensajes por defecto:

<form>
<label>
Nombre: <input id="name-input" name="name" required minlength="5">
</label>
<button>Enviar</button>
</form>

<script>
const name = document.querySelector("#name-input")
const form = document.querySelector("form")

name.addEventListener("input", () => {
let validation = ''

if (name.validity.valueMissing) {
validation = "Este campo es obligatorio."
} else if (name.validity.tooShort) {
validation = "Nombre demasiado corto"
}

name.setCustomValidity(validation)
})

form.addEventListener("submit", (event) => {
if (!name.checkValidity()) event.preventDefault()
})
</script>

December 23, 2025 at 2:58 PM

Pablo Lara H.

@pablolarah.bsky.social

🔴 HTML Form Validation is heavily underused
by @everdimension
#form #formValidation #webdev #setCustomValidity #API

expressionstatement.com/html-form-va...

White text on red background:
HTML Form Validation is heavily underused

November 5, 2024 at 3:33 PM

Pyxofy

@pyxofy.bsky.social

Customizing HTML Form Validation
pyxo.me/d1c666 #pyxofy

Customizing HTML Form Validation

Learn how to use HTML form element properties like validity, setCustomValidity, and reportValidity to show HTML5 errors.

pyxo.me

January 31, 2025 at 3:03 AM

Infixer

@infixer.bsky.social

OpneUIからたどり着いた
github.com/openui/open-...

`customvalidity` attribute for form-associated elements · Issue #1428 · openui/open-ui

The setCustomValidity() method is the most powerful primitive in HTML's constraint validation API, yet it is heavily underused in practice, primarily because it has no declarative attribute equival...

github.com

April 1, 2026 at 9:50 AM

Infixer

@infixer.bsky.social

良さそうに見える
github.com/WICG/proposa...

`customvalidity` attribute for form-associated elements · Issue #276 · WICG/proposals

Introduction HTML's constraint validation API includes setCustomValidity(), a method available on all form-associated elements that allows developers to mark an element as invalid with a custom mes...

github.com

April 1, 2026 at 9:50 AM

Connor McDonald on Database and SQL

@connormcd.bsky.social

Learned about "setCustomValidity" in #orclapex today. This data validation overlord is happy :-) #AUSOUG_CONNECT2018

December 2, 2024 at 6:04 PM

Cory LaViska

@cory.laviska.com

There seem to be two distinct needs: what we have now (one at a time tooltips plus the ability to style them) and displaying the errors inline all at once.

Customizing the (plain text) message is easy through setCustomValidity().

February 16, 2025 at 12:15 PM

azu

@azu.bsky.social

ReactとsetCustomValidityを使ったフォームのバリデーション "ほぼJSなしで完璧なReactフォームをつくる" https://zenn.dev/mylifeasjosh/articles/7cc0528fe61778 #React #article

April 30, 2024 at 2:57 PM

Teddy Matayoshi

@teddymatayoshi.bsky.social

Customizing HTML Form Validation
pyxo.me/d1c666 #pyxofy

Customizing HTML Form Validation

Learn how to use HTML form element properties like validity, setCustomValidity, and reportValidity to show HTML5 errors.

pyxo.me

January 31, 2025 at 3:02 AM

Random MDN

@random-mdn.bsky.social

🦖 Random MDN: HTMLTextAreaElement: setCustomValidity()… 🦖

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity

The setCustomValidity() method of the HTMLTextAreaElement interface sets the custom validity message for the

element. Use the empty…<br><br><a href="/hashtag/webdev" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#webdev</a></div>

<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity" target="_blank" rel="noopener" class="block mt-2 border rounded overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link">
            <img src="https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:he3pf4v4t2rg6isjdn4ghtla/bafkreifhaosuvbdunzjlprydnctgabbay2cjslrtjlhg3gtzdkniii4aou" class="w-full h-40 object-cover" loading="lazy">
          <div class="p-2">
            <div class="text-sm font-semibold truncate">HTMLTextAreaElement: setCustomValidity()…</div>
            <div class="text-xs text-gray-500 truncate">The setCustomValidity() method of the HTMLTextAreaElement interface sets the custom validity message for the <textarea> element. Use the empty…</div>
          </div>
          <div class="border-t px-2 py-2 text-sm text-gray-600 flex items-center gap-2">
            <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 0 20"/><path d="M12 2a15.3 15.3 0 0 0 0 20"/></svg>
            <span class="truncate">developer.mozilla.org</span>
          </div>
        </a>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>October 17, 2025 at 6:27 PM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:he3pf4v4t2rg6isjdn4ghtla/app.bsky.feed.post/3m3fvlbrvhx2d">
            🦖 Random MDN: HTMLTextAreaElement: setCustomValidity()… 🦖<br><br><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link" target="_blank" rel="noopener" data-link="bsky">https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity</a><br><br>The setCustomValidity() method of the HTMLTextAreaElement interface sets the custom validity message for the <textarea> element. Use the empty…<br><br><a href="/hashtag/webdev" class="hover:underline text-blue-600 dark:text-sky-400 no-card-link">#webdev</a>
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:he3pf4v4t2rg6isjdn4ghtla/app.bsky.feed.post/3m3fvlbrvhx2d"
                  data-bluesky-interactions-reply-cid-param="bafyreiglei5zzzvp26yjl4vyoh24k6ofodjfcnsxr4q2ksxk66oyl2dhzm"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:he3pf4v4t2rg6isjdn4ghtla/app.bsky.feed.post/3m3fvlbrvhx2d"
                  data-bluesky-interactions-reply-root-cid-param="bafyreiglei5zzzvp26yjl4vyoh24k6ofodjfcnsxr4q2ksxk66oyl2dhzm"
                  data-bluesky-interactions-reply-author-name-param="Random MDN"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:he3pf4v4t2rg6isjdn4ghtla/bafkreidz57e6odlsnnhfy4stkdt35no6erzzxkyryndaak2wyheemrebvy"
                  data-bluesky-interactions-post-path-param="/bsky/random-mdn.bsky.social/post/3m3fvlbrvhx2d"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:he3pf4v4t2rg6isjdn4ghtla/app.bsky.feed.post/3m3fvlbrvhx2d"
               data-bluesky-repost-menu-cid-value="bafyreiglei5zzzvp26yjl4vyoh24k6ofodjfcnsxr4q2ksxk66oyl2dhzm"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="random-mdn.bsky.social"
               data-bluesky-repost-menu-post-text-value="🦖 Random MDN: HTMLTextAreaElement: setCustomValidity()… 🦖

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity

The setCustomValidity() method of the HTMLTextAreaElement interface sets the custom validity message for the <textarea> element. Use the empty…

#webdev"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:he3pf4v4t2rg6isjdn4ghtla/app.bsky.feed.post/3m3fvlbrvhx2d"
                  data-bluesky-interactions-cid-param="bafyreiglei5zzzvp26yjl4vyoh24k6ofodjfcnsxr4q2ksxk66oyl2dhzm"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/random-mdn.bsky.social/post/3m3fvlbrvhx2d"
                  data-share-title-value="Random MDN on LightNews"
                  data-share-text-value="🦖 Random MDN: HTMLTextAreaElement: setCustomValidity()… 🦖 https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomVali…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="🦖 Random MDN: HTMLTextAreaElement: setCustomValidity()… 🦖

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity

The setCustomValidity() method of the HTMLTextAreaElement interface sets the custom validity message for the <textarea> element. Use the empty…

#webdev"
               data-bluesky-options-author-handle-value="random-mdn.bsky.social"
               data-bluesky-options-author-did-value="did:plc:he3pf4v4t2rg6isjdn4ghtla"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

<div class="w-full border-y sm:border bg-white dark:bg-[#0C1220] bluesky-list-card digest-card card-clickable cursor-pointer group" data-href="/bsky/hacker-news-jp.bsky.social/post/3l7nkgidjzr2e" role="link" tabindex="0" data-card-type="bsky-post" onclick="if(!event.target.closest('.no-card-link')){ window.location = this.dataset.href }" onkeydown="if((event.key==='Enter' || event.key===' ') && !event.target.closest('.no-card-link')){ window.location = this.dataset.href }">
  <div class="px-4 py-3">
  <div class="flex items-start gap-4">
    <div class="relative w-10 self-stretch flex justify-center no-card-link avatar-column-no-nav" style="min-height:40px; align-self:stretch" onclick="event.stopPropagation(); event.stopImmediatePropagation(); return false;" onkeydown="if(event.key==='Enter' || event.key===' '){ event.stopPropagation(); event.stopImmediatePropagation(); return false; }">
          <a href="/author?bsky_handle=hacker-news-jp.bsky.social" class="no-card-link inline-block flex-shrink-0" aria-label="Hacker News JP" style="align-self: flex-start;">
            <img src="https://cdn.bsky.app/img/avatar/plain/did:plc:apeaukvxm3yedgqw5zcf5pwc/bafkreicucvujxk4wj66gcvl6nzuy6glbaj5z53gqkib52dt6y72fdrrrsm" alt="hacker-news-jp.bsky.social" class="w-10 h-10 rounded-full relative z-10" loading="lazy">
          </a>
    </div>
    <div class="flex-1 min-w-0 -mt-0.5">
          <div>
            <div class="text-[1.1rem] sm:text-[1.15rem] font-semibold text-black flex items-center gap-1">
                <a href="/author?bsky_handle=hacker-news-jp.bsky.social" class="truncate hover:underline text-black no-card-link">Hacker News JP</a>
            </div>
              <div class="text-gray-500 text-sm leading-4 -mt-0.5 truncate">
                <a href="/author?bsky_handle=hacker-news-jp.bsky.social" class="hover:underline text-gray-500 no-card-link">@hacker-news-jp.bsky.social</a>
              </div>
          </div>
          <div class="mt-3 text-[1.2rem] leading-7 break-words text-gray-800 w-[calc(100%+3.5rem)] -ml-[3.5rem]">💡 Summary by GPT3: <br><br>この記事では、HTMLフォームの検証メカニズムの未活用について取り上げ、属性、メソッド、プロパティを使用して入力フィールドに制約を追加するさまざまな方法を探求しています。また、命令型のsetCustomValidity APIの制約と、custom-validity属性を使用した宣言型アプローチを提案しています。記事では、複雑な検証シナリオの例も提供し、custom-validity属性がフォームの検証ロジックを簡素化する方法を示しています。</div>

<div class="mt-3 text-xs text-gray-500 flex items-center gap-2 whitespace-nowrap overflow-hidden w-[calc(100%+3.5rem)] -ml-[3.5rem]">
            <span>October 29, 2024 at 11:43 AM</span>
          </div>
          <div class="border-t my-2 w-[calc(100%+3.5rem)] -ml-[3.5rem]"></div>

<div class="mt-3 flex items-center justify-between text-gray-600 text-sm w-[calc(100%+3.5rem)] -ml-[3.5rem] no-card-link" data-controller="bluesky-interactions">
        <div class="flex items-center justify-between w-[300px] pr-4 no-card-link">
          <div class="hidden" data-post-text-uri="at://did:plc:apeaukvxm3yedgqw5zcf5pwc/app.bsky.feed.post/3l7nkgidjzr2e">
            💡 Summary by GPT3: <br><br>この記事では、HTMLフォームの検証メカニズムの未活用について取り上げ、属性、メソッド、プロパティを使用して入力フィールドに制約を追加するさまざまな方法を探求しています。また、命令型のsetCustomValidity APIの制約と、custom-validity属性を使用した宣言型アプローチを提案しています。記事では、複雑な検証シナリオの例も提供し、custom-validity属性がフォームの検証ロジックを簡素化する方法を示しています。
          </div>
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link" 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#reply" 
                  data-bluesky-interactions-reply-uri-param="at://did:plc:apeaukvxm3yedgqw5zcf5pwc/app.bsky.feed.post/3l7nkgidjzr2e"
                  data-bluesky-interactions-reply-cid-param="bafyreiealp2ypacrf3ubtsnlogma2z7ilnyovgvmzvnibzmpf2hkoyous4"
                  data-bluesky-interactions-reply-root-uri-param="at://did:plc:apeaukvxm3yedgqw5zcf5pwc/app.bsky.feed.post/3l7nkftbewv2p"
                  data-bluesky-interactions-reply-root-cid-param="bafyreibmat66viee6qjsowgc6blyhnfxpeajtmzzfic6sgzmuhjnxqnqwi"
                  data-bluesky-interactions-reply-author-name-param="Hacker News JP"
                  data-bluesky-interactions-reply-author-avatar-param="https://cdn.bsky.app/img/avatar/plain/did:plc:apeaukvxm3yedgqw5zcf5pwc/bafkreicucvujxk4wj66gcvl6nzuy6glbaj5z53gqkib52dt6y72fdrrrsm"
                  data-bluesky-interactions-post-path-param="/bsky/hacker-news-jp.bsky.social/post/3l7nkgidjzr2e"
                  title="Reply" 
                  style="pointer-events: auto; cursor: pointer; z-index: 10; position: relative;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a4 4 0 0 1-4 4H7l-4 4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z"/></svg>
            
          </button>
          
          <div class="relative no-card-link"
               data-controller="bluesky-repost-menu"
               data-bluesky-repost-menu-uri-value="at://did:plc:apeaukvxm3yedgqw5zcf5pwc/app.bsky.feed.post/3l7nkgidjzr2e"
               data-bluesky-repost-menu-cid-value="bafyreiealp2ypacrf3ubtsnlogma2z7ilnyovgvmzvnibzmpf2hkoyous4"
               data-bluesky-repost-menu-repost-uri-value=""
               data-bluesky-repost-menu-is-reposted-value="false"
               data-bluesky-repost-menu-author-handle-value="hacker-news-jp.bsky.social"
               data-bluesky-repost-menu-post-text-value="💡 Summary by GPT3:

この記事では、HTMLフォームの検証メカニズムの未活用について取り上げ、属性、メソッド、プロパティを使用して入力フィールドに制約を追加するさまざまな方法を探求しています。また、命令型のsetCustomValidity APIの制約と、custom-validity属性を使用した宣言型アプローチを提案しています。記事では、複雑な検証シナリオの例も提供し、custom-validity属性がフォームの検証ロジックを簡素化する方法を示しています。"
               style="pointer-events:auto; cursor:pointer;">
            <button type="button" 
                    class="flex items-center gap-1 hover:text-black " 
                    data-action="click->bluesky-repost-menu#toggleMenu"
                    data-bluesky-interactions-target="repostButton"
                    title="Repost">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
              
            </button>
            <div class="hidden absolute left-0 bottom-full mb-3 w-48 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden z-50" data-bluesky-repost-menu-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left hidden" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#undoRepost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Undo repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left " data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#repost">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>
                <span>Repost</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-repost-menu#quote">
                <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                <span>Quote post</span>
              </button>
            </div>
          </div>
          
          <button type="button" 
                  class="flex items-center gap-1 hover:text-black no-card-link " 
                  data-action="click->bluesky-auth#requireConnection click->bluesky-interactions#toggleLike"
                  data-bluesky-interactions-uri-param="at://did:plc:apeaukvxm3yedgqw5zcf5pwc/app.bsky.feed.post/3l7nkgidjzr2e"
                  data-bluesky-interactions-cid-param="bafyreiealp2ypacrf3ubtsnlogma2z7ilnyovgvmzvnibzmpf2hkoyous4"
                  data-bluesky-interactions-like-uri-param=""
                  data-bluesky-interactions-target="likeButton"
                  title="Like">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 1 0-7.78 7.78L12 21.23l8.84-8.84a5.5 5.5 0 0 0 0-7.78z"/></svg>
            
          </button>
          
        </div>
        <div class="flex items-center gap-4 text-gray-500">
          <button type="button"
                  class="flex items-center hover:text-black no-card-link"
                  data-controller="share"
                  data-share-url-value="https://www.lightnews.app/bsky/hacker-news-jp.bsky.social/post/3l7nkgidjzr2e"
                  data-share-title-value="Hacker News JP on LightNews"
                  data-share-text-value="💡 Summary by GPT3: この記事では、HTMLフォームの検証メカニズムの未活用について取り上げ、属性、メソッド、プロパティを使用して入力フィールドに制約を追加するさまざまな方法を探求しています。また、命令型のsetCustomValidity APIの制約と、cus…"
                  data-action="click->share#shareSystem"
                  title="Share"
                  style="pointer-events:auto; cursor:pointer;">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 12v7a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7"/><polyline points="16 6 12 2 8 6"/><line x1="12" y1="2" x2="12" y2="15"/></svg>
          </button>
          <div class="relative no-card-link"
               data-controller="bluesky-options"
               data-bluesky-options-text-value="💡 Summary by GPT3:

この記事では、HTMLフォームの検証メカニズムの未活用について取り上げ、属性、メソッド、プロパティを使用して入力フィールドに制約を追加するさまざまな方法を探求しています。また、命令型のsetCustomValidity APIの制約と、custom-validity属性を使用した宣言型アプローチを提案しています。記事では、複雑な検証シナリオの例も提供し、custom-validity属性がフォームの検証ロジックを簡素化する方法を示しています。"
               data-bluesky-options-author-handle-value="hacker-news-jp.bsky.social"
               data-bluesky-options-author-did-value="did:plc:apeaukvxm3yedgqw5zcf5pwc"
               data-bluesky-options-muted-value="false"
               data-bluesky-options-blocking-uri-value=""
               data-bluesky-options-own-value="false"
               data-bluesky-options-delete-url-value=""
               data-bluesky-options-post-element-selector-value='[data-card-type="bsky-post"]'>
            <button type="button" class="inline-flex items-center" data-action="click->bluesky-options#toggleMenu" aria-label="Post options">
            <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
            </button>
            <div class="hidden absolute right-0 bottom-full mb-3 w-60 rounded-2xl border border-white/10 bg-[#1C2333] text-white shadow-xl overflow-hidden" data-bluesky-options-target="menu">
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#translate">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4h16v16H4z"/><path d="M9 8h6"/><path d="M9 12h6"/><path d="M9 16h6"/></svg>
                </span>
                <span>Translate</span>
              </button>
              <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-options#copyText">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="8" y="8" width="12" height="12" rx="2"/><path d="M16 8V6a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2v8"/></svg>
                </span>
                <span>Copy post text</span>
              </button>
              <div class="border-t border-white/10"></div>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#muteAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 9v6h3l5 5V4L7 9H4z"/><line x1="16" y1="9" x2="19" y2="12"/><line x1="19" y1="12" x2="16" y2="15"/></svg>
                </span>
                <span data-bluesky-options-target="muteLabel">Mute account</span>
              </button>
        <button type="button" class="w-full px-4 py-3 flex items-center gap-3 text-sm hover:bg-[#273045] text-left" data-action="click->bluesky-auth#requireConnection click->bluesky-options#blockAccount">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-white/10">
                  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h18v18H3z"/><path d="M3 3l18 18"/></svg>
                </span>
                <span data-bluesky-options-target="blockLabel">Block account</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
</div>

</div>

</div>
  </div>
</div>

</main>

</div>
      <div class="hidden md:block"></div>
    </div>
    
<div id="cta-footer" class="md:hidden fixed bottom-0 left-0 right-0 z-40 bg-white dark:bg-black border-t border-gray-200 dark:border-gray-700">
          <div class="px-2 pt-3 pb-5">
      <div class="flex items-center justify-between gap-3">
        
        <div class="flex items-center gap-2 flex-1 min-w-0">
          <a class="inline-flex items-center gap-2" aria-label="LightNews" data-apply-edition="1" href="/">
              <img alt="LightNews" class="logo-light h-12 w-12 flex-shrink-0" src="/assets/brands/lightnews/logo-light-333069a8.png" />
              <img alt="LightNews" class="logo-dark h-12 w-12 flex-shrink-0" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" />
            <span class="text-base font-semibold text-gray-900 dark:text-white truncate brand-text">LightNews</span>
</a>        </div>
        
        <div class="flex items-center gap-2 flex-shrink-0">
          <button type="button" data-action="click->auth-modal#openSignup" class="btn btn-primary btn-sm whitespace-nowrap">Create account</button>
          <button type="button" data-action="click->auth-modal#openSignin" class="btn btn-light btn-sm whitespace-nowrap">Sign in</button>
        </div>
      </div>
    </div>
</div>

<style>
  @media (max-width: 767px) {
    body {
      padding-bottom: 6.5rem;
    }
  }
  /* Hard guarantee: footer is visible on mobile widths */
  @media (max-width: 1023px) {
    #cta-footer { display: block !important; }
  }
</style>

<div id="signin-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signinModal">
  <div class="flex min-h-screen items-center justify-center p-4">
    
    <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>
    
    
    <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">
      
      <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

<div class="flex justify-center mb-6">
        <img alt="LightNews" class="logo-light h-12 w-12" src="/assets/brands/lightnews/logo-light-333069a8.png" />
        <img alt="LightNews" class="logo-dark h-12 w-12" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" />
      </div>

<h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign in to LightNews</h2>

<div class="space-y-3 mb-6">
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/google/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          </svg>
          Continue with Google
</a>
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/apple/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
          </svg>
          Continue with Apple
</a>
        
        <button type="button"
                class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600"
                data-action="click->auth-modal#close click->bluesky-auth#handleSignIn">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/>
          </svg>
          Continue with Bluesky
        </button>
      </div>

<div class="relative my-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="bg-white dark:bg-black px-3 text-sm text-gray-600 dark:text-gray-300">or</span>
        </div>
      </div>

<form class="space-y-4" action="/auth/email/signin" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="31hbOCmuSJSUIPOZg6o_-6kfxHrkmmY3x2-mSgc768_Nr43gAvFgVckyNVayuYY6ibG7SWERNerhGR-DntaxTA" autocomplete="off" />
        <div>
          <label for="signin-email" class="block text-black dark:text-white font-semibold text-sm mb-2">Email address</label>
          <input
            type="email"
            name="email"
            id="signin-email"
            placeholder="name@domain.com"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signin-password" class="block text-black dark:text-white font-semibold text-sm mb-2">Password</label>
          <input
            type="password"
            name="password"
            id="signin-password"
            placeholder="Your password"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<button type="submit" class="w-full btn btn-primary py-3 font-semibold">
          Sign in
        </button>
</form>
      <div class="mt-3 text-center">
        <a class="text-sm text-blue-600 dark:text-blue-400 hover:underline" href="/auth/email/forgot_password">Forgot password?</a>
      </div>

<div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-400 mb-2">Don't have an account?</p>
        <button data-action="click->auth-modal#switchToSignup" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors">
          Sign up for LightNews
        </button>
      </div>
    </div>
  </div>
</div>

<div id="signup-modal" class="hidden fixed inset-0 z-50 overflow-y-auto" data-auth-modal-target="signupModal">
  <div class="flex min-h-screen items-center justify-center p-4">
    
    <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->auth-modal#close"></div>
    
    
    <div class="relative bg-white dark:bg-black rounded-2xl w-full max-w-md p-8 shadow-2xl">
      
      <button data-action="click->auth-modal#close" class="absolute top-4 right-4 text-gray-400 hover:text-white transition-colors">
        <svg viewBox="0 0 24 24" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>

<div class="flex justify-center mb-6">
        <img alt="LightNews" class="logo-light h-12 w-12" src="/assets/brands/lightnews/logo-light-333069a8.png" />
        <img alt="LightNews" class="logo-dark h-12 w-12" src="/assets/brands/lightnews/logo-dark-ef2a5b66.png" />
      </div>

<h2 class="text-black dark:text-white text-3xl font-bold text-center mb-6">Sign up to start reading</h2>

<div class="space-y-3 mb-6">
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/google/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/>
            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/>
            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/>
            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/>
          </svg>
          Sign up with Google
</a>
        
        <a class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600" href="/auth/apple/start">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
          </svg>
          Sign up with Apple
</a>
        
        <button type="button"
                class="w-full flex items-center justify-center gap-3 px-6 py-3 bg-transparent hover:bg-black/5 dark:hover:bg-white/10 text-black dark:text-white font-semibold rounded transition-colors border border-gray-300 dark:border-gray-600"
                data-action="click->auth-modal#close click->bluesky-auth#handleCreateAccount">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M12 10.8c-1.087-2.114-4.046-6.053-6.798-7.995C2.566.944 1.561 1.266.902 1.565.139 1.908 0 3.08 0 3.768c0 .69.378 5.65.624 6.479.815 2.736 3.713 3.66 6.383 3.364.136-.02.275-.038.415-.056-.138.022-.276.04-.415.056-3.912.58-7.387 2.005-2.83 7.078 5.013 5.19 6.87-1.113 7.823-4.308.953 3.195 2.05 9.271 7.733 4.308 4.267-4.308 1.172-6.498-2.74-7.078a8.741 8.741 0 01-.415-.056c.14.018.279.036.415.056 2.67.297 5.568-.628 6.383-3.364.246-.828.624-5.79.624-6.478 0-.69-.139-1.861-.902-2.206-.659-.298-1.664-.62-4.3 1.24C16.046 4.748 13.087 8.687 12 10.8z" fill="#1185fe"/>
          </svg>
          Sign up with Bluesky
        </button>
      </div>

<div class="relative my-6">
        <div class="absolute inset-0 flex items-center">
          <div class="w-full border-t border-gray-300 dark:border-gray-700"></div>
        </div>
        <div class="relative flex justify-center">
          <span class="bg-white dark:bg-black px-3 text-sm text-gray-600 dark:text-gray-300">or</span>
        </div>
      </div>

<form class="space-y-4" action="/auth/email/signup" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="uaSCgh8PwpjJeHsgH6fP5Syrqi-WnyrVHm3_JX-_Zi9gYuX81EV-JTG1xD1ih7dqFC6IllMFdKFhdYXN75brnA" autocomplete="off" />
        <div>
          <label for="signup-name" class="block text-black dark:text-white font-semibold text-sm mb-2">Name</label>
          <input
            type="text"
            name="display_name"
            id="signup-name"
            placeholder="Your name"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signup-email" class="block text-black dark:text-white font-semibold text-sm mb-2">Email address</label>
          <input
            type="email"
            name="email"
            id="signup-email"
            placeholder="name@domain.com"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signup-password" class="block text-black dark:text-white font-semibold text-sm mb-2">Password</label>
          <input
            type="password"
            name="password"
            id="signup-password"
            placeholder="At least 8 characters"
            minlength="8"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<div>
          <label for="signup-password-confirmation" class="block text-black dark:text-white font-semibold text-sm mb-2">Confirm password</label>
          <input
            type="password"
            name="password_confirmation"
            id="signup-password-confirmation"
            placeholder="Repeat your password"
            minlength="8"
            required
            class="w-full px-4 py-3 bg-gray-50 dark:bg-gray-900 border border-gray-300 dark:border-gray-700 rounded text-black dark:text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent"
          />
        </div>

<button type="submit" class="w-full btn btn-primary py-3 font-semibold">
          Create account
        </button>
</form>
      
      <div class="mt-8 text-center">
        <p class="text-gray-600 dark:text-gray-400 mb-2">Already have an account?</p>
        <button data-action="click->auth-modal#switchToSignin" class="text-blue-600 dark:text-white font-semibold underline hover:text-blue-500 transition-colors">
          Sign in
        </button>
      </div>
    </div>
  </div>
</div>

<div data-controller="modal" data-reply-modal="true" id="global-reply-modal"
     data-viewer-avatar-url=""
     data-viewer-display-name="">
  <div class="hidden fixed inset-0 z-50 overflow-y-auto" data-modal-target="panel" data-viewer-avatar-url="" data-viewer-display-name="">
    <div class="flex min-h-screen items-start justify-center pt-4 md:pt-20">
      
      <div class="fixed inset-0 bg-black/80 transition-opacity" data-action="click->modal#close"></div>

<div class="relative bg-[#1e3a5f] rounded-2xl w-full max-w-xl mx-4 shadow-2xl" data-action="click->modal#stop">
        
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-600">
          <button type="button" class="text-blue-400 text-base font-medium" data-action="click->modal#close">Cancel</button>
          <button type="button" 
                  id="modal-reply-submit"
                  class="px-5 py-1.5 bg-blue-600 text-white rounded-full font-semibold hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
            Reply
          </button>
        </div>

<div class="px-4 py-3 border-b border-gray-600 modal-reply-preview">
          <div class="flex items-start gap-3">
            <img src="" alt="" class="modal-reply-author-avatar w-10 h-10 rounded-full flex-shrink-0 hidden">
            <div class="modal-reply-author-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0"></div>
            <div class="flex-1 min-w-0">
              <div class="font-semibold text-white text-base modal-reply-author-name"> </div>
              <div class="text-gray-300 text-sm line-clamp-3 modal-reply-post-text"> </div>
            </div>
          </div>
        </div>

<div class="px-4 py-3">
          <div class="flex items-start gap-3">
            <img src="" alt="You" class="modal-viewer-avatar w-10 h-10 rounded-full flex-shrink-0 hidden">
            <div class="modal-viewer-avatar-placeholder w-10 h-10 rounded-full bg-gray-300 flex-shrink-0 "></div>
            <div class="flex-1 min-w-0">
              <textarea 
                id="modal-reply-text"
                placeholder="Write your reply"
                rows="8"
                maxlength="300"
                class="w-full px-0 py-2 bg-transparent text-white text-base placeholder-gray-400 resize-none focus:outline-none border-0"
                data-reply-uri=""
                data-reply-cid=""
                data-root-uri=""
                data-root-cid=""
                data-mode="reply"
                data-embed=""
              >

English

Add to Home Screen

News, ranked by scholars

Connect Bluesky

Connect with Bluesky