Tailwind CSSチーム、GitHubスター数2.4万超のUIコンポーネント集「Headless UI」をメジャーアップデート
5月8日、Tailwind LabsはReact用の「Headless UI v2.0」をリリースした。 Headless UIとは、Tailwind CSSベースのUIコンポーネント集である。 Tailwind CSSチーム自身が開発を行っており、GitHubスター数も2.4万を超えるなど、高い人気を博している。 このアップデートは、開発者がより少ないコードでより良い開発体験を実現できるようにするための多数の改善を含んでいる。 主な更新点は以下の通りだ。 組み込みアンカーポジショニングのサポート 新しいチェックボックスコンポーネントの追加 HTMLフォームコンポーネントの拡充 状態検出の向上 コンボボックスリストの仮想化 新しいウェブサイトと改善されたドキュメント 組み込みアンカーポジショニングのサポート Floating UIがHeadless UIに直接統合され、Menu、Popov
クラシックテーマ制作者の私がブロックテーマ制作で悩んだこと | Cherry Pie Web
これからのWordPressの制作の中心となる「ブロックテーマ」 ほぼノーコードで制作するブロックテーマを使った制作手法（FSE：フルサイトエディティング）は、従来のPHPでテンプレートを作成する方法とあまりにも異なっています。 WordPressデフォルトテーマとして初めてのブロックテーマである「Twenty Twenty-Two」が同梱されたWordPress5.9がリリースされたのが2022年1月。 それからすでに2年が経過していますが、未だにチュートリアル的な情報以上のものが少ないのが現状です。 そんな中、クラシックテーマで制作されていた本サイト（Cherry Pie Web）をブロックテーマでリニューアルいたしましたので、制作メモをまとめて記事にいたしました。 ブロックテーマでの制作を始めたいけれど、クラシックテーマに慣れきってしまってどうしようと思っている方に少しでも参考になれ
知れば写真が上手くなる！基本・応用の構図15選と構図を使いこなすコツ | Adobe
「きれいだな」「残しておきたいな」と思った風景を、そのまま切り取って残せる写真。 たくさん写真を撮っていると、あるときふと、どれも同じような写真に見えたり、思い通りのイメージで撮れないと感じたりすることがあります。 そんなときは、まず「構図」を見直してみましょう。 同じ写真でも構図を変えるだけで、写真の雰囲気や印象は大きく変わります。 構図を意識して写真を撮ることで、その写真の中で特に目立たせたい要素が際立ち、作品を通して伝えたいメッセージがより伝わりやすくなるからです。 さらに、構図をたくさん知っておくと、写真撮影の引き出しが増え、目の前の被写体や風景の魅力を引き出しやすくなります。 この記事では、よく使われる構図から応用編まで、15種類の構図を紹介します。 この記事の内容を参考に、表現の幅を広げ、もっと写真撮影を楽しんでくださいね。 まず押さえておきたい10の基本構図 まずは、基本的な
表記揺れ検出ツール「テキストゆれないくん」 - inzkyk.xyz
その他のサンプル: Wikipedia:良質な記事, Wikipedia:長いページ 紹介 「テキストゆれないくん」は文章に含まれる表記揺れを検出するツールです。「コンピュータ」と「コンピューター」、あるいは「全て」と「すべて」といった同じ単語の別表記が使われていないかどうかをチェックできます。 「テキストゆれないくん」は元々このサイト (https://inzkyk.xyz/) の文章校正用に開発されました。機能が成熟してきたので UI を付けて公開します。 このページから手動で使う限り、「テキストゆれないくん」は商用/非商用を問わず自由に使って構いません。「テキストゆれないくん」は無保証で提供されます。 特徴 ウェブブラウザから使える このページをウェブブラウザで開いているなら、「テキストゆれないくん」は既に動いています。このページの最初にあるのは「テキストゆれないくん」を使うための完
中級Git操作
今回の記事の内容はGitHub共同創業者のScott Chacon氏の「Pro Git」と同氏の今年の「So You Think You Know Git」（Gitがわかっているとでも思っているか？）発表をベースにしている。 コンフィグ ここでコンフィグにてデフォルトとして指定して損がないオプションをいくつか紹介します。 git rerere git rerereは"reuse recorded resolution"（記録ずみ解決方法を再利用）の略語になっている。 名の通りマージコンフリクトがどう解消されたかを記録し、次に同じようなコンフリクトが発生した際、同様の解決方法を自動的に適用するためのコマンドです。 また、基本的にデフォルトにしてもときに差し支えないため、ぜひgit config --global rerere.enabled trueを実行してみてください。 git main
企業が避けるべき「8つのダークパターン」と「Cookieバナー実装」、IIJが説明 (1/3)
IIJは、2024年2月7日、ダークパターンやCookie利用における法規制や企業対応をテーマとしたセミナーを開催した。 インターネットが日常生活に必要不可欠で、当たり前に使用するツールとなった現在、消費者は、個人情報を窃取されたり、意図に反した行動を取らされたりしないよう、常に注意しなければいけなくなった。一方で、サイトやサービスを運用する企業側が、プライバシー規制の厳格化と相まって、配慮すべきトピックとなっているのが「ダークパターン」および「Cookieの利用」だ。 本記事では、国内外のダークパターン規制および具体例を紹介するセッションと、ヤマハ発動機やライオンのサイト担当者が登壇したCookieバナー実装がテーマのパネルディスカッションの様子をレポートする。 国内外のダークパターン規制事情、日本でも特定分野やケースで法令違反となることも まずは、「欧米でのダークパターン規制の動向と日
GitHub、「Copilot Workspace」テクニカルプレビューを開始。ほとんど全ての開発工程をAIで自動化
GitHub、「Copilot Workspace」テクニカルプレビューを開始。ほとんど全ての開発工程をAIで自動化 テクニカルプレビューは上記のCopilot Workspaceのページからウェイトリストボタンをクリックして申し込みます。 Copilot Workspaceはほとんど全ての工程を自動化 Copilot Workspaceは、自然言語で書かれたIssue（課題）を基に、Copilotが仕様案と実装計画を示し、コーディングや既存のコードの修正を行い、ビルドをしてエラーがあればデバッグも行うという、プログラミングのほとんど全ての工程をCopilotが自動的に実行してくれる、というものです。 人間は各工程でCopilotから示される内容を必要に応じて修正するか、そのまま見守ることになります。 GitHub CEOのThomas Dohmke（トーマス・ドムケ）氏は、Copilot
より良い Git コミットメッセージを書こう - Qiita
より良いコミットメッセージを残すことは Git を使った開発をする上で重要なことです。優れたコミットメッセージは、それを読んだ人がコードを理解するのに大いに役立ちます。 では、どのようなメッセージが良いもので、どのようなメッセージが悪いものなのでしょうか？ それについて掘り下げていきたいと思います。 基本的な Git Commit Message の書き方 詳しいところは、以下の3サイトを参照してください。特に「How to Write a Git Commit Message」には基本がすべて書かれています。 How to Write a Git Commit Message https://cbea.ms/git-commit/ Gitのコミットメッセージをうまく作成する7つのルール （「How to Write a Git Commit Message」の和訳記事） https://
EVERNOTEの日本法人、エバーノート株式会社が解散 サービス自体は継続 | RTB SQUARE
東京都中央区に拠点を構えるクラウド型のノートツール「EVERNOTE」を提供する日本法人であったエバーノート株式会社は、4月26日の官報にて解散することを発表しました。 同社は、2010年6月23日に設立。初代のVice President of Japanese Operationsは元ソニーの中島健氏が就任するなど話題を呼びました。その後、日本経済新聞社からの出資などもありましたが、近年ではユーザーが伸び悩み、各国で撤退が相次ぐ状況となっていました。 追記 Evernoteは、公式アカウントにて、「日本の Evernote 法人を閉鎖いたしましたことをお知らせします。ただし、日本法人の閉鎖は単に組織再編の一環であり、Evernote のお客様には実質的な影響はございませんのでご安心ください。日本国内のお客様はこれまでと同様に Evernote のご利用が可能です。ご混乱をお招きいたしま
HTML・CSSで実装するかわいいフキダシのアイデア - ICS MEDIA
見出しなどのテキストを目立たせたいときに便利なフキダシ（吹き出し）。 この記事では、HTMLとCSSだけで簡単に実装できる、シンプルなデザインのフキダシをご紹介します。 雑誌やポスターなどで見かける可愛いあしらいをウェブサイトにも取り入れたいと思ったことが、今回のテーマを選んだきっかけです。 とくにフキダシは、少ないコードで表現でき、見出しなどのテキストに華やかな印象を与えられます。 ウェブサイトを制作する際に、ぜひ取り入れてみてください。 また、この記事のほとんどの作例で、CSSの疑似要素『::before』と『::after』を利用しています。 疑似要素を使うと、不要なHTMLタグを増やさずにCSSで装飾できます。 ::before ＝ 選択した要素の最初の子要素として疑似要素を生成 ::after ＝ 選択した要素の最後の子要素として疑似要素を生成 これらは、要素に装飾的な内容を追加
スクロール連動アニメーションの実装例 ｜ TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
中国語キーボードアプリに入力内容を傍受される欠陥あり、Baidu・Samsung・Tencent・Xiaomiなど
スマートフォン向けキーボードアプリの中には、予測変換機能を提供するために入力内容をクラウドに送信するものもあります。トロント大学の研究機関である「Citizen Lab」が中国語のキーボードアプリを分析した結果、9社中8社のアプリにキー入力を傍受できてしまう脆弱(ぜいじゃく)性が含まれていることが明らかになりました。 The not-so-silent type: Vulnerabilities across keyboard apps reveal keystrokes to network eavesdroppers - The Citizen Lab https://citizenlab.ca/2024/04/vulnerabilities-across-keyboard-apps-reveal-keystrokes-to-network-eavesdroppers/ Chinese
ブーム来る？ 「和文バリアブルフォント」の世界
そんな事もあり、4月10日は新しいフォントがいくつか発表された。今年の目玉はなんといっても「和文バリアブルフォント」であろう。 われわれが普段使用するフォントは、同じデザインでも細いもの、太いもの、横が詰まったものなどがそれぞれ個別のフォントとして提供され、1つのファミリーを形成している。 一方バリアブルフォントは、そうした文字の変形を1つのフォントで提供していこうという比較的最近のフォントフォーマットで、米Adobe／米Apple／米Google／米Microsoftが共同開発した。フォントパラメータとして、太さや字幅がバリアブルで変更できるため、従来はファミリーで提供しなければならなかったフォントデータが、1つのフォントで小さく提供できるというメリットがある。 もちろんデザインする側も、細いか太いかの2択ではなく「中間」も選べるし、縦長、横長も選べるので、表現の幅が広がるわけである。た
Docker Desktopの代替となる「Podman Desktop 1.9」リリース。Macでの安定性や性能が大幅に向上したコンテナエンジン「Podman 5.0」を搭載
Red Hatが主導して開発するDocker互換のコンテナエンジンであるPodmanを搭載した、Docker Desktop代替となるGUIツール「Podman Desktop」の最新版「Podman Desktop 1.9」正式版がリリースされました。 Podman Desktopの主な機能 Podman Desktopは、デスクトップアプリケーションのGUIを通じて、コンテナの一覧、検索、実行、終了などの基本的な操作、コンテナイメージのビルド、コンテナレジストリへのコンテナイメージのプッシュやプルなどのライフタイムを通じた管理、ローカルでのKubernetes環境の実現、CPUやストレージの利用量の参照などを手軽に行えるツールです。 さらにDocker Dekstopの拡張機能を取り込むこともできます。 Podman Desktop 1.9の新機能 Podman Desktop 1.9
Tailwind CSSを本気でカスタマイズする方法
2024-04-19に開催されたBARフロントえんどう #2 「CSS Library / Framework」（サイボウズ）での登壇資料です。 イベント → https://cybozu.connpass.com/event/311066/
[初心者向け]スプレッドシート + GAS で ChatGPT API を使ってみた | DevelopersIO
はじめに こんにちは、annotationのあのふじたです。 ChatGPTのAPIを試す機会がなかったため スプレッドシート + GAS を使用してやり取りしてみました。 スプレッドシートにはすでにアドオンで ChatGPT 関数 が用意されており、簡単に利用できますが やり取りした履歴も保存しておきたいのでGASを利用して履歴シートに保存するようにします。 尚、本記事内容は安全性を保証するものではないため、利用する際はご自身で十分検証の上、よろしくお願いいたします。 完成イメージは以下の通りです。 入出力シートのセル 'A1' に質問内容を記述し、送信ボタンを押すと、セル 'B1' に結果が返ってきます。 概要 ChatGPT の APIキー 取得 スプレッドシート上で 入出力シート, 履歴シート と 送信ボタンを作成 Google App Script で ChatGPT APIとや
![[初心者向け]スプレッドシート + GAS で ChatGPT API を使ってみた | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/2b0bf98c901ba636cbebacc15d02492fc4c92abd/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2023%2F03%2Fchatgpt.png)
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
えっ！？まだ色の指定でrgba()関数を使っているの！？ ｜ TAKLOG
Gmailにメールが届かなくなる!? 5月中にやるべき対応策をマンガで教えてください！WACUL安藤健作さんに聞いてきた | Webのコト、教えてホシイの！
PhotoshopのAI機能が進化し、画像全体を生成可能に。そのほかの機能強化も
