The Largest Library of Open-Source UI elementsThe Largest Library of Open-Source UICommunity-built library of UI elements. Copy as HTML/CSS, Tailwind, React and Figma.
Wasp
app todoApp { title: "ToDo App", // visible in the browser tab auth: { // full-stack auth out-of-the-box userEntity: User, methods: { google: {}, gitHub: {}, email: {...} } } } route RootRoute { path: "/", to: MainPage } page MainPage { authRequired: true, // Limit access to logged in users. component: import Main from "@client/Main.tsx" // Your React code. } query getTasks { fn: import { getTasks
Usability Guidelines For Better Carousels UX — Smashing Magazine
In this series of articles, we highlight design patterns and techniques to design better interfaces. You can find more examples in “Smart Interface Design Patterns”, a 10h-video course with 100s of hand-picked examples, curated by Vitaly. Carousels don’t have a good reputation, and rightfully so. They have plenty of accessibility issues, they often exhibit low click-through rates, can be very disr
A taste of pavex, an upcoming Rust web framework | Luca Palmieri
A taste of pavex, an upcoming Rust web framework December 24, 2022 2615 words 14 min TL;DR Earlier this year, I started working on a new web framework for Rust: pavex. The goal is simple: great ergonomics and high performance - no sacrifices. As easy to use as tide, Rails or ASP.NET Core. As fast as a handwritten solution built directly on top of raw hyper. I've been working on it for a few months
ナンバー・ナイン
約3年ぶりにこのウェブサイトをリデザインした。Gitの履歴が整理されていないうえ記憶も定かではないが、おそらく9代目のテーマのはず。書体選定やタイポグラフィとグリッドの設計、文書構造などについて解説してみたい。 本文書体は筑紫明朝のLBで、キャプションや小見出しは筑紫ゴシック。明朝体は横画が細いため、書体によってはスクリーンでかすれて読みづらくなってしまうことがある。とくにスマホやタブレットではサブピクセル・レンダリングの特性上、その傾向がより顕著だ。しかしこの筑紫明朝のLBというスタイルは全体的にストロークが太めにデザインされていることもあり、スクリーンにおいても可読性が高いと考え、本文書体として採用した。 本文の文字サイズは17.067px、行送り32pxで、これがページを構成するグリッドの基本単位となっている。各要素の文字サイズは本文を中心に調和数列を構成するよう設計していて、タイト
ウェブアクセシビリティ導入ガイドブック｜デジタル庁
デジタル庁では「誰一人取り残されない、人に優しいデジタル化」を実現するため、継続的に「ウェブアクセシビリティ」の向上に取り組んでいます。この度、ウェブアクセシビリティに初めて取り組む行政官の方や事業者向けに、ウェブアクセシビリティの考え方、取り組み方のポイントを解説する、ゼロから学ぶ初心者向けのガイドブックを公開します。 優しいサービスのつくり手になる一助として、ぜひご活用ください。 公開の背景ウェブアクセシビリティの向上に取り組むには、非常に専門的な複数の規格とガイドラインをそれぞれ確認する必要があります。そのため、適切なやり方がわからないままに、現在は間違っている対応の踏襲、不要・過剰な対応、不適切な対応をしてしまうことがあります。ウェブサイトだけではなく、申請・手続等のデジタルサービスの重要性が増す中で、最新の技術動向を踏まえた、初心者が学習できる行政機関向けの研修資料が不足していま
Landings - Landing Page Examples
Discover hundreds of landing pages created by leading companies for your design inspiration.
Components
Other names: Arrow toggle, Collapse, Collapsible sections, Collapsible, Details, Disclosure, Expandable, Expander, ShowyHideyThing An accordion is a vertical stack of interactive headings used to toggle the display of further information; each item can be 'collapsed' with just a short label visible or 'expanded' to show the full content.
Snowflake：誰もが「検閲回避」を支援できるブラウザ拡張 | p2ptk[.]org
Snowflake：誰もが「検閲回避」を支援できるブラウザ拡張投稿者: heatwave_p2p 投稿日: 2022/10/62022/10/6 Electronic Frontier Foundation オニオンルータのTorは、いまでも最も強力な検閲回避技術の1つである。日々、数百万の人々がTorネットワークを利用し、監視や検閲に怯えることなくインターネットにアクセスしている。 たいていはTor Browserをダウンロードし、リレーに接続することでTorネットワークに参加できる。だが、Torネットワークへの直接アクセスを遮断しているイランやロシアなどの国ではそうはいかない。その場合、国家ファイアウォールを回避するために、いわゆる「Torブリッジ（Tor Bridges）」を使わなければならない。数万の人々が検閲や国・地域の制限を回避するために定期的にこのブリッジを使用している。 も
![Snowflake：誰もが「検閲回避」を支援できるブラウザ拡張 | p2ptk[.]org](https://cdn-ak-scissors.b.st-hatena.com/image/square/9b5876bcfe4d5bb8d8485e802ff1c8bb561a097e/height=288;version=1;width=512/https%3A%2F%2Fp2ptk.org%2Fwp-content%2Fuploads%2F2022%2F10%2Fsnowflake-tor.png)
The 2022 Web Almanac
Web Almanac HTTP Archive’s annual state of the web report Our mission is to combine the raw stats and trends of the HTTP Archive with the expertise of the web community. The Web Almanac is a comprehensive report on the state of the web, backed by real data and trusted web experts. The 2022 edition is comprised of 23 chapters spanning aspects of page content, user experience, publishing, and distri
Testing Web Design Color Contrast | Articles | web.dev
A higher contrast ratio is scored with a higher number, like 4.5 or 7 instead of 3. To get more familiar with the scoring table, check out Polypane's Contrast Checker. Which of these color pairings do you feel contrast more? Testing contrast between colors So, now that we know what we’re looking for, how do we test this? Here are three free tools to assist you in inspecting, correcting and measuri
GitHub - myles/awesome-static-generators: A curated list of static web site generators.
11ty - Eleventy is a simpler static site generator. - #JavaScript #Node.js ABlog - A Sphinx extension that converts any documentation or personal website project into a full-fledged blog. - #Python Adduce - A versatile static site generator that handles both blogs and standard pages. - #Rust Ata's SSG - A PHP-based blog-aware vanilla-HTML static site generator for GitHub Pages with markdown suppor
I Regret My $46k Website Redesign
Two years ago, I created a website for my business. By combining my terrible design skills with a decent-looking template, I created a site that looked okay. I told myself that if the business took off, I’d hire a real designer to make it look professional. TinyPilot website, before design changes A year later, the business was generating $45k/month in revenue, but my website still looked like a c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Awwwards - Website Awards - Best Web Design Trends
Cargo
Home - Styx Static Site Generator
Okapi - A micro web framework for Haskell
Typography Inspiration
GitHub - poem-web/poem: A full-featured and easy-to-use web framework with the Rust programming language.
37 Easy Ways to Spice Up Your UI Designs