Hacker News Reader

Comment by umaar | Hacker News Reader

If you're interested in staying up to date with Chrome DevTools, I run this project called Dev Tips: https://umaar.com/dev-tips/

It contains around 150 tips which I display as short, animated gifs, so you don't have to read much text to learn how a particular feature works.

View on HN

Could you share some best practices you've learned in generating animated product gifs? For instance, what software you use, what settings have you tuned, etc?

Generally, I'd say: keep it short and digestible. Also watch out for extra noise on the screen, otherwise it'll distract the viewer. And having an ending transition can be useful for understanding when the gif is done, since their looping nature can make this aspect confusing.

Software: Typically Screenflow. It has a built in Gif preset which I'll sometimes use, or if better compression is needed: https://gist.github.com/dergachev/4627207

I use ScreenFlow for screen recording and they added export as animated gif recently. It's so easy - highly recommend it.

https://www.telestream.net/screenflow/overview.htm

http://blog.bahraniapps.com/gifcam/

https://www.cockos.com/licecap/

i don't mean to be snaky, but c'mon: https://www.google.com/search?q=gif+recorder

I think the spirit of the question was "how best to do it from the gazillion options that are out there"

Plus more of the idea of "I think you make good stuff, would you be willing to share how you did it?"

there aren't a gazillion options, though; it's more like 5.

"Which of the five options for GIF recording do you recommend" is still a valid question though, no? Why not save everyone the time of trying all five themselves?

Thanks for sharing, and for creating it! Great work. The tip on how to capture full sized screenshots without a browser extension[1] was already worth the visit.

[1] https://umaar.com/dev-tips/151-screenshot-capture/

Maybe add an RSS feed? I can consume it now because my RSS reader (NewsBlur) has an email gateway, but that's still kinda jumping through silly hoops.

* shameless plug * Create a RSS feed with Feedity: https://feedity.com

I wish I could subscribe to mobile push notifications (without having to keep the site open or download an app) instead of subscribing to a mailing list. Does anything like this exist?

I've found over the years that emails as notifications get ignored by me, no matter how interested I was at the time of subscription.

Service Workers can receive push notifications for a site, after the user confirms permissions.

https://developers.google.com/web/fundamentals/getting-start...

Nice, but why don't you convert all those huge GIFs to HTML5 videos using e.g. Gfycat? Animated GIFs are loading very slowly and wasting my precious data plan.

Wow nice. I feel like a real noob I didn't even know about the command palette. It's too bad my friends on facebook aren't sharing these instead of all the damn recipe gifs.

Two thumbs up for @umaar work - absolutely love the bits of knowledge and the GIF format. Thank you for discovering & sharing actually useful tips.

Thank you, means a lot!

I was looking for a course like this, thank you!

I guess you're talking about the Modern DevTools course which Dev Tips links to, thanks! I'm working on new course content every week or so.

If you want to influence future content, check out: https://github.com/umaar/dev-tips/issues/27

This is incredibly awesome. thanks for sharing!

this is sick

Reply on news.ycombinator.com