[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめBubble Layout Bubble Layout -GitHub まずはアニメーションを使った斬新なUI、バブルレイアウト。 ベースにはmo.jsが使われており、バブルをクリックしてからの遷移だけでなく、バブル自体も楽しいアニメーションで動かすことができます。デモページで実際の動きに触れてみてください。
![[JS]最近のWebサイトで見かける気持ちいいアニメーションや便利な機能が実装できる、使いやすいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/fe7aba32b3039602901d0b81d414d66c71a445ea/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016031405.png)
大型フロントエンド開発におけるTypeScriptとDDD // Speaker Deck
All slide content and descriptions are owned by their creators.
オラクル、エンタープライズアプリ向けJavaScriptライブラリ「Oracle JET」をオープンソースで公開。SPA、UIコンポーネント、レスポンシブ対応などを統合
オラクルはエンタープライズアプリケーション向けのJavaScriptライブラリ「Oracle JET」（Oracle JavaScript Extension Toolkit）をオープンソースで公開しました。 Oracle JETは、28の言語と160以上のロケールを備えたアプリケーションの国際化やテンプレートベースのSingle Page Application開発などをサポート。同社が以前から公開していたUIコンポーネントの「Alta UI」のほか、JQuery、KnockoutJS、RequireJS、Hammerなども含まれた統合的なライブラリになっています。 下記はOracle JETで開発されたデモサイトの画面。 Oracle JETには、フォームやボタン、メニュー、テーブルやデータグリッドなどのコンポーネントや、線グラフ、棒グラフ、パイチャート、エリアチャートなど多数のグラフ
Webサイトに華やかな表現を！ HTML5用パーティクルライブラリ「ParticleJS」を公開 - ICS MEDIA
JavaScriptライブラリー「ParticleJS」を公開しました。「ParticleJS」は大量の粒子（パーティクル）の表現を行うためのライブラリーで、ゲームの演出やスペシャルコンテンツなどの表現制作に役立ちます。HTML Canvasとして動作するので、デスクトップ・モバイルを問わずどのブラウザーでも動作します。 また、「Particle Develop」という専用のデザインツールも用意しています。このツールを使うと直感的な操作でデザインでき、出力したパラメーターを「ParticleJS」にコピペで読み込めます。デザイナーが作成したパーティクル演出をエンジニアが利用するといった連携を想定してます。 MITライセンスで公開していますので、商用利用問わずどなたでも自由に利用が可能です。ソースコードやドキュメントはすべてGitHubにて公開していますので参照ください。 ParticleJ
テストを使いサービス開発を駆動していくために取り組んでいること - クックパッド開発者ブログ
技術部の松尾(@Kazu_cocoa)です。 最近、 @moroや私を中心に、テストから開発を駆動するという方向で、とある活動を始めました。その活動の中では、 @t_wadaさん を 技術顧問 として巻き込んで活動を進めています。そんな取り組みを少しここにまとめます。 取り組みの前段階 先日、私はテストエンジニアというロールに焦点を当ててテストという言葉に対する2種類の話をいたしました。TDDのようにテストによって開発を駆動していく側面の話と、人の認知・感じ方に寄った仕様自体含めてテストしていく側面の話です。 クックパッドエンジニアトークナイト 〜クックパッドテストエンジニアのあり方〜 を開催しました！ クックパッドエンジニアトークナイト 〜クックパッドテストエンジニアvol.2 Testing編〜 を開催しました！ その際、会の傍でt_wadaさんらと私たちが開発するWebアプリケーショ
javascriptでのJSONの大きさ（サイズ）の取得 – joppot
概要 みなさんこんにちはcandleです。今回はプログラミングで少し手間取ったJSONサイズ取得の問題について書いていこうと思います。 JSONはjavascirptでわりと多く使われるオブジェクト型です。 JSONオブジェクトにどれくらいのデータが入っているか取得する方法が分かりませんでした。 調べていくうちに、Stack Overflowに上がっていたのを見て解決しました。 サンプルソース 下のソースコードをもとにJSONのサイズを取得し表示します。 ファイル名は「showjsonsize.html」としました。 ちなみに、間違った取得の方法も書いてあります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
jQuery.when() で、複数の非同期処理を扱う ｜ Tips Note by TAM
jQuery で AJAXするのに Deferred が便利ですよねーという話。 今回は jQuery.when() についてです。 複数の非同期処理を扱うとき たとえば、 JSONデータA を AJAX で取得したい 別のデータB も AJAX で取得したい 両方の取得が終わったら、続く処理をしたい こういう処理を Deferred の仕組みを使わないで書くと、こんな感じになりますでしょうか。 var data_a, data_b; $.getJSON('a.json', function (data_a) { $.getJSON('b.json', function (data_b) { // 両方終わった時の処理 console.log(data_a, data_b); }); }); Deferred を使わないと、コールバックの中に次のコールバックを書いて…… といった書き方です
プッシュ通知をブラウザに送るサービスが複数登場、今年の流行になるか？ | はじめてWEBニュース
「プッシュ通知を表示するサービス」が、今年に入り相次いで登場している。アッションは、インドWingify社のプッシュ通知サービス「PushCrew（プッシュクルー）」の国内提供を2月15日に開始した。同様に「プッシュさん」の提供をシロクが、「Pushdog Owned（プッシュドッグ オウンド）」の提供をPushdogが、それぞれスタートさせている。 「PushCrew」によるプッシュ通知のイメージ これらのサービスでは、ユーザーが自社サイトを閲覧していないときでも、ブラウザやモバイル端末にメッセージを表示できるもの。 プッシュ通知を送るには、次の手順が必要になる。 これらのサービスをサイトに組み込む（登録し、JavaScriptをHTMLに貼り付ける）。一度サイトを訪れたユーザーに対して「プッシュ通知送信」を許可してもらう。あとは、許可済みのブラウザに対して、任意のタイミングでプッシュ通
Learn React by itself -- no JSX, no Flux, no ES6, no Webpack.
Disclaimer: I love JSX, Flux, ES6 and Webpack. I’ll discuss these tools more in another series. Update August 2018: A newer, more complete introduction to React’s fundamentals is available at my course “React (without the buzzwords)”. It uses the latest version of React, and covers many topics that “Learn Raw React” is missing, including component state, asynchronous data storage, JSX, structure b
これはかなり気になる！スタイルシートの可能性が広がるReact.jsのCSS版のようなスクリプト -Descartes | コリス
「React: CSS in JS」からインスピレーションを得て、CSSをJavaScriptで記述し、スタイルの定義、変数・関数の利用、レスポンシブやスクロールなどのイベントに動的に値を生成できるスクリプトを紹介します。 Descartes Descartes -GitHub 上記ページではクリックする度に、背景色の値が動的に適用されています。 Descartesの特徴 Descartesの使い方 Descartesの特徴 DescartesはSassやLessのようなCSSプリプロセッサの良い点を取り入れ、CSSをJSONとして記述するとどうだろうと始めたオープンソースのプロジェクトです。スタイルのセットだけでなく、DOMへのアクセスや基本的なイベントリスナーに対応しています。 Descartesの書式は、SassやLessに似ています。 Descartesの基本スタイル パフォーマン
lazysizes - the ultimate lazyloader for responsive images, iframes and widget
lazySizes lazySizes is the ultimate and lightweight lazyLoader which lazy loads images (including responsive images (picture/srcset)), iframes and scripts. It is written in VanillaJS and with high performance in mind. Simply add the JS to your website and put the class lazyload to all elements, which should be lazy loaded. For a short API description go to the readme.md. Image with LQIP technique
[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes
スクリプトは外部ファイルを記述するだけ、レスポンシブ用画像の配置や設定はHTMLベースで記述できるスクリプトを紹介します。 超軽量（5.8KB）で、jQueryなど他のスクリプトは不要です。
![[JS]レスポンシブ用の複数サイズの画像をHTMLの記述で簡単に配置できる超軽量スクリプト -lazySizes](https://cdn-ak-scissors.b.st-hatena.com/image/square/135514efb4694efbd56028728da237fc700e16b1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201601%2F2016022202.png)
webpack+babel環境でフロントエンドもES6開発 - Qiita
概要 昨今、JavaScriptコミュニティ界隈で騒がれているES6（ES2015）。クラスの導入など便利な機能が追加されてNode.jsでは既に導入されているというのに、フロントエンド環境（ブラウザ）上で利用できるようになるにはまだまだ先になりそうです。 そこで、フロントエンド環境でもES6を先取って開発する為の環境構築方法を記載します。 webpack + babel環境インストール ES6からブラウザが利用できるJavaScript(ES5)にコンパイル＝変換を行う為の環境を構築します。 今回はwebpackという依存性を解決するツールとBabelというJavaScriptコンパイラを利用します。 本記事はライブラリ管理ツールであるnpmを用いる為、Node.js環境を既に構築してある前提です。Node.js環境のインストール方法はこちら。 参考：nodebrew を用いた Node
babel-plugin-typecheck を使って flowtype 文法で書かれたJSをランタイムチェックする - Qiita
https://github.com/codemix/babel-plugin-typecheck を使ってみた。 これは何 babelでflowtypeの構文を使って型エラーのランタイムチェックを行う。静的解析ではない。（自分がドキュメントから見落としてるだけで静的解析を行う方法がある？） 興味を持った理由 既存コードに対してtypescriptを導入するのは大変 flowtypeは既存コードからの乗り換えは簡単だが、型チェッカの挙動が未だに不審 コード上のドキュメントとしての型 + ランタイムチェックというアプローチなら十分では ESdoc等で型を書いてもあくまでドキュメント上の指定だが、flow syntax とこれなら実行可能という点が大きい。最悪動かなくてもランタイムチェックを外せば良い。型指定はドキュメントとして残る。 Install すでにbabel環境があることを想定
5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016
5カ月でAngularJSとTypeScriptでSPAを開発。その技術の選択理由と開発過程は？（前編） Developers Summit 2016 シングルページアプリケーション（SPA）は、最近注目を集めているWebアプリケーションのアーキテクチャです。HTML全体の書き換えは行わず、変更が必要な部分だけをJavaScriptで動的に書き換えていくことにより、反応がよくユーザー体験にすぐれたWebアプリケーションを実現できます。 このSPAの開発を、技術の選択、仕様の策定、開発を含めて5カ月で行った経験談が、2月18日に都内で行われた「Developers Summit 2016」（通称デブサミ）のセッション「5か月でAngularJSとTypeScriptでSPAをつくった話」で紹介されました。 注目されているアーキテクチャをいまどきの技術を採用して開発した事例は、立ち見がでる人気
Making A Service Worker: A Case Study — Smashing Magazine
Service workers do a lot of different things; there are myriad ways to harness their powers. In this article, Lyza Danger Gardner explains what a service worker is and how to put together your own by registering, installing, and activating it without any hassle. She decided to build a simple service worker for her website that roughly mirrors the features (provide a customized offline fallback exp
JavaScriptでCSVデータ(項目行あり)をJSON形式に変換する | Try Lifelog
駅データ.jpの路線や駅のデータは、先頭行が項目名になっているCSV形式で提供される。こういった「項目行があるCSV形式」ファイルをJSONに変換する方法。項目行で指定される項目名を、そのままJSONデータのプロパティ名として利用する。(そのため、ファイルの種類によらず汎用的に使える。) 入力データ (例) company20130120.csv company_cd,rr_cd,company_name,company_name_k,company_name_h,company_name_r,company_url,company_type,e_status,e_sort 1,11,JR北海道,ジェイアールホッカイドウ,北海道旅客鉄道株式会社,JR北海道,http://www.jrhokkaido.co.jp/,1,0,1 2,11,JR東日本,ジェイアールヒガシニホン,東日本旅客鉄道株
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hello, ES6 ~これから迎えるJSのミライ~ - @yoshiko_pg
yoshiko-pg.github.io
CSS goes 3D with voxel.css
