JavaScript初心者にもオススメ！クリーンなコードでHTMLを拡張する「Stimulus」とは？
HTMLやCSSは得意だけれど、JavaScriptは苦手…という方は、多いのではないでしょうか。HTMLやCSSは書き方がある程度統一されていますが、JavaScriptは数えきれないフレームワークやライブラリがあるので、どれを使えばいいのか迷ってしまいます。 そのような方にこそおすすめしたいのが、StimulusというJavaScriptライブラリです。 今回は、*クリーンなコードでHTMLを拡張する「Stimulus」*の概要や基本的な操作方法を紹介します。初心者でも比較的簡単に扱えるので、ぜひ利用してみてはいかがでしょうか。 Stimulusとは？ Stimulusは、世界的なプロジェクトマネジメントツールBasecamp(旧37シグナルズ)を開発しているメンバーによって開発されているフレームワークです。 JavaScriptはフレームワークだけでも、Angular.JSやReac
ProseMirror
Rich content editors should, ideally, produce clean, semantically meaningful documents while still being easy for users to understand. ProseMirror tries to bridge the gap between editing explicit, unambiguous content like Markdown or XML, and classical WYSIWYG editors. It does this by implementing a WYSIWYG-style editing interface for documents more constrained and structured than plain HTML. You
フロントエンドの未来の話 - Qiita
const fsbx = require('fuse-box'); const fuseBox = fsbx.FuseBox.init({ homeDir: 'src/', sourcemaps : true, outFile: './dist/app.js', plugins: [ [ fsbx.SassPlugin({ outputStyle: 'compressed' }), fsbx.CSSPlugin({}) ], fsbx.TypeScriptHelpers(), fsbx.JSONPlugin(), fsbx.HTMLPlugin({ useDefault: false }) ] }); fuseBox.devServer('>main.ts **/*.html', { port: 4445 }); シンプル！！ fuse-boxの特徴として ・TypeScriptはデフォル
HTMLページのチェックボックスがチェックされているか取得する (JavaScript プログラミング)
JavaScriptでチェックボックスがチェックされているか取得するコードを紹介します。 概要 JavaScriptでチェックボックスがチェックされているか、チェックされていないかを確認したい場合があります。 チェックボックスのチェック状態を取得するには、チェックボックスオブジェクトのcheckedプロパティの値を参照します。 チェックボックスのチェック状態を取得する別の方法として、Formでサーバーに送信してサーバープログラムで受け取る方法があります。 サーバーサイドの実装はいろいろありますが、ASP.NETでの実装はこちらの記事、 RazorPagesでの実装はこちらの記事を参照してください。 コード 以下のコードを記述します。 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-e
スマホサイトで使えるコピペTips集(Javascript / CSS3 / HTML5) | hi-posi Front-End blog
※ほぼ備忘メモで説明をかなり省いているので、ある程度制作知識のある方向けのエントリーです。 ※JavascriptはjQueryを使う場合が多いので読み込んでいる前提です。 目次 振り分け系 ユーザーエージェントを判別する ページを横幅320pxに合わせて拡大(zoom)する 画面の回転（Landscape-Portrait）イベントを取得する 現在Landscapeモードか、Portraitモードかを調べる スクロール制御系 タップするとページの一番上にスクロールで戻る タップすると指定したidの位置までスクロールで戻る タップすると指定した位置までスクロール無しで戻る iPhoneのSafari(iOS7含む)でスクロールを禁止する タッチ制御系 タッチ開始を検知する タッチ中を検知する タッチの終わりを検知する フォーム制御系 フォームのラベルのタップを有効にする フォームのペース
関数型なAltJS、PureScriptの入門書を邦訳しました。 - Qiita
2018/4/30 追記： 古くなっていたこちらの邦訳ですが、プルリクエストを頂き最新版PureScript v0.11に対応しました。本当にありがとうございました。 Haskellライクな関数型プログラミング言語PureScriptの入門書、"PureScript By Example"を邦訳しました。本書はPureScriptのオリジナルの作者であるPhilさん本人が執筆した入門書です。本書を理解するにはJavaScriptを知っていることが望ましいですが、そうでなくともすでに何らかのプログラミング言語を知っていれば読みこなすことはできると思います。PureScriptはHaskellを始めとした多くの関数型言語と様々な考え方を共有していますから、PureScriptという言語そのものを学ぶという目的でなくとも、関数型プログラミング全般についての入門としても読むにも適しています。無料で
0行から始めるクライアントサイドJavaScript入門 - Qiita
0行〜 準備すること Modernizr.js ブラウザの機能判定プラグイン。 読み込むだけでhtmlタグにブラウザの機能クラス名がつけられる。↓ <html lang="en" class="js no-touch postmessage history multiplebgs boxshadow opacity cssanimations csscolumns cssgradients csstransforms csstransitions fontface localstorage sessionstorage svg inlinesvg no-blobbuilder blob bloburls download formdata"> クラス名の最初にno-がつくと非対応、そうでないものは対応。 no-touch: タッチイベント非対応 postmessage: postMessa
HTML(.js) - Befriend the DOM!
Intuitive HTML lets you navigate, manipulate and use the DOM with intuitive, readable, consistent code. Powerful HTML's functions enable you to flexibly use all native DOM features with brevity, clarity, and more power than ever. HTML document.documentElement The global HTML is the actual document root element and all element tags queried via the dot operator are descendants. HTML.tag... Element|A
Server-side HTML vs. JS Widgets vs. Single-Page Web Apps
Server-side HTML vs. JS Widgets vs. Single-Page Web Apps At the recent GOTO Chicago conference, I gave a talk on "Frontend Architectures: from the prehistoric to the Post-modern." In just my first 10 months at Coursera, I've experienced the joys and woes of many different frontend architectures, and I wanted to share what I learnt. I detail everything in the slides, but I'll summarize my thoughts
自動車免許.club - このウェブサイトは販売用です！ - 自動車免許 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
[JS]ベタ塗りのエレメントやページの背景に、繊細で美しいグラデーションを与えるスクリプト -Add Shine
ベタ塗りのページ全体の背景やボタンなどのエレメントなどの背景に、繊細で美しい輝きをもったグラデショーンを与えるjQueryのプラグインを紹介します。 グラデーションの適用 Add Shineの使い方 Add Shineの使い方は、簡単です。 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.js"></script> <script src="js/addShine.js"></script> Step 2: HTML HTMLはスクリプトを意識することなく、普通に実装します。 <body> <button>ボタン</button> </body> Step 3: CSS ページの背景とボタンは、ベタ塗りにします
MVC Graffiti
宇宙兄弟面白いよね！ムッタと日々人の宇宙飛行士を目指す兄弟の話。 ．．．。 去年に引き続き、今年もTechEdでBoFに呼ばれたので行ってきました。TechEd自体は3日間の開催期間があるんですけど、月曜から水曜まで会社で合宿状態で、初日は参加できず。2日目は現地入りしたものの、ずっと障害調査でパシフィコにWiFi借りに行っただけみたいな状態。ちなみにこの時点でBoFで使う予定のデモプログラムはまだちゃんと動かず。貝になりたい。 去年はオープンしてなかったけど、今年はオープンしてるクリスピー・クリームにココロオドル。 今回のデモのテーマは「人類の進歩と調和」です。ウソですね。はいはい。テーマなんて特に無いです。 ↑これです。多人数で同じキャンバスに絵を書くアプリで、一般的にはなんていうのかな、お絵描きチャットとでも言うんでしょうか。そんなようなものです。 仕組みとしてはいたってシンプルです
Shibuya.js beyond HTML5 の発表資料 (Kanasansoft Web Lab.)
Shibuya.js beyond HTML5 で飛び入りで話してきた。以前にLTをやった関係で、スピーカー募集の通知があり、開催日前後が忙しくなりそうだったこと等々、諸事情により参加できない可能性があったため、発表はほとんど諦めていた。ところが、飛び入り発表もOKとの事だったので、当日はできるだけ早く会場入りし、2時間で資料を作って発表してきた。諸事情により一部のスライドを削除している。
HTMLDocument の動的な作成: Days on the Moon
ブラウザ上で、JavaScript を使って HTML のソースから HTML 文書を生成するのに、どんな方法があるのか調べました。なお、以下のスクリプトは HTML 文書上で実行することが前提です。 表の見方 XSLT の HTML 出力 createHTMLDocument メソッド createDocument メソッド createDocument メソッドと名前空間の指定 createDocument メソッドと文書型宣言の指定 createDocument メソッドと文書型宣言及び名前空間の指定 cloneNode メソッド iframe 要素 ActiveXObject CID からの作成 まとめ 表の見方 以下の表において、各項目の意味は次の通りです。 doc HTML 文書を作成できれば○、XML 文書を作成できれば△、それ以外なら×です。HTML 文書かどうかは、cre
hCalendar を使って予定を公開しよう！ - IT戦記
はじめに みなさん、こんばんわ！ さてさて最近のことですが、 Google の検索結果にイベントや予定へのリンクが表示されるようになりましたね！（まだ、英語版だけですけどね＾＾；） ASCII.jp：Google、リッチスニペットでイベントの日時や場所表示に対応 以下のような感じで表示されるみたいです！ ウェブページの中に書かれた「予定」や「イベント」などを Google 先生が理解して表示しているんですね！ この予定やイベントはどうやって探してるの？ Google は hCalendar という形式のデータを読んで、予定やイベントを探しているようです。 というわけで、今日はこの Google が使っている hCalendar というものが「どういうもので」「どうやって活用すればいいか」を実例を交えながら紹介したいと思います。 hCalendar って何？ hCalendar とは「カレン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Pen by KIMURA Tetsuro
JavaScript テンプレートエンジン vs DOM 直接操作
Paper.js