# iamsteve.me

> Tips and tutorials about the design and build of web interfaces. Through design and code tutorials focused on maintainable CSS, good typography and UI fundamentals by Steve McKinney.

## Best articles

- [How to use inline-block for layout](https://iamsteve.me/blog/inline-block): markdown at https://iamsteve.me/api/content/inline-block
- [Maintainable critical and asynchronous CSS](https://iamsteve.me/blog/critical-asynchronous-css): markdown at https://iamsteve.me/api/content/critical-asynchronous-css
- [Javascript without jQuery](https://iamsteve.me/blog/javascript-without-jquery): markdown at https://iamsteve.me/api/content/javascript-without-jquery
- [Images with srcset & picture](https://iamsteve.me/blog/images-with-srcset-picture): markdown at https://iamsteve.me/api/content/images-with-srcset-picture
- [SVG reusability & animation](https://iamsteve.me/blog/svg-reusability-animation): markdown at https://iamsteve.me/api/content/svg-reusability-animation
- [Overcoming a couple of issues with SVG filter effects](https://iamsteve.me/blog/overcoming-a-couple-of-issues-with-svg-filter-effects): markdown at https://iamsteve.me/api/content/overcoming-a-couple-of-issues-with-svg-filter-effects
- [Manage text colour with ease](https://iamsteve.me/blog/manage-text-colour-with-ease): markdown at https://iamsteve.me/api/content/manage-text-colour-with-ease
- [Using BrowserSync and Safari for testing your responsive website](https://iamsteve.me/blog/using-browsersync-and-safari-for-testing-your-responsive-website): markdown at https://iamsteve.me/api/content/using-browsersync-and-safari-for-testing-your-responsive-website
- [Sass hints & tips revisited](https://iamsteve.me/blog/sass-hints-tips-revisited): markdown at https://iamsteve.me/api/content/sass-hints-tips-revisited
- [Object fit for full viewport images with ease](https://iamsteve.me/blog/object-fit-for-full-viewport-images-with-ease): markdown at https://iamsteve.me/api/content/object-fit-for-full-viewport-images-with-ease
- [Opt in style](https://iamsteve.me/blog/opt-in-style): markdown at https://iamsteve.me/api/content/opt-in-style
- [Adobe generator syntax ‘cheatsheet’](https://iamsteve.me/blog/adobe-generator-syntax-cheatsheet): markdown at https://iamsteve.me/api/content/adobe-generator-syntax-cheatsheet
- [Using Photoshop linked smart objects for more modular designs](https://iamsteve.me/blog/using-photoshop-linked-smart-objects-for-more-modular-designs): markdown at https://iamsteve.me/api/content/using-photoshop-linked-smart-objects-for-more-modular-designs
- [Typography for beginners: type scale, line height & lengths](https://iamsteve.me/blog/type-scale-line-height-lengths): markdown at https://iamsteve.me/api/content/type-scale-line-height-lengths
- [Using webkit2png to generate responsive screenshots](https://iamsteve.me/blog/using-webkit2png-to-generate-responsive-screenshots): markdown at https://iamsteve.me/api/content/using-webkit2png-to-generate-responsive-screenshots
- [Using analytics again with simple analytics](https://iamsteve.me/blog/using-analytics-again-with-simple-analytics): markdown at https://iamsteve.me/api/content/using-analytics-again-with-simple-analytics
- [Rules I follow when typesetting](https://iamsteve.me/blog/rules-i-follow-when-typesetting): markdown at https://iamsteve.me/api/content/rules-i-follow-when-typesetting
- [Bento grid layout with CSS grid and container queries](https://iamsteve.me/blog/bento-layout-css-grid): markdown at https://iamsteve.me/api/content/bento-layout-css-grid
- [About version 8](https://iamsteve.me/blog/about-version-8): markdown at https://iamsteve.me/api/content/about-version-8
- [About version 7](https://iamsteve.me/blog/about-version-7): markdown at https://iamsteve.me/api/content/about-version-7
- [The best ink trap typefaces for websites](https://iamsteve.me/blog/the-best-ink-trap-typefaces-for-websites): markdown at https://iamsteve.me/api/content/the-best-ink-trap-typefaces-for-websites
- [‘Atomic’ font size management with Sass](https://iamsteve.me/blog/atomic-font-size-management-with-sass): markdown at https://iamsteve.me/api/content/atomic-font-size-management-with-sass
- [Tips for using colour effectively in web illustration](https://iamsteve.me/blog/tips-for-using-colour-effectively-in-web-illustration): markdown at https://iamsteve.me/api/content/tips-for-using-colour-effectively-in-web-illustration
- [Nice and easy lazy loading with lazysizes.js](https://iamsteve.me/blog/nice-and-easy-lazy-loading-with-lazysizes-js): markdown at https://iamsteve.me/api/content/nice-and-easy-lazy-loading-with-lazysizes-js
- [A year in writing — 2017](https://iamsteve.me/blog/a-year-in-writing-2017): markdown at https://iamsteve.me/api/content/a-year-in-writing-2017
- [Illustrator quick tip: which stroke alignment?](https://iamsteve.me/blog/illustrator-tip-which-stroke-alignment): markdown at https://iamsteve.me/api/content/illustrator-tip-which-stroke-alignment
- [Search overlay with smooth reveal animation](https://iamsteve.me/blog/search-overlay-with-smooth-reveal-animation): markdown at https://iamsteve.me/api/content/search-overlay-with-smooth-reveal-animation
- [Visual design tips you can apply immediately](https://iamsteve.me/blog/visual-design-tips-you-can-apply-immediately): markdown at https://iamsteve.me/api/content/visual-design-tips-you-can-apply-immediately
- [Overcoming design roadblocks](https://iamsteve.me/blog/overcoming-design-roadblocks): markdown at https://iamsteve.me/api/content/overcoming-design-roadblocks
- [Illustrator quick tip: export a colour palette quickly](https://iamsteve.me/blog/illustrator-quick-tip-export-a-colour-palette-quickly): markdown at https://iamsteve.me/api/content/illustrator-quick-tip-export-a-colour-palette-quickly

## Categories

- [Design articles](https://iamsteve.me/category/design)
- [Code articles](https://iamsteve.me/category/code)
- [Typography articles](https://iamsteve.me/category/typography)

## Optional

- [Full archive](https://iamsteve.me/blog)
- [RSS feed](https://iamsteve.me/feed.xml)
- [About](https://iamsteve.me/about)