タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

jsに関するyuhi_asのブックマーク (8)

  • URLのクッションページを動的に生成 - Qiita

    必要になったので作ったが、こういうTIPS投稿サイトに投稿することを念頭に入れてると、jQuery使わない方がいいような気がしてヤキモキしますね……(震え声) 特徴は、このページから飛んだ場合、飛び先でリファラが「about:blank」になるから、足が一切つかないことか。メリットとなる場合もデメリットとなる場合もありそう。 なんか怪しいサイトのために作られたような存在だな……(震え声) function openCushionUrl(url, isOpenInNewTab) { if (isOpenInNewTab === void 0) isOpenInNewTab = true; var viewUrl = (function(html){ var elem = document.createElement('div'); elem.appendChild(document.crea

    URLのクッションページを動的に生成 - Qiita
    yuhi_as
    yuhi_as 2016/03/28
  • 60fps scrolling using pointer-events: none

    60fps scrolling using pointer-events: none Paul Lewis did an interesting article a while back about avoiding unnecessary paints through disabling hover effects as the user scrolls, which is a great approach. The down side being managing all your hover states through a parent class. UPDATE: I’ve done a follow up article which demonstrates a more robust technique. That approach doesn’t scale well an

    yuhi_as
    yuhi_as 2016/03/08
    pointer-events: none;でのパフォーマンスチューニング、そういうのもあるのか
  • File APIとCanvasで画像をリサイズしてアップロード - SPICY SPACE BLOG

    以前自分の結婚式のために作った画像投稿サイトで、クライアント側で画像のリサイズを行う投稿フォームを作ったときのことを書きます。 自分の結婚式に写真投稿サイト作ってみた話。 - SPICY SPACE BLOG HTMLで画像投稿する必要性 結婚式の来場者に、式中の写真をスマホから投稿してもらうサイトなので、 スマホで撮影した2MB近い画像を、3G回線でアップロードするにはムリがあります。 かといって撮った写真を別アプリでリサイズしてからアップして下さいっていうのはユーザーに負担をかけすぎなのでナシ。 そもそもスマホアプリとして作るというのも検討しましたが、iOSの場合、アプリを一般公開しないといけないですし、まぁ結婚式の準備と平行してiOS、Android両対応のアプリを作る余裕は全くありませんでした(笑) ということで、Webサイト上でスマホの写真をリサイズする必要がありました。 実装方

    File APIとCanvasで画像をリサイズしてアップロード - SPICY SPACE BLOG
    yuhi_as
    yuhi_as 2016/01/06
    画像アップロード前のクライアント側でのリサイズ、やろうかと思ったけどまだ色々闇がありそうだなあ
  • 2015年、キャッチアップをさぼっちゃった人の為のReactプロジェクト入門 - Qiita

    React.js Advent Calendar 2015 17日目の記事です。 Reactベースでプロジェクトを始めようと思うと、Boilerplateとしてreact-starter-kitreact-static-boilerplateが見つかります。これらはReact以外のツールやライブラリを大量に利用している為、事前知識がないと何がどう動いているのか、何から調べれば良いのかを把握するのが難しかったりします。 この記事では、個人的にプロジェクト構成を作り始める前にざっくりと知っておきたかったと思う事前知識と、その学習リソースについてまとめようと思います。 2015年にWebフロントエンド開発トレンドについてキャッチアップをさぼっちゃったなー、という方がモダンな環境でReact開発をスタートする一助になれば嬉しいです。 以下、ES2015, Babel, Webpack, Flux

    2015年、キャッチアップをさぼっちゃった人の為のReactプロジェクト入門 - Qiita
    yuhi_as
    yuhi_as 2015/12/21
  • 業務システムで使えるグリッドライブラリ×8選

    Webベースの業務システムを作っている際に必要になるのがデータの一覧画面です。多くのデータを一覧でき、かつスクロールした際にもデータの確認が容易であることなどが求められます。 今回はそんなデータを表示するのに最適なOSSのグリッドライブラリを紹介します。一部のライブラリは編集機能も備えており、さながら表計算ソフトウェアのようになっています。 Sensei Grid シンプルかつ軽量なデータグリッドライブラリです。矢印キーやタブを使ったセルの移動、エンターキーで編集ができます。とてもシンプルなライブラリなので、マスタメンテナンスなどに向いています。(注:2015/06現在「Currently not intended for production use」とのことです。) Sensei Grid kawasima/jagrid Excel方眼紙を再現できるライブラリです。こだわればかなり精密

    業務システムで使えるグリッドライブラリ×8選
    yuhi_as
    yuhi_as 2015/12/04
    ンモーまたグリッドライブラリ増えてる
  • Finder.js - Finder風UIを再現するJavaScript MOONGIFT

    普段使い慣れたUI/UXであれば誰でもすぐに使えるようになります。そこで注目したいのがOSの動きです。OS標準のソフトウェアであれば誰もが使っていますので、そうしたインタフェースであれば違和感なく使いこなせるのではないでしょうか。 今回はMac OSXユーザであればお勧めなFinder.jsを紹介します。Mac OSXユーザも増えてきているので良いかもしれませんね。 Finder.jsの使い方 シンプルなFinder風のUIです。 フォルダをクリックするとドリルダウンできます。 階層の途中でもファイルをクリックすると、その情報が表示されます。 アイコンを追加したり、データをAjaxで取るようにもできます。 矢印キーで移動できるのでさくさく操作できます。 Finder.jsはフォルダ/ファイルに代表されるような階層構造のデータを表すのに便利です。大量のデータがあるとかえって見づらいこともあり

    Finder.js - Finder風UIを再現するJavaScript MOONGIFT
    yuhi_as
    yuhi_as 2015/12/02
    Web用ファイルエクスプローラ作るのに使えるかな
  • phiary

    Vue.js 入門です. 1.0 対応してます. 説明うんぬんよりもとりあえず触ってみたいって方向けの入門エントリーです. Runstant を使って, 今すぐに Vue.js 始めちゃいましょう♪ 「これ何やってんの?」 とか 「どういう意図で??」 などありましたら 気軽に下のコメントや Twitter にて質問してください. Runstant デモです. input box の内容を変更すると 上のメッセージが連動して変わるのがわかるかと思います. Runstant で作ってあるので, 実際にコードをイジって試せます. Vue.js の使い方 1. Vue.js を読み込もう cdn 経由で読み込んじゃいます. <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.10/vue.js'></script> これで準備完

    phiary
    yuhi_as
    yuhi_as 2015/11/25
    Vue.js、69KBくらいかぁ。データバインディングコードがきれいになるなら入れてもいいかな
  • 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」:phpspot開発日誌

    Programming and Designing for the Web FrogJS Javascript Gallery FrogJS is a simple, unobtrusive javascript gallery. It is not a replacement for other thumbnail galleries such as Lightbox JS, but rather a different way of showing galleries. 超クールな画像スライドショーを実現するためのJavaScriptライブラリ「FrogJS」。 以下のデモサイトを見ると分かりますが、今までにない超クールなスライドショーを実装できます。 実装方法は、まずスクリプトを読み込みます。 <script type="text/javascript" src="scripts/p

  • 1