Push Notifications, WebXR, and better PWA support coming to iOS－firt.dev
Push Notifications, WebXR, and better PWA support coming to iOS iOS 15.4 beta has finally added icon support in the manifest, Web Push, AR, and VR experiments. by Maximiliano Firtman Twitter @firt About Newsletter Published 2 years ago (31 Jan 2022) About 8 min reading time #ios #webview #pwa #store Not every minor iOS version update includes changes in the Web platform. Still, iOS 15.4 will be an
フロントエンドもバックエンドも網羅的に経験できる Webアプリ開発のプラットフォーム「LIFF」の開発と魅力
フロントエンドエンジニアの仕事内容や業務事例、働く環境などについて紹介する「LINEフロントエンドエンジニア採用説明会」。そこでフロントエンド開発センターUIT1室の佐藤氏が、「LIFF」の開発について共有しました。 自己紹介 佐藤信吾氏：それでは「LIFFのJavaScript SDK開発チームの紹介」ということでお話しします。どうぞよろしくお願いします。 まずは自己紹介させてください。佐藤信吾と言います。ソフトウェア開発者です。2020年にLINEに入社し、フロントエンド開発センターのDev7というチームに所属しており、現在は「LIFF」というデベロッパープロダクトのJavaScript SDK（Software Development Kit）の開発周りを担当しています。 LIFFについて では、さっそくLIFFについて簡単に紹介します。LIFFは、LINEが提供するLINEのクライ
GitHub - Shopify/hydrogen: Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify
Hydrogen is Shopify’s stack for headless commerce. It provides a set of tools, utilities, and best-in-class examples for building dynamic and performant commerce applications. Hydrogen is designed to dovetail with Remix, Shopify’s full stack web framework, but it also provides a React library portable to other supporting frameworks. Demo store 👇🏼
AWS AmplifyでNext.jsのISRを試してみる | DevelopersIO
まえがき AWS AmplifyでついにNext.jsのISRに対応したようです。実際にやってみる。 Deploy and host server-side rendered apps with Amplify - AWS Amplify 少しハマったので備忘録も兼ねて。 Amplify + Next.jsをデプロイ Next.jsのプロジェクトを作成 yarn create next-app --typescript ✔ What is your project named? … next-sample-app Next.jsにISRのページを作成 サンプルでISRのページを新規作成します。簡単にタイムスタンプを表示し、5秒間キャッシュするようにします。 pages/isr.tsx import Head from 'next/head' import styles from '../s
Deno で 学ぶ React のサーバサイドレンダリング - 30歳からのプログラミング
Deno で React のサーバサイドレンダリング（以下、SSR）を実現する方法をハンズオン形式で書いていく。 自分が調べた範囲では、単に JSX で HTML を構築して終わり、という記事が多かった。それではあまり実用的ではないので、この記事ではハイドレーションまで行う。 また、React で SSR する方法を調べたところ、ほとんどの記事が Next.js を前提としていた。確かに Next.js を使わずに SSR するケースはあまりないだろうし、記事としても需要がないのだと思う。 しかし、Next.js のようなフレームワークが裏側で何をやってくれているのかを知ることで、SSR に対する理解を深めることができる。 事実、私は SSR をほとんど使ったことがなかったが、この記事を書くことでかなり考えを整理することができた。 Deno のバージョンは1.11.2で動作確認している。
How I Dockerized my Next.js website?
Learn how to use Docker to create images for development and production. Imagine that you have developed a full fledged working application and want other developers to contribute to the project. Now if the application consists of different components like UI, running server, database etc. The new developer should install the exact configuration of the entire stack on to his/her system before star
Agoraで君だけの最強のClubhouseを作ろう
Clubhouse に招待されないので自分で作ってみた、みたいな感じです。まあ別に招待してくれなくていいんですけどね、大して興味ないしそのうちオープンになるだろうしそれにほらどうせ Android 使ってるしあのぶどうは酸っぱいし[1]。 初挑戦で頑張って調べて書いてる感じなので何かあれば PR とかお願いします。 先にまとめ Clubhouse は Agora を使っているらしい Agora - Real-Time Voice and Video Engagement https://www.agora.io/en/ 無料枠は音声 10,000 分/月 （誤って『10,000 時間/月』と記載してました。分です。すみませんでした。） 公式チュートリアル：Start a Voice Call 今回作ったデモ：ginpei/try-agora 毎月 10,000 分無料とのこと。価格のページ
Next.jsでページ共通の処理をする（useEffectを使う例）
Nuxt.jsだとmiddlewareという機能を使うことで、ページの遷移ごとに特定の処理をはさむことができます。 Next.jsで全ページで特定の処理をはさむためには、Appコンポーネント（_app.tsx）にその処理を書くことになります。 Next.jsの_app.tsxに全ページ共通の処理を書く 参考：Next.jsの_app.tsxのカスタマイズ（TypeScript） import type { AppProps } from 'next/app' import { useEffect } from 'react'; function MyApp({ Component, pageProps, router }: AppProps) { + useEffect(() => { + // ここに全ページ共通で行う処理 + },[router.pathname]) return <C
SSH defaults, config, and priorities | Root
Over the years I’ve collected a rather messy ~/.ssh/config which resulted in some undesired behavior as a result of me misunderstanding how the config file prioritizes its options. Today I investigated that. In short, this is what I found: Priority goes from top to bottom Defaults MUST come last Host specificity is NOT a factor of priority Host sections can be specified multiple times Multiple hos
Flutterで本格的にアプリを書き始める前にやること
Flutterでアプリ開発を始める前に個人的にやっていることをまとめてみる。個々の作業の具体的な手順や方法に関しては分量が膨大になってしまうので触れないが、より詳しく解説してくれている記事やドキュメントへのリンクなんかは載せておこうと思う。複数人で開発する場合は証明書周りなんかはもっと考慮すべきことはあると思うのだけど今回は省く。 環境設定 version 新規アプリならFlutterのversionは2系からでいいと思う。1系で書く理由として一部のパッケージで2系対応してないなどはあるが、主要なパッケージはほぼ全て問題なく対応してるはずなので2系を使えば良い。 null safety null safetyを後から入れる、もしくは移行でnull safety対応するのは結構骨の折れる作業なので最初から有効にしておくべき。上述したようにFlutterの2系を使っていればnull safet
GitHub Actionsを使ってAndroidアプリをFirebase App Distributionへ配信するまでのベストプラクティス - Qiita
GitHub Actionsを使ってAndroidアプリをFirebase App Distributionへ配信するまでのベストプラクティスAndroidFirebaseGitHubActions はじめに どうも、GitHub Actions大好きな@tarumzuです。 今回はGitHub ActionsでAndroidアプリを配信する際のベストプラクティスな記事がなかなか無いなと思ったので、無いなら作ろう！という試みです。 例としてdev環境とstg環境の２つをApp Distributionで配信するという流れをGitHub Actionsで作ります。 コード 早速ですがコードの全文です。今回はタスク毎にJobを分けて対応しています。こちらのコードを順を追って説明していきます。 name: publish on: push: branches: # 今回はdevelopブランチを
Snowpack v2.0
After 40+ beta versions & release candidates we are very excited to introduce Snowpack 2.0: A build system for the modern web. Starts up in <50ms and stays fast in large projects.Bundle-free development with bundled production builds.Built-in support for TypeScript, JSX, CSS Modules and more.Works with React, Preact, Vue, Svelte, and all your favorite libraries.Create Snowpack App (CSA) starter te
Recoil
Minimal and ReactishRecoil works and thinks like React. Add some to your app and get fast and flexible shared state. Data-Flow GraphDerived data and asynchronous queries are tamed with pure functions and efficient subscriptions. Cross-App ObservationImplement persistence, routing, time-travel debugging, or undo by observing all state changes across your app, without impairing code-splitting.
グループ会社のインフラをECS/Fargateに移行して振り返る | ランサーズ（Lancers）エンジニアブログ
皆さん元気ですか！？SREチームの@adachin0817です。去年から行っていた移行プロジェクトで、グループ会社である、シクロマーケティング株式会社の「ミギウデ」をさくらVPSからAWSへ移行しました。今回、移行背景やECS/Fargateでのコンテナ運用について簡単にご紹介と振り返りを行ってみたいと思います。 なぜAWSへ移行するのか AWSへ移行すると冗長性の担保などが挙げられますが、一番は開発環境やインフラなど、すべてランサーズに統一させるということが第一の目的です。それに伴い、ミギウデ自体のサービスがシンプルなインフラ構成ということもあり、インフラ運用の手間をなくしたいということから、ECS/Fargateで初の外部サービスとしてコンテナ運用にチャレンジしてみようとなりました。 目的とコンテナ化にするメリット ・内部統制対応 ・S3、RDSを利用したバックアップ ・CloudWa
React+Electronアプリを作ってみよう
こんにちは。前置きは抜きにすぐ作ります。 Create Application 01: create-react-app まずはcreate-react-appです。なかったらnpm install -g create-react-appしてください。 うまくいったらyarn startで起動しましょう。しましたか？うまくいってるのを確認したら即刻ジョブ止めましょう。もう二度とyarn startを実行することはありません。 02: install Some Package 以下のパッケージをインストールしてください。最新ので問題はないはずです。すべてインストール時に--dev-dependenciesを付けることを忘れないでください。まあ忘れてもいいです。 electron npm-run-all 03: setting up Electron こちらのgistを参照してください。 次に
ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita
はじめに そろそろ、使っていないと後ろ指をさされそうな雰囲気になってきた、ビルドツール各種ですが、業界(?)の全体像をなんとなく眺めてみたいと思います。動きとしてはRuby界隈が早く、Guardが2010年あたりから、それを参考にする形でGruntが出てくるのが2011年、gulpについてはまだ1年未満という状況ですが、特にJavaScript周りは活況です。 下記、主にGitHubの各種数値を並べています。コミュニティの盛り上がりや成熟度の判断の参考として。 名称 環境 設定ファイル 可読性 GitHub プラグイン Issues 初コミット
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Patterns.dev
GitHub - rakkasjs/rakkasjs: Bleeding-edge React framework powered by Vite
Next.js から Prisma ORM を利用する
ChromeOS
