「カーソルの移動」「ユニコード文字の表示」「テキスト色の変更」「マウス動作の追跡」ぐらいしかできないターミナル(端末装置)でのウェブブラウジングを実現するChromiumベースのブラウザ「Carbonyl」が公開されています。 Forking Chrome to render in a terminal - Fathy Boundjadj https://fathy.fr/carbonyl ターミナルは、一般にディスプレイとキーボードを備えていて、ホストコンピューターと接続してデータをやりとりしたり処理結果を表示したりするために用います。処理そのものはホストコンピューターが行う事例がほとんどです。 しかし、「どうしてもターミナルでブラウジングしたい」という風変わりな人はいるもので、GUIなしでグラフィカルにウェブサイトを表示できるテキストベースブラウザ「Browsh」のようなソフトウェアが
【Next.js × @vercel/og】セミナー登壇者風に誰でも予定を告知できるアプリを作りました - Qiita
はじめに 突然ですがみなさん、 X（旧Twitter）でこんな感じのイベント告知画像を見たことはありますか？ 最近はセミナーや講演会に登壇する人たちが、イベント告知のためにこのような投稿をすることが増えているように感じます。 そして、こうした投稿を目にするたびに、自分は次のようなことを思います。 人生で １ 回でいいから！！こんな感じで予定を告知してみたい！！なんかすごそう！！ そんな（超どうでも良い個人的な）欲求を叶えるため、「誰でもセミナー登壇者風に予定を告知できるアプリ」 を作りましたので、簡単に紹介したいと思います。 （本当はクソアプリ Advent Calendarに投稿したかったけど、諸々の事情により断念） 作ったもの Seminar Post Generatorという 「セミナー登壇者風に個人的な予定を告知できるWebアプリ」 を作りました。 ▼サービスURL ▼リポジトリ
JSer.info #544 - React 18のα版のリリースとReact 18での変更予定についての記事が公開されています。 The Plan for React 18 – React Blog React 18のα版はライブラリのメンテナー向けで、これにあわせてReactのワーキンググループが作られています。 React 18の詳細な変更予定については、次のDiscussionsにまとめられて議論されています。 Discussions · reactwg/react-18 React 18の変更は基本的に ReactDOM.createRootという新しいAPIを使った場合のopt-in方式となっています。 全体的な概要は次のスレッドにまとめられています。 Introducing React 18 · Discussion #4 · reactwg/react-18 それぞれの変更
はじめに こんにちは。ソウゾウのSoftware Engineerの @fuku です。 「メルカリShops [フライング] アドベントカレンダー2022」の6日目を担当します。 現在私はメルカリShopsにおける表示速度関連のパフォーマンス改善に取り組んでおり、インフラ、バックエンド、フロントエンドや計測方法構築など多岐に渡る領域に対してアプローチする事になりました。本記事ではメルカリShopsに対して行ったパフォーマンス改善の内容と、その結果について紹介します。 記事のポイント この記事を読む上で重視して頂きたい点は以下の通りです。 表示速度などユーザー体験に関するサービス運用の変化にも注意を向けることが最初の一歩 計測グラフを用意するなど可視化する事が必要 可視化したらチームにも共有し改善案を一緒に検討しよう 速度面のパフォーマンス改善には複数のアーキテクチャ領域を俯瞰しつつ総合的
ソースコードを共有してみんなに見てもらう機会があるでしょうか。そんな時、せっかく見てもらうなら、美しく読みやすいコードを見てもらいたいと思うものです。今回紹介するJavaScript製のツール「Carbon」を使うと、手軽にソースコードを美しい画像に変換して共有できます。 ソースコードを画像に変換するJSライブラリ「Carbon」 見栄えの良いソースコードを共有しよう 昨今、プログラマーであれば、誰しも自分の書いたソースコードを誰かに見てもらう機会があります。プログラミングに関するコラムを書いたり、作成したライブラリの告知のためにSNSで共有したり、プレゼンテーションでプログラムのコードを解説したりと、みんなに見てもらうという場面が多くあります。 そんな機会に、より美しく見栄えの良いソースコードを見せたいと思うことでしょう。今回紹介するJavaScriptのライブラリ「Carbon」を使う
そもそもアクセシブルなサービスとは、どのようなサービス、実装を指すのでしょうか。 端的に表現するならば、「伝えたい情報が正しい文書構造によって実装されているサービス」だと考えます。 例えば以下のようなボタンの実装があったとします。 こちらがレンダリングされた結果です。 こちらがスクリーンリーダーの結果です。 (Macの場合command+F5でVoiceOverを使用することができます。) この例の場合、視覚的な情報と、支援技術を介して得られる情報とで差異が産まれてしまっています。これはアクセシブルではありません。（例外[1]もあります。） この例の場合、ボタンの働きが編集であれば、スクリーンリーダーにより取得した削除という情報は誤りになります。 スクリーンリーダーのような支援技術は、アクセシビリティツリーを元に情報の処理・出力を行います。 このアクセシビリティツリーは、DOMツリーという
こんにちは。ひらやまです。 今回は、これまでフロントエンド環境を作ったり、運用したり、設計のアドバイスをしたりしてきた私がひとまずたどり着いた、このくらいの塩梅の設計が良いのではないかと考えている一つの案をみなさんに共有しようと思います。 フロントエンド設計の必要性 フロントエンドは JSON 色づけ係と言われることもありますが、ただ JSON をきれいにしてユーザに見せる以上の難しさを感じることもあるのではないでしょうか。 実装を完遂するために必要となるスキルが広いため、様々なバックグラウンドを持つ人がコードを書くことになりやすいです。フロントエンドエンジニアと呼ばれる人も、私みたいにマークアップエンジニアからフロントエンド領域に手を伸ばした人もいれば、デザイナーやバックエンドエンジニアなどの領域からこの環境に挑戦される方もいらっしゃいます。 このような様々な背景を持つ人たちが一つのコー
JWT ハンドブック 著者: Sebastian Peyrott JWT ハンドブック Sebastián E. Peyrott、Auth0 Inc. バージョン 0.14.1、2016〜2018 1 ⽬次 ⽬次........................................................................................................................................................................................ 1 謝辞.........................................................................................................
画像最適化戦略 AVIF 編 | blog.jxck.io
Intro 本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。 フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。 画像最適化シリーズ第 6 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 > 画像最適化戦略 AVIF 編 AVIF AVIF は、ロイヤリティフリーなコーデックを目指して AOMedia が開発した AV1 を、画像に転用したものだ。 AV1 Image File Format の略とされ、 AV1 の I フレームを静止画として表示するイメージだ。 Chrome 85, Fire
blog.utgw.net 私も緊急事態宣言してみました。文字のオタクサイドです。 フォント 元ネタのNHKのやつはたぶんニューロダンです。 lets.fontworks.co.jp これを使うとめっちゃそれっぽくなることは知られていますが、残念ながら私はLETSと契約していないので、Google Fontsで使えるNoto Sans JP Boldにします。 あと、なんとなくそれっぽくなりそうなので90%長体をかけました。 該当部分だけ抜き出すとこんなかんじです。Google Fontsはお手軽に使えて良いですね。 <head> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /
AppleがiOS 17・iPadOS 17・macOS Ventura・macOS Monterey・macOS Sonoma向けにSafari 17.0を2023年9月26日にリリース予定です。リリースに先立って、Safari 17.0のレンダリングエンジンであるWebKitのアップデート内容をAppleのWebKit開発陣がブログでまとめています。 WebKit Features in Safari 17.0 | WebKit https://webkit.org/blog/14445/webkit-features-in-safari-17-0/ ◆HTMLのアップデート ・「search」要素をサポート 検索機能は多くのウェブサイトにとって重要な機能となっていることを受けて、新たに「search」要素が追加されました。従来は、全てのユーザーが検索機能を適切に利用できるようにするに
Svelteのコミュニティによるイベント「Svelte Summit」が2021/4/25(日)に開催されました。 前回は2020/10だったのでおよそ半年ぶりの開催となります。 イントロからはじまり、発表は5分〜30分と長短合わせて16セッション、間にパペットショーやクイズレクリエーションを挟み、最後はFAQ、およそ6時間超でした。 Youtubeでアーカイブを視聴することができます。 日本時間22:00開始だったので中々しんどかったですが、Svelte日本のDiscordでみんなで実況しながら楽しく見れました(それでも眠くて途中で離脱しましたが)。Svelte日本のDiscordに、Svelte-NodeGUIをテーマに発表されたJamie Birchさんご本人が登場されて解説してくださるサプライズがあったりとても刺激的でした。 他の方に興味を持ってもらえるように、改めてYoutube
【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編 | アイデアマンズブログ
【保存版】知らないと画質が落ちるWebP変換おすすめパラメーター設定例 JPEG/PNG編 WebP 「WebPは軽いけど画質が悪い」と安易に誤解しないために 従来のJPEG画像やPNG画像をWebPに変換する代表的なコマンドがcwebp です。 ImageMagickのconvertコマンドのように多くの開発シーンで使われると予想されます。実際にWordPressなどのプラグインの多くも内部ではこのcwebpコマンドを使用しています。 このcwebpには意外と多くのパラメーターがあって、設定に迷ってしまいます。 企業サイトのWebP導入を支援する弊社が、現時点のおすすめパラメーター設定例を紹介します。 知らないと、「WebPは確かに軽いけど画質がいまいち...」という誤解を招いてしまいます。スムーズなWebPシフトのためにご参考ください！ まずは結論から JPEG画像からWebPに変換す
概要 本記事では、JavaScript モジュールバンドラの一種である、 Rspack について、公式ドキュメントからわかることを要約し、自分なりの所感を付け加えて紹介します。 https://www.rspack.dev/misc/branding.html ※ 本記事は、Webpack に関する最低限の知識を前提としています。 ※ 本記事は、2023/03/12 時点の情報であり、古い内容が残っている場合があります TL;DR; Rspack は Webpack との互換性とパフォーマンスを両立したモジュールバンドラ Webpack より5~10倍高速 Webpack と設定ファイルや loader, plugin に充分な互換性を持つ Webpack の一般的な設定パターンがビルトインで用意されており、シンプルに使える 現在はアーリーステージで、Vue.js のサポートもこれからとい
アセットの import を簡単にする TypeScript Language Service Plugin を作った - mizdra's blog
Web ページを作るときに、あらかじめファイルに書き出しておいた画像 (アセット) をページに埋め込みたいことがよくあると思います。例えばヘッダーにサービスのロゴ画像を埋め込む場合、以下のようなコードを書くと思います。 // src/components/Header.tsx export function Header() { return ( <header> <img src="/assets/logo.png" alt="Logo image" /> {/* ... */} </header> ); } 一方で、最近のWeb フロントエンドフレームワーク (例: Next.js, Remix) を使う場合は、import 文を用いて以下のように書くことが多いと思います。 // src/components/Header.tsx import I_LOGO from '../asse
こんにちは。旅行プラットフォーム部エンジニアの東川です。 フォルシアではフロントエンドフレームワークとして Next.js を使用していますが、2020年は Next.js にとって激動の年であったといえます。 この 1 年間でバージョンは 9.1 から 10.0 に上がり、SSG(Static Site Generation), ISG(Incremental Static Generation)などの新機能が次々に追加されました。 10 月 27 日に Next.js のカンファレンス Next.js Conf の開催と同時に Next.js バージョン 10.0 が発表されました。 国際化に対応したルーティング、Next.js Analytics, Next.js Commerce, React17 対応など数多くの新機能とバージョンアップが発表されましたが、next/image は
週刊Railsウォッチ（20200601前編）Active Recordに新機能「delegated typing」追加、RuboCopのデフォルト設定アンケートほか｜TechRacho by BPS株式会社
2020.06.01 週刊Railsウォッチ（20200601前編）Active Recordに新機能「delegated typing」追加、RuboCopのデフォルト設定アンケートほか こんにちは、hachi8833です。この記事↓にどよめきました👍🎉😂。 ⚓オープニングつっつき: 経産省のnpmモジュールが素晴らしい 元記事: 経産省発の npm モジュール！住所や電話番号の正規化、ジオコーディングなどができる IMI コンポーネントツールを試した！ - Geolonia developer's blog サイト: IMI 情報共有基盤 コンポーネントツール 経産省が住所変換や法人種別名、電話番号の正規化に使えるIMIコンポーネントツールを公開しました。 ソースコードも公開。README にも使い方が丁寧に書かれていました。https://t.co/fPbV00EgZP 素晴ら
週刊Railsウォッチ（20200602後編）JSONストリームパーサーyajl-ruby、ruby-buildとopenssl、GoogleのCloud SQL、Rubyと機械学習ほか｜TechRacho by BPS株式会社
2020.06.02 週刊Railsウォッチ（20200602後編）JSONストリームパーサーyajl-ruby、ruby-buildとopenssl、GoogleのCloud SQL、Rubyと機械学習ほか こんにちは、hachi8833です。例のRuby 3.0キーワード引数変更のつらみをmameさんがまとめてくださいました🙇。 I've posted a (current) summary of pain points about Ruby 3.0 keyword argument change. We'd still like to hear your opinions.https://t.co/6AijkjqtSW — Yusuke Endoh (@mametter) June 2, 2020 各記事冒頭には⚓でパーマリンクを置いてあります: 社内やTwitterでの議論などに
はじめに 著名な Rubyist にインタビューを行う企画「Rubyist Hotlinks」。第 39 回となる今回は、古橋貞之さん。 では、お楽しみください。 インタビュー 聞き手 卜部さん (@shyouhei) 語り手 古橋貞之さん (記事中「古橋」) 野次馬（古橋さんの現職であるトレジャーデータの同僚と元同僚のみなさん） 国分さん、成瀬さん、田籠さん、金子さん、三村さん 日にち 2023 年 5 月 11 日 写真提供 : 目次 Table of content プロフィール 卜部 はい、じゃあお疲れ様です。ゆるりと始めていきますが。るびまのインタビューはポッドキャストにしないという信念の元に、ポッドキャストにしていなくて。 三村 そんな信念が。 卜部 なんでかっていうと、いくら迂闊なことをゆっても後から編集できるからっていう。これがね、やっぱ迂闊なことを言ってもらわないと楽しい
※行程さんを利用したくてこの記事に辿り着いた方へ。「Pen」https://pen.social という後継サービスを開発しました。 この記事は、2017年7月〜2020年6月まで運用されていた旅行のしおり作成サービス「行程さん」について書かれています。2019年4月に技術同人誌として執筆したものを元にnote用に無料公開したものです。内容はほぼそのときのままです。ナマモノな情報なので、（行程さんがクローズしたこともあり）無料公開いたします。 開発当時の考え方のため、いま思うと「こうしておくべきだった」等はたくさんあります。 1-1 行程さん 本書で取り上げる行程さんについて説明をします。 ■行程さんとは みなさんは複数人で旅行に行く計画を立てたとき、旅行のしおりをどうしてますか？ しおりを作るのが好きな方は凝ったものを作るでしょうし、面倒だから作らないという方もいるかと思います。 「行程
こんにちは。ぬこすけです。 今年の2月にフロントエンドのパフォーマンスチューニングに関する記事を公開したところ、多くの反響をいただきました。 さて、 一丁前にパフォーマンスチューニングの記事を書いた本人はどうなんですか？ というお話です。 ということで 個人開発している「ぬこぷろ」という技術書のランキングサイトで PageSpeed Insights を 💯 点のスコアを出してみました。 モバイル PC ※ちょくちょく改修しているので、スコアは変動します。 弱小なインフラ構成や広告・分析用の第三者コードの読み込み、そしてある程度リッチなコンテンツを表示するサイトでここまでのスコアを叩き出せたのは割とがんばったかなーと思っています。 この記事では ぬこぷろで行ったパフォーマンスチューニングの実例を紹介 します。 みなさんのサイトのパフォーマンスチューニングの参考になればと思います。 注意事
Merpay Advent Calendar 2019 の2日目は @1000ch (id:hc0001) がお送りします。この記事は2019年11月16日に福岡で開催された Frontend Conference Fukuoka 2019 のセッション、HTML Optimization for Web Performance の書き起こし記事です。 docs.google.com なぜ HTML の最適化が重要なのか 先日公開された Chromium Blog: Moving towards a faster web をご覧になられたでしょうか。Google は Web ページのパフォーマンスの重要性を様々な形で啓蒙してきましたが、この記事では Chrome のもとになっている Chromium に、Web ページのパフォーマンスをブラウザ UI として表示する機能を追加し、ユーザーが
まだ知らないCSSプロパティと出会える方法 - Little Strange Software
どうも！LSSです！！ CSSで色々やってみたい、と思った際に、 HTML5 & CSS3ポケットリファレンス [改訂新版] (POCKET REFERENCE) 作者:森 史憲,藤本 壱 技術評論社 Amazon ↑こういう本を眺めています。 基本から教えてくれる入門書、というわけではなく、CSSで使えるプロパティにどういうものがあるか、どのように使うか、がどっさり掲載されている辞書的な本ですね^^ これ面白そう、って思ったら試してみて、使い方や組み合わせを考える感じです。 ところが。 CSSのプロパティというのは数が膨大で、この本に掲載されているものも数が膨大なのですが、それでも本が全てのプロパティを網羅しているわけではありません。 また、仮に「全てのCSSプロパティを網羅した本」があったとしても…CSSは進化しているので、時が経つとまた新たなプロパティが生まれたりもします。 プロパテ
昨年からの仕事の成果物の一つを、特許として出願しました。弁理士の先生にお願いしたりすること無く、書類は全て自力で用意しました。初めての体験です。 出願はほぼスタート地点のようなものであって、特許査定*1に至るとは限りませんし、行うべき作業は沢山あります。友人の弁理士曰く「素人が書いて通るようなもんじゃない」とのことなので過度な期待は抱かないようにしていますが、出願という行為を正しく行うというところまでは自力で来れました。プログラミングの世界で言うところの「コンパイラがエラーを吐かなくなるところ」まで来れたのです。 そんな訳で、やってきたこと等を書き留めておきたいと思います。 なお、ここに書いてあることを参考にして、読者が自力で出願して意図しない結果*2になったとしても筆者は責任を負うことができません。特許を真面目に考えておられる皆さんはぜひ時間・金銭共に余裕を持って弁理士の先生のお世話にな
タイトルの通り、Gatsby.js, TailwindCSS, Netlifyの組み合わせでフロント技術オンリーのフリー素材サイトを作ってみたので、使っている技術とサイトの紹介をしたいと思います。 Qiitaに書くかZennに書くか(同時にどちらにも投下するか)迷ったんですが、Zennにしました。 作ったものと動機 「FLAT SVG DESIGNS」というSVGアイコンやイラストを無料で配布する素材サイトを作成しました。アイコンはまだ130個ほどしかありませんが、順次追加していきます。アイコン作成からサイト作成まで全て一人でやってますので、更新はゆっくりになると思います。(1週間に10個が目標) FLAT SVG DESIGNS アイコンはこんな感じのデザインです。 ここがこだわり サイト全体でPNG形式などのラスター画像を使っているのはファビコンのみ。それ以外は全てSVGファイルで画像
ネットには色々な情報がありすぎ、良いものも悪いものも新しいのも古いものもごったになっていて、初心者には見分けがつきません。 結局これが参考になった。よかったと思ったものを項目ごと並べていきます。無駄に時間を使わなくてよいようにコツみたいなのもわかる範囲でかきます。 周りに詳しい人がいないけど、独学で勉強されるかたの参考になれば幸いです。 誰かの役にたてば苦労は無駄ではなかった。 ぐぐって記事を探すとき 「+2022」を入れ今年以降の記事を検索する 結構無駄な時間が省けます。 理由：フロントエンド技術は半年前の情報があてにならない。 目次 1. エディタとPC 2. Portfolioサイト 2. HTMLとCSS 3. JavaScript 4. React 5. PHP 6. Python 7. Git 8. サーバとDB 9. フロントエンドとバックエンド技術 10. デザイン関係 1
夏休みの宿題で、漢字の書き取り問題と格闘している子どもたちも多いかもしれません。一方で、パソコンやスマホが漢字変換してくれる影響からか、難読漢字を見る機会も多くなった気がします。そんな日本の漢字について、隣国である韓国、中国からの視点も交えて考えてみました。 進む「表イメージ文字」化 早稲田大教授 笹原宏之さん コロナ禍でのオンライン授業で、学生たちが手書きで書いた回答を撮影して送ってもらっていました。 漢字を書く機会が激減したといわれる現在、若い世代の「漢字観」がどうなっているか、具体例を通して新たな発見がありました。 例えば、コロナ禍の「禍」を「渦」と書く学生たちがいます。画面上の「禍」の文字の形を見て、何となくつくりの目立つ部分だけが記憶に残る。「パターン認識」による覚え方です。意味を考えず、一点一画を手の筋肉を動かして覚えていないから「渦」となじみ深い方で書いてしまう。せっかくの知
ディレクトリ構造ディレクトリ構造はこんな感じです。 srcが作業ディレクトリで、コンパイル前のscssファイルや圧縮前のjsファイル、画像ファイルが格納されています。 gulpが走ると、distディレクトリにコンパイルされます。 ├─ index.html ├─ gulpfile.js ├─ package.json ├─ package.look.json ├─ /node_modules ├─ /dist │ ├─ /css │ │ └─ style.css │ ├─ /js │ │ └─ script.js │ └─ /img └─ /src ├─ /scss │ └─ style.scss ├─ /js │ └─ script.js └─ /img npmパッケージについての説明は割愛しますが、progateで解説されている記事があったので紹介しておきますね。 基本的なg
レンダリングの仕組みを知り、パフォーマンス向上に活かす
この記事について 勉強会で作成したスライドの内容を簡単にまとめる。 メモレベルですが、どうかあしからず。 主な内容 ・ブラウザのレンダリングの仕組みを把握する ・パフォーマンス向上に使えそうな小ネタの紹介 レンダリングの仕組み 大きく４つのプロセスに分けられる。 Loading Scripting Rendering Painting Loading HTMLやレンダリングに必要なリソースを読み込む。 主な仕事はDownloadとParsing。 Download HTMLを取得し、その中で参照されているリソースがあればそれらを読み込んでいく。 Parsing リソースをレンダリングエンジンの内部リソースに変換する(HTML→DOM Tree、CSS→CSSOM Tree) 構造が複雑になる程、解析に要する時間が増える。 ボトルネックになりがちなところ HTMLのパース中にscriptタグ
Googleの検索コマンド（検索演算子とも）は、うまく活用することでネット検索の質と効率を格段に高めてくれます。 中には、一度知ったら戻れないというほど便利なコマンドも。そこで今回は、Googleの高度な検索演算子の中から、特に役立つものを厳選してご紹介し、高価的に使用する方法を見ていきます。 Google検索の便利なコマンドについて動画での解説もご用意しています。 Googleの検索コマンド（検索演算子）とは Google検索コマンド（検索演算子）とは、通常入力した言葉で検索するGoogle 検索の機能を拡張する、高度なコマンドです。 検索対象の絞り込みに有用で、コンテンツの調査、フォーラム探し、SEO戦略などの用途に活かすことができます。 さらにこの検索コマンドは、BingやYahooといったその他の検索エンジンでも使用可能です。 Gmailの検索コマンドと同様、Googleの検索コマ
Masato Kinugawa Security Blog: SVGフォントとCSSを使ってページ内のテキストを読み取る
English version is here: https://mksben.l0.cm/2021/11/css-exfiltration-svg-font.html この記事では、SVGフォントとCSSを使って、ページ内のテキストを読み取る方法を紹介します。 CSSを使ってデータを読み取る方法はいくつか知られており、既知の手法が以下のサイトでよくまとめられています。 CSS Injection Primitives :: DoomsDay Vault https://x-c3ll.github.io/posts/CSS-Injection-Primitives/ これらのテクニックは、入力がサニタイズされていて使えるHTMLタグが限られているケースや、Content Security Policy(CSP)の制限によってJavaScriptが使えない状況などでも、スタイルの記述ができる
UnJS のライブラリ多すぎて結局何を使えば良いのかわからないという方は、とりあえずこの unkit を入れてみましょう。 31～40 31. 🛣️pathe ── あらゆる環境で統一的に使えるファイルパスモジュール resolve('../') のようなパス解決を行うモジュール。 node:path と同じようなことができますが、パスの区切りに使われる文字が、Windowsではスラッシュではなくバックスラッシュで書かれることがあり、どちらの書き方でも認識できるようになります。 第2引数でエイリアスを渡せる resolveAlias 関数なども提供されています。 ちなみに11/12時点で radix3 の Star数を抜いているので既に30位です。 32. 👂listhen ── HTTPリスナーを提供するパッケージ npx listhen -w ./index.ts のようなコマンド
この記事はテックタッチアドベントカレンダー23日目の記事です。 バックエンドエンジニアのcomです。入社してもうすぐ2ヶ月です。最近は某大型スマホゲームの原神にハマっています。 そろそろアウトドアな趣味も見つけていきたい今日このごろ この記事について 免責事項 この記事で伝えること tsungとは？ tsungのセットアップ 基本的な負荷ツール実行方法 configの説明 tsung-recorderの使い方 Mac上でのproxyの設定 tsung-recorder (記録用proxy)の起動 ブラウザ経由でURLにアクセス Recordされた結果の確認 recordしたシナリオを用いた設定ファイルの作成 所感 この記事について 負荷テストをしようと思いいくつかツールを検討していた所、tsungとtsungに付随するtsung-recorderで簡単に 実リクエスト に近い負荷シナリオが
VS Code Draw.io Integration の画像エクスポート機能 数ヶ月前に、VS Code の Draw.io Integration が話題になりました。 VSCode で Draw.io が使えるようになったらしい！ - Qiita ただ、上記の記事にもあるようにエクスポート機能はv0.4.0から無効化されており、エクスポート機能を利用するにはオンライン版の Draw.io に繋がないといけないという本末転倒な状況になっているようです。 せっかくエディタ内でドキュメントと作図が完結しそうという素敵な体験にあと一歩というところなので、*.drawioファイルを一括で画像ファイルに変換するスタンドアロンのツールを作ってみたり（kaakaa/dio-exporter）もしましたが、もっと良い方法があったようです。 *.drawio.png と *.drawio.svg Vis
Canvasに描画した内容を画像としてサーバへ送信し、そのままサーバに保存してみます。 今回は入力したテキストがそのままCanvasに描画される簡単なサンプルを用意しました。文字色と背景色もおまけで変更できます。もう少し頑張るとバナー画像ジェネレーターとか作れそうですね。 サーバ側のプログラムはPHPを採用していますが、他の言語でも似たような処理になります。 Canvasの内容をサーバへ送信する 実行例 ソース HTML JavaScript PHP 解説 Canvasを画像として取り出す サーバへ送信する サーバでバイナリとして保存する 参考ページ Canvasの内容をサーバへ送信する 実行例 以下から実際のサンプルをお試しいただけます。 miku3.net 左側にあるテキストボックスへ入力するとその場でCanvasに反映されます。同様に文字色や背景色も指定したタイミングでCanvasが
![[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R](https://cdn-ak-scissors.b.st-hatena.com/image/square/cd4ec00f9e7dc008c0692333e4281a83ea17d3a6/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fk%2Fkatsube%2F20231125%2F20231125045644.png)
React JSを使用した【PWA】化の構築方法 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
GoogleはProgressive Web App(PWA)という新しいテクノロジーを提供しました。 PWAテクノロジーは市場に出回ってからしばらく経ちますが、その人気はここ数年で急上昇しております。 PWA開発の基本と定義を見ていきましょう。 PWAとは？ PWAで構築する理由 ReactでPWA Webアプリ作成 Manifest.json アプリのビルド Service Workerの登録 最後に PWAとは？ PWA（Progressive Web App）は、Webアプリケーションとネイティブアプリケーションの利点を組み合わせたアプリケーションであり、ハードウェア機能を含めたクロスプラットフォームアプリを提供します。 PWAは、ネイティブアプリよりも開発とサポートが迅速で、低コストであるため、注目されています。 この技術は、モバイルアプリとWebサイトの両方で最高のユーザーエク
どうも、まさとらん（@0310lan）です！ 今回は、さまざまなWeb開発に活用できる便利なサービスを厳選してご紹介します！ 本記事で取り上げているWebサービスはすべて無料で使えるものばかりで、さらにほとんどの場合は面倒なユーザー登録も不要なうえ完全なカスタマイズ性も備えています。 自分専用のWebサイト、ポートフォリオ、データベース、API…など、さまざまなWeb制作を楽しめるものを厳選しているのでご興味ある方はぜひ参考にしてみてください！ ■独自のブランドガイドを手軽に構築できるサービス！ 【 Baseline 】 企業だけでなく、個人サイトでもブランディングを意識するケースは少なくありません。このサービスでは、独自のロゴ・テーマカラー・フォント・タイポグラフィなどをまとめた「ブランドガイド」を簡単に作成できます。 使い方は非常に簡単で、いくつかの質問に答えたりロゴをアップロードする
Photoshop ユーザーガイド Photoshop の概要 夢をカタチに Photoshop の新機能 初めての写真編集 ドキュメントの作成 Photoshop | よくある質問 Photoshop の必要システム構成 Photoshop とは Photoshop とその他の Adobe 製品およびサービス Photoshop で Illustrator アートワークを作業する InDesign での Photoshop ファイルの操作 Photoshop 用 Substance 3D マテリアル Photoshop の Capture アプリ内拡張機能の使用 Photoshop iPad 版（中国本土ではご利用いただけません） Photoshop iPad 版 | よくある質問 ワークスペースについて システム要件 | Photoshop iPad 版 ドキュメントの作成、表示、書き
D3.jsを使ってデータをビジュアライズしよう
D3.jsはSVGを使って高度なビジュアル化を行うライブラリです。 グラフに限らず、様々なチャートやビジュアルの表現ができますが、複雑な仕組みを覚えなければなりません。他のグラフライブラリなどではCSVデータを適用するだけというものもありますが、D3.jsはそこまで簡単ではありません。 今回はD3.jsで折れ線グラフ（Line Chart）を描画してみる | Will Style Inc.｜神戸にあるウェブ制作会社を参考に、なるべく段階を区切ってD3.jsの使い方を解説します。 インストール インストールはMonaca IDEのJS/CSSライブラリの管理でD3を検索するか、index.htmlに次の記述を行います。 <script src="https://d3js.org/d3.v5.min.js"></script> HTML側での準備 HTMLは body タグ内に次の記述を行いま
はじめに 今回の記事では、JavaScriptで重要な概念であるDOMについてザックリ解説する。簡単に言えば、DOM(Document Object Model)は、HTMLの要素を操作するための仕組みのことである。 前提として、公式ドキュメントがあるのでDOMを他のネット記事で調べる必要はないと思うだろう。しかし、DOMはJavaScriptにおいて重要な概念であるにもかかわらず、それを正しく説明できる人は少ない。 これに関連して、Zennの記事「何度調べてもわからないDOMに決着をつける」では、DOMについて以下のように述べている。 そして、DOM（というよりJavaScript）の恐ろしいところは、理解していなくてもコピペなどで何となく結果が返ってくることです。 プログラミングの世界では、上述の引用のように「理解していなくてもコピペなどで何となく結果が返ってくる」ことは珍しくない。こ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ターミナルでYouTubeを見たりDOOMを動かしたりできるChromiumベースのブラウザ「Carbonyl」
2021-06-15のJS: React 18 αリリース、Deno 1.11(Docker Images)、Plotly.js 2.0
メルカリShops パフォーマンス改善 奮闘記 | メルカリエンジニアリング
ゼロからはじめるJavaScript(31) 美しいソースコードを共有するJSツール「Carbon」を使ってみよう
aria-labelで始める、アクセシビリティ改善活動
いい塩梅を目指したデザインエンジニアによるフロントエンド設計 - estie inside blog
[pdf] JWT ハンドブック Sebastián E. Peyrott、Auth0 Inc.
SVGフィルタで緊急事態宣言 - すずしめにっき
Safari 17.0がリリース、プロファイル機能のほか、多数のAPIや要素のサポートが追加される
Svelte Summit Spring 2021 簡易まとめ
Rust + Webpack = Rspack の紹介
Next.js 10 の新機能 next/image のオプション全部触ってみる
Rubyist Hotlinks 【第 39 回】古橋貞之 さん
ウェブサービス「行程さん」をバズらせたマーケティングとデザイン｜吉川雅彦
PageSpeed Insightsで100点満点の爆速サイト🚀にした話 - Qiita
Web パフォーマンスのための HTML 最適化 | メルカリエンジニアリング
職業プログラマの特許出願 - 職業プログラマの休日出勤
Gatsby.js, TailwindCSS, Netlifyでフリー素材サイト作ってみた
Web系プログラミング独学者の時間を無駄にしない参考まとめ 2022年
漢字との関わり 心配の一方、「ひらがなだけで」の声も：朝日新聞デジタル
【gulp4】もう迷わないgulpfile.jsの書き方｜KojimaKohei
【2024年版】活用したいGoogleの便利な検索コマンド40選（調査、競合分析、SEOに便利）
UnJS にどんなツールがあるのかすべて紹介してみた（後編）
tsungでサクッと負荷テストをしよう - Techtouch Developers Blog
*.drawio.png と *.drawio.svg とはなんなのか
[HTML5] Canvasを画像に変換しサーバへ送信する - ねこの足跡R
思わず使いたくなる！手軽にWeb開発を楽しめる便利なサービスを厳選してみた！ - paiza times
テキストプロンプトにより、生成塗りつぶしを使用して、画像を修正して美しく仕上げる
【超ザックリ・図解付き解説】JavaScriptのDOM