Blog をリニューアルするにあたり、今までの Movable Type でテンプレート作って、という手法から、Movable Type は JSON データの書き出しだけ担当させて、フロントエンドは Astro と Tailwind CSS で開発する形に切り替えたので、その概要を簡単にメモ。 この Blog は立ち上げ当初から Movable Type で運用していますが、MT タグを書いて、テンプレートを作って、という一般的な運用っていうんですかね？ それをやめて、Movable Type は記事データの管理と JSON を書き出す役割だけにして、フロントエンドは Astro + Tailwind CSS でリニューアルしました。 面倒だったのでデザインは大きく変えず、ぱっと見はリニューアルしたのがわかりにくい感じになっていますが、Movable Type とフロントエンドを完全に分
LibreOffice CJK問題の第一人者が語る、これまでとこれから 〜LibreOffice Asia Conference 2019 Tokyo基調講演「LibreOffice CJK Bugs, Fixes, and Stories.」レポート〜 オープンソースのオフィスソフトであるLibreOfficeの日本語コミュニティは、LibreOfficeを支援する非営利団体The Document Foundationの全面的な協力の下、2019年5月25日（土）と26日（日）の日程で、「LibreOffice Asia Conference 2019 Tokyo」を開催しました。会場は日本橋・サイボウズ株式会社東京オフィスです。 アジア圏のLibreOfficeコミュニティとビジネスを活性させることを目的とした本イベントは、本年が記念すべき初の開催であり、またLibreOffice
Storybook 5.2
Storybook powers component development for design systems like Shopify Polaris, IBM Carbon, Salesforce Lightning, Auth0 Cosmos, Airbnb Lunar, and more than 25,000 public GitHub projects. Storybook 5.2 streamlines component documentation for all Storybook users. Our goal is to make best practice documentation — like the kind found in the high profile design systems above — easy for all Storybook pr
デザイントークンって何？｜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
ここにきて、奇妙な逆転現象が生じている。 現在、写植の書体をいちばん身近に感じているのは、ひょっとすると、文字の読み書きを覚えて間もない子どもたちかもしれない。 どうしてかというと、他のジャンルに比べてロングセラーが多い子どもの本には、いまでも写植の文字がのこっているから。 その理由を、絵本の編集者の方に訊ねてみたことがある。 話によると、同じロングセラーでも、実用書、文庫の場合は、改訂や新装版にあわせてDTPに変えることが多い。でも、新刊書店で児童書の棚にずっと置かれているような絵本は、つくりなおすタイミングがむずかしいという事情らしい。 世代を超えて長年愛されている『ぐりとぐら』も、そうした「タイミング」が訪れていない名作絵本の一冊だ。 野ねずみの「ぐり」と「ぐら」は、森のなかで大きなたまごを見つけ、カステラをつくることにする。 ふんわりと焼きあがった黄色いカステラに、子どものころ心奪
User interface design is hard. With so many options to choose from regarding layout, spacing, typography, and colour, making design decisions can be overwhelming. When you add usability, accessibility, and psychology to the mix, it gets even harder. Luckily, UI design doesn’t have to be so hard. Over nearly 2 decades working as a product designer, I’ve realised that most of my visual and interacti
WebKit Features in Safari 17.0
Sep 18, 2023 by Jen Simmons and the Safari / WebKit Team Today’s the day for Safari 17.0. It’s now available for iOS 17 and iPadOS 17. [Update September 26th] And now, Safari 17.0 is available for macOS Ventura, and macOS Monterey, and macOS Sonoma. Safari 17.0 is also available in the vision OS Simulator, where you can test your website by downloading the latest beta of Xcode 15, which supports t
「俺にはクールな画面は作れない」 そう思う人もいるかもしれません。 エンジニアが知っておきたい色についてのお話を見ていただいた方はおわかり頂けたことと思いますが、知識で補える部分もたくさんあるんです。 本当の話なんです・・・そう、フォントの話なんです。 ＃私自身はデザイナーではないので、あくまでエンジニアがこれを知ってると便利なんじゃないというレベルのお話です フォントの種類を知る 適切なフォントを選ぶためにはまずフォントの種類を知る必要があります。 専門家からするともっとたくさん分類はあるのかもしれませんが、エンジニア視点（私視点）だと大きく以下の分類があると思っています。 セリフ体 or サンセリフ体 プロポーショナル or モノスペース（等幅） 英字 or 和文 ＃英語、日本語以外の言語対応はした経験がないので他の言語はわかりません・・・ セリフ体 or サンセリフ体 左側がセリフ体
UI Course UX Course LP Course Blog Tools Data Visualization Color Picker Accessible Color Generator Gradient Generator Interactive Typography Tutorial Design Hacks If you’re designing both an iOS and an Android (Material Design) version of an app, this guide is your new best friend 😎. We’re going to cover the most relevant differences between iOS and Android for UX/UI designers. If you’ve created
脳が混乱してしまいそうになる錯視映像トップ10を選出する「The Best Illusion of the Year」の2020年度の結果が発表されました。大賞には錯視研究の第一人者とも呼び名が高い明治大学研究・知財戦略機構の杉原厚吉研究特別教授の「立体版シュレーダー階段図形」が輝いています。 2020 Finalists | Best Illusion of the Year Contest http://illusionoftheyear.com/cat/top-10-finalists/2020/ ◆第1位：立体版シュレーダー階段図形 大賞に輝いた杉浦厚吉教授の作品は、錯視の古典的例として知られる「シュレーダーの階段図形」を立体化したという「見る角度によって上下が変わる」という不思議な階段です。映像が以下。 3D Schröder Staircase - YouTube これが錯視の
Are you using ztext and happy with it? Your kind support keeps open-source JS libraries like this free for others. InitializationThere are multiple ways to use ztext. Pick whichever method is easiest for you. HTML attributesVanilla JavaScriptReact JS NewVue JS New How it worksZtext gives the illusion of volume by creating layers from an HTML element. There's no need to spend hours fiddling with <c
clamp(1.5rem, 2vw + 1rem, 2.25rem); clamp(1.5rem, 2vw + 1rem, 2.25rem); Copy link https://modern-fluid-typography.vercel.app?rootFontSize=16&minSize=24&fluidSize=2&relativeSize=1&maxSize=36
Debugging in CSS means figuring out what might be the problem when you have unexpected layout results. We’ll look at a few categories bugs often fit into, see how we can evaluate the situation, and explore techniques that help prevent these bugs. We’ve all been there, at the end of completing CSS for a layout and — what’s that? Ah! An extra scrollbar! Or maybe an element is an unexpected color. An
まだ完結していないシリーズの途中ではあるのですが、ちょっと早めに自分の備忘録としてまとめておきたかったので先にこちらを書いてしまいました。 相変わらずの文章量なのですが(ちゃんと読むのに15分は確実にかかります)、お時間ある方は読んでいただけると嬉しいです。そして、内容についてはまだ実験段階な部分が多いので、フィードバックを貰えると非常に助かります🙏 1.命名規則とコンポーネントの単位について命名規則とコンポーネントの単位はプロジェクトで使用される技術によって少し状況が変わってくるように思います。 そもそもコンポーネントという概念が開発にほぼ必要ない普通のWebサイトなどであれば、多少実装しにくいと思われるかもしれませんが、あまりデザイナー側が気にする事ではないかなとも思います。 ただ、今回はReact.jsやVue.jsなどのフレームワークを使ったWebアプリケーション/サービス、また
styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる何がしたかったかこういう Chakra UI みたいな書き方がしたかったので、styled-components でやれるかを試したのが今回の記事の主題です。 export default function App() { return ( <VStack spacing={4} w="100vw" h="100vh" px={4} py={8} bgColor={palette.white
This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you fully understand what cascade layers are for, how and why you might choose to use them, the current levels
9 Of The ‘World’s Worst Logos’ Fixed By Graphic Designer Emanuele Abrate
9 Of The ‘World’s Worst Logos’ Fixed By Graphic Designer Emanuele Abrate Emanuele Abrate is a graphic designer from Italy who recently took up an interesting challenge – he decided to give 9 of the ‘world’s worst logos’ complete makeovers. You’ve probably seen some of these logos posted on various meme pages since the dawn of the internet – and the designer finally brought them to the 21st century
Debian 11
On Sat 14 August 2021 with tags bullseye Written by Ana Guerrero Lopez, Laura Arjona Reina and Jean-Pierre Giraud Artwork by Juliette Taka Translations: fr pt-BR We're happy to announce the release of Debian 11, codenamed bullseye! Want to install it? Choose your favourite installation media and read the installation manual. You can also use an official cloud image directly on your cloud provider,
UXエンジニアとアクセシビリティエバンジェリストによる品質と開発速度が担保されたチームのつくりかた | FEATUReS サイバーエージェント公式オウンドメディア
谷 拓樹 (タニ ヒロキ) メディア部門でのフロントエンドエンジニア、UXエンジニア。中小企業向けの事業ベンチャーから、フリーランスでの受託、サイバーエージェントへ。その他講演活動、技術書の執筆もおこなう。 twitter:@hiloki github 桝田 草一 (マスダ ソウイチ) ウェブフロントエンドデベロッパー / アクセシビリティエバンジェリスト エンジニアリング企業のセールスからウェブ業界に転身し、デジパ株式会社でマークアップエンジニア、ウェブディレクターを経験後、2017年1月にサイバーエージェントに入社。生放送プラットフォームサービス「FRESH LIVE」のウェブフロントエンド開発を経て、現在は新規サービスの開発、社内外でのアクセシビリティの啓蒙・推進に従事している。 WAIC（ウェブアクセシビリティ基盤委員会）作業部会2（実装）委員 / #deisui_html_rad
VectorStyler
VectorStyler 1.2, see what is new! For MacOS and Windows. Create illustrations, logos, icons, drawings and typography for screen, print and web The full set of illustration and drawing features available for the Mac and PC, without subscription All the Drawing Tools Use all the drawing tools without subscriptions. VectorStyler provides a complete set of drawing, design and illustration tools neces
The string that contains one graphical unit consists of 5 Unicode scalar values. First, there’s a base character that means a person face palming. By default, the person would have a cartoonish yellow color. The next character is an emoji skintone modifier the changes the color of the person’s skin (and, in practice, also the color of the person’s hair). By default, the gender of the person is und
はじめに テクノロジー戦略本部の酒井です。 私が現在携わっているプロダクトに「デザインシステム」を導入したため、今回はそのことについて話していきたいと思います。ですが、全て触れると長くなってしまうため、今回は導入について話していきます。 はじめに デザインシステムとは 参考記事 背景 導入について スタイルガイドの作成 使用するカラーコードの選定 Typographyのコンポーネント化 使用するアイコンをFigmaで管理 UIコンポーネントの整理 Figmaのマスタコンポーネントの作成・管理 コンポーネントに切り出す基準を定義 まとめ デザインシステムとは 本題に入る前にデザインシステムについてですが、記事がたくさんあるため、ここでは深くは触れません。簡単に言うとUIコンポーネントやスタイルガイドなど「デザインを定義する」ための仕組みのことを指してます。 参考記事 デザインシステムとは何か
Pollenは一貫したスタイルやユーティリティファーストなCSSを設計するためのCSS変数を提供するスタイルシートです。 中身は全てCSS変数のみで構成されており、既に定義付けられていますので、classを変えることなく既存のCSSにも利用する事が可能です。 ファイルはTypography、Colors、Layout、UIの4つに分けられています。既存のWebサイトに導入する事でHTMLに変更を加えることなくスタイルを統一したり管理しやすく再設計する事も出来るのでCSSの最適化に一役買ってくれそうですね。 個人的にもCSS変数を使わない世界はもはや考えられないほど。まだ使った事が無い方はぜひ。 Pollen
The problem with text boxes todayIn a standard text box, there’s almost always extra space above and below the actual text. Because of this, when you use a text box to measure and implement spacing, it ends up larger than you intended. The bigger the line height, the bigger the problem. The example below shows distances between text boxes set to 32px. As you can see, all the vertical spacing is vi
Front-of-the-front-end and back-of-the-front-end web development
Front-of-the-front-end and back-of-the-front-end web development The Great Divide is real, and I’m pleased that the terms “front-of-the-front-end” and “back-of-the-front-end” have gained traction ever since I quipped about them on the Shop Talk Show. A few of my clients have actually moved away from a culture of “we only hire full-stack developers” and have instead adopted the labels “front-of-the
Design for spatial user interfaces - WWDC23 - Videos - Apple Developer
Streaming is available in most browsers, and in the WWDC app. Learn how to design great interfaces for spatial computing apps. We'll share how your existing screen-based knowledge easily translates into creating great experiences for visionOS. Explore guidelines for UI components, materials, and typography and find out how you can design experiences that are familiar, legible, and easy to use. Cha
PWA Night 2020/01/20 pastak.icon Pasta-K こんにちは 自己紹介 Pasta-K Nota Inc エンジニア at 京都 主にGyazoのフロントエンドの面倒を見ています マンガ / クラフトビール / サッカー観戦 過去にこういうトークをしました ウェブアプリケーションがオフラインでも動作できるようにやっていった話 / ServiceWorker for Offline WebApp in MANGA Viewer - Speaker Deck /pastak-pub/はてなにおけるPortals #ChromeDevSummit で はてなのマンガチームのGigaViewerで検証やデモ実装を行ったPeriodic BG SyncやBackground Fetchを組み合わせたブラウザでの雑誌配信の様子 会社・サービス紹介 積極採用中です htt
Safari 13.1 以降では San Francisco の Mono や Rounded な variant とかを CSS で指定できるようになっている - polamjaggy
WWDC20 の "The details of UI typography" という動画をなんとなく見ていたところ偶然気がついた。 developer.apple.com Transcript 的にはこの辺: Now the -apple prefixed version has a standard name: system-ui. And earlier this year, we're bringing a new set of CSS font family names, like ui-rounded, ui-serif and ui-monospace to Apple platforms. そもそも: San Francisco 以降 Apple のシステムフォント群はじわじわ増殖している San Francisco フォントが Apple 製品のシステムフォントになってか
Ten modern layouts in one line of CSS Stay organized with collections Save and categorize content based on your preferences. This post highlights a few powerful lines of CSS that do some serious heavy lifting and help you build robust modern layouts. Modern CSS layouts enable developers to write really meaningful and robust styling rules with just a few keystrokes. The talk above and this subseque
After learning a little bit more about web accessibility last year I had been exploring some of the less common HTML elements, and making changes to this website, like wrapping the text of the posts on this blog in <article> tags and adding a <main> tag in the website’s layout templates (this website is built using Eleventy). I had previously done some work to make sure that <figure> and <figcapti
「砂の雨が降る惑星」をNASAのジェイムズ・ウェッブ宇宙望遠鏡が発見
サイズの割に非常に軽く、密度が小さいことから「わたあめ」に例えられることもあるガス惑星「WASP-107b」には、水滴ではなく砂粒が雨のように降ることが、ジェイムズ・ウェッブ宇宙望遠鏡の観測により判明しました。 SO2, silicate clouds, but no CH4 detected in a warm Neptune | Nature https://www.nature.com/articles/s41586-023-06849-0 James Webb Space Telescope detects water vapour, sulfur dioxide and sand clouds in the atmosphere of a nearby exoplanet - News https://nieuws.kuleuven.be/en/content/2023/jwst
Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is Stripe. Stripe is a company that allows people and businesses to accept payments online and in mobile apps. That doesn't sound like a company that would have an exquisite website design, but look at how Stripe describes themselves on their about page. "We think that buil
Building Panda CSS was one of the most inspiring moments of my career; it reminded me of the period before launching Chakra UI. I knew it would be very "Node" heavy, and I needed to learn more about Abstract Syntax Trees (ASTs). I was familiar with using basic modules like fs, path, and small bits of express to build APIs, but that was about it. Creating a CSS framework that delivers a similar DX
この記事は CSS Advent Calendar 2019 の 20日目の記事です。 Vue Fes Japan 2019 が開催中止になってしまい、大変残念だったのですが... （私は Vue.js 日本ユーザーグループのコアスタッフで、今回は Web サイト制作班として少しコミットしていたのでした） 先日公式サイトのソースコードが無事公開されました そこで、Web サイト制作で得た CSS の知見がとてもためになったので、いくつかご紹介していきたいと思います。 公式サイト： https://vuefes.jp/2019/ GitHub： https://github.com/vuejs-jp/vuefes-2019 2019 の公式サイトも、2018 の公式サイトと同様に、Nuxt.js の静的ファイルの生成機能を使って作成しています。 CSS の構成について normalize.c
Making the web more beautiful, fast, and open through great typography
Welcome to the W3C design system - W3C Design System
This design system documents the styles, components and templates available to use on your website. Find out how to get started. How the front end assets (CSS and JavaScript) are organised and compiled is discussed below. ¶CSS The design system uses Sass - specifically the SCSS syntax) - which is compiled into CSS files. The CSS approach is heavily influenced by Andy Bell's CUBE CSS. This has some
デザインシステムとは？ 簡単にいうと、デザインシステムは、デザインに関することを体系化・構造化したものです。 具体的には、デザインの目的・原則やデザインの基準を定めるVIガイドライン、UIパターンやコンポーネント、ライブラリなどの再利用できるものが含まれます。 そのため、デザインシステムを導入することで、 1つのプロダクトで、200色の白が存在すること や 見た目、機能が同じものを何個も存在することがなくなるため、 大規模なプロダクトやサービスをチームで開発・運用していくのが効率的になります。 また、デザインとコードの両方で一貫性のある見た目にもできるため、 デザインの苦手なエンジニアでも、簡単に、デザインの意図に沿ったUIやクオリティの担保されたUIを作成することができます。 知っておきたいデザインシステム ○ 国内のデザインシステム 国内の企業・組織が公開しているデザインシステムを10
はじめに 本稿は、拙著『タイポグラフィの領域※1』（以下、『領域』）について、その結論部を補足する試みである。 『領域』を執筆した動機は、タイポグラフィという言葉の定義化の必要を痛感したからである。まずこの国では、本来の意味と齟齬をきたす使われ方がなされていると見えたからであり、次に本質的な概念の抽出が、その語を口にする者にとっては必要だろうと考えたことにある。そのためには時代の技術変化に支配される環境下においても一定不変である概念を引き出す努力が不可欠であり、その定義化という作業では歴史を遡らざるを得ないことから、可能な限りの広い渉猟と慎重さが要求される。それに応えられたかはかなり心もとないが、幸運にも発表の機会を得て、ここに四半世紀を迎えようとしている。 『領域』の結論では、「タイポグラフィとは活字書体による言葉の再現・描写である」と示し※2、定義の一例として提案した。 タイポグラフィ
Proportio.app
Tool for creating proportional scales for typography, iconography, spacing, and components in design systems.
Container queries land in stable browsers Stay organized with collections Save and categorize content based on your preferences. This Valentine's day, we're celebrating size container queries and container query units landing in all stable browsers. Container query love is in the air! This Valentine’s day, size container queries and container query units are stable in all modern browsers. With con
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Astro と Tailwind CSS でこの Blog をリニューアルしました
LibreOffice CJK問題の第一人者が語る、これまでとこれから 〜LibreOffice Asia Conference 2019 Tokyo基調講演「LibreOffice CJK Bugs, Fixes, and Stories.」レポート〜 | gihyo.jp
マンガチックの秘密 - 正木香子【タイポグラフィ・ブギー・バック】
16 little UI design rules that make a big impact
エンジニアが知っておきたいフォントについてのお話 - Qiita
iOS vs. Android App UI Design: The Complete Guide
脳が混乱する「錯視映像オブ・ザ・イヤー」の2020年受賞作品が発表される、大賞には日本人が輝く
ztext.js | 3D Typography for the Web
Modern fluid typography editor
A Guide To CSS Debugging — Smashing Magazine
Figmaにおけるコンポーネントとバージョンの管理について考える｜Nao Komura｜note
A Complete Guide to CSS Cascade Layers | CSS-Tricks
It’s not wrong that "🤦🏼♂️".length == 7
デザインシステムを導入してみて(導入編) - バイセル Tech Blog
ユーティリティファーストなCSSを設計するためのCSS変数を提供する・「Pollen」
Leading-Trim: The Future of Digital Typesetting
GyazoでのPWA/WebAPIとの向き合い方 - pastak-pub
Ten modern layouts in one line of CSS | Articles | web.dev
A Blog Post With Every HTML Element
How Stripe Designs Beautiful Websites
Panda CSS - The Origin Story
Vue Fes Japan 2019 公式サイトから学ぶ CSS コーディングの知見 - Qiita
Fonts Knowledge - Google Fonts
【デザインシステム】エンジニアが知っておきたいデザインシステム - Qiita
河野三男「タイポグラフィの領域：補遺」 | ÉKRITS / エクリ
Container queries land in stable browsers | Blog | web.dev