High Performance Web Components For Project Management
Strategy and Business Rules Setup Web Server Website Design Test Strategy Implementation A Scheduler For Professionals Scheduler Pro is our professional scheduling component which supports inter-task dependencies, constraints and working time calendars. It is built with ES2020 & TypeScript and integrates easily into any React, Angular or Vue application. Feature Rich Gantt Chart Our Gantt chart is
Narrowing Pattern
はじめに 前回の『TypeScript の Narrowing』の記事では Narrowing について集合論的なアプローチでどのようなものであるかを解説しました。この記事では、より実用的な Narrowing の基本パターンを解説します。 この記事は基本的には TypeScript 公式 Handbook の『Narrowing』のページを参照して解説しています。集合論的な話はすでに前の記事で行ってしまったので、この記事は公式ドキュメントのまとめ的な自分用のアウトプットとなります。 代入による Narrowing CFA での典型的な Narrowing パターンの解説に入る前に、もっと基本的な Narrowing について見ておきます。 前前回の記事を見て入れば Widening を知っているわけですが、実はその過程ですでに Narrowing についても知っています。というのも、ユニ
SmartHRのプロダクトデザイングループのFigmaの運用を大公開！第1弾：デザインデータに対する考え方｜wentz
こんにちは。 SmartHRでプロダクトデザインをしている@wentz_designです。 入社して16ヶ月が過ぎ、そろそろ入社エントリなるものを書く機運か？と思い至り、これまで取り組んだことについて書いてみることにしました。 私は現在、メインでSmartHRの基本機能の開発に携わっています。 サブプロジェクトとしてユーザーリサーチ推進室の運営、SmartHR Design Systemの運営、Figmaというツールの社内利用推進および組織アカウントの管理・運用に関わっています。 Figmaに関しては、過去にSmartHR UIのリソース（ライブラリ）を一般公開したことで様々な反響がありました。 今回は、SmartHRのプロダクトデザイングループでは普段Figmaをどのように活用しているのか、を複数回に分けて紹介していきます。 第1弾ではプロダクトデザイングループの「デザインデータに対する
TypeScript の Narrowing
はじめに この記事では、Widening(型の拡大) の対となる Narrowing(型の絞り込み) について解説します。 Narrowing は多くの記事や解説において 型ガード (type guard) と呼ばれる用語に基づいて解説されますが、Narrowing のキーワードで包括的に解説するのが公式ドキュメントでも行われているやり方です。 実際、型ガードよりも対概念である『Widening(型の拡大)』や『型の集合性』などを加えて Narrowing として考えた方がそれぞれについてよりスッキリと理解することが可能になります (特に判定可能なユニオン型などについてはそうです)。 型集合 おさらいとなりますが 前回の記事 では、型は以下の図 (fig 1) のように具体的な値の集合であると解説しました。単位型 (Unit type) である具体的な値から作られるリテラル型の集合によって
TypeORM をサクッと試せる Docker 環境を TypeORM CLI を使って構築する方法 | DevelopersIO
TypeORM には CLI が用意されており、typeorm init コマンドを用いて新規プロジェクトをサクッと作ることができます。 https://typeorm.io/using-cli その typeorm init のオプションで --docker を渡すことで docker-compose.yml ファイルも生成してくれます。 簡単ですね。やってみましょう。 やってみた npx typeorm init --name my-project --docker 上記のコマンドを実行すれば、my-project というディレクトリが作成され、TypeORM を動かすのに必要なソースコード一式や docker-compose.yml が生成されます。 今回はオプションでデータベースを指定していないので、デフォルトの PostgreSQL が使われます。 また上記のコマンドで以下の内容
Next.jsのホスティング先としてFirebaseは『かなりアリ』な選択肢になっている
Next.jsのホスティング先といえば、Vercelという認識は結構多くの人の中での共通認識になりつつあると思う。実際にVercelは特に難しいことをする必要もなく、また月額＄20の課金（Proプラン）でのできる範囲はかなり広いと思う。 私も普段作っているサービスのDeploy先の1つとしてVercelを持っているが、今回はFirebaseもかなり良いと言う話をしていきたいと思う。 2022年5月、FirebaseHostingがNext.jsに対応した 実はGoogleI/Oの中で、こっそりとFirebaseHostingがNext.jsに対応していたのだ GoogleI/Oの記事はこちら 厳密には、Next.jsのプロジェクトを FirebaseHosting+FirebaseFuncitons(裏側でゴニョゴニョやってくれて第二世代のFunctionsにdeployされている)にfi
Electron => tauri への移行
use tauri::{SystemTray, SystemTrayEvent}; fn main() { let system_tray = SystemTray::new(); tauri::Builder::default() .on_system_tray_event(|app, event| match event { SystemTrayEvent::LeftClick { position, .. } => { println!("left click! position:{:?}", position); } _ => {} }) .system_tray(system_tray) .run(tauri::generate_context!()) .expect("error while running tauri application"); } use tauri::{
Implement the dynamic rendering service | Mercari Engineering
Here is awesome article written by the Google search team: https://developers.google.com/search/docs/advanced/javascript/dynamic-rendering To put it simply: Dynamic rendering means switching between client-side rendered and pre-rendered content for specific user agents. As the article suggests, we use Rendertron to implement our dynamic rendering service called Prerender. In this article, I am goi
Herokuの無料枠が廃止になるのでDeta.shへ移行する - Qiita
追記(2023/3/11) 約半年ほどDeta.shで簡単なサービスを運用していたが、先日Deta.shに大幅なアップデートがあり、仕様が大きく変わった。 これによりREST APIを公開して運用することができなくなった。（できなくはないが必ずヘッダにAPIキーを指定する必要がある。そのため例えばLINE Messaging APIのバックエンドとしては使用不可） Detaは”Personal Cloud”を思想に掲げているらしく、何らかのサービスのバックエンドとして使うにはちょっと使い勝手が悪くなってしまった。 というわけで、自分の使い方には合わなくなったため現在はAWSへ移行している。 HerokuのFree Planが終了するらしい(泣) Starting November 28, 2022, we plan to stop offering free product plans a
Deta Space
Dear Deta Community, After an incredible run, we've made the difficult decision to shut down Deta Space. You can continue to login for 45 days until sunset on October 17, 2024, at which point we will start deleting all Horizons, apps (hosted or installed) and data in Collections. We've built tools for exporting your data (and code for developers), with tutorials available in the docs. We wanted to
リーダブルなテストのための、jest モックファクトリー関数
単体テストを書く時、モジュール間の関連を検証するため、一部のモジュールをモックする必要が出てくることがあります。モックは様々な手法がありますが、書き方によって、メンテナンス性やテストの可読性が変わります。一般的に行われるモック手法を確認しつつ、よりリーダブルなテストを書く方法を紹介します。 ログイン API を呼び出す Web API クライアント 今回紹介する、モック対象の Web API クライアントです。Native Fetch API を関数でラップした、自作の Web API クライアント（ログインするためのlogin関数）です。 export type Data = { redirectUrl: string; }; export type Input = { email: string; password: string; }; export async function l
CSS Modulesの歴史、現在、これから - Hatena Developer Blog
マンガメディア開発チームの id:mizdra です。半年ほど前から「フロントエンドエキスパート」という肩書きをもらい、社内でフロントエンドの啓蒙活動をしています。具体的にどんな活動をしているかについては、社内のポッドキャストで少し話しましたので、興味があれば聞いてみてください。 developer.hatenastaff.com 最近、私はReactを採用する社内プロダクトでのCSSの書き方を検討していました。最終的にそのプロダクトでは、CSS Modulesを採用するに至りました。しかしその過程で、CSS Modulesのメンテナンス体制に対して懸念があり、将来的な存続を危ぶむ声が界隈にあることを知りました。 ただし、実際にメンテナンス体制について調べてみたところ、万全ではないものの引き続きメンテナンスがされていて、使用もできることが分かりました。そこで、今回はCSS Modulesに
GitHub - revolist/revogrid: Powerful virtual data grid smartsheet with advanced customization. Best features from excel plus incredible performance 🔋
Millions of cells viewport with a powerful core in-build by default; Keyboard support with excel like focus; Super light initial starter . Can be imported with polifill or as module for modern browsers; Intelligent Virtual DOM and smart rgRow recombination in order to achieve less redraws; Sorting (multiple options, can be customized per column and advanced with events); Filtering Predefined syste
GitHub - 1backend/1backend: Run your web apps easily with a complete platform that you can install on any server. Build composable microservices and lambdas.
1Backend is a platform designed to make deploying, running and maintaining lambda functions/microservices easy. It enables you to launch a new live app in seconds - after choosing your tech stack (e.g. Go with access to an SQL database) you get an empty app which is already live and callable from the outside (through HTTP). You just have to plug in your own code (no, you don't have to write code i
実践 Node.js Native ESM — Wantedlyでのアプリケーション移行事例 | Wantedly Engineer Blog
Wantedlyではこのたび、フロントエンドアプリケーションのひとつをNative ESM化しました。本記事ではNative ESM化の必要性と、必要な作業について説明します。 この記事の概要Node.jsにはNative ESMというモードがある。Native ESMはまだ普及していないが、ライブラリ側の更新が進み、移行が必要になりつつある。Native ESMをめぐる状況は (この記事の長さからわかるように) 色々複雑で、概念をちゃんと説明するだけでも大変。Native ESMへの移行にあたってはさまざまな困難が待ち受けている。Native ESMとは歴史的経緯から、JavaScriptには複数のモジュールシステムがあります。そのうちNode.js周辺でよく使われるのはCommonJS ModulesとES Modulesです。 CommonJS Modules (CJS) は実質的に
自作のRust製エミュレーターをWebブラウザーで動くようにした
最近Rustでちょいちょい書いてたエミュレーターをWebブラウザーで動くようにしました。 現在のところ、ゲームボーイ・ゲームボーイカラー、ゲームボーイアドバンス、ファミコン、スーパーファミコンが動きます。 当初からブラウザーでも動かすことを念頭に置いていたので、コア開発が一段落したら対応させたいと思っていました。実際に動かすに当たっては思い通りに進んだところもあり、そうでないところもありといったところで、ところどころで気づいたところを書いておいたら誰かの参考になるかもしれないので、とりとめのない話ですが書き残しておくことにします。 一応ウェブアプリなのにJavaScriptもTypeScriptも、ReactもAngularも、npmもwebpackも使わない、インド人完全無視カレーみたいなものになりましたが、それでもそこそこに良い感じにできた気はするので、私のようにフロントエンドから取り
diniiでのHasura活用例
CDKでの自動構築が超簡単で感動した話（超初心者向け） / Automated construction using CDK was easy, impressed
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - WebKit/WebKit: Home of the WebKit project, the browser engine used by Safari, Mail, App Store and many other applications on macOS, iOS and Linux.
カミナシでの技術的負債返済プロジェクトとその決断 / Beyond tech debts at Kaminashi
FY22 新卒研修 Quality Assurance 〜「QA」「品質」「テスト」とは？〜
GitHub - WasmEdge/WasmEdge: WasmEdge is a lightweight, high-performance, and extensible WebAssembly runtime for cloud native, edge, and decentralized applications. It powers serverless apps, embedded functions, microservices, smart contracts, and IoT devi
GitHub - evanwashere/mitata: cross-runtime benchmarking lib and cli
GitHub - Quramy/gql-study-workshop
GraphQLスキーマ設計の悩みどころ/My concerns about GraphQL schema design
GitHub - frehner/modern-guide-to-packaging-js-library: A guide to help ensure your JavaScript library is the most compatible, fast, and efficient library you can make.
つきなみGo 記事一覧 | gihyo.jp
Console log output right next to your code
release-automation