SvelteではじめるWeb Components開発 - Qiita
はじめに あまり知られていないかもしれませんが、Svelteを使ってWeb Componentsを開発することができます。 本記事ではSvelteを使ってWeb Componentsを開発するやり方を紹介したいと思います。 Web Componentsとは webcomponents.orgから引用 Web Componentsは、WebプラットフォームAPIのセットで、WebページやWebアプリケーションで使用する、新しいカスタム、再利用可能な、カプセル化されたHTMLタグを作成することを可能にします。カスタムコンポーネントとウィジェットはWeb Componentsの標準に基づいて構築され、モダンブラウザで動作し、HTMLで動作するあらゆるJavaScriptライブラリやフレームワークで使用することができます。 Web Componentsは、既存のWeb標準をベースにしています。We
はじめてのSvelte - 基礎から応用まで
製品 コミュニケーション メッセージング マルチチャネルのテキストメッセージとメディアメッセージの送受信を180か国以上で
フロントエンドとSPA職人の目指したものの歴史と概略
年末年始にフロントエンド論みたいな記事をいくつか見たが、僕ら古のSPA職人がやってきたフロントエンドという職域と目指していたものが失伝しかけている気がするので、ここに時代ごとに何を考えていたか、雑に書き殴る。 注意点として、 2004から始まるが、自分がプログラミングを始めたのが2010, 業務としてコードを書き始めたのが 2012 なので、解像度が高いのはそれ以降になる。 tl;dr 2004: 動き出す HTML 2011: 構造化のはじまり 2015: 贅沢品としてのSPAとコミュニティ分化 2017: 貧者のSPA 2019: 守破離としてのパフォーマンス 2004: 動きだす HTML AJAX の時代。要は XMLHTTPRequest で取得したコンテンツに応じて、動的書き換えをDOM書き換えを行うこと。今では名付けるほどでもない操作だが、HTMLが静的なものをやめたことは、
【超最新版】Micromodal.jsの使い方やモーダルUIの実装方法を徹底解説！ - PENGIN BLOG
この記事を書いた人 もなか30歳を過ぎてからプログラミングの勉強を独学で始め、現在コーダー3年目。毎日JavaScriptについて勉強中。趣味はパンを焼くこと。2人の男の子のママ。 アクセシビリティのことも考えると、作成が難しいUIがモーダルです。Twitterなどでは「無理に自作せずライブラリに頼ったほうがいい」という声を見かけることが多くなりました。 そこで今回はかんたんにアクセシビリティ対応のモーダルウインドウが実装できる、jQuery非依存の超軽量ライブラリ「Micromodal.js」について詳しく解説します！ 特徴やできること、動く仕組みや各オプション、動かない場合のトラブルシューティングなどを網羅的に紹介します。 Micromodal.jsを使ってみようかな…と考えていた方は必見！ぜひ最後までご覧くださいね。 モーダルとはモーダルウィンドウとは、操作が完了するまで親ウィンドウ
Svelte • サイバネティクスで強化されたwebアプリ
compiled Svelte は、可能な限り多くの作業をブラウザからビルドステップにシフトさせます。手作業による最適化はもう不要です — より高速で、より効率的なアプリを。 compact よく知られている言語(HTML、CSS、JavaScript)を使って、息を呑むほど簡潔にコンポーネントを書くことができます。 そして、あなたのアプリケーションバンドルはとても小さくなります。 complete scoped styling、state management、motion primitives、form bindings などはビルトインで用意されています — 必要なものを探し求めて npm をさまよう必要はありません。全てここにあります。
最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
「たかがJavaScript」のその先 #TECHPLAY
フロントエンドと自分のキャリア形成について。このスキルツリーとセットで見るといいかもです。 https://whimsical.com/oPYtoDPyho6uWK1gDmD9e
stimulus、「data-〇〇＝」の名称ルールについての個人メモ - Qiita
キャラメルケースとかスネークケースとか、命名規則には数種類あるが、stimulusで使うべきはどれなんだろう、と考えて調査してみた結果の纏めです（ 書いたきっかけ 前回を書いている途中、html側の記述として 【data-controller = "test_test"】 などと書いたところ、動かなかった。 一方でstimulusハンドブックの第五章では html側記述→【data-controller="content-loader"】 stimulusのファイル名→【src/controllers/content_loader_controller.js】 となっている。 そこんところ、どうなってるんだろう？ と思って調べてみた。 ……もしかしたらハンドブックのどこかには書いてあるのかもしれないが、英文を読む気力がなかった（のでこれは、あくまで自分が調べた動作結果。もしちゃんとしたルー
Stimulus 2.0 を試してみた
はじめに 2020/12/5 に Stimulus 2.0 がリリースされました 🎉 Stimulus 2.0 リリースノート 以前 Rails アプリで JavaScript を書くときに少しだけ使ったことがあり便利だったので、2.0 も試してみました。 前提 $ ruby -v ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin19] $ bin/rails -v Rails 6.1.1 今回はテキストエリアの文字数をカウントする処理を Stimulus で実装してみようと思います。 Rails Girls アプリ・チュートリアル でつくるアイデア投稿アプリをベースにして、アイデアの Description 項目に処理を入れていきます。 参考: How to use Stimulus JS 2.0's new Va
最新版TypeScript+webpack 5の環境構築まとめ(React, Three.jsのサンプル付き) - ICS MEDIA
TypeScriptはMicrosoftが開発するプログラミング言語です。JavaScriptのスーパーセットという位置づけで、静的型付けなど強力な言語機能を備えています。TypeScriptは高度なウェブアプリケーションの開発で使われることが多く、Google社内の標準言語として2017年に採用されるなど、注目が高まっています（参考記事『Google社内の標準言語としてTypeScriptが承認される － Publickey』）。 ▲TypeScriptの公式サイト TypeScriptはコンパイラによってJavaScriptのコードが得られますが、TypeScriptのコンパイラにはECMAScript Modules（ES Modules = importやexport文のこと）をまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
22歳になる長寿サービスのUI刷新 ~密結合システムからViewを分離した苦労話
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
巨大なSPAの技術的負債と向き合い続けるテクニック(2023年秋)
今日から始めるSvelte入門
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
2023年のフロントエンド振り返りと2024年
2022年に起きたフロントエンドの変化
フロントエンドエコシステムで効率化する組織開発
Hotwire を 本番環境で使ってみた感想
noteのフロントエンドApp分割
