Clean Architecture in Web Frontend #mixleap - Speaker DeckUnderstand the mechanism! Let's do screenshots tests of Compose Previews with various variations / 仕組みから理解する！Composeプレビューを様々なバリエーションでスクリーンショットテストしよう
[翻訳記事]マイクロフロントエンド - マイクロサービスのフロントエンドへの応用
モダンな Web アプリを異なる JavaScript フレームワークを使う複数チームで開発するためのテクニック はじめに この記事は翻訳記事です。 原著者の許可をとって翻訳・掲載しています。 原文はこちらです。 翻訳者 マイクロフロントエンドとは？ マイクロフロントエンドという言葉は 2016 年の終わりにThoughtWorks Technology Radarで言及されました。 それはマイクロサービスの考え方をフロントエンドに拡張したものです。 現在の Web のトレンドは多機能でパワフルな SPA です。 SPA はフロントエンドとバックエンドを切り離すという、マイクロサービスの考え方に基づいています。 開発をすすめていくと、特に複数のチームで管理している場合 フロントエンド層が肥大化して管理が難しくなりがちです。 これを「モノリシックなフロントエンド」と呼びます。 マイクロフロン
BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由
BFFは、フロントエンドエンジニア、バックエンドエンジニアのどちらが担当するのか BFFは、クライアント側を担当するフロントエンドエンジニアが開発を担当することが多いです。BFFはサーバであるため、バックエンドエンジニアが開発すると思われることもありますが、UIを構築、操作する手助けをするサーバであるため、フロントエンドエンジニアの担当領域になります。 BFFアーキテクチャでは、バックエンドエンジニアはAPIを基本として、リソースを管理するのが担当領域になります。 BFFを作る具体的な方法に関しては、次回の「BFFの作り方」で詳細に解説します。 BFFのアーキテクチャパターンにするとき、しないとき BFFのアーキテクチャパターンには、「フロントエンド専用のサーバを設けることでUIを構築しやすくする」効果と、「フロントエンドとバックエンドの境界を設けてアーキテクチャのレイヤーを分割することで
ウォーターフォール型開発を教科書通りやると失敗する - UXエンジニアになりたい人のブログ
常識かと思ってましたが、業界人であっても開発経験のない人には伝わらないことが多いので、書きます。 なお、ウォーターフォール型といっても明確な定義があるわけではないので、ありがちな以下のモデルを題材にします。 via 開発プロセスの基本を学ぶ | 日経 xTECH（クロステック） なぜ失敗するか ウォーターフォールの各フェーズの作業内容や成果物を上記のように定義すると、非常にわかりやすいです。が、失敗します*1。 要件定義/外部設計は、客がこう言っていた/客が言ってることを実現する画面はこんなのだ、という形で簡単に進んで、内部設計段階で詰まります。なぜなら、外部設計成果の実現可能性を検証していないから。 ある画面と別の画面との処理内容がどうやっても競合する 画面表示に必要なデータを抽出できない こういう問題が噴出します。そしてそもそもどういう前提で外部仕様作ったんだよ上流は、というネットでよ
WebAssembly 開発環境構築の本
# WebAssembly を試すそれでは WebAssembly の動作を理解するため, WebAssembly の入門から始めましょう! 引数として受け取った 2 つの数値の和を返す単純な関数 add を Rust で実装して, WebAssembly にコンパイルして JavaScript から呼び出してみます. まずは Rust のインストールを行います. ## Rustをインストール (cargo, rustc, rustupコマンドなどがインストールされる) $ curl https://sh.rustup.rs -sSf | sh $ cat ~/.cargo/env ## toolchainを更新 $ rustup update ## WebAssemblyへのコンパイル機能を有効化 $ rustup target add wasm32-unknown-unknown イン
Atomic Design の理解 : molecules と organisms をどのように分割するか - Frasco
我々のインタラクションデザイナーである Alla Kholmatova が FutureLearn での Atomic Design の利用の状況について考察します。 1年前、私たちは FutureLearn での最初のパターンライブラリ開発について、そしてなぜ我々が Atomic Design を使うことになったのかについて著しました。 全般的に、Atomic Design は我々のチーム内でうまく機能しています。それはインターフェイスの理解の共有や、さらなるモジュール化への移行、我々のデザイン言語の進化などに貢献しました。 Atomic Design におけるいくつかのコンセプトについては最初から明確でしたが、その他はあいまいに感じていました。例えば、我々の理解がまだ不十分な分野は、molecules と organisms の違いについてです。 Brad Frost は、molecu
Getting Started with Server-Side Rendering Using Nuxt.js | DigitalOcean
Nuxt.js is a powerful and simple framework built to create universal, server-side rendered applications using Vue.js. It was inpsired by Next; React’s server-side rendering (SSR) framework. Nuxt was created by Alex & Sébastien Chopin and has gained a lot of attention in 2017. So much so, that the Chopin Brothers have become evangelists for server-side rendering in general in the Vue.js community,
ECSSの概要と考え方のまとめ - Qiita
ECSSというOOCSSとはほとんど反対のアプローチをするCSSの構成案があります。製品によってデザインが大きく異なるWebサイトに向いているのかなと個人的には考えています。あるいは、うまく共通化をすることができれば大規模なWebサイトにも適応可能ではないかなと期待しています。 Enduring CSS 案件で使いたいなと思ったのですが、あまり広く知られているものでもないですし、検索しても該当する記事はまだまだ少なかったりします。 公式サイトを読むのが一番いいのですが、ボリュームがあり、さらに英語であることを考えるとそれも難しい。というわけで、ECSSの概要と考え方を日本語で比較的短い文章でまとめることにしました。 このドキュメントの目的はECSSを詳しく調べたくなったり、実際に使い始めるためのきっかけになることです。 以下の文章の最新版はGitHubにアップしています。 ECSS End
Atom Flight Manual
CompanyEngineeringProductSunsetting AtomWe are archiving Atom and all projects under the Atom organization for an official sunset on December 15, 2022. January 30, 2023 Update: Update to the previous version of Atom before February 2 On December 7, 2022, GitHub detected unauthorized access to a set of repositories used in the planning and development of Atom. After a thorough investigation, we hav
Vue/Vuexに静的に型を付ける - Please Drive Faster
最近Vue/Vuexを触っている。 前々から欲しいと思っていたのもあって、習作としてelectronでYouTubeのデスクトップクライアントを作った。 github.com 僕は仕事中はだいたいYouTubeを再生している。映像を見ながらコードを書きたい欲求があった。とはいえ、そのために作業領域を侵食されるのはつらい。 ということで前面に固定する機能と透過率を設定できる機能をつけた。 こんな感じになって便利。 Vueにおいて、TypeScriptを選ぶかFlowを選ぶか Vueにおいて、楽をしたいならTypeScriptを選ぶ方が良い。Flowに比べて、公式のサポートが断然に厚い。 公式ページにもサポートについて1セクション割かれている。 TypeScript Support — Vue.js また、TypeScriptチームがVueとTypeScriptのStarter Kitを公開し
[WIP] もうFLOCSSで消耗するのはやめよう！単一ファイルコンポーネント時代の新しいCSS設計 - Qiita
序章 管理可能で拡張性のあるCSSを構築するために、先人たちは数々のCSS設計や命名規約を生み出しました。 OOCSS、SMACSS、BEM、SuitCSS... そしてそれらの考えを統合したFLOCSSが登場しました。 FLOCSSは強力なツールです。 しかし、悲しいことに強力すぎて誰も使いこなすことができなかったのです。 「これってComponentとProjectどっちだ?適当でいいか」 「最初に作った人はFLOCSSを理解していたかもしれないが、あとから保守した人が理解していなくてめちゃくちゃになった」 「サーバーエンジニアなのに急にフロントを書かないといけなくなった。FLOCSS? 覚えること多すぎて無理！」 この状況から脱出するための新しい技術が生まれました。 単一ファイルコンポーネントです。 単一ファイルコンポーネントって? こういうやつです。 <template> <p>{
![[WIP] もうFLOCSSで消耗するのはやめよう！単一ファイルコンポーネント時代の新しいCSS設計 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a0864137ac8ada166cf394eaf905aa10e215ce5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCV0lQJTVEJTIwJUUzJTgyJTgyJUUzJTgxJTg2RkxPQ1NTJUUzJTgxJUE3JUU2JUI2JTg4JUU4JTgwJTk3JUUzJTgxJTk5JUUzJTgyJThCJUUzJTgxJUFFJUUzJTgxJUFGJUUzJTgyJTg0JUUzJTgyJTgxJUUzJTgyJTg4JUUzJTgxJTg2JUVGJUJDJTgxJUU1JThEJTk4JUU0JUI4JTgwJUUzJTgzJTk1JUUzJTgyJUExJUUzJTgyJUE0JUUzJTgzJUFCJUUzJTgyJUIzJUUzJTgzJUIzJUUzJTgzJTlEJUUzJTgzJUJDJUUzJTgzJThEJUUzJTgzJUIzJUUzJTgzJTg4JUU2JTk5JTgyJUU0JUJCJUEzJUUzJTgxJUFFJUU2JTk2JUIwJUUzJTgxJTk3JUUzJTgxJTg0Q1NTJUU4JUE4JUFEJUU4JUE4JTg4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz05YzBlZmEzNDlmZTI0ZWM3MjYxMTRlMzNiYWZjMTQwZg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaXN1a2UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWYyYjVmNDg4MjFiZjUyOGNlOGMzMmFjYWNlM2VjYThi%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dcaa7521461021fa276cafbb06edb11c0)
阿部寛のサイトを高速化する - Qiita
ちまたで阿部寛のサイトが早いと話題になってます。 dev.toと阿部寛のホームページどっちが速いですか？ dev.toと阿部寛のホームページについてちゃんと計測させてくれ 阿部寛のサイトはベストを尽くしてるのか？ それを調べるために、阿部寛のサイトを高速化させてみたいと思います。 目指すべきスピード 最速はローカルのファイルへのアクセスだと思うのでこれを目指したいと思います。 file:///C:/abe_hiroshi/index.html ChromeのDeveloper Toolでレンダリング完了が「173ms」でした。 まぁここまでは無理だな… 阿部寛のサイトはどんなもん？ 速度はwebpagetest.orgで測ってみます。 レンダリング完了時間は「359ms」です。はえーな S3でホスティングしてみる サーバーを立てるほどでもないので、S3でWebホスティングしてそこにhtml
babel-preset-env を試す - アカベコマイリ
npm として配布するものは純粋な Node 機能のみで構成したいため脱 Babelしたが、Web フロントエンドや Electron では最新の ECMAScript 機能を利用したい。 というわけで、これまでは Babel + babel-preset-latest で JavaScript を変換してきた。しかし latest だと Web ブラウザーや Electron が最新規格に対応しても個別に変換を無効化するのが難しい。例えば ES2015 Classes は大半の Web ブラウザーが対応済みにも関わらず var Sample = function () { function Sample() { _classCallCheck(this, Sample); } } のように変換されてしまう。一方、機能単位で変換を無効にできるとしても Web ブラウザー毎の対応状況を調べる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://morizyun.github.io/blog/node-js-npm-library-immutable-js/index.html
衝撃の試算! ECサイトをAMP対応するだけでアクセス数110%・CV率120%になる!?【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ
Using the New vue-cli 3 to Scaffold Vue.js Apps | DigitalOcean
Vuejs and Integrating Typescript | Tirell Mckinnon
Webデザインギャラリー・参考サイト集｜MUUUUU.ORG
ES6とlodashでオブジェクトの深いプロパティの値を取得する - Qiita
http://chibinowa.net/note/vuejs/vue-17.html
