Tag design

Design - checklist

Whitespace
- breath
- more outside than inside
Alignment
Hierarchy - What is important here ?
Contrast ratio
typography
- readability : Il1 test
- text size - line height

SVG favicon and fallback for safari/older browsers

<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">

https://omatsuri.app/

Open source browser tools for everyday use.

Page divider
Triangle generator
Color shades generator
html symbols collection
Fake data generator

https://getwaves.io/

SVG waves generator

https://haikei.app/

Generate unique SVG design assets

Haikei is a web app to generate unique SVG shapes, backgrounds, and patterns – ready to use with your design tools and workflow.

https://dev.to/masakudamatsu/favicon-nightmare-how-to-maintain-sanity-3al7

Definitive edition of "How to Favicon in 2021"

TL;DR

In the element of your HTML document, insert

<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />

where site.webmanifest is a JSON file with the content like this:

{
    "name": "Your website name",
    "short_name": "A shorter version of your website name",
    "icons": [
        {
            "src": "/android-chrome-192x192.png",
            "sizes": "192x192",
            "type": "image/png"
        },
        {
            "src": "/android-chrome-512x512.png",
            "sizes": "512x512",
            "type": "image/png"
        }
    ],
    "theme_color": "#4a4a4a",
    "background_color": "#4a4a4a",
    "display": "standalone"
}

Change the values of "theme_color" and "background_color" to your favicon design specification

Then create a favicon in the SVG format.

Convert this SVG image into favicon.ico, apple-touch-icon.png, android-chrome-192x192.png, and android-chrome-512x512.png with RealFaviconGenerator.

Finally, make sure that the favicon.ico file is named as it is (don't change it) and saved in the root directory. (Otherwise MacOS Safari and IE won't recognize the favicon.)

That's all! :-)

https://uiw.tf/minimap

Minimap For The Web

Interact with the current page from a bird's eye view.

If you've ever played a video game, then you've most likely also used a minimap! A minimap is a heads up display that aids players in orienting themselves in the game world.

Could a minimap help us navigate the web? Maybe...

We can use an experimental CSS property currently only available in Firefox to display a live image from an arbitrary HTML element.

This makes it trivial to create a minimap representation of the entire page.

https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-enterkeyhint-attribute

enterkeyhint attribute for textarea/input, on mobile gives enter key more context for the user

https://tailwindcomponents.com/

A free repository for community components using TailwindCSS

Open source Tailwind UI components and templates to bootstrap your new apps, projects or landing sites!

https://tailblocks.cc/

Ready-to-use Tailwind CSS blocks.

https://github.com/argyleink/gui-challenges

centralized projects from the YouTube show GUI Challenges

I build interfaces my way, then challenge you to do it your way. With our creative minds combined, we'll find multiple ways to solve these interfaces and expand the diversity of our skills.

https://svgsilh.com/

Free SVG Image & Icon.

https://thispersondoesnotexist.com/

Generated photo of fake people

https://picsum.photos/

Lorem Picsum The Lorem Ipsum for photos.

https://www.patterns.dev/

Improve how you architect webapps

Patterns.dev is free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

https://storybook.js.org/tutorials/ui-testing-handbook/

UI Testing Handbook from storybook

A guide that highlights UI testing strategies used by scaled front-end teams. You'll learn to verify everything from visual appearance to logic and even detect integration issues. Along the way, we'll demonstrate how you can reduce bugs by automatically running your tests.

https://mantine.dev/

A fully featured react components library

https://github.com/soheilpro/mailwind

Use Tailwind CSS to design HTML emails.

https://johnnydecimal.com/

A system to organise projects

“Hey Kristy, where can I find the payroll schedule?” “12.03”

https://hue.tools/

hue.tools is web app that helps you to work with colors. An open source toolbox for colors.

https://inkstitch.org/

An open-source machine embroidery design platform based on Inkscape.

http://www.identifont.com

Provide designers with a tool to help them identify fonts or select the best fonts for their projects. Since then it has grown to become the largest independent directory of digital fonts on the Internet, with a number of unique tools for locating fonts for particular applications.

https://github.com/markmead/hyperui

Free open source Tailwind CSS components

https://github.com/gka/chroma.js

chroma.js is a small-ish zero-dependency JavaScript library (13.5kB) for all kinds of color conversions and color scales.