Deno Land Inc.は2024年10月9日、同社が開発するJavaScript/TypeScriptランタイム環境Denoの新バージョンDeno 2.0のリリースをアナウンスした。 Announcing Deno 2 4 years after Deno 1.0, the next generation of JavaScript is ready for production at scale. Deno 2 is out today: 🐢 Fully backwards compatible with Node and npm 📦 Package management and node_modules and package.json 📅 Long term supporthttps://t.co/LsV4D4Too8 pic.twitter.com/F6EI3whmX8
最近のWebサイトやスマホアプリでよく見かけるのが、メッシュグラデーションです。メッシュグラデーションとは複数のポイント間でカラーをさまざまな方向に流し込んだグラデーションで、動きや変化を表現する方法として人気があります。 この美しいメッシュグラデーションをCSSで簡単に作成できるツールを紹介します。メッシュグラデーションはスタティックの動かないものだけでなく、アニメーションで動くメッシュグラデーションも簡単に生成できます。 MSHR MSHRは、CSSで作成されたメッシュグラデーションのコレクションで、個人でも商用でもあらゆるプロジェクトで無料で利用できます。2024年8月現在、282種類のメッシュグラデーションが登録されており、そのまま利用するだけでなく、カスタマイズして独自のメッシュグラデーションを作成することもできます。
対象読者 CSSテンプレートで管理画面開発をしようとしている方 とにかく早く管理画面を作りたい方 管理画面開発の進め方で悩んでいる方 この記事の背景 私はローコードで管理画面を構築できる『クエリア』を作っています。 私自身もエンジニアなので、世の中のエンジニアには、メインのプロダクト開発に100%のリソースを使っていただきたいという思いでクエリアを開発しています。 最近では、お客様も増え、良いフィードバックをいただける機会も増えてきました。 その中で、BootstrapなどのCSSテンプレートを利用するよりも、ローコードで管理画面や社内ツールを開発したほうが便利になる可能性があるということを、もっと多くの方に知っていただきたいと思ったのが、この記事を書こうと思った経緯です。 CSSテンプレートも結局フロントエンドエンジニアの仕事 CSSテンプレートも結局はフロントエンドエンジニアの手を動か
Last fall I participated in a week long programming event called the Wheel Reinvention Jam. The point of the Jam was to revisit existing software systems with fresh eyes. I ended up making a 3D modeler called “ShapeUp”. This post will make more sense if you watch the video demo of ShapeUp before reading more. You can try ShapeUp in your browser. This is what it looks like: Mike Wazowski modeled in
初めてAWSを使うときのセキュリティ覚書〜利用者編〜 | コラム | クラウドソリューション｜サービス｜法人のお客さま｜NTT東日本
しばらくDevelopersIOから出張してクラソルにも投稿します。 今回はこれからAWSを使う方や使い始めた方向けに、AWSセキュリティで絶対に覚えておく必要があることを解説します。 この記事を読んでいただければ、自信を持って安全にAWSを利用し始められます！ 1.前置き〜AWSは安全？〜 みなさんはAWSやクラウドを利用する際のセキュリティに対してどんな印象をもっていますか？ 「なんだかよくわからないけど不安だ」と感じている方、いい感覚です。初めて扱う技術を怖く感じることは正常な感覚です。しかし、過剰に怖がりすぎるのは違いますね。 逆に「AWSやクラウドは安全だからセキュリティを気にせず使って大丈夫だ」と感じた方は少し危険かもしれません。自らの正確な知識と正しい根拠がないまま勝手に安全だと信じることは正常な感覚ではありません。 いずれの場合も、AWSやクラウドについてこれから学習してい
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
BARフロントえんどう #2 「CSS Library / Framework」で発表した資料です。
チェックボックスの indeterminate 状態は将来多分なくなるdate2024.3.14(Thu.)tagsDesignFrontend 近年お手本にしがちなデジタル庁の Design System では定義がされていませんでしたが、「チェックボックスの indeterminate 状態」について考えたところ、多分将来的に無くなるんだろうなと予想を立てました。 第三の状態: indeterminateチェックボックスを使ったフォームが入れ子のとき、子が全て選択されていないことを示す表現として indeterminate が使われることがあります。 基本的にはチェックされているかいないかを表す checked 属性の true false を使いますが、別の属性として indeterminate (未決定状態)属性 の true か false があるため、トライステートとなります。
September 7, 2024 Hacker News Reddit Lobsters RussianI want to provide a smooth experience to my site visitors, so I work on accessibility and ensure it works without JavaScript enabled. I care about page load time because some pages contain large illustrations, so I minify my HTML. But one thing makes turning my blog light as a feather a pain in the ass. The hurdleSee, a major win in traffic redu
ラジアルUIとは、従来のグリッドベースまたは線形のレイアウトとは異なり、要素がサークル・放射状のパターンでレイアウトされたUIです。 このラジアルUI、あらゆる要素をサークル・放射状、または曲線状のパターンでレイアウトできるCSSのフレームワークを紹介します。 Orbit Orbit -GitHub Orbitの特徴 Orbitのデモ Orbitの使い方 Orbitの特徴 Orbitは、サークル・放射状のラジアルUIを実装するために設計された初の汎用CSSフレームワークです。CSSの機能（cos(), sin()など）を使用してサークル・放射状のレイアウトを簡単に実装できます。 ランディングページをはじめ、ナビゲーションに使用したり、ダッシュボードや円形データなどで、ユニークで視覚的に魅力的で直感的なレイアウトを作成できます。 .orbit CSS class CSSの三角関数（sin()
Chrome 123で、divなどのブロック要素で垂直方向の中央にalign-contentプロパティで配置できるようになります
間もなくリリースされるChrome 123（リリース情報）で、ブロックやテーブルレイアウトでのalign-contentプロパティがサポートされます。 これにより、div要素内に簡単に垂直方向の中央に配置できるのは嬉しいニュースです。しかし、既存サイトでalign-contentプロパティをflexやgridコンテナ以外に使用している場合、Chrome 122までは何もしませんでしたが、Chrome 123以降は適用されて異なるレイアウトになってしまう可能性があります。 これは同様に間もなくリリースされるSafari 17.4にも適用されます。 Support for align-content in block and table layouts by Rachel Andrew 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、
CSSでOpenTypeフォントの機能を制御できるようになった結果、欧文ページで font-feature-settings: "dlig"; が指定してあると、日本語に機械翻訳して読もうとした時に合字になって欲しくないところまで合字になってしまう。 「〜になります。」が「〜になり〼。」になる。— りんご🍏夜明けのリモートワーカー (@mstssk) April 17, 2024 本日は晴天なり <div style="font-feature-settings: 'nalt';"> 本日は晴天なり </div> 環境にインストールされているフォント次第だと思うので、手元のスクショも。 ※mac上のChrome。 記事を書いたきっかけのツイート https://twitter.com/yodare_inu_/status/1780431031218343978 参考 font-featu
特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/ScheduledComponent.tsx export function ScheduledComponent({showAt, children}: { showAt: Date; children: React.ReactNode; }) { if (new Date() < showAt) { return null; } else { return children; } } これを Next.js Pages Router などから、以下のようにして使
ノーコード×AIで爆速アプリ開発の新時代！リリースまで可能な『Replit Agent』！ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、私は株式会社ulusageの技術ブログ生成AIです。今回は、Replit Agentというソフトウェア開発を根本から変革するツールをご紹介します。このAIツールは、プログラミングの専門知識を持たない方でもAIを使って簡単にアプリケーションを構築できる、非常に革新的な製品です。 本記事では、Replit Agentの機能、技術背景、導入方法、実際の活用例、競合ツールとの比較、そしてその将来性について、網羅的に解説します。 Replit Agentとは？ Replit Agentは、Replitが開発したクラウドベースのAIアシ
こんにちは、レシピ事業部プロダクト開発グループの渡邉（@taso0096）です。 クックパッドは最近、One Experienceというプロジェクトによって日本版とグローバル版のシステムが統合されました。 どちらのシステムもRailsで実装されているという点は同じですが、統合先となったグローバル版ではHotwireが使われていました*1。そのため、One Experience関連の開発ではHotwireが積極的に活用されています。本記事ではそんなHotwireの多くの機能が使われたデスクトップ版のサイドバーについてご紹介します。 デスクトップ版で表示されるサイドバー ちょっと複雑なサイドバー One Experienceに伴い、グローバル版にもともと存在したUIのまま移行するのではなく、いくつか画面構成の変更を入れる事になりました。特にデスクトップ版においては、自分のコンテンツにより素早く
ジャンプTOON Web アプリケーションの全体像〜採用技術と開発方針〜 | CyberAgent Developers Blog
目次 はじめに Next.js × GraphQL のサーバー間通信 Fastly でのコンテンツ配信とキャッシュ方針 vanilla-extract の採用とスタイリングシステム Chromatic による UI テスト / UI レビュー Datadog でのサービスモニタリング ジャンプTOON の CI/CD リリース戦略とブランチ運用の工夫 おわりに はじめに ジャンプTOON の Web 版（以降、ジャンプTOON Web）の開発を担当している2024年度新卒入社の鏑木 俊樹（かぶらき としき） @tosssssy_ です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON Web では Next.js App Router （v14.2）を採用して開発をしてお
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
2024年、CSSの最新トレンドにおける現状のまとめ、よく使用する新機能やプロパティや疑似クラス、人気のフレームワークや検証環境など
CSSの進化は速く、IEのサポートが終了してさらに速くなりました。現在はエバーグリーンのブラウザ（最新版に自動アップデートするブラウザ）となり、モダンCSSの新機能が今までよりもすぐに使用できるようになっています。 2024年、CSSの現状調査をおこなった結果をまとめた「State of CSS 2024」を紹介します。今年は例年より早いですね。 State of CSS 2024 State of CSS 2024は、State of CSSでおこなわれたアンケートの調査結果（9,704人分）をまとめたものです。 まずは、アンケートに回答された人の属性。 世界中の人がアンケートに参加しており、日本人も参加しています。年齢は30-39才がもっとも多く、性別は男性が多めです。
遠回りしたことは決して無駄にはならない。Vue.jsに魅せられ、OSSをライフワークにした私のキャリア - Findy Engineer Lab
はじめまして、川口（@kazu_pon）です。私はソフトウェアエンジニアとして現在株式会社プレイドで働いています。OSS活動としては、Vue.jsコアチームメンバー、Nuxtエコシステムメンバーであり、Vue.js 日本ユーザグループ、そしてVue Fes Japanというカンファレンスのオーガナイザーをしています。 この記事では、日々の仕事をこなしつつOSSとどう出会い、どのようなOSS活動をしているか、これらの両立をどうやって築いていったのかなど、私のこれまでのソフトウェアエンジニアとしてのキャリアを振り返りつつ紹介します。 プロのソフトウェアエンジニアとして働くということ 始まりはゲームを作ってみたいという想いから 私がソフトウェアやIT業界に興味を持ったのは、幼少期に遊んでいたテレビゲームがきっかけでした。小学校の頃はファミリーコンピュータが全盛期で、ゲームがどうやって作られている
ダイアログやモーダルを表示する時に、コンテンツの上にオーバーレイを使用します。このオーバーレイはコンテンツの上に表示されるように::backdrop疑似要素で最上位レイヤーにするのが簡単です。 先日アップデートされたChrome 122でこの::backdrop疑似要素の値の継承ルールが変更されました。 Changes to CSS ::backdrop inheritance by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 これまでの::backdrop疑似要素 アップデートされた::backdrop疑似要素 これまでの::backdrop疑似要素 フルスクリーンに表示する要素用のAPIを定義するFullscreen APIでは、最上位レイヤーや::backdrop疑
俺なりの最速[要出典]アクセシビリティチェック
最速[要出典]アクセシビリティチェック ナイスなアンサーソング！みなさんもぜひ「俺のアクセシビリティチェック」を書いていただけたら嬉しいです Rikiya Ihara / magi (@magi1125) https://twitter.com/magi1125/status/1832473908928507936 ということで、「俺なりのアクセシビリティチェック」について書いてみます。実はこの「最速アクセシビリティチェックRTA」についてはmagiさんと以前にも話をしていて、お互いの目的や手法の違いを確認していて、それをちゃんと表に出すという意味もあります。 チェックの目的や重視するもの magiさんのチェック手法がWCAGやJISの一定の基準を満たしているかを網羅的に確認してレポートすることを目的としている（ように見える）のと比較すると、私のチェックの目的は開発チームにいち早くどんな問
![俺なりの最速[要出典]アクセシビリティチェック](https://cdn-ak-scissors.b.st-hatena.com/image/square/057a8ecb61ee27ff8ff331de75755aa899b6cda3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--__-75Kxk--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%2525E4%2525BF%2525BA%2525E3%252581%2525AA%2525E3%252582%25258A%2525E3%252581%2525AE%2525E6%25259C%252580%2525E9%252580%25259F%25255B%2525E8%2525A6%252581%2525E5%252587%2525BA%2525E5%252585%2525B8%25255D%2525E3%252582%2525A2%2525E3%252582%2525AF%2525E3%252582%2525BB%2525E3%252582%2525B7%2525E3%252583%252593%2525E3%252583%2525AA%2525E3%252583%252586%2525E3%252582%2525A3%2525E3%252583%252581%2525E3%252582%2525A7%2525E3%252583%252583%2525E3%252582%2525AF%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aymrl%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2cxMEtvem5ETXNrSFdYVkN4dkxvYUdhaGxLNmdOVlB4cnV5eG1YNGc9czI1MC1j%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
２つのJSON文字列の差分をシンタックスハイライト付きで表示したいケースがありました。 Zennでも同じ差分かつシンタックスハイライトができますね。下のようなコードブロックがそうです。 Zennでは行頭に+や-をつけることで差分としてハイライトされるようになっています。 このようなシンタックスハイライトかつ差分ハイライトを、2つのJSON文字列の差分に対して行いたいと思いました。つまり、差分を表示したい箇所に明示的かつ静的にマークしていくのではなく、2つのテキストから動的に差分を計算して差分ハイライトを表示してくれる機能です。 この記事ではその方法を紹介します。 なお、僕がJSONの差分を表示したかったのでJSONで例を出しますが、好きな言語で、なんならプレーンテキストでも応用可能です。好きなだけdiff表示してください。 先出し結論 jsdiffでJSONの差分トークンを取得し、shik
box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない 2024.08.11 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングのカスタマイズに `box-shadow` プロパティを使うことがありますが、ハイコントラストモードではフォーカスリングが表示されない問題があります。この記事では、ハイコントラストモードでフォーカスリングを表示する方法について解説します。 フォーカスリングとは、キーボード操作でフォーカスが当たった要素を視覚的に示すための UI デザインのことです。フォーカスリングはキーボード操作をしているユーザーにとって現在のフォーカス位置を把握するための重要な要素です。このことは WCAG 2.2 の 2.4.7 項目で要求されています。 (レベル AA) キーボード操
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 | レバテックラボ（レバテックLAB）
「State of HTML 2024」でキャッチアップ。HTMLの最新トレンドと注目機能 2025年1月7日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主
CSS Anchor Positioning とは、特定の要素を Anchor（基準）としてツールチップなどの要素の位置を決定する機能の総称です。CSS Anchor Positioning を使用することで、Floating UI のように自動で画面内に表示されるツールチップやコンテキストメニューを実装できます。 ポップオーバーの表示位置を調整する 冒頭の動画で使用されたコードを見てみましょう。ツールチップとして表示される要素はポップオーバー APIを使用しています。 <button popovertarget="menu">Open</button> <div popover id="menu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a>
知っておくと便利なCSSの単位: コンテナクエリに基づく相対単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を解説
CSSでよく使用する単位といえば、px, r(em)あたりでしょうか。CSSはそれら以外にもたくさんの単位が使用できます。 第3弾となる今回はコンテナクエリに基づく単位（cqw, cqh, cqi, cqb, cqmin, cqmaxなど）の便利な使い方を紹介します。 Container query length units -Going beyond pixels and (r)ems in CSS by Brecht De Ruyte 第1弾・第2弾は、下記をご覧ください。 フォントに基づく相対単位（em, rem, cap, ch, ex, ic, lhなど）の便利な使い方を解説 ビューポートに基づく相対単位（vw, vh, lvh, svh, dvh, vb, viなど）の便利な使い方を解説 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
コンテナクエリ（@container）とは、親コンテナ要素に基づいてスタイルを定義できる CSS の機能です。メディアクエリ（@media）では画面全体の幅に応じてスタイルを変更する必要がありましたが、コンテナクエリでは任意の要素に基づいたスタイルを適用できるため、より柔軟なレイアウトの実現が可能です。 .card { display: grid; grid-template-columns: 1fr; } @container (min-width: 600px) { /* カードの親要素の幅が 600px 以上の場合、2 列に変更 */ .card { display: grid; grid-template-columns: 1fr 1fr; } } コンテナクエリを使用してスタイルを適用する場合、コンテナクエリ単位を使用できます。コンテナクエリ単位は、親コンテナ要素に対する相対的な
今回は、前回に引き続き水飲み場攻撃の事例を紹介します。2回目は、2023年にあるメディア関連のWebサイトが悪用された事例を取り上げます。 攻撃の流れ 図1に水飲み場攻撃の流れを示します。改ざんされたWebサイトにアクセスするとLZHファイルがダウンロードされ、LZHファイル内に含まれるLNKファイルを実行すると、マルウェアに感染します。 図1：攻撃の流れ 改ざんされたWebサイトには、図2のようなJavaScriptが埋め込まれており、Webサイトに特定のアカウントでログイン（Basic認証）しているユーザーに対してマルウェアがダウンロードされる仕組みになっていました。 図2：改ざんされたWebサイトに設置されていた不正なコード（1） マルウェアをダウンロードさせるWebページは図3のように、メンテナンス中であるかのようなメッセージが表示され、自動的にLZHファイルがダウンロードされます
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
How Google handles JavaScript throughout the indexing process - Vercel
MERJ and Vercel's research to demystify Google's rendering through empirical evidence. Understanding how search engines crawl, render, and index web pages is crucial for optimizing sites for search engines. Over the years, as search engines like Google change their processes, it’s tough to keep track of what works and doesn’t—especially with client-side JavaScript. We’ve noticed that a number of o
誤解しているかも！ CSSの詳細度について、よくある誤解を解説
CSSの詳細度とは、(0,0,2)や(1,0,0)など3つの数字でスタイルを適用する際の優先度を決めるブラウザのアルゴリズムです。要素に対して複数のCSS宣言があり、そのプロパティや値が競合している場合、詳細度が高いものが優先されます。 このCSSの詳細度について、よくある誤解を紹介します。 Misconceptions about CSS Specificity by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 詳細度の誤解 1: 詳細度は10進数である 詳細度の誤解 2: style属性で詳細度が高くなる 詳細度の誤解 3:!importantで詳細度が高くなる 終わりに はじめに CSSの詳細度（Specificity）、ひいてはカスケード（Cascade）に関する記事が公開される度に、私はと
概要 GitHub Copilot WorkspaceはAIが組み込まれた開発環境。「見えてきたプログラマー不要時代」で有名。テクニカルプレビュー中で、ウェイトリストに申請すると招待が来る。 githubnext.com 巷で言う”仕様書から開発自動化コーディングエージェント”とはちょっと違って、あくまでCopilot WorkspaceはCo-pilotの役割のみで、コーディングするのは自分、と考えると良い。今までブロック単位のコード補完だったものがレポジトリ全体に及んでる、というようなアナロジーだと思う。 自然言語を使用してタスクを指定し、AIが生成したコードの微調整、レビュー、繰り返しをユーザーが行うことができる。タスクの定義をIssueからインポートすると画像も認識する。 特徴 自然言語で目的(Task)、現在値・期待値(Specification)、変更計画(Plan)の各フェー
こんいす！バックエンドエンジニアのogatasoです。 今回は12月8日に開催された ISUCON14 に、私とshirakawaさん、yamakuraさんの3人でチームMirrormanとして参加しました。全員ISUCON未経験の状態から挑戦し、楽しく学びの多い体験になったので、この記事で共有したいと思います。 ISUCONとは？ ISUCON とは「Iikanjini Speed Up Contest」の略で、与えられた遅いWebサービスを制限時間内にどれだけ高速化できるかを競うコンテストです。 パフォーマンス改善を目的にインフラからアプリケーションまで多くのレイヤーに跨る技術知識を要求される総合格闘技的なところが魅力です。 ミラティブはISUCONのスポンサーであり、スポンサー枠が割り当てられていましたが、ISUCON経験者はすでに自分で枠を取っていたため余っており、私たちはmaki
SNSやWebサイトなどを使った予約システムは、近年、ITの知識がなくても簡単に作れるほか、無料で始められるサービスが増えています。 そんな予約システムの導入を考えている飲食店経営者に向けて、無料で簡単に作る方法や導入のポイントを紹介します。導入のメリット・デメリットも解説するので、検討する際の参考にしてみてください。 こんな人におすすめ 飲食店を経営しており、予約の受付・管理を効率化したい人 予約システムの導入を検討しており、無料で始められるサービスについて調べている人 機能やメリット・デメリット、導入の際のポイントについて知りたい人 予約システムを導入する方法 「LINEで予約」を活用する 予約システム作成ツールを使って予約サイトを開設する 自店のホームページに予約フォームを埋め込む 導入する際に見るべきポイント 無料で始められる簡単予約システム作成ツール12選 予約管理や顧客管理が簡
こんにちは。4月にClassiへ新卒で入社した伊森です。 私は4月から8月上旬までの約4ヶ月、Classiのエンジニアとして働くための新卒研修を受けてきました。 今回はその研修期間を経て、大まかな内容の振り返りや身についた考え方を紹介していきます。 入社前の状態 研修内容の概要 ４月 ５・６月 ７・８月上旬 AWS研修 良かったところ 物足りなかったところ QA研修 実際に手を動かすテスト項目の作成課題 「品質が高い」とはどの状態を指す言葉？というディスカッション 万葉カリキュラム 研修プログラム以外にも学んだこと まとめ 入社前の状態 大学生時代はPythonを使用した画像処理を主に勉強しており、これまでWeb上で動くものを開発する世界に踏み込んだことはほとんどありませんでした。 そのため、Webの基本的な概念であるHTMLなどはぼんやりとした理解に留まっており「触ったことはあるがそれで
飲食店を探すときに「地名 + ラーメン」「駅名 + 居酒屋」などで検索すると、上位に食べログのページが表示された経験は誰にでもあるだろう。なぜこんなにも食べログがSEOに強いのか、その理由を探ることで、私たちが運営するWebサイトにも活かせるヒントが得られるだろう。 本記事では、その具体的な手法や応用の方法など、初心者から基本的なSEO対策の知見がある中級者くらいの知識を身につけた人にでも学びがある内容を目指した。 ぜひとも、あなたのサイト運営やSEO改善に役立ててほしい。 1. ユーザーに有益な情報を提供する「仕組みづくり」がある SEO対策のために遠回りに見えて最も近道なのが、ユーザーに価値のあるコンテンツを生み出すことだ。 Google の自動ランキング システムは、検索エンジンでのランキングを上げることではなく、ユーザーにメリットをもたらすことを主な目的として作成された、有用で信頼
UnoCSS を知る、まずは経緯から
👋 はじめに ナイトウ(@engineer_naito)と申します。 今回は CSS フレームワーク Atomic CSS エンジンである UnoCSS について紹介したいと思います。 🧐 想定読者 Tailwind CSS などの CSS フレームワークを利用したことのある開発者であればスラスラ読めると思いますが、初学者の方であっても問題なく読めると思います。 (なぜならばぼく自身が CSS フレームワークを使ったモダンフロントエンド開発の経験がないからです 🙋♂️) 🗾 UnoCSS と日本 UnoCSS は軽量かつ柔軟な Atomic CSS エンジンであり、現在最も注目を集めている CSS ツールの一つです。 人気調査サイトの結果によると、ここ 2, 3 年で確かに人気や知名度が上昇しています。 しかし、日本ではどうでしょうか？ Zenn で「UnoCSS」と検索してみま
本記事は ドワンゴ Advent Calendar 2024 の25日目の記事です🎄 はじめに こんにちは。Webフロントエンドチームの山口です。 この度、鋭意開発しておりました、ZEN大学のWebシラバスを公開しました（以降シラバスと表記）。 公開後、多くのポジティブなご反応を頂いており、大変嬉しい限りです。 さて、本記事ではシラバスの技術面に焦点を当て、全体のアーキテクチャとWebフロントエンドの技術構成についてご紹介します。ぜひお付き合いください。 はじめに シラバスについて アーキテクチャ 技術構成 Next.js（App Router） Panda CSS Radix UI（Primitives） GitHub Actions その他 おわりに We are Hiring シラバスについて syllabus.zen.ac.jp 2025年4月開学の「ZEN大学」の履修科目の概要
New to the world of web performance? Welcome! Here's everything you need to know to master website monitoring, analytics, and diagnostics. Learn how to deliver a fast, joyous experience to all your users. Business Success Making your pages faster isn't just for the web performance geeks in your organization. Site speed affects every business metric you care about – from bounce rate to conversions
食材管理アプリケーションを制作した話
はじめに 私は、情報工学科の大学3年生です。大学からプログラミングにのめり込み、個人開発やハッカソンなどを通して、様々なアプリケーションを開発してきました。現在は、深層学習の学習に没頭しています。 今回は、大学2年次に授業の一環で作成したWebアプリケーション「Navi Cook」を紹介します。前置きとして、開発期間は4ヶ月間です。(平日は、授業などがあり実稼働はもう少し少ない時間でした。) また、市役所から与えられた、いくつかの市の問題の中で「市の燃えるゴミの排出量を減らす」というテーマを選定し、実際に使ってもらえるようなプロダクトを目指して作成しました。 開発の流れ 開発自体は4ヶ月間(後学期中)だったものの、アイデア出しにも4ヶ月程度(前学期中)費やしました。 アイデア出し（4月〜７月） プロジェクトテーマの選定 →「市の燃えるゴミの排出量を減らす」 現状調査 ニーズ調査 前提条件・
Next.jsで素朴なフォームをシンプルに作る
素朴なフォームを作る この記事では、素朴なフォームをNext.jsを使って簡単に（？）作る方法を順を追って解説します。これを読むことでNext.js AppRouterの新しい機能であるServer ActionsやuseFormStateなどの使い方理解が進むはずです。たぶん。 また、今回解説するServer Actionsを中心とした機能を用いれば、従来Reactでフォームを作る時のフロントエンドとバックエンド処理が煩雑になりがちなところを少しはシンプルに作ることができるようなります。ただし「素朴なフォーム」という前提ですが。 前提 Next.js v14.1 Next.js以外の外部ライブラリは使用していません HTMLのモックから まず素朴なフォームをHTMLから組み立てます。これ以上ないくらい素朴ですね。 素朴だ…（CSSのスタイル情報は記事上では消してます） export de
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deno 2.0リリース ―大規模プロダクトにも対応可能なJavaScript環境へ | gihyo.jp
CSSで美しいメッシュグラデーションを作成できる無料ツール、アニメーションで動くメッシュグラデーションも簡単 -MSHR
管理画面開発にCSSテンプレートを使うのはもうやめよう
Making a 3D Modeler, in C, in a Week
チェックボックスの indeterminate 状態は将来多分なくなる - feb19
WebP: The WebPage compression format
UI要素をグリッドではなく、サークル・放射状、曲線状にレイアウトできるCSSのフレームワーク -Orbit
不用意に font-feature-settings を使うと日本語表示がおかしくなる - 果樹園
React Server Components で時限式コンポーネントを作る - mizdra's blog
ちょっと複雑なサイドバーをHotwireで簡単に作りたい - クックパッド開発者ブログ
群雄割拠のCSSフレームワークのトレンドを理解する | レバテックラボ（レバテックLAB）
CSSでオーバーレイのスタイルが期待通りに表示されない、::backdrop疑似要素の変更された使い方
2つのJSONの差分を動的に表示する。シンタックスハイライトもする。powered by shiki
box-shadow で実装されたフォーカスリングはハイコントラストモードで表示されない
ポップアップが画面内に収まらない場合に自動的に表示位置を調整する CSS Anchor Positioning
コンテナ要素に基づく相対的な CSS の単位（cqw, cqh, cqi, cqb, cqmin, cqmax）
近年の水飲み場攻撃事例 Part2 - JPCERT/CC Eyes
HTML attributes vs DOM properties
GitHub Copilot Workspace ファーストインプレッション - laiso
初心者3人でISUCONに参加してめっちゃ楽しめた件 - Mirrativ Tech Blog
無料で簡単に予約システムを作るには？ 導入前に確認すべきポイントやおすすめツール - おなじみ丨近くの店から、なじみの店へ。
24年度新卒エンジニアが研修を終えて - Classi開発者ブログ
なぜ食べログはGoogleによく出てくるのか？ SEO対策を研究してみる。
ZEN大学のWebシラバスを支える技術 - ドワンゴ教育サービス開発者ブログ
Web Performance Guide | SpeedCurve