gistやYoutube、Vine、TwitterやGoogle Mapなど、様々なサービスをembed出来る・「embed.js」
embed.jsは様々なサービスの埋め込みを容易に行えるようにする為のスクリプトです。テキストから自動で文字列を解析し、embedしてくれる、というもの。例えばGistやYoutubeなら、URLを貼るだけで勝手に埋め込みをしてくれます。現在対応しているのはFrickr、Vine、Google Map、Twitter、Vimeo、USTREAM、Youtube、CODEPEN、JSFIDDLE、Instagramなどの他に、任意の画像、音声、動画ファイル、URLの自動リンク化、markdownのパース、絵文字サポートからsyntax highlightまで多岐にわたります。結構便利。CMS等に摂り入れたいスクリプトですね。ライセンスはMIT。 embed.js
ThreaditJS
ThreaditJS is an example application for SPA libraries/frameworks. For news, please follow @ThreaditJS. This page collects implementations of a thread-based discussion application all interacting with the same API. The intent is to provide side-by-side comparisons for tasks every ES2015 client application will necessarily complete. It should be considered a friendly competitor to TodoMVC. The main
JavaScript の過去と現在、ガチな JS アプリケーション設計
はじめよう TypeScript - 入門から実践まで - 素の JavaScript とはさようなら!
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">
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
俺の最近のRailsのJS開発環境を教えてやる - Qiita
はじめに railsのsprocketsがキツイ。特にjsファイルが多くなると開発がとっってもキツイ。 layoutに こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rail
Vibrant.js·画像を解析して主だった色をピックアップ MOONGIFT
写真はそれ単体で載せるだけでなく、写真に合わせてコンテンツの雰囲気を変えたりするとより際だって表現力が高くなります。そのためには写真の解析が欠かせませんが、これは意外と難しいです。 そこで使ってみたいのがVibrant.jsです。写真を解析し、主立ったカラーパレットを抽出してくれるライブラリです。 Vibrant.jsの使い方 Vibrant.jsを使って解析された画像の背景にメインカラーを当てています。 必ずしも一番多い色ではなく、その写真の中で一番目立っているところを使っているのが分かります。 この手のライブラリは幾つかありますが、どの色をピックアップするか、さらにどれを優先するかはアルゴリズムによって違って面白いです。写真を元にしたカラーリストの作成やデザインのインスピレーションを得るのにぴったりではないでしょうか。 Vibrant.jsはJavaScript製のオープンソース・ソフ
lory
Touch enabled minimalistic slider written in vanilla JavaScript Hardware accelerated transitions Usable as a jQuery plugin Options for custom easing effects infinite looping ~ carousel No compromises for fallbacks Written in ecmascript 6 Using webpack, babel & eslint for development Download Here or via cdn from cdnjs Prerequisited Html structure Class names can be changed through options <div cla
jQueryはNGと言われた時の便利なメソッド - Qiita
とあるお仕事で、jQueryなどのライブラリー利用不可というものがありました。その際利用した、jQuery的に使える便利なメソッドをメモしておきます。（※ 昔使っていたものを引っ張りだして改善したものなので、どこかで公開されている可能性があります） 更新 addClass,removeClassを修正致しました。 元記事 下記エントリの転載になります。 jQueryがNGな時に備えて、用意しておきたい便利なメソッド イベントリスナ jQueryでいうところの、.on() に該当するものです。 "addEventListener" か "attachEvent" かを判定し、addEventメソッドを定義しています。 var addEvent; if (window.addEventListener) { addEvent = function (target, name, fn) { if
フロントエンドできない人が、フロントエンドやりすぎだ。あと、Vanilla.jsが便利だ。 - nobkzのブログ
最近、なんというか、フロントエンド勉強会に出席する度に、「フレームワークじゃねぇんだ! MVC設計がな! 」とか言い続けている気がする。たくさんフレームワークが出てきて、○○フレームワークの問題とか、開発の困難の話を聞く度に、自分の設計を棚に挙げて、「これは、フレームワークがスケールできないせいだ!」「jQueryが糞」とか言ってて、「何言ってんの?コイツ?」みたいな気分になる。 最近になって、なんでこの状況がいつまでたっても変わらないんだろう? って理由が分かってきた。フロントエンドできない人が、フロントエンドやりすぎなのだ。 なんでフレームワーク使うの? そもそも、なんでフレームワークを使うか?ってことに答えられない人が多い気がする。というか、大抵「上司が決めたから」とか「チームで決まっているから」という答えが返ってくる。そもそも、フレームワークを強制して学習させる環境になっている現場
React Native — write native apps with React.js - /dev/zine
At React.js Conf 2015 Facebook announced React Native — a way to write native iOS and Android applications with JavaScript using the familiar React.js. What is React Native React Native is a way to build native apps in JavaScript using React.js for user interface. It doesn't use DOM for rendering, instead, it renders with native UI views. You write normal React components, but instead of using low
脱初心者のためにこれだけは知っておきたいJavaScriptネタ
脱初心者のために これだけは知っておきたい JavaScriptネタ Tsuyoshi Akase 福岡Haxe勉強会 feat. HTML5+α @福岡 第0x00回
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SweetAlert
jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
selectタグの機能を大幅に向上させる「selectivity」:phpspot開発日誌
GitHub - ladjs/superagent: Ajax for Node.js and browsers (JS HTTP client). Maintained for @forwardemail, @ladjs, @spamscanner, @breejs, @cabinjs, and @lassjs.
PWABuilder
GitHub - HubSpot/messenger: Growl-style alerts and messages for your app. #hubspot-open-source
SLOBSERVER - L'actualité de Second Life
