From data to Viz | Find the graphic you need
From Data to Viz leads you to the most appropriate graph for your data. It links to the code to build it and lists common caveats you should avoid. What kind of data do you have? Pick the main type using the buttons below. Then let the decision tree guide you toward your graphic possibilities. Alternatively, check the complete decision tree.
VueとFirebaseの基本機能全部使ってぬるぬる動くポートフォリオサイトを作ったのでソースと解説 - Qiita
絵描きとかUXとかやりつつフロントもやってる「ゆき」です。ポートフォリオサイトは10年くらい前にMoveableTypeで作ったきり。最近流石に「これでフロントやってますとか言ったら絶対次転職できなくね？」と危機を感じたので0から作り直しました。 サイト： https://pf.nekobooks.com/ ソース： https://github.com/yuneco/portfolio 機能・性能・運用を考えて作った結果、VueとFirebase(Web)の機能を一通り使ったサイトが出来上がりました。これからちょっと凝ったポートフォリオサイトを作りたい方向けに、どういう目的でどの機能を使ったのか、その時のポイントはなんだったのかを共有します。 2019.4.18追記 春なので期間限定1で桜が咲くアニメーションを追加してみました。単体のアニメーションはテストページで試せます。複雑に見えるか
極小WebアプリをURLに埋め込んで超ポータブルなWebアプリを作りたい！ - Qiita
やりたいこと データを変形・加工するスクリプトをURL上にホストをして、 ポータブルで永続的でブラウザで完結するWebアプリを作れるようにします！ Rubyはデータ加工に最適！ Rubyは豊富なメソッドが標準で用意されていて、特にArray, Enumerator, Stringなどよくデータを加工したいときに使えるメソッドがとても豊富です。 メソッドチェーンでつなげていけるところが、人の思考にあっていて、どんどんデータを変えていけるところがRubyの良さだと思います。 そのためデフォルトの言語はRubyです。JavaScriptもオプションで選べるようになってます。 そこで、 データ加工に便利なRubyで書いた小さいWebアプリをURL上にホストします！ URLにすべてのコードを載せてしまえば究極的にポータブルなWebアプリになるのではないかという発想です。Itty.bittyにインスパ
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた
Nintendo Switchの中ではReactが動いてる！Nintendo eShop開発秘話を聞いてきた 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回は、「Nintendo SwitchとWeb」という講演をされていた任天堂さんに、Switch開発におけるWeb技術の活用方法や、開発秘話を伺ってきました。任天堂のお二人は京都から、リモートでの取材に応じていただきました。 Nintendo SwitchではWeb技術が大活躍！ 白石 簡単に自己紹介をお願いで
Jest · 🃏 Delightful JavaScript Testing ドキュメント
スナップショット機能で大きなオブジェクトを容易に追跡できるテストを作成できます。スナップショットはテストと一緒に、あるいはインラインに埋め込んだ状態で表示できます。
Reactでシンセサイザーを作った話 - Speee DEVELOPER BLOG
こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし
CasperJS使い方メモ - Qiita
CasperJSを使ってスクレイピングをする機会があったのでこちらもメモっておきます。 まずは、phantomJS とそのラッパーであるCasperJSをインストールします。 1.インストール sudo npm install -g phantomjs sudo npm install -g casperjs phantomjs --version 2.1.1 casperjs --version 1.1.4 var util = require('util'); var fs = require('fs'); var system = require('system'); var casper = require('casper').create({ verbose: true, logLevel: "debug"}); casper.on('click', function() { /
【CasperJS】ログインする方法メモ - とりあえずphpとか
今回やりたかったのはログインが必要なページの取得。 単純にformをsubmitすればいいページとログインボタンをクリックするとjavascriptが動いてごにょごにょやってログイン処理へと遷移するパターンがあるのでそれぞれ実装してみたのでメモしておく。 formをsubmitするパターン ログイン画面 <form action="/login/do" method="post"> Email:<input type="text" name="email" id="email" /> Password:<input type="text" name="password" id="password" /> <input type="submit" value="Login" /> </form>スクリプト var casper = require("casper").create(); ca
CasperJSでブラウザ操作を自動化しよう - Qiita
NIJIBOX Advent Calendar の13日目の記事です。 はじめに 業務の中にはWEBサイトで毎日手作業で行うルーチンワークもあるかと思います。 簡単な作業でも、ブラウザを開いて、フォームに何かを入力して、ページ遷移するなど 毎回やっていたら面倒なことも、プログラムにしてしまえばコマンド１発で済んでしまいます。 そんな操作をプログラム化できるCasperJSの使い方を覚えたので、まとめて見ました。 導入編 インストールから簡単な使い方までの紹介です。実行環境はmacを想定しています。 CasperJSのインストール 公式サイトからダウンロードできます。npmがあれば以下のコマンドで簡単に導入可能です。
2017年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
って海の向こうの人が言ってました。 私はjQueryさえあれば概ね生きていけるので全然知らないけど、 あなたは全部知ってるフロントエンドエンジニアなんだね。すごーい！ 以下はFront-End Developer Handbook 2017の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール Dash 150以上のライブラリのAPIリファレンスを検索できる。有料、Mac専用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。 有料、Windows専用。 Zeal 200以上略 無料のオフラインドキュメント。 SEOツール Keyword Tool 検索ワードを入れると関連キーワードを教えてくれる。 Google Webmasters Search C
HTTP/1.1 200 OK - Qiita
※このお話はたぶんフィクションです。実在の人物や団体とはあんまり関係ありません。 序 planetter.comをバージョンアップすることにした。数年前にリリースしてからずっと放置していたけど、そろそろ手を付けないとやばいと思った。 しかしウェブの世界はドッグイヤーだ。3年も経てば何もかもが変わっている。しばらく開発から遠ざかっていた僕には、最近の技術トレンドなんてさっぱりわからない。 まずは自分自身をアップデートするところから始めよう。 Atom 最初はIDEだ。以前はEclipseを使っていたけど、いまはもうウェブ系言語の進化速度に追いつけていないようだった。ウェブ開発用のIDEならいまはWebStormが人気のようだ。有料だけど、最新の技術に対応しているし、使い勝手もいい。 でも最終的にはAtomを選んだ。IDE(統合開発環境)ではなくエディタなので、これ自体は単機能だけど、不足分は
D3.js と reveal.js の紹介 (2015/04/29 13:00〜)
Office のいらない office 環境 この資料は じゃいすと LT 第二回で使用する資料です． LT とか言いつつ，絶対ハンズオンレベルの量になっていて恐縮です． 私の回で話そうと思っていることをすべて書いているので， 事前に確認しておく必要はないです． スライド github 注) このイベントは 北陸先端科学技術大学院大学 (JAIST) の私的内部イベント です. そのため，外部の方の参加はご遠慮ください. 多分交通費がもったいないです. アジェンダ はじめに reveal.js の簡単な紹介 reveal.js ハンズオン D3.js の簡単な紹介 D3.jjs ハンズオン はじめに プログラミング言語 Office 環境化計画の第一弾です． 私は信仰上の理由から Microsoft が大嫌いです． あの，有料ソフトの癖にどんなパソコンにも入っていて， みんな使って当たり前
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CasperJSでウェブに自動で投稿する
JSLinux
988 + JavaScript Libraries : skuare.net