Web で TikTok やショート動画のような縦スワイプ UI を実装する
はじめに 近年，TikTok や YouTube Shorts，Instagram のリール等で散見される縦動画が流行しています．これらのアプリケーションでは，縦にスワイプをすることで動画が次から次へと流れるようになっており，なかなかに UX が良いです．多くの場合，この UI はネイティブアプリとして実装されますが，Web においても scroll-snap-type プロパティおよび Interaction Observer API を用いることで，簡単に実装することができます． 実装 Vite，TypeScript，React，Emotion を用いて実装します． 縦スワイプでスナップさせる CSS 複数の Content を包含する Wrapper を想定します．全画面で表示させるため，どちらの要素もサイズは 100vw, 100dvh に設定します．Wrapper は overf
Visual Regression Test をローカル環境で導入する｜CyberZ Developer
CyberZ の Webフロントチームでエンジニアをしている山﨑です。現在 CyberZ Webフロントチームでは、サービスの安全性を向上を目指し、テストの拡充を行なっております。その中で Storybook や storycap, reg-cli を使用した Visual Regression Test の導入を行なったため、その実装例をご紹介したいと思います。 Jest と React Testing Library を用いた Integration Test｜CyberZ Developer Visual Regression Test と やりたいことまず、簡単に Visual Regression Test の説明をしたいと思います。Visual Regression Test とは、ある時点での画像の差分を検知し、意図せぬ UI の表示変更が起こっていないかテストするものになり
Regexes Got Good: The History And Future Of Regular Expressions In JavaScript — Smashing Magazine
Although JavaScript regexes used to be underpowered compared to other modern flavors, numerous improvements in recent years mean that’s no longer true. Steven Levithan evaluates the history and present state of regular expressions in JavaScript with tips to make your regexes more readable, maintainable, and resilient. Modern JavaScript regular expressions have come a long way compared to what you
React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化 - ZOZO TECH BLOG
はじめに 2020年新卒入社で、現在ZOZOWEB部所属の武井です。ZOZOTOWNのWebフロントエンド開発を担当しています。私は入社以来オフィスに2度しか出社したことがありませんが、そのうちの1度はスタッフインタビュー記事の撮影のときでした。アートがたくさんある素敵なオフィスですが、それ以降出社できていません。まさか新卒1年目からフルリモート勤務をすると思っていませんでしたが、先輩スタッフが仕組み作りをしてくださっていたおかげで快適に働けています。 さて、本題です。ZOZOTOWNではタイムセール、ショップ限定クーポン、抽選プレゼントなどのキャンペーンを期間限定で実施しています。このキャンペーンをより際立たせるためにキャンペーンページを作成し、ホーム画面やメルマガなどを通じてお客様にお届けしています。しかし、このキャンペーンページの作成が必要になった場合、エンジニアが都度実装しており、
[Gutenberg]リッチテキストのツールバーに独自のツールバーボタンとドロップダウンを追加する方法
import { BlockFormatControls } from '@wordpress/block-editor' import { ToolbarDropdownMenu } from '@wordpress/components' import { applyFormat, removeFormat, } from '@wordpress/rich-text' import classnames from 'classnames' export const CustomToolbarDropdown = props => { const { formatTypeName, // フォーマットタイプ名 (例 : my-plugin/my-custom-format) formatTitle, // フォーマットのタイトル formatClass, // ラップするHTMLタグに挿
![[Gutenberg]リッチテキストのツールバーに独自のツールバーボタンとドロップダウンを追加する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7ce4093566966a4fb5a901a9f7553cb4a2a388cc/height=288;version=1;width=512/https%3A%2F%2Fdigipress.info%2F_wp%2Fwp-content%2Fuploads%2F2022%2F02%2Fcreat-custom-toolbar-popover.png)
社外勉強会への参加は個人のキャリア戦略だけでなく組織が取り組まなければならない課題でもある | Marginalia
引用第7章 越境学習 7.2 越境学習の深層に存在する主要な社会的ニーズ 一般的に人は同じ組織のなかに長くいると、「過剰適応の罠」 や 「能動的惰性」 にとらわれる可能性が高くなるといわれている。ここで 「過剰適応」とは、組織に人が過剰に適応しだすことによるデメリットである (Chao 1988)。また、能動的惰性とは 過去の成功体験にしがみつき、それを永遠に繰り返そうとする個人の状態をさす(松尾2011)。 第3章で論じたような組織社会化の諸力の影響が強ければ強いほど、個人は組織に慣れていく一方で、 ともすれば組織に過剰適応を果たす。自己の組織の特殊性,ステレオタイプ、特有の思考形式を獲得し、 次第に無自覚になり、「文化的無自覚性」の境地に至る。それが進行しだすと、今度は「能動的惰性」 を獲得する。かくして、創造的な仕事を行おうとする個人,自らのキャリアや能力開発に意識的な個人は次第に減
技術めも » Blog Archive » MroongaでMecab
MariaDBにMroongaはバンドルされていますが、 TokenizerとしてMecabを使う際は、少し注意が必要です。 公式には、以下のように書かれていますが、手順を残しておきます。 https://mariadb.com/kb/en/library/mroonga-overview/ 「Tokenise using MeCab. Required Groonga to be buillt with MeCab support.」 なお、OSはCentOS7、MariaDBのバージョンは、10.3.8です。 まずは、バンドルされているMroongaのインストールを見ていきます。 公式（https://mariadb.com/kb/en/library/about-mroonga/）を参考にしています。 １．プラグインのインストール MariaDB [(none)]> show eng
A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() | Codrops
A Practical Introduction to Scroll-Driven Animations with CSS scroll() and view() With just CSS you can add scroll animations that toggle shadows on navbars, reveal images, add scrollytelling, link up carousel elements and much more. Let’s make a CSS scroll animation! No frameworks, no JavaScript. Connect user interaction with real time scroll interaction feedback; helping transition color, positi
Pagefind | Pagefind — Static low-bandwidth search at scale
Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. Pagefind runs after Hugo, Eleventy, Jekyll, Next, Astro, SvelteKit, or any other website framework. The installation process is always the same: Pagefind only requires a folder containing the built static files of yo
デザイントークンって何？｜seya
「デザイントークン」 最近はよく使われている言葉だと思うのですが、意外と日本語での情報がないのでまとめてみました。 W3C の定義実はデザイントークンには W3C という標準化団体でのワーキンググループがあります。 これが絶対の定義と思う必要はないと思いますが、共通の定義としては便利だと思うので引用するとこの W3C では Design tokens are indivisible pieces of a design system such as colors, spacing, typography scale. 訳: デザイントークンとは、色、スペーシング、タイポグラフィのスケールなど、デザインシステムを構成する不可分なピースのことです。 Design Tokens W3C Community Group https://github.com/design-tokens/commun
静的なWEBサイト用にも使えるstorybookのpug環境を作ってみた - Qiita
storybookって色々使い道があると思うのですが、動的なWEBサイト用の情報しか殆どないのでstorybook for htmlを静的WEBサイトでも使えるようなものを作ってみました。 やりたい事が形になったので紹介したいと思います。 gitも公開しているので良かったらお試しください。 DEMO Repository 出来ること ・/stories以下のtree-title.stories.pugを/path/to/tree-titleへ自動追加（日本語も可） ・/stories以下のsassやstylusを自動で読み込み ・パネルにpugとhtmlのソース表示＆コピー ・pugのmixinでコンポーネント作成し、knobsやテストをjsで記述可 ・複数の環境に合わせて設定を変更して構築可 サブの環境として使えます (.stories.)pug + sass,stylus + jque
React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール＆アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった（Web・モバイル問わず）フロント
Why I Won't Use Next.js
You’ve got a new project to work on. Or you’ve got an existing project you’re motivated to upgrade to a more modern approach. Or perhaps you’re dissatisfied with your current modern framework or second-guessing yourself and you’re investigating alternatives. In any case, you’ve got a decision to make. There are lots of “modern” frameworks to choose from. Even if you’re not facing this choice right
【php】正規表現ってそんなに負荷が高いの？（その３） at softelメモ
前回の恐ろしい正規表現をphpで試してみようとしたところ、予想した結果にならなかった。 phpの正規表現に関して、ある設定項目があって、デフォルトでは無茶な処理をさせないようになっていた（php5.2から）。php4でも、何かしらの制限に引っかかるようだ。 では、phpで無茶な正規表現を試す。 (.*)*^ 最後に^（行頭）と書いてあるので、結果としてはどんな文字列にもマッチしないでマッチするのは行頭のみなのだが、マッチするまでにあらゆる組み合わせにトライするので、恐ろしく負荷が高い。 10文字から初めて、1文字ずつ増やしながら30文字まで、所要時間の計測と付随する情報の表示をする。 $t = time(); $s = '123456789012345678901234567890'; for ($i = 10; $i <= 30; ++$i) { $m = microtime(1) -
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
観光に最適！広島市中心部の便利な駐車場約100選【2024年最新スタッフ徹底調査】
21+ Best Headless CMS for Next.js in 2024
GitHub - ranvis/php-mecab: MeCab binding for PHP
5 CSS snippets every front-end developer should know in 2024 | Articles | web.dev
Semantic inline lists
Surprising Facts About New CSS Selectors