[B! Web][frontend] Nyohoのブックマーク

For fast and secure sites | Jamstack

What is Jamstack? Jamstack is an architectural approach that decouples the web experience layer from data and business logic, improving flexibility, scalability, performance, and maintainability. Jamstack removes the need for business logic to dictate the web experience. It enables a composable architecture for the web where custom logic and 3rd party services are consumed through APIs. The Roots

Nyoho 2022/02/15

“Comprehensive guide for building Jamstack sites and home of the global Jamstack community.”

frontend
web

リンク

Micro Frontends Architecture Patterns

本書は、Micro Frontends Architecture Patternsというタイトルを付けていますが、モノリスからJAMstack、Micro Frontendsまで、Webフロントエンドを包括した様々なアーキテクチャパターンの詳細を体系的に紹介しています。ソフトウェアとしてのアーキテクチャ全体を俯瞰し、他のシステムとのやりとりを設計するような考え方が役に立つことは多いです。フロントエンド観点で、様々なアーキテクチャパターンをまとめることで、Web開発の助けになればと考えています。また、アーキテクチャの歴史と変遷を知ることで「Micro Frontends」への理解を深めることができると筆者は考えました。Micro FrontendsはThoughtWorksのTechno logy RadarではすでにADOPTとなり、海外で多くの事例が存在します。Micro Fronte

Nyoho 2020/12/22

リンク

Web Share Target API #w3fukuoka

信頼性目標とシステムアーキテクチャー / Reliability Objective and System Architecture

Nyoho 2019/09/26

web
frontend

リンク

Three.jsでオフスクリーンキャンバスを使う - ICS MEDIA

オフスクリーンキャンバスはWorkerスレッドで描画処理を行える機能です。負荷の高い描画処理をWorkerスレッドに移動することで、メインスレッドの負担が軽くなり、余裕ができます。これによりメインスレッドでスムーズなユーザー操作を実現できるようになり、ユーザー体験の向上が期待できます。具体的には、canvasの描画処理が大きかった場合にオフスクリーンキャンバスを使うと、ボタンクリック時の反応やCSSアニメーションが滑らかになるでしょう。 Three.jsでもオフスクリーンキャンバスを利用できます。複雑なことをしなければ難しくなく、通常のThree.jsのコードに少しの実装を追加するだけで実現できます。オフスクリーンキャンバスの機能については、記事「オフスクリーンキャンバスを使ったJSのマルチスレッド描画 – スムーズなユーザー操作実現の切り札」で詳しく解説しています。この解説を読み進める

Nyoho 2019/05/30

canvasのDOMにtransferControlToOffscreen()

frontend
web

リンク

Netlify CLI

Excited about the future of the web and AI? Check out the discussions from our latest event. Watch now! Close announcement bar

Nyoho 2019/04/10

web
frontend

リンク

今年、JavaScriptでの仕事の幅を広げた技術６選 - Qiita

こんにちは。久しぶりのQiita投稿です。今回は「ex-KAYAC Advent Calendar」の13日目の記事として寄稿させていただきます。さて、改めて私の今やっていることを紹介させていただきますと、独立してから株式会社Lucky Brothers & co.という会社を設立し、主にWebの受託制作を行っています。かれこれ３期目に突入致しました。アドベントカレンダーということで改めて2018年という年を振り返ってみたのですが、一言で言うと「今年はフロントエンドエンジニアにとって大きな当たり年であった」と言えるのではないかと思います。特に私達の会社では、今までのいわゆる「Webサイト制作」だけの単一事業形態から脱し、他のあらゆるアプリケーション制作にも手を拡げられた年になりました。そんな話をしようと思います。 Nuxt.js Vue.js製のフレームワークであるNuxt.js

Nyoho 2018/12/15

Contentful という headless CMS 知らだったー。

web
frontend

リンク

光を超えるためのフロントエンドアーキテクチャ - Speaker Deck

HTML5 Conference 11/25

Nyoho 2018/11/26

CDNちゃんと使っとるサイト増えてきたよね。最後のlighthouse知らだった。使ってみよう!

リンク

[2018] 個人でも使える！おすすめAPI一覧

コメント欄にも他の方のおすすめAPIを書いてくれているので是非見てください！ Google Sheets API 公式：https://developers.google.com/sheets/api/reference/rest/ 数万行のGoogleスプレッドシートの読み取り・書き込み処理などができます読み取りだけであればAPIkeyの発行だけでできますが、書き込みにはOAuth認証が必要です参考：PythonとSheets API v4でGoogleスプレッドシートを読み書きする Google YouTube Data API 公式：https://developers.google.com/youtube/v3/docs/ YouTubeを検索して動画・再生リスト・チャンネルなどの一覧などを取得したり、更新したりすることができます検索条件で地域(regionCode: JP)

Nyoho 2018/09/26

frontend
web

リンク

Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか -VueとReactのデベロッパ用ロードマップ

Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。【追記】 Angularのロードマップを追加しました。基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。拡大画像: Vueのロードマップ

Nyoho 2018/08/06

この図いいね。

frontend
web

リンク

The Cost Of JavaScript In 2018

Update: The Cost Of JavaScript In 2019 is now available to read. Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens? Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay inter