緊急解説！ 突如出現したnitrogqlの中身と裏側
皆さんこんにちは。これは、筆者が最近公開したnitrogqlを宣伝する記事です。nitrogqlの概要や、開発にあたっての裏話などを紹介します。 nitrogqlとは nitrogqlは、TypeScriptコードからGraphQLを使用するためのツールです。有体にいえば、graphql-code-generatorを置き換えることを目指して開発しています。具体的には、.graphqlファイルからTypeScriptの型定義を生成する機能を備えています。 例えば、次のようなクエリがあったとします。 query ($unfinishedOnly: Boolean) { todos(filter: { unfinishedOnly: $unfinishedOnly }) { id body createdAt finishedAt tags { id label color } } } imp
良いコードとは何か - エンジニア新卒研修 スライド公開
株式会社サイバーエージェントの2021年度 エンジニア新卒研修でコードの品質に関する講義を行いました。 https://note.com/cyberz_cto/n/n26f535d6c575
型安全Storageの実装を通して学ぶ! TypeScriptの型
まえがき TypeScriptの型システムは、他のプログラミング言語にはないユニークな機能を多く備えています。これは、動的型付け言語であるJavaScriptで書かれたコードの振る舞いを(静的)型によってモデル化するという難題に対する答えであり、結果としてTypeScriptの型は比肩するものがないほど強力な表現力を持つことになりました。 TypeScriptの型システムが持つ機能の詳細な解説に関しては、既に素晴らしい記事が星の数ほどあります。しかし、それらの機能をどう応用すれば作りたいものを作れるのか?という知識は、実際にものを実装してみるという活動を通してしか得られないものだと感じます。 そこで、この記事では型安全なStorageラッパーの実装を題材とし、その過程を共有していきます。 想定読者 TypeScriptの型システムの機能に関する知識はあるが、応用方法がいまいちピンとこない方
React with TypeScript Cheatsheet
Table of Contents:· Table of Contents: · How to type React props ∘ Creating a type alias for the props ∘ Typing optional props ∘ List of types for React component props · How to type React function components · How to type React hooks ∘ Typing useState hook ∘ Typing useEffect and useLayoutEffect hooks ∘ Typing useContext hook ∘ Typing useRef hook ∘ Typing useMemo hook ∘ Typing useCallback hook ∘ T
GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that de
SQLファイルから型安全なコードを生成するsqlc | フューチャー技術ブログ
TIGの辻です。GoのORマッパー連載8日目です。本記事では sqlc を紹介します。早速ですが、結論から行きましょう。 sqlc まとめ SQLファイルからデータベースにアクセスできる型安全なGoのコードを生成するライブラリ 構造体のモデルの手書き実装不要 複数テーブルをJOINしたときのマッパー実装不要 生成されるコードは不要なリフレクションなし SQLをがんがん書きたい、でも面倒なマッパー構造体は書きたくない、という開発者にとっては大きな味方になります。 sqlc の紹介 sqlc はSQLファイルからGoのアプリケーションコードを生成するライブラリです。2020/2に v1.0.0 をリリースし、着々とスターを伸ばしています。2021/08現在は v1.8.0 をリリースしています。本資料で生成しているコードも v1.8.0 を用いています。 https://star-histor
head内でパフォーマンスの問題がある箇所、Webページのレンダリングを妨げる要因を明らかにするCSS
Webページのレンダリングを妨げる要因、<head>タグ内でレンダリングをブロックしているCSSやJavaScript、サードパーティーのリソースなどを表示して、どこを修正すればよいか教えてくれるCSSのスニペットを紹介します。 ちなみに下記のグリーンは問題なし、レッドはエラーで対応が必要、オレンジは特定のシナリオで問題が発生する、です。 ct.css ct.css -GitHub ct.cssの特徴 ct.cssのデモ ct.cssの使い方 ct.cssの特徴 <head>内にあるタグは、ページのレンダリングを妨げる要因となる最大の箇所で、正しい形式であることは非常に重要です。ct.cssは、Webページの<head>タグ内に潜在するパフォーマンス上の問題を明らかにするCSSのスニペットです。 ct.css ct.cssの使用にあたっての制限事項は、下記の通りです。 一致しないmedia
GitHub - nicoespeon/abracadabra: Automated refactorings for VS Code (JS & TS) ✨ It's magic ✨
Refactoring (noun): a change made to the internal structure of software to make it easier to understand and cheaper to modify without changing its observable behavior. — "Refactoring: Improving the Design of Existing Code" by Martin Fowler With Abracadabra, you can quickly and safely refactor existing code in VS Code. VS Code ships with a few basic refactorings. Abracadabra supercharges your edito
定期実行するLambdaが「起動しなかったこと」を検知するCloudWatch Alarmを作る | DevelopersIO
「1時間に1回起動するLambda」や「1日に1回起動するLambda」といった定期実行するLambdaが「起動しなかったこと」を検知するCloudWatch Alarmを作ってみました。 Lambdaを定期実行する仕組みをよく作ります。 1時間に1回起動する 1日に1回起動する これらのLambdaが「起動しなかった場合」に通知が欲しくなったので、CloudWatch Alarmを作ってみました。 実際にLambdaが起動しない事象に遭遇したことは無いですが、このAlarmがあると、「ちゃんと起動しているよね？」というモヤモヤが解消されます。万が一に気づける保険ですね。 おすすめの方 定期実行するLambdaが「起動しなかった場合」のCloudWatch Alarmを作りたい方 定期実行するLambdaとCloudWatch Alarmを作成する sam init sam init \
Architecture as Codeってなぁに？ 〜Infrastructure as Codeを超えて〜 - NRIネットコムBlog
こんにちは、最近Alexaに好きな音楽を伝えるとそればっか再生されて飽きてきたので、どうAlexaに伝えれば傷つかないかを考えている志水です。 「APN AWS Top Engineers/APN Ambassadors Week」の3日目の記事になります。といっても、特にTop Engineerに関係ない話をします。 Architecture as Codeという言葉をご存知でしょうか？2019年のAWSのブログでArchitecture as Codeという言葉が出て、そこから一部のマニアックな方が言及されているのですが、イマイチ浸透せず可愛そうな状況になっています。個人的には面白い概念だと思い、かつ最近Architecture as Codeの概念を継承しているサービスのAWS Copilot/AWS Amplifyが盛り上がっているため、改めてまとめようと思います。 Infrast
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
Githubの新しいセキュリティ機能 CodeQLを使ってみる - Security Index
CodeQLは、Semmleが提供しているコードセマンティック解析に使用するツールで、脆弱性やコードの品質の可視化を行うことができます。 2019年9月18日にGithubがCodeQLを開発しているSemmleを買収し、現在「GitHub Code Scanning」(リミテッドベータ)として利用することができるようになりました。 Welcoming Semmle to GitHub - The GitHub Blog GitHub、コードの脆弱性を発見してくれる「GitHub Code Scanning」発表、修正方法のアドバイスも。GitHub Satellite 2020 － Publickey 現在でもSemmleのLGTMからCodeQLを利用することができます。 CodeQLを少し使ってみたので紹介したいと思います。 CodeQLを使ってみる Github連携 Alert :
AIがコードを補完する。SublimeでもVisualStudio Codeでも
AIがコードを補完する。SublimeでもVisualStudio Codeでも 2021.06.12 Updated by Ryo Shimizu on June 12, 2021, 09:20 am JST AIがコード補完してくれる便利なサービスでtabnineというものがある。 これは内部でGPT-2モデルを使い、100万人の開発者による典型的なコードを学習させたAIが、コード補完をするというツールである。 プログラミング言語も、JavaScriptやJava、Python、Go、Rustなど幅広い言語に対応しており、使用できるエディタもプログラマーに人気のSublimeTextやVisualStudio Code、Emacs、Atom、Vimなど一通り網羅している。 無料でも使えるので早速試してみた。 この手のAIモノはまずは試さないことには何もわからない。 単純なFizzBaz
目的に沿ったDocumentation as Codeをいかにして実現していくか / PHPerKaigi 2021
https://fortee.jp/phperkaigi-2021/proposal/42ce8b07-6972-42bb-a2ac-96af7249cfa4 あるシステムを理解して開発を開始するとき、必要なのはInfrastructure as Codeを含むソースコードだけでは大抵の場合は不十分です。では挙動がわかるようなテストコードがあれば十分かというとそうでもありません。 いわゆる「オンボーディングの効果的な運用」「開発開始までのオーバヘッドの削減（PHPerKaigi2020で発表）」は継続的な生産性向上のためには考えなければならない要素です。 そして、上記を補完するためにしばしばドキュメントが書かれます。 私はドキュメント運用のアプローチとして「コードによる生成を含んだドキュメント運用」に興味を持っています。 私はこれを「Documentation as Code」と呼んでいま
Google TypeScript Style Guide
// Good: choose between two options as appropriate (see below). import * as ng from '@angular/core'; import {Foo} from './foo'; // Only when needed: default imports. import Button from 'Button'; // Sometimes needed to import libraries for their side effects: import 'jasmine'; import '@polymer/paper-button'; Import paths TypeScript code must use paths to import other TypeScript code. Paths may be r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Home | Ploxy
Nx: Smart Monorepos · Fast CI
https://www.cattle.sh/
GitHub - github/copilot-docs: Documentation for GitHub Copilot
GitHub Copilot · Your AI pair programmer
