You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Programming"Programming today is a race between software engineers striving to build bigger and better idiot-proof programs, and the Universe trying to produce bigger and better idiots. So far, the Universe is winning." - Rich Cook, The Wizardry Compiled.
Intro ResizeObserver の ship が進みつつある。 この仕様の解説および、ElementQuery / ContainerQuery について解説する。 Resize Observer 1 ResizeObserver ResizeObserver は、最近増えつつある ObserverFamily の 1 つであり、要素のリサイズを検知するインタフェースである。 リサイズを検知したい要素をターゲットに observe() すると、ターゲットと矩形情報が取得できる。 const resizeObserver = new ResizeObserver((entries) => { entries.forEach(({target, contentRect}) => { console.log(target) const {x, y, width, height, top
import { app } from "hyperapp" import { div, h1, button } from "@hyperapp/html" const state = { count: 0 } const actions = { down: value => state => ({ count: state.count - value }), up: value => state => ({ count: state.count + value }) } const view = (state, actions) => div([ h1(state.count), button({ onclick: () => actions.down(1) }, "–"), button({ onclick: () => actions.up(1) }, "+") ]) const
概要 本記事では、サーバーサイドの情報を Elm に渡す手法として、HTMLにJSONを埋め込む手法を紹介し、JSON Web API 経由で情報を渡す場合との比較を行います。 ぐぐってみるとこの手法自体は Elm 以外の文脈でもずいぶん昔から使われているようですが、なぜか「俺はこうやって実現したぜ」系の記事ばかりで、「なぜそれをやるの?」とか「既存手法と比べてどういうメリットやデメリットがあるの?」といったことにまともに言及している記事がほとんど見つからなくて、「マジ世の中ちょろいな」って感じなので、僕が勝手にまとめます。 問題提起 Elm で書かれたプログラムがサーバーサイドの情報を取得する際、多くの場合は JSON 形式の Web API を呼ぶことになると思います。 ただそのやり方だと、特にページ読み込み時の初期情報の取得において下記のデメリットがあります。 HTML をリクエスト
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 転職ナビのフロントエンドを担当しています、@sueshinです。 Livesense - 関 Advent Calendar 2017、22件目をお送りします。 どうぞ宜しくお願いします。 はじめに フロントエンドでよく注目されるJavaScriptではなく、 地味で渋いまるで関節技のような、Google Chrome Devtoolsを使った技術をtipsの形式でまとめました。 免責事項 ショートカットなどは全てMacのキーボード操作にしています。Windowsユーザーは適宜読みかえてください。 Chromeのバージョンは63系に基づ
開発者なら誰しもJavaScriptをはじめとするコードのメンテナンスが面倒だと感じています。日々変更される標準や構文、サードパーティのパッケージ変更に付いていくのも大変です。 近年、JavaScriptを取り巻く状況は一変しています。JavaScript言語のコアは進化し続けて、基本中の基本である変数宣言の方法さえ変更されているのです。ES6では、letやconst、アロー関数などの変更がコアに導入され、開発者とアプリケーションにメリットをもたらしました。 開発者は長く使えるコードを書き、維持する負担が増しています。この記事では、大規模なコードのリファクタリング作業をcodemodとJSCodeshiftツールで自動化する方法を紹介します。言語の新機能を利用したいときに、コードを簡単にアップデートできます。 Codemod Codemodは、Facebookが開発した大規模コードベース向
A unified developer experience for software development Nuclide is built as a single package on top of Atom to provide hackability and the support of an active community. It provides a first-class development environment for React Native, Hack and Flow projects. Retiring the Nuclide Open Source Project A few years ago, we introduced Nuclide to provide a first-class IDE experience. We’ve made treme
Javascriptでレーベンシュタイン距離の実演 レーベンシュタイン距離は、2つの文字列の間にどの程度の差があるかを算出します。 具体的には、2つの文字を同一にするには、挿入・置換・削除を何回行えば良いか最小回数を算出します。 ※IE8、FF3.6、Chrome4で動作を確認しています。IE7以下では動作しません。 ※このスクリプトはイメージです。ほとんどテストしてないのでバグってたらすいません。 サンプル テキストボックスに文字列を入力してボタンを押すと、2つの文字列の距離が出力されます。
はじめに この記事はChromium Browser Advent Calendar 2017の22日目の記事になります。 ChromiumプロジェクトでFetch APIやService Worker周りを担当しているhoroです。つい先日、Microsoft Edgeの開発者版やSafariの開発者版でもService Workerが使えるようになったそうで、非常に嬉しい限りです。 さて、今回は、Service Workerにも少し関係がある、JavaScriptのコードキャッシュについてです。 コードキャッシュとは この資料によると、現実世界のWebページでは、V8の実行時間のうちJavaScriptのパースに15-20%の時間がかかっていると言われています。 そこで、Chromiumでは、頻繁に読み込まれるJavaScriptファイルに関して、パース処理によって生成されるバイトコー
この記事はChromium Browser Advent Calendar 2017 19日目の記事です。カレンダー参加者にはChromiumコミッタの方たちが並んでいますが、空きがあったのでせっかくならと思い飛び込んでみました。 まえがき 筆者は普段WEBアプリケーションのフロントエンド/サーバーサイドの開発をしています。Chrome内部のアーキテクチャや仕組みについてはアドベントカレンダーの他の記事に詳しく書かれているのでそちらに任せるとして(どの記事も力作なのでまだ全部読み切れていない)、普段WEBフロントエンドを書く人間にとって価値のある情報をまとめるべくこの記事を執筆しました。 Chromiumのコードベースはとても巨大で、何も知らない状態からいきなりコードを読み始めるのはなかなか難しいです。普段利用しているブラウザのAPIがどういう風に実装されているかを探そうすのもコツが要りま
Web Components have been around for a while now. Google has really been trying to push for their more widespread adoption, but most major browsers still have very little support for it, except for Opera and Chrome. However, by using polyfills, available from https://www.webcomponents.org/polyfills, you can build your own Web Components now. In this article, I’m going to teach you how to create you
この記事はCAMPHOR- Advent Calendar 2017 11日目の記事です. アブストラクト 漸進的型付けは,ひとつの言語の中で静的型付けと動的型付けをスムーズに組み合わせるための技術です. よく知られた特徴は any 型を使った静的型付けで, TypeScript や Python といったプログラミング言語には既に実装されています. しかし,理論と実際のプログラミング言語の間には大きなギャップが存在します. 特に,漸進的型付けの理論で提案されているキャストを用いた動的型検査が実装されていないために, 静的型付けの恩恵を十分に得られていないという問題があります. この記事では,まず漸進的型付けの理論をコード例を用いて紹介し, 現状の漸進的型付き言語が抱える問題を解説します. そのあとで,漸進的型付き言語が目指すべき目標を理論的視点から論じます. それらの目標は,静的型付けを
これは Chromium Browser アドベントカレンダーの十日目の記事です。本記事では Chromium における JavaScript のスレッド並列実行環境について仕様・実装・API の面から包括的に紹介します。ブラウザの内部実装に興味がある人を対象に、各機能の使い方ではなく実行モデルに焦点を当てて説明しているため、難易度は高いです。使い方を知りたい人は MDN などの記事を読んでください。この記事をきっかけに実装解読に挑戦してみる人が一人でも増えると幸いです。 本記事を書くにあたり、yuki3 さんに多くのコメントをいただき、議論に付き合っていただきました。ありがとうございました。なお、文責はすべて私 (nhiroki) にあります。誤りや補足、質問などは気軽に GitHub Issue もしくは Twitter へお寄せください。 更新履歴 2018/01/15 Layout
皆さん、Yahoo!検索大賞 2017はご覧になりましか? このアワードで大賞に輝くと、「今年の顔」の名誉を手に入れることができるんです。 そんな栄えある今年の大賞は、ブルゾンちえみとのこと。 他にも、俳優部門は高橋一生、女優部門は吉岡里帆、といった具合に各分野毎に受賞者がいます。 ところで、僕はあまりテレビを観ないので、誰が誰やらわかりません。 このままだと安心して2018年を迎えることができないので、画像を読み込んでそれが誰なのか判定するアプリが必要です。 一目見れば区別つきそうなものですが、僕の濁った目で直接見るよりも、機械に判定させた方がよいに決まっていますので、作ってみました。 実際の動きはこちらから確認できます。 今回はブルゾンちえみも含め、Yahoo!検索大賞の受賞者から以下の5人をピックアップし、判別できるようにしています。 ブルゾンちえみ(お笑い部門) 高橋一生(俳優部門
設定不要のビルドツール parcelというビルドツールが空前の勢いでGitHubスターを集めており、リリース数日で5000スターを超えています。今日だけでも1000スター以上増えており、Googleなどの有名企業リポジトリ以外でこのスピードで人気がでるのは異例です。 https://github.com/parcel-bundler/parcel https://parceljs.org/ 実際に試してみたところ、これはwebpack一強時代を終わらせるレベルの使いやすさだと確信しました。 作者はAdobeのエンジニアで、その他著名エンジニアも続々と参加している様子です。 webpack疲れ webpackが出た当初、webエンジニアはgulp/grunt疲れの状態だったことを覚えている方もいるかと思います。 webpackの統合された設定ファイルは、タスクランナーで逐次処理していたものを
Project GoalsThe goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. In the beginning, our focus will be primarily around speed, stability and the development of the correct API for extension authors. In the future, we anticipate the community will come up with innovative additions to enhance what could be the simple
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く