GraphQLスキーマ設計の勘所Burikaigi 2023 https://burikaigi.dev/
Active Recordともっと仲良くなって自然に優しいコードを書くぞ - SmartHR Tech Blog
こんにちは。SmartHRでRails顧問業をしています @willnetです。最近は主にリファクタリングをしています。 SmartHRのバックエンドは基本的にRubyで書かれています。しかし入社してくるバックエンドエンジニアは必ずしもRubyやRailsを長年使ってきた人だけではなく、前職では他言語を使っていてRuby(Rails)はほとんど使ったことがないという人もいます。 webアプリケーションを作る、という点ではどの言語でも抑えるべき点は同じですが、RubyやRailsに特化した考え方や書き方もありますよね。SmartHRではそれを効率よく習得してもらうために読書会を開催したり、社内のドキュメントツールに知見を書いて共有したりしています。 僕も社内のドキュメントツールにActive Recordの付き合い方ついて書いたところ、評判が良く「テックブログにしたら？」と言われたので今回一
世界の気象観測データGSODを使ってみる
世界の気象観測データを探す データ分析で世界の気象観測データを使いたいことがあり，探してみたというお話です． 世界の気象観測データといえば，SYNOP（地上実況気象通報式）やMETAR（定時飛行場実況気象通報式）があります．これらはオープンデータとして利用でき，中には10年以上前のデータまで公開しているWEBサイトもあります． (e.g. OGIMET) ただ利用するにはちょっと不便な点があって，電文形式で公開していることが多いんですよね．例えばこんな感じ． [SYNOP] 202007080300 AAXX 08034 47662 41/70 71709 10253 20218 30009 40036 53008 78082 8327/== [METAR] RJTT 080300Z 21019KT 9999 -RA FEW015 SCT050 BKN100 27/21 Q1003 TEM
Next.js最速セットアップ
はじめに 最近Next.jsが話題になることや、使われることが増えてきましたね。 個人的にも実務でも個人開発でも愛用しています。 そこでこの記事では、基本的なNext.jsプロジェクトのセットアップ方法についてまとめてみたいと思います。 セットアップ手順 Create Next App 不要なファイルを削除 srcディレクトリを追加 TypeScript導入 ESLint導入 Prettier導入 Chakra UI導入 Jest導入 Renovate導入 Cypress導入 Storybook導入 hygen導入 Create Next App まずはCreate Next App[1]で雛形を作成しましょう。 ターミナルで以下のコマンドを入力します。 必要であればこの段階でGitHubなどのリモートリポジトリと連携してください。（後にGitHub ActionsでCIを使用するところが
React Hook Form + yup によるフォーム実装あれこれ - vivit engineering blog
はじめに vivit株式会社でフロントエンドエンジニアをしている氏家です。 私は現在、アウトドア用品の中古品買取と販売を行うhinataリユースの内製システムの開発に携わっています。 www.hinatareuse.jp システムはNext.js + TypeScriptにUIコンポーネントライブラリのAnt Designを導入して開発されています。 このシステムに買取商品の情報を入力するフォームを実装する際、フォーム周りのステートやロジックをAnt Designに持たせたくないという意向があったので、React Hook Formを導入しフォームのステート管理やバリデーションを任せることにしました。 このReact Hook Form、yupを使用したスキーマバリデーションをサポートしていたり、UIコンポーネントライブラリが提供する制御されたコンポーネントにも対応していたりと、使い勝手が
How to Reduce Next.js Bundle Size
Photo by chuttersnap on UnsplashIn NE Digital, we are continuously working to provide faster and smoother user experience irrespective of the internet connection or the device type. In order to achieve that shipping less amount of javascript payload is one of our key focus areas. Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interacti
Next.jsにstyled-componentsを導入する - hiro08gh
こんにちはかみむらです。もしReactベースのフレームワークで、スタイルを構成する場合はCSS in JSライブラリを検討する思います。特に人気なのが、styled-componentsです。最近では採用しているプロダクトが増えてきています。 自分もstyled-componentsを利用する一人ですが、Next.jsで導入する場合少し癖があったので備忘録として残しておきます。 ドキュメント styled-components: Documentation 前提 TypeScriptベースで話を進めていきます。 Next.jsにTypeScriptを導入する記事はこちら code-log.hatenablog.com styled-componentsのインストール まずは、ライブラリをインストールします。 $ yarn add styled-componentsそして、TypeScrip
50 Gorgeous Color Schemes From Stunning Websites
Updates to Editing Navigation, Enhanced 3D Characters, and More See more
Color Palettes for Designers and Artists - Color Hunt
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
Firestore Pagination Guide
Firestore Pagination Guide Pagination is the process of dividing data into discrete pages. In Firestore, it is achieved by ordering a collection by a field, limiting it to a consistent page size, then offsetting the query. The Firebase Web SDK v7.3.0 introduced a new limitToLast(n) method that makes the process much easier. The following lesson demonstrates how to paginate Firestore data in both a
CTOの頭の中：技術投資を最適化する｜Shin Takeuchi
ざっくり年収1,000万円のエンジニアが10名いる会社では、年間1億円の技術投資がなされているわけですが（地代家賃、ライセンスフィー、PC代など含めるともっと）、年間1億円を正しく詳細に把握して、投資をコントロールできている会社は少ないと思います。会社が創業期であれば、最低限作らなければならない機能などは分かりやすく見えていたりするのでまだしも、そのプロダクトでしっかりとした収益が成り立ち、上場企業となるようなレベル感のプロダクトに対する技術投資となると、一部の大きなプロジェクトは把握していても、細かな投資ポートフォリオを常に把握することは難しいのではないでしょうか？今回はこの部分に一石を投じてみたいと思います。 技術投資量を見える化する 投資の最適化とは言いますが、最適化というのは「To Be」の話ですので、まずは「As Is」を知らなければ話になりません。その、まず「As Is」を知る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
community/archived/serverless-vpc-access-private-mongodb-atlas/index.md at master · GoogleCloudPlatform/community
How to enable MongoDB authentication with docker-compose ?
スクラムガイド - Scrum Guide 2020 年 11 月
Chakra Templates
70万通りのURLを持つWebサービスを Next.jsにリプレイスして高速化した話
Improve the performance of Mapbox GL JS maps | Help
MongoDB Schema Design Best Practices | MongoDB
How To Call Web APIs with the useEffect Hook in React | DigitalOcean
How to integrate Mapbox GL JS in your Next.js Project without react-map-gl or a React wrapper library