Skip to content

Instantly share code, notes, and snippets.


Vitaly Friedman vitalyfriedman

View GitHub Profile
View gist:14d5f577b2bdefa1d678d8cc98aa02e2
javascript:(function(){ let style = `<style>:root { --violation-color: red; /* used for clear issues */ --warning-color: orange; /* used for potential issues we should look into */ } /* IMAGES */ /* * Lazy-Loaded Images Check * ==== * Highlight any lazy loaded images so we can see if any are inside the viewport * * Uses an outline so it can pair with Unsized Images and Legacy Format checks * Credit: */ img[loading=lazy] { outline: 10px solid var(--warning-color) !important; } /* * Unsized Images Check * ==== * Highlight images that don't have a height or width attribute set * * Uses a border so it can pair with Lazy-Loaded and Legacy Format checks */ img:not([height]), img:not([width]) { border: 10px solid var(--violation-color) !important; } /* * Legacy Format Check * ==== * Highlight tiff's and bmp's because we can do better * Also JPG's because maybe we can use something like webp or avif instead * * Use opacity so w

Authors Guide: Article Template

Please submit your article including all of the information below. You can include this as a seperate file if you like - but please complete each section. Please use an online service to write your article, for example Dropbox Paper,, Google Docs. For more help, see the editorial guide

Article Title

Ideally under 67 characters, what problem does this article solve?

Quick Summary

View Hero Element Hack
/* Courtesy of Steve Souders, #ImageCon17, San Francisco, US */
/* Details: */
<link rel="stylesheet" href="/huge-slow.css">
<img src="hero.jpg"
vitalyfriedman / gist:a1f786dd6ad30eb055ade87ad7939191
Last active February 1, 2017 13:51
The schedule for the Live event on Feb 2nd. Streaming from London
View gist:a1f786dd6ad30eb055ade87ad7939191
12.00PM Opening Talk with your host, Vitaly Friedman.
12.15PM Adobe XD Keynote: “Assumptions Prohibited” by Andre Jay Meissner.
12.45PM Interview with Paul Boag on digital strategy, new UX challenges (chat bots, small screens, VR) and UX in a responsive world.
1.10PM Interview with Julien Denoel, Christophe Mallet and Ramy Najjar from Exze to talk about VR and itsdesign challenges, development tips and more.
1.35PM UX Panel: hosted by Vitaly Friedman and Andre Jay Meissner with Chris Constantine (Head of UX at Syzygy) and Iain McConchie (Head of Design at The App Business).
1.05PM Discussion of UX trends with Romain Colin and Brendan Dawes.
2.30PM Interview with Oliver Reichenstein on the role of iconography in interface design and typography evolution.
2.55PM Interview with Adrian Zumbrunnen from Google on Conversational Design.
3.20PM Interview with Stefanie Posavec, a data-centered designer, will review how to make sense of data and provide her killer tips for data visualization.
View Pricing Plans Design Checklist
1. Highlight a recommended option,

2. Allow users to switch currency (€/$/£)

3. Allow users to switch pricing monthly/yearly

4. Keep the entire pricing plan area clickable

5. Use slider to calculate how much a user would save

6. Provide free first month for good engagement

7. Prominently highlight testimonials prominently

8. Repeating call to action on top and bottom

9. Sell benefits instead of features

10. Indicate that users can cancel any time

vitalyfriedman / gist:5943304
Created July 7, 2013 12:24
Resizing JPEG images in a folder (two versions).
View gist:5943304
ls *.jpg|while read i;do convert $i -strip -interlace Plane -resize "500x" -unsharp 2x0.5+0.5+0 -quality 90 `basename $i .jpg`_small.jpg; convert $i -strip -interlace Plane -resize "1000x" -unsharp 2x0.5+0.5+0 -quality 90 `basename $i .jpg`_large.jpg; done