サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
現在、jQueryを使用している人、そしてjQueryを取り去ろうとしている人がいると思います。jQueryの使用に対する一つの考え方を紹介します。 Why I'm still using jQuery in 2019 by Martin Tournoij 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は元サイト様のライセンスの元、翻訳しています。 2019年になってもまだjQueryを使用しているのはなぜですか Hacker News での議論 多くの人が「普通のJavaScriptを使えば、jQueryは必要ない」と主張しています。私は多くを必要としないので、jQueryを必要としませんが、確かに便利です。 You might not need jQueryのようなページでは、jQueryを捨てるのは簡単だというアイデアを売り込もうとしていますが、逆にこのページの最初の例
Webサイトやスマホアプリのどの部分にでもフォームに入力された値を検証するバリデーションを簡単に実装できる、わずか2.29kBの超軽量ライブラリを紹介します。 バリデーションでよく使用されるルールもデフォルトで30個以上用意されており、ルールをカスタマイズして利用するのも簡単です。 v8n -GitHub v8nの特徴 v8nのドキュメント v8nの使い方 v8nの特徴 v8nの名称は、「validation」の「v」と「n」の間に正確に8文字あるという意味です。 流暢でチェーン化可能なAPI チェーン化可能なAPIを使用して、フォームの検証を簡単に作成できます。 有用な標準検証ルール フォームの検証でよく使用される30個以上のルールが用意されています。 カスタマイズ性 フォームの検証用ルールは、簡単にカスタマイズできます。 非同期検証をサポート バックエンドでの検証のように時間のかかるル
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。 スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。 実装が簡単 スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。 超軽量 1KBの超軽量ライブラリ。 依存は無し スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。 ブラウザのサポート IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
というより、自分が最近知った機能。 ハッシュをCSSのプロパティ名と値に展開できる Stylusではハッシュが使えます。 シンタックスはJSのオブジェクトリテラルとほぼ同じですが、Stylusのnodeをそのまま値に使用できる点が違います。 以下のように、値に10pxと書いてもvalidです。 foo = { width: 10px } // JSと同じようにアクセスできる bar = foo.width bar = foo['width'] // 代入もできる foo.height = 20px foo['height'] = 20px ハッシュを{foo}のようにブレースで囲むと、ハッシュのキーバリューがそのままStylusとして解釈され、CSSのプロパティと値に展開されます。 ハッシュがネストになっている部分は、Stylusのネスト（インデント）として解釈されるので、以下のように&は
jQuery A+ is an unobtrusive script that adds useful features to 'A' tags allowing webpages to maintain compatibility withHTML standards. The script syntax is compatible with allHTML / XHTML standards. For example, you can open link in a new window/tab (like target="_blank") without invalidating theHTML code: <a href="index.htm" class="blank">Click Me</a> or open a popup window without using jav
Installation ¶ Pug is available via npm: $ npm install pug Overview ¶ The general rendering process of Pug issimple. pug.compile() will compile the Pug source code into aJavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!,it will return a string ofHTML rendered with your data. The compiled function can be re-use
HTMLのコーディングの際にjadeを愛用しています。 jadeがpugになってから、所々仕様が変わっていたのでメモ Mixinの呼び出し方が変わった mixin 関数名() ではなく+関数名()になった。 jade mixin foo('引数') ↓ pug +foo('引数') 文字列中の変数展開の方法が変わった jadeの時は"で囲まれた文字列の中に#{変数名}で文字列展開ができていましたが、 pugからは文字列展開をする場合は`で文字列を囲み${変数名}とするか、jadeでも使えていた+演算子で文字列と変数を連結するかになってました。 これはちょっとjadeのときの方が便利だった感じがします... jade a(href="#{link}") p(class="foo#{bar}hoge") p(class="foo" + bar + "hoge") ↓ pug a(href=`$
A modernJavaScript utility library delivering modularity, performance & extras.
lodash は underscore.js とほとんど同じ機能を持つユーティリティライブラリです。 似たような関数名があったり、破壊的メソッドだったりして、正しい使い方をちょいちょい忘れてしまうので、よく使う関数を逆引き形式でまとめてみました。日本語の記事もあんまりなかったので紹介の意味でも。 他にもいろいろ機能はあるので、気になる人は lodashのdocs を見ると良いかと。 Array操作 データ取得 2つの配列間で、一致しない値だけ取得する _.difference(array, array) _.difference([1, 2, 3, 4, 5], [5, 2, 10]); // → [1, 3, 4] 複数の配列の積集合（共通する値）を取得する _.intersection(array...) _.intersection([1, 2, 3], [5, 2, 1, 4],
HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じるようになりました。 今回はPugのテンプレートを作ったので、その使い方を紹介します。 今回はPugの記法については細かく説明できませんので、詳しい仕様は公式サイトを確認してください。 Getting Started – Pug テンプレートエンジンとPugについて テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ（文字列やタグなど）を渡すことで、無駄なくHTMLを作成していく仕組みのことです。CSSにおけるSassのようなものと考えてもいいと思います。 今回使用するテンプレートエンジンのPugには以下のような特徴があります。 閉じタグ（
!!! 5html(lang="en") head title= pageTitle(car insurance montana) :javascript | if (foo) { | bar() | } body h1 Jade - nodetemplate engine #container - if (youAreUsingJade) You are amazing - else Get onit! Get onit! Get onit! Get onit! <!DOCTYPEhtml> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> //<![CDATA[ if (foo) { bar() } //]]> </script> </head> <body> <h1>J
無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法 ［Inf
compliant — 100% to CommonMark, 100% to GFM or MDX with a pluginASTs — inspecting and changing content made easypopular — world’s most popularmarkdown parserplugins — 150+ plugins you can pick and choose from remark is an ecosystem of plugins that work withmarkdown as structured data, specifically ASTs (abstract syntax trees). ASTs makeit easy for programs to deal withmarkdown. We call those p
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
