Phoenix | Phoenix
A lightweight macOS window and app manager scriptable with JavaScript. You can also easily use languages which compile to JavaScript such as TypeScript. Phoenix aims for efficiency and a very small footprint. If you like the idea of scripting your own window or app management toolkit with JavaScript, Phoenix is probably going to give you the things you want. With Phoenix you can bind keyboard shor
JavaScriptテスト自動化キホンのキ - Qiita
のように、ひたすら泥臭いコードを書くハメになる可能性があります。（これは極端な例ですが） また、このままではテスト実行後の結果がとても分かり辛いです。 どんなテストに成功したのか/失敗したのか、全体でどれだけテストがあって、どれだけパスしたのか。 はたまた失敗した場合に、どんな部分がNGだったのか。 これらを解決するためにあるのが、テストフレームワークと呼ばれるものです。 Javaで言えばJUnit、RubyではRSpec、PHPではPHPUnitやPHPSpecなどが該当します。 こういったテストフレームワークを使うことで、テストを簡潔に分かりやすく書けるようになります。 また、こんな感じでテスト結果も見やすく出力してくれます。 （下図はRSpecでのテスト実行結果の様子です） テストの成否具合や実施内容、問題となる内容が詳しく出力されていますね。 さて、このテストフレームワークですが、
VS Codeを使いこなせ! フロントエンジニア必須の拡張機能7選 - ICS MEDIA
「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知
Closure CompilerでJavascriptソースコードを圧縮 | Webシステム開発／教育ソリューションのタイムインターメディア
webのリッチインターフェースのUIが主流になってきた昨今、Javascriptファイルのサイズが肥大化し リクエスト時のトラフィックもそれに応じて肥大化してきています。 webページのパフォーマンス改善のためにも読み込むJavascriptやCSSのサイズはなるべく小さくしたいものです。 そこでGoogleが公開しているClosure Compilerを使ってJavascriptを圧縮してみます。 Closure Compiler Closure Compilerを使うにあたって選択肢は3種類あります。 Closure Compiler Service UI を使うClosure Compiler Service API を使うClosure Compiler Application を使う Service UIを使いたい場合は Closure Compiler Serviceからweb
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には
10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。 - 日々、とんは語る。
2015年はCSSが普及した以来となる10年に1度のフロントエンド大変革期で、それまでのツケが一気に回ってきたと個人的に感じていました。目まぐるしく状況が変化していきましたが、2016年になり、個人的にだいぶ落ち着いてきたと感じているので、ここらへんでまとめておきたい思います。 最初に結論を書いておくと、 『React + Redux + react-router + material-ui + axios + ES2015 + Babel + webpack + ESLint + Airbnb JavaScript Style Guide』 という組み合わせが、いま僕の採用しているJavaScriptの環境です。 主要ライブラリは React A JavaScript library for building user interfaces | React 去年、一気に普及したReact
フロントエンドがサーバー負荷を抑えるためにできること - アニメイトラボ開発者ブログ
はじめまして、アニメイトラボのフロントエンドエンジニア id:koharusugiura です。 フロントエンドエンジニアとして働いていると、いかにサーバーサイドに負担を掛けずに処理を行うかについて考えることも多いと思います。 そこで今回は、サーバーに画像の転送を行う前にクライアント側で画像加工をする話について書きます。 この記事は animateLAB Advent Calendar 2015 15 日目の記事です。 qiita.com JavaScript で画像処理を行う ウェブアプリケーションで画像ファイルの加工が要件にある場合、サーバー側で画像加工を処理するケースが大半だと思います。 しかし、データ通信のことを考えると、最適な考え方とは言えない気がしています。 近年、日本のインターネット回線の速度は大きく向上しているとはいえ、モバイルデータ回線はまだまだ速度的に完璧とは言えません
npm とか bower とか一体何なんだよ！Javascript 界隈の文脈を理解しよう - Qiita
背景 Javascript で Web アプリを作ろうとすると、よくわからないことだらけで超混乱します。 npm と bower の違いは？ npm はサーバーサイド用、bower はクライアントサイド用らしいよ えっ、でもなんで bower のインストールに npm が必要なの？ サーバーサイドは Rails で書きたいから npm 要らないと思うんだけど・・・ ていうかサーバーサイドJSとか node.js って何？ よく見る browserify って何？ こういった疑問が沸き上がるのは、各ツールが生まれた文脈がよくわかっていないからです。いろいろ調べてやっとちょっとわかってきたのでメモします。間違いがあったらご指摘ください。 「CommonJS」誕生 - Javascript は汎用プログラミング言語へ その昔、Javascript 大好きおじさんは言いました。 Javascrip
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
JavaScriptの動かないコード (中級編) iframe内にDOMアクセスできないエラー - 主に言語とシステム開発に関して
連載目次へ 以下のJavaScriptコードが意図した動作をしないのは，なぜですか。（制限時間１分） やりたい事： tenki.htmlの中に，天気が書かれている。 index.htmlのインラインフレーム内に tenki.html を表示して，その内容を解析する。 ※２つのHTMLは，同じフォルダ上にある。 index.html <input type="button" value="クリックして天気を表示" onClick="f()"> <br> <!-- ここに tenki.html を表示します。 --> <iframe id="ifr"></iframe> <script language="JavaScript"> function f() { // iframeを取得 var e_ifr = document.getElementById( "ifr" ); // ifram
クラスの落とし穴1 - プロパティの初期化 - Qiita
クラスの落とし穴1 - プロパティの初期化 (この投稿) クラスの落とし穴2 - メソッドとクロージャ クラスの落とし穴3 - 継承 クラスの落とし穴4 - プライベート変数の実装 はじめに javascriptでもクラスを作成する事が多くなってきました。 しかし、「javascriptにはクラスがない」とよく言われ、実装側が擬似的にクラスを定義しています。 クライアントサイドで大規模開発が増えてきたため、オブジェクト指向の概念で実装したいと思っているのでしょう。 javascriptでは安易な疑似クラスの作成によって見事落とし穴にはまる事があります。 ここでは、本来javascriptにはないクラスをうまく実装する方法を順に追って説明します。 "落とし穴とは、 うまく動いているけど気がついていないだけで実はマズい実装の事 とします 簡単なクラスの実装 クラスの定義には幾つかの方法がありま
ここ数年前から2015/5までのモダンフロントエンドを総まとめしてみた
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? HTML5や、次々と台頭するJavaScriptフレームワークにみられるように、現在のフロントエンドは異常なほど動きがあります。 常にキャッチアップしていないと、いつのまにかOLDな技術を使い続けることになります。実際に今回記事にしてみて、ちょっとつらくなりました。。 しかし、フロントエンドエンジニアとしてコードを書いていて（最近は主にJavaScript）、そのおもしろさに日々驚いています。 そこで今回は、ここ数年~2015年のフロントエンド界隈で一度は流行った技術、今後の動向などをまとめました。タイトルにモダンとありますが、その辺は
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にしてあげるだけ。
デザイナーやディレクターも知っておきたい、ページ表示速度の高速化の基本
スマホからウェブにアクセスするユーザが増え、ウェブサイトの表示速度の高速化がより重要な制作の課題になっています。1ページもののサイトなら、フロントエンド・エンジニアが一人で実装できるかもしれませんが、ある程度の規模のウェブサイトではワークフローやサイト全体の設計にも関わってきます。また、表示速度の高速化の方法を知らなければ、最適化しやすい、より高度なデザインは実現できないでしょう。エンジニアだけでなく、デザイナーやディレクターがこういった情報を知っていれば、よりスムーズに結果を出せるウェブサイト制作ができるはずです。 ページ表示速度の改善にはいろいろな方法がありますが、この記事では一番効果がありそうなところから攻めていきたいと思います。自分もまだまだ勉強中なので、まずはfilament groupのScottさんの記事 やClearleftのJeremyさんの記事 を参考に、フロントエンド
JavaScriptでフルスクラッチゲーム開発しよう 第1回 準備編 - Qiita
HTML5のゲーム開発向けフレームワークの乱立 昨今、HTML5のCanvas, WebGL, WebAudioAPiなど、Webフロントエンド技術でのゲーム開発に向いた技術が増えて、Webブラウザ向けのゲーム開発界隈が盛り上がりを見せています。 それに合わせて、JavaScriptによるゲーム開発向けフレームワークも広がりを見せ、どれを選べばいいか迷ってしまうほど、多くのフレームワークが登場しています。 習熟の道 しかし、HTML5ゲームの開発をする際にそういったフレームワークを使用することを選択した場合、CanvasやWebGLなどの特性を学ぶ他、そのフレームワークの使用方法や設計理念も学ぶ必要があり、目の前に登場する大きな要塞に立ちくらみを覚える人も居るかと思います。 「フロー体験」という考え方があり、技術の習熟においては、自分の現在の習熟レベルに合わせて技術を学習する必要があります
『jQuery で親フレーム子フレーム間の参照、操作【JavaScript】』
jQueryで親フレームと子フレーム間で関数の実行や要素の参照・設定を行うメモ。 本来はフレームなんか使わないでdiv要素なんかをゴッソリ変えるほうがスマートなんだけど 業務用しかも内容がたっぷりある場合はファイル自体が膨大になるし重くなる。 メンテも大変だしねｗ 当然PHPと非同期しまくりで内容によってはガリガリ動かすよりもフレームで切り替えたほうがヌルッと動く。 セキュリティや他の事情によりPHP側で出力を分けたいってときもある。 そんな時のために。（いいわけはこれぐらいでｗ） 子のnameやidで参照できるが、Firefoxではnameを設定していないと動作しない。 以下では子（インラインフレーム）のIDをchildframeとする。 jQuery1.4.4821145.1.712OKOKOKOKOK parent.html 親 <html> <script src="jquery-
iframe内のコンテンツサイズに応じて、frameの高さを動的に変更する方法 - Qiita
iframe内のコンテンツサイズに応じて、frameの高さを動的に変更する方法 docFrame.contentDocument.body.scrollHeight でも docFrame.contentWindow.document.body.scrollHeight でもサイズ取得できた。contentWindowがw3c基準でない。 動作確認バージョン IE9 Chrome 39.0 FireFox 33 <!DOCTYPE HTML> <html> <script type="text/javascript"> <!-- function change_frame_height(frm){ var contentsHeight; var docFrame = document.getElementById(frm); try{ contentsHeight = docFrame.c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2019 年版：Electron の環境構築（Windows 向け） - Toragramming
Class.prototype = { ... } が駄目な理由 - Qiita
s3pw.com