今度は「WebOTP」についてFrontend Weekly LT（社内勉強会）でお話しました - BASEプロダクトチームブログ
はじめましての人ははじめまして、こんにちは！フロントエンドエンジニアのがっちゃん（ @gatchan0807 ）です。 今回は社内勉強会 Frontend Weekly LT にて、WebOTP / OTPの概要と使い方について発表をしたので、その内容を皆さまにも共有できればと思って記事にしました。 （以前、同じように社内勉強会での発表内容が記事化された 「Frontend Weekly LT（社内勉強会）で「Vite」について LT しました」の記事もぜひどうぞ） 元々、BASEのどこかに使えないかなぁと思って個人的に調べていた内容を社内共有用にまとめたものなので一部 web.dev の記事をなぞっただけの部分もあるのですが、その内容と共にBASEでのOTPの使い方やWebOTPの利用状況についてのシェアしていければと思います。 イントロ Chrome 93から新機能が追加され、Andr
GitHub - getmeli/meli: Platform for deploying static sites and frontend applications easily. Automatic SSL, deploy previews, reverse proxy, and more.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
At the start of this hectic year I have joined Micro, an open source microservices platform. The company was born out of a Go framework. We took the concepts of the framework - interfaces for service discovery, configuration and other pieces which can run on any implementation (from mdns locally to kubernetes) and provide a live platform version of it. It’s kind of like Netlify, but for the backen
Cybozu Frontend Day 2023の社内開催と資料公開 - Cybozu Inside Out | サイボウズエンジニアのブログ
主催のkoba04による写真 こんにちは、フロントエンドエンジニアの@shisama_です。 6月30日にサイボウズ東京オフィスで開催された「Cybozu Frontend Day 2023」の資料と開催レポートを公開します。 「Cybozu Frontend Day 2023」は、サイボウズのフロントエンドエンジニアが集まりフロントエンドに関する知見を共有する社内イベントです。 発表資料 発表資料は以下の通りです。発表者が公開している一部の資料については、発表者の許可を得て掲載しています。 Pages RouterとApp Routerでのi18n対応の違い 発表者: @nissy_dev zenn.dev 誰でも簡単⁉️👀 絵文字ができるまで😃👍 発表者: @oguemon_com speakerdeck.com Node Streamでメモリ性能改善、そしてWeb Stream
BFFとは 名前の通り、フロントエンドのためのバックエンド（サーバ）です。フロントエンドのためにAPIをコールしたり、HTMLを生成したりするサーバ 2000年代前半のWebアプリは、HTMLが主体で動きがシンプルだった。しかしWebアプリが技術進化で複雑化するにつれて フロントエンド側にクライアントごとの要求に応えるためのサーバを配置してバックエンドのAPIサーバとの橋渡し役とするアーキテクチャが開発されるようになりました。 BFFの役割 BFFはフロントとバックエンドの姿勢・方針が乖離している場合に仲介役となることができる [メリ] バックエンドアプリの仕様が完全に固まっていて変更が難しい場合や、バックエンドとフロントが完全に別チームで開発される場合には「バックエンド側での対応が難しいから、フロント側の開発者がBFFを設け、そこで対応する」ことができる [デメ/思ったこと] フロントと
React + Redux: Re-Architecture - Think ! FrontEnd by DMM
Think ! FrontEnd by DMM #01の登壇資料です！！ https://dmm.connpass.com/event/177895/
Cypress + TestRail による Frontend E2E テストの効率化について | メルカリエンジニアリング
Merpay Advent Calendar 2020 の 8 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 2020 年後半からフロントエンドチームと QA チーム合同で、リグレッションテストの自動化に取り組んできました。E2E テストフレームワークである Cypress でマニュアルテストを自動化し、加えて TestRail を用いてテストケース管理も仕組み化することでワークフローの整備を進めています。本記事では、それらの取り組みについて紹介します。 ワークフロー改善後の全体像 リグレッションテストとは 実装を変更した結果、アプリケーション全体の振る舞いに予期せぬ影響がないかどうかを確認するテストです。メルペイではリリース前 QA の最終フェーズでリグレッションテストを実施しています。Web アプリケーションを End To End (E2E)
GitHub - tauri-apps/tauri: Build smaller, faster, and more secure desktop applications with a web frontend.
Tauri is a framework for building tiny, blazingly fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a rust-sourced binary with an API that the front-end can interact with. The user interface in Tauri apps currently leverages tao as a window handling l
Webフロントエンドの現場とこれからをつなぐカンファレンス「Inside Frontend #3」開催レポート | CyberAgent Developers Blog
今回は2019年5月18日（土）に開催された「Inside Frontend #3」のレポートをお届けします！ Inside Frontend とは Inside FrontendはWebフロントエンドの現場とこれからをつなぐことを目的に、ヤフーとサイバーエージェントが共同で開催するカンファレンスです。 2017年に第1回、2018年に第2回が開催され、どちらも大盛況のうちに幕を閉じました。 第3回の今回は有料イベント化という初めての試みにも関わらずありがたいことに多くの方々に関心を持っていただき、満員御礼での開催となりました。 本イベントは2つのセッション形式で開催されました。 各社のケーススタディや様々な分野のスペシャリストによるセミナーと、セミナーの後でスピーカーと自由に質問や議論ができるAMA（Ask Me Anything）セッションです。参加者の方々は現場で得られたノウハウやこ
introduction HonoにはRPCの機能があり、routerで定義している情報（引数とか型とか）を他のファイルで簡単に利用することができます。 この記事では、そのRPCの機能とNextを組み合わせて、HonoをNextのBFFとして使用する組み合わせについて紹介していきたいと思います。 まず、今回作成した２つのサンプルのリポジトリを紹介します。 以下の２つのリポジトリのコードを用いて説明するので、もし興味があればクローンして色々試してみて下さい。 next-hono-webはshadcn/uiのコンポーネントをお借りして作成したサンプルのダッシュボードに対して、一部の値を動的に設定するよう変更を加えたものです。 next-hono-backendはとてもシンプルで、next-hono-webで使用するサンプルデータを返すよう定義されています。 next-hono-backend側
Next.js + Storybook Addon | Storybook: Frontend workshop for UI development
A no config Storybook addon that makes Next.js features just work in Storybook Storybook Addon Next ⚠️ DEPRECATED ⚠️ This addon has been deprecated in favor of @storybook/nextjs which is the Storybook official addon for supporting Next.js features in Storybook. It supports everything storybook-addon-next does and much more! I even worked on developing this with them so you should be in good hands.
GitHub - phodal/clean-frontend: Clean Frontend Architecture：整洁前端架构
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Frontend Weekly LT（社内勉強会）で「Vite」について LT しました - BASEプロダクトチームブログ
はじめまして、フロントエンドエンジニアの @rry です。 BASE では社内勉強会として「Frontend Weekly LT」を毎週開催しています。 今回は Vite 特集で LT をしたので、Frontend Weekly LT の紹介も兼ねて内容を発信していきたいと思います。 Frontend Weekly LT とは BASE はフロントエンドエンジニアが、業務委託の方も合わせて約20名ほどいます（7/16現在）。 普段は別チームに分かれており、プロジェクトもそれぞれ別で開発を進めているのですが、この勉強会ではそんなフロントエンドエンジニアが一堂に集まってわいわい LT するイベントです。 LT イベントは基本的に毎週2名ずつ登壇して、 新しく BASE でリリースされた機能の紹介 いま気になっている＆プロダクトで使用している技術について 自己紹介 LT などなど、毎回さまざまな
GitHub - mizchi/uniroll: Opinionated universal frontend bundler in browser
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - rohanrhu/gdb-frontend: ☕ GDBFrontend is an easy, flexible and extensible gui debugger. Try it on https://debugme.dev
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Over the past year, the Vue team has been working on the next major version of Vue.js, which we hope to release in the first half of 2020. (This work is ongoing at the time of writing.) The idea for a new major version of Vue took shape in late 2018, when the codebase of Vue 2 was about two-and-a-half years old. That may not sound like a long time in the life span of generic software, but the fron
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Building the perfect GitHub CI workflow for your frontend team - Maxime Heckel's Blog
Building the perfect GitHub CI workflow for your frontend team You've probably noticed if you've been following me for a while that I'm a ✨ big fan ✨ of automation. I wrote about automated CI/CD a year ago and also talked a lot about the concepts surrounding this subject, but never really touched upon the tools I use for my CI jobs and how I use them. One such tool that has really worked for me, e
GitHub - m31coding/fuzzy-search: A fast, accurate and multilingual fuzzy search library for the frontend.
import * as fuzzySearch from './path/to/fuzzy-search.module.js'; const searcher = fuzzySearch.SearcherFactory.createDefaultSearcher(); const persons = [ { id: 23501, firstName: 'Alice', lastName: 'King' }, { id: 99234, firstName: 'Bob', lastName: 'Bishop' }, { id: 5823, firstName: 'Carol', lastName: 'Queen' }, { id: 11923, firstName: 'Charlie', lastName: 'Rook' } ]; const indexingMeta = searcher.i
https://opt.connpass.com/event/222709/
Requirements: This tutorial assumes you know C++, but no previous compiler experience is necessary. Welcome to the “My First Language Frontend with LLVM” tutorial. Here we run through the implementation of a simple language, showing how fun and easy it can be. This tutorial will get you up and running fast and show a concrete example of something that uses LLVM to generate code. This tutorial intr
Designing CSS structure in a legacy frontend product
ユーザーのペルソナを元にしたアクセシビリティガイドラインを作りたいというアイデア - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
ステップ・バイ・ステップでAuth0 + Vue.js + GolangでFrontend&Backend API 両方で認証するアプリ作る - YOMON8.NET
この記事見つけて今使っている技術にぴったりだと思って色々参考にさせていただきました。 qiita.com ただ、認証部分がFirebaseでなくAuth0使っているので、主にその部分を変更して、自分でやってみた手順を書いてみました。 システム情報 Auth0の設定 APIs Applications Connections Users アプリケーション側設定 Backend (Golang) Backend APIサーバ設定 Backend APIサーバ起動 Backend APIサーバ稼働確認 Frontend (Vue.js) Frontend設定 Frontendサーバ起動 動かしてみる 認証無しの状態でAPIを叩く ログインしてみる ログイン後APIを叩く Scope設定 Scope設定後 その他 AccessTocken JWTの確認 参考 システム情報 ローカルで以下のように動
11/3 にグランフロント大阪で開催された FRONTEND CONFERENCE 2019 で「高齢者でも使えるプロダクト UI の挑戦」というタイトルで発表しました。 高齢者でも使えるプロダクト UI の挑戦 / Designing User Interfaces for the Elderly - Speaker Deck 高齢者にも使ってもらえるプロダクトにするために、これまで地道に改善を続けてきたことを事例として共有するという内容でしたが、ありがたいことに、発表後たくさんの質問をいただきました。その場でうまく回答できなかった部分もあったので、あらためてこの場で回答をさせてもらいたいと思います。 「色覚障害の見え方をチェックするためのおすすめのツールは？」 スライドの中でも紹介した NoCoffee という Chrome 機能拡張以外に、Mac アプリでは Sim Daltonis
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号)
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号) こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの @nus3_ です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/01 の Frontend Weekly で取り上げた記事や話題を紹介します。 How React 18 Improves Application Performance – Vercel React18で新しく導入されたTransitions、Suspense、React Server Componentsなどをパフォーマンスの観点から解説しています。React17以前とReact18
Weekly Frontend News 2022年4月4週目/React Redux v8,Redux v4.2,Nuxt v3 RCなど
Weekly Frontend News 2022年4月4週目/React Redux v8,Redux v4.2,Nuxt v3 RCなど 自分が今週見たフロントエンド記事のまとめ。 Release v8.0.0 · reduxjs/react-redux React 18対応、内部のTS化によりtypes/react-reduxが不要に、ビルドをES2017にしたのでIE11非対応へ。 Release v4.2.0 · reduxjs/redux createStoreが@deprecatedになり非推奨としてマークされるようになった。そしてlegacy_createStoreが追加された。これは、Redux Toolkitをへの移行を促すためである。 また、Why Redux Toolkit is How To Use Redux Today が追加され、ReduxではなくRedux
GitHub - malinajs/malinajs: Frontend compiler, inspired by Svelte
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Mercari x Merpay Frontend Tech Talk vol.4 を開催しました | メルカリエンジニアリング
Merpay でフロントエンドエンジニアをしている @_sskyu です。1月15日に Mercari x Merpay Frontend Tech Talk vol.4 が開催されました。私も登壇者として参加したので、当日の発表の様子を紹介します。 Pros and Cons of SSR and JAMstack 最初に私が 「Pros and Cons of SSR and JAMstack」という発表をしました。昨年の8月から取り組んでいたもので、キャンペーン用のマイクロサービスのパフォーマンスが出ない問題を調査して、JAMstack 構成の環境に移行したという内容で発表しました。 speakerdeck.com ※JAMstack: JavaScript + API + Markup を使った Web アプリケーションアーキテクチャ。 NoCode で CMS と連携するデザイン
GitHub - frontyjs/fronty: your micro frontend companion
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Less is moreDevice displays run at a certain number of frames per second. Browsers try to match this rate for a smooth user experience. To output a new frame to the display, the browser must first complete its ‘rendering cycle’ or ‘pixel pipeline’. The majority of devices run at 60 FPS. This allows for around a 16ms window to complete the rendering cycle, per frame. Increased FPS means even smalle
![Frontend Web Performance: The Essentials [0]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f4ebca80380c1e7c1598570f23b6d7a83d581a33/height=288;version=1;width=512/https%3A%2F%2Fmiro.medium.com%2Fv2%2Fresize%3Afit%3A963%2F1%2ABK3PHVbfaONNdaqvy0mEDQ.png)
appディレクトリでVanilla Extractサポートなど : Cybozu Frontend Weekly (2023-04-18号)
appディレクトリでVanilla Extractサポートなど : Cybozu Frontend Weekly (2023-04-18号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの Saji (@sajikix) です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/04/18 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 入れ子構造を自由に拡張する – TypeScript 版「Trees that Grow」 | IIJ Engineers Blog 以下のような型を TypeScript でどのように扱うか、様々なパターンや Haskell の例など交えて解説している記事になります。 共通の
Next.js 14 リリースなど: Cybozu Frontend Weekly (2023-10-31号)
はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/11/31 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Rspress, the Rspack-based static site generator Rspack ベースの Static Site Generator である Rspress の v1 がリリースされました。 i18n 対応やコンポーネントのプレビューなど、様々な機能が盛り込まれているようです。 Faster TypeScript builds with --isolatedDeclarations TypeScr
Astro 2.0 と迫る TS 5.0 の気配など : Cybozu Frontend Weekly (2023-01-24号)
Astro 2.0 と迫る TS 5.0 の気配など : Cybozu Frontend Weekly (2023-01-24号) こんにちは! サイボウズ株式会社フロントエンドエキスパートチームの Saji (@sajikix) です。 はじめに フロントエンドエキスパートチームでは毎週火曜日に Cybozu Frontend Weekly という 「1 週間の間にあったフロントエンドニュースを共有する会」 を社内でに開催しています。 今回は、2023/01/24 の FrontendWeekly で取り上げた記事や話題をまとめたものになります。 取り上げた記事・話題 Bun v0.5 | Bun Blog Bun v0.5 がリリースされました。主なアップデートは以下のようになっています。 package.json の workspaces 機能に対応 ドメイン名解決のためのビルドイン
State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号)
State of CSS 2023 の結果公開など : Cybozu Frontend Weekly (2023-08-29号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023/08/29 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 <search> が Chrome118 で実装予定 検索や絞り込み要素に関するコンテナ要素である <search> が Chrome 118 で実装予定とのことです。Firefox や Safari にはすでに実装済みのため、メジャーブラウザの多くで利用可能になります。 Fresh 1.4
【LINE証券 Frontend】requestIdleCallbackを活用して初期レンダリング時間を約14%削減した話
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。この記事は【LINE証券 FrontEnd】シリーズの4番目の記事です。 最近のWeb Vitalsの隆盛を受けて、LINE証券のフロントエンドでもパフォーマンスの改善に取り組み始めました。およそ2週間ほど改善に取り組んだ結果として、開発環境での計測ではLighthouseのperformanceスコアが従来より30点ほど上昇しました。 パフォーマンス改善のためにさまざまな施策を行いましたが、この記事ではその中でも興味深かったものとして、requestIdleCallbackを活用してLazy Loadingされるコンポーネントの読み込みを遅延し、その結果初期レンダリングにかかる時間を約14%削減できた事例をご紹介します。 環境 以前の記事でご紹介したとおり、LINE証券のフロントエンドはTyp
Static vs Unit vs Integration vs E2E Testing for Frontend Apps
Static vs Unit vs Integration vs E2E Testing for Frontend AppsJune 3rd, 2021 — 13 min read In my interview "Testing Practices with J.B. Rainsberger" available on TestingJavaScript.com he gave me a metaphor I really like. He said: You can throw paint against the wall and eventually you might get most of the wall, but until you go up to the wall with a brush, you'll never get the corners. 🖌️ I love
GitHub - dominikh/gotraceui: Go execution trace frontend
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Simon Holdorf Posted on Oct 6, 2019 • Updated on Apr 27, 2021 • Originally published at thesmartcoder.dev Introduction Whatever you do, it's always beneficial to have the right tools at your disposal. I love working remotely and am a big advocate of doing remote software development. Therefore, I always strive to have the best equipment available to be as productive as possible. Writing posts like
Use Chrome DevTools Like a Senior Frontend Developer
Photo by Morning Brew on UnsplashOkay, now for some reason, you’ve finally chosen Chrome as the browser you’re developing for. Then you open Developer Tools and start debugging your code.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why we are building a CLI first PaaS without a web frontend
BFF(Backend For Frontend)のメリット/デメリットと導入の是非について
Next as Frontend + Hono as BFF という組み合わせの提案
The process: Making Vue 3 – Increment: Frontend
GitHub - nakst/gf: A GDB frontend for Linux.
Walk around functional web frontend programming
My First Language Frontend with LLVM Tutorial — LLVM 17.0.0git documentation
SVGやJPG等の画像の最適化、JSON/JS/TS/CSSなどのフォーマット、カラーコード変換などフロントエンド開発をサポートするツールをページ移動せずに使えるWebアプリ・「Frontend Toolkit」
FRONTEND CONFERENCE 2019 に登壇しました - jmblog.jp
Frontend Web Performance: The Essentials [0]
9 Projects you can do to become a Frontend Master