Skip to content

Instantly share code, notes, and snippets.

@finxol

finxol/CSS_tips.md

Last active February 2, 2023 17:15
Show Gist options
  • Save finxol/f473792f9fe73a4230609560ade92566 to your computer and use it in GitHub Desktop.
Save finxol/f473792f9fe73a4230609560ade92566 to your computer and use it in GitHub Desktop.
Download ZIP
Web design tips
Raw
CSS_tips.md 
.moon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    box-shadow: 22px 22px 0 0 black;
}
  • Customise list marker :
::marker {
    color: #f2d5d6;
    font-family: 'Poppins', sans-serif;
    text-shaddow: 2px 2px black;
}

  • Find great looking gradients for backgrounds : Gradienta

  • Pure CSS text portrait :

p {
    background: url("#");
    -webkit-background-clip: text;
}
  • Create a typewriter effect on text :
@import url('https://fonts.googleapis.com/css2?family=Inconsolata:wght@500&display=swap');

.text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-right: 4px solid black;
    font-size: 180%;
    white-space: nowrap;
    overflow: hidden;
}

.animation{
  animation: typewriter 4s steps(15) 1s 1 normal both,
             blinkCursor 500ms steps(15) infinite normal;
}

@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 214px;
  }
}

@keyframes blinkCursor{
  from {
    border-right-color: black;
  }
  to {
    border-right-color: transparent;
  }
}
  • Truncate text using only CSS :
h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;  
}
Raw
html_tips.md 
<picture>
    <source media="(min-width:650px)" src="/path">
    <img src="/path">
</picture>
  • Icons using HTML :
<h1>&check;</h1>
<h1>&cross;</h1>
<h1>&malt;</h1>
<h1>&sext;</h1>

  • Make specific areas on img clickable : W3Schools Tryit Editor

  • Custom keyboard shortcuts : <a href="#" accesskey="a">Keyboard activated</a>

  • Block translation on specific element : <p translate="no">Company name</p>

  • Sandbox iframe : <iframe src="#" sandbox>

  • Regex to check pattern : <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}">

  • Restrict file type on input:file : <input type="file" accept="image/*">

  • Make element draggable : <p draggable="true">Drag Me</p>

  • Native HTML Search in input :

<input list="items">
  
<datalist id="items">
    <option value="Marko Denic">
    <option value="FreeCodeCamp">
    <option value="FreeCodeTools">
    <option value="Web Development">
    <option value="Web Developer">
</datalist>

  • Defer the loading of the image until the user scrolls to them : <img src='image.jpg' loading='lazy' alt='Alternative Text'>

  • Email, call, and SMS links :

<a href="mailto:{email}?subject={subject}&body={content}">
  Send us an email
</a>

<a href="tel:{phone}">
  Call us
</a>

<a href="sms:{phone}?body={content}">
  Send us a message
</a>
  • Change the starting point for anordered list :
<ol start="11">
    <li>Eleventh item</li>
    <li>Twelfth item</li>
</ol>
  • Display quatities as progress bars :
<label for="value1">Low</label>
<meter id="value1" min="0" max="100" low="30" high="75" optimum="80" value="25"></meter>

<label for="value2">Medium</label>
<meter id="value2" min="0" max="100" low="30" high="75" optimum="80" value="50"></meter>

<label for="value3">High</label>
<meter id="value3" min="0" max="100" low="30" high="75" optimum="80" value="80"></meter>
  • Open all links in new tab : Add the <base> element to your <head>
<head>
    <base target="_blank">
</head>
  • Download link instead of diaplaying it :
<a href='path/to/file' download>
  Download
</a>
  • Use a fallback image if .webp isn't supported by the browser :
<picture>
  <!-- load .webp image if supported -->
  <source srcset="logo.webp" type="image/webp">
  <!-- Fallback if `.webp` images or <picture> tag not supported by the browser -->
  <img src="logo.png" alt="logo">
</picture>
  • Open device camera to capture image :
<input type="file" capture="{user|environnement}" accept="image/*>
  • Favicon Boilerplate (short version) :
<link rel="icon" href="/favicon.ico"><!-- 32×32 -->
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 180×180 -->
<link rel="manifest" href="/manifest.webmanifest">
Raw
js_tips.md

  • Scroll element into view in a single function : element.scrollIntoView({ behavior: "smooth" });

  • "Go back" button" : history.back()

  • Run event listener only once : element.addEventListener('click', () => console.log("run once"), { once: true });

  • Wrap console.log() arguments with curly brackets to see variable names : console.log({variable});

  • Get min/max value from an array :

const numbers = [6, 8, 1, 3, 9];
console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1
  • Sum elements in an array :
const numbers = [10, 20, 30, 40];
const sum = numbers.reduce((x, y) => x + y, 0);
console.log(sum); // 100
  • Find first element in array to pass a condition :
const numbers = [7, 14, 8, 128, 56];
const found = numbers.find(element => element > 10);
console.log(found); // 14

Or to get its index

const indexFound = numbers.findIndex(element => element > 15);
console.log(indexFound); // 3

Javascript style guide

On Airbnb's Github

Raw
tools.md

General dev tools

Algorithms

Images

  • Compress image without quality loss : Squoosh

  • Bulk compress images from terminal : find *.jpg | xargs -n1 -P8 -I{} convert -resize 20% "{}" "opt-{}"

  • Custom animated loader : loading.io

  • Turn plain screenshots into dazzling image assets : Screenstab

  • Create beautiful mobile & browser screenshots in seconds : Screenshot.rocks

  • Generate unique SVG assets : Haikei

  • Favicon generator : Favicon Generator. For real.

  • Hand-drawn vector illustration and icons : DrawKit

Useful sites for UI

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment