CSS and JS code coverage in Chrome DevTools

Re:CSS and JS code coverage in Chrome DevTools by umaar on Wednesday July 12, 2017 @10:22AM (#14752706)

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.

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by HoyaSaxa on Wednesday July 12, 2017 @11:09AM (#14753184)

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?

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by umaar on Wednesday July 12, 2017 @11:56AM (#14753581)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by jflowers45 on Wednesday July 12, 2017 @11:33AM (#14753398)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by leeoniya on Wednesday July 12, 2017 @11:38AM (#14753436)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by jflowers45 on Wednesday July 12, 2017 @11:42AM (#14753456)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by talmand on Wednesday July 12, 2017 @12:53PM (#14754160)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by leeoniya on Wednesday July 12, 2017 @12:49PM (#14754121)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by untog on Wednesday July 12, 2017 @12:53PM (#14754166)

"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?

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by guiambros on Wednesday July 12, 2017 @05:27PM (#14756841)

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/

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by kemayo on Wednesday July 12, 2017 @11:05AM (#14753129)

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.

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by nreece on Wednesday July 12, 2017 @09:13PM (#14758078)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by reledi on Wednesday July 12, 2017 @05:51PM (#14757013)

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.

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by reificator on Wednesday July 12, 2017 @11:41PM (#14758539)

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

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by niutech on Monday July 17, 2017 @07:26AM (#14787485)

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.

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by nimos on Wednesday July 12, 2017 @02:24PM (#14755118)

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.

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by e1g on Wednesday July 12, 2017 @10:24AM (#14752726)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by umaar on Wednesday July 12, 2017 @10:33AM (#14752810)

Thank you, means a lot!

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by Adam89 on Wednesday July 12, 2017 @11:07AM (#14753160)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by umaar on Wednesday July 12, 2017 @11:14AM (#14753220)

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

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by jxm262 on Wednesday July 12, 2017 @04:18PM (#14756261)

This is incredibly awesome. thanks for sharing!

[ Parent | on HN ]

Re:CSS and JS code coverage in Chrome DevTools by throwasehasdwi on Wednesday July 12, 2017 @04:33PM (#14756383)

this is sick

[ Parent | on HN ]