横長のテーブル、スマホでどう扱う？見やすくするためのレスポンシブ対応7選｜CRチーム@株式会社メタフェイズ
多くのWebサイトでは、様々なテーブル表現が使われています。 テーブルのメリットは、一覧性を担保しながら他の形式では理解しづらい情報を、全体像を捉えて分かりやすく提示することができる点です。 そのため、製品仕様 / 商品価格 / セミナー情報 / 会社案内といった複数の情報を扱う際には、特に効率的な情報の表現方法です。 ただし、ある程度自由に表現したPC版（Desktop / Laptop）のテーブルを、限られた領域のスマホに組み替える際にどのように表現するかは、見やすさにおいてユーザビリティに少なからず影響してくる部分だと感じます。 近年、レスポンシブWebデザインで構築するWebサイトが多い中で、見やすさを担保するためには、いかにデバイスに適したレイアウトにするかが重要です。 特に、PCに比べて画面幅が狭いスマホで、どのようにレイアウトするか課題になるテーブル表現について、今回7つの方
From Chrome 129 you can use the scrollSnapChange and scrollSnapChanging events from JavaScript. By implementing built-in snap events, the previously invisible snap state will become actionable, at the right time, and always correct. This is not a convenience you had without these events. Before scrollSnapChange, you could use an intersection observer to find what element was crossing the scroll po
Note: 👍 The CSS Working Group has resolved to adopt this proposal, and begin drafting a new specification for CSS Mixins & Functions. Author ¶ Miriam Suzanne (Based heavily on a custom-function proposal by Tab Atkins) Intro ¶ In order to reduce code repetition, ensure consistency across a project, and encourage best practice, authors have often turned to third-party CSS pre-processors (Sass, Less
Ever wanted more different ways to understand what’s going on in a program? Here I catalogue a huge variety of tracing methods you can use for varying types of problems. Tracing has been such a long-standing interest (and job) of mine that some of these will novel and interesting to anyone who reads this. I’ll guarantee it by including 2 novel tracing tools I’ve made and haven’t shared before (loo
UVを扱うためのあらゆる種類のオペレータをカバーすることを目的としたUVエディタ用Blenderアドオン UniV のオペレータには、一見しただけでは想像できないほど多くの機能があります。例えば、Syncの状態、選択モード（Verts、Edge、Face、Island）、押されたCtrl、Shift、Alt（CSA）キーやその組み合わせなどです。 つまり、LMBボタンを押す前にCSAを押すと、オペレータの他のモードが呼び出されます。そして、これらの変更は特定のロジックに従いますが、ほとんどの場合うまくいきます： Ctrl – 変形の場合はカーソルへ、選択の場合は選択解除。 Alt – デフォルトとは根本的に異なる代替操作。 Shift – 個別操作、変形はインプレース、選択はエクステンド。 Quick Snap – 頂点、エッジ中心、面中心によってアイランド（島）やジオメトリ要素をトランス
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
Intro このエントリは、 3rd Party Cookie Advent Calendar の 16 日目である。 3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiita https://qiita.com/advent-calendar/2023/3rd-party-cookie 今日は 3rd Party Cookie の迂回としてトラッキングに用いられた、 Bounce Tracking について解説する。 Bounce Tracking 例として、 X でポスト中のリンクをクリックすると、 t.co というドメインに一旦遷移し、そこでリダイレクトしてから目的の URL に遷移する作りになってる。 このように、「一旦リダイレクトを挟む」のは、X からすれば、 t.co のログを見ることで、誰がどのポストを見て、どのサイトに離脱
Infinite-Scrolling Logos In Flat HTML And Pure CSS — Smashing Magazine
Editor’s Note: This article has been updated with additional accessibility considerations for motion sensitivities. Remember the HTML <marquee> element? It’s deprecated, so it’s not like you’re going to use it when you need some sort of horizontal auto-scrolling feature. That’s where CSS comes in because it has all the tools we need to pull it off. Silvestar Bistrović demonstrates a technique that
How bad are search results? Let's compare Google, Bing, Marginalia, Kagi, Mwmbl, and ChatGPT
Marginalia does relatively well by sometimes providing decent but not great answers and then providing no answers or very obviously irrelevant answers to the questions it can't answer, with a relatively low rate of scams, lower than any other search engine (although, for these queries, ChatGPT returns zero scams and Marginalia returns some). Interestingly, Mwmbl lets users directly edit search res
We are thrilled to announce the release of Quill 2.0! Please check out the announcement post. Major Improvements Quill is now a valid ESM package for better ecosystem (e.g. bundlers) and tree-shaking support Nested Quill support #3590 Improved IME and spell corrector support #3807 Semantic cleanups for TEXT_CHANGE event #3778 History: Record selection in history module #3823 Auto detect scrolling
Background Last year I experienced the all-too-common career burnout. I had a couple of bad projects in a row, yes, but more generally I was disillusioned with the software industry. There seemed to be a disconnection between what I used to like about the job, what I was good at, and what the market wanted to buy from me. I did the usual thing: I slowed down, quit my job, started therapy. I revise
こころグレードアップやキャラクターのこころ変更など、主にモンスターのこころを選択するシーンでスクロールが長い場合にスライドを何度もするのがしんどいので、上から下、もしくは下から上のスクロール移動を素早くしたい このとき、モンスターのこころをたくさん持っていれば持っているほど、モンスターのこころを選択する際のスクロールが縦に長くなっていきます。（上の右画像の「こころ変更」画面） このモンスターのこころリストを上下にスライドさせてスクロールすることになりますが、モンスターのこころがたくさんある状態では、指でなんどもスライドして移動させるのが大変になってしまいます。 目当てのモンスターのこころがある程度下の方にあるとわかっている場合には、指でスライドし続けるのは時間がかかり、じれったいので一気に移動させたいものです。 例えばコスト順に並んでいるモンスターのこころリストの中で、ちょうど真ん中くらい
This is a teenager
It's 1997. Alex is a 13-year-old Hispanic kid being raised by his dad and step-mom. His family's net worth is less than $2,000. And his parents are neither supportive nor involved in his life. When researchers assessed his home and family life, they determined he was in a fairly risky environment. Over the next 25 years, researchers will continue interviewing Alex regularly. He'll be bullied at sc
ComfyUI Examples
ComfyUI Examples This repo contains examples of what is achievable with ComfyUI. All the images in this repo contain metadata which means they can be loaded into ComfyUI with the Load button (or dragged onto the window) to get the full workflow that was used to create the image. A good place to start if you have no idea how any of this works is the: ComfyUI Basic Tutorial VN: All the art is made w
Today, we’re releasing Fuyu-8B with an open license (CC-BY-NC)—we’re excited to see what the community builds on top of it! We also discuss results for Fuyu-Medium (a larger model we’re not releasing) and provide a sneak peek of some capabilities that are exclusive to our internal models. Because this is a raw model release, we have not added further instruction-tuning, postprocessing or sampling
What's New in DevTools (Chrome 118) | Blog | Chrome for Developers
New section for custom properties in Elements > Styles The Elements panel now supports the @property CSS at-rule. It lets you define CSS custom properties explicitly and register them in a stylesheet without running any JavaScript. To inspect your registered custom properties, in Elements > Styles, hover over the property name and see its descriptors in a tooltip. In the tooltip, click the link to
なぜ私の1frはフレックスコンテナをはみ出すのか
CSSのGrid Layoutを書いていて度々悩まされるこんな問題。 1fr で 3 列の等幅な列を作ることがこのレイアウトの意図でしたが、フレックスアイテムのコンテンツが折り返されず、フレックスコンテナを飛び出して横方向のスクロールが発生してしまっています。 レビューでは、minmax(0, 1fr)にしといてねとか、フレックスアイテムの方にmin-width: 0をつけてねとか言って簡単に済ますんですが、こういうのって経験的に知っているだけで、なんでその問題が起きるのか、そしてなんでこの方法で直るのか、といった細かい理由はよく知らなかったのです。 まぁ正直理由なんか知らなくても直るならいいんじゃないか、とも思いますが、会社のフロントエンド雑談会でちょうど話す機会があったので、最新の W3C Candidate Recommendation Draftを見て、以下のようなCSSを書いた時
Twitter formerly known as X, a strange experience. It is the place where only the coolest of kids hang or so they say. The cool kids idle away their time smelling farts and fart like opinions. Sometimes I add my own to the mix but I usually lurk in the corners marinating in the warm miasma. Not all flatulence is created equal. Some, is rather nice, interesting even, and dare I say it can be quite
X(旧Twitter)の投稿に付いたリプライにしおり機能を追加してトップに戻ってしまうことを防ぐChrome拡張機能「Keep Twitter scrool position」を使ってみた
X(旧Twitter)を閲覧している際、投稿へのリプライを確認するとページが一番上まで戻ってしまう不便さを感じた経験がある人もいるはず。「Keep Twitter scrool position」は、そんな不便さを簡単に解消できる、便利なChrome拡張機能です。 Keep Twitter scroll position https://chromewebstore.google.com/detail/ohikllclmilbneljmbnkikjciogdhgfo "Keep Twitter Scroll Position" - browser extension demo - YouTube ◆拡張機能のインストール まずはChromeで拡張機能の配布ページにアクセスし、「Chromeに追加」をクリックします。 「『Keep Twitter scrool position』を追加します
Mastodon 4.2
As Mastodon continues to grow, we’d like to make sure we’re doing all we can to help you connect with your friends and your interests. Most importantly, we want to bring you features that make it much easier to connect with people that matter to you. In this version we overhauled search. The interface for searching is completely new and inspired by the app Ivory—as you type, a popout provides you
2023年9月現在、Universal Analytics（以下、「UA」）からGA4への移行が大分落ち着いてまいりました。 弊社クライアントの多くは活用フェーズに入っており、「最低限の導入は済んだがどのようにGA4のデータを活用したらいいのか？」とご相談をいただきます。 GA4では、以下のイベントを自動収集します。 click ユーザーが現在のドメインから移動するリンクをクリックするたび デフォルトでは、現在のドメインから移動するすべてのリンクに対して離脱クリック イベントが発生します。クロスドメイン測定が設定されたドメインへのリンクで、離脱クリック イベントがトリガーされることはありません。 file_download ユーザーが次のタイプのファイル（通常の拡張子を持つファイル）に移動するリンクをクリックすると記録されます。 ドキュメント テキスト 実行可能ファイル プレゼンテーション
I maintain two builds of the Linux kernel, a linux/arm64 build for gokrazy, my Go appliance platform, which started out on the Raspberry Pi, and then a linux/amd64 one for router7, which runs on PCs. The update process for both of these builds is entirely automated, meaning new Linux kernel releases are automatically tested and merged, but recently the continuous integration testing failed to auto
On April 5th, xkcd released Machine, the 15th annual April Fools project I’ve made with them. It’s a game we’d been dreaming of for years: a giant rube goldberg machine builder in the style of the classic Incredible Machine games, made of a patchwork of machines created by individual xkcd readers. For more details, check out Explain xkcd’s wonderful writeup. This is the story of how we built Machi
Gmail makes it easy to block emails from addresses you're not interested in corresponding with. An overflowing inbox filled with unread emails, spam messages, and annoying notifications can quickly become overwhelming. Luckily, Gmail provides simple tools to help you clean up your inbox and stop unwanted emails from bombarding you. Let's take a closer look at how to stop unwanted emails from findi
ListViewやGridViewにスクロールバーを表示するには、Scrollbarを追加する必要があります。 Scrollbarで対象のリスト系WidgetをWrapするだけです。 ListViewの場合は以下のコードのようなイメージです。 Scrollbar( child: ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return Container( child: Text("${items[index].title}"), ); }, ), ), GridViewの場合も同様なので、ListViewをGridViewに置き換えてもらえればOKです。 筆者の場合は、GroupGridViewというパッケージを使用している箇所で適用しましたが、問題なくスクロールバーが表示されました
I’m extremely pleased to announce the release of Scroll-Driven Animations Debugger, a DevTools extension to visualize and debug Scroll-Driven Animations. ~ Table of Contents Demo Get the extension Backstory Known Issues and Limitations Future Plans Spread the word ~ # Demo To jump right in here’s a video of the extension in action, tested on scroll-driven-animations.style: The extension adds a new
スクロールフェードがユーザブルというよりも気が散るものになるかどうかは、その持続性、応答性、ページ上の要素への控えめな適用といった要素に左右される。このデザインパターンを正しく用いれば、ブランド認知を向上させ、ページの読み込みを最適化し、コンテンツをより理解しやすくすることができる。 Scroll Fading 101 by Sara Ramaswamy on December 8, 2023 日本語版2024年4月11日公開 はじめに スクロールフェードは新しいデザインパターンだ。これは、スクロールによってトリガーされるアニメーションを指し、ユーザーがページ上の特定の地点までスクロールすると、新しい要素やコンテンツがフェードインしたり、フェードアウトするというものである。 動き（つまり、アニメーション）というものは前注意的に処理される。すなわち、ユーザーの目は自動的にアニメーションに引き
Freezing rows in Excel keeps headers visible when scrolling through large spreadsheets. The Freeze Panes tool locks rows in place, so key data doesn't disappear. This guide covers how to freeze top rows or specific rows in Excel. How to Freeze the First Row in Excel To freeze the first row of your spreadsheet in Excel, you can use the Freeze Panes feature. Here's how: In your Excel spreadsheet, he
Google Maps' New Colors Bugging You? Switch to Satellite View
Google Maps' new color scheme has sparked mixed reactions, with some users finding it less appealing and confusing. The interface now appears colder and less human, with gray roads and teal water, and pale mint for parks and open spaces. Google Maps' satellite view provides a clearer, pleasing alternative to the new default. Not fond of Google Maps' new color scheme? We hear you; bright hues and l
ツムのコレクション画面で、マイツムを選択するシーンでスクロールが長い場合にスライドを何度もするのがしんどいので、左右のスクロール移動を素早くしたい ツムツムでマイツムを選択するには、ツムツムコレクション画面でツムの一覧が表示されるので、そこから選ぶことができます。 しかし、ツムの種類は増える一方なので、ツムが増えるとそれだけ横方向のページ数が増え、スクロールに時間がかかります。 スクロールバーのつまみのサイズから、スクロール量が多いことが推測できると思います。 このツムがたくさんある状態で、指でなんどもスライドして移動させるは大変な操作です。 ツムが8個表示される部分の横に白い「〉」の字の矢印を押し続けても自動的にページが移動してくれますが、かなり遅くスクロール量が多い場合には時間がかかってしまいます。 目当てのツムがある程度奥の方にある場合には、指でスライドし続けるのは時間がかかり、じれ
Version 1.92 is now available! Read about the new features and fixes from July. July 2024 (version 1.92) Update 1.92.1: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the July 2024 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights in
Embedding external content on a website in the current enshittocene period is more annoying than ever, so here is a copy-pasteable snippet to embed a youtube video while reducing its tracking and nuisance capabilities as much as possible: <iframe credentialless allowfullscreen referrerpolicy="no-referrer" sandbox="allow-scripts allow-same-origin" allow="accelerometer 'none'; ambient-light-sensor '
DOMDOMトークス #1 about me Pasta-K / @pastak 京都で主にJavaScriptを書いて暮らしています 京都サンガF.C.サポーター Kyoto.jsオーガナイザー Kyoto.js 21の宣伝 https://kyotojs.connpass.com/event/311584/ イタリアのローマのJavaScriptコミュニティRomaJSよりコミュニティマネージャーをされているMatteo Manchiさんが京都に旅行に来られるそうなので、それに合わせて開催します！！！！！MatteoさんにはReact NativeについてとRomaJSやイタリアにおけるJavaScriptコミュニティについてトークをして頂きます！ 良ければ、東京にお住まいの皆さんも観光がてらどうぞ 3月13日なので、まだ桜とか咲いてなくて(桜の時期などのハイシーズンと比べると)空いて
Scheme in Scheme on Wasm in the browser -- Spritely Institute
Hey, folks! Today we want to talk about the wonderful read-eval-print-loop (REPL). Thanks to WebAssembly (Wasm), it's becoming increasingly common for programming language websites to embed a REPL in which passersby can easily evaluate code and get a feel for the language without having to install anything on their computer. We'd like to do the same thing for our language of choice, Guile Scheme,
A lot of new CSS features have shipped in the last years, but actual usage is still low. While there are many different reasons for the slow adoption, I think one of the biggest barriers are our own brains. New feature fatigue Permalink to “New feature fatigue” #Right now, we’re in the middle of a real renai-css-ance (the C is silent). It’s a great time to write CSS, but it can also feel overwhelm
I have been making my products statically linked over the past few days. This post presents why and how to statically link your Haskell executables and collects a mapping from obscure error to unexpected fixes. This work would not have been possible without the many-year-long effort of people like nh2. This issue on GitHub is a good summary of what went into making this possible. Why statically li
The Amiga was a spectacle of graphics and sound when it debuted in 1985. While it can trivially display colorful images like in the above example, doing so in the context of a game engine presents a lot of unique challenges. If you haven't seen the gameplay proof-of-concept video for Magicore Anomala, you can check it out here. Challenge 1: The RAM requirementsA run-of-the-mill Amiga 500 has 512kb
Today, we're thrilled to announce that this very website is now open source! We invite you to explore and learn from the source code and maybe even consider contributing. Why we are open sourcing Over 2 years ago Remix the framework went open source. For 10 years now Ryan and Michael have been working on open source software. Even reactrouter.com is a public repo. Needless to say, we're big believ
For professionals, LinkedIn is the only leader in the social media domain. The reason is that even if we call it social media, it’s not just that. It’s a social media for professionals. However, as professionals, how to use LinkedIn effectively for our objectives is essential. Setting Objectives for Effective Use of LinkedIn Effectivity only comes with objectivity. The first step is to realize the
GitHub - dream-num/univer: Univer is an open-source alternative to Google Sheets, Slides, and Docs
📈 Univer is designed to support spreadsheets, documents and presentation. ⚙️ Univer is easily embeddable, allowing seamless integration into your applications. 🎇 Univer is powerful, offering a wide range of features including formulas, conditional formatting, data validation, filtering, collaborative editing, printing, import & export and more features on the horizon. 🔌 Univer is highly extensi
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Scroll Snap Events | Chrome for Developers
CSS Mixins & Functions Explainer
All my favorite tracing tools: eBPF, QEMU, Perfetto, new ones I built and more - Tristan Hume
UniV v1.2 - シンプルかつ便利なUV編集ツールを多数搭載したオープンソースBlenderアドオン！無料入手可能！
3PCA 16 日目: Bounce Tracking | blog.jxck.io
Release Version 2.0.0 · slab/quill
Reclaiming the Web with a Personal Reader
ドラクエウォークでモンスターのこころを選択するシーンなどのスクロールでサクサク移動したい
Fuyu-8B: A Multimodal Architecture for AI Agents
Can you convert a video to pure css?
GA4で実装すべきおすすめのイベントを紹介 | 株式会社プリンシプル
Minimal Linux Bootloader debugging story 🐞
Development notes from xkcd's "Machine"
How to Block Emails on Gmail
【Flutter】ListViewなどにスクロールバーを表示させる方法
Scroll-Driven Animations Debugger (DevTools Extension)
スクロールフェードの基礎
How to Freeze a Row in Excel
ツムツムのキャラクター選択のスクロールをサクサク移動したい
Visual Studio Code July 2024
Youtube video embedding harm reduction
フルページスクリーンショットとDOMとCSSと - pastak-pub
Old Dogs, new CSS Tricks
CS SYD - Getting your Haskell executable statically linked with Nix
Coding the anime "woosh" screen on Amiga
Open Sourcing the Remix Website
How to Use LinkedIn Effectively with Setting Objectives