Frontend Study #1 訂正: 最後のzennの記事のリンク先は、正しくは https://zenn.dev/mizchi/articles/c638f1b3b0cd239d3eea です
![「フロントエンド領域」を再定義する](https://cdn-ak-scissors.b.st-hatena.com/image/square/e13ef7d8bea84de5cba9d47e14995ea12b17ad32/height=288;version=1;width=512/https%3A%2F%2Ffiles.speakerdeck.com%2Fpresentations%2Fe8f0726858b44472b9761ecd802f973c%2Fslide_0.jpg%3F16673626)
Front-End Study #1「Cloud Native時代のフロントエンド」 - connpass の発表内容のテキスト版です。 発表に載せられなかった参考資料集 StatCounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share The "Developer Experience" Bait-and-Switch - Infrequently Noted JavaScriptよ。文明を捨て、自然に還れ。 ::ハブろぐ Deno - A secure runtime for JavaScript and TypeScript Rome Toolchain Blitz.js - The Fullstack React Framework | Blitz.js ⚡️ Prisma - Da
英語の勉強ブログみたいの復帰させようとして、GitHubでやるのがいいと思ってたタイミングでGitHub IssueをCMSとして使う話を見たので作った。 元ネタ: 2020-11-08 このブログの実装 2020年版 - waka.dev waka/waka.dev: Just a logging. 元ネタからの変更点 URLを issueの number (連番) ベースにした Cloudflare Workersの無料枠で動くようにするため、KVではなくCache APIに変更 URLを number のIDベースにしたかったので、GraphQLのクエリも特定のIssue Idを元に取得するものへ変更している。 english-notes/src/api_client.ts Lines 47 to 68 in 07cd248 const ISSUE_QUERY = ` query i
r7kamura さんのこのサイトの実装 2020年版に倣って、このブログの実装を書いてみる。 ソースコードは全て GitHub に上げてある。 ホスティングとCI Cloudflare Workers を使って配信している。 CI は専用CLIツールの Wrangler の使い勝手がよく簡単。 GitHub Action も公式から提供されているのがあるのでそれを使うだけ。 TypeScript, React を使っているので Wrangler 組み込みの Webpack でビルドしている。 Webpack がどう動いているのかいまいち掴みきれてないので、 Wrangler のコードを読まないといけない。 投稿の管理 Markdown ファイルを自前で HTML に変換することはせず、GitHub Issues に書くことにした。 画像もサッと入れられるし、モバイルアプリ(GitHub
mdbuf, そこそこ使い物になりそうな品質になったので改めて紹介します。 https://markdown-buffer.netlify.com で遊べます。 コンセプト ブラウザで完結 編集とプレビューのみに注力 PWA 機能を最大限に活かす 特長: 高速な Markdown プレビュー 色々頑張ってみた結果、高速な入力が可能です。 試した限り、 100000 文字以上だと流石に重くなっていきます。将来的に領域を分割してレンダリングできないか実験中です。 Desktop PWA 対応 PWA アプリとして、オフラインで起動することが可能です。編集中のデータはブラウザ内に保存されます。 編集位置への自動スクロール Markdown を編集すると、プレビュー側の対応する行へ自動的にフォーカスします。 自分が知る限りこの機能を実現してるのは mdbuf だけです。 アウトライン機能 指定した
目次 今から始めるReact入門 〜 React の基本 ←★ここ 今から始めるReact入門 〜 React Router 編 今から始めるReact入門 〜 flux編 今から始めるReact入門 〜 Redux 編: immutability とは 今から始めるReact入門 〜 Redux 編: Redux 単体で状態管理をしっかり理解する 今から始めるReact入門 〜 Redux 編: Redux アプリケーションを作成する 今から始めるReact入門 〜 Mobx 編 React をはじめるにあたって 普段バックエンドを触っている人間として、フロントエンド側の知識も触れておこうということで個人的なReact の勉強記を残しておきたいと思います。 すでにReact の記事は多く出回っていますが、ここでは最近のReact 及びReact Router, Redux, その他Red
こんな感じの画面が出ます。 Reduxの導入 次に、Reduxを入れます。 Reduxとは、 Stateを管理するフレームワークです。Facebookが提唱しているFluxアーキテクチャの概念を拡張して扱いやすく設計されたライブラリです。 Fluxのコンセプトはこの辺を見てください。 Reactはpropとstateを持ちますが、アプリケーションの規模が大きくなると、コンポーネント間のstate管理が難しくなります。Fluxアーキテクチャはこの問題を解決してくれます。 簡単に説明すると、以下のようなA〜Zまでのコンポーネントがあったとします。(雑な図ですみません。。。) 開発途中で、コンポーネントCとZのstateを共通化したくなった場合にstateをコンポーネントAに移植する必要がありますが、その場合、propsを渡すために依存関係のあるB、D〜Yまでのすべてのコンポーネントを修正する必
はじめにlibwebrtc は Android, iOS 共にデバイスのカメラとマイクを操作する API を提供しています。両プラットフォームの API は統一されておらず、大まかな処理の流れは似ていますが個別に覚える必要があります。 Android 版はクラスとインターフェースの数が多くて把握に苦労したのでメモしておきます。カメラの映像を深くカスタマイズしたい方 (意外と少なくないと思います) のお役に立てれば幸いです。 なお、 iOS 版ではデバイス操作に関してあまり凝った API は提供されていません。内部ではわりと OS と密結合に実装されており、カスタマイズの余地は Android より少ないです。 諸注意この記事は M83 時点での情報です。記事中のコードは Kotlin です。元のコードが Java の場合は Kotlin の表記に変更しています。処理の流れカメラの映像の取得
はじめに こんにちは。 都内在住のフロントンドエンジニアです。 僕はとある会社にて約 1 年半ほど React と WebRTC を用いて映像配信のアプリケーション開発を行ってきました。 そこでは開発をスムーズに進める為に WebRTC の SDK を利用していて、 本来学習コストが高いとされている WebRTC をカジュアルに利用することができています。 しかし、より入り組んだ実装をしたり映像配信特有の問題(後述) を解決するとなると以下 3 つの WebAPI の理解は避けて通れません。 MediaStream RTCPeerConnection WebSocket 詳しくは文中に記載しますがこれらの理解を深めないと開発の進行に大きな影響があると思ったので、WebRTC 関連のライブラリ等を利用せずに映像配信のアプリケーションを作って学習しようという考えになり、実際に作ってみました。
風になった不二子の話 息子が小学生の時、学校から一匹のザリガニを持ち帰りました。 彼はそのザリガニに「不二子(ふじこ)」と名前をつけ、ベランダで飼い始めました。 しかし間も無く、お世話はサボりがちになり、可哀想な不二子は、最後は干からびて死んでしまいました。 ある日ベランダを見てみると、ケースの中にいるはずの不二子がいなくなっていました。 どうやら干からびた不二子が、完全に風化してしまったのではないかという話になりました。 それ以来、我が家では、息子が「犬を飼いたい! ちゃんとお世話をするから!」と言っても、「嘘をつけ! 不二子を風にしたくせに!」と言って、二度と許されないのでした。 AWSでNext.jsの環境を構築したときの話 VIVITAエンジニアの、かまかまです。 AWSのEC2上に、Next.jsの環境を構築したときの手順を、余計なことを書かずにご紹介します。 git / nod
これまでは、データを表示し、ユーザー入力を取り扱う単一のコンポーネントの書き方を見てきました。 次はReactの素晴らしい機能の1つである「Composability(構築可能性)」について学んでいきましょう。 動機付け: 関係性の分離 モジューラー・コンポーネントを構築することで、別の明確に定義されているインターフェースとコンポーネントを再利用することができ、 関数やクラスを使いまわす時と同じような利益を得られることが出来ます。 特にアプリケーションの関連性を分離する一方で、新しいコンポーネントを構築してシンプルにすることを心がけて下さい。 アプリケーションのためにカスタムコンポーネント・ライブラリを構築することで、 ある意味、あなたのドメイン(組織?)に最も適した相応しいUIを表現することが出来るでしょう。(翻訳に自信なし) 構成例 FacebookのGraph APIを使用して、プロ
タイトルの通りなんですが、適当に散歩しながら 3D スキャンをやりまくっていくのが 2020 年代最初に来る新たな遊びだという結論に至ったので、みなさん今すぐ iPhone 12 Pro か Pro Max を買ってやりましょう。やってない人はだれも理解していないと思いますが、最高に楽しいです。 そもそも iPhone で 3D スキャンって何だよって話ですが、今年でた iPad Pro から LiDAR が載るようになって、雑に言うと普通にカメラの情報に深度(カメラから物体への距離です)を乗せられるようになったんですよね。そもそもでいうと AR で使って現実世界にいい感じに物を乗っけるのが目的で Apple としても付けた物っぽいし、実際そういうアプリもいっぱい出ています。でも、正直 AR とか Apple Glasses が出るまでどうでもいいじゃないですか。そうなってくると LiDA
大英博物館 ロゼッタストーン 記事のねらい 読者の英語力が上がる 注意 科学的根拠はありません。再現性も未確認です。とあるソフトウェアエンジニアがチラシの裏を公開した程度に過ぎません。 筆者の英語力 ネイティブレベルの英語力は持ってませんが、アメリカで7年以上働いてます。 OctopusをOculusに聞き間違えられることはないと思います。たぶん。 と、さりげなく、どこで働いているか暗示してみたところで、本題に入ります。 ロードマップ この記事は、とあるソフトウェアエンジニアが実践として語る、英語学習の方法論です(6年間の実体験を元に、http://blogger.splhack.org/2014/09/blog-post.html を洗練させたものです。前述通り、科学的根拠はありません。アメリカの会社のコーディングインタビューを通り、一日中英語だけの環境で働きながら、他のソフトウェアエン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く