Skip to content

Instantly share code, notes, and snippets.

@thinkjrs

thinkjrs/web-dev-best-practices.md

Last active November 20, 2020 20:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save thinkjrs/c490dedfe44a6b7c56b2155d4905b957 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save thinkjrs/c490dedfe44a6b7c56b2155d4905b957 to your computer and use it in GitHub Desktop.
Download ZIP
Notes on best practices for web development.
Raw
web-dev-best-practices.md

Best practices for the web

Add width and height to <img>

This helps browsers render the page faster with less CPU, plus keeps an image from causing page jump. See this css working group issue for more.

<style>
  img {
    width: 100%;
    height: auto;
  } 
</style>
<img src="hero_image.jpg" alt="" width="500" height="500">

All recent, including Safari + iOS 14, browser user agents will add a 'aspect-ratio: attr(width) / attr(height)' to the page css.

⚠️ iOS nees any images inside a flex container to contain align-items: start (Tailwind class items-start) on its immediate parent to avoid squishing! ⚠️

See Google's web dev site for more on responsive images

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