ウェブページの表示を遅くなくしたい時の道標 - ぱすたけ日記
このエントリは以下のアドベントカレンダーの19日目の記事です。 はてなエンジニア Advent Calendar 2019 - Qiita 前日は id:onk さんの Percona Toolkit を読む - id:onk のはてなブログ でした。 KMC Advent Calendar 2019 - Adventar 前日は machida さんの (null) でした 突然ですが、先日行きつけのビアバーの店主が使っているPCが遅いという話があり、様子を聞くとどうやらHDDで且つメモリも4GBという雰囲気で、触ってみると、たしかにWindowsのホームメニューを出すのに数十秒とかかかっていて、これで暮らしているのは大変だろうと思い、HDDをSSDに、メモリは16GBに増強するということをしました。その結果見事に体験は改善されました。 一方、このときにふと思ったのは、速くなったねとは思
最近の砂場活動その3: フロントエンド編(Vue.js/SPA) - yasuhisa's blog
Vue.jsでフロントエンド再入門しました。仕事でjs触るけど、ゼロからあれこれやると分からないことが無限に発生しますね...。成果物はこちら。 GitHub - syou6162/go-active-learning-web ML News サーバーサイドはGoで書いていて、フロント周りがVue.jsです。それっぽい見た目になってきたので、Route53でドメイン取得しました。 前回までのあらすじ 初手 webpackを導入 Componentの導入 Bootstrapで見た目をマシにする SPA導入 SPAにするとGoogle Analyticsで正確にトラッキングできない問題 参考図書 前回までのあらすじ 今年の目標で自分であれこれ触って壊して試せる砂場を作る活動というのをやってきました。先月までは主にインフラとかミドルウェア周りをやりました。 下回りは整ってきつつありますが、表側が
Vue.js初心者向け：インラインテンプレートから単一ファイルコンポーネントの使い方まで - Qiita
はじめに Vue.js でテンプレートを使うのに「単一ファイルコンポーネント」という便利なものがあります。しかし公式ドキュメントを読んでも導入がよくわからなかったので、備忘録としてまとめました。 誤字・脱字・勘違いなどありましたらご指摘ください。 前提条件 Webpack がインストールしてある Babel がインストールしてあり、ES2015設定がしてある ①一番基本的な Vue.js の使い方 Vue.js を CDN から持ってきます。Vue はグローバルなオブジェクトになっているので前置きも不要で呼び出せます。 <script src="https://unpkg.com/vue"></script> <script> new Vue = ({ el: '#hoge', data: { list: [ { name: '山田' }, { name: '田中' }, { name:
フロントエンドのコンポーネント設計に立ち向かう - Qiita
ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コンポーネント設計？なにそれ？おいしいの？」という方 初めてコンポーネント設計でアプリ作ってみたけど、本当にこれでいいのか自信の無い方 はじめに: "コンポーネント"とは まず最初に"コンポーネント"という言葉についてですが、ここでは「GUIのパーツをモジュー
Vue.js の基礎を学ぶために LearnCode.academy の学習動画を活用したら最高だった - kakakakakku blog
LearnCode.academy とは？ www.youtube.com LearnCode.academy という YouTube チャンネルがあり，Vue.js や React + Redux などを解説した，無料の学習動画が公開されている．今回受講したのは「Vue Tutorial」で，全9回となっている．合計しても「約1時間程度」なので，スキマ時間を活用して気軽に学ぶこともできる．「Vue.js は気になるけどまだ試したことがない」という人にオススメ！ Vue Tutorial #1 - Vue JS Tutorial for Beginners #1 setting up an app Vue Tutorial #2 - Vue.js filters and computed data Vue Tutorial #3 - Vue.js directives and event
JSer.infoを開始してから7年が経ちました
2011年1月15日にJSer.infoを開始してから今日でちょうど7年となりました。 今年は特にイベントもないので簡単にJSer.infoの振り返りを書いてみます。 去年の紹介記事 去年一年間に紹介したサイト数は1074でした。 また、今までのすべての紹介したサイト数の合計は7691でした。 JSer.infoの紹介したサイトデータはすべてデータ化されているので次のページから見れます。 jser/jser.info JSer.info Data Dashboard JSer.infoのゴール あらためて振り返るとJSer.infoのゴールは次のようなものです。 「JavaScriptに興味がある人にもっとJavaScriptを知ってもらう」 「JavaScriptの情報を整理して正確に伝える」 「更新コストを小さくして、継続できる形を作る」 毎年この時期になるとゴールを振り返って、そもそ
tern.vimでvimでjavascriptの補完など(vim advent calendar2012, 155日目) - kozo2's blog
これはvim advent calendar2012の155日目の記事です。 ternについて javascriptで書かれたjavascriptの構文解析、型推論library https://github.com/marijnh/tern Marijn Haverbeke氏を中心に開発 browser中にcode editorを提供するjavascript component codemirror の開発者でもある 既存editorでのjavascript開発の改善を目的としており現時点ではemacs, vim, sublimetext, bracketsでternを用いたjavascriptの補完が可能。 tern for vimについて Marijn氏のgithubにternのためのvim scriptのrepositoryがある。 https://github.com/marij
Doctor JSがとても良い件 - Life goes on
新年明けましておめでとうございました。今年もゆるくお願いします。 全然正月とか新年に関係無いのですが。 何だかググってもあんまり情報が出てこないので。 Vimだけじゃないですが、ctagというコマンドがあります。これはソースコードの関数やら変数やらをインデックスしておくファイルを作ってくれるという便利コマンドでして、これを使ってVimから関数呼び出ししている部分でC-[を押すと、定義部分に飛んでくれてC-tで元の場所に戻るというとてもIDEライクに動かす事ができるものです。 で、これはずっと使っていたんですが、自分の専門(なはず)のJavaScriptの場合は、どうもあんまり上手く解析してくれない…。ちょっと不便ではあるんだけどまあ使えてはいたんで良かったんですが。現在、MozillaがDoctor JSというプロジェクトでJavaScript用のctagを作ってくれています。GitHub
Vue.js：JSONファイルをAJAXで取得して表示する
最近また Javascript を書いています。 Chrome拡張のメンテナンスをしたい気持ちもありますが、最近盛り上がっている Vue.js を使ってみました。 モダンなウェブアプリケーション開発と言えば React.js ですが、どうしても JSXに違和感があったり、 そもそもいきなり大規模でリアクティブなアプリケーションを作るつもりも無かったので、小規模な開発からも 使えて、使いやすいと評判の Vue.js です。最初に書いておくと、Vue.js かなりいいですよ。 データをテンプレートに展開するようなデータバインディングは、ガイドを見れば十分だと思うので、 もう少し実践的なものにしようと思います。 Vue.js で AJAX 実は、Vue.js そのものは Ajax をサポートしていません。 以前は vue-resource というパッケージが公式のライブラリという扱いだったような
vue.jsでInfinite Scrollを実装する - GeekFactory
ページを下端までスクロールしたら次のページが読み込まれるInfinite Scroll（無限スクロール）をvue.jsで実装する方法を調べてみました． 一般的なInfinite Scrollの実装方法 スクロール可能な要素の scroll イベントを捕捉して，表示領域の位置を計算します．もし，要素の高さに達している場合は，下端までスクロールされたことになります． <div class="items"></div> .items { position: fixed; top: 0; bottom: 0; overflow-y: auto; } $('.items').on('scroll', function (e) { // jQueryを使う場合 var target = $(e.target); if ((target.scrollTop() + target.outerHeight(
更新が必要なnpmパッケージを可視化する - Hatena Developer Blog
こんにちは。ウェブアプリケーションエンジニアのid:masawadaです。普段は、はてなブログチームで開発を行なっています。 今回は、日々の開発で生まれた困りごとを解消するために作ったyarn-outdated-formatterというツールを紹介します。 経緯 以前id:amagitakayosiが「フロントエンドPodcastはじめました - Hatena Developer Blog」にて書いたとおり、はてなには現在「フロントエンドエンジニア」という肩書きのメンバーはいません。はてなブログチームでも全員がバックエンド(Perl)とフロントエンド(JavaScript)両方のコードを書いており、どちらかというとバックエンドがメインのためクライアントサイドは片手間になりがちという問題がありました。 そこで、チーム内でFWG(フロントエンド・ワーキング・グループ)という会を組織しました。F
データビジュアライゼーションの作り方
主なお仕事 日経:Visual Data 本日の目録 VDataコンテンツの作り方 D3.js バッドノウハウ集 Z-indexが効かない問題 Pathのトランジション 折り返さない問題 svgをpngに変換(つらい) VDataコンテンツの作り方 制作フロー 企画発案（記者より） データ収集・分析・整形 デザイン案やモックを作って打ち合わせ デザイン決定 実装 宣伝用の素材等作成 (SNSに流す用のグラフィックスや動画など) 作成チーム ＰＭ１人 デザイナー３人 エンジニア２人 ２ライン(デザイナー１、エンジニア１) 作成期間（２週間〜４週間）、速報(６時間) 一点物が多い これらの条件を踏まえ、日経ビジュアルデータではD3.jsというライブラリを採用しています。 D3.js データビジュアライゼーションライブラリ 特徴 Data-Driven Document デファクトスタンダード
私的TypeScriptとの関わり方ガイドライン - 角待ちは対空
初めて書く時困りそうなトピックごとに TypeScript との関わり方を示していく。導入や書き始めのハードルを下げるのが目的なので意識高いことは言わない。 https://github.com/remojansen/logo.ts 対象読者 ゴール 基本姿勢 何故そんなこといい加減な感じなのか 型の書き方 type annotation シグニチャ 型が合わない時 Structural typing any したい キャスト色々 キャストせざるを得ない時 import できない error TS2307:Cannot find module 'hoge'. error TS1192: Module '"hoge"' has no default export. や error TS2305: Module '"hoge"' has no exported member '_'. など 頑
WebmentionがW3C勧告に | フロントエンドBlog | ミツエーリンクス
2017年1月12日、WebmentionがW3C勧告になりました。 WebmentionはTrackbackに類似したプロトコルのひとつで、サイト上での言及を任意のURLに通知する方法です。 通知の受信側からみれば、他サイトにおいて言及された際、その通知を受信する方法の1つです。 Webmention仕様は、Pingback仕様の簡略版として策定が始まりました。 今ではPingbackのモダンなアップデート版であると言及されています。 WebmentionはHTTPとx-www-form-urlencoded（パーセントエンコーディング）を用いた、HTMLにおけるformの形式で送信されます。 これが、XML-RPCを用いているPingbackとの大きな違いであり、簡略化されているといわれるゆえんです。 すでにWordPressのプラグインが存在している（GitHub）など、各方面での実
JSer.info 6周年記念イベントを開催しました
JSer.info 6周年と300回記念イベントを開催しました。 参加して頂いた皆さん、発表して頂いた皆さんありがとうございます。 発表内容 JSer.info 6周年イベント - @azu JSer.infoの作り方 - @azu ECMA-402を知ってますか？ - @makoto_kato 2017年のJavaScriptと フロントエンドの楽しみかた #jserinfo // Speaker Deck - @potato4d A piece of potential of Cognitive Services - @ovrmrw Opalのすすめ - @youchan HOW AMP WORKS - @kishu 翻訳: @purewish with Many LT 以下、JSer.info 6周年記念イベント - Paperに書かれた議事録です。 議事録を取って頂いた@suzuk
Stream API入門 - Qiita
Nodeのアドベントカレンダー、既に終わった枠が空いていて、この際書きたいネタがあったんで参加しました。宜しくお願いします。 アドベントカレンダーの時期だけ出没する弱い日曜Haskellerです。普段の実務ではNode.jsにお世話になってます。宜しくお願いします。 さて、みなさんStream API使ってますか？Node.jsといったら非同期ですよね、やっぱり。しかしながら、JavaScriptでも他の言語でも、非同期処理自体は注目されているものの、まだexperimentalという感じで様々なAPIが考案されては消えていき、また元々そういう文化が根強くなかったところから来た人たちにとって、こういう文化はちょっと立ち入りづらいところもあるかもしれませんね。 今日は、主にそういう人たちに向けて、まず非同期の色々なAPIの紹介、そしてその中でのストリームのメリット、そして実際のStream
Vue.js と型
Vue.js 2.0 の createElement で Props と Events を静的に検証できたらいいなーという妄想です。 Nominal Typing するためのイディオムについてのページは https://basarat.gitbooks.io/typescript/content/do…
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JS Bin
Vue.js unknown custom element
2017年のJavaScriptと フロントエンドの楽しみかた #jserinfo
