Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
spark-joy
✨😂 2000+ ways to add design flair, user delight, and whimsy to your product.
https://github.com/swyxio/spark-joy
- wickedblocks
- Bootstrap
- Foundation
- Blaze UI
- PatternFly
- UIKit
- Numl - A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System
- Bonsai CSS
- Tailwindcss
- Weightless
- Shoelace
- Spectre.css
- 2014 HN
- 100 bytes of css to look great nearly everywhere
- NES.css - style(8bit-like) CSS Framework.
- PSone.css
- LaTeX.css
- React95
- 98.css
- Office 97 clipart in svg format
- XP.css
- 7.css
- System.css - inspired UI
- Puppertino
- Commodore 64 CSS
- BOOTSTRA.386
- a2k
- Text UI CSS
- New Dawn
- Geocities Bootstrap theme
- Metalmorphism - quality metallic UI kit
- consider not using one
- Chris Coyier comments
- Recent comparison/discussion
- Radix UI
- Mantine
- Double your whitespace
- Tailwind's breakpoints
- github
- System Font Stacks
- what are these?
- VS Code Autocomplete - family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
- `font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif;`
- `font-family: ‘system-ui’, sans-serif;`
- 'system-ui' generic font family is new, standardizing name across Safari, Firefox and Blink
- StackOverflow almost-system-font stack
- Sanitize.css
- Some systems come with good premium fonts - Apple OSes have `“avenir next”, “avenir”, “proxima-nova”`
- Modern Font Stacks - [discussion](https://news.ycombinator.com/item?id=35168652)
- `Freight Text` - garamond), [`PT Serif`](https://fonts.google.com/specimen/PT+Serif)
- `Proxima Soft`
- `Freight Sans` - nova)
- `DIN`
- discussion
- 14 free programming fonts
- use a Uniwidth font (not monospace) for interface design
- fashions/trends
- @edadams
- see Harry Roberts on Google Font loading perf - you should [self host this](https://wicki.io/posts/2020-11-goodbye-google-fonts/))
- 40 best google fonts by Typewolf
- 50 selections of google fonts
- Noto Sans
- Fira Sans - related to [Fira Code](https://github.com/tonsky/FiraCode) for devvy stuff
- Raleway
- Open Sans
- Recursive - 1 variable font that can handle both monospace and UI usecases, very versatile
- Erik Kennedy picks from these
- Lato
- Libre Franklin
- IBM Plex Sans - example: https://thesephist.com/posts/inc/
- Clear Sans
- Atkinson Hyperlegible
- Inter
- Jetbrains Mono - Monospace font for devvy stuff
- by Gontijo
- Steve Schoger uses it
- Font variants and oldstyle numbers
- example
- 6 ways to justify font choices in your designs
- statistical data on font usage
- Dank Mono
- Harry Roberts
- Google Fonts strategy
- may be good
- doesnt like it
- see Kilian Valkhof
- Note on the `ch` unit not being EXACTLY 60 chars
- https://hottips.imgix.net/2020/07/044-tracking-animation.gif
- Example from Steve Schoger
- `clamp` - size: clamp(1.125rem, 1rem + 2vw, 1.5rem)`
- CSS Tricks - size: clamp(2rem, calc(2rem + 1.2vw), 3rem);`
- `font-size: calc(1rem + 2px + ((100vw - 550px) / 250))` - you can [fit text to screen width](https://twitter.com/shshaw/status/1240647643388395521?s=20)
- Inter/Tailwind font-size combo
- BAD, SLOW fontsize calc
- Sara Soueidan - size: calc(16px + .3vw);`
- Complete font-size notes
- explained - US/docs/Web/CSS/font-smooth)
- FlowType.js
- FitText
- Majuscule
- leading-trim
- DO NOT OVERUSE IT.
- Examples
- Never use black
- more complete primer on color personalities
- yellowish palette
- Adam Wathan
- filters here
- darker/lighter color variations
- chroma.js color palette helper
- HN
- HSLuv
- example - gradients/) in future.
- the "gray zone" problem
- argyleink - You can [really take this to the extreme](https://twitter.com/argyleink/status/1216815958917992450?s=20)!
- A Beginner’s Guide to Applying Color in UI Design
- Sarah Drasner on Color
- Louisa Barret on Color
- Erik Kennedy on HSB
- Erik Kennedy on color variations
- JustinMezzell on Color - advanced stuff on picking color tone/temperature. [Basic version by Steve Schoger](https://twitter.com/steveschoger/status/1502318105124646924)
- Justin Baker on Color Theory
- Convertkit on Color Theory
- Josh Comeau on Color Palettes
- Stripe - Designing accessible color systems
- How to do Dark Mode right
- Inventorying and naming a Color Palette at UXPin
- Reasoning about Color
- Refactoring UI on Building Your Color Palette
- Numeric systems of color palettes explained
- Monochromatic color scheme guide
- Canva's color wheel has a color theory guide
- history of primary colors
- RGM to Lab color space math
- Teej's thread
- Color Use Guidelines for Data Representation. Cynthia Brewer. Proc. Section on Statistical Graphics, American Statistical Association, pp. 55-60, 1999. Color Scheme Explorer.
- How to pick more beautiful colors for your data visualizations. Lisa Charlotte Rost
- Color Use Guidelines for Data Representation - Cynthia A. Brewer
- How to pick the least wrong colors - An algorithm for creating color palettes for data visualization - ([HN](https://news.ycombinator.com/item?id=31639009))
- Paul Tol's INTRODUCTION TO COLOUR SCHEMES
- How to pick more beautiful colors for your data visualizations
- D3 Color scales
- Colorbrewer schemes
- Matplotlib colormaps
- Storytelling with Data
- Art + Data: A Collection of Tableau Dashboards
- A Dictionary of Color Combinations
- Visualize This: The FlowingData Guide to Design, Visualization, and Statistics
- Somewhere Over the Rainbow: An Empirical Assessment of Quantitative Colormaps. Yang Liu, Jeffrey Heer. ACM CHI 2018.
- Colorgorical: Creating Discriminable and Preferable Color Palettes for Information Visualization. Connor Gramazio, David Laidlaw & Karen Schloss. IEEE Transactions on Visualization and Computer Graphics. 2017.
- https://philcoffman.com/
- https://css-tricks.com/
- https://hottips.imgix.net/2020/07/063-burst.jpg?w=1200&auto=compress
- True Grit Texture Supply
- now native in iOS/macOS
- How to Favicon in 2021
- the 6 favicon types you need
- Real Favicon generator - pop in an image, get back a favicon! The most comprehensive one for all platforms (Windows, iOS, Android)
- Favicon.io - Generate a favicon from text, from an image, or from an emoji. Download in .ico and .png formats
- FontIcon - Generate favicons and images from Font Awesome icons
- Favicon Generator - another one
- SVG Favicon maker - supports emojis and 2 letter favicons with custom fonts
- icon accessibility - using-icon-fonts/)
- Aria roles
- Feather Icons
- Lucide
- rauchg feature
- OK without attribution, don't sell it
- Free Fundamentals of Icon design in 1 hour course by MDS
- Glide Apps
- more from Simon
- How to Draw Architecture Diagrams
- shifted - has [VS Code extension](https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio)
- Microsoft Visio
- see hn thread
- Databasediagram.com – Private, Text to Entity-Relationship Diagram Tool
- Mocodo - flavored ERD, aka Merise MCD, where the layout is constrained to a grid
- Screenstab
- Facebook Design Devices
- Shotsnapp
- Device Mock-Up Inspiration
- Lstore Graphics
- Creative Market
- Pika
- HN discussion
- list
- NASA collection
- story
- see demo
- niche tip on tooltips js perf
- everything with an `id`
- A table with both a sticky header and a sticky first column
- React-Designer
- Folding the DOM
- Variable Fonts by Mandy
- mentioned here
- Codepen
- 2min video
- Gooey Effect with SVG and Filters
- SVG filters
- Backdrop Filters and Multiple Inner Shadows
- Swyx CSS Filter toy
- CSS motion blur on css tricks
- Instagram filters created with CSS filters, by Una
- CSS only hover effect with Headers
- SVG iPhone mock and animated notification transition
- codepen
- use Background-origin + transparent borders
- `background-blend-mode` color-burn, lighten, multiply are cool
- Codepen
- really good for SVG icons, with hover
- css tricks
- Codepen
- Photopea
- Pagereview.io
- more alternatives
- Curtains.js - enhanced-drag-slider-tutorial-with-curtains-js-part-3))
- Polygonjs - source, node-based WebGL design tool, to create 3D scenes procedurally.
- Httpster
- Minimal Gallery
- Godly.website
- Hoverstat.es
- Really Good Emails
- SaaSFrame
- Dribbble
- Product Hunt
- Landingfolio
- App Fuel
- Refero
- Read.cv
- Codrops
- Graphext collection
- Data.world
- GitHub Activity data - datasets/github-on-bigquery-analyze-all-the-open-source-code)) This 3TB+ dataset comprises the largest released source of GitHub activity to date. It contains a full snapshot of the content of more than 2.8 million open source GitHub repositories including more than 145 million unique commits, over 2 billion different file paths, and the contents of the latest revision for 163 million files, all of which are searchable with regular expressions.
- Los Alamos cybersecurity data
- Numerai v4 - 1191 features and targets for the entire history of the @numerai tournament. 2.4 million rows and 574 eras. One of the hardest tabular dataset competitions on the planet.
- Enron email - got-enron-mail/))
- ICIJ Offshore Leaks db
- GDELT Project
- Hex's Horoscope
- BigQuery global daily weather data
- 241mb - [writeups](https://medialab.github.io/bhht-datascape/), [globe viz](https://tjukanovt.github.io/notable-people)
- SF Tree dataset
- NYC taxi dataset - up and drop-off dates/times, pick-up and drop-off locations, trip distances, itemized fares, rate types, payment types, and driver-reported passenger counts.
- spark + iceberg quickstart - [blog](https://tabular.io/blog/docker-spark-and-iceberg/))
- Auckland Transport data
- Airbnb data on NY, London, SF, Paris, barcelona, Amsterdam
- GeoNet earthquake catalog
- Correlates of War datasets
- r/dadjokes dataset
- Flight delays
- Disney world wait times
- Trashnet
- NFL play by play data - by-play data back to 1999. Includes completion probability (cp), completion percentage over expected (cpoe), and expected yards after the catch (xyac_epa and xyac_mean_yardage) in play-by-play going back to 2006. Includes drive information, including drive starting position and drive result. Includes series information, including series number and series success. Features models for Expected Points, Win Probability, Completion Probability, and Yards After the Catch
- UI Density in Time and Space
- How do I learn design?
- Design foundations for developers
- Design tips for developers
- Tactical design advice for developers
- UI Design for Developers
- Learning How to Design
- You can create a great looking website while sucking at design
- Laws of UX
- 100 Things I Know About Design
- The self taught UI/UX designer roadmap
- Design Principles
- 7 Gestalt Principles of Design
- Visual design rules you can safely follow
- infographic
- MDS
- Simple Layout checklist
- Human Interface Guidelines from Apple, Microsoft, Elementary OS, IBM, etc
- little details of visual ui design
- Buffer Design tips
- Notion
- UI Common Mistakes Checklist
- Hey designer
- Refactoring UI
- Tracy Osborn Checklist
- Design Details: Principles of Design - Design Details' most downloaded episode of all time!
- 7 Rules for Creating Gorgeous UI
- How to design great keyboard shortcuts
- Canva Design School
- Degreeless.design
- The Design Newsletter
Programming Languages
Keywords
css
9
design-system
3
css-framework
3
msdos
2
macos
2
react
2
scss
2
components
1
bootstrap-theme
1
modular
1
human-guidelines
1
custom-elements
1
hacktoberfest2022
1
classic-macos
1
windows-7
1
ui-design
1
html
1
windows98
1
guy-fieri
1
windows95
1
styled-components
1
storybook
1
elements
1
lit-element
1
lit-html
1
psone
1
lit-html-element
1
nes
1
ui
1
ui-library
1
8bit
1
web-components
1
trash
1
torch
1
image-classification
1
garbage
1
deep-learning
1
dataset
1
convolutional-neural-networks
1
vector
1
svg
1
bezier-curves
1
action-strategies
1
svelte
1
palettes
1
generator
1
datavis
1
color
1
chroma-js
1
cartography
1