フロントエンドコーディング時に便利なジェネレーターサイト（随時更新） - Qiita
更新履歴 追加 2024/04/01 「Epic Easing」を掲載しました 2024/03/07 「Filter Blend」を掲載しました 2024/03/04 「Tooltips & Speech Bubbles」を掲載しました 2023 2023/07/04 「CSS Box Shadows Generator」を掲載しました 2023/06/29 「Regulex」を掲載しました 2023/04/05 「Colorable」を掲載しました 2023/03/09 「Scrollbar.app」を掲載しました 2022 2022/10/04 「CSS Shadow Palette Generator」を掲載しました 2022/09/07 「Wayback Machine」を掲載しました 2022/05/31 「Min-Max-Value Interpolation」を掲載しました
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう｜ハイクラス転職・求人情報サイト AMBI（アンビ）
仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい
jQuery Deferredまとめ - Qiita
参照 よく分かるjQuery Deferred http://amzn.to/1SkAQXn 学習内容 .done()と.fail() Promise 非同期と同期処理 Deferred .then() $.when() $.Callbacks() 非同期処理を直列に記述、実行するための仕組み。 非同期処理で、複数の処理を、指定した順番で実行することができる。 Promise Jquery ver.1.5からAjax関係のメソッドは「Promise」を返すようになった Ajaxが無事終了した時、「Promise」に、コールバック関数を、done()というメソッドを使って登録する。 Ajaxが異常終了した時、「Promise」に、コールバック関数を、fail()というメソッドを使って登録する。 function onSuccess(){ console.log("成功"); } functi
jQueryにおけるレガシー・冗長な書き方を一掃したい - Qiita
はじめに jQuery 3.0になってから結構経ちましたが、そろそろ旧バージョン時代の書き方をなくしていかなければならないはず。 ついでに、冗長な書き方も一掃したい。 レガシー？な書き方たち 一応互換性を考えて残っているものも多いですが、そろそろこの書き方もなくしていきましょう。 $(document).ready(function () {}) DOM構築が完了した後に実行する、jQueryを使うにあたって結構重要なやつですね。 こんなに無駄な書き方しないで素直に $(function () {}) と書きましょう。
サーバレスアプリ開発をjQueryでがんばらないためのVue.js - Qiita
サーバレス構成のWebアプリ開発を担当し、そこでVue.jsを使ってみたので採用した経緯と、Vue.jsの何を使ったかを紹介する。 これまでのWebアプリ開発 JavaのWebアプリ開発ならThymeleafやFreemarkerなどのテンプレートエンジンを使用していた。 サーバレスだと、HTMLとJavaScriptで表示の処理を行うため、JavaScriptの処理が増える。 よく使われるのはjQueryによってDOMを操作し、HTMLを動的に変更する方法だろう。 jQueryのDOM操作は辛いよ jQueryを使ったことがあればお分かりだと思うが、jQueryによるDOM操作は「このイベントで、このvalueがxxxなら、このDOMを変更する」という手続き型のコードになる。 JavaScriptの処理が増えると、この手続き型のコードが増えてデータと状態の管理が煩雑になる。 また、Jav
jQuery の animate の縦方向の出現や隠す動作
jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
Handlebars.jsの基本的な使い方のメモ - console.lealog();
便利ですよね、Handlebars。 でも日本語の記事が案外なかったり、公式のドキュメントがいまいちアレだったりするので、自分用にまとめます。 それがどこかで誰かの役に立てば、それはそれで幸いです。 基本的な使い方 インストールとかは割愛。 だって読み込むだけやし・・・。 で、そこからは テンプレート・ひな形となるHTMLを用意 そのHTMLをHandlebarsに食わせる 動的にはめ込む値をつっこむ 基本的にはこの3ステップです。 Html <!-- 略 --> <script id="input" type="text/x-handlebars-template"> <section class="inner"> <h1 class="header">{{title}}</h1> <div class="box"> <img src="{{img.url}}" alt="{{img.a
ScrollMagic
ScrollMagic helps you to easily react to the user's current scroll position. It's the perfect library for you, if you want to ... animate based on scroll position – either trigger an animation or synchronize it to the scrollbar movement (like a playback scrub control). pin an element starting at a specific scroll position – either indefinitely or for a limited amount of scroll progress (sticky ele
JavaScriptでメソッドチェーンを作る - Qiita
はじめに jQueryのメソッドチェーンはとても便利で、自分もよく使っていますが「作り方」が よく分かっていなかったので実際に簡単なサンプルを作ってみました。 知っている人にとっては簡単だと思いますが、自分のように知らない人に少しでも お役に立てれば幸いです(｀･ω･´)ゞ 元記事 http://sawapi.hatenablog.com/entry/2014/12/05/004710 そもそもメソッドチェーンとは メソッドチェーンとは、メソッドをつなげて処理することをいいます。 例えばjQueryだと、 jQuery( 'div' ).width( 100 ).height( 100 ).css( { backgroundColor: '#000' } );
Facebook風ドロワーメニューが手軽に導入できる drawer
「drawer」は、横からせり出してくる「ドロワーメニュー」をサイトに手軽に実装できるjQueryプラグインです。 ドロワーメニューはスマートフォンやタブレットなどのさまざまな画面サイズに柔軟に対応できる利点があり、GoogleやFacebookのモバイルサイトで利用されています。drawerプラグインは横幅の可変に対応していますので、レスポンシブ Web デザインにも利用できます。 drawerプラグインはGoogle ChromeなどのモダンブラウザーとInternet Explorer 10以降、スマートフォンではiOS 7のSafariとChromeに対応しています。 MITライセンスですので、著作権表示は削除せずに利用しましょう。 drawerは、パッケージマネージャーの「bower」でもインストールできます。bowerを導入している場合は、以下のコマンドですぐに利用できます。
jQueryでメニュー等の領域外をクリックした時に閉じるようにする - Qiita
思ったこと jQueryを使ってメニュー等の表示、非表示を切り替えるときにtoggleClass()とCSSを使ってメニューを隠したり隠さなかったりするというやり方はシンプルだけど、メニューの外をクリックした時もメニューが消えずにうっとおしかった。 ググった結果 何やらややこしいやり方しか書いてなかった。 やったこと 領域外クリックの検知 jQuery側 $(document).click(function() { $('#menu').hide(); }); これだけ。 問題点 このままでは表示した要素内をクリックするとその要素自体も消えてしまう。もともと非表示のメニュー等、消えても問題のない場合もあるが、殆どの場合は要素内をクリックして消えられては困る。 解決策 $('#menu').click(function() { event.stopPropagation(); }); の一行
jQueryで作る、下にスクロールで消えて、上にスクロールで現れる固定メニュー
最近、下にスクロールすれば消えて、上にスクロールすれば現れる固定メニューを設置しているサイトを２つくらい（サイト名は忘れてしまいました。。）見かけて、これは流行っているのではないかということで作ってみました。 メニュー自体はいたって普通のものですが、一応ソースを載せておきます。まずはHTMLです。 <nav id="menu-wrap"> <ul id="menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> </ul> </nav> 続いてCSSです。 #menu-wrap { position: fixed; z-inde
ホームページ制作なら渋谷のウェブ制作会社【スタイル】
【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
自ページのリンクを削除する jQuery remove self link plugin を公開します。
JavaScript をこよなく愛する なかじまんソフトウェア株式会社 のスタッフによるブログです。 OpenSocial Container や Social Gadgets の開発を技術面から支援します。 ページから自ページのリンクを削除してユーザビリティを改善するホームページのユーザビリティを改善できると知りながら、何も手を打たないのは歯がゆいことです。そこで WEB ブラウザでページを表示したときに JavaScript (jQuery) を使って、ページの中から自ページのリンクを削除する方法を考えました。↑のエントリを投稿しから１年になりましたが、JavaScript を使ってページ内から自ページのリンクを削除するという手法は、とてもバランスのよい妥協で有効であったことが確認できました。 私が手がけたいくつかのサイトで使っていますし、今後も使っていく予定です。一般性のある Jav
百姓快三-中国有限公司
百姓快三【正规信誉大平台】❤️小美提供❤️百姓快三登录入口，百姓快三网址，百姓快三官网，百姓快三平台，百姓快三app，百姓快三下载，百姓快三在线购彩，百姓快三用户注册，...
JSといえばjQueryだったWebデザイナーが、Reactを1年間使って感じたメリット｜dwango creators' blog（ドワンゴクリエイターズブログ）
はじめまして、ほそだと申します。昨年秋まで個人事業主の立場でドワンゴでお仕事させていただいておりましたが、いろいろ経緯がありまして中の人になりました。ドワンゴ歴はそこそこ長い新入りです。よろしくお願いいたします。 さて、今回はデザイナー（HTML/CSS/JSは扱えるいわゆる「Webデザイナー」）として1年間ほどReactを使ってみたので、そのメリットを書いてみようかと思います。 Reactとの出会い ReactとはFacebook製のJSライブラリです。 https://facebook.github.io/react/ WebアプリケーションのView部分を実装します。2014年の暮れにエンジニアの方々が魂を震わせているのを見て存在を知りました。2015年はReact元年な感じでしたよね。 僕自身、以前から比較的JSを書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.mismithportfolio.com/web/20160105slidebarsjs
スマゲー作るよ - スマホのゲーム開発に役立ちそうなことをメモしていくブログ
「SEO×SNS×ブログ」で作る最効率化収益システム｜うきだいらブログβ
