WABT: The WebAssembly Binary Toolkitを使ってみる - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
第一回Grimoire.jsハンズオン at Mozilla Japan｜IT勉強会・イベントならTECH PLAY［テックプレイ］
イベント内容 イベント概要 Web上で様々な表現を可能にするWebGLをWebエンジニアが今までの延長で扱えるライブラリ、Grimoire.jsを使ってみよう! 基本的なHTML,CSS,Javascriptの知識だけでOK。新しい表現力を手に入れる方法を実践して学ぼう。 3Dモデル表示も! https://cx20.github.io/gltf-test/examples/grimoiregl/index.html?model=VC&scale=0.2 CSSだけでは難しい、シェーダーアートも! https://grimoiregl.github.io/grimoire.gl-example/#clover 動画やWebカメラへのエフェクト適用だって! https://grimoiregl.github.io/grimoire.gl-example/#webcam (リンクはWebカメラ
まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]
こちらは ピクシブ株式会社 Advent Calendar 2016、13日目の記事です。 こんにちは！4月からピクシブに入社したエンジニアの@_ragg_です✨ メンテナンスチーム・pixivFACTORYチーム・pixivFANBOXチームを旅して、デザインをかじったりフロントエンドを触ったりしています、3代目社内旅行エンジニアですね！ さて、今回はHTML5 Canvasに実装されつつあるOffscreenCanvasと、Web Workerについてお話しします。まだ日本語文献の少ないアツアツのネタです🔥🔥 OffscreenCanvas #とは OffscreenCanvasは、「画面に表示されないCanvas」です。 かつて CanvasProxy と呼ばれていたのをご存じの方もいると思います、まさにそれです。 「画面に表示されないCanvas」は、「表示前に何段階か画像の加
![まだシングルスレッドでレンダリングしてるの？ HTML5 CanvasとWeb Workerの最新技術 - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/67a807916396b353fe22c6e5872e9f20268dcb97/height=288;version=1;width=512/https%3A%2F%2Fimg.esa.io%2Fuploads%2Fproduction%2Fattachments%2F3516%2F2016%2F12%2F13%2F10914%2F38a4d5e9-a149-45eb-a78c-d0285f932d29.png)
全部知ってる？ npmを使いこなすために絶対知っておきたい10のこと
知っておくと便利なnpm（Node Packaged Modules）のコマンドとTipsを全部で10本まとめました。 Facebookの新しいYarn projectには興奮を覚える一方で、Node.jsの躍進にはオリジナルパッケージであるnpmの存在が大きく貢献しています。 少ないnpmのコマンドで、初期化したり（npm init）、パッケージをダウンロードしたり（npm install）、テスト（npm test）したり、プロジェクト内でカスタムスクリプト（npm run）を作ったりできます。少し詳しく調べていけば、日々の開発を劇的に変えてくれるさまざまなコマンドがnpmには用意されています。 注意：もしnpmの手引きが必要なら『A Beginner’s Guide to npm — the Node Package Manager』をチェックしてください。npmとYarnの違いにつ
Vue.js 1.x から 2.0 への移行のポイント
{ topic = [".NET", "PowerShell", "Ubuntu", "LibreOffice", "Arduino", ...] } 先日Vue.js 1.xから2.0への移行を行った。まるっと書き換えないといけないというレベルではないが、メジャーバージョンアップだなぁと感じる程には違いを感じられたのでいくつかポイントを書いておく。 もちろん、Vue.jsの機能を全て使いこなしているわけではないため、すべて網羅しているとはとても考えていないので、詳しくは「Migration from Vue 1.x」を参照してほしい。 大きな違い：テンプレートが事前コンパイルできるようになったVue 1.xと2.xの大きな違いは、テンプレートのコンパイルと実行を分離できるようになったこと。実際に移行してみた感じ、このコンパイル処理の邪魔になるようなことに関しては排除するような形で変更され
💓 Vue.js
��xܪ� � �۪� �gBܪ� �V�۪� �FI۪� ��۪� %Dܪ� �%�۪� P�xܪ� �� ܪ� ���۪� 0 �۪� ��۪� �Dܪ� � [۪� � ܪ� ���۪� 3�۪� �� ܪ� �/ PwI۪� � �۪� p� ۪� �6Hܪ� �| ۪� 0��ڪ� � �۪� P� ܪ� peHܪ� aI۪� @��ڪ� ` ܪ� ���۪� ��ڪ� �JDܪ� P��۪� �s1ܪ� Q&۪� pq�֪� ���ڪ� �ڪ� u0۪� P#�۪� S ܪ� `��۪� � ۪� k�۪� �R�ڪ� � �e�۪� ��ڪ� �1�۪� p��۪� ��۪� � ۪� �ڪ� pB ܪ� ��c۪� �� ۪� P ܪ� P)�ڪ� [I۪� ��+۪� �� ۪� `��۪� �xDܪ� ���۪� �/�۪� ܪ� � �۪� ���۪�
Vue.jsで実現するMVVMパターン Fluxアーキテクチャとの距離
Design and Strategy: How to Deal with People Who Don’t "Get" Design
JavaScriptのUIライブラリはどうあるべきかという話とOnsen UIのアーキテクチャ - id:anatooのブログ
Onsen UI Advent Calendar の12/9の記事です。 Onsen UIは、モバイルアプリのネイティブライクなUIをHTML + CSS + JavaScriptで簡単に構築することを目的としたUIライブラリです(UIフレームワークともたまに呼ばれます)。 ↓みたいなネイティブなモバイルアプリっぽい画面をサクッと作ることができます。 私は数年前から開発メンバーとしてOnsen UIの設計開発を行っています。この記事では、Onsen UIに求められるUIライブラリとしての要件とそれを解決するためにどのようなアーキテクチャを取っているのかについて解説します。 特定のフレームワークに依存しない jQuery UIやReactの上に乗っかっているUIライブラリなどのように特定のフレームワークの仕組みを使って実装されたUIライブラリというのはたくさんありますが、ある特定のフレームワ
よく分かってなくてもVue.jsで動くモノが作れた話 - Qiita
この記事は、Vue.js Advent Calender 2016 9日目の記事です。 （アドベントカレンダーには）初投稿です。酷いタイトルですが実際そうだったので、何卒よろしくお願いします。 これを書いてるひとのスペック マークアップエンジニアとフロントエンドエンジニアの境目を行ったり来たりしています。 あまりフレームワークの理解がそれほどないので地味にフルスタック気味でJS書いたりしています。最近はどっちかというとディレクションとか進行の方に首突っ込んでいます。 発端 フレームワークをそろそろ何か触ってみないといかんとは思っており、社内のとあるプロジェクトでReactを使ってはいましたが大規模だったのと、どうやら暖かそうだったのもあり、そこまで敷居が高くなさそうな別のものはないかと探した所、Vue.jsと巡り会いました。 開発環境を整える Vue.jsはサンプルコードで見るからに簡単に
Web Audio APIでコインの音を作る - Qiita
Web Audio APIを使えばブラウザでも簡単に音楽プログラミングができる！と思いたいのですが、どうやらAPIがあるだけでは不十分で少しばかりは音楽プログラミングの知識が必要そうです。ということで、この記事では世界で最も有名な効果音「コインの音」を題材に楽譜のパラメータ化とWeb Audio APIでの実装をできるだけ丁寧に解説します。 楽譜 楽譜を手軽に探すには「coin sheet music」などで画像検索します。コインの音は商標出願されていますので、今回はそれを参考にします。（画像は商標プラットフォームのスクリーンショットです。） この楽譜からは次の点が読み取れます。 テンポが180 最初の音が十六分音符の「シ」で次の音は「ミ」 全体の長さは四分音符が3つぶん 楽譜がまったく読めないという場合は、音階（ドレミファソラシド）と音長（四分音符とか）が読める程度に覚えれば良いと思いま
家族👨👩👦👦はreplaceされてしまうのか？あるいはZWJの話😂 - Qiita
こんにちは、@todokrです。これは絵文字 / Emoji Advent Calendar 2016 3日目の記事です。 さっそくですがクイズです。以下のJavaScriptのコードの実行結果はどうなるでしょうか？ （すぐお試しいただけるようgistにコードをアップしてみました) ... ... ... 結果はこちらです。 なんと！ママが入れ替わってしまいました！ 「家族」の1文字に対してreplace したのに何故でしょうか？ 「なんだこの文字は!?」に遭遇したらやることはただひとつ、そう16進ダンプでバイナリを見ることです。1 まずはプレーンな「家族」の絵文字から見てみましょう このようなテキストファイルを用意します。 odコマンドでダンプした結果が以下です。 エンコーディングはUTF-16なので2バイトずつで0xD83Dと0xDC6Aですね 先頭バイトの0xD83Dが上位サロゲート
Rails5.1のwebpack実装、webpacker gem簡単解説 - Qiita
はじめに DHHがRails5.1にwebpackを取り入れる意向を示し、その実装としてwebpacker gemを提案しました。 まだ最低限の方針が示されただけで機能は全然足りてませんが（コミットチャンスですよ！！）、どんな実装になっているか軽く見てみました。 リポジトリ, PR webpacker gem: https://github.com/rails/webpacker PR to Rails: Basic --webpack delegation to new webpacker gem 内容 注： あくまで2017/1/18現在の話で、これから多くの変更が入ることになります webpackのラッパーになっている webpackを用いたJSアプリの素地を作ってくれる webpackのコマンドをrakeコマンドでラップしている rake越しにやりたくない人は、webpackを直に
The State of Babel · Babel
Some History Current Status The Future Community Previous issues: Babel Roadmap #4130, 6.0 #2168 Please check out the Community section if nothing else. Also published as part of Mariko Kosaka's 2016 Web Advent Calendar! Some History Sebastian created "6to5" in September of 2014. Interestingly enough, he made it to scratch an itch he had with understanding programming languages and how they work.
Isomorphic JSで作られたWebサイトの脆弱性検査 | リクルート テックブログ
サイバーセキュリティエンジニアリング部の西村です。 Recruit Engineers Advent Calendar 2016の12月6日の記事を担当します。 先日、あるWebサイトの脆弱性検査を業務で担当しました。対象のサイトは、Node.js + React + Reduxを用いてIsomorphic JSを実現しており、検査でもこのアーキテクチャに特有の脆弱性が見つかりました。 この記事では、検査で発見した脆弱性をもとに、Isomorphic JSのWebサイトを構築する際に気をつけるべきポイントを紹介します。 Isomorphic JSとは Isomorphic JSは、近年、注目されているWebのパラダイムで、サーバとクライアントで同一のJSのソースコードを利用することが特徴です。これにより、サーバとクライアントの双方でHTMLを生成できるようになり、従来のSPAに見られたSE
Promise の all と race だけで書ける待ち合わせ、書けない待ち合わせ - Qiita
ECMAScript 2015 で導入された Promise の関数 all と race だけで表現できる非同期処理の待ち合わせについての考察です。 考察の対象とした待ち合わせの条件は、「過半数の Promise が解決されるまで待つ」をはじめとした特殊なものです。**結論からいうと、all と race だけを組み合わせて、多数決による待ち合わせを表現可能です。**ただし、与えられた Promise の解決順序に依存する待ち合わせは、all と race だけでは書けません（ただし証明はできてないです 追記2020/11/08 書けるようです（否定的に証明されました）。 制約条件 Promise#then を使えば、なんでもできてしまいます。 そのため、この後の議論では Promise#then は封印します。 待ち合わせの書き方 まず、待ち合わせの表現方法を導入します。 非同期に解決
レガシーシステム上のJavaScriptをモダンビルドにしていくwebpack利用実例 - Qiita
Livesense Advent Calendar 3日目の記事です。 この記事では自分たちが業務でやってきたJavaScriptコードのwebpack + babel導入実例ついてまとめていきたいと思います。一部でも参考になれば幸いです。 まえがき・前提 今回取り扱うこと 今回この記事では下記の観点で進めていきます JavaScriptのビルドのお話し CSS関連は取り扱わない（ちょっと触れる） 実践的なwebpackの利用方法・ノウハウ 入門的な部分は扱わない 既存コードが存在するプロダクション環境で既存のコードを置き換えることを前提とした泥臭めな話中心 ワークアラウンドとしてダーティな手法を利用している部分も含まれる 新規開発を始める際などは結構違う文脈なところが多い。 別なプロジェクトでは一部機能のみBabelビルドしたり、完全に最初からフロントエンドビルド部分をwebpackに任
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
簡単にVue.jsでサーバーサイドレンダリングを試してみた - Qiita
GitHub - istanbuljs/babel-plugin-istanbul: A babel plugin that adds istanbul instrumentation to ES6 code
https://qiita.com/watilde/items/791976db413ec343190a
axiosを乗りこなす機能についての知見集 - Qiita
