Published on July 28, 2020 Stefan on Mastodon Reading time: 10 minutes More on TypeScript, React, Preact This list is a collection of component patterns for React when working with TypeScript. See them as an extension to the TypeScript + React Guide that deals with overall concepts and types. This list has been heavily inspired by chantastic’s original React patterns list. Contrary to chantastic’s
はじめに 登壇版 Taskの本質 C# のイテレータ async/await Compiler Transform ExecutionContext builder.Start() の重要性 IAsyncStateMachine.MoveNext おわりに はじめに C#er は呼吸するように使っている async/await。 そんな async/await について、先日 Stephen Toub 氏 (.NET の中の人。中心人物の一人。) が How Async/Await Really Works in C# という非常に面白い記事を投稿していました。 この記事では Stephen 氏の記事をベースに、C# において async/await は実際どうやって動いてるの？というお話をしていきます。 以前に C#での非同期メソッドの分析。 という翻訳記事を書いたのですが、元になった記
開発者の生産性を測るためのフレームワーク`SPACE`について
LeanとDevOpsの科学の著者の一人であるNicole Forsgren氏が著者に入っているThe SPACE of Developer Productivity: There's more to it than you think - Microsoft Researchで提唱されているSPACEについて 以下記事も Four Keysだけじゃない開発者生産性フレームワーク 開発生産性の可視化フレームワークであるSPACEを活用するために、どのようなメトリクスをどう取得するかについて考えてみる 要約 SPACEは開発者の生産性を計測するためのフレームワーク 推奨されている測定指標のカテゴリ(本文ではディメンションと定義)の頭文字 satisfaction and well being performance activity communication and collaborati
文化からツールまでを扱ったタイトルに違わぬ大著『Googleのソフトウェアエンジニアリング』を読んだ - こまぶろ
昨年11月末に発売された『Googleのソフトウェアエンジニアリング』を読みました。 Googleのソフトウェアエンジニアリング ―持続可能なプログラミングを支える技術、文化、プロセス オライリージャパンAmazon 細かい内容についての感想はTwitterの方に放流しているので、ブログでは簡単に。 とりあえず一周した。17章以降は基本「いやーGoogleさんすごいっす」という感じだったが、ところどころ役立つ話があったし、「エンジニアリングを発展させていった先の一つの形がこうなのか」という面白さは大きかった。逆に前半は実践的にかなり勉強になったのでちゃんと復習しよう…… #swebookjp— こま (@koma_koma_d) 2022年1月3日 全体の構成 書籍全体の構成は、以下のようになっています。 分量としては、「第4部 ツール」が最も大きな部分を占めています。 第2部から第4部に
CyberAgent にて行われたカンファレンス「CA BASE NEXT」の登壇資料です。 https://ca-base-next.cyberagent.co.jp/sessions/can-we-build-web-applications-in-rust/
CSSの進化は早いですね。 一昔前までは、JavaScriptを使用しなければできなったこと、かなり複雑なコードを書かなければできなかったことが、CSSだけで簡単にできるようになっています。 知っておくと便利なCSSのプロパティや疑似要素をまとめて紹介します。 CSS can do that? by Ananya Neogi 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. box-decoration-break 改行する際の表示形式を定義 2. attr() -簡単ツールチップ 3. backface-visibility -フリップするカードも簡単 4. conic-gradient -円グラフを簡単に実装できる 5. filter -画像に多彩なフィルタを適用 6. mix-blend-mode -画像やテキストにも
良い問題がチームをリードする
ここ1年弱くらいバンドルカードのプロダクトマネージャーをやっている。やっていく過程でとても参考になった本、ブログ記事がたくさんある。 そんな文章の1ページ1ページの中には、それこそ頭をかきむしりながら読んだページがあるし、読んだ瞬間思わず天井を見上げてしまうようなページもあった。心にグッサリ刺さる他者の経験や知見の言語化と、自身の経験を重ね合わせた際に、今何かまとめておきたい事あるかなと考えたらこの記事のタイトルになった。「良い問題がチームをリードする」だ。 PMの大切なスキルのうちの1つ 以下はCracking the PM Career: The Skills, Frameworks, and Practices To Become a Great Product Manager本編序章に寄稿されたマリッサ・メイヤーのパンチライン。 One of the most crucial sk
Good Bye Web APIs
When building a single-page application or a mobile application, we usually need to implement a web API (REST, GraphQL, etc.) to connect the frontend and the backend. Technically, it's not very difficult, but it has some unfortunate consequences. Imagine two planets. The planet "frontend" speaks JavaScript and the planet "backend" also speaks JavaScript or any other advanced language. Now let's sa
Reactで開発をしていく上でみなさんがいつかお世話になるだろうと思った記事たちです。 （僕はお世話になりました。これからもお世話になります。） これも良かったよっていう記事があればコメントで教えてください！ 🌟 = 特におすすめ Reactを最初から学ぶ・入門 React Docs BETA 🌟 りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】 - くるみ割り書房 ft. React - BOOTH 🌟 Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス RailsエンジニアのためのNext.js入門 - hokaccha memo React Glossary + Explain Like I'm Five 🌟 React Server Components 総まとめ Reactのレンダリングに関
PlantUML で JSON データを簡単視覚化
最近，仕事で使うことがあってたまたま気がついたのだが， PlantUML って JSON や YAML のデータを視覚化できるんだね。 やり方は簡単。たとえば { "firstName": "John", "lastName": "Smith", "isAlive": true, "age": 28, "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": "10021-3100" }, "phoneNumbers": [ { "type": "home", "number": "212 555-1234" }, { "type": "office", "number": "646 555-4567" } ], "children": [], "spous
業務やプライベートでのハンズオンを通して得た知見を元に、dockerfileの実践的な書き方を記載いたしました。 軽量なdocker imageを作る観点とセキュリティーの観点を踏まえた内容になっております。なにか付け足す点などあればコメントいただければと思います。 軽量なimageを作る観点 軽量なimageの使用 Dockerfileでimageを指定する際に、軽量なimageを使用することが進めれている。 docker docsでも代表的な軽量なimageのalpineをおすすめしている。 Whenever possible, use current official images as the basis for your images. We recommend the Alpine image as it is tightly controlled and small in s
はじめに この記事は、Docker入門シリーズ記事3本の1本目です。 Dockerで環境構築するための最低限の概念理解 Dockerで環境構築するための最低限のコマンドを一通り実践する 【Docker Compose】設定内容を1行ずつ理解しながらLaravel環境構築（PHP-FPM、Nginx、MySQL、Redis） また、WindowsでDockerを利用する際の重要な設定に関する記事もありますのでこちらもご確認ください。 WindowsでDockerを使う時、正しくファイル配置しないと激重になるので注意 概要 この記事では、 Docker未経験者、初心者向けに Dockerでアプリケーションの開発環境を構築するために必要な 最低限の概念を解説します。 詳細な解説はかなり省いています。 Dockerとは何をするためのものか Dockerは、アプリケーションの実行環境を構築するための
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
同じ背景色に配置したベタ塗りのカラーと同じに見える半透明のカラーを生成するツールを紹介します。 半透明のカラーは背景に重なると、ベタ塗りのカラーと同じになります。たとえば、シャドウやダイアログの背後の背景など半透明で複数の背景で動作するUI要素に最適です。不透明度を下げたブラックを使用するのではなく、ニュートラルカラーの半透明カラーを使用すると、より美しいUIをデザインできます。 下記は、上はベタ塗り、下は半透明です。
iPhone 12シリーズが発表され、iPhone 12/12 Proの予約も始まりましたね。23日配送予定で予約できたので、私も楽しみです。ユーザーとしてはその新しいデザインや機能にワクワクしますが、デザイナー・デベロッパーとしては悩みのタネが増えるかもしれません。 ビューポートのサイズの種類が増え、多くの解像度、アスペクト比、断片化が進むデバイスの複雑さがUIの設計にどのように影響するのかを紹介します。 iPhone 12 vs Designers by Michal Malewicz 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 iPhone 12のリリース だけど、このメタルとガラスの中には象がいる 2020年の現状 どのようにデザインすればよいか？ 重要な要素は折り目の上に 終わりに iPhone 12のリリース 1
こんにちは😉 @ryokotmngです。 今日は社内ドキュメントの、Rust初心者向けのクックブックを公開しようと思います。 私自身コードを書くのに四苦八苦していた頃にとても助けられたので、Rustをはじめたばかりの方の参考になれば嬉しいです。 目次 [toc] はじめに この記事では、The Bookに記載されている知識を前提としています。 Rustを全く書いたことがない方は、先に読んでみることをお勧めします。 サンプルコードが結構長いこと、実行環境があった方が良い内容も多いことから、サンプルコードは大体Rust Playgroundのリンクとなっています。 ぜひご自身で修正して遊んでみてください。 単位つきの計算を型で厳格に縛る 例えば複数の長さの単位 (mm, cm, mなど) を扱う場合に、単位が合っていない長さ同士の計算をする場合、単位を揃える必要がありますね。 この時、最終的
こんにちは、エウレカ SRE チームの原田です。 今年 (2021年) エウレカでは、公開鍵認証で接続するEC2の踏み台サーバを廃止し、代わりに各サーバへの接続をIAMで認証できるSSM Session Managerへのリプレースを行いました。本記事ではそのモチベーションや、実装のポイントを紹介していきたいと思います。 旧来の踏み台サーバ 旧来の踏み台サーバエウレカで長く運用されていた踏み台サーバ (Gateway) は以下のようなものでした。 各開発者は、自分の秘密鍵を使って踏み台サーバへSSHを行う ( 踏み台サーバ上には各開発者の個別ユーザーおよび公開鍵が登録されている )踏み台上では、接続が許可されているSSH対象のサーバの秘密鍵がユーザー毎に配置されており、その鍵で各サーバにSSHするMySQL / Elasticsearch / Redis など、Private Subnet
GitUML
Understanding source code is every programmer's biggest challenge GitUML helps programmers understand new code more quickly. Understand code quickly Rapidly generate diagrams from programming source code. Diagrams from git repositories - automatic diagram updates when you push! Upload source code files Live UML Fiddle converts source code into UML as you type UML Fiddle (Python) UML Fiddle (Javasc
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
マイクロソフト、Copilotに作業を依頼するとユーザーに代わって手順を考え、Windowsデスクトップ上でRPAにより自動操作してくれる新機能「Power Automate via Copilot in Windows」、Windows 11に搭載へ
マイクロソフト、Copilotに作業を依頼するとユーザーに代わって手順を考え、Windowsデスクトップ上でRPAにより自動操作してくれる新機能「Power Automate via Copilot in Windows」、Windows 11に搭載へ マイクロソフトは、Windowsに搭載している「Copilot in Windows」の新機能として、Copilotにプロンプトで作業を依頼することで、Windows上でさまざまな操作をユーザーに代わって自動的に実行してくれる「Power Automate via Copilot in Windows」を、開発中のWindows 11 Insider Preview Build 26058に搭載したことを明らかにしました。 2月14日付けの記事「Announcing Windows 11 Insider Preview Build 2605
React Application Architecture for Production〜これ一冊で全てが網羅〜
はじめに この記事は、Alan Alickovicさんの著書「React Application Architecture for Production」をまとめたものになります。Alanさんと言えばZennで最も人気のある記事「bulletproof-react」の作者であり、彼のprojectから学ぶことはとても多い印象です。 今回紹介する本は2023年1月に公開されたため、bulletproof-react以後のReactアプリケーションにおけるベストプラクティスの宝庫となっています。また、本で扱われているアプリケーションのProjectがGitHubで公開されていることから、Projectを眺めるだけでも勉強になる点があるかと思います。 想定読者 Reactのアーキテクチャを模索している方 テスト手法やCI/CDなどのアプリケーション設計に関心がある方 使用される技術と本の構成 言
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
Windows 10 バージョン2004 ビルド19041(通称、May 2020 Update)では、WSL(Windows Subsystems for Linux)がバージョンアップしました。WSL2+Docker Desktop for WindowsでAWSサーバレス開発環境を改善してみようと思います。 データアナリティクス事業本部の藤川です。2020年5月下旬に、Windows 10 バージョン2004 ビルド19041(通称、May 2020 Update)が正式にリリースされました。Windows版Dockerユーザにとっては待望のWindows Updateになりました。 最近、Macで開発する方が増えていると思います。クラウド/WebサービスはLinuxで運用するケースが多く、UNIX由来のOSであるLinuxやmacOSとの親和性が高いこともあり、これらOSが開発環境
1ヶ月くらい使って勘所が見えてきたのでメモ メリット 1リポジトリ辺り20並列までジョブを並列実行できる ジョブ実行時はアクセストークンが勝手に設定されている マトリクステストがやりやすい 実際にGitHub Actionsに移行したプロダクト zatsu_monitor activerecord-compatible_legacy_migration index_shotgun デメリット yamlのanchorが使えない マトリクステストだとSlack通知がつらい 合わせて読みたい メリット 1リポジトリ辺り20並列までジョブを並列実行できる これに尽きる。 CircleCIにしろTravis CIにしろorganization(user) *1単位で並列数が縛られているため、例えば同じuserの他のリポジトリでジョブが詰まっていると別リポジトリではqueueが詰まってジョブが実行され
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
5年後には標準になっている可観測性のこと - Learning Opentelemetry の読書感想文 - じゃあ、おうちで学べる
はじめに 本稿は、オープンソースの可観測性(Observability)プロジェクトである OpenTelemetry を取り上げた書籍「Learning Opentelemetry」の読書感想文です。従来の可観測性の課題であったデータの分断を解消し、トレース、メトリクス、ログなどの様々なテレメトリデータを統合的に扱うことができる OpenTelemetry は、可観測性の分野における革命的な存在と言えます。 過去10年間で、可観測性はニッチな分野から、クラウドネイティブの世界のあらゆる部分に影響を与える数十億ドル規模の産業へと発展しました。しかし、効果的な可観測性の鍵は、高品質のテレメトリデータにあります。OpenTelemetryは、このデータを提供し、次世代の可観測性ツールと実践を開始することを目的としたプロジェクトです。 learning.oreilly.com 本書の想定読者は、
先週、AppleのM1をネイティブサポートしたPhotoshopがリリースされましたが、それとともにAdobe Camera Rawもv.13.2にアップデートされ、新機能として「スーパー解像度（Super Resolution）」が実装されました。 スーパー解像度とは写真画像をAdobe SenseiのAIで幅と高さを2倍に拡大にできる機能で、拡大してもディテールは保持されたまま4倍の解像度になります。 写真素材: ぱくたそ 参考: Adobe Blog: 新機能「スーパー解像度」の活用方法 スーパー解像度とは スーパー解像度の使い方 スーパー解像度とは スーパー解像度の元となっているのは2年前の「ディテールの強化」で、そこからさらに進化し、第2の「強化」機能「スーパー解像度」としてリリースされました。 現在のところ、スーパー解像度が利用できるのはAdobe Camera Raw v.1
プロダクト、サービス、アプリやソフトウェアなどのランディングページ用のHTMLテンプレートを無料でダウンロードできるHTMLrevを紹介します。 ランディングページ用のHTMLテンプレートはすべて無料で、商用プロジェクトでも帰属なしで利用できます。 HTMLrev HTMLrevは先日ローンチされたばかりのサイトで、ランディングページ用のHTMLテンプレートが無料でダウンロードできます。 HTMLテンプレートはMITライセンスで、商用プロジェクトでも無料で利用できます。詳しくはLicenseをご覧ください。
Transcript ํITاۀͷઓུΛ͛Δ ٕज़બͱͯ͠ͷ React Native Yukiya Nakagawa @ WaterCell Inc. 2019.10.11 MOBILE CREW NIIGATA 2019 ࣗݾհ • த ࠸ / Nkzn / ͳ͔͟Μ • ্ӽࢢग़ • ϞόΠϧΤϯδχΞ ʢReact Native, Android, PWAʣ • ೋࣇͷͰ࠺ͷ ຊ͕ධͰ͢ • ͨͬͨ1Ͱجຊ͕ʹ͘ʂ AndroidΞϓϦ։ൃೖ • ٕज़ධࣾ • 224ϖʔδ / 2,280ԁʴ੫ • https://gihyo.jp/book/ 2018/978-4-297-10004-9 ࠓճɺAndroidΤϯδχΞΒ͍͚ͩ͜͜͠ • Υʔλʔηϧגࣜձࣾ https://water-cell.jp • 2011ۀͷ৽ׁࢢͷϕϯνϟʔا
A Visual Guide to SSH Tunnels: Local and Remote Port Forwarding
Bridge vs. Switch: What I Learned From a Data Center TourNetworking Lab: Ethernet Broadcast DomainsNetworking Lab: L3 to L2 Segments MappingNetworking Lab: Simple VLANDon't miss new posts in the series! Subscribe to the blog updates and get deep technical write-ups on Cloud Native topics direct into your inbox. TL;DR SSH Port Forwarding as a printable cheat sheet. SSH is yet another example of an
2020年のCSSのまとめ、FlexboxやCSS Gridの使用状況、よく使用するプロパティや単位、人気のフレームワークやツールなど
CSSを10年以上書いてきた人にとって、この2020年は今までとは全く違ったCSSになったと感じた人も多いと思います。 レスポンシブはブレークポイントの代わりにCSS Gridでより簡単に実装できるようになり、グローバルなスタイルシートに頼るのではなく、CSS-in-JSでスタイルをコンポーネントに配置してテーマ性のあるデザインシステムを構築できます。 フレームワークではTailwind CSSが浸透し、ユーティリティ・ファーストのCSSが使用されるようになりました。2020年現在、CSSの使用状況を調査した「The State of CSS 2020」を紹介します。 The State of CSS 2020 The State of CSS 2020は、The State of CSS Surveyでアンケートを行った調査結果をまとめたものです。私も1票分参加しました。 ちなみに、代表
用意するのはHTMLだけ、一行加えるだけでスマホ対応のクリーンなデザインのWebページができてしまう超軽量スタイルシートを紹介します。ダークモードにも対応しています。HTMLにclassを加えるなど、CSSの知識は必要ありません。 また、それをベースにして再利用可能なコンポーネント、CSSリセットの拡張版としても利用できます。 MVP.css MVP.css -GitHub MVP.cssの特徴 MVP.cssのデモ MVP.cssの使い方 MVP.cssの特徴 MVP.cssはHTMLのさまざまな要素にすぐに使えるスタイルのコレクションで、外部スタイルシートとして利用するだけで簡単にページを作成できます。クリーンなデザインで、再利用可能なコンポーネントとして利用できます。class名などをHTMLに加える必要もありません。 用意するのは、HTMLだけ MVP.cssはHTMLの各要素にス
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
Next.js + Electron を使えばめちゃくちゃ簡単にデスクトップアプリを作れるという記事です。 デスクトップアプリケーションをWeb技術で作成するElectronを、むちゃくちゃ久々にやってみたら、とても簡単になっていた React のフレームワークである Next.js もバージョン9.xになってから劇的に良くなり続けていて、どんどん触りやすくなっています ちなみに Next.js は非公式な日本語翻訳が進んでいるようです。 9割くらい翻訳が完了しているようですが、気になる方は、このサイトの「翻訳プロジェクトについて」をご覧ください。 セットアップする # npmの場合 $ npx create-next-app --example with-electron-typescript hoge $ cd hoge $ npm run build $ npm run start
CSSの数学関数と言えば、calc()が便利ですよね。 しかし、便利な数学関数はcalc()だけではありません！ 先月、Firefoxにサポートされたことにより、すべてのモダンブラウザにサポートされたCSSの比較関数「min()」「max()」「clamp()」の使い方を紹介します。 最大幅や最小幅を計算式で定義できる「min()」「max()」、フォントサイズの最小値と最大値をコの字のクランプのように計算式で定義できる「clamp()」、 これからのWebページやスマホアプリの実装にかなり役立つと思います。 Everything I Learned About min(), max(), clamp() In CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSの比較関数の
ゆめみのフロントエンドコーディング試験の題材で React の勉強をしました - Mitsuyuki.Shiiba
ちょっと前にツイッターで見かけた、ゆめみのフロントエンドコーディング試験 フロントエンドコーディング試験 「RESAS API を使用して、都道府県別の総人口推移グラフを表示するSPAを作る」っていうお題 React の勉強をするのにちょうどいい題材だなぁって思ったのでやってみた。課題を公開してるってことは「やってみてもいいよ」ってことかなと思ってるんだけど、もし違ったら GitHub のリポジトリーを private にするので連絡ください 1週間でやらないといけないところを2ヶ月近くやってるし、コミットログも特に何も考えずにポイポイ書いたから、全然だめなんだけど、でも、色々勉強になったので、とてもよかった。楽しかったー！ つくったもの こんな感じ これでおわりにするー pic.twitter.com/K8zhrRUp54— Mitsuyuki Shiiba (@bufferings)
フォント管理に大活躍！好きな文字でフォントを一覧表示できる、Win, Mac, Linux対応の国産無料アプリ -fontvuer
インストール済みのフォントを好きな文字で一覧表示できる、Windows, macOS, Linux対応の国産アプリを紹介します。 国産なので日本語フォントはもちろん、英語フォントもサポートされています。 いろいろなフォントで比べてみたい人、特にフォントがたくさんの人に便利です！ fontvuer fontvuer -GitHub fontvuerの特徴 fontvuerのダウンロード・インストール fontvuerの使い方 fontvuerの特徴 既視感を抱いた人は大正解！ fontvuerは先日リリースされたばかりの国産アプリで、以前当ブログで紹介した「Fontviewer（紹介記事）」の後継の新作です。 基本的な機能はほぼ同じですが、使い勝手が大幅に強化されています！
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
この記事は、株式会社カオナビ Advent Calendar 2023 の3日目です。 はじめに 株式会社カオナビの高橋(@kunit)です。 今回は MySQL バージョンアップ(5.7 -> 8.0) で起きた問題とそれに対してどのように対処したのかを書いていこうと思います。 何が起きたのか MySQL 5.7 から 8.0 にバージョンアップをするにあたって、CI およびローカル環境でテストができるように MySQL 8.0 のイメージを作成し、それをつかって各機能の担当者にテストを開始してもらっていたのですが、以下のような事が起きました。 接続を MySQL 5.7 から 8.0 に切り替えただけでテストの時間が3倍くらいかかるようになった そこを変更するだけで3倍遅くなるってやばいぞということで報告してくれた担当者と同じテストを自分でも実施してみると再現性があり、それが以下のどの
もじゃ（@s10akir）です。paizaラーニングでプログラミング学習動画制作のアルバイトをしている専門学生です。 以前こんな記事を書かせていただきました。 paiza.hatenablog.com 今回は、VSCodeとDockerを使って簡単に開発環境を構築する方法について書いてみたいと思います。 code.visualstudio.com ちなみに前回はプレビューリリースされた「Remote Development with VSCode」と「PaizaCloud」を使って、面倒な環境構築なしで快適に開発しようぜという記事だったのですが、しばらくして「Remote Development with VSCode」が正式版のVSCodeでも使えるようになりましたね！わざわざInsider版のVSCodeを入れなくてもよくなりましたね。 前提の環境について この記事の内容が試せるのは
便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse
button { --border-radius: 15px; --border-width: 4px; appearance: none; position: relative; padding: 1em 2em; border: 0; background-color: #212121; font-family: "Roboto", Arial, "Segoe UI", sans-serif; font-size: 18px; font-weight: 500; color: #fff; z-index: 2; } button::after { --m-i: linear-gradient(#000, #000); --m-o: content-box, padding-box; content: ""; position: absolute; left: 0; top: 0; wi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript + React: Component patterns
【C#】C# の async/await は実際にどうやって動いているか。 - ねののお庭。
Rust で Web アプリケーションはどこまで開発できるのか
CSSでここまでできるのか！知っておくと便利なCSSのプロパティや疑似要素のまとめ
React周りのいつかお世話になる記事たち（随時更新）
Dockerfileのベストプラクティス - Qiita
Dockerで環境構築するための最低限の概念理解 - Qiita
iPhone 12で、ビューポートのサイズの種類が増えすぎ！デバイスの複雑さがUIの設計にどのように影響するのか
Rust Cookbook for Beginners - CADDi Tech Blog
踏み台EC2を廃止してSession Manager接続に置き換えました
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
Windows10+WSL2環境で快適AWSサーバレス開発 | DevelopersIO
CIマニアから見たGitHub Actions(Beta)の使い所 - くりにっき
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
Adobeの新機能「スーパー解像度」がすごすぎる！古い写真画像でも驚くほど美しく拡大できる
全部、完全に商用利用無料！ さまざまなデザインが揃ってる、ランディングページ用のHTMLテンプレート -HTMLrev
地方IT企業の戦略を広げる 技術選択としてのReact Native
必要なのはHTMLだけ、一行加えるだけでスマホ対応のWebページができてしまう超軽量スタイルシート -MVP.css
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Next.js + Electron がとても簡単になっていた
CSSの比較関数が便利すぎる！ min(), max(), clamp()の使い方を詳しく解説
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
MySQL 5.7 から 8.0 にしたらテストが激遅になった - Qiita
VSCodeとDockerで簡単に開発環境を構築＆共有する方法 - paiza times