凄すぎると話題の「Open Interpreter」の始め方・使い方まとめ - Qiita
以下の記事を見て、早速「Open interpreter」を試してみたので、使い方や始め方をまとめておきます Open Interpreterとは Open Interpreterは、GPT-3.5、GPT-4、Code Llamaなどの大規模言語モデル（LLMs）を活用して開発されたオープンソースのツールです。 このツールは、OpenAIが提供するChatGPTの「Advanced Data Analysis(旧Code Interpreter)」のオープンソース版とも言える存在で、Python、Javascript、Shellなどのプログラミング言語のコードを自然言語による対話を通じてローカル環境で実行することができます。 このツールの最大の特徴は、ChatGPTの「Advanced Data Analysis」と違いローカル環境で動くため、ファイル容量やネット接続への制約がなく、Ch
君はVS Codeのデバッグの知られざる機能について知っているか - Qiita
はじめに こんにちは、kenです。 GWに「暇だな～～、こんな日はVS Codeの公式ドキュメントを読むか！w」と思って何気なく読んでたらデバッグに関して知らない機能がいくつかあったので、今回はそれをご紹介したいと思います。 おそらく今から紹介する機能はあまり知られてないと思います。もし全部知ってたらVS Code完全理解者なので誇ってください。（！？） 以下に記載する内容はVS Codeの公式ドキュメントのDebuggingという章を参考にしています。 注意 これから紹介する機能は言語によって使えたり、使えなかったりします。 今から紹介する機能のデモはすべてPythonで行おうかと思ったのですが、上記の理由からPythonではサポートされていない機能についてはJavaScriptやC++で代用しました。 デバッグで使える便利な機能 ログポイント機能 行を指定しログポイントを追加すると、そ
科学を変えた10のコンピューターコード | Nature ダイジェスト | Nature Portfolio
Fortranからプレプリントアーカイブまで、プログラミングとプラットフォームの進歩は、生物学、気候科学、物理学を新たな高みへと導いた。 2019年、イベント・ホライズン・テレスコープ（EHT）のチームは、ブラックホールの実際の姿を初めて世界に見せてくれた。彼らが発表したリング状に輝く天体の画像は、従来の写真とは違い、計算によって得られたものだ。具体的には、米国、メキシコ、チリ、スペイン、南極点の電波望遠鏡が捉えたデータを数学的に変換することによって得られたのだ1。研究チームは、その知見を記載する論文とともに、ブラックホールの撮影に用いたプログラミングコードも公開した。科学コミュニティーが自分たちのやり方を確認し、それを足場にできるようにするためである。 このようなパターンは、ますます一般的になりつつある。天文学から動物学まで、現代のあらゆる偉大な科学的発見の背後にはコンピューターがある。
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
VS Code で GitHub 上のリポジトリを直接参照できる「Remote Repositories」を試してみた | DevelopersIO
本日 2021/06/11 に Visual Studio Code 1.57 がリリースされました? リリースノートの中にあった「Remote Repositories」がとても唆るものだったので紹介したいと思います。 （実は Preview Feature として 1.56 に搭載されていた機能です。Terminal tabs しか見てなかった……） 現段階ではプレビュー版の機能になります。 Remote Repositories のざっくり機能説明 GitHub 上のリポジトリをローカルに clone することなく VS Code で直接参照できる機能です。 これにより GitHub 上でリポジトリ内の検索するよりもより使い慣れた画面で検索が行えるようになったり、VS Code の豊富で強力な拡張機能によってブラウザ上でのコード閲覧よりもリッチな体験が得られたり、更にはブランチ切って
HTMLを書いたり、修正する時に役立つVS Codeの機能拡張のまとめ
VS Codeには便利な機能拡張がたくさんありますが、その中から特にHTMLを書いたり、修正する時に役立つ機能拡張を紹介します。 VS Code Extensions for HTML by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張 はじめに HTMLを書いたり、修正する時に役立つVS Codeの機能拡張を紹介します。すべてを気に入るとは思いませんが、自分が抱えていない問題を解決したり、必要以上の機能を備えているかもしれません。それでも構いません。ここで紹介するのは、私が実際に使用し、気に入っている機能拡張です。 VS Codeの機能拡張を紹介する前に、Emmetから始めたいと思います。これは機能拡張ではありませんが、VS
あなたのWeb制作をサポートしてくれるWebツール13選 | BUILD Journal
あなたのWeb制作をサポートしてくれるWebツール13選Update2023.05.24Release2023.04.28Tools HatenaにシェアするTwitterにツイートするPocketにストックするFeedlyに登録する Web制作をサポートしてくれるツールを10個紹介します。mix-blend-modeやgridレイアウト、transformなどのコードの他にもフォントチェックや背景画像を作成できるツール、VSCodeのテーマ作成ツールもあります。あなたのWeb制作を快適に進めるためにチェックしてみてください。 Fuze – CSS Gradient AnimatorFuzeグラデーションアニメーションのCSSジェネレーター。色を複数指定するだけでCSSアニメーション用のコードを作成してくれます。背景色やテキストカラーなどに使えます。 ちなみに、テキストカラーは当サイトのト
まじか！VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ
Visual Studio Codeでついに、画像から背景を切り抜けるようになりました！ remove.bgをVS Codeで利用できる機能拡張がリリースされ、.jpg, .pngの写真画像を1クリックするだけで簡単に背景を切り抜くことができます。エディタとしても高機能なのに、画像編集までできるようになるとは！ VS Codeで、いつものぱくたそ画像から背景を1クリックで切り抜けます VS Codeで画像から背景だけを切り抜く VS Codeにremove.bgをインストールする手順 VS Codeで画像から背景だけを切り抜く VS Codeで画像から背景だけを切り抜くのは、1クリックで完了します。 まずは、ぱくたそ画像を用意し、VS Codeで開きます。
Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
簡単CSSアニメーション＆デザイン20選（ソースコードと解説付き） | knowledge / baigie
CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私（さかっちょ）がTwitterで過去にツイートしたCSSの技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整
Webエンジニアが勉強できるGit Repository 10選 - Qiita
2021/02/21 10選 => 12選に更新 2021/04/12 おまけを追加 2022/01/04 おまけにThe Modern JavaScript Tutorialを追加 こんにちは、WEBエンジニアのhedrallです。 もう一歩踏み込んでプログラミングに関して勉強をしようと思った時、 世の中には学習のためのレポジトリが存在していて、しかも世界的にはものすごい数のStarを獲得しているものも少なくないことを知りました。 今回はピックアップしてご紹介いたします。 [⭐️ 96.6k]: javascript-algorithms プログラミングで使用されるデータ構造や、一般的なアルゴリズムがまとめられており、全てjsで実装が例示されています。 [⭐️ 149k]: developer-roadmap webやinfraなど各分野のエンジニアになるために知っておくべき技術がロード
VSCodeでのGitの基本操作まとめ - Qiita
はじめに 一年前に新人研修でGitを担当してTigの記事を書いたのですが，今年も同じくGitの研修を担当することになりました．新人さんたちにとってはターミナル環境はとっつきにくい人も多いようで，短い研修期間では操作自体に苦戦してしまい，Gitそのものを理解するというところに力を割けない人も少なくありませんでした． それを踏まえて今回はGUIで操作しやすい環境を検討したのですが，以下のポイントを踏まえてVSCodeを使うことに決めました． マルチプラットフォームで使える．（研修はWindows環境で行いますが，業務ではLinuxデスクトップ環境も使うので） Gitの基本的な内容はVSCode上でGUI操作が可能． Gitの内容とあわせて，プログラミング用のテキストエディタの一例として，導入しやすそうなVSCodeを紹介． VSCodeを使ったGitの基本的な操作を一通りまとめていきます． イ
Homepage | GSAP
GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff. GSAP allows you to effortlessly animate anything JS can touch. Delivering silky-smooth performance and unmatched support so you can focus on the fun stuff.
2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表
HTMLなどのコードをブラウザ上で確認ができ、公開や共有もできるなど、世界中のデベロッパーが愛用するCodepen。 この記事は、2020年に特に人気の高かったHTMLスニペットをランキング形式でまとめた The Most Hearted of 2020 が発表されていたので、その中でも実用性の高いHTMLスニペットを中心にまとめて紹介しています。 CSSのみで表現されているとは思えない、シンプルながら効果的なテクニックが多数ランクインしていた2020年。 HTML/CSSやJSなどのコードの確認や編集を行うことができるので、今後のデザイン制作に活用してみてはいかがでしょう。 2020年にCodepenで話題！コピペ可なHTMLスニペット ベスト100発表 94位 Animated clip-path slider Concept 画面を縦半分に二分割した画像スライダーで、画像にマウスホバ
VS CodeのAdobe XD用拡張機能が登場！デザインシステムにもとづきコード出力と補完が可能に - ICS MEDIA
VS CodeのAdobe XD用拡張機能が登場！ デザインシステムにもとづきコード出力と補完が可能に Microsoftが開発を行っている無償のエディター「VS Code」にAdobe XD用の拡張機能「Adobe XD extension」が登場しました。 この拡張機能を使うことで、Adobe XD上で作成したデザインアセットをVS Code上で参照・編集できるようになります。デザイナーとエンジニア間の溝を埋めることができ、デザインシステム構築のハードルが下がるでしょう。 今回の記事では、「Adobe XD extension」の活用方法を紹介します。コーディングの際に活躍する拡張機能ではありますが、Adobe XDを使ったデザイン段階でのひと工夫も必要になりますので、デザイナーの方も理解しておくとプロジェクトの進行がスムーズになるでしょう。 「Adobe XD extension」と
ダミーデータ作成のお供に！ VS Code 拡張機能「vscode-random」で人名やカラーコードなどを自動生成してもらおう！ | DevelopersIO
はじめに ダミーデータを作成しなければならないときってありますよね？ テストデータやサンプル画面を作るときに値をどうするか困ったことありませんか？ そういった悩みを VS Code で解決するための拡張機能が vscode-random です。 https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random デモ （GitHub リポジトリより引用） 拡張機能としてはカーソル位置にランダムな値を挿入するという単純なものなのですが、VS Code のマルチカーソル機能と組み合わせることで非常に強力な体験を得ることができます。 名前やメールアドレスの項目がある JSON や YAML に対し、複数の項目にまとめて値を挿入して作り上げるのは気持ちいいこと間違いなし！ 対応コマンド コマンド 説明 生成例
Reactのコンポーネント周りの用語を整理する
React のコンポーネント周りの用語ってごっちゃごちゃになった経験はありませんか? 友人と話すときなどはなんとなくのニュアンスで伝わるので気にしていなかったのですが、型注釈つけるときやコードリーディングするときに言葉の定義がわからなくなって何回も調べるといったことをよくやるのでこれを機に整理しようと思います。 本記事では JSX 以外にも createElement 記法の知識も要するので、自信がない方は公式やどうして JSX を使ってもエラーにならないのか？をご覧ください。 ここでは React のドキュメント JSX Elements Components TypeScript の型定義 JSX.Element ReactElement DetailedReactHTMLElement DOMElement FunctionComponent Component ReactNode
QRコードを生成できるだけでなく「作り方」まで理解できる「Creating a QR Code step by step」
キャッシュレス決済の筆頭としてPayPayやLINE PayといったQRコード決済が日本においても普及し始めていますが、QRコードがどのように生成されているのかを知る機会は多くありません。「Creating a QR Code step by step」は、好きな文字列を表すQRコードを簡単に生成でき、さらにQRコードの生成過程まで理解できるウェブアプリです。 Creating a QR Code step by step https://www.nayuki.io/page/creating-a-qr-code-step-by-step まずは「Creating a QR Code step by step」にアクセス。ひとまずオプションの理解は置いておいて「Text string」に「GIGAZINE」と入力し、「Force minimum version」を「2」に設定して「Gene
Visual Studioでペアプロ環境を実現する「Live Share」が、テキストチャットとボイスチャット機能を統合へ
マイクロソフトは、Viual Studioファミリーでリモートでもペアプログラミング環境を実現する「Live Share」の新機能として、テキストチャットとボイスチャットをプレビュー公開することを明らかにしました。 Live ShareはVisual StudioやVisual Studio CodeなどのVisual Studioファミリー製品間をネットワークで接続し、ペアプログラミング環境を実現する機能です。インターネット経由でも機能するため、物理的に離れた場所であってもリモートでペアプログラミングを行うことができます。 今回発表されたのは、このLive Shareにテキストチャットとボイスチャットを統合する、というものです。現在のLive Shareは1つのソースコードを2人で同時に編集することはできても、プログラマ同士の会話は別に電話やチャットツールなどを用いなければ行えませんでし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual Studio CodeでGitHubリポジトリを「読む」のに便利な拡張機能が登場／わざわざローカルにクローンしなくてもOK。そのままVisual Studio Code上で閲覧できる
