20190612 oretoku-frontend justice-for-frontend
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well
7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 | HackerNoon
7 FrontEnd JavaScript Trends and Tools You Should Know for 2020 by@ysaring
Chrome 113 でWebGPUをデフォルト利用可能になど : Cybozu Frontend Weekly (2023-04-11号)
Chrome 113 でWebGPUをデフォルト利用可能になど : Cybozu Frontend Weekly (2023-04-11号) こんにちは! サイボウズ株式会社フロントエンドエンジニアの おぐえもん（@oguemon_com） です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「一週間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/04/11 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Powering a serverless Web: Vercel joins AWS Marketplace – Vercel 4/5 に Vercel が AWS Marketplace で利用できるようになりました。 これにより、AWS アカウントを通じて Ver
Help us understand the problem. What are the problem?
Frontend Mentor | Front-end coding challenges using a real-life workflow
Improve your coding skills by building realistic projectsOur professionally designed challenges help you gain hands-on experience writing HTML, CSS, and JavaScript. We create the designs so you can focus on the code and see your skills skyrocket! Log in with GitHub Join 824,595 developers building projects, reviewing code, and helping each other improve.
@potato4d さんに誘われて、 Web24というアーカイブなしのオンラインイベントでFrontend Stackについてお話ししてきました。 connpass.com 他には @lightnet328 さんと @f_subal さんと一緒でした。僕とは初対面で事前打ち合わせなし、そんな状況で深夜の90分間を駆け抜けました。 Frontend Stackというテーマの都合上、各々が仕事で使用している技術が密に関わってくる内容でしたが、それぞれの所属している会社の規模感や歴史的背景などを含めとても良い議論ができたと思っています。 ただ言えるのは圧倒的に90分じゃ時間が足らず、後日Twitter Spacesで数時間お話しさせて頂きました。それも含め新しい試みというか、とても新鮮なことばかりでした。 当日の内容はアーカイブなしですので、雰囲気はTogetterで感じていただければと思います
JSer.info #464 - Node.js向けのHTTPクライアントライブラリであるGot 10がリリースされました。 Release v10.0.0 · sindresorhus/got TypeScriptで書き直されたバージョンで、Node.js 10以降がサポート対象となっています。 Node.js 12以降を対象にBrotliのサポート、DNS Cacheのオプションを追加なども行われています。 また、オプション名のリネームを中心に破壊的な変更も多く含んでいます。 query -> searchParams baseUrl -> prefixUrl encoding -> responseType その他にもリトライオプションの使い方の変更、リクエストとレスポンスにおけるJSONの扱い方の変更なども含まれています。 FAB — Frontend Application Bu
Frontend_Developers_Experience__Why_What_How_.pdf
Developer eXperience Day 2021 の登壇資料です。
Micro-frontend Architecture: Import chunks from another Webpack bundle at runtime
Micro Frontend Architecture: Import chunks from another Webpack bundle at runtime Importing chunks from other Webpack bundles at runtime, using them as if there were always there — interleaved applications
話があんまりまとまってないけどとりあえず出す。 職能型組織とその弊害ある程度大きい Web プロダクト開発の現場 (例: エンジニアが全部で20人) において、その内部が Backend チーム / Web Frontend チーム / iOS チーム / Android チームみたいにサブチームとして分かれていることは実際よくあることだと思う。 アジャイル開発の文脈だと、基本的にこういう分け方はあまりよろしくないとされる。この分け方だと、それぞれのチームに閉じてユーザーストーリーを満たす開発ができない。そうすると、本番環境に機能を出してユーザーに使ってもらうには、複数のチームにまたがってタスクの優先度を合わせたり、複数のチームの成果物をつなぎこんだりする必要がある。そうするとチームをまたいだ調整が必要になり、チームの自律性が下がる。 そうではなくて、例えばフィーチャーごとにチームを作り、
マネーフォワードクラウド経費でのフロントエンドの取り組み / moneyforward-expense-frontend
マネーフォワード Pay for Businessのフロントエンド / Money Forward Pay for Business Frontend
先週土曜日にInside Frontend行ってきたのでレポート。 Inside Frontend inside-frontend.com CyberとYahooの共同主催のフロントエンドのイベント。 国内だとHTML5 Conferenceに次ぐくらいの大きさかな？？ 会場はAbema Towers。 行く途中で中本でラーメン食べたから、イベント中腹壊したらどうしようと思っていたが杞憂で終わってよかった・・・ TypeScript: Why and how we adopted it at Slack SlackをTypeScriptで作り直した話 Reactも導入しているっぽい 2017年4月ごろっぽい https://slack.engineering/typescript-at-slack-a81307fa288d JSはVanila JSで書くのが好きで、ライブラリとか入れない予
Fastest Frontend Tooling
First published on October 3, 2022, updated on September 8, 2023 I tried tons of frontend tools this year in my pursuit to optimize my Developer Experience. I published an incredibly fast minimal template with sensible defaults which you can use to quickly spin up new projects: cpojer/vite-ts-react-tailwind-template. This is not a does-it-all starter kit. The template comes with the essential tool
TypingMind — The #1 chat frontend UI for ChatGPT, Gemini, Claude, and more.
Use ChatGPT with enhanced features like chat history search, folders, integrations, prompt library, etc.
「業務はバラバラ」「でも助け合える」メルペイFrontendがスピード重視な開発で見つけた、孤立させないチーム体制 | mercan (メルカン)
「業務はバラバラ」「でも助け合える」メルペイFrontendがスピード重視な開発で見つけた、孤立させないチーム体制 ひとくちに「エンジニア」と言えど、企業や事業によってその役割はさまざま…なんて当然のことですよね。特に、お客さまが触れることの多いキャンペーンページや管理画面、Webページを開発するFrontendでは、企業や事業による特色が出やすいと言っていいかもしれません。 メルカリとメルペイ、同じアプリ内にあってもサービス内容は別々。では、メルペイFrontendチームは今、どういった体制で何をしているのでしょうか？話を聞いてみたところ、返ってきたのは次の3つの軸でした。 ・ For Customer（お客さま向け） ・ For Partner（加盟店さま向け） ・ For Operator（オペレーションを行う社内メンバー） メルペイFrontendチームは、現在10名。この3つを軸
React.jsのドキュメンタリー動画公開など : Cybozu Frontend Weekly (2023-02-14号)
React.jsのドキュメンタリー動画公開など : Cybozu Frontend Weekly (2023-02-14号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2023/02/14 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Vercel Meetup #0 with CEO Vercel User Community によるオフライン meetup が開催されます。オンライン視聴も可能なようです。 Vercel CEO の Guillermo Rauch 氏が来日・参加されるとのことで、なかなかに貴重な機会になりそ
Rome v12リリースなど: Cybozu Frontend Weekly (2023-04-04号)
はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/04/04 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Announcing Rome v12 Rome v12 がリリースされました 🎉 JSON 形式のパースに対応 TypeScript4.7~5.0 をサポート optional variance annotation extends constrain on infer const type parameters export type * CLI 経由でのインポート順のソート etc storybookjs/storyb
Teaching CSS via CSS-Tricks Jump to heading # 今、CSSを教えるということ Jump to heading # CSSを教える際、とあるレイアウトを再現しよう。となることは多く、レイアウトを再現するための"ハック"について伝える必要があり、どうしてもCSSの本質的なコンセプトからは少々遠い所から始めなければならかった。 Rachel Andrew氏はFlexboxやGridが存在する現在、別のアプローチでCSSを教えることができるはずだと説く。 Tradeoffs: The Currency of Decision Making via Farnam Street Jump to heading # 意志決定のための"貨幣": トレードオフ Jump to heading # 何をするか? 何が優先順位が高いのか? 時間であれ、体力であれ、お金
This blog post explains how to get started with React while using as few libraries as possible. Required knowledge # Things you should know before reading this blog post: JavaScript: You should have already written code in that language. Browser DOM (document object model): It helps if you are loosely familiar with how the DOM represents HTML and how it handles events. npm: It also helps if you h
2021年12月12日追記 本記事は YUMEMI Advent Calendar Advent Calendar 2021（なんで名前重複しているんだ…w） に昇格させます！決して「何を書こう…ネタがない…あ，ずっと途中で止まっていたやつがあるので，これを機に書ききっちゃお！そしてこれをアドカレの記事にしちゃおう☆」とか言う悪い気持ちではないです((((；ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ それでは本編をどうぞ💁 こんにちは．株式会社ゆめみ でチャレンジ取締役をしております Keeth こと桑原です．今回は WEB DEVELOPER Roadmap 2021 の中の フロントエンドに関するロードマップ を見て思ったこと，日本の Web 業界での必要性などを振り返りました． そもそもの WEB DEVELOPER Roadmap 2021 とは，以下の記述の通り， Step by
【2/19(水)13:00エントリー〆】『HOT PEPPER Beauty』Frontend スピードハッカソン | EVENT | Engineering at Recruit
リクルートスピードハッカソンとは、リクルートグループ内のWebアプリケーションのフロントエンドを題材に、どこまで高速化できるかを競うイベントで実際に社内で行われているものです。 今回のスピードハッカソンの題材は『HOT PEPPER Beauty』です。 リクルートテクノロジーズ・リクルートライフスタイルのフロントエンドエンジニアがメンターとなり、参加者の中でチームを作成し、描画速度の改善に取り組んでいただきます。 アプリケーションのパフォーマンスを改善して、ユーザー体験を向上させていくLighthouse を使って、性能上のボトルネックを明確にする などといった、リアルな業務を経験して、パフォーマンス改善業務の驚きを体験してみませんか？ 高速化にチャレンジしたあとは、実際に今動いているリアルなアプリケーションでのパフォーマンス改善事例も紹介します！ 募集要項 対象 学生の場合 2020年
Delicious Donut Components An interactive guide to component composition with React Server Components Do you know how many calories are in a donut? I don’t either—the only thing I know about donuts is that they’re delicious. Oh, and that they’re a great way to build composable UIs. If you’ve been building with React Server Components, you might be familiar with a composition pattern that allows yo
componentCanSwipe Swipe Gestureはいい感じに対応したが、一つの問題に直面しました。「全てのページにSwipe Gestureを適用することはよくない」。複数のページを跨いでるユーザーの入力機能を想像してください。前のページに戻る時に、入力がある場合は確認ダイアログを出すのはよくありますね。こんな時にSwipe Gestureを提供すると、ユーザーの操作がややこしくなります。 各ページでSwipe Gestureの適用を指定できるよう、Page Stackに `componentCanSwipe`のサポートを追加しました。仕組みはシンプルです。Swipe Gestureは完全にPage Stackに制御されているため、発動する前に、Page Stackにある一番上にあるページコンポーネントの`componentCanSwipe`を見れば、トランジションを中断する
frontendに「nuxtjs/apollo」、backendに「go+gqlgen」の組み合わせでGraphQLサービスを作る - Qiita
frontendに「nuxtjs/apollo」、backendに「go+gqlgen」の組み合わせでGraphQLサービスを作るGoGraphQLapolloNuxtgqlgen お題 簡易ToDoアプリ（と言っても、この記事上では単に「ToDoの新規登録」と「登録済みの全ToDoの表示」しか出来ない）を題材として、表題の組み合わせでGraphQL通信ロジックを書くとどんな感じになるかを確認してみる。 ※今回はRDBを使った永続化などはしないで、バックエンドからは固定値を返す。 前提 Nuxt.jsやGoについては、個人ないし会社での開発経験があり、フロント->サーバの接続は（例えば）Axiosなど使ってRESTでやってたけど、GraphQLに変えてみたいという人が対象。 ただ、「そもそもGraphQLとは？」とか「RESTと比べたメリット・デメリットは？」みたいなことは書かない。（既に
フロントエンドエンジニアの人たちが開発者体験を向上させることにどんな意味があってやっているのか、どうやってやってるのか、また開発者体験を向上させた結果、どんな効果があったかについて実例を込めて解説します。
Changing Lanes: How Lyft is Migrating 100+ Frontend Microservices to Next.js
By Josh Callender and Andrew Hao IntroductionIn 2019, Lyft’s frontend architecture needed a reckoning. We were growing quickly as a company, and new teams were creating new software systems daily. At that point in time, we were generating new frontend services from a service generator template — complete with a copy of our bespoke, zero-config frontend build platform. Having such an easy means of
Integrating GraphQL Code Generator in your frontend applications (The Guild)
Integrating GraphQL Code Generator in your frontend applications In this article we’ll try to explain and demonstrate common patterns for frontend development with GraphQL and GraphQL Code Generator. Most patterns are general and can be applied to most popular frontend frameworks (React, Angular, Vue, Stencil), and to popular GraphQL client libraries (Apollo / urql), due to extended support of Gra
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。 以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。 この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。 今回のお題 今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり
メルペイ・メルコインFrontendチームにある「品質」への考え方は？ #今メルペイが一緒に働きたい仲間 | mercan (メルカン)
メルペイ・メルコインFrontendチームにある「品質」への考え方は？ #今メルペイが一緒に働きたい仲間 求人情報には必須要件・歓迎要件・求める人物像などが記載されていますが…それって、もう少しくわしく言うとどんな人？ そこで誕生したのが、採用メンバーが“仲間募集中”なチームのマネージャーに根掘り葉掘り質問していくシリーズ企画「#今メルペイが一緒に働きたい仲間」！今回は、メルペイFrontendチームのエンジニアリングマネージャーである田中佑太郎（@tanawa）と、メルコインのフロントエンドエンジニアとして働くMargaux Flores（@margaux）が登場します。 Frontendチームのおもな業務内容やそれぞれのキャリア、金融・決済系サービスを開発する上で求められるスキルを明かしました。聞き手は、メルペイHRBPの松家百花（@momoka）です。 Frontendチームは本人の
【結論】 UXの捉え方が「ユーザがサービスを道具として扱うための透明性と自己帰属感の実現」へと変化した。 突然ですが「UXとは何？」と聞かれたらなんと答えるでしょうか。以前までの私であれば”速さ・使いやすさ”といった回答をしていた気がします。しかし今回あるきっかけで融けるデザインという本を読む機会があり、そこで得た考えを言語化したいと思いこの記事を執筆しています。 ＊本記事は融けるデザインを読んだ個人の解釈をまとめたものですので、本の内容を解説するものではありません。所々解釈が異なる点がありましたらご了承ください。 「融けるデザイン」とは 本書はデザインの手法というより、インターフェイスとは何か？UXとは何か？という抽象的な概念に着目した一冊です。今回私が本書を紹介する理由としては、デザイナーだけでなくエンジニアにとっても有意義な内容が書かれていて、これまでの価値観を大きく変えてくれるもの
GitHub - SoundRabbit/Kagura: Frontend frame-work for wasm on Rust.
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
Does DDD Belong on the Frontend? - Domain-Driven Design w/ TypeScript | Khalil Stemmler
Should we utilize Domain-Driven Design principles and patterns in front-end applications? How far does domain modeling reach from back-end into front-end? 📣 Update: Khalil from the future here. Yes. Yes, Domain-Driven Design principles and patterns belong on the front-end. Come on now, Khalil. When I wrote this post back in 2019, I was primarily focused on the backend and hadn't spent enough time
WebAssemblyを使ってBackend(Golang)のバリデーションロジックをFrontend(Nuxt.js)のバリデーションに流用する試み - Qiita
WebAssemblyを使ってBackend(Golang)のバリデーションロジックをFrontend(Nuxt.js)のバリデーションに流用する試みGoWebAssemblywasmNuxtvee-validate お題 ここ数年、FrontendにVue.js/Nuxt.js、BackendにGolang、間をREST-APIないしGraphQLで繋ぐという構成で開発している。 この構成でよく感じるのが、「フロントでもバックでも同じバリデーションロジックを両方で実装してるなぁ」ということ。 バリデーションと言っても、FrontendとBackendとでは厳密にはチェックすべき内容が違うのだけど、型・桁とかフォーマットとか結局どちらでも同じようなロジックを実装してたりする。 実際のところは、Frontend、Backend双方に便利なライブラリがあったりして、それほど開発負荷がかかってい
Web development comes full circle with HTML-first front-end frameworks In the beginning was HTML, and our pages were fast. But they were boring, so we added JavaScript. JavaScript ended up being so capable that we ended up creating entire applications with it, dynamically creating and destroying DOM interactively to users’ delight. Applications grew in complexity and so frameworks were created to
Build a micro-frontend application with React - LogRocket Blog
Editor’s note: This article was last updated by Muhammed Ali on 18 March 2024 to cover common issues when building micro-frontends and their solutions, as well as examples of micro-frontend communication strategies such as event-based communication and using React’s Context API. Working on large-scale projects and managing their codebases can be a big challenge for teams. Although micro-frontends
Digital Product Design Make your product the first choice for users with designers who built dozens of them. Agile Development Teams Work with product experts with the know-how tested in 7+ industries.
Cybozu Frontend Monthly #7
コンテンツJavaScript アンケート周り 共有者: @__sakito__ State of JS 2020 日本語訳 2020 JavaScript Rising Stars 日本語訳 両方とも 2020 年の流れを把握するのに使えそうです。 State of JS は、ビルドが esbuild や sbowpack、フレームワークは引き続き svelte に興味持ってる人が多かったです。 しかし実際に使用してるものは、webpack などになっており、新しいものはまだプロダクションで使用するには踏み込めない印象。 各項目で色々な人が 2020 年の個人的ベストを紹介してるのが面白かった、changesets、Insomnia、Redwoodなど知らないものを知れました。 2020 JavaScript Rising Stars は、あくまでスター数なので State of JS
GitHub - lapras-inc/exam-swe-template: SWE Backend, 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
Sounding smart at your team's lunch talks is obviously a great reason to stay updated with the latest frontend trends. It might even help you become a better developer, build better technology and better products. Maybe. So, please allow me to make this honorable quest easier by pointing you in a few interesting directions. I will not explain every concept A-Z, but will introduce the concept, how
GitHub - ozramos/handsfree: Quickly integrate face, hand, and/or pose tracking to your frontend projects in a snap ✨👌 (re-upload)
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.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FRONTEND CONFERENCE 2019 登壇資料まとめ - Qiita
#web24 で Frontend Stack に参加しました - バーチャルおりばーハウス
2019-12-03のJS: Got 10(Node.js HTTPクライアント)、FAB(Frontend Application Bundles)
BackendチームとFrontendチームとアジャイル｜qsona
Inside Frontend行ってきた #insideFE - tiwu Blog
Vol.250 - Frontend Weekly Tokyo
Minimal React: getting started with the frontend library
WEB DEVELOPER Roadmap 2021 の Frontend Developer を見ての振り返り
Delicious Donut Components | Frontend at Scale
【LINE証券 FrontEnd】Page Stack の進化と課題
Frontend Developers Experience (Why/What/How)/DXD2021
【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた
Frontendエンジニアが”融けるデザイン”を読んで変化した価値観
Intro to HTML-first Frontend Frameworks - SitePen
Micro frontend tutorial: Build a dynamic form with React + Module Federation
11 Must-Know FrontEnd Trends for 2020