/ Gists / HTML

Gists - HTML

On gists

Inert - really invisible (screen readers etc)

HTML

index.html #

<!--
The inert attribute completely disables interactivity.
Screen readers and keyboard navigation will ignore it.
It’s a cleaner, more semantic approach to managing hidden elements.
-->
<nav inert>
 <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
On gists

Dropdown without JS

Tailwind CSS CSS HTML

code.html #

<!-- https://codepen.io/xqbuilds/pen/LYwvOer  -->

<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-black text-white flex items-center justify-center min-h-screen space-x-6">
    <!-- Hover Dropdown -->
    <div class="relative group">
        <button class="bg-amber-900 hover:bg-amber-800 px-6 py-3 rounded-lg transition">
            Hover Dropdown
        </button>
        <div class="absolute left-0 hidden w-40 bg-gray-800 rounded-lg group-hover:block">
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 1</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 2</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 3</a>
            <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option 4</a>
        </div>
    </div>
    <!-- Click Dropdown -->
    <div class="relative">
        <details>
            <summary class="bg-teal-800 hover:bg-teal-700 px-6 py-3 rounded-lg cursor-pointer transition">
                Click to Open
            </summary>
            <div class="absolute left-0 w-40 bg-gray-800 rounded-lg">
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option A</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option B</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option C</a>
                <a href="#" class="block px-4 py-2 hover:bg-gray-700">Option D</a>
            </div>
        </details>
    </div>
</body>
</html>
On gists

HTML 5: Restricted datalist

JavaScript HTML

index.html #

<!DOCTYPE html>
<html lang="cs">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Výběr s Datalist</title>
  <script>
    function validateInput(input) {
      const datalist = document.getElementById('fruit-list');
      const options = datalist.getElementsByTagName('option');
      const values = Array.from(options).map(option => option.value);

      if (!values.includes(input.value)) {
        input.value = ''; // Vymaže hodnotu, pokud není v datalistu
      }
    }
  </script>
</head>
<body>
  <form>
    <label for="fruit">Vyberte ovoce:</label>
    <input type="text" id="fruit" name="fruit" list="fruit-list" oninput="validateInput(this)">
    <datalist id="fruit-list">
      <option value="Jablko">
      <option value="Banán">
      <option value="Třešně">
      <option value="Datle">
    </datalist>
    <button type="submit">Odeslat</button>
  </form>
</body>
</html>
On gists

HTML 5 - role

HTML

index.txt #

@link https://www.w3.org/TR/wai-aria-1.1/#role_definitions

banner: Hlavní záhlaví stránky.
complementary: Doplňkový obsah.
contentinfo: Informace o obsahu stránky (patička).
main: Hlavní obsah stránky.
navigation: Navigace.
search: Vyhledávací formulář.
article: Samostatný článek nebo příspěvek.
region: Oblast obsahu, která má svůj vlastní význam.
alert: Důležité zprávy nebo upozornění.
dialog: Dialogové okno.
button: Tlačítko.
link: Odkaz.
form: Formulář.
tab: Karta v kartách.
tabpanel: Obsah karty.
On gists

SVG Circle + TW + animation

•
Tailwind CSS HTML SVG

index.html #


<!--
https://play.tailwindcss.com/B8YFBxQAJO
-->

<div class="group relative flex h-[10em] w-[10em] items-center justify-center rounded-[1.5em] px-[0.5rem] pt-[1rem]">
  <svg class="absolute left-1/2 top-[calc(50%+8px)] h-[9rem] w-[9rem] -translate-x-1/2 -translate-y-1/2" viewBox="0 0 160 160" fill="none" height="160" width="160" xmlns="http://www.w3.org/2000/svg">
    <path d="M130.912 130.912a71.997 71.997 0 0 0-10.911-110.778A71.999 71.999 0 0 0 9.383 94.046a72.004 72.004 0 0 0 19.705 36.866" stroke-width="16" stroke-linecap="round" stroke="#EEDC82"></path>
    <path d="M146.65 52.764A72.004 72.004 0 0 0 69.647 8.748a71.998 71.998 0 0 0-40.559 122.164" class="duration-[1s] [stroke-dasharray:100] [stroke-dashoffset:-99] group-hover:[stroke-dashoffset:0]" pathLength="100" stroke-width="16" stroke-linecap="round" stroke="#B49A18"></path>
  </svg>
  <p class="text-[0.75rem] font-semibold">1729/2500 Steps</p>
</div>
On gists

Css Tooltip aka Superkoders (+ my solution wo JS)

•
CSS HTML

tooltip.html #

<!-- 

https://jsbin.com/fetikedayu/1/edit?html,css,js,output 
https://jsbin.com/zofifoceli/edit?html,css,output
-->

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        .c-tooltip {
    display: inline-block;
    vertical-align: middle;
    margin: -2px 0 0 5px;
    position: relative;
    font-weight: 400;
    height: 16px;
    width: 16px;
    margin: 250px;
    border: 1px solid red;
  
}


.c-tooltip__text {
    display: block;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: calc(100% + 20px);
    transform: translate3d(-50%,20px,0);
    width: 320px;
    max-width: 80vw;
    padding: 20px 20px 0;
    background-color: #fff;
    color: #000;
    transition: opacity .3s,transform .3s,visibility 0s .3s;
    border-radius: 4px;
    filter: drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 1px #d9d6d4) drop-shadow(0 0 20px rgba(0,0,0,.1));
}

.c-tooltip__text:before
{
  position: absolute;
  background: transparent;
  content: "";
  top: -50px;
  height: 100px;
  width: 100%;
  left: 0;
}

.c-tooltip__pointer {
    position: absolute;
    left: 50%;
    top: -7px;
    display: block;
    width: 14px;
    height: 14px;
    transform: translateX(-50%) rotate(45deg);
    background-color: #fff;
}

.c-tooltip--visible .c-tooltip__text,
.c-tooltip:hover .c-tooltip__text,
.c-tooltip__text:hover
{
    visibility: visible;
    opacity: 1;
    pointer-events: all;
    transform: translate3d(-50%,0,0);
    transition: visibility 0s .3s,opacity .3s .3s,transform .3s .3s;
    z-index: 100;
}
        
      </style>
   </head>
   <body>
      <div class="c-tooltip">
         <span class="c-tooltip__icon">
            <svg viewBox="0 0 16 16">
               <path d="M0 8C0 3.584 3.584 0 8 0C12.416 0 16 3.584 16 8C16 12.416 12.416 16 8 16C3.584 16 0 12.416 0 8ZM9.73605 8.13602L10.456 7.40002C10.912 6.94402 11.2 6.30402 11.2 5.60002C11.2 3.83202 9.76805 2.40002 8.00005 2.40002C6.23205 2.40002 4.80005 3.83202 4.80005 5.60002L6.40005 5.60002C6.40005 4.72002 7.12005 4.00002 8.00005 4.00002C8.88005 4.00002 9.60005 4.72002 9.60005 5.60002C9.60005 6.04002 9.42405 6.44002 9.12805 6.72802L8.13605 7.73602C7.56005 8.32002 7.20005 9.12002 7.20005 10L7.20005 10.4L8.80005 10.4C8.80005 9.20002 9.16005 8.72002 9.73605 8.13602ZM8.79995 13.6L7.19995 13.6L7.19995 12L8.79995 12L8.79995 13.6Z"></path>
            </svg>
         </span>
         <div class="c-tooltip__text">
            <span class="c-tooltip__pointer"></span>
            <p><a class="c-tooltip__link" href="https://www.vzhurudolu.cz/prirucka/metrika-lps">LPS (Lighthouse Performance Score)</a> je hlavní skóre nástroje Lighthouse pro tuto konkrétní stránku. LPS měříme každý den syntetickým testem.</p>
            <p>LPS se nepromítá do celkového zhodnocení stránky.</p>
            <p><strong>Optimální hodnota ja 90&nbsp;% a více.</strong></p>
         </div>
      </div>
   </body>
</html>
On gists

Complete List of HTML Meta Tags

HTML

meta-tags.md #

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">
<meta name="robots" content="index,follow" />
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />
<meta name="abstract" content="">
<meta name="topic" content="">
<meta name="summary" content="">
<meta name="Classification" content="Business">
<meta name="author" content="name, email@hotmail.com">
<meta name="designer" content="">
<meta name="copyright" content="">
<meta name="reply-to" content="email@hotmail.com">
<meta name="owner" content="">
<meta name="url" content="http://www.websiteaddrress.com">
<meta name="identifier-URL" content="http://www.websiteaddress.com">
<meta name="directory" content="submission">
<meta name="category" content="">
<meta name="coverage" content="Worldwide">
<meta name="distribution" content="Global">
<meta name="rating" content="General">
<meta name="revisit-after" content="7 days">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">

OpenGraph Meta Tags

<meta name="og:title" content="The Rock"/>
<meta name="og:type" content="movie"/>
<meta name="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta name="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta name="og:site_name" content="IMDb"/>
<meta name="og:description" content="A group of U.S. Marines, under command of..."/>

<meta name="fb:page_id" content="43929265776" />

<meta name="og:email" content="me@example.com"/>
<meta name="og:phone_number" content="650-123-4567"/>
<meta name="og:fax_number" content="+1-415-123-4567"/>

<meta name="og:latitude" content="37.416343"/>
<meta name="og:longitude" content="-122.153013"/>
<meta name="og:street-address" content="1601 S California Ave"/>
<meta name="og:locality" content="Palo Alto"/>
<meta name="og:region" content="CA"/>
<meta name="og:postal-code" content="94304"/>
<meta name="og:country-name" content="USA"/>

<meta property="og:type" content="game.achievement"/>
<meta property="og:points" content="POINTS_FOR_ACHIEVEMENT"/>

<meta property="og:video" content="http://example.com/awesome.swf" />
<meta property="og:video:height" content="640" />
<meta property="og:video:width" content="385" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video" content="http://example.com/html5.mp4" />
<meta property="og:video:type" content="video/mp4" />
<meta property="og:video" content="http://example.com/fallback.vid" />
<meta property="og:video:type" content="text/html" />

<meta property="og:audio" content="http://example.com/amazing.mp3" />
<meta property="og:audio:title" content="Amazing Song" />
<meta property="og:audio:artist" content="Amazing Band" />
<meta property="og:audio:album" content="Amazing Album" />
<meta property="og:audio:type" content="application/mp3" />

Create Custom Meta Tags

Use custom meta tags to store data that you need in javascript, instead of hard-coding that data into your javascript. I store my Google Analytics code in meta tags. Here's some examples:

<meta name="google-analytics" content="1-AHFKALJ"/>
<meta name="disqus" content="abcdefg"/>
<meta name="uservoice" content="asdfasdf"/>
<meta name="mixpanel" content="asdfasdf"/>

Company/Service Meta Tags

ClaimID

<meta name="microid" content="mailto+http:sha1:e6058ed7fca4a1921cq91d7f1f3b8736cd3cc1g7" />

Apple Meta Tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta content="yes" name="apple-touch-fullscreen" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width = 320, initial-scale = 2.3, user-scalable = no">

Internet Explorer Meta Tags

<meta http-equiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
<meta http-equiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
<meta name="mssmarttagspreventparsing" content="true">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="msapplication-starturl" content="http://blog.reybango.com/about/"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>
<meta name="application-name" content="Rey Bango Front-end Developer"/>
<meta name="msapplication-tooltip" content="Launch Rey Bango's Blog"/>
<meta name="msapplication-task" content="name=About;action-uri=/about/;icon-uri=/images/about.ico" />
<meta name="msapplication-task" content="name=The Big List;action-uri=/the-big-list-of-javascript-css-and-html-development-tools-libraries-projects-and-books/;icon-uri=/images/list_links.ico" />
<meta name="msapplication-task" content="name=jQuery Posts;action-uri=/category/jquery/;icon-uri=/images/jquery.ico" />
<meta name="msapplication-task" content="name=Start Developing;action-uri=/category/javascript/;icon-uri=/images/script.ico" />
<link rel="shortcut icon" href="/images/favicon.ico" />

TweetMeme Meta Tags

<meta name="tweetmeme-title" content="Retweet Button Explained" />

Blog Catalog Meta Tags

<meta name="blogcatalog" />

Rails Meta Tags

<meta name="csrf-param" content="authenticity_token"/>
<meta name="csrf-token" content="/bZVwvomkAnwAI1Qd37lFeewvpOIiackk9121fFwWwc="/>

Apple Tags

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name= "viewport" content = "width = 320, initial-scale = 2.3, user-scalable = no">
<meta name= "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name = "viewport" content = "initial-scale = 2.3, user-scalable = no">
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-startup-image" href="/startup.png">

<link rel="apple-touch-icon" type="image/png" href="/apple-touch-icon.png" />

HTML Link Tags

<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/martini" />
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<link rel="fluid-icon" type="image/png" href="/fluid-icon.png" />
<link rel="me" type="text/html" href="http://google.com/profiles/thenextweb"/>
<link rel='shortlink' href='http://blog.unto.net/?p=353' />
<link rel='archives' title='May 2003' href='http://blog.unto.net/2003/05/' />
<link rel='index' title='DeWitt Clinton' href='http://blog.unto.net/' />
<link rel='start' title='Pattern Recognition 1' href='http://blog.unto.net/photos/pattern_recognition_1_about/' />
<link rel='prev' title='OpenSearch and OpenID?  A sure way to get my attention.' href='http://blog.unto.net/opensearch/opensearch-and-openid-a-sure-way-to-get-my-attention/' />
<link rel='next' title='Not blog' href='http://blog.unto.net/meta/not-blog/' />
<link rel="search" href="/search.xml" type="application/opensearchdescription+xml" title="Viatropos" />

<link rel="self" type="application/atom+xml" href="http://www.syfyportal.com/atomFeed.php?page=3"/>
<link rel="first" href="http://www.syfyportal.com/atomFeed.php"/>
<link rel="next" href="http://www.syfyportal.com/atomFeed.php?page=4"/>
<link rel="previous" href="http://www.syfyportal.com/atomFeed.php?page=2"/>
<link rel="last" href="http://www.syfyportal.com/atomFeed.php?page=147"/>

<link rel='shortlink' href='http://smallbiztrends.com/?p=43625' />
<link rel="canonical" href="http://smallbiztrends.com/2010/06/9-things-to-do-before-entering-social-media.html" />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://smallbiztrends.com/xmlrpc.php?rsd" />
<link rel="pingback" href="http://smallbiztrends.com/xmlrpc.php" />
<link media="only screen and (max-device-width: 480px)" href="http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet" />

Other Resources