2018年のフロントエンドエンジニアならこの程度は知ってて当然だよな？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 可及的速やかにReactが絶滅しますように。 以下はFront-End Developer Handbook 2018の第三部、Front-end Developer Toolsからリンクされているツールと、その簡単な紹介です。 ドキュメントツール 開発者向けドキュメント、APIリファレンス Dash 200以上のAPIリファレンス、100以上のチートシートを一括ダウンロードできる。有料、Mac用。 DevDocs 200以上のライブラリをオンラインで検索できる。無料。 Velocity 中身はDashと同じ。有料、Windows用。
mermaid.jsが素晴らしいけどなかなか使ってる人見かけないので実例晒す(追記あり) - Qiita
mermaid.jsとは JavaScriptのチャート作成ライブラリです。他にも似たようなのは色々ありますが、これ一本でフローチャート、シーケンス、ガントに対応してるので、個人的にお気に入り。 http://knsv.github.io/mermaid/ サイトの各チャートのページ見ると書き方と何ができるかはわかるので、ご覧あれ。 僕の使い方 JSのライブラリを自分でインポートして何かすることはほとんど無くて(後述の理由からガントだけJSで使ってるけど)、基本的には以下の2つの方法で使ってる。 Haroopad フリーでクロスプラットフォーム(OS X, Win, Linux)なMarkdownエディタ。 v0.13からmermaid.jsがインテグされているので、何もしなくてもそのまま使える。 mermaid.jsのグラフの書き方は、コード表記で、言語をmermaidにしてあげるだけ。
GitHub - mermaid-js/mermaid: Generation of diagrams like flowcharts or sequence diagrams from text in a similar manner as markdown
Mermaid is a JavaScript-based diagramming and charting tool that uses Markdown-inspired text definitions and a renderer to create and modify complex diagrams. The main purpose of Mermaid is to help documentation catch up with development. Doc-Rot is a Catch-22 that Mermaid helps to solve. Diagramming and documentation costs precious developer time and gets outdated quickly. But not having diagrams
Flow | A static type checker for JavaScript
Code Faster.Tired of having to run your code to find bugs? Flow identifies problems as you code. Stop wasting your time guessing and checking. Code Smarter.It's hard to build smart tools for dynamic languages like JavaScript. Flow understands your code and makes its knowledge available, enabling other smart tools to be built on top of Flow. Code Confidently.Making major changes to large codebases
JavaScriptを綺麗にしてくれる便利ツール『JS Pretty』 | 100SHIKI
似たようなツールはよくあるが、ドメイン名が覚えやすかったのと機能が豊富なのでご紹介。 JS Prettyでは、JavaScriptのソースを綺麗にしてくれるツールを提供している。 使い方は簡単で、綺麗にしたいソースを貼り付けるだけだ。 オプションも豊富で、インデントを何桁にするかとか、配列で桁を揃えるだとか、チェーンメソッドで改行するか、とかのマニアックな設定が可能だ。 よくJavaScriptをいじる人だったら知っておいても損はないかもですな。
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
Backbone-Eye·Backboneアプリを開発するならFirefoxでいこう！ MOONGIFT
これは面白い！ Webアプリを開発する際に注目を集めているフレームワークBackbone。あまり厚くない仕組みになっているので理解はしやすいのですが、それでも開発時には色々難問にぶつかることがあります。そこでDevtoolsのような開発ツールが役立ちます。 さらにそれを一歩進めてBackbone専用に特化させたのがBackbone-Eyeになります。Firebug専用のツールになっており、Firefoxに元々含まれている開発ツールでは動きませんのでご注意ください。 インストール インストールはMozilla Add-onsから行えます。Firebugも忘れずにインストールしましょう。 インストールしたらBackboneアプリケーションを開きます。 使い方 こちらはサンプルのBackboneアプリケーションです。Firebugを開きます。 Firebugを開くとBackbone-Eyeのタブ
Graspを使ったJavaScriptのリファクタリング
Refactoring your JavaScript code with Grasp | Grasp - JavaScript structural search, replace, and refactor という記事では、Grasp を使ったJavaScriptコードのリファクタリングについて書かれています。 この記事は Refactoring your JavaScript code with Grasp | Grasp - JavaScript structural search, replace, and refactor の簡単な紹介です Grasp は JavaScript ASTを元にgrepのような検索、sedのような置換などを行えるコマンドラインツールです。 GraspはNodeで(実際にはLiveScriptで)書かれているツールで npm 経由でインストールできま
Introducing TogetherJS – Mozilla Hacks - the Web developer blog
What is TogetherJS? We’d like to introduce TogetherJS, a real-time collaboration tool out of Mozilla Labs. TogetherJS is a service you add to an existing website to add real-time collaboration features. Using the tool two or more visitors on a website or web application can see each other’s mouse/cursor position, clicks, track each other’s browsing, edit forms together, watch videos together, and
pjaxできれいなURL＋非同期画面遷移！ | ヘッドウォータースのブログ TechNote
こんにちは。荒井です。 Facebookもtwitterもgoogleも画面遷移のときには、非同期で次のページを読み込むような作りになってますね！ これは、ajaxで次のページを読み込むのと同時に「History API」というHTML5の機能を使って、URLを更新することで実現してます。 毎回全部読み直さないから通常の画面遷移よりも早いし、URLが変わるから履歴に残るし、良いことばっかり！！SEO的にも「#!」を使ったやつより良いよっていうのを何かで読みました！！！ これからWebサービスを作るなら、導入したいですね！！！ これpjaxを使えば簡単に導入できるんです！！！よし！！！ PJAX!! pjaxとは、GithubのChris Wanstrathって人が作ってるjqueryプラグインです。 上で説明した、History APIとajaxを使った非同期の画面遷移を簡単に導入すること
JavaScriptで自動化！Pacifista入門 - Qiita
皆さん環境構築とか、システムの設定作業とかって、どのように作業していますか？ 古きは環境構築手順書を使って行なっていましたが、昨今の自動化ブームに伴って、 chefやcapistrano、fabricなどのツールを検討されている方も多いと思います。 ただ、最近はやりの自動化ツールって、RubyとかPythonを多少知っている必要があったり、 独自DSLや特殊な用語を覚える必要があったりと、学習コストが高くてとっつきにくくないですか？ まわりにススメても「あー便利そうだねけど難しそうだね」で終わってしまうパターンが多々あります。 そこでPacifistaですよ Pacifistaは「環境構築をまるごとプログラミングする。それもシンプルに」を目的としたOSSの自動化ツールです。 Pacifistaには、以下の特徴があります。 JavaScriptでコードを書く事が出来る。 JavaScript
PhysicsJS - A modular, extendable, and easy-to-use physics engine for javascript
","css":"html, body { height: 100%; margin: 0; }\n#viewport { position: relative; height: 100%; background: #1d1f20; }","js":"require.config({\n baseUrl: 'http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/',\n packages: [\n {\n name: 'physicsjs',\n location: 'physicsjs-current',\n main: 'physicsjs-full.min'\n
マイクロソフトがテストツール「BrowserSwarm」発表
テスト結果はInternet Explorer（IE）、Google Chrome、Firefox、Safari、OperaなどのWebブラウザのバージョンごとに合格率が表示される。テストに合格した項目と不合格だった項目は別々に参照でき、修正が必要な個所がすぐに分かるようになっている。 BrowserSwarmのプロジェクトは、jQueryライブラリの開発などに参加しているappendTo、クラウドベースのテスト用プラットフォームを提供するSauce Labs、マイクロソフトのInternet Explorer（IE）チームが協力して手掛けている。 IEチームは「質の高いフレームワークは現代のWebの基盤であるにもかかわらず、さまざまな端末やWebブラウザで横断的なテストができるリソースはあまり存在していなかった。BrowserSwarmでは相互運用性を備えたフレームワークの構築を支援する
ブラウザで開発！初めてのIntel XDK
画面に「Application Created Successfully!」と表示されて、まっさらなプロジェクトが表示されます。 以下で見えているのはエミュレーションモードで、エディタモードへ遷移するには左上にある先ほどの「START NEW」ボタンの左側「EDITOR」ボタンをクリックします。 生成されたindex.htmlのソースを見ると、ブランクというわりには、以下のような何やらテンプレ的なものが並んでいます。 <script type="text/javascript" charset="utf-8" src="_appMobi/appmobi_local_bootstrap.js"></script> <script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Google、Webブラウザで実行できる機械学習ライブラリ「deeplearn.js 0.1.0」をリリース
Site Under Maintenance
サイバーエージェント、自社のスマホ向けアプリ開発ツール「beez」「adbkit」をOSSで公開
正しいクレジットカードの入力フォームを提供『Creditcard.js』 | 100SHIKI
deconcepter.jp