＜この記事の著者＞ ばんか（bamka） - Tech Team Journal Web制作会社の会社員として働きつつ、個人でブログ／メディアライターとして活動するパラレルワーカー。 iPhone・iPad・Mac・ITツールを用いて人々の生活をより豊かにするための活用術を提供する「デジタルライフブロガー」です。 Web制作に関わる人にとって、すでに公開されているWebサイトというのは非常に重要な勉強材料です。中には「こういった表現、次のプロジェクトで使ってみよう」「こういう見せ方いいなぁ。いつかやってみたい」と、いつか役立てたいサイトもあるでしょう。 そういった「参考サイト」は、自分だけのデータベース化しておくと便利です。私はNotionを使って、自分だけの参考サイト集を作成しています。 【目次】 自分だけの参考サイトギャラリーをNotionで作ろう 自分専用の参考サイトギャラリーを作る

週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス

まえがきアニメーションを多く取り入れたWebサイトが好きかどうかのアンケートを取ると、ネガティブな票が多く占めることがよくありますが、それに関して思うところがあったので「Webサイトにアニメーションは必要あるのか」というテーマで自分の思っていることを言語化してみました。 X (Twitter)で「動くWebサイト　嫌い」で検索 Xでちらっと検索しただけでも動くサイトが嫌い、という方は結構いそうですね。もし「アニメーションはすべて悪」と思っている人がいたらぜひ読んでいただきたいです。 この議論はアプリなどにも言えることですが、私の主なお仕事はWebサイトのフロントエンド実装なので、Webサイトについて書かせていただきます。 また、保険をかけているわけではないですが、私はUI (ユーザーインターフェース) の研究をしている専門家でもないんでもないので、この記事の内容に学術的なものは一切ありませ

IntroductionFor a long time, centering an element within its parent was a surprisingly tricky thing to do. As CSS has evolved, we've been granted more and more tools we can use to solve this problem. These days, we're spoiled for choice! I decided to create this tutorial to help you understand the trade-offs between different approaches, and to give you an arsenal of strategies you can use, to han

はじめに 「eslint-plugin-react の plugin:react/recommended に含まれていないルールにも有効なものがあるよ！みんなで同じようなコンポーネント書いて、レビューを楽にして保守性も上げよう！」という内容の記事です。 この記事では React の関数コンポーネント、TypeScript、Prettier を使っている前提で書いています。そのため、タグの位置調整など Prettier で対応可能なものは Prettier に任せる方針です。 先に結論の .eslintrc.cjs を載せておきます。React 以外の設定は省いています。 { extends: [ "plugin:react/recommended", "plugin:react/jsx-runtime", "plugin:react-hooks/recommended" ], rules:

Appleは長年にわたり、ウェブサイトをiPhoneのホーム画面に追加することでウェブアプリとして使用できる「プログレッシブウェブアプリ」(PWA)と呼ばれる機能を導入していました。しかし、iOS 17.4のベータ版において、PWAのサポートが削除されていることが報告されています。 Did Apple just break Web Apps in iOS 17.4 Beta (EU)? - Open Web Advocacy https://open-web-advocacy.org/blog/did-apple-just-break-web-apps-in-ios17.4-beta-eu/ iOS 17.4 seems to remove web app support in the EU https://9to5mac.com/2024/02/08/ios-17-4-web-app-e

Build software faster in an editor designed for pair-programming with AI

大分時間が経ってしまいましたが、2022/8/31 に開催された stand.fm 主催の TECH STAND #9 GitHub イベントに参加しました。 その際に呟いたやつが今回の記事の内容です 有り難いことに直ぐにフォロー頂きました。 あまり纏まった記事が見当たらなかったので、自分用のメモとしてまとめます。 他のCIにはあったアレ GitHub Actionsを利用する前は、TravisCIやCircleCIを利用していました。 移行してから随分使ってないので、記憶が定かではないのですが という機能が標準であった気がします。 この機能の名前は何と呼ぶのでしょうか？地味だけれども、ないと困るアレですｗ GitHub Actionsのリリース直後にこちらの機能と [ci skip] が使えずに後発なサービスなのにーと不満を覚えていました。 その後にアレの機能を実装したカスタムアクション

Microsoft は、One Engineering System を使用して、Git ブランチおよびリリース フローを中心とした堅実な DevOps プロセスですべての Microsoft 製品を構築および展開するよう努めています。 この記事では、実際の実装、小規模なサービスから大規模なプラットフォーム開発ニーズまでシステムがどのように拡張されるか、さまざまな Microsoft チームでシステムを使用することから得られる教訓に焦点を当てます。 標準化された開発プロセスの採用は野心的な取り組みです。 Microsoft 組織ごとに要件は大きく異なり、組織内のさまざまなチームの要件は規模と複雑さに応じて変化します。 これらのさまざまなニーズに対応するために、Microsoft はトランクベースの分岐戦略を使用して、製品を迅速に開発し、定期的に展開し、変更を運用環境に安全に配信できるように

まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS

発表した場所: https://timeedev.connpass.com/event/299088/ 発表者: https://twitter.com/__hiza__

Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーションにアクセスするか？ スクリーンショットの比較はどのように行うか？比較時の閾値はどのように設定するか？ 比較元のスクリーンショットはどのように用意するか？例えば Amazon S3 などのストレージ や GitHub Actions の actions/cache を使用する場合など コミットハッシュを用いて比較元のスクリーンショットを特定する場合、マージ先のコミットハッシュに紐づくスクリーンショットが存在しない時の対応は？ VRT の結果で差分が出たが、そ

こんにちは。AWS 事業本部 オペレーション部 アカウントチームの chicca です。 一年の計は元旦にありということでタスク管理用のダッシュボードを作ってみました。 作ってみたといっても、You Tube 観てテンプレートをささっとコピペしてきただけです。 まずはこの動画をみた ダッシュボードの作成にあたり sum さんの動画を視聴しました。 概要欄に掲載されているテンプレートを複製して、動画をみながら自分用のダッシュボードを作成しています。 動画を観てから続きを読んでもらえるとわかりやすいと思います。 実際に作成したダッシュボード テンプレートを複製して自分用に作ったものがこちらです。 大きく3つのパートに分かれています。 ①：カテゴリ 各カテゴリごとに子ページを作成しています。子ページには自分用に情報を書いていきます。 ②：to do ダッシュボードの中でメインに使うパートです。

スマートフォン向けにスワイプ処理を実装する機会があったのでメモ。こちらの記事を参考にさせていただきました。 サンプルコード HTML <div id="wrap"> <div class="box"></div> </div> .boxをスワイプで動かすようにします。 CSS #wrap { position: relative; width: 100%; max-width: 318px; } .box { position: absolute; top: 0; left: 0; width: 600px; } 今回は.boxを横に移動させるので、スワイプした距離や方向に応じてleftの値を変更します。 JavaScript $(function() { // 移動する要素の親要素(スワイプ後の位置を確認するのに使用) var swWrap = $('#wrap'); // 移動する要素

TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様

freee、デザインシステム「vibes」を公開　アクセシビリティをはじめとするフロントエンド開発のノウハウが満載 ■マジ価値サマリー（このお知らせでお伝えしたいこと） ・freeeのアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes」を公開します ・あらゆる組織でシステム開発に携わるエンジニアやデザイナーの皆様に、「vibes」を利用してシステムを構築いただく、またはコード等を参照いただくことで、社会全体としてアクセシビリティ向上の取り組みが広がることを目指しています freee株式会社（本社：東京都品川区、CEO：佐々木大輔、以下「freee」）は、freeeがこれまで培ってきたアクセシビリティをはじめとするフロントエンド開発のノウハウが詰まったデザインシステム「vibes（読み：ヴァイブス）」を公開しました。本デザインシステムを公開するこ

高遠 頼@生命科学VTuber(たかとー らい)🧬 🔬 🥼 @takatoh_life 生命科学VTuber。 Ph.D. 博士(理学) 学振DC1、バイオインフォ系IT企業を経て、化学メーカーにて生命科学の研究者として従事。生命科学やデータサイエンスを中心にTwitter, YouTubeで活動しています。EN🇺🇸OK 母上:となみ涼様 @suzu00726 父上:DatA様 @Data_htak takatoh.net 高遠 頼@生命科学VTuber(たかとー らい)🧬 🔬 🥼 @takatoh_life X(Twitter)の一部ユーザーにて外部URL付きポストが表示、通知されない問題が生じています。 現在分かっていることをまとめました。 以下に表示されないURLと表示されるURLをまとめました。 ✅表示されないURL ・Google(YouTube、Googleフォ