spark-joy

🆕 tailwind/bootstrap/materialui randomly generated templates

using Tailwind v2 (and ) and

free tailwind component kit

tailwind theme

using bootstrap

using bootstrap

HTML, React, Vue.js, and Tailwind templates

design tokens using CSS variables

The UK:

New Zealand is heavily based

The US:

Canada:

Russia:

Australia:

France:

Germany: and

Argentina:

Greece:

Netherlands:

Italy:

Singapore:

Estonia:

Czech Republic:

Ukraine:

A UI Design Language, UI Library of Web Components, and Runtime CSS Framework for rapidly building interfaces that follow your Design System

🌟 mvp.css

https://github.com/alvaromontoro/almond.css

has thin fonts

Elegant styles for all natives HTML elements without .classes and dark mode automatically enabled

4kb incl dark mode

Small size (< 2kb)

https://github.com/xz/new.css

( ) 4.8kb

https://github.com/oxalorg/sakura

supports extremely easy theming using variables for duotone color scheming

Tiny (< 1kb)

https://github.com/zichy/fieber

(new, wants feedback)

(new)

magick.css is a minimalistic, (mostly) classless CSS framework that is designed to be easy to use and easy to understand. It is contained in a single file, and every choice is commented. The goal is to achieve an elegant, but magically playful look, while maximizing readability and the ability to convey information; somewhat akin to the notes of a wizard

https://github.com/neocities/element

(inactive now)

lightweight (10kb), responsive and modern CSS framework for faster and extensible development

A set of small (3.7kb), responsive CSS modules that you can use in every web project

(inspired by UK design system)

lit has two modules: lit and util. lit contains all of the basics for a framework, such as a responsive grid, typography, and other elements. util has many CSS utility classes that can be used to extend lit, or any CSS framework

good looking, lots of classes and utilities yet small

hand drawn look

the base classes for web.dev/learn/csss

css variables framework - "tailwind without tailwind"id=30497165)

style your website like a LATEX document - (original version )

lightweight bootstrap alternative ( )

https://github.com/gduverger/screen

(inactive now)

https://github.com/ubershmekel/cssbed

( )

and

(handrwritingey css similar to roughjs)

This page is a truly naked, brutalist html quine

CSS to make HTML markup look like plain-text markdown

NES.css

: NES.css is a NES-style(8bit-like) CSS Framework

PSone.css

: PS1 style CSS Framework, inspired by NES.css

98.css

: A Windows 98 inspired framework for building faithful recreations of old UIs

XP.css

: A Windows XP inspired framework for building faithful recreations of operating system GUIs. An extension of 98.css

Retro Apple-inspired UI

Puppertino

meant to mimic the look of macOS

BOOTSTRA.386

DOS: : A vintage 1980s DOS inspired Twitter Bootstrap theme

: A Windows 2000 inspired web component library

Text UI CSS

: bios like UI's

New Dawn

: A mac classic After Dark inspired stylesheet

: High-quality metallic UI kit

more

Arwes - Futuristic Sci-Fi and Cyberpunk Graphical User Interface Framework for Web Apps

Futuristic, Sci-Fi shaping for any element

eric meyer v2

josh comeau reset -

https://github.com/jensimmons/cssremedy

css working group's reset if it didnt have to worry about tech debt

udpated

commentary

(yes, technically does more than a reset)

https://github.com/sindresorhus/modern-normalize

is a smaller version that just supports latest Chrome, Firefox, and Safari

Tailwind's is built atop normalize

https://github.com/kripod/css-homogenizer

a modern take on Eric Meyer's Reset, based upon direct comparison between user agent style sheets

Jamie Kyle CSS preset

chrome extension

🌟

of:

Simple and modular components to build dashboards in a breeze. Fully open-source, made by data scientists and software engineers with a sweet spot for design

Unstyled, accessible components for building high‑quality design systems and web apps in React

More than 120 customizable components and hooks to cover you in any situation

uses Stitches, includes light and dark UI components out-of-the-box along with a default color palette that might be good for quickly building landing pages or other content that’s not initially tied to any branding

Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source

20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable

don't come with layout recommendations but here they are:

🌟

( )

Visual Hierarchy

Simple: ( - github and bootstrap have removed it fwiw))

Elegant/Classic: serif like , ,

Playful: rounded sans serif like

Plain/Safe: neutral sans serif like , ,

Sciency/technical: squared off (geometric) sans like ,

( )

Variable fonts:

Erik Kennedy font

Novelty:

Fonts have . current vogue is Inter

@edadams

Free fonts that are great with examples (thanks )

Google Fonts - ( - you should )

Just upload an image, write some sample copy. And flip through 500 Google fonts one by one

related to for devvy stuff

1 variable font that can handle both monospace and UI usecases, very versatile

Cavivanar

Fontshare 50 free fonts

Premium-looking Free Fonts

Chivo

Well known, very readable, pretty, client favorite

Elegant and thin

Loads of weights, beautifully done - example:

from Braille institue

typeface carefully crafted & designed for computer screens

Monospace font for devvy stuff

Caveat and Reenie Beanie on google fonts

90 typefaces with a focus on contemporary, or modern, type

"Open Source Beautiful Fonts"

see how

Canva has a great tool:

Read:

Museo Sans ( ) and similar from

pixel fonts

CSS 3D text

JS 3D text

TypeSpiration premade font pairings for you

Study of best font for online reading - inconclusive

Proxima Nova (on Typekit)

Graphik

MD Prime - used on CSS tricks

Arida Black (maggie's font)

Tekton

but harry roberts

Fluid typography with :

v18:

Another responsive typography fallback - - you can

demo it with this

Note: has known a11y issues: Preserve Zooming. recommends wrapping with , e.g

the property in CSS

Establishing your own type scale

Typography for Developers (2hrs)

Adam Argyle on Typography

Web Typography (48mins)

5 minute guide to Typography

Typography in 10 minutes

Quick Guide to Typography for webdevs

typography for long form articles -

Font smoothing - ,

Tool for learning what fonts other people use

It’s a generator that produces text in a glitter-like style, which you can save as SVG. Definitely not for 99% of your projects, but a pretty cool text effect

if all letters at the same height all caps this is called

International fonts stack

In future, try out

css podcast primer on typography

Gold: expensive, sophisticated ( , )

use the concept of "luminance contrast"

A toolbox to create better UI color palettes

displays color palettes sourced from images of nature (taken from Unsplash)

Rapid color palettes across the rainbow

Poline - enigmatic color palette generator

(advanced tool; try importing the default palettes)

Create Professional Color Palettes from a Single Color

(by Lyft Design )

Consider

Get suggestions for palettes, gradients, and text colors. Hit the space bar for ML-powered ideas

neural network generated color palettes

Color picker for data visualizations

Accessible color generator

Generate tint and shades from hex code

( )

Mix colors in pure CSS

color space is preferable to HSL

why not hsl

Overly descriptive color palettes (fun)

gradients

vivid gradient generator

CSS Gradient Text

🌟 Generate a CSS Color Gradient

Huemint uses machine learning to create unique color schemes for your brand, website or graphic

free collection of 180 linear gradients

(to avoid )

Adam Argyle conic CSS gradient examples

ANIMATED GRADIENTS

Subtle gradients by bumping only saturation on HSL (thanks ) - You can !

Gradient designer with interpolation in various color spaces

Zeno Rocha 5 tips for dark mode

( )

Chapter 4:

very subtle texture

swirly backgrounds like apple

generate mesh gradient backgrounds

low polly pattern generator

SVG Repeating Patterns Generator

thousands of freevector patterns, based on shapes, organic shapes as well as themes, such as animals, beach, city and people, festivals, florals etc

svg background waves

(exports png though :( )

(create a bg pattern of icons)

abstract Doodles with generated patterns

hero picture CSS generator

produces random geometric lines, and we can adjust the formulas and distances between the shapes drawn

web app to generate unique SVG shapes, backgrounds, and patterns

180 patterns, and you can filter them by mode and color, and search

plenty of black-and-white patterns, also available from the command line

allows you to upload an SVG shape (or use one of the existing ones) and it creates a repeating pattern which can be exported as SVG

CSS Pattern generator that allows you to define a pattern in a 10×10 grid

library of pure CSS background patterns like ZigZag or diagonal ones

(Really simple SVG Patterns using single unicode characters.)

(Pattern generator that exports to png, jpg and svg.)

generate custom shape dividers

generate SVG waves

choose between sharp, linear and smooth waves

adjust amplitudes, smoothness, saturation and hues

generate waves, and even animate them

full fledged generate SVG assets, from layered waves to stacked waves and blob scenes

svg waves generator

for increase.com

CSS Doodle

CSS backgroundy patterns

this guy

https://github.com/simeydotme/pokemon-cards-css

super adanced pokemon shiny card gradients

Generative Gradients

Generateive SVG

Image Placeholders - blurring - (and gatsby image and nextjs image)

Dimming/coloring text on background images

PNG textures (paid)

this is

from images - but has been monetized to shit. see below for better alternatives

https://github.com/imgly/background-removal-js

open source Background Removal in the Browser

https://github.com/nadermx/backgroundremover

source

from images

for gif/video

relight images

edit photo in browser no BS

AI Colorizer

you can

put the scroll percentage!

superfast metasearch of 200k svg logos from GitHub

fast search of svg logos, user submitted and categorized

We’ve designed a catalog of 500+ logos. Take a brand identity test and we’ll instantly match you with the best ones, paired with the right fonts & colors

Browse 300.000+ SVG Vectors and Icons

instant search of 50k svg icons from GitHub and GitLab

icons intended to replace mac desktop icons

AWS icons and

Icon only: . Pick from list

⭐ Steve schoger's (somewhat limited) svg iconset. another viewer:

⭐ 3000+ fully customizable free SVG and PNG icons. style, variations, easy to consume

⭐ 937 Fully customizable free SVG icons

⭐ Radix Icons - >250 15×15 icons designed by the Modulz team. - some great app icons

⭐ , Lucide, a fork of with Clean, consistent, customizable SVG icons available as treeshakable packages in all frameworks

" is a very active fork of Feather and what I’ve been using for the past few years instead. Feather is great as are their design guidelines, but it needs way way more icons. Lucide picks up beautifully where it left off."

free open source library with 1000+ SVG Icons, designed on a 24x24 pixels grid

tiny minimal 1px icons

Google icons

Material Design

Circum Icons Consistent open source icons as SVG for React, Vue and Svelte

104,808 free open source icons

Every icon you can think of, in PNG or SVG formats. They offer over 20 million icons, with built-in customization colors like size and color. Requires login, needs creative commons attribution or $3 download

Nucleo is a beautiful library of 30635 icons, and a powerful application to collect, customize and export all your icons. $99 lifetime purchase

SVG Icon Transitions Generator

5,000+ free icons. Customize colors, size, and other properties. PNG, JPG, iOS, Android, PDF. No svg

Discover 4486+ free icons in 310 collections. SVG, EPS, PSD, PNG.

450 icons, SVG, PDF, EPS, Ai, PSD. Paid tier goes up to 1600 icons

has customizable colors and packs eg for ecommerce

https://github.com/edent/SuperTinyIcons

Under 1KB each! Super Tiny Web Icons are minuscule SVG versions of your favourite logos. The average size is under 465 bytes!

https://github.com/Remix-Design/RemixIcon

neutral-style system symbols for designers and developers. Unlike a patchwork icon library, 2200+ icons are all elaborately crafted so that they are born with the gene of readability, consistency and perfect pixels. Each icon was designed in "Outlined" and "Filled" styles based on a 24x24 grid

colored "microsoft style" icons

emoji style customizable icons

fontawesome-like icons

Quick customizable icons for your projects

A typeface of people sillhouettes, to make it easy to build web graphics featuring little people instead of dots

https://github.com/twbs/icons

Bootstrap Icons ,

https://github.com/microsoft/fluentui-system-icons

Fluent UI System Icons are a collection of familiar, friendly and modern icons from Microsoft

a few dozen popular meme icons as svg

and

animated icons

Covid 19 icons -

public domain game assets

A pack of 300 social media icons (PNG & Vector) and a set of animated icons (Lottie and AE), which cover all the trendiest social media networks nowadays

icons for every brand like graphql, adobe xd, youtube, etc

700+ Customizable & Retina-Ready app icons — entirely built in CSS

consistently formatted SVG logos

https://github.com/iconify/iconify

Iconify -> use in

(typically fontawesome). note that there is some tree shaking issues in the discussions. you may wish to use the fork instead

https://github.com/bytedance/IconPark

more than 1,200 high-quality icons, and introduces an interface for customizing your icons. across React, Vue, SVG, PNG

4300+ Icons & Illustrations (by Meng To)

create custom logos

more custom logos

use

🔥 (used in )

6.5m icons, free for PNG, paid for SVG

ios 14 icons from traf - for inspo, mainly

(c4 modeling )

FMC modeling - only rectangles and round things

(free, open source)

freemium, used by Maggie

now to (free) - has

(free)

($10/mo)

more tools -

more canvas diagramming tools

software arch diagrams

UML:

"UML, the good parts" - Fundamental Modeling Concepts

a simple online tool for creating sequence diagrams

Quick Sequence Diagram Editor (but doesnt seem active)

which also has an open-source markup language:

: French-flavored ERD, aka Merise MCD, where the layout is constrained to a grid

Amazon architecture icons: as well as the software that has them built in

AWS icons

Google Cloud icons, cheat sheet and other assets:

(used by tim bray)

focused on AWS

(interactive/realtime) - discontinued!

https://github.com/lynnlangit/learning-cloud/tree/master/0_CLOUD-PATTERNS/1_Viz-Systems

lynn langit's list

the 5 types of arch diagrams

interactive diagrams

4 major text-to-graph langauges (Comparison )

mermaid

new one:

python's

https://github.com/mhlabs/cfn-diagram

visualize cloudformation -> draw.io

(OSS) - Digital Timing Diagram or Waveform from simple textual description

An AI assisted diagram editor using PlantUML syntax

way more tools here:

Download any logo in LogoToUse and do whatever you want with them. This is the place to showcase more than 120+ million logos that are already designed worldwide and are archived!

SQL

Cloud AWS/Azure/GCP diagrams

Wobble paint

free open source visual designer for user flows. collaborative

AI driven design with wireframe

Browser: ,

with

Books:

and

book cover advice

Macbook:

animate them, why not (previously )

phone/watch:

including making 3d video!!! example

and

other devices

3D mocks:

: Turn screenshots into dramatically angled photos

🔥

in context:

– Includes video

device mockups

: screenshot, website and device mockups (Paid, $99 one time)

An open-source illustrations website, where you can change the colors of the illustrations online before downloading

diverse, customizable human svgs

is similar

"Beautiful, FREE illustrations of black people for your next digital project"

hire custom designs via

High quality vector graphics with worry-free licensing for personal and commercial use

illustrations to go with Streamline icons

(previously ouch.pics)

good random generator by Pablo Stanley. Made for Sketch, Figma, InVision Studio and Adobe XD

Graphic resources for everyone: Find Free Vectors, Stock Photos, PSD and Icons

Build your own illustrations - very gradient/faceless illo heavy

free customizable illustrations for your next project

24 high-quality Covid illustrations

free vector illustrations

1m+ Transparent PNG Images For Free

One new high-quality, open-source illustration each day. Use our color-picker to adapt the illustrations to your brand identity!

Free vector illustrations for personal & commercial projects no attribution required

ManyPixels offer free svg illustrations with the possibility to customize the color as well

illustrations with color generator for svgs

a hand-drawn illustration library to create scenes of people

Smash Illustrations features trendy characters and simple illustrations for free in commercial and personal use. It features more than 250+ objects and characters, and 20+ unique scenes so you can compose them however you like

Mixkit is the Unsplash of illustrations, or that is their objective. It features many illustration categories and also stock videos and music, all free of charge

100 beautiful illustrations, designed by Vijay Verma during a 100 days of illustrations challenge

This website offers a searchable list of nice and free isometric illustrations

abstract art illutrations

library of Free Illustrations and Icons for everyone

some illustrations in PS/sketch/etc. requires account

Retroooo Folks is a vector-based Mix-and-Match library of hand-drawn sketches, created for Adobe Illustrator, Sketch and Adobe Draw

Hand-drawn vector illustration resources for your next project

A set of 16 handcrafted illustrations for your web & app projects. This set includes categories like 404 error, no internet connection, no service, fatal error, page not found, something went wrong, under construction and many more

Google AI assisted drawing

Free or paid. Create icons, app screenshots, MacBook/browser mockups, social media posts, and other graphics for mobile apps and browser extensions

one-click web editor for illustration patterns. It's perfect for branding landing pages, social media posts and featured images. Requires Google signup

sketch me (paid)

404 page illustrations

free illustrations + easy to use web editor that allows customizing palettes, characters, look & feel, among others

Cute Isometric Objects For Your Design

3d hand gestures

Isometric and flat graphic resources

160,000+ high resolution PNG images of beautiful 3D shapes

delicious design library of 3D avatars

Easily create and publish 3D web experiences. Build and iterate fast with production-ready results

Blockbench - low poly blender altnerative

RoughJS Animated Annotation -

SNES music

text to diagramming tools

https://github.com/asciitosvg/asciitosvg

ascii to svg diagrams

from picture to ANSI art

esp for photo collages

of course

AI driven similarity search

t-SNE stock photo search

27k free and public domain photos, images, clipart, pics and vectors

search 354m high quality creative commons licensed photos

public domain art (in particular check out the )

"Beautiful, high-res photos of black and brown people. For free."

nature, space, desert, etc. mobile focused

A free creative common collection of over 5000+ travel photos from all over the world anyone can use

(premium - search by color)

studio ghibli free backgrounds

quirky/whimsy

furniture

Create custom stock photos

AI-generated stock photos

(unsplash with duotone filter)

random low quality list

Burst from Shopify - Free stock photos for everyone

(premium)

3,048,864 Video effects and stock footage

Good in browser video editor - nice intros and outros, templates a bit limited but pretty good

Automate edit bulk videos with custom templates

good video maker with lots of nice generic templates and imports stock video

drag and drop video maker. more elegant/real

seems versatile but not super intuitive and dunno how to change the transitions

nice intro editor with some video templates - from jay phelps

Magical AI tools, realtime collaboration, precision editing, and more. Your next-generation video creation suite

simple video maker with templates and stock video. kiiinda cartoony

also kinda cartoony

also kinda cartoony but can do real video ( )

nice studio for cartoony professional videos and presentations with nice transitions

whiteboard doodle explainer videos. $39/mo

website demo video

code animation based on text diffs

Fable motion design

https://github.com/remotion-dev/remotion

code videos with React

example usage

kinda rough - mostly image maker, video features in beta

"3d video animations". promising videos, but $97 lifetime.. seems sketchy

design animation studio

Fireship/jeff delaney

Florin pop

identicons

https://github.com/pshihn/stippled-image

instead of showing people's faces, try stippling

grab social images from username/email

A playful avatar generator for the modern age

and

3d customizable avatars

An illustrated avatar collection for developers and designers

Toy Faces is a fun diverse library of 3D avatars for your design mockups and personal use

3d diverse avatars, paid

from tippyjs guy

60+ beautiful checkboxes

CSS keyboard buttons (Linus' toes)

CSS3 3D Buttons

Button Deluxe v3 A whimsical 3D pure CSS button

cssbuttons: HTML & CSS Buttons Collection Built in React

bonbon sweet css 3d buttons

moving lightsource on hover css buttons idea

moving gradients on hover

form submission UX

https://github.com/scottaohara/a11y_styled_form_controls

Accessible Styled Forms

accessibility for all elements

Form Design Best Practices

Form Wizard

Complex Forms

Form Validation UX

Form Validation

https://github.com/mdo/wtf-forms

WTF Forms: Nicer Forms eg Radio Buttons with pure CSS

Output-inspired form:

show button when placeholder-shown:

Toggles:

3D LED switch:

The Crazy Egg Guide to Great Form UI and UX

Best practice, research insights and examples by Geri Reid

YouTube's Audio Library

100% free, quality CC audio

as hundreds of no-charge sample libraries (many pianos, lots of other things)

some royalty free music. gremlin podcast usees it

a few brief guitar samples for podcast transitions

free podcast intro music

Bensound

royalty free music for Youtube, Podcast, Vlog and other video projects

may have better licensing but no fx

(cheapest) here's a comparison

Apache E Charts

Charts.css is a modern CSS framework. It uses CSS utility classes to style HTML elements as charts

https://github.com/aftertheflood/sparks

Sparkline fonts in text: and

Statically-generated, responsive charts, without the need for client-side Javascript

https://github.com/cruip/tailwind-dashboard-template

This one is made with Tailwind and React and includes optional chart components built with Chart.js

https://github.com/beerose/theme-ui-sketchy

Theme-ui-sketchy - roughjs components with themeui

React Physics Dragger

: Easy to configure, lightweight, editable vector graphics in your react components

from

React Hamburger Icons

note issues with hamburger menus

React Curved Arrow

https://github.com/tienpham94/react-awesome-spinners

requires styled components

200kb tho

PDF viewer

React Confetti

React DOM Confetti

Perspective stairstep text effects (in action: )

Split text animations

add particle effects to a web page, specifically confetti and sparkles

Duotone blend modes:

full guide to blend modes

Decovar Font with Text shadows: (and other )

Expanding Search buton and text from Ana Tudor

ClippyJS

Rythm.js - make your page dance

XKCD chart

Netflix slide-in menu -

Peek Href on Links -

More on

RoughJS Annotation -

Greensock GSAP scroll trigger demo with a ThreeJS Plane model

little HTML tricks that are handy

great svg ideas

exponential smoothing animation in js

CSS3 Patterns

Box shadows

Designing Beautiful Shadows in CSS

inspired the smooth shadows generator

( )

Card border Generator

Broider - 9-patch css grid borders

CSS Scroll Shadows

Conic gradient borders

Gradient Borders without extra elements:

Components.ai box shadows

Emoji Shadows

Neuomorphism Generator

primer on skeuo vs flat vs neuomorphism

CSS tricks clip path animation tutorial

slanted image gallery with clip path

core tool

small dynamic SVG placeholders

https://github.com/woltapp/blurhash

small dynamic SVG placeholders for blurring up

make SVGs from monochrome drawings or images

collaboration tools for teams, and also supporting diagrams, Autocad drawings, Vision stencils and drawings

light open-source macOS application for SVG editing and animations

https://github.com/SVG-Edit/svgedit

fully-fledged SVG editor for sophisticated SVG editing

SVGO

free desktop SVG asset manager which allows you to keep all SVGs in one place. You can bookmark, search and preview SVG icons, live-edit the SVG markup, preview the icons in dark mode and copy/paste markup and CSS with one click. By default it also uses SVGO for SVG optimizations. Available for Mac and Windows

You can drag icons from Iconset directly into Sketch, Figma, Adobe XD and pretty much anything else, without plugin or extension installs. Plus, you can also sync icons across devices via Dropbox or similar services, and publish and share your icon sets. Available for Mac and Windows

SVG Sprites generator context

Transparent fill SVG and color in on Hover -

generate some fancy blobs

generator of organic shapes for any kind of visuals or background images. You choose the rotation, the scale, the “curvature” and the fill color, and the tool takes care of the rest

remove blank space automatically

more refined control of cropping with additional options for cropping style — circle, polygon, custom shape

SVG Polygon Generator allows you to define the number of sides, radius, spacing and it generates a

SVG Data Visualization Generator - sunburst, circular dendrogram or multiple convex hull, for example. with tutorials:

more text effects

animate an existing svg

is

SVG icon transitions

scroll based svg text path animation

stroke path animation

animate svg strokes

basic fill and stroke animations

dedicated editor for SVG animations with plenty of dedicated panels for everything from skewing to stroke path and filters

GSAP, SVG.js ( ), Lottie

SVG animation tool

Buttons, hover, inputs, and loaders

general

animate an existing svg (by the same people as animista)

general

animate DOM elements or WebGL using a convenient visual editor that works along with the code you write

https://github.com/mojs/mojs

motion graphics

CSS transitions "My favourites are the ones that incorporate some hesitation in the animation, for an added uniqueness"

general

Tailwind for animations, since you’re only using HTML classes

general

Burgers

Burgers

https://github.com/aholachek/react-flip-toolkit

Layout

Hover and loaders:

Graphic animations:

lottie animations

HTML animation? (paid)

https://github.com/swup/swup

Page Transitions with swup ( )

css animation without keyframes

collection of css animations

Open source plain JS, CSS, HTML, SVG animations

animation introduction & examples

web components

Spinners

demo:

Buttons, hover, inputs, and loaders

Conic gradient loader in CSS -

https://github.com/JoshK2/react-spinners-css

React, Vue and Angular Spinners

Single Element CSS Spinners

100+ animated loaders

https://github.com/joerez/react-transitions/

Page transitions

has react and vue integration

show people things they need as they need them

https://github.com/zurb/joyride

jQuery feature tour plugin, used in

React Curved Arrow

Image editing/Export to SVG/Object Removal/Photoshop -

online SVG editor -

GIMP alternative -

Image modification for hover effects:

Make photo 16x9 small tool

Enlarge low res images with ML:

Lunacy - Graphic design software with built-in assets

Website design feedback collaboration -

Invision

FOSS

(paid)

(paid)

Free Figma library of products, elements, and screens

Free Customizable Illustrations With Figma Plugin

7hr figma course

Apple design resources

Image modification for hover effects:

Trianglify

generative artistry

Canvas Cards

Open Processing

( )

open-source, node-based WebGL design tool, to create 3D scenes procedurally

https://github.com/shuding/cobe

webgl globe ( , )

Huge pack of 3D elements accessible directly from Figma

"leaked ab tests"

steve schoger ui ux inspo list

movie UIs

game movie and other fantasy UIs

for analyzing your css

(just data, no pics)

simple quote

OpenWeather is better and has 1M calls per month for free

I've set up an iPad in my hallway to show their SVG weather charts. Super simple to integrate into a simple home made dashboard website. Here is Oslo:

theres a graphql swapi as well

https://github.com/andresionek91/fake-web-events

mock fake user events

(A Directory of Free Public & Open Rest APIs)

generate fake pdf

91 datasets

There are 133398 open data datasets available

dataset newsletter

for training image upscalers

Carnegie Mellon University listing of 750 databases, datasets, and research support tools

Google datasets

https://github.com/awesomedata/awesome-public-datasets

Awesome Public Datasets

Kaggle Datasets

The home of the U.S. Government’s open data

https://github.com/lerocha/chinook-database

Chinook:

( ) 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

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

( ): 500,000+ emails from 150 employees of the Enron Corporation ( )

This ICIJ database contains information on more than 810,000 offshore entities that are part of the Pandora Papers, Paradise Papers, Bahamas Leaks, Panama Papers

Kaggle:

"monitors the world's broadcast, print, and web news from nearly every corner of every country in over 100 languages and identifies the people, locations, organizations, themes, sources, emotions, counts, quotes, images and events driving our global society every second of every day, creating a free open platform for computing on the entire world."

Welcome to the inaugural Hex Horoscope, a new monthly series in which I attempt to divine the general trend of the month to come using Hex. We'll start with a visual look at how the first week of August stacks up to the competition, and then do some actual predictive modeling to take a stab at what the rest of the month has in store

Using the BQ geo functions to overlay weather with key locations we cared about was a lot of fun

List of Famous/Notable people by Geo ( ) - ,

Every tree in San Francisco (that are managed by the department of public works, so this excludes trees in places like Golden Gate Park): 196,000 trees listed and they update it constantly!

Yellow and green taxi trip records include fields capturing pick-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

( - )

LINZ data service

Trashnet

: Code (only for the convolutional neural network) and dataset for mine and Mindy Yang's final project for Stanford's CS 229: Machine Learning class. The dataset spans six classes: glass, paper, cardboard, plastic, metal, and trash. Currently, the dataset consists of 2527 images. The pictures were taken by placing the object on a white posterboard and using sunlight and/or room lighting. The pictures have been resized down to 512 x 384, which can be changed in data/constants.py (resizing them involves going through step 1 in usage). The devices used were Apple iPhone 7 Plus, Apple iPhone 5S, and Apple iPhone SE

The package contains NFL play-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

https://github.com/goabstract/Awesome-Design-Tools

/

(CodeNewbie)

(Syntax)

(Syntax)

(The Changelog)

(Meng To)

(ShopTalk)

web interface handbook

( )

3 most common mistakes of UI design by

Apple's HIG was updated for 2022

50 UI tips

Steve Schoger - Refactoring UI process:

Steve Schoger -

Matt D Smith Checklist ( )

Simple design: (rec by )

note: HSL has palette issues

Design Details' most downloaded episode of all time!

Free tier software

for the 4 minute version (free):

you can do the opposite (pick out differences) with

for the 4 hour version:

for the 4 week version:

for the 4 month version: 995/1495/2495. 48 lessons, 26 hours

weekly lessons drip fed over email

i may be signing up for .. its $1800 though

upcoming design for devs book from adrian twarog

meng to

the non-designer's design book