ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen

はじめに GWに入り、5日連続のVercelによる新機能の発表が始まりました。早速初日(2023 5/1)からすさまじい機能の発表がありました。 初日に発表されたのは、以下の三つのStorageサービスです。 Vercel Postgres Vercel KV Vercel Blob 今回はこの中のVercel Postgresを実際に使いながら、ClientからServerまで網羅しためっちゃ簡易的なフルスタックなアプリケーションを、実用性の側面も加味してPrisma + Next.jsで作っていこうと思います。

ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理

GitHub Copilotとの単体テストがやばい。ChatGPTが書いてくれるテストもすごい。もうこれらがない時代には戻れないような気がします。 こんにちは。AWS事業本部コンサルティング部に所属している今泉（@bun76235104）です。 みなさんユニットテスト書いてますか？ 昨今AIがダミーデータを書いてくれたり、ユニットテストそのものを書いてくれたりと技術の進歩がすごいですね。 私はリファクタリングが好きですが、リファクタリングをする前に絶対に必要なもの。 そうテストですね。 今回私がテストを後回しにしてしまった以下のOSSについてGitHub CopilotとChatGPTのそれぞれの力を借りながら、テストを書いてみました ※ これは以前私が始めたプロジェクトであり、OSSとして公開されているので学習に使われても問題のないコードです。 なお、GitHub Copilotの料金や

まず、新しいアイデアが提案されると、ステージ0の「Strawman」と呼ばれる段階に入ります。ステージ0のアイデアが価値のある提案として見なされ、大まかな形で問題点や解決策を説明できるようになると、ステージ1の「Proposal」と呼ばれる段階に進みます。そして、提案がある程度まとまって仕様の草案として認められると、ステージ2の「Draft」と呼ばれる段階に上がります。さらに細かいところまで練り上げられて、仕様がほぼ完成した状態になると、ステージ3の「Candidate」の段階になります。最後に、2つ以上のブラウザがその機能を実装していて、ECMAScript の編集者に承認されると、ステージ4の「Finished」と呼ばれる段階になります。 ステージ4に上がった提案は、毎年 6 月のタイミングで ECMAScript の新しいバージョンとしてリリースされます。リリースする際は、ECMAS

ちょっと前に話題になった hotscript の技法の紹介やら, ラムダ計算を TypeScript の型にコンパイルする話やらなんやら. 通常の型レベル関数 TypeScript の型エイリアスはパラメータを取れるので, これは型レベルの関数であるとみなせます. type IsNumber<X> = X extends number ? true : false; type A = IsNumber<42>; // = true 一方でこのようにして定義された関数は第一級ではない, つまり関数そのものを他の関数の引数として渡したりすることができません. type FilterUnion<F, X> = X extends unknown ? (F<X> extends true ? X : never) : never; // ~~~~ // ^ Error: Type 'F' is n

※タイトルの元ネタは以下の作品です。 はじめに この記事は、公開鍵暗号の全体感を正しく理解するためのものです。数学的な部分や具体的なアルゴリズムは説明しません。気になる方は最後に紹介するオススメ書籍をご覧ください。 少し長いですが、図が多いだけで文字数はそこまで多くありません。また、専門的な言葉はなるべく使わないようにしています。 ただしSSHやTLSといった通信プロトコルの名称が登場します。知らない方は、通信内容の暗号化や通信相手の認証（本人確認）をするためのプロトコルだと理解して読み進めてください。 公開鍵暗号の前に：暗号技術とは 公開鍵暗号は暗号技術の一部です。暗号と聞くと、以下のようなものを想像するかもしれません。 これは情報の機密性を守るための「暗号化」という技術ですが、実は「暗号技術」と言った場合にはもっと広い意味を持ちます。まずはこれを受けて入れてください。 念のため補足して

VTeacher所属のSatokoです。 QAエンジニアとフロントエンドエンジニアを兼任しています。 2006年、まだホリエモン率いるライブドア(現LINE)のモバイルチーム(現LINE出澤社長がリーダー)に配属も、同年1月にライブドアショックがあって出社0日で失職。その後、サイバーエージェントやGREEなどを転々としてきたITバブルの残党(ナイスミドル系エンジニア)です😅 1.久しぶりにReactのプロジェクトに参加 リズミカルにキーボードを　タタンッ！　として、

ReactとTypeScriptで、シンプルかつ実用的なChrome拡張機能を開発するための入門書です。 開発のために最低限知っておきたい知識から環境構築の方法、実装で陥りやすいポイントまでを網羅的に解説します。 また、本書を読むことでDeepLのような実践的な翻訳Chrome拡張機能を開発できるようになります。 所要時間： 約2時間 対象者： Reactを少しでも触ったことがある人 【2023/02/20】 初版を公開しました！ 【2024/02/18】 改訂版を公開しました！

はじめにTIG EXU真野です。 積読を消化しようというテーマの、読書感想文連載 の1冊目は、単体テストの考え方/使い方 です。 書籍の基礎情報です 2022年12月28日発売 Unit Testing Principles, Practices, and Patterns の翻訳書。原著は2020年1月14日に発売 テーマ 質の高いテストを行い、ソフトウェアに価値をもたらそう！単体（unit）テストの原則・実践とそのパターン プロジェクトの持続可能な成長を実現するための戦略 単体テストの原則・実践とそのパターン コード例は C# であるものの、どの言語でも適用できる汎用的な内容とのこと 中を見ると、微妙にC#特有ぽいところに1箇所悩みましたが、それ以外はその通り 翻訳者の須田さんは、他にもセキュア・バイ・デザイン: 安全なソフトウェア設計 やOAuth徹底入門 セキュアな認可システムを適

Developers Summit 2023 10-A-4 「フロントエンド開発のためのセキュリティ入門」の発表資料です。 https://event.shoeisha.jp/devsumi/20230209/session/4176/ 「HTTPS化」「CORS」「XSS」「脆弱なライブラリのチェック」について説明しています。

これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。 対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方 これからReactの内部コードを読もうと思っている方 暇な方 Fiberについて まず最初に、Reactのドキュメントを漁っていると度々出現する「Fiber」についてお伝えします。 そもそもFiberとは何か 一部例外はありますが、1個のFiberは1個のコンポーネント（<MyComponent>や<div>など）管理

みなさん、おはようございます！ CARTA fluct エンジニア の なっかー@konsent_nakka です。 CARTA TECH BLOG アドベントカレンダー 12/14ということで、普段DBのロックについてあまり意識したことがない人に向けた実は覚えておきたいロックについての知識をざっとまとめてみました。 とりあえずこれだけ読んでおけば最低限は困らない、もし何か困った時にはあそこで出てきた内容をもう少し深く調べて見るか、というきっかけになれば良いなと思います。 厳密な定義よりも普段DBを扱う中でロックについてあまり意識したことがないような人にもすっと入ってくるように簡単な表現を優先して書いていますがご了承ください。 目次 留意事項 排他ロックと共有ロック トランザクション分離レベル SELECTのロックレベルを変更する 共有ロック: LOCK IN SHARE MODE 排他ロ

ユーザーに届ける価値を徹底的に追求する マーケティングを提供します © Copyright 2022 バズ部. All rights reserved. SEOとは、「Search Engine Optimization」（検索エンジン最適化）という意味で、今の日本においては主にGoogleの検索エンジンで上位に表示されるための一連の施策のことだ。（Yahoo!やBingなどの検索エンジンも対象となる）わかりやすくいえば「自社サイトを1位に表示させるための対策」とも言える。 このページでは、よりビジネスを成長させたい方にSEOを攻略するために必要な具体的な知識とスキルを解説している。 ここで解説している通りに、真剣に取り組んでもらえれば、どのような業種の方でも今までをはるかに上回る流入と、コンバージョンを実現することができるようになるだろう。 現在、思うようにサイトにアクセスが集まらなくて

はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ

どうも、hanetsukiです。 GitHubにはアカウントそれぞれにREADMEを乗せられるリポジトリがついているのはご存知でしょうか？ 以前から簡易的なプロフィールは掲載していたのですが、訪問していただいた方に「おっ！」っと思わせるようなREADMEにしたいと思い更新することにしました。 今回更新するにあたって何を使ったのかというのを忘備録的に残していきます。 これが今回完成したREADME 詳しいソースコードは、リポジトリをご覧ください。 Skill Icons 自分が持っているスキルなどを表示するときに便利。 他にもお気に入りの言語や、今学習の言語という使い方もできそうですね！ 詳しい利用方法は、https://github.com/tandpfun/skill-icons#readme をご覧ください Badge Generator Zennのフォロワー数の記載に利用しています。

はじめに この記事を読んでいるあなたはJWTについて知っているだろうか？JWTは、認証されたユーザを識別するために最も一般的に使用される。JWTは認証サーバから発行されて、クライアント・サーバで消費される。 今回の記事では、Webアプリケーションの認証方法として最も利用されているJWT認証を簡潔に解説する。 本記事の読者の対象 JWT認証について知らない人 JWTのメリット・デメリット、仕組みについて詳しく知りたい人 アプリケーションの認証方法について詳しく知りたい人 JWTとは JSON Web Token(JWT)とは、クライアント・サーバの間で情報を共有するために使われる規格の１つである。JWTには、共有が必要な情報を持つJSONオブジェクトが含まれている。さらに、各JWTはJSONのcontentsがクライアントあるいは悪意のあるパーティによって改ざんされないように、暗号(ハッシュ

VSCodeを使いこなすには、まずはよく使用する操作のショートカットを覚えることです。コードを書くときに便利なショートカットとどのように機能するか視覚的に分かるチートシートを紹介します。 ショートカットはmacOS, Windows, Linux対応で、視覚的にどうなるか分かるので、記憶に残りやすいと思います。

2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less