2017年の近況.js - 思ったこと
前回の記事を書いてから半年も経過しててびっくり。毎月何かしら脳がシェイクされるようなことが起きてて、予定なんか何も入れてないつもりでもカレンダーみるとグッチャグチャになってるー 忘れないうちに近況めも npm doctor npmに、npm doctor コマンドを追加した。 Add new subcommand `npm doctor` by watilde · Pull Request #14582 · npm/npm · GitHub もちょいでopenなissueが3000を超えるnpmのリポジトリだけど、自分なりにできることを積み重ねていってる。 issue reportの正規化 正規化されたissue reportを元に、trouble shootingの追加 trouble shootingを元に、自動診断コマンドの追加 次のステップとしてauto fixの追加を考えてる モ
薄いフレームワーク指向の Web クライアントサイドプログラミング - Hatena Developer Blog
こんにちは、Web アプリケーションエンジニアの id:nanto_vi です。先日開催された Kyoto.js #12 において、「薄いフレームワーク指向の Web クライアントサイドプログラミング」と題した発表を行いました。とある Web アプリケーションの開発にあたって、JavaScript による GUI プログラミングにどう取り組んだかという話になります。当日のスライドの内容に口頭で伝えた内容を加え、以下にまとめます。 前提 SPA ではない そこまで覚悟しなくてもよい 薄いフレームワーク指向 cf. ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011 開発期間が決まっている Web アプリケーションを新規開発するにあたり、クライアントサイドをどう実現するか。ここでは開発期間が決まっているというのが大きな要因となり、チームメンバーの
Modern JavaScript概観、そしてElectronへ | さにあらず
この一か月分の学習成果を整理したリポジトリを作ったので、その成果についてまとめておく。 作ったサンプルプロジェクトだけを手軽に欲しければ、このリポジトリを clone してほしい。 taichi/js-boilerplatemaster ブランチには、ミニマムな JavaScript 開発環境がサンプルコード付きで入っているfrontend ブランチには、React/Redux/webpackなウェブアプリケーション用の開発環境が入っているデフォルトブランチにしてある electron ブランチには、frontend ブランチの内容に加えてElectronでアプリケーションを開発するための環境が入っているはじめに#最近の JavaScript について#僕は仕事として JavaScript を書いている訳ではないけども、この半年くらいの間にちょっとしたツールならいくつか作った。どちらも便利
最強のフロントエンドの雛形作った (2016/12/31) - Qiita
yarn とりあえず yarn install と yarn start だけで動く npm(yarn) scripts babel/webpack での多段ビルド build:js はChromeでだけで動くビルドを吐く（デバッグを容易にするため） build:js:production はIE11+ ava/nyc/istanbul でテストとカバレッジ postcssでCSSのビルド uglify-js/csswring で圧縮 CircleCI eslint, flow, ava release ブランチに push で gh-pages にデプロイ ## やってないこと React も Angular も jQuery も何も入ってない。あくまでそれ以前にやることをまとめた。 参考になるだろうけど、人によっては使わないツールも多いと思われるので、適当に削ってください。 こういうの
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
Wantedlyの最近のReact事情についてMeguro.es #3で発表しました! - Wantedly Engineer Blog
目黒界隈のJavaScriptを書くエンジニアがあつまる勉強会、 “Meguro.es #3 in Drecom”に参加してきました。 会場はドリコムさんのオフィス内のカフェのようなスペースで、お酒を飲みつつ、ゆるやかで居心地良い雰囲気でした。 Wantedlyからは高松と森脇の2人で最近のWantedlyのフロントエンド開発で使っているツールやライブラリの話をしました。 WantedlyにReact + Reduxを導入した話 Wantedlyのこれまでのフロントエンド開発の歴史と、既存のRailsプロジェクトにReact + Reduxを導入した方法について話しました。 Immutable.jsとReact @Wantedly ~入門編~ Facebookが開発している不変オブジェクトライブラリの Immutable.jsの特徴や、Wantedlyでの活用例についての発表です。 We
日本のWebエンジニアの大半が、変化に対応しきれなくなっている件について。 - 日々、とんは語る。
先週書いた10年のツケを支払ったフロント界隈におけるJavaScript開発環境（2016年4月現在）。という記事がまずまずの反響を得たのですが、僕の予想とは異なり、「こんなに多くのツールやフレームワークを必要とする現状はおかしい」といった、状況批判の意見が多く集まりました。 Mediumなど海外メディアでは、もはやこの種のツールを組み合わせたフロントエンド開発が当たり前として受け入れらており、この半年間ほどは「実際にどの組み合わせがベストか」という議論が行われていました。そして、そういった議論もようやく落ち着きを見せ、おおよそ僕が書いたような組み合わせに帰結しつつあります。 そのため、まさか「フロントは変化が激し過ぎる」とか「保守が大変そう」などといったような、1年くらい前に言われていた意見が、いまだに多くを占めるとは、まったく予想していなかったというのが正直な意見です。ひと昔まえであれ
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
Umbrella JS
Tiny library for DOM manipulation and events https://cdn.jsdelivr.net/npm/umbrellajsGithub Download Try it Intuitive and Documented It is strongly influenced by jQuery with many similar methods so you'll feel at ease developing with Umbrella. However there are some extra features like .handle() and some methods like .append() are more flexible: Documentation // Simple events like jQuery u("button"
JS自動レビューツール"jswatchdog"を公開しました - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。kintone 開発チームの天野 (@ama_ch) です。すっかり春らしくなりましたね。 少し前に JS の自動レビューツール jswatchdog をオープンソースで公開しましたので、こちらで紹介させていただきます。 使い方 https://kintone.github.io/jswatchdog/ 上記の URL を開き、左側のエディタに JS コードを貼り付けるだけです。 右側に修正が必要な箇所が表示されるので、適宜修正します。 特徴 バリバリの開発者じゃなくても使いやすい一画面完結の Web インターフェース lint ツールでお馴染みの構文チェックの他、知らずに脆弱性を作り込むことを避けるため、XSS の可能性がある箇所にも警告を表示 内部的には、JS の静的構文チェックツールとして ESLint と JSHint を組み込んでいます。 さらに XSS の可能性があ
60fps on the mobile web — Flipboard Engineering
Flipboard launched during the dawn of the smartphone and tablet as a mobile-first experience, allowing us to rethink content layout principles from the web for a more elegant user experience on a variety of touchscreen form factors. Now we’re coming full circle and bringing Flipboard to the web. Much of what we do at Flipboard has value independent of what device it’s consumed on: curating the bes
createObjectURLがすごい件 - プログラムモグモグ
最近またLocal Player (Chrome Player)を実装しなおしています. 一応説明しておくと, Local Playerは, 完全にローカルで動作する音楽プレイヤーです. シンプルさを求め(実装がめんどくさいだけ), 操作しやすく(これは大事), 良い感じのプレイヤーです. 半年前に, ソースコードがスパゲッティになって, 開発を中断していましたが, 最近また書きなおし始めたのです. 音楽プレイヤーをブラウザー上で実装するのには, 音楽ファイルをJavaScriptで読み込まなければなりません. そこでHTML5ですよ！！！ <audio src="url/to/musicfile.mp3" type="audio/mp3" /> みたいな感じで, 音楽を再生できます. 詳細は他のページに譲ります. さて, 音楽ファイルを再生するには, ローカルファイルからurlをaudi
[JavaScript] ただただ、ウンコード。-ウンコード・マニア
「JavaScriptできます！」って入ってきた人のコードです。 これで。出来たからリリースしますって言われました。絶対無理。 本気で。@use jQuery でお楽しみ下さい。 $(function(){ hogehoge(param); }); param = { unko: 1, unko2: 100 }; // liveにすると動いた $(".Act_Button").live("click",function(){ // 処理 }) 使い方ヒント: 「これは臭う」という行を見付けたら、各行のをクリックしてマーキングしておきましょう(要Twitter OAuth認証)
JavaScriptテクニックバイブルのレビューを手伝いました。 - hagino3000's blog
校正段階でレビューだけ手伝いました。若手IT勉強会の皆様による執筆。対象読者はJS中級者、2~3年目のエンジニアとの事です。 JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技 JSサポーターズ 技術評論社 売り上げランキング : 1582 Amazonで詳しく見る テクニックバイブルシリーズなだけあっていろいろ載っている。足回りの開発ツールから、新しめのライブラリの使い方、JSの流儀まで。Node.jsについて3ページ割かれているのを除いてクライアントサイドの話。「現場のJSerが贈る」と表紙にある通り、古いIEでの嵌り所もちゃんと書いてあって親切。 良いなと思った所。次に挙げる4つの章 4章：関数を活用する 5章：ネットワーク通信を改善する 6章：タイマーイベントを活用する 8章：パフォーマンスを改善する は賞味期限の長い普遍的なテクニックが詰まっている、1~2年
[JavaScript] 彼は何がしたかったのか-ウンコード・マニア
先月辞めていった同僚が書いていたコード。 いったいどういう意図でこのファンクションが作られ、どういう経緯でこういう形になったのか見当もつきません。 function Class_wo_Chousei(){ //数値によって付加するクラスを変える if(なんかの条件){ $("unko").addClass("kuso"); } else { $("unko").addClass("kuso"); } //ここでクラスを調整 $("unko.kuso").removeClass("kuso"); } 使い方ヒント: 「これは臭う」という行を見付けたら、各行のをクリックしてマーキングしておきましょう(要Twitter OAuth認証)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 5.1.0.beta1はどのようにモダンなJavaScript開発を実現しているのか？ // Speaker Deck
革命と秩序とSPA
TechCrunch | Startup and Technology News
PayPal社がバックエンドをJavaからJavaScriptへ移行
