GitHub - qiqiboy/pageSwitch: Just a page-Switch Javascript Library
// 如果使用webpack或者requirejs或者browserify等构建工具，可以这样： var pageSwitch = require('pageswitch'); // 也可以直接在下载本文件，直接在页面中引入 // 首先在页面中引入pageSwitch.js // 调用 pageSwitch 方法 var pw = new pageSwitch('container id', { duration: 600, //int 页面过渡时间 direction: 1, //int 页面切换方向，0横向，1纵向 start: 0, //int 默认显示页面 loop: false, //bool 是否循环切换 ease: 'ease', //string|function 过渡曲线动画，详见下方说明 transition: 'slide', //string|function转场方
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を書くタイプのデザイナーではありましたが、正直なところ自分が関わってき
旧石器時代のJavaScriptを書いてる各位に告ぐ、現代的なJavaScript超入門 Section1 ～すぐにでも現代っぽく出来るワンポイントまとめ～ - Qiita
はじめに ネットには様々な情報が溢れており、JavaScriptに関する情報も多数存在しております。 その中には、「今時こんな書き方しねえよ…」と思わずツッコミを入れたくなるような、本当に、本当に古い内容について書かれている古文書も存在します。 そんな罠記事の情報に囚われてしまって、いつまで経っても現代的なJavaScriptが書けない皆さんのために、このシリーズの記事では、各セクション毎に分けて、旧石器時代の記述と、現代の記述を紹介する形で、文明開化をしていきたいという思いで記述する。 最初は、現在比較的メジャーなブラウザで一通り動作する「ECMAScript 5」までの内容に関してポエムを書き連ねていき、最終的には一連の内容を読むだけで「ES6(ES2015)」による新機能や、絶賛提案中の「ES7」の一部提案内容についても把握し、おおよそ現代人を育成することを目標とする。 …なんてめっ
[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js
スマホ・タブレット・デスクトップのブラウザがさまざまな機能（WebGL, Canvas, rem unit, async属性、タッチイベントなど）に対応しているか判別し、その判定を利用することができる超軽量（1kb）スクリプトを紹介します。 ModernizrはHTMLとCSSの機能で判別を行っていましたが、それを更に拡張した感じです。 Feature.js Feature.js -GitHub Feature.jsの特徴 Feature.jsの使い方 Feature.jsの特徴 Feature.jsは、ユーザーが利用するスマホ・タブレット・デスクトップのブラウザの機能を判別し、利用することができます。 WebGL, Canvasをはじめ、単位にremが使えるか、async属性は利用できるか、といった実用的なものが多数揃っています。また、いくつか補足事項があります。 touch タッチイベ
![[JS]スマホ・タブレット・デスクトップ時代のクロスブラウザ対策にかなり役立つ便利なスクリプト -Feature.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/08cfa83eb7c57cf99f57f9ec6394babac1f51a07/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016011204.png)
jQueryから離れるためのJavaScript代替ライブラリまとめ
jQueryは便利すぎて、ついつい他のフレームワークを使いながらも一緒に組み合わせて使ってしまったりします。その結果として読み込むサイズが肥大化したり、動作が重たくなったりします。特にスマートフォンのようにリソースがデスクトップほど潤沢でない場合は顕著です。 そこでjQueryから離れて代替ライブラリを使ってみましょう。多くのライブラリはjQueryを踏襲して似たような使い方ができるようになっています。 Minified.js jQueryのようにDOM操作、アニメーション、イベント、HTTPリクエストをサポートしています。また、コレクション、日付や数字のフォーマット、テンプレートといった便利ユーティリティも備えています。 サイズは4KB（ミニファイ&Gzip）で、jQuery 2.1.4の29KBに比べて大幅に軽量です。 Minified.js - A Truly Lightweight
JavaScript初学者へ向けて 【Goodpatch Advent Calendar 2015 4日目】 - it's an endless world.
この記事はグッドパッチのエンジニア陣がお届けするGoodpatch Advent Calendar 2015の4日目の記事です。 昨日はsagarayaのSwiftについての記事でした。 qiita.com 本日は表題の通り、JavaScript初学者に向けてのお話ができればと。 お前だれよ？ 株式会社グッドパッチで、グロースデザイナー/フロントエンドエンジニアという肩書きで働いています。 今年はメインの仕事以外にも、幸いなことにschooさんにお声がけいただいてJavaScriptの初学者向けの授業を作ったり、(まだ刊行されてはいませんが)JavaScript初学者向けの本を執筆する機会をいただけたりと実りの多い一年でした。 schoo.jp 実は私がJavaScriptを書きはじめたのはほんの数年前だったりします。 そんな自分が初学者にものを教えるのもどうかとは最初は思ったのですが、自
2016年に取り入れていきたい、CSSのテクニック・ライブラリのまとめ
2016年は、1月12日に古いバージョンのIEのサポートが終了します。 IE8, 9, 10などの古いブラウザへの対応に時間を割く必要がなくなり、今まで躊躇していたCSSやJavaScriptが多くの人に利用されるようになると思います。 これからどんどん取り入れていきたいCSSのテクニック・ライブラリを紹介します。 イラスト: Girls Design Materials 2016年1月12日からIEの対応は実質IE11に レイアウト関連のCSS アニメーション関連のCSS ユーティリティ関連のCSS 2016年1月12日からIEの対応は実質IE11に 2016年1月12日(米国時間)に、IEの古いバージョンのサポートが終了します。 各Windows OSごとの対応バージョンは、下記の通り。 Internet Explorer サポートポリシー変更の重要なお知らせ Vistaユーザーはほぼ
それなりに使える、Web制作者がお世話になる便利ツール
作成：2016/01/4 更新：2018/05/01 Web制作 > 毎回使うわけではないけれど、いざとなったら意外と役に立つもの。今回はディレクターからコーダーまで「それなり」に使えそうなツールをまとめました。作業労力を軽減してくれる系です。 エンジニア速報は Twitter の@commteで配信しています。 便利なツール ロゴの特許、商標の検索 キーワードを入力すると登録番号・出願・商標・出願人・登録日の他、ロゴイメージなどを見ることができるサービス、特許情報プラットフォーム。ロゴを作成し商標登録後はここでチェックしておきたいですね。 検索の他、実用新案、意匠、商標の簡易検索ができます。意外と紹介している人が少ないのと、たまに使うことがあるのでメモしておきます。 J-PlatPat 特許事務所は検索で沢山出てきますので、ここでは割愛します。商標登録とロゴマーク作成を一括で頼めるサービ
Media Capture and Streams と Web Audio API で実現する録画・録音・ WAVファイルの生成 | CYOKODOG
前回のエントリではマイク経由の音声認識を行う Speech Recognition API を試しましたが、今回はカメラ・マイクからの動画・音声キャプチャを行う Media Capture and Streams を試してみます。 また、キャプチャした音声の録音については MediaStream Recording を使用することで可能ですが、現時点（2015年4月）では Firefox にしか実装されていません。 そこで Web Audio API を使用することで他のブラウザでも音声録音を可能にし、それらの音声データを wav 形式で保存する方法についても試してみました。 はじめに ベンダープレフィックス対策として以下処理を行います。 code demo script navigator.getUserMedia = navigator.getUserMedia || navigato
MessageViewJS - Talking Scene JavaScript Library
<!doctype html> <head> <script src="/js/message_view.js" type="text/javascript"></script> <script> document.addEventListener("DOMContentLoaded", function() { var message = new MessageViewer({ "data": [{ "name": "生方 すみれ", "message": "はじめまして！", "img_url": "/img/character_0001.png" }] }); }, false); </script> </head> <div class="messageView" id="default"> <div class="mv-contents"> <p class="mv-name">
Wee
Logical Structure Wee is organized in a simple, scalable hierarchy with a consistent structure for both script and style. PostCSS Harness the power of PostCSS with an extensible chain of plugins including Autoprefixer to build your stylesheets. Advanced Scripting First party modules for routing, asset loading, event binding, data management, and more out of the box.
CSS Preprocessing with Visual Studio - Telerik Blogs
Install and Configure a CSS Preprocessor CSS preprocessors like Sass and Less are tools that greatly enhance CSS development. Sass and Less have been around for a while now and are widely adopted by the web development community. CSS preprocessors bring real language features to CSS such as variables and mixins (functions) which result in clean, extensible and reusable CSS code. For this example,
Google for Developers - from AI and Cloud to Mobile and Web
Platforms and Operating Systems Android → Google AI → Chrome → Google Cloud → Firebase → Frameworks, IDEs, and SDKs Jetpack Compose → Android Studio → Google AI Studio → Google Antigravity → Flutter → Services and Integrations Gemini API → Privacy Sandbox → Identity Gemini CLI → Google Workspace Growth and Monetization Google Play → Google AdMob Google Ads Chrome Extensions → Google Search Central
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome, Firefox, IEのCopy & Paste実装方法 - Qiita
JavaScript製FlashPlayer「swf2js」swfをそのままHTML5に変換。 - Qiita
GitHub - williamngan/roll: roll and scroll tracking -- a tiny javascript library
JavaScriptのレベル別書籍のまとめ
Primer CSS
JavaScriptのクラス？コンストラクタ？？ - Qiita
