React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
Reactが好きです。 Reactが好きです。コンポーネントを関数として扱うのが好きです。 SolidJSはReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。 コードの比較 React const Counter = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count: ${count}`) }, [count]) return ( <div> <div>{count}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button> </div> ) } const Counter = () => { const [count, setCount] =
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
「なんのために作るか分からへん」と愚痴っていたらPMさんが救ってくれた話 - Qiita
※今回はほぼ実話です。 システム開発会社勤務 プログラマーワイ ワイ「さあ、今日も開発をしていこか」 ワイ「とあるWebサービスの管理画面を作らなアカンのや」 ワイ「今日は、どんな機能を作らなアカンのやったかな」 ワイ「せや、クライアントさんからもらった機能一覧.xlsを見てみよか」 ワイ「あとは、デザインデータも見ながら、詳細設計書でも作っていこか」 ワイ「・・・ふーむ、作るべき機能の一覧は書いてあるんやけど」 ワイ「なんか、やる気が出ぇへんなぁ」 ワイ「仕方ないから、社内のSlackで愚痴っとこか」 ワイ「今のプロジェクト、誰のために何を作ってるのかがイマイチ分からんから」 ワイ「モチベーションが上がらへんなぁ」 ワイ「この管理画面を使って、どんな課題を解決したいのか」 ワイ「どういう風にユーザーさんの業務をうまく回したいのか」 ワイ「そんなんがピンと来てないから、作るべきモノもはっき
君のGitHubリポジトリをもう一段階上のレベルに引き上げよう - Qiita
Original article:https://dev.to/eludadev/take-your-github-repository-to-the-next-level-17ge 以下はEluda( Twitter / Twitter日本語 / GitHub / dev.to )による記事、Take Your Github Repository To The Next Level 🚀️の日本語訳です。 Take Your Github Repository To The Next Level 🚀️ 私はもうずいぶんと長いことGitHubを使っていますが、その過程において私は、完璧なGitHubリポジトリを作るためのガイドを集めてきました。 この記事は、そのガイドたちの集大成です。 それではさっそく始めていきましょう！ Step 0. Make Your Project More D
Braveはフォントを取得できないようにした。いっぽうChromeはフォントを根刮ぎ取得しようとしている。 - Qiita
Braveはフォントを取得できないようにした。いっぽうChromeはフォントを根刮ぎ取得しようとしている。ChromeGoogleSecuritybraveブラウザフィンガープリント JavaScriptから、現在表示されているフォントを取得することが可能です。 仕組みを簡単に説明すると、フォントによって文字の横幅は異なるので、font-familyを変えてみてwidthが変わったらそのフォントがインストールされている、みたいな識別方法です。 つまり、フォントを表示させて、そのフォントが入っているかどうかをチェックすることで、ブラウザフィンガープリントになります。 Braveはフォントを取得できないようにした How Brave defends against font fingerprintingの記事において、Braveはフォントによるフィンガープリント防止について解説しています。 H
WASMのパフォーマンス最適化の勘所と使い所考察 - Qiita
TL;DR JavaScriptとWebAssemblyの間の値渡しには気を使おう（なるべく値のコピーを避けよう）。 JSはとても高速で、単純なループではWASM並の速度が出るので、WASMの使い所はよくよく考えるべき。 はじめに 1000^2級の画像の全ピクセルをループして、（簡単に言うと）RGBA値の最も大きい値を抽出する、という処理をブラウザ上で突然したくなりました。ピクセル数が1,000,000だと、RGBAなので配列長は4,000,000となります。ブラウザで扱いたくないサイズ感です。 ここで、①WASMで高速化、ダメなら②サーバーサイドで計算させる…という算段をして、とりあえずWASMを試してみました。色々チューニングした結果、ブラウザ上で現実的な速度が出ることがわかりました（数十msの世界）。 RGBA値の計算について 本記事では深く説明しませんが、今回やりたい処理は「下記式
Java 18新機能まとめ - Qiita
Java 18が2022/3/22にリリースされました。 https://mail.openjdk.org/pipermail/jdk-dev/2022-March/006458.html 機能的に多くのプログラマに関係ありそうな変更はUTF-8がデフォルトになったくらい。あとは簡単なWebサーバーが入ったことかな。 詳細はこちら JDK 18 Release Notes Java SE 18 Platform JSR 393 OpenJDK JDK 18 GA Release APIドキュメントはこちら Overview (Java SE 18 & JDK 18) 変更点まとめはこちら https://docs.oracle.com/en/java/javase/18/docs/api/new-list.html APIの差分はこちら。 https://cr.openjdk.java.n
RSAに対するフェルマー攻撃 - Qiita
はじめに（Introduction） RSAの鍵ペアの生成方法にミスがあり脆弱性となってしまった実装例があったようです。 元の文献を機械翻訳（ちょっと修正）してみます。 原文のデモをやってみたところ、案外動いたので先にデモを記します。 デモ（Demo） まずは、素数$p$と$q$を生成して$N$を求めるところです。 ※：鍵長が2048bitなので多少時間がかかります。 問題となったライブラリがこのようなロジックであったかは不明ですが、翻訳した資料を参考に作成しています。 import random as rnd import sympy key_length = 2048 distance = 10000 p = 0 q = 0 # 乱数Xを生成する。 X = rnd.randrange(2, pow(2, key_length)) for i in range(distance): #
a needle in a haystack（引数どっちだっけ？） - Qiita
あれ、この引数どっちがどっちだっけ…？と時々なるので、単語の意味をググりました。 needle = 針 haystack = 干し草 ふむ。 これは元々イディオムから来ているようで、 ”a needle in a haystack” =「干し草の中の一本の針」 ⇒ "look for ～"で「望みのない捜し物をする、むだ骨を折る」というニュアンスになるようです。 なるほど～。 語彙力が問われる命名ですねぇ。 でもこれで覚えた！ （参考） A NEEDLE IN A HAYSTACKは何て意味？【イディオムを覚えよう】 strstr 関数の haystack と needle
cabalでGitレポジトリから直接パッケージをインストールする際のダウンロード量を削減するためのworkaround - Qiita
Cabal 2.4以降ではsource-repository-package stanzaによってGitHubなどにあるレポジトリから直接パッケージをインストールできるようになっている。 例えば、cabal.projectファイルに以下のように記述する。 source-repository-package type: git location: https://github.com/brendanhay/amazonka tag: 0ccede621e56fb6f240e4850e205cde82d0e4a4b subdir: lib/amazonka lib/amazonka-core lib/services/amazonka-sts (なお、subdirに複数のディレクトリを指定するには cabal-install >=3.2.0.0 が必要らしい) これによってamazonkaパッ
テスト管理ツール「Qase」でスプレッドシートによるテスト管理を脱却した件 - Qiita
概要 試験工程をスプレッドシートで管理していたがそろそろ脱却したいと思ったので色々探してみました。 すると、同じことを考えている先駆者さんがいらっしゃったので参考にさせていただきました！ 導入に至った経緯 QA体制が未成熟 3名までなら無料で利用できる テスト計画・テスト結果をエクスポートできる 入力項目が整理されているので試験表の質を一定にできる 自動化したテストケースを管理できる 手動テストと自動テストの結果を併せて一覧できる APIにより自動テストの実行結果を自動的に反映することができる etc これは、中々良いツールなんじゃないか！？ ということで導入してみました 実際の導入方法を説明していきます 事前準備 以下からサインアップしてください サインアップ完了後、ダッシュボードに遷移した状態からスタートとします それぞれの設定方法は以下を参照してください 新しいプロジェクトを作成 プ
【個人開発】Twitterで映える！ファンレターを交換・シェアして楽しめるサービス『ご縁箱』をリリースしました✧˖°。 - Qiita
【個人開発】Twitterで映える！ファンレターを交換・シェアして楽しめるサービス『ご縁箱』をリリースしました✧˖°。RubyJavaScriptRailsVue.js個人開発 はじめに... ▼ 皆さんはTwitterを使う上で このように感じたことはありませんか？ 『 今ある ご縁を大切にしたい 』 『 フォロワーさんと感謝の気持ちを伝えたり、交流を深めたい！ 』 『 あの人に話しかけてみたい！ 』 けどきっかけがない..ちょっと億劫かも... こういった問題も楽しみながら解決出来る『 ご縁箱 』というサービスを開発しました。(Rails × Vue.js) ▼ ご縁箱を使うとどうなる？ 実際に使ってみて... まだ話したことがなかったフォロワーさんと話すきっかけになった 自分の率直な気持ちをレターを送って伝えることで喜んでもらえた ご飯の約束ができた（全部焼き肉） ありがたいことにリ
GitHubのMarkdownファイルでMermaid記法がサポートされたので作図まとめてみました。 - Qiita
Mermaid1はコードで作図することができるツールです。 いままではmermaid.jsが必要でしたが、今回GitHubのMarkdownファイルで、Mermaid記法がサポートされました。 それに伴い、Mermaidで表現できる図についてまとめてみました。 なお簡単にMermaidを試す方法として、Live Editor2もあります。 可能な作図一覧 フローチャート（Flowchart） graph TD A[Christmas] -->|Get money| B(Go shopping) B --> C{Let me think} C -->|One| D[Laptop] C -->|Two| E[iPhone] C -->|Three| F[fa:fa-car Car] sequenceDiagram Alice->>+John: Hello John, how are you?
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
仕事でSendGridの安いEssentialsプランを使うのは辞めよう - Qiita
ある日突然メールが送れなくなることがあります。 Microsoft Azureからメール送りたい Microsoft Azureには、何故かメール関連のリソースが全く存在しません。 メールサーバみたいなサービスはありませんし、自力でのSMTP設置も非推奨です。 公式にもSendGridを使えという立場みたいです。 SendGridとは SendGridはメール送信サービスです。 適当にPOSTするだけで、それをメールにして送ってくれるというナイスなサービスです。 curl --request POST \ --url https://api.sendgrid.com/v3/mail/send \ --header "Authorization: Bearer $SENDGRID_API_KEY" \ --header 'Content-Type: application/json' \ -
コンテナ内で大量のゾンビプロセスが発生していた話 - Qiita
ゾンビプロセスの大量発生 シェルを使ってとある処理を実行している最中に大量のゾンビプロセスが発生していることに気づきました。 以下はその時のtopコマンドの出力で、S列が「Z」と表示されているものが全てゾンビプロセスです。 これまでゾンビプロセスの発生を全く考えたことが無かったのですが、コンテナ環境の場合だといわゆる「PID 1 問題」の1つとして認識されています。 PID USER PR NI VIRT RES SHR S %CPU %MEM TIME+ COMMAND 1 root 20 0 2288244 310936 19076 S 0.0 15.3 1:24.64 java 23 root 20 0 18480 2272 1688 S 0.0 0.1 0:00.32 bash 14538 root 20 0 0 0 0 Z 0.0 0.0 0:00.00 bash 14542 r
パスワードの1文字目に「~(チルダ)」を使って痛い目にあった - Qiita
何を言っているんだと思われるかもしれないですが、気軽にパスワードの1文字目に「~」を使わないほうがいいというお話です。 起こった問題 踏み台サーバー経由でサーバーAに接続して作業をしていた時の話です。 いわゆる多段 ssh 接続というもので、リモートワークになってからは結構使われる方も多いかと思います。 サーバーA上で root 権限になろうと sudo su - してパスワードを入力したら Connection to xxx.xxx.yyy.zzz closed. の文字とともにサーバーAから追い出されてしまいました。 なにかの間違いだろうと何度か挑戦していたのですが、結果はサーバーAから切断され踏み台サーバーに戻る羽目に。。。 そのときに入力していたパスワードが ~.xxxxxxxxxx のような ~ から始まるものでした。 調査 ~ って何か意味があったよなーと思ってどう調べようかと
TypeScriptの型推論詳説 - Qiita
TypeScriptはJavaScriptに静的型を追加した言語で、コンパイルエラーを検出することでJavaScript開発をさらに快適・効率的にしてくれるものです。 型システムを備えている言語は、多かれ少なかれ何らかの形で型推論を備えています。大ざっぱに言えば、これは型を明示的に書かなくてもコンパイラがいい感じに型を推測して理解してくれる機能です。型推論は静的型付き言語における花型機能のひとつと言ってもよく、色々な言語がそれぞれの特色を持っています。 この記事ではTypeScriptにおける型推論について詳説します。この記事に書いてあることは、TypeScriptを普段から書いている方ならなんとなく理解している内容が多いと思います。しかし、これらの内容がちゃんと言語化されている記事がいまいち見当たらなかったので今回記事を書くことにしました。 ※ この記事の内容は執筆時点の最新版のType
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Svelteを使う上での小技集 - Qiita
Sassの記法(SCSS構文) - Qiita
