Front-End Study #5 の発表資料です。 https://forkwell.connpass.com/event/205227/ フィードバックはこちら： https://koibu.me/events/14/talks/wQQs0pbvMZHcnZ8TawAi
2020年代、使う技術はどう選ぶ？
Front-End Study #5 の発表資料です。 https://forkwell.connpass.com/event/205227/ フィードバックはこちら： https://koibu.me/events/14/talks/wQQs0pbvMZHcnZ8TawAi
polyfill を深堀りする - mizdra's blog
この記事ははてなエンジニア Advent Calendar 2020 5日目の記事です。4日目は id:syou6162 さんで、数字のバラ付きを考慮して意思決定する技術でした。 qiita.com developer.hatenastaff.com こんにちは、id:mizdra です。今年新卒としてはてなに入社し、WebアプリケーションエンジニアとしてGigaViewerというマンガビューワーを作っています。 最近のはてな社内では「tech-future」という、様々な技術を見つめ直すワーキンググループを運営しています。この会では、ある技術についての要点をまとめるだけでなく、その技術にまつわる歴史を紐解いて整理し、その上で全体を俯瞰して将来その技術がどういう方向に向かうのかを議論し、未来を予測する手がかりを作る、といった挑戦的な取り組みをしています。既に弊社のエンジニアから「tech-
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法
プログラミング初心者のための JavaScript と Node.js の歴史、それを踏まえた勉強方法 2020年でJavaScript学ぶならきっとブラウザ向けJSガン無視していきなり初手node.js（ただし暫く何も足さない）がいいんじゃないかというメモ - min.t (ミント) Node.js を教えることについて、自分は賛成なんですが、その学習パスが整理されてないなと思っていたのと、学習パスがなぜ整理されていないかについて書きます。 はじめに 問題意識として、今のプログラミングスクールや独学勢が Ruby on Rails に偏っていて、 Node.js の人間としては、歯がゆく感じているんですが、実際 Node.js を教えるとしても問題も多いと認識しています。 歴史の話は、当時の実情や政治を省いて結果だけを書きます。具体的には第一次ブラウザ戦争、第二次ブラウザ戦争を言及しませ
Release 2.0.0: ECMAScript 2020対応 · asciidwango/js-primer
The 119th General Assembly held as a virtual meeting on June 16, 2020, approved the following documents: ECMA-262 11th edition - ECMAScript® 2020 Language Specification ECMA-402 7th edition - ECMAScript® 2020 Internationalization API Specification ECMAScript 2020は2020年06月にEcma Internationalによって正式に承認された仕様です。 ECMAScriptの仕様策定のプロセスについては次のページを参照してください。 ECMAScript · JavaScript Primer #jsprimer 2.0.0の変更点
W3Cで現在公開されているHTMLとDOM仕様は将来廃止されます - 水底の血
まえがき W3C（とWHATWG）からの公式なアナウンスはまだ確認していませんが、何度目かに結成されるW3C HTML WorkingのDraft Charterと、このCharterから辿れるDRAFT Memorandum of Understanding Between W3C and WHATWG（Memorandumは日本語で覚書などと訳されるので、ここでも覚書と呼びます）がブログエントリーのタイトルのソースになります。もっとも、今確認できる覚書もドラフトですから、変更があるかもしれません。しかしながらURLで観測できるわけですから、大筋でW3CとWHATWGとの間で合意が取れているのではないかと推測します。あとは、覚書だけでなくCharterもドラフトということになっていますが、以下の文章では面倒なので省略します。最後にお約束ですが、このブログエントリーは「だいたいあってる」感
フロントエンドの開発環境に Docker は不要(少なくともMacでは) - mizchi's blog
追記: 前提部分 開発環境を docker-compose で抽象することが最近のベストプラクティスだとされているが、フロントエンドをコンテナに突っ込むと無視できないIOボトルネックが発生する。 とくにwebpackのファイル監視からのビルドで発生する高頻度のIO処理を捌くために、フロントエンドだけはホスト環境に移したほうがいい、という主張。 これについて speakerdeck.com 自分の意見 Web開発者の主要な開発環境である Docker for Mac は I/O がとにかく遅い (3x~5x) data volume の driver やら cache を工夫しても遅い npm install/webpack は 基本的に I/O ヘヴィー とくに大規模開発時の watch => build がクリティカル webpack.conifg の entry で自分が関与する部分以
手元のコードのパフォーマンスを計測するperformance.markのスニペット
一部の機能をパフォーマンス改善したときにそれを計測したり、データを集めたいときがあります。 しかし、それだけのためにライブラリを追加するのも面倒くさい(実装後に計測コードは外すので)し、コンソールに結果を出すのもデータ収集的にイマイチです。 // よくあるコンソールに表示するパフォーマンス計測コード const start = performance.now(); // ------------ // 計測したい処理を書く // ------------ console.log(`${performance.now() - start}ms`); 結果をコピーしてSpreadSheetなどで可視化できたり、処理時間と関連する要素も保存しておきたいです。 (コンソールに出力すると埋もれたり、加工がめんどうです) そのようなときによく使っているPerformance.mark()とPerfor
7.2.0 Released: Private Instance Methods · Babel
We just released a new minor version of Babel! This release includes support for private instance methods and a bunch of bug fixes regarding Flow and TypeScript types. You can read the whole changelog on GitHub. A lot of new contributors fixed bugs or implemented new features in this release: thanks to Gcaufy, Grigory Moroz, Paul Happ, Tim McClure and Veaceslav Cotruta! A big shout out to Bloomber
この DOM がすごい2018: worker-dom - mizchi's blog
おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、ということです。 off-the-main-thread の時代 - mizchi's blog DOM に触れない WebWorker でビジネスロジックを処理するのは、ある種の健全性(Universal/Isomorphic)を手に入れるための「縛りプレイ」として有用ですが、現状は実用上のメリットが殆どありません。 例えば react / redux の reducer で、ビジネスロジックを worker 側に移して処理できるぐらいアイソモーフィックに(DOMに触
You Might Not Need jQuery
jQuery and its cousins are great, and by all means use them if it makes it easier to develop your application. If you're developing a library on the other hand, please take a moment to consider if you actually need jQuery as a dependency. Maybe you can include a few lines of utility code, and forgo the requirement. If you're only targeting more modern browsers, you might not need anything more tha
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する
ページ上でずっと動いているsetTimeout、setInterval、requestAnimationFrameを見つけてパフォーマンス改善する 複雑なウェブアプリケーションになってくると、1つのページで複数のTimerなどを回すことがあります。 例えば、Twitterのようなアプリならば、ポーリングで更新するためにsetInvervalのようなタイマーを回します。 また、ゲームなどCanvasで描画を行うアプリケーションならば、メインループをrequestAnimationFrameで回します。 このように色々なタイマー系がありますが、アプリが多機能になっていくと色々なタイマーが同時に動くようになっていきます。 特に問題がなりやすいのが表示中だけタイマーを回すコンポーネントです。 よくあるのが次のようなmount時にtimerを開始して、unmount時にtimerを停止するコンポーネ
さよならボイラープレート。s2sによる高速reduxアプリケーション構築 - Qiita
まだアクションクリエイターを自分で書いているの？ reduxとflowtypeを使ってフロントエンドアプリケーションを構築していると、ボイラープレートが多く、面倒だと感じることがありませんか？ しかし、もはや、このAST時代の前には過去の悩みでしかありません。 型を書く。それが全てです。 型を書いて、定数を書いて、アクションクリエイターを書いて、一つ変更したら全て変更して、もしくはなんらかのハックを行って型付けして、なんてものは過去のことです。 これからは、アクションクリエイターの作成に5秒以上時間をかけたら怠惰でありましょう。そして、これはs2sの1プラグインでしかありません。 プラグインを組み合わせると以下のようなこともできます。 s2s (Source to Source) これを実現している仕組みをSource to Source(s2s)といいます。 ソースコードからソースコード
kuromoji.jsで形態素解析した結果とテキストの関係をビジュアライズする
azu/text-map-kuromoji: テキストを形態素解析した結果とテキストの関係をビジュアライズするエディタというツールを作った話。 くだけた表現を高精度に解析するための正規化ルール自動生成手法という論文誌では、「ヵゎぃぃ」，「ゎた Uゎ」みたいな普通の形態素解析では未知語として検出されるものをどうやって正規化していくかという話が書かれていました。 これを読んでいて面白かったのは形態素解析をした結果の未知語となった部分と穴埋め的にパターンを作って、そのパターンにマッチする同じようなテキストを探すというアプローチでした。 プログラミング言語と違って、大抵の自然言語パーサはパース失敗ではなく、単なる未知な言葉として検出されます。 また、その未知な言葉は常に増えていて、さきほどのくだけた表現を高精度に解析するための正規化ルール自動生成手法によると手動では登録できない増加量らしいです。
JavaScriptの現状と将来というタイトルで発表してきた - 技術探し
the present and future of JavaScript 情報処理学会の若手の会で発表してきました。 三回目の参加で、二回連続30minのセッションをさせて頂きました。 前回は3年前に発表してその頃はまだ学生でした👨🎓 実はこの週、スライドにも書いてある通りバンクーバでNode InteractiveとNode関係者があつまるNode.js Collaborator Summitが開かれてました。 そちらの情報は他の方が何かしら報告してくれると思いますので、それを期待しています🙏 さて、それではスライドの内容を少し読み砕きましょう ECMAScriptとは？ ECMAScriptとは、Ecma Internationalによって管理されるJavaScriptの標準化仕様です。 JavaScriptとは、ECMAScriptに基づく実装を指します。 エディション その
Pipeline Operatorがstage-1へ - 技術探し
github.com 先月のTC39のMTGでstage-1になりました。 F#, OCaml, Elixir, Elm, Julia, Hack, LiveScriptなどと似たような機能を提供します。 function doubleSay (str) { return str + ", " + str; } function capitalize (str) { return str[0].toUpperCase() + str.substring(1); } function exclaim (str) { return str + '!'; } let result = exclaim(capitalize(doubleSay("hello"))); // "Hello, hello!" let result = "hello" |> doubleSay // ここの引数が `he
React v16.0 – React Blog
This blog site has been archived. Go to react.dev/blog to see the recent posts. We’re excited to announce the release of React v16.0! Among the changes are some long-standing feature requests, including fragments, error boundaries, portals, support for custom DOM attributes, improved server-side rendering, and reduced file size. New render return types: fragments and strings You can now return an
Announcing CoffeeScript 2
We are pleased to announce CoffeeScript 2! This new release of the CoffeeScript language and compiler aims to bring CoffeeScript into the modern JavaScript era, closing gaps in compatibility with JavaScript while preserving the clean syntax that is CoffeeScript’s hallmark. In a nutshell: The CoffeeScript 2 compiler now translates CoffeeScript code into modern JavaScript syntax. So a CoffeeScript =
Webpack を使っていてファイルの相対パスを書くのがつらくなったとき - kitak blog
小ネタ。 Webpack(というよりモジュールバンドラ) を使っていて、ディレクトリの階層が深くなってくると import や require でロードするファイルのパスを ../../../../foo.js のように ../ の数を正確に指定するゲームになってくる。 以下のように書くことで src ディレクトリをルートにしてパスを指定することができるようになるのだけど resolve: { modules: [ path.resolve(__dirname, 'src'), "node_modules" ], }, 同僚氏に npm でいれたパッケージか、src にあるファイルか分からないから、src ディレクトリの alias を定義したらどうか、と勧められた。 resolve: { alias: { '@': resolve(__dirname, 'src'), }, }, これで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サーバーサイドエンジニアも知っておくべきフロントエンドの今
