HTML5 Conference 2017 http://events.html5j.org/conference/2017/9/ で使用したスライドです。本編45分。
Most web developers I talk to these days love writing JavaScript with all the newest language features—async/await, classes, arrow functions, etc. However, despite the fact that all modern browsers can run ES2015+ code and natively support the features I just mentioned, most developers still transpile their code to ES5 and bundle it with polyfills to accommodate the small percentage of users still
Form validation Peter-Paul Koch http://quirksmode.org http://twitter.com/ppk Browser API Special, 15 June 2017 Form validation Literally the oldest trick in the JavaScript book. Netscape 2 could do form validation, and little else. Modern input types • type=“date” • type=“email” • required • pattern • and so on Modern input types • Automatically validated • Automatically get native error messages
「最近のWebパフォーマンス改善について知っておきたいコト」についてあほむに聞いてきた 白石 俊平(HTML5 Experts.jp編集長) こんにちは、編集長の白石です。 この記事は、9月24日に開催されるHTML5 Conference 2017に登壇するエキスパートに、予定しているセッションのトピックを中心に、いろいろ伺ったものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、株式会社サイバーエージェントにお勤めの佐藤歩さんです(ネット上では「あほむ」「ahomu」のIDで有名)。 (プロフィールはこちら) あほむさんのセッションは「最近のWebパフォーマンス改善について知っておきたいコト」(ホール 13:20-14:00)です。 (現在HTML5 Conference 2017は定員オー
追記: 2019/04/24 本日リリースされたNode v12でESM周りの仕様が大幅に変更されました。 この記事の内容は既に古くなっているため、最新の情報は以下の公式ブログを参考にしてください。 Announcing a new — experimental-modules – Node.js Foundation – Medium 追記終了 この話を今日のNode学園で話すので、ご興味あればどうぞ。 nodejs.connpass.com (今日いくつか加筆修正しました) ECMAScript 2015で待望のES Modules(ESM)の仕様が策定されたものの実装がなかなか進まない、という話を1年前に発表した。 その後、ブラウザでのES Modules仕様が策定完了し、フラグ付きながら全主要モダンブラウザで初期実装が揃った (caniuse)。(dynamitterさん、kijt
Intro 長いこと議論になっていた ES Modules の Node における扱いに一応の決着が付き、 .mjs という拡張子が採択された。 この拡張子の意味と、今後ブラウザと合わせて Universal JS を実装していく上での作法が見えてきたことになる。 合わせてエコシステムが対応していくことで、長年の夢だった JS のモジュール化を進めていくことができるだろう。 ES Modules 徐々に揃いつつある ES Modules(ESM) の仕様は TC39 で行われており、その仕様については主に以下のような部分になる。 import や export と行った構文 module 内はデフォルト strict mode module でスコープを閉じる module 内の this は undefined etc 逆に以下は TC39 での策定範囲外となる どう Module を読
deeplearn.js is an open-source library that brings performant machine learning building blocks to the web, allowing you to train neural networks in a browser or run pre-trained models in inference mode. We provide an API that closely mirrors the TensorFlow eager API. deeplearn.js was originally developed by the Google Brain PAIR team to build powerful interactive machine learning tools for the bro
で完了 なければ nodeのバージョンをnで管理する などを読みつつnodeとnpmをインストールしてください 準備するもの コンソール db.json ブラウザ(動作確認用) やること db.json ファイルを作成する bashの touch コマンドやWindowsなら右クリックからなどでお好きなようにファイルを作ってください db.json にリソースを登録する ここでモックサーバから返して欲しいデータリストを列挙します 最上位の階層の key がエンドポイントになります { "users": [ {"id": 1, "name": "hoge"}, {"id": 2, "name": "fuga"} ], "tweets": [ {"id": 1, "contents": "あー眠い", "user-id": 1}, {"id": 2, "contents": "ファビュラス!"
相談内容 既存の管理ツールを新しく作り直すために新しいJSフレームワーク/言語使いたいのですが、何を選んだらよいでしょうか? ここで選んだものは今後新しく作る時にも使用していく予定のため、学習コストよりメンテナンスしやすいものを選びたいと考えています。 利用者は社内外で特定の権限を持った人のみであるため、サーバサイドレンダリングはしない予定です。 言語は型があるものを利用したいのですが、TypeScriptとFlowのどちらがよろしいでしょうか? 時間に余裕があれば、テストフレームワークやビルドツールについてもお聞きしたいです。 現在のページ/チーム jQueryなどで書かれている部分が多いですが、変更を加えることが難しくメンテナンスコストが高いです。 サーバサイドをやってる人が片手間で書くJavaScriptといった状況です。 今回新規で数ページを追加する必要があるため、何を利用すれば良
UsageThe sample below and others are included in the example directory. You may also find the tests for selenium-webdriver informative. const { Builder, Browser, By, Key, until } = require('selenium-webdriver') ;(async function example() { let driver = await new Builder().forBrowser(Browser.FIREFOX).build() try { await driver.get('https://www.google.com/ncr') await driver.findElement(By.name('q'))
SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションの導入によってUI改善に役立てているケースもあるでしょう(参考「SVGで始めるマイクロインタラクション入門」)。SVGでアニメーションを実装するには、CSSを使う方法、JavaScriptを使う方法、動画作成ソフトを使う方法等、さまざまなアプローチがあります。 今回は、コーダー、フロントエンドエンジニア、デザイナーの分野別のSVGアニメーションのアプローチ方法を挙げ、その特徴と具体的な実装方法について紹介します。 CSSでSVGアニメーションを実現する方法(コーダー向け) コーダーにオススメするSVGアニメーション実現方法の1つは、CSSプロパティを使う方法です。 SVGはCSSプロパティによってグラフィックの形状を変更できます。たとえば、次のコードでは、
10.How do JavaScript closures work? http://stackoverflow.com/questions/111102/how-do-javascript-closures-work JavaScriptのクロージャーについて 結構とっつきにくい「クロージャー」に苦労されている人も多いかもしれませんが、サンプルコードが多いので英語わからなくても助かります 個人的にはQuestionの「Like the old Albert Einstein said: ... 」というくだりが好きw 9. What does “use strict” do in JavaScript, and what is the reasoning behind it? http://stackoverflow.com/questions/1335851/what-does-use
The performance benefits of rel=noopener - JakeArchibald.com より target="_blank" でリンクを開く場合は、rel="noopener"をつけておくのが良い。 管理画面などでは rel="noopener noreferrer"というかたちでnoreferrerをつけるとさらに良いかもしれない(参考:http://qiita.com/wakaba@github/items/707d72f97f2862cd8000 ) target="_blank" で開いたWindowは、 window.opener を使って親のWindowを操作することができる。つまりtarget="_blank"で開いたサイトで任意の操作ができてしまうことになるけど、Same origin の仕組みが働く。ので、Same originではない場
Note: The browser is picky about the import syntax, particularly where it comes to the URL. All paths must be either absolute or relative, and relative paths must start with '.' or '..' Up until now, we’ve been using bundlers like rollup and webpack to turn all of those modules into a single JavaScript file that the browser can run (or perhaps several of them, if we’re code-splitting). This is bec
Intro 念願 だった EventTarget の constructible/subclassable が DOM の仕様にマージされた。 これにより、いわゆる EventEmitter のブラウザ移植が不要になることが期待される。 Allow constructing and subclassing EventTarget Update Chrome Canary 64 で実装が確認できたため、 DEMO を追加した。 EventTarget EventTarget には addEventListener, removeEventListener, dispatchEvent が定義されている。 これは、ブラウザが内部で生成する Event や、任意に生成された CustomEvent を発火/補足するために利用される。 callback = console.log.bind(con
こんにちは、フロントエンドを中心に開発しています、原 (@herablog)です。 昨年10月にアメブロ2016 ~ React/ReduxでつくるIsomorphic web app ~という記事で、アメブロのJavaベースアプリから、Node.js・Reactベースアプリへのリニューアルについてお伝えしました。今回は、より進化した2017年版のWebアプリケーション開発に向けて、その後おこなわれた改善についてお伝えします。 https化 2016年4月に、ameblo.jpのhttps化をおこないました。セキュリティ観点としては当然のこと、SEO効果やブラウザの新しい機能の利用など、https化はWebアプリケーションのクオリティアップには必須といってよいでしょう。 まず、サブドメイン化されたサブシステムのhttps化をおこない、その後アメブロ本体のドメインをhttps化しました。ht
What is an IPA File?IPA stands for iOS package App Store. An iOS app is a document with the file IPA extension that can be downloaded only on IOS operating devices such as iPads, iPhones, iPod touch, Mac, etc. IPA files contain the app's compressed data in a ZIP file. IPA files can be downloaded from iTunes, Apple Configurator 2, or third-party programs. These files contain the data for various ap
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く