これから先10年、フロントエンドに関する予言 - mizchi's blog
これは怪文書です ここから10年はWASMがDOMのGCインテグレーションを果たしてJSを置き換えるか、JSがWASMに追いつかれる前にまともな言語として進化しきれるかのチキンレースになる ES Modules のブラウザ実装が枯れた頃に先鋭化したフロントエンドツールセット群は一旦そこで破棄され、シンプル化への揺り戻しが起こる 仮想DOMはブラウザエンジンの何らかの処理で更新が隠蔽されるか専用のDOM更新APIができ、Reactのような実装の手を離れる WASMで git, vim, bashなどが porting されるにつれ、再びWebOSのようなものが試みられる TC39でJSの型アノテーションの構文だけだけ決めよう => V8 が型アノテーションを元にランタイムを最適化したぜ！ => 気づいたら標準化みたいな流れがある IE11のサポートは延長されず、MSがなんらかの強攻策に出る
ゼロから始めるJavaScript生活 - Qiita
（訳者注: これは、JavaScript Stack from Scratchを翻訳し、まとめて読めるように1ファイルにしたものです。元の翻訳と各種ファイルについては、日本語訳forkリポジトリを参照してください。また、原文が活発に更新されているため、訳文も追従して更新されます。ご了承ください。） ゼロから始めるJavaScript生活 モダンJavaScriptスタックチュートリアル、ゼロから始めるJavaScript生活へようこそ。 ⚠️️ このチュートリアルのメジャーアップデート版を3月初旬に公開する予定です。ご期待下さい! より詳しく(英語). これはJavaScriptスタックを使い始めるための最短最速のガイドです。このガイドは一般的なプログラミングの知識とJavaScriptの基礎を前提としています。これら全てのツールを一緒につなぎ合わせることにフォーカスしており、各ツールにつ
JavaScript ASTを始める最初の一歩
何かJavaScriptのソースコードを機械的にチェックするためのツールを作りたいという場合に、JavaScriptのASTというものを触る必要が出てくると思います。 この記事では、その取っ掛かりとなる案内を簡単にまとめたものです。 ASTとは AST(Abstract Syntax Tree)はコードをパースした抽象構文木のこと。 JavaScriptの場合はJavaScriptオブジェクト(JSON)として表現されます。 コード: { "range": [ 0, 10 ], "type": "Program", "body": [ { "range": [ 0, 10 ], "type": "VariableDeclaration", "declarations": [ { "range": [ 4, 9 ], "type": "VariableDeclarator", "id": {
RPGツクールMVのメモリリーク・メモリブロート検証方法 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ゲーム開発ではよくある話ですが、RPGツクールMVにも時々メモリリークの話が話題となります。 本体に関するメモリリークはバージョンアップでの改良を期待したいところですが、 残念ながら各種プラグインでメモリリークをしている事がたまにあり、そのようなものはこちらで調査・パッチを当ててあげた方が早いケースも存在します。 ここではその原因の調べ方を記述します。 メモリリークが起きると何が起きるの？ メモリリークは、解放されず使用されないメモリが蓄積されていき、使用メモリがどんどん増えていくことを指します。 ちょっとしたメモリリークであればゲーム
Media Queries（メディアクエリ）とJavaScriptの連携について - Qiita
レスポンシブのサイトの制作を行っていると、PCとTABとSPのそれぞれのレイアウトでそれぞれ別々のJSの動作をさせたいということがあると思います。それを実現するためにはJavaScript側から今どのレイアウトになっているのかという事を知る必要があります。 そこで今回はJavaScriptでのメディアクエリの判定方法についてご紹介します。 まずはやってしまいがちなNGパターン、続いてOKパターンをいくつかご紹介します。 NGパターン jQueryのwidthメソッドを使用して判定 OKパターン window.innerWidthプロパティを使用して判定 window.matchMediaメソッドを使用して判定 PC/SP時に表示/非表示にするコンテンツの表示/非表示の状態を読み取って判定 contentの値を使用して判定 font-familyの値を使用して判定 NGパターン まずはやって
Three ways of understanding Promises
This blog post covers three ways of understanding Promises. This is an example of invoking a Promise-based function asyncFunc(): function asyncFunc() { return new Promise((resolve, reject) => { setTimeout(() => resolve('DONE'), 100); }); } asyncFunc() .then(x => console.log('Result: '+x)); // Output: // Result: DONE So what is a Promise? Conceptually, invoking asyncFunc() is a blocking function ca
i18n for Virtual DOM (i18n4v) — i18n for virtual dom 0.2.2 documentation
i18n4v is an internationalization helper library for browsers and node.js. It has the following features: It supports standard internatinalization features: Replacing words by key (original words can be used as keys too) Pluralisation Formatting Selecting translations from context (like gender) Small runtime: Runtime is written in ES3 and just 1.8kb (minified and gzipped). Runtime has no dependenc
SPAサービスサミット #1をGoodpatchで開催しました！ #SPAsummit | Goodpatch Blog
こんにちは！Goodpatchでフロントエンドエンジニアをやってますあおしです。Prottのフロントエンドを担当しています。 先日、JavaScriptでSPA(Single Page Application)の開発を行っている会社で集まり、弊社オフィスにてSPAサービスサミット #1というイベントを開催しました。本日はそのレポートをお届けします！ 健康で文化的な最低限度のSPA 株式会社ホットスタートアップさんの共同創業者 エンジニアの香月雄介さんの発表です。 ホットスタートアップさんでは「ペライチ」という無料でホームページを制作しているサービスを運営されています。 サービス立ち上げ当初、とにかく早くリリースしたいという一心で選択したjQueryが恐ろしいほどの負債を産んでしまったという話を最初に、どのようにBackbone.jsに移行していったのかというお話をされていました。フッターに
Next.js - Vercel
This blog post will go into the philosophy and design decisions of the project. To learn how to use Next.js instead, please refer to the README, where you can learn the entirety of the tool's capabilities in just a few minutes. First we'll dive into the background of the project and then describe 6 basic principles: Zero setup. Use the filesystem as an API Only JavaScript. Everything is a function
Client-side JS for infeed layout native ad at fluct SSP - Speaker Deck
All slide content and descriptions are owned by their creators.
AST時代のJavaScriptで、ASTに深入りせずにASTと仲良くする方法を考える - Qiita
ちょっと、ソースコードをパースして、とある関数(require)を呼び出して作った関数を使っている箇所のピックアップをやろうと思ったのですが、ASTを直接扱うのはいろいろめんどいです。 ソースコードをパースしてAST化するのはacornとかesprimaが有名。acornはプラグインでJSXにも対応できたりするらしい。 どのパーサを使っても、基本的にはここの定義に準拠するはず https://github.com/estree/estree/blob/master/es2015.md 子供をたどるのに、DOMのchildrenみたいな、「子供を取得するにはこれだ！」という決まった方法はない。 ノードごとに子供の名前が違うんだけど、全部のノードごとに分岐して探さないといけないの？ var a = 10;だと変数定義(VariableDeclaration)扱いだけど、aがすでにある状態だとa
Node学園 23時限目 アウトラインメモ
Node学園 23時限目 (今回はリクルート（東京駅）でやります！) - connpassに参加してきたのメモ npm@4、npm@5 node-gakuen-201610.md npmは後方互換性を重んじている Node.jsにbundleされているので npm@2のbreaking changeについて backwards-incompatible change to the way npm run-script handled its arguments npm@3 flat directory npm@2そのまま使い続ける人もいる 大きな変更は移行の壁になるという話 npm@4 Release v4.0.0 · npm/npm npm 4は小さな変更にした prepublish が npm install 時に実行されるのは Deprecated prepublishOnly と
Node学園 23時限目 に行ってきたメモ #tng23 - console.lealog();
渋谷かと思ってたら東京だった回！ 「npm v4/v5/next」 by @othiym23 node-gakuen-201610.md · GitHub これは事前に共有してもらえたスクリプトです。 ほぼこれの通りに話されてたので、ざっくりメモ。 自己紹介 npmのCLIチームのリーダーです チームにはKatとRebeccaがいるよ ありがとう @watilde さん! npmのいままで 今やmillions of users, over 350,000 packagesな大プロジェクト なので機能追加は慎重にやっていく SemVerはある種の契約 npm@2からnpm@3 まさにメジャーアップデートだった でもいまだにnpm@2を使ってる人もいる npm@2のほうがインストールが早いケースもある npm@4 メジャーアップデートではあるがそんなに変わらないかも depricatedにな
A safe and modern home for JavaScript technologies | OpenJS Foundation
A safe and modern home for the webOpenJS promotes the widespread adoption and continued development of key JavaScript technologies worldwide.
Forward Universal WebApps
ubb.jp で発表した Forward Universal WebApps の覚悟のトークです。
フロントエンドエンジニアのための動画ストリーミング技術基礎
動画はデータ容量が大きい 画像と違い、動画コンテンツはデータ容量がとても大きいため、データをダウンロードして再生するまでに待ち時間が発生します。 動画のデータ容量が大きい理由はとても単純で、動画は画像データが集合したものだからです。静止画像を人間の目が滑らかに感じられる速さで切り替えて表示することで絵を動かすという表現を実現しています（よくパラパラマンガに例えられますが、そんな感じです）。この人間の目が滑らかに感じる速さというのが 1 秒間に 30 枚だったり 24 枚を切り替えることになります。29.97 (≒30) fps とか 24 fps とかの数字を耳にしたことがあるかと思いますが、24 fps の場合は 1 秒間（s）の間（p）に 24 フレーム（f）を切り替えることを意味します。 データを全て自分の端末にダウンロードしてから再生しようとすると、かなり長い待ち時間が発生してしま
リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io
なお IE は(security zone setting をいじらない限り)この問題が発生しないようだ。 引用元: blankshield demo | Reverse tabnabber phishing tabnabbing 上記の挙動を、フィッシング詐欺に利用できることが既に指摘されている。 この手法は Tabnabbing と呼ばれている。 Tabnabbing: A New Type of Phishing Attack Aza on Design Target="_blank" - the most underestimated vulnerability ever この攻撃方法を解説する。 攻撃の概要 https://cgm.example.com (左上) というサービスがあるとし、これは SNS やチームコラボレーション系サービスを想定する。 攻撃者は、このサービスの不
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ffconf :: JavaScript Conference :: 10th & 11th November 2016
【翻訳】 2016年にJavaScriptを学んでどう感じたか - Endo Tech Blog
開発上の様々な依存のつらみと FRESH! by AbemaTV の話
