Talk at 関西Node学園 梅田キャンパス 1時限目 https://nodejs.connpass.com/event/82614/
JavaScriptユニットテストの理想と現実
Talk at 関西Node学園 梅田キャンパス 1時限目 https://nodejs.connpass.com/event/82614/
How to create the snake highlight animation with anime-js
When I came across SVG line animation a couple of years ago I was immediately amazed. I remember feeling that this was something I hadn’t seen before. It felt like a new direction for animations on the web. Something fresh. Line animation was at the time quite different from most effects used around 2013/2014. There and then most animations were CSS transitions, moving parts in all directions. SVG
TensorFlow.js | Machine Learning for JavaScript Developers
Deploy ML on mobile, microcontrollers and other edge devices
An experimental data-flow analysis tool for front-end JavaScript
What is FromJS? FromJS shows you where each value in the DOM comes from. For example, some data might have been loaded using fetch, some might have been stored in localStorage, and some might have been hard-coded in the JavaScript code. Try FromJS I've not worked on this for a while and it never worked super well, so maybe you shouldn't actually try it :) Install from NPM: npm install -g @fromjs/c
Jump.js
Jump.jsA small, modern, dependency-free smooth scrolling library by callmecavs.
酔っ払ってもコードが書きたい！JavaScriptを書き散らかしてPrettierに介護してもらう方法 - pixiv inside
こんにちは、一般ノーマルエンジニアのgeta6です。社内ではpixiv SketchというサービスでJavaScriptを書く仕事をしています。今日はPrettierの話をします。 JavaScriptを書くのが大好きな皆さま各位におかれましては、きっと酒のつまみにコードを書くこともあるでしょう。しかし酔っ払いながらコードを書くと、往々にして上記のような書き散らかしをしてしまうことがあります。 このコードは動きます。動きますが、思わず目を背けたくなる汚さです。この世に存在することが許されるべきか疑うレベルです。ESLint先生も思わずブチギレです。当然ですね。 CIにLintを仕込んでいた場合は当然通りませんし、gitのprecommit hookにLintを仕込んでいた場合はgit commitすら許されません。堅牢なシステムは酔っ払いにコードをコミットする権利すら与えてくれないのです。
Maybe you don't need Rust and WASM to speed up your JS
Few weeks ago I noticed a blog post “Oxidizing Source Maps with Rust and WebAssembly” making rounds on Twitter - talking about performance benefits of replacing plain JavaScript in the core of source-map library with a Rust version compiled to WebAssembly. This post piqued my interest, not because I am a huge on either Rust or WASM, but rather because I am always curious about language features an
Real world es201x and future
現場のES201x と未来のアーキテクチャ - インサイドフロントエンド2
Railsアプリケーションにおけるフロントエンド環境のモダン化
freeeの価値基準の一つである、ユーザーにとって「本質的（マジ）で価値ある」ものを届けるということ。本連載ではそれに向かって、日々挑戦を続ける開発現場の事例をお伝えします。本記事では、freeeでのフロントエンド環境の改善への取り組みである、Ruby on Railsアプリケーションにおけるフロントエンド環境のモダン化について紹介します。Rails5.0以前の標準的なフロントエンドのビルド基盤であるSprocketsアセットパイプラインがもたらした問題について解説するとともに、その仕組みに依存して成長してきたプロダクトがいかにしてSprocketsへの依存を断ち切ったかについて説明します。 対象読者 Ruby on Rails 5.0以前のアプリケーションのフロントエンド開発で、npmによるモジュール管理やwebpackなどによるビルドを行いたいのにそれがなかなか実現できずに困っている方
あなたの知っている正規表現はもう古い！ 正規表現の新常識（ES2018編） - Qiita
2018年1月23日から25日にかけて、TC39の第62回ミーティングが行われました。TC39のミーティングでは、提案されているECMAScriptの新機能 (proposal) について審議し、各proposalのステージの移動を決定します。 今回のミーティングでは正規表現に関する幾つかのproposalがStage 4になりました。Stage 4になったproposalはES2018に組み込まれ、JavaScript (ECMAScript) に正式採用ということになります。 この記事では、JavaScriptに追加された正規表現の4つの新機能を紹介します。 s (dotAll) flag for regular expressions Proposal: https://github.com/tc39/proposal-regexp-dotall-flag 正規表現の新たなフラグとし
JavaScript Start-up Optimization | Articles | web.dev
JavaScript Start-up Optimization Stay organized with collections Save and categorize content based on your preferences. As we build sites more heavily reliant on JavaScript, we sometimes pay for what we send down in ways that we can’t always easily see. In this article, we’ll cover why a little discipline can help if you’d like your site to load and be interactive quickly on mobile devices. Delive
Uppy
The all you need Dashboard — powerful, responsive, and pluggable.Add files from remote sources, edit images, generate thumbnails, and more. import Uppy from '@uppy/core' import Dashboard from '@uppy/dashboard' import RemoteSources from '@uppy/google-drive' import ImageEditor from '@uppy/image-editor' import Webcam from '@uppy/webcam' import Tus from '@uppy/tus' const uppy = new Uppy() .use(Dashboa
ECMAScript 2015以降のJavaScriptの`this`を理解する
この記事はJavaScriptの入門書として書いているjs-primerのthisに関する部分をベースにしています。 またjs-primerでは書けなかった現在時点(2018年1月1日)でのブラウザの挙動についてを加えたものです。 次の場所にjs-primer版（書籍版）のthisについての解説があります。 この記事と違って実際にコードを実行しながら読めるので、学習ソースとしては書籍版を推奨します。 書籍版: 関数とthis · JavaScriptの入門書 #jsprimer また、バグ報告やPRも直接リポジトリにして問題ありません。 asciidwango/js-primer: JavaScriptの入門書 おかしい場所を選択した状態で右下にある”Bug Report”ボタンを押せば、簡単にtypoとかのバグを報告できます。(PRでも歓迎) 前置きはこの辺までで、ここから本編。 この記
Dynamic import() · V8
Dynamic import() introduces a new function-like form of import that unlocks new capabilities compared to static import. This article compares the two and gives an overview of what’s new. Static import (recap) #Chrome 61 shipped with support for the ES2015 import statement within modules. Consider the following module, located at ./utils.mjs: // Default export export default () => { console.log('Hi
WebAssembly の基礎
WebAssembly をご存知でしょうか？2年前に突然発表された新しい仕様です。まだ登場して間もないため、実際に本格的に利用しているサービスは数えるほどしかありませんが、Twitter 等を見ているとじわりじわりと評判になっており、技術としての勢いを感じます。 一方で、WebAssembly について言及された資料がまだまだ少なかったり、技術のレイヤーが一般的なフロントエンドエンジニアの技術セットとは大きくかけ離れているなどの理由により、WebAssembly について誤解されていることも多々あることを感じました。 そこで今回、あまり技術的に詳細な所まで深入りせず、「専門外の方でもこの程度知っておけば良い」よりちょっと詳しいくらいの内容を目標にして WebAssembly を解説してみたいと思います。 WebAssembly とは WebAssembly（wasmとも呼ばれます）とは、ざ
ES Modules入門 - JavaScriptのモジュールを使う方法 - ICS MEDIA
JavaScriptには、モジュールという仕組みがあります。ECMAScript 2015のModulesの標準仕様として策定されており、現在はすべてのブラウザで利用できます。この機能は、ES2015 Modules、ECMAScript Modules、ES Modules、ESMなどと呼ばれています（以下、ES Modulesと記載します）。 webpackやViteなどのフロントエンドのツールを通して、すでにES Modulesを使っているエンジニアも多いと思います。この記事では、ブラウザネイティブで使えるES Modulesに焦点をあて、ES Modulesの導入で解決できる課題と利点を紹介します。 HTML+JSではモジュールの仕組みがなかった JavaScript自体には他のJSファイルを取り込む標準的な仕様が昔は存在しませんでした。外部JSファイルを読み込みたい時に、HTML
Micromodal - Tiny javascript library for creating accessible modal dialogs
Introduction Micromodal.js is a lightweight, configurable and a11y-enabled modal library written in pure JavaScript It enables you to create WAI-ARIA guidelines compliant modal dialogs, with confidence and with minimal configuration. At just 1.9kb minified and gzipped, its a tiny library for big change. Following are some of the interactions handled by the library:- Closing modal on overlay click
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hyperHTMLやlit-htmlが効率的に再描画を行う仕組み - Qiita
加速するフロントエンドとPWA
今さら聞けないSPAのCORS対策の話
