wasm-bindgen/web-sysでWebRTC - console.lealog();
っていうのをやってみた。 いちおうやったので、公式のexampleにもPRも出して、マージしてもらった。 TL;DR やってみたはいいが、このコードをわざわざRustで書きたいモチベーションがはたしてあるか・・？という感想。 それでいうとそもそも`web-sys`を使いたいのってどういうケースなんやろう・・とまで思ってたり。 What is a reason for using web-sys except for team has no javascript skills? - help - The Rust Programming Language Forum わかるよその気持ち。 やってみたコード https://github.com/rustwasm/wasm-bindgen/blob/master/examples/webrtc_datachannel/src/lib.rs 1つ
Rust x WASMのyewでTodoAppを作ってみた - console.lealog();
話題になってたのは去年くらいな気もするし今さら感はあるけど、今だからこそすごい化けてたりしないかなーという期待も込めて。 個人的には、WASMでWebアプリを作る時代になるとはあまり思えてないけど、まぁ試しておく価値はあるかなと思いその学びをメモ。 yewstack/yew GitHub - yewstack/yew: Rust / Wasm framework for building client web apps RustでReactっぽいコードが書けて、それがWASMで動くので、型ありでちょっぱやなWebアプリが作れるぜ！っていうやつ。 今のバージョンは`0.11.0`で、最小のコードはこんな感じ。 use yew::{html, Callback, ClickEvent, Component, ComponentLink, Html, ShouldRender}; struct
Svelte Summit 2020 気になったトークのまとめ - console.lealog();
https://sveltesummit.com/ https://www.youtube.com/watch?v=vHHLLJA0b70 JST夜中スタートだとリアルタイムで見れない...😴 というわけで、気になるトークだけまとめました。 The Zen of Svelte (Morgan Williams) https://www.youtube.com/watch?v=vHHLLJA0b70&t=683s Svelteはフレームワークである そして学びやすいのが特徴 Pythonのように、Zenの心得がある https://github.com/feltcoop/why-svelte#easy-to-learn 作者のRich氏もこう言ってる Frameworks are not tools for organizing your code, They are tools for
HTTP3Study に行ってきたメモ #http3study - console.lealog();
HTTP3Study (new) - connpass まったく詳しくない分野で脳内補完が効かないのと英語なのとで、まったく自信のないメモに仕上がりました。 間違ってたらむしろ教えてほしいです！ HTTP/3 (英語セッション) from Mark Nottingham はじめに ここは最初にWGのMtgをした部屋なので不思議な感じ 仕様の解説というより、経緯とか周辺について話すよ 仕様について議論してるけど、全ての実装・ユースケースを把握してるわけではない いままで HTTP/0.9 今でも使われてるかも `GET /`だけみたいにシンプル HTTP/1.0 いくつかヘッダがついたりした まだシンプルだったあの頃 1993年とかそのへんからユースケースが混んできた なのでみんな拡張をはじめた UAとかHostとか HTTP/1.1 Transfer-Encoding: chunk gzi
webrtc/adapterのコードを読んだメモ - console.lealog();
GitHub - webrtc/adapter: Shim to insulate apps from spec changes and prefix differences. Latest adapter.js release: 界隈で脊髄反射的に必要って言われてる気がする 個人的にはお世話になったことはない SkyWayのJS-SDKでもサンプルでも使ってないし（いちおうメンテナしてるけど） なので余計にフロントエンドでいうjQueryと同じノリを感じる なので、実際に何やってるのか読んで調べてみて、その確証を得たい ちなみに、2018/04/23時点での`master`ブランチの内容。 ディレクトリ構造 `/src/js`が本丸。 . ├── adapter_core.js ├── adapter_factory.js ├── chrome │ ├── chrome_shim.j
WebRTCなコードをE2Eテストする - console.lealog();
という試みをやってみたのでその学びをメモ。 もちろん全てのケースをカバーできたわけではなく、無限に気になることはあるけど、まあきっかけといことで。 環境はmacOSです。CIで動かすのは続編としてまたいつかブログに書きます。 何を使うか いわゆるE2E（URLでページ開いてボタン押したらどうでこうで）をやりたい場合、フロントエンド的な観測範囲だと現時点ではこの2択になるのかなーと思う。 Selenium TestCafe 他にオススメあれば知りたいです。 Selenium https://github.com/webrtc/samples/tree/gh-pages/test とかでも使われてる例があって身近ではあるけど、正直使いたくない・・。 https://github.com/webdriverio/webdriverio とかあわせていれれば多少のシンタックスはマシになるけど、もう
Node学園 28時限目 に行ってきたメモ #tng28 - console.lealog();
Node学園 28時限目 - connpass ついでにパネルで話してきました。 Node Interactiveに行ってきた話 by yosuke_furukawa Node Interactive North America 2017に行ってきた & 発表してきた - from scratch 資料は特になくて、このブログ記事をおさらいする感じでした。 Chrome Dev Summitに行ってきた話 by kojima 資料は見つけたら メルカリのフロントエンドエンジニア第一号さんらしい！ Chrome Dev Summit いい感じの会場と環境 PWAとかAMPの発表おおかった PWA trivagoでの取り組み PWAの成果に驚いた Edge / WebkitでもServiceWorker実装中 https://github.com/GoogleChrome/workbox Fo
やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち - console.lealog();
個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。 そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング（以下SSR）をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるかも ただ個人的にはSPA+SSR不要論者 サーバーサイドのテンプレートとしてのReactも冗長なだけやろ派 でも仕事なのでしゃーない（お客様がそう申されるなら・・ なのでやるからには再考察してみて、前向きにやれる要素を見つけたい！ けどどんだけ考えてもやっぱり意義が見つけられなーい( ´Д｀)=3 という感じで、SSR自体の是非はまあどうでもよくて、ただ個人的に「しなくていい」と思ってる気持ちをまとめたものです。 技術に是も非もないです。大事なのはどう使うかなのです。 ちなみにやってみた結果・・とかいう話ではなく、やってない
Docker？なにそれおいしいの？ for フロントエンド（だけやる）エンジニア - console.lealog();
最初に結論を書いてしまうけど、フロントエンド（だけやる）エンジニアにはたぶんおいしくない。 っていうことに気付くまでの学びを社内勉強会用にまとめたメモ。 概念的なところがメインなので、細かいDockerのコマンドとかそういうのには触れません。 あんまり詳しい分野じゃないので、なんか変なこと書いてたら教えてください・・・！ Docker is 何 Docker Documentation - Docker Documentation Docker is コンテナ型の仮想化技術 "ざっくり"いうと、KVMとかVMWareとかHyper-VとかVirtualBoxとかと同じ ホストOS（たとえばmac）上で、ゲストOS（たとえばLinux）を動かせる もう少しだけ"厳密"にいうと、コンテナ型の仮想化技術というもの 先述のVirtualMachineたち（完全仮想化とか言ったりする）とは違う コン
Safari 10.1でアップデートされたHTML系を試した - console.lealog();
ほんとはリリースノートが出てすぐ試したかったんやけど・・。 Safari 10.1 見出しとしてはこの3つ。 Interactive Form Validation HTML5 Download Attribute HTML Media Capture 相変わらず、興味あるとこだけざっくりさわったメモです。 試した環境 Mac Safari 10.1 iOS Safari 10.0 iOSも10.3.1ならSafariのバージョンは10.1になるかと思ってたけど、UA見る限り`10.0 Mobile`なんよね。 Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_1 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) Version/10.0 Mobile/14E304 Safari/602.1 Int
Node学園 24時限目 に行ってきたメモ #tng24 - console.lealog();
東京は東京でも有楽町だった回。 Node学園 24時限目 - connpass 「Node.js x WebAssembly」 by yosuke_furukawa Node.js x WebAssembly // Speaker Deck WebAssemblyとは ポータブルで効率のいいバイナリ Nativeと同等の速度を目指す ユースケース ネイティブモジュールをWebで使いたい `vim`とか <- 誰がやるん https://rhysd.github.io/react-vimjs/ ゲーム ブラウザ外でも使えるけどそんなにターゲットではなさそう 全部を置き換えるのではなく、CとかC++で書いてあるものを動かすところから Node.js x Native Module 現時点で、どうやってNative Moduleを使うか NAN https://github.com/nodejs
position: absoluteな要素をcenter寄せにする - console.lealog();
よく使う割にイマイチ思い出せないのがコレ。 `position: absolute`じゃないなら、`margin: 0 auto`とかで良いんですけどねー。 それっぽい帯のデザインを作るときとかでbefore/after擬似要素を使う時はたいてい`position: absolute`なので、うまいこと真ん中に寄ってくれないんですよね・・。 でも、よくよく考えたらそれも大したことはなくて。 縦にも横にもcenterしたい場合のやつ。 サンプル Html <div class="wrapper"> <div class="first">div</div> <div class="second">div</div> </div> Css .wrapper { background-color: #fff; padding:50px; margin: 0; text-align: center;
Frontrend Vol.8 - 帰ってきたフロントレンド に行ってきたメモ #frontrend - console.lealog();
ブログ絶対に書くマン枠、結局当日まで空きあったぽいのであえて席を譲ったブログ書くマンとして微妙な悲しみを感じています( ˘ω˘) Design Systems as a Product プロダクトとしてのデザイン・システムについて by @cssradar デザイン・システムとは プロダクトを表すすべてのもの レイアウト グリッド アイコン・色 コンポーネント なんしかユーザーが触れるものすべて 既に山ほど種類がある Bootstrap, MaterialDesign, Origami, ...etc UIを言語化してメンテしていくためのもの 短い目で見ても立ち上げの足がかりに 長い目で見ると、共通言語としての基盤となる 利用する側も、開発する側もメリットがある カオスを管理するものとも どう運営していくかがカギ コレ自体がプロダクトである デザイナーとエンジニアをつなぐもの 小さなデザイ
WebRTC Meetup Tokyo #12 に行ってきたメモ #webrtcjp - console.lealog();
会場がいつもと違ってて、まさかの会社のすぐ近くやった。 Janus: a general purpose WebRTC server by @elminiero Janus @ Meetup Tokyo #12 JanusというOSSについて。 WebRTCのGatewayサーバー 普通にWebRTCするならSDPのシグナリング後にP2P けどGatewayサーバーが間に立てば、いろんなことができる クライアントの格差を吸収したり サーバーから配信したり（SFU的な） Janus https://github.com/meetecho/janus-gateway Janus（ヤヌス）はローマ神話に出てくる前後に顔がある扉の神 プラガブルに作られてて、コアはWebRTCスタックのみ JSEP/SDP、ICE、DataCh、etc HTTP / WebSockets / MQTTなど複数のTC
東京Node学園祭2016 にスタッフ参加してきたメモ #nodefest - console.lealog();
初の2日開催でしたが、今年も無事に終えることができました。 去年に引き続き、今年もスタッフ業に携わったので、そのあれこれを忘れないうちにメモっときます。 技術ブログですが各発表についての内容は一切ありませんｗ 当日まで 公式サイトを @hiloki と一緒に作ってました。 ってもサイト内で動いてるjs部分と、メンテしやすいようにテンプレを分けるとかデプロイするスクリプトを書くみたいな細々したことしかしてなくて、ほぼ @hiloki 神の偉業です。 過去に例を見ないオシャレなサイト、TシャツもステッカーもオシャレならAfter partyのケータリングまでオシャレと、本当にオシャレ番長にはお世話になりました。 After Partyのオシャレな料理はgoodyでした！ https://t.co/B2HEEgFP4j #nodefest— Hiroki tani( ･谷･)و ̑ (@hilo
W3C TAG デベロッパー・サミット に行ってきたメモ #w3ctagdevmeetup - console.lealog();
寒くなってきたよねほんま・・。 LT ソーシャルWebとリンクトデータ by Amy Guy (MIT) https://www.w3.org/Social/WG Decentralize social web ソーシャルは時代と共にいろいろ出ては消える http://activitystrea.ms/ 散ってるソーシャルなデータの共通Specを、JSONで作りたいという話？ Web Payment API by Eiji Kitamura (Google) アプリ時代！と言うけど全てをアプリに寄せろという意味ではない なのでEC = アプリとはならない ただモバイルWebのECのコンバージョンはPCに比べて6割くらいに落ちる それは山ほどあるFormのせいでは？入力めんどいからでは？ そんなUX改善のためのAPI Web Payments at W3C 予め登録しておいた住所やカード情報
Node学園 23時限目 に行ってきたメモ #tng23 - console.lealog();
渋谷かと思ってたら東京だった回！ 「npm v4/v5/next」 by @othiym23 node-gakuen-201610.md · GitHub これは事前に共有してもらえたスクリプトです。 ほぼこれの通りに話されてたので、ざっくりメモ。 自己紹介 npmのCLIチームのリーダーです チームにはKatとRebeccaがいるよ ありがとう @watilde さん! npmのいままで 今やmillions of users, over 350,000 packagesな大プロジェクト なので機能追加は慎重にやっていく SemVerはある種の契約 npm@2からnpm@3 まさにメジャーアップデートだった でもいまだにnpm@2を使ってる人もいる npm@2のほうがインストールが早いケースもある npm@4 メジャーアップデートではあるがそんなに変わらないかも depricatedにな
SwiftでiOS向け音楽プレーヤーを作るための基礎知識 - console.lealog();
GitHub - leader22/SimpleMusicPlayer: SMP! つい先日こういうのを作ったので。 せっかく作ったので、覚えてるうちに忘れないようにメモっておこうかと。 iPhoneのローカルにiTunesから同期したものを再生するための内容で、それ以外のことは書いてないです。 流れ プレーヤーを用意する プレイリストとなるキューをセット 再生する曲や再生位置を設定 再生！ です。 こういうまとまった内容が全然見つからなくて、最初は苦労しました。 ドキュメントにもちゃんと体系立てて書いておいてほしいですね・・。 プレーヤー MPMusicPlayerController - MediaPlayer | Apple Developer Documentation これも幾つか種類があります。 MPMusicPlayerController.applicationMusicP
最近のoverflow: scroll事情 - console.lealog();
もちろんモバイル情報です。 iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの？っていう。 overflow: scroll 対象をiOS5以上、Android4以上とするのであれば十分に使えるものだと思います。 ただスクロールすれば良いだけであれば、jsなしに実現できる時代きた！すばらC！ -webkit-overflow-scrolling: touch 勘の良い人ならお気づきでしょうが、コレも使いたいですよね。 スクロールできる部分で慣性スクロールができるようになるやつです。 .carousel { overflow: scroll; -webkit-overflow-scrolling: touch; } みたいな。 ただこいつは、まだ要注意です・・。 手元で再現したバグなので、すべてのケースに当てはまるわけではないと思いますが、 一応こ
TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed - console.lealog();
そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とかあるかもですよ。 トークバトル React / Angular 2の概要 スター数とかバージョンとか コードがだいたいこんな感じとか 開発言語 こば: だいたいBabel、TypeScriptでもやれる 会長: だいたいBabel使ってると幸せになれる らこ: JavaScript or TypeScript or Dart らこ: まあTypeScriptですよね らこ: Dartはリポジトリが分かれました はち: ReactやるからAngularやるからで開発言語を選ぶのはナン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
