JavaScript Patterns Workshop | JavaScript Patterns
The content is based on Patterns.dev - a free online resource on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React. The patterns covered on this website and in the workshop can guide you when facing a problem other developers have encountered many times before, but are not a blunt tool for jamming into every scenario. The goal is to raise aware
プログラミング用フォントとUIデザインのどちらにも使える！ 美しさと読みやすさを兼ね備えたフォント「Martian Mono」
Webデベロッパーとデザイナー向けに、Groteskの人目を引く美学と読みやすさと分かりやすさを追求したオープンソースのフォントを紹介します。 ボタン・フォーム・リストなど、限られたスペースのWebサイトやスマホアプリのUIデザインにも適しています。 Martian Mono -GitHub Martian Monoは、Martian Grotesk（myfonts.com）の等幅バージョンで、Groteskのすべての利点を継承しつつ、コード用とデザイン用に制作されたフォントです。 ライセンスはSIL Open Font License 1.1で、商用プロジェクトでも無料で使用できます。
Introducing WebContainers: Run Node.js natively in your browser
Introducing WebContainers: Run Node.js natively in your browser Update: Since the publication of this blog post in May 2021, WebContainers became stable and available on Firefox but most importantly, we released a WebContainer API for you all to enjoy! A few years ago we realized that the web was heading towards a key inflection point. The advent of WebAssembly and new capabilities APIs made it se
GitHub - emilk/egui: egui: an easy-to-use immediate mode GUI in Rust that runs on both web and native
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
Announcing Perl 7
Announcing Perl 7 Jun 24, 2020 by brian d foy image credit: Darren Wood, “7”, on Flickr. This morning at The Perl Conference in the Cloud, Sawyer X announced that Perl has a new plan moving forward. Work on Perl 7 is already underway, but it’s not going to be a huge change in code or syntax. It’s Perl 5 with modern defaults and it sets the stage for bigger changes later. My latest book Preparing f
TypeScriptの為のクリーンコード を翻訳しました | Graat（グラーツ）-グロース・アーキテクチャ＆チームス株式会社
Robert C.Martinの書籍で有名な「Clean Code」を TypeScript に対応させたドキュメントを翻訳しました。可読性が高く、再利用可能であり、リファクタブルなコードをTypeScriptで書くためには、どのような事に気を付けたらよいかをご紹介します。
EngineeringProductHow to use GitHub Copilot: Prompts, tips, and use casesIn this prompt guide for GitHub Copilot, two GitHub developer advocates, Rizel and Michelle, will share examples and best practices for communicating your desired results to the AI pair programmer. Leia este artigo em português As ferramentas de programação de IA generativa estão transformando a maneira como as pessoas desenv
Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap
サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります） Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。 Snipsnapのインストール Snipsnapのインストールは、VS Code Marketplaceから。 VS Codeで開いたら、「Install」をクリック Snipsnapの使い方 Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。 設定 利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイル
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション
Next.js, Prisma, GraphQL Code Generator で作るフルスタック Web アプリケーション おもにNext.js、Prisma、GraphQL Code Generatorを用いたWebアプリケーションの構築手法について解説した書籍となります。 上記技術に加えて、以下の技術も採用しています。 ・Tailwind CSS ・NextAuth.js ・Apollo GraphQL ・Prettier ・ESLint ・Vitest ・React Testing Library ・GitHub Actions モダンなWebアプリケーションの開発手法について興味がある方にオススメです。 1章 Next.jsのセットアップ 2章 Prismaのセットアップ 3章 GraphQL Code Generatorのセットアップ 4章 テストコードの追加 5章 本番環境へ
中国人を悩ませるレアな名字の文字コード問題
印刷する メールで送る テキスト HTML 電子書籍 PDF ダウンロード テキスト 電子書籍 PDF クリップした記事をMyページから読むことができます 中国では、2023年8月1日に強制力のある国家標準規格「GB 18030-2022」（信息技術中文編碼字符集）が施行される。中国で「強制」という言葉が出ると「また締め付けが強化される」と反射的に考えてしまうかもしれないが、これは文字コードの標準規格を新たに導入するという話だ。珍しい名字などに使われ、既存の文字コードに未登録の漢字に対応しようというものになる。 中国の面積は日本の国土の約25倍で、約14億人の人口を擁している。一部の地域限定で使われている漢字や、少数民族の固有名詞でのみ用いられている漢字もある。文字コードに含まれない漢字を使っている人は約6000万人もいるそうだ。例えば、山東省青島市郊外にシュイユー村という地元ではまあまあ
TypeScript解読アシスタントこれはTypeScriptのコードリーディングを支援するツールです。 既存TypeScript案件に参加した際に、既存コードを読むにあたって、次のような悩みを解決するためのものです。 TypeScriptの構文がよくわからない「??って何？」「#nameの#ってコメント？」「<></>って何？」言語機能の名前がわからず、調べようがない「string | undefinedの|ってなんて名前？」「value as anyってなんて機能？」「[K: string]: stringって何？」使い方左のエディターに解読したいTypeScriptをコピペする解読したいコード部分をクリックする右エリアにコードの意味などが表示されるサンプルコード入力するコードがない場合はサンプルコードでお試しください。 サンプルコード機密情報コードはすべてオフラインで処理され、サーバ
Rustの開発環境を2秒で用意、ローカル環境は汚さず。オンライン開発環境のCodeSandboxがRust言語に対応
ここから「React」や「Vanilla」「Vue 3」などを選択すると、すぐにVisual Studio Code互換環境がWebブラウザ上に立ち上がります。 ここではReactを選択しました。エディタにはReactのテンプレートのコードが表示され、右側のプレビュー画面には結果が表示されています。エディタでコードを書き換えて保存すると、変更内容は瞬時にプレビューに反映されます。 このようにCodeSandboxはローカル環境に依存せず、しかも面倒なフレームワークや実行環境、ビルド環境などのインストールもすることなく、オンライン上ですぐにWebアプリケーション開発に取りかかれます。 また、Webブラウザから利用するだけでなく、Visual Studio Codeから利用するための拡張機能と、iOS用のアプリケーションも提供されています。GitHubとの連係も可能です。 CodeSandbo
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
AIは、Web制作にもすごい速さで浸透しそうですね。今までも似たツールがいくつかあったのですが、かなり出来がよいので紹介したいと思います。 テキストを入力、たとえば「シンプルでモダンなナビゲーション アイテムは日本語」と入力すると、そのUI要素を実装するHTMLとCSSを生成してくれるAIツールを紹介します。 AI CODE 実際に試してみましたが、ナビゲーション、ボタン、カード、フォームなど、UI要素やUIコンポーネントやレイアウトが数秒で簡単に実装されました。 また、次のバージョンではJavaScriptにも対応して、UIライブラリも追加する予定とのことです。 AI CODEの使い方 AI CODEの使い方は簡単、登録など面倒なことは一切不要です。 サイトにアクセスし、テキストを入力して「Generate」ボタンを押すだけです。 テキストは英語だけでなく、日本語でも大丈夫です。たとえば
はじめに これまでも「Setting Sync」という拡張を入れることで、複数のVisual Studio Codeの設定を同期することは可能でした。ただGithubやGistの設定がやや面倒な側面があり、初期設定が煩雑でした。 しかしVer.1.48でついに公式の設定同期機能「Settings Sync（紛らわしいですがこちらは複数形）」がリリースされました。以下の内容が同期可能です。 設定 キーボードショートカット ユーザースニペット 拡張機能 UIの状態（表示言語、アクティビティバー、パネル、画面レイアウト、コマンド履歴、同一通知の抑止） ここではその簡単な使い方と、何ができるのか簡単にまとめたいと思います。 なお公式ドキュメントはこちら。 https://code.visualstudio.com/docs/editor/settings-sync 事前準備 設定の同期を利用するた
MicrosoftのChromium採用により、Chromiumのコードベースから侮辱的・攻撃的表現を置き換える動きが進む | スラド IT
Microsoftが次期Microsoft EdgeでChromiumを採用したことで、Chromiumのコードベースに含まれる侮辱的・攻撃的表現を置き換える動きが進んだようだ(Issue 981129、 The Registerの記事)。 Microsoftのコントリビューターは7月初め、Microsoft内部で使用している機械学習によるツール「PoliCheck」でChromiumのコードベースをスキャンし、抽出結果の一部をバグとして報告している。このコントリビューターによればChromiumのコードベースはおおむね問題ないが、サードパーティーのコードを継承している部分に冒涜的な表現や地政学的に問題のある表現、多様性の面で問題のある表現の多くが含まれるという。 Google側ではコードベースに意図して侮辱的・攻撃的な表現を含めることはないとしつつ、これまで問題点を洗い出そうとしたことは
かなり便利！VS CodeでCSSを書きながらFlexboxのチートシートを利用できる -CSS Flexbox Cheatsheet
Visual Studio CodeでCSSを書きながら、CSS Flexboxのチートシートを利用できる機能拡張を紹介します。 justify-contentやalign-itemsはどう使うんだっけ？ justify-contentの値は？ など、Flexboxの各プロパティや値がどのように配置されるか、一目で分かります。 CSSを書きながらFlexboxのチートシートをVS Codeに表示中 CSS Flexboxのチートシートは、当ブログで翻訳したチートシートなどを参考にしているとのことで、Flexboxの各プロパティや値の挙動が簡単に分かります。 参考: CSS Flexbox の基礎知識と使い方を詳しく解説 機能拡張のダウンロードは、下記ページから。
Tom Long氏は、よいコードを書くため「4つのゴール」と「6つのコード品質の柱」を掲げ、「よいコード」と「悪いコード」を比較することで、「なぜ、このコードはよい／悪いのか」を具体的な事例とともに、1つ1つ解説しています。さらに、「よいコード」が正しく動き、「悪いコード」を発見するための「ユニットテスト」についても2章に渡って解説しています。 本書は、11章で構成されており、大きく3つの部に分かれています。最初の第1部では、コードに対するソフトウェアエンジニアとして考えを形作るための理論的な上位の概念について紹介しています。第2部では、いくつかのテーマに分けて、特定の考え方やテクニックを扱います。最後の第3 部では、効果的でメンテナンスできるユニットテストを作るための原則と実践について解説しています。 なお、監訳を務めた山本大祐氏は、次のようなコメントを寄せています。 コードが動くことに
はじめに Microsoftの提供するVisual Studio Code（VSCode）は、2015年の最初のリリースから、今では開発用エディタの定番の座を占めるまでになりました。これには、無償で使えることも大きいですが、何よりエディタとしての使いやすさ、そしてさまざまな拡張機能によっていくらでも使い勝手を向上させたり、利用の領域を拡げられたりすることも大きいでしょう。本連載では、このVSCodeにフォーカスし、基本的な使い方から拡張機能の活用、そして本格的な開発現場での利用を想定した高度な機能までを紹介していくことで、読者がVSCodeマスターになるお手伝いをします。 対象読者 テキストエディタメインで開発してきた方 Visual Studioより軽い環境が欲しいと考えている方 Visual Sudio Codeをもっと使いこなしたい方 必要な環境 本記事の内容は、以下の環境で動作を確
何かを「決定する」メソッド名
プログラム書いてて、何かの値を A か B か決める、みたいなメソッドの名前ってみんなどう付けてる？ 算出する、みたいなやつは calculate_xxx ってしてるけど、パラメータに応じてどっちか決めるだけ、みたいなメソッド名のいい名前が思い浮かばない・・・ なんかイマイチしっくりこない感があるんだけど、determine_xxx とかでいいのかなぁ？
Figma for VS Codeを使ってCSS実装する時のおすすめポイント - Goodpatch Tech Blog
Goodpatchエンジニアの池澤です。デザインツール「Figma」のスタイルや値を、テキストエディタ「VS Code」上で閲覧できる「Figma for VS Code」機能拡張が2023年6月よりFigma公式から提供されています。 この記事ではその「Figma for VS Code」について、実際に試して感じたことをまとめてみました。 ※ Figma Dev ModeやFigma for VS Codeはまだベータ版で動作保証されておりません。また本記事の内容は個人が趣味で検証したことをご理解の上、自己責任にてご利用ください。 Figma for VS Codeとは 主な使い方 使用時のワンポイント Point1： Figmaのトークンの名前と値が確認できる Point2： FigmaのSectionやReady for devマークの有無はあまり気にしなくて良い Point3：
Visual Studioでペアプロ環境を実現する「Live Share」が、テキストチャットとボイスチャット機能を統合へ
マイクロソフトは、Viual Studioファミリーでリモートでもペアプログラミング環境を実現する「Live Share」の新機能として、テキストチャットとボイスチャットをプレビュー公開することを明らかにしました。 Live ShareはVisual StudioやVisual Studio CodeなどのVisual Studioファミリー製品間をネットワークで接続し、ペアプログラミング環境を実現する機能です。インターネット経由でも機能するため、物理的に離れた場所であってもリモートでペアプログラミングを行うことができます。 今回発表されたのは、このLive Shareにテキストチャットとボイスチャットを統合する、というものです。現在のLive Shareは1つのソースコードを2人で同時に編集することはできても、プログラマ同士の会話は別に電話やチャットツールなどを用いなければ行えませんでし
#Visual_Studio_Code 各言語への対応 C/C++ C# Cython Go Markdown Preview Enchanced PlantUML PowerShell Python Ruby SVG Previewer YAML アルファベット順 名前: Better Comments オススメ度：★★★☆☆ TODO: ... みたいなコメントに色がつく VS Marketp
Recreate Redis, Git, Docker — with your own hands. Gain expert-level confidence by taking action and diving deep, learning from the world's best.
VS Codeには標準機能として、行の折りたたみができます。すこし使い勝手が悪かったのであまり使用していなかったのですが、折りたたみをより使いやすくする機能拡張をインストールしてみたら、便利だったので紹介します。 折りたたみ機能は、VS Codeで行エリアをホバーすると折りたたみ可能な箇所に下向きの矢印が表示されます。 Better Folding Better Foldingの特徴 Better Foldingのインストール Better Foldingを使ってみた Better Foldingの特徴 Better FoldingはVisual Studio Codeの機能拡張で、折りたたみ機能で求められるすべての機能を一つにまとめた拡張機能です。 VS Code標準の折りたたみ機能をより使いやすくします。 左はVS Code標準の折りたたみ、右はBetter Foldingの折りたたみ
TechFeed Experts Night#12 〜 【VSCode, Vim, Emacs】エンジニア向けエディタ最新動向！にて発表した資料です。 ※8分間のLTなので「詳細はググれ！」となっているのはご容赦ください🙏 https://techfeed.io/events/techfeed-experts-night-12 https://www.youtube.com/watch?v=WQgLRvuB8_o
Learn up-to-date, idiomatic C++ with code examples, concise explanations, cheat sheets and infographics. -- Lerne aktuelles, idiomatisches C++ mit Code-Beispielen, knappen Erklärungen und Infografiken. -- 学现代的C++ // 代码示例，简洁的说明和图表
VSCodeの操作ミスでGCP Cloud Composerの裏側k8sをお掃除した話 - Qiita
tl;dr 筆者はvim派でVSCode初心者。でも勧められたので数カ月ぶりに起動してみた。 Pluginを色々入れていたので、サイドバーにはたくさんのアイコン。なにこれ楽しい。 Cloud Codeタブを触っていたら…指先が震えてトラックパッド誤操作。「Delete Cluster」を押してしまう。 その時たまたま偶然、GCPのオーナー権限を持つIAMで認証していた。 盛大にやらかして復旧が手間だったが、いくつかの理由で障害として顕在化しなかった。 というお話 何をやらかしたのか やらかし当時、筆者はGCPでデータ処理基盤の開発を行っていました。vimとzshが大好きで、開発のすべてをこの2つで済ませてましたが、同僚にVSCodeを猛プッシュされたので使ってみることにしました。 VSCodeは数ヶ月前にインストールしたもののそのときは結局使わず。数ヶ月ぶりの起動でした。 インストール時に
しばらく前、React 17 RCが発表されました。現行のReact 16に比べて、いくつかの破壊的変更がある一方、新機能が何もないというのが特徴です。Reactチームとしては、新機能が無いとはいえ、破壊的変更も少なくなっておりなるべく16から17へのアップデートを行なってほしいという考えのようです。 この記事では、React 17における破壊的変更のうち、useEffectのクリーンアップのタイミングに関する変更を取り上げます（以下は公式サイトから引用）。 In React 17, the effect cleanup function also runs asynchronously — for example, if the component is unmounting, the cleanup will run after the screen has been updated.
Hisakazu YANAKA @htyanaka 大学1年のプログラミング入門的な授業でC習った時、UNIXサーバに入ってviエディタでプログラム作ってサーバーコマンドでコンパイルして動かす鬼仕様の授業があったのを思い出した。Hello Worldの遠いこと遠いこと。 twitter.com/obuchi_univ/st… 2020-04-28 16:10:47
2020-10-20フロントエンド開発環境の継続的なリファクタリングこんにちは、第二開発グループエンジニアの西村です。主にCLINICSの開発を担当しています。 はじめにCLINICS は電子カルテ、オンライン診療、予約システム、患者アプリなどを含む統合アプリです。CLINICS がローンチしてから現在に至るまで常に新機能開発と定常改善が行われており、開発環境のメンテナンスは後手になりがちでした。今回はそういった状況を改善すべく、開発環境のメンテナンス、リファクタリングを行った過程から得られたプラクティスについて紹介していこうと思います。 モチベーションプロダクトの新規開発時に行われる技術選定は非常に難しく、業務要件やチーム状況など総合的に考慮してその時点でのベストな選択をする必要があります。 しかし、選択した技術で長期運用をしていくうちに、メンテナンスが行き届かなくなったコードやライブラ
キカガクはAIを含めた最先端技術を最短距離で学ぶことができる学習プラットフォームです。今なら新規ユーザー登録（無料）で、Udemy でベストセラーの「脱ブラックボックスコース」完全版をプレゼント！「実務で使える」スキルを身に着け、次の時代に活躍する人材を目指しましょう。
GitHub - ttrace/vscode-language-japanese-novel: Visual Studio Code で小説を執筆する時に使う言語拡張です。
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
Nota Tech Conf 2021 Spring 3日目の発表資料です 2021/3/11 こんばんは daiizdaiiz.iconです Helpfeelの検索技術の話をします 開発、運用チーム プロダクトオーナー daiiz.icon プロジェクトマネージャー akix.icon Webディレクター akix.icon など テクニカルライター カスタマーサクセス エンジニア、デザイナー rakusai.iconakix.icondaiiz.iconshokai.icontakeru.iconTiro.icon 予測検索 Helpfeel CTO /masui/増井俊之.iconの展開ヘルプをベースとするFAQ検索システム PayPayフリマ様 FAQ テキパキと高速に検索できている クエリの表現に合わせて柔軟に結果が提示される Agenda いかにして探すか 1. 入力に対して遅
Photo by charlesdeluvio on UnsplashWhy Should We Care About Design PatternsSimply put, design patterns help us solve problems by creating a reusable solution that we can use as a template for our software. That being said, design patterns aren't algorithms and you can't paste them into the code base. They give you a template of sorts, but if misused some patterns may cause additional complexity an
3月といえば新生活。これから始まる大学生活や一人暮らしなどで、初めてノートパソコンが必要になったり新調したりする方も少なくないでしょう。 一筋縄ではいかないノートパソコン選び。その選び方を解説していきます。 自分の用途を考えよう！ 筆者が強い信条として持っているのが、「ノートパソコンはどこに金をかけたいかで選べ！」というものです。 デスクトップPCであれば、ミニPCやトレーディング用PCなどわずかな例外もありますが、おおむね価格と処理性能の相関が成り立ちます。スマートフォンもブランドや愛国心を売りにする製品など例外はありますが、だいたい同じですよね。 一方、ノートパソコンで考慮すべきはメモリ・CPUなどの単純な処理性能だけではありません。例えばゲームや動画編集をするならGPU性能が、外出先での使用がメインなら可搬性や耐久性、そして駆動時間の長さなどが必要となります。限られたポイント(=資金
Reactでウェブフォームを作る2021
Webのフォームは、いつでもベストプラクティスを悩むものの一つです。React を使うとして完全に自作でやるのか？それともフォームライブラリを使うか？フォームライブラリならどれを使うか？ 今の時代 Formik を選ぶ理由はありませんが、React Hook Form と React Final Form のどちらを使うかはとても悩ましいです。 React Hook Form は利用経験者・採用実績が多い、速度が速いなど様々な利点はありますが、React 哲学に反する作りなどクセの強さが難点です。あと良くも悪くも利用シーンが豊富でドキュメントも豊富で迷子になりがちです。 React Final Form は Final Form の React wrapper です。個人的にはこちら React 的使いやすさに反すると感じてること、React Final Form として見たときにドキュメ
Kindle Paperwhite のパネル化
SSH ログインできる Kindle Paperwhite の画面表示を制御下に置く方法を紹介します． このページでは次の3項目のやり方を紹介しています． スリープの停止 GUI フレームワーク停止 LED の制御 これらを適用したうえで 『Kindle Paperwhite に画像表示』 を実行すれば，Kindle の画面表示を思いのままに制御できます．
今見ているファイル内をSearchしやすくするVSCode拡張を作りました - $shibayu36->blog;
今見ているファイル内をSearchしやすくする「Search in Current File」というVSCode拡張を作ったので紹介です。 https://github.com/shibayu36/vscode-search-in-current-file https://marketplace.visualstudio.com/items?itemName=shibayu36.search-in-current-file 背景 Emacsにはhelm-occurという拡張があって、インクリメンタルサーチからスムーズにファイル内の検索結果一覧を見れる拡張がある。これが現在のファイルを探索するのに非常に便利で愛用していた。 VSCodeでも同じようなことが出来ないかなと思ったので、勉強がてら拡張を作ることにした。 使い方 Search in Current File - Visual Stu
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to use GitHub Copilot: Prompts, tips, and use cases
TypeScript解読アシスタント | TypeScript入門『サバイバルTypeScript』
Web版「Visual Studio Code」がオフライン動作に対応 ～PWAとしてインストール可能に／指定サイズ以下のリポジトリコンテンツを自動DLして高度な検索・定義移動も利用できる
Visual Studio Code公式の設定同期「Settings Sync」を利用する - Qiita
1月28日、新刊『Good Code, Bad Code ～持続可能な開発のためのソフトウェアエンジニア的思考』発刊！
VSCodeをWebサイト開発用ツールに ―HTML／CSS／JavaScriptエディタとして強化しよう！
vscodeで使ってる拡張機能 - yuiseki
The Software Pro's Best Kept Secret.
VS Codeでコードがさらに見やすくなる！ 行の折りたたみをより使いやすくする機能拡張 -Better Folding
書籍を書きました。 そう、VS Codeで。
Learn Contemporary C++ | Concise&Visual Examples
React17におけるuseEffectの破壊的変更を理解する
大学教員「emacsは使ったことがありますか？」→VS code派とVim派が現れテキストエディタ宗教戦争が勃発！？
フロントエンド開発環境の継続的なリファクタリング | MEDLEY Developer Portal
キカガク | AI・機械学習を学ぶ動画学習プラットフォーム AIプログラミングスクール
「Visual Studio Code API」を現役エンジニアから学ぶ！ 拡張機能開発の入門書が発売／シンタックスハイライトやスニペット作成の壁を経験をもとに解説【Book Watch/ニュース】
本当に役立つFAQ検索システムを目指して - Nota TechConf
7 Must Know Software Design Patterns
新生活、ノートパソコン選びの「コツ」と「思考法」を伝授します！ - すまほん!!