知っておくと仕事が捗る便利ツール17選 - Qiita
はじめに 知っておくと仕事が捗るブラウザ上で動く超便利なツールを17個集めました。 Squoosh Googleが開発した画像変換・圧縮用のWebサービス。 プレビュー画面で変換前後の画質をリアルタイムで確認しながら圧縮設定を調整することができる。 Documatic Documaticは、プロジェクトドキュメントの開発プロセスを削減するためのツール。API リファレンスからユーザー ガイドまで、コード ベースを簡単に文書化できる柔軟なテンプレートとユーザーフレンドリーな編集ツールを提供する。 transform jsonからyamlの形式に変換したい等、あらゆるデータ形式から別の形式に変換するサービス。 jsonからyml、htmxからjsxへの変形、jsonやGraphQLのIDLからTypeScriptのinterfaceまでも、ブラウザ上で生成することができる。 Roadmap.s
JavaScriptで100行で作る！数式言語のインタプリタ
皆さんはプログラミング言語を作ったことがあるでしょうか？ おそらく大抵の方は「ない」というのが正直なところなのではないかと思います。背景には、おそらく「プログラミング言語を作るって難しそう」という先入観があるのではと筆者は踏んでいます。 プログラミング言語とは、コンピューターに指示を与えるための特別な言語です。私たちが日常で使う言語と同じように、プログラミング言語にも文法やルールがあります。そして、この言語を理解し実行するのが「処理系」と呼ばれるプログラムです。 しかし、実はプログラミング言語の処理系（インタプリタ）を作ることは非常に簡単なことです。小さなOSを作ることに比べても、ちゃんと動くWebサービスを作ることに比べても本当に簡単です。 というわけで、この記事では「プログラミング言語」を作るための導入として「数式言語」のインタプリタを作ってみます。数式言語とは、数学の式を扱う非常にシ
JavaScript で then を使うのは避けよう（await / async の初級者まとめ）
JavaScript において、特に苦手とする人が多い印象のある Promise ですが、await と async の文法が導入されたことで、Promise の仕様を深く理解しなくても非同期処理を自然に書けるようになってきたのではないかと思います。 極論ですが、JavaScript の非同期処理は async await new Promise のみで、（ほぼ）全て表現可能です。特別な理由がない限り then を使わないようにしましょう、ということを周知するのがこの記事の目的です。 なお本記事では Promise の rejected の状態についてほとんど解説しておりません。基本を理解したら、別記事でぜひ学んでみてください。 Promise とは？ Promise は、少し乱暴に説明すると「実行が終わっていないかもしれない何らかの関数」を包んだオブジェクトです。 普通の関数とは違って、
ドラえもんだらけ
しばらく経ってもこの画面に変化がない場合は、Javascript を on にして再度読み込んで下さい。
僕の考えた最強の Python 開発環境 (2024)
はじめに こんにちは, 普段は情報科学専攻の大学院生をしながらバックエンドエンジニアをやっている @koki-algebra です. 普段は Go をよく書いているのですが, 大学でやっている機械学習の研究では Python を使うことがほとんどです. Go のエコシステムに慣れきった私は Python の混沌とした環境に耐えきれず, 最強の開発環境を整えることを決意しました. 具体的には Package Manager, Formatter, Linter, Type Checker, Test Tool を選定し, VSCode の DevContainer を用いてポータビリティに優れた開発環境を作ることを目指します. また, Deep Learning では GPU が必須である場合が多いので, GPU 環境も同時に整えたいと思います. 以下のレポジトリが今回考えた開発環境のテンプ
JavaScript Visualized - Promise Execution
Promises in JavaScript can seem a bit daunting at first, but understanding what's happening under the hood can make them much more approachable. In this blog post, we'll dive deep into some of the inner workings of promises and explore how they enable non-blocking asynchronous tasks in JavaScript. I'm still working on making this blog better on mobile devices, mobile browsers don't always render t
Markdown を拡張する MDX はドキュメント作成の新たな可能性？
この記事は、技術書典 11 で頒布中の「Vivliostyle で本を作ろう vol. 5」から抜粋した記事です。ご興味ありましたら、Vivliostyle を使って組版された本誌もぜひお買い求めください！ また、この記事以外の内容もすべて Vivliostyle 公式サイトで無料公開中です。 技術書やドキュメントを執筆する際、あなたはどのような形式で文章を書きますか？ 最近ではもっぱら Markdown で書かれることが多いですが、この Markdown を拡張するポテンシャルを持つお気に入りの OSS プロジェクト「MDX」を紹介します。 MDX = Markdown + JSX MDX の名前の由来は Markdown + JSX なので、MDX を理解するためにはまず JSX について知る必要があります。 JSX とは JavaScript の拡張構文の一つで、元々 React の
新たなJavaScript日付操作ライブラリ「Tempo」登場 ー ネイティブなDateと直接連携、小さく、速く、使いやすく
先日リリースされた「[Tempo](https://tempo.formkit.com/)」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 先日リリースされた「Tempo」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 JavaScriptの日付ライブラリにはmoment.js、day.js、date-fnsなどがあるが、これらと異なるのは、ネイティブのDateオブジェクトを直接対象としていることである。 従来の日付ライブラリは、独自の日付プリミティブを提供することが一般的であったが、TempoではネイティブのJavaScript Dateオブジェクトと直接連携し、Intl.DateTimeFormatを活用することで、タイムゾーンやロケールのファーストクラスサポートを提供するだけでなく、ライブラリのサイズ削減
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
Electron代替を目指す軽量なフレームワーク「Tauri v2」β版リリース。iOS/Android対応など
JavaScriptとHTML/CSSを用いてアプリケーションを構築できるElectronの代替を目指し、より軽量なRust製のフレームワークとして開発されている「Tauri v2」のβ版がリリースされました。 iOS/Androidモバイル対応 TauriはこれまでWindows、Mac、Linuxに対応したデスクトップ版が2022年6月にバージョン1.0としてリリースされていますが、iOSとAndroidに対応したモバイル対応は正式版となっていませんでした。 Tauri v2ではWindows、Mac、Linuxに加えてモバイル版としてAndroidとiOSに対応することで、デスクトップ版のアプリケーションからモバイル版への移植をスムーズに行えるようになります。 また、モバイルOSで提供されている通知機能、NFC対応、生体認証、バーコードの読み取り、クリップボードなどのAPIにもアクセ
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
静的サイト向けの全文検索エンジンと UI ライブラリの Pagefind
デモとして、このブログに Pagefind を導入してみました。ヘッダーの検索アイコンをクリックすると検索フォームが表示されるので、キーワードを入力して検索してみてください。 使い方 Pagefind は構築済みの UI ライブラリと、CLI コマンドとしてインデックスを作成するためのツールから構成されています。まずは UI ライブラリの部分から見てみましょう。 UI ライブラリ Pagefind の UI ライブラリは、検索フォームと検索結果を表示するためのコンポーネントから構成されています。この UI は以下のコードを追加するだけで簡単に利用できます。 <link href="/pagefind/pagefind-ui.css" rel="stylesheet" /> <script src="/pagefind/pagefind-ui.js"></script> <div id="s
CSSの進化がすごすぎる！ 2つの画像を比較するスライダーは数行のコードで実装できるようになりました
2つの画像を重ねて表示し、画像を比較できるスライダーを実装するには、今まではJavaScriptのライブラリなどを使用していたかもしれません。 ほんの少しのJavaScriptと、あとはシンプルなHTMLとCSSで2つの画像を比較するスライダーを実装するテクニックを紹介します。 まずは、実際の動作をデモページでご覧ください。縦線のレンジバーをマウスでドラッグすると、2つの画像を比較できます。 See the Pen Easy comparison slider by coliss (@coliss) on CodePen. HTMLはシンプルです。2つの画像をsectionで内包し、縦線のレンジバーをinput type="range"で実装します。 <div class="compare"> <section class="before"> <img src="Runner.svg" a
"レガシー"と言われないためのJavaScript再入門
追記: 10/11 ハテブでバズっているようで、色々指摘があったので追記 getElement*は動作が早いのでIDやクラス名が自明の場合はgetElement*を使う方がいいと言う意見もあり、また、ページの表示で大量に呼び出されるわけではないからボトルネックにはならないと言う意見もある。 getElement*で返されるオブジェクトは動的な変化に対応しており、querySelector*は動的な変化に対応していないため、場合によってはgetElement*を使うといい。このサイトで遊んでみよう。 https://ja.javascript.info/searching-elements-dom#ref-263 for await ... ofは非推奨なので Promise.allを現代的な書き方にした 顧客先のブラウザが古い場合も考慮して、あえてレガシーな書き方もする場合があるらしい。現
小さなゲームを作るとして、ターゲットデバイスと開発環境、何向けに何で作るのがいいんだろう - ABAの日誌
じゃあ小さなゲームを作ってみようか、と思ったときに、まず考えないといけないことの一つに、PC、スマホ、ゲーム機などなど、どのデバイスで動くゲームを作るかということがある。 特にこだわりがないのであれば、PCのWebブラウザ向けのゲームを作るのがおススメだ。今のブラウザは様々な開発環境で開発されたゲームを動作させるためのプラットフォームとして成熟しているし、他の人にプレイしてもらうにも、ネット上のURL告知からシームレスに遊んでもらえてお手軽だ。 ゲーム作りを楽しむ、という面では、どの開発環境・プログラミング言語・ゲームエンジンでゲームを作りたいか、から考える手もある。これについては小さなゲームだからどうこう、ということは特になくて、自分の好みで決めて良いと思う。ただ、重厚な3Dゲームを主なターゲットとしているUnreal Engineなどは小さなゲームを作るにはリッチすぎる、などは考慮して
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
AWS のサーバーレスと Amazon S3 署名付き URL、クライアントサイド JavaScript で大きなサイズの複数ファイルの一括アップロード・ダウンロード機能を実現する方法 | Amazon Web Services
Amazon Web Services ブログ AWS のサーバーレスと Amazon S3 署名付き URL、クライアントサイド JavaScript で大きなサイズの複数ファイルの一括アップロード・ダウンロード機能を実現する方法 はじめに 昨今のテクノロジーの進化は、これまで以上に、私たちがどのように働き、どのように生活するかを再定義しています。この進化の中心には、クラウドコンピューティングが存在しており、AWS はこれまで、クラウドコンピューティングのパイオニアとして、様々な機能を提供し続け、業界をリードしてきました。その機能群を支えるエコシステムの一部であるサーバーレスアーキテクチャは、スケーラブルで信頼性が高く、メンテナンスの作業負担が低いアプリケーションの開発を可能にし、ユーザーのビジネスやプロジェクトが円滑に進行するようサポートします。 AWS のサーバーレスの代表的なサービ
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］
相次ぐCDNエッジのJSランタイム登場は「エッジミドルウェア」や「エッジプロキシ」と呼ばれる新たな仕組みを実現する［PR］ CDNのエッジロケーションでJavaScriptランタイムを提供するサービスが相次いで登場しています。 代表的なものとしてCDNプロバイダのCloudflareやFasltyが提供する「Cloudflare Workers」や「Fastly Compute@Edge」などがあり、最近ではCDNプロバイダ以外からも「Deno Deploy」「Vercel Edge Runtime」などが登場しています。 これらに共通するのは、世界中に分散したデータセンターで稼働するサービスであること。そして、サーバサイドJavaScriptの実行環境が用意されていることです。 Vercelが提唱するエッジミドルウェア 現在インターネット上でサービスを提供する手段としてエッジロケーション
これはすごい！ HTMLの新機能、popover属性でポップオーバーがJavaScript無しで簡単に実装できるようになります
先日リリースされたChrome 114でPopover APIがサポートされ、HTMLのpopover属性が使用できるようになりました。 今まではポップオーバーを実装するのにはJavaScriptを使用し、ポップオーバーの開閉・フォーカス・アクセスフックなど面倒でしたが、popover属性で実装すると驚くほど簡単で、さまざまなUIコンポーネントに利用できます。 Introducing the popover API by Una Kravets 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 はじめに HTMLのpopover属性とは ポップオーバーのデフォルト、オーバーライド 自動ポップオーバーと手動ポップオーバー popover属性とdialog要素の違い 近日公開予定の便利な2つの機
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI - ICS MEDIA
階層メニューやトーストUIが簡単に作れる新技術！ JavaScriptで利用するポップオーバーAPI 2023年5月〜6月にリリースされたChrome 114とEdge 114には、「ポップオーバーAPI」というAPIが搭載されました。 ポップオーバーとはコンテンツの1番上に重ねて表示するUIで、ユーザーにアクションを促したり、補足の情報などを伝えるために画面に表示します。ポップオーバーAPIのMDNのドキュメントではオーバーレイ、ポップアップ、ポップオーバー、ダイアログなどを総称して「ポップオーバー」と呼んでいます。 ウェブサイトでよく見かけるポップオーバーですが、実装するには意外と調整や考慮の多いUIです。たとえば、画面の1番上に重ねるためにはz-indexで他の要素との重なり順を調整する必要があります。Escキーを押した時や要素外をクリックした時にポップオーバーを閉じるには、Java
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
