Umar Hansa

I've put lots of little coding solutions, links to my videos and articles on my website [1], and have sent this to potential employers in the past for web dev jobs. It definitely helped accelerate things, and on 3 occasions I didn't have to do their take home test since my GitHub was enough. I don't have an up to date CV and my LinkedIn is empty. I've also heard of potential colleagues giving positive sentiment to the hiring manager/boss: "oh that guy, I'm subscribed to his mailing list, he's good". I've received a good number of offers, and one thing I've started to wonder: are interviewers thinking I'm a great dev because all these little side projects supposedly make me a better web developer? Or are they hoping I'll increase exposure to their brand since I already do talks and write articles? I hope it's not the former, all the time I spend writing, doing talks etc. it's taking time away (with the exception of software-based side projects) from me learning about the art of software engineering. [1] https://umaar.com

We (Chrome DevTools) have had inline breakpoints since at least January 2017: https://umaar.com/dev-tips/129-inline-breakpoints/ The human-friendly variable mapping is very interesting, though. We'd love feedback on how well it works out in the wild.

It's also pretty stuttery on my 2017 MBP in Chrome, for what it's worth. Maybe try developing with CPU throttling activated in the Chrome DevTools? https://umaar.com/dev-tips/88-cpu-throttling/

> since devtools doesn't keep a log of all your changes It does now, although you'll have to find it. :) Flavio mentioned this below, but peek at the new Changes panel: https://umaar.com/dev-tips/137-changes-panel/ And while it does track changes to all resources and inspector-stylesheet, any changes made to inline styles aren't captured yet. That aside, styleurl looks great and clearly improves the collaboration workflow.

This is amazing. I just tried editing a minified CSS, while the Chrome Dev Tools have a way to show the changes (https://umaar.com/dev-tips/137-changes-panel/) the result I get is the whole minified line. This extension just tells me what things changed, so I can put them in another CSS file without editing the original minified CSS. Thank you!

If you use Chrome DevTools, there are a few resources that I think are really useful for getting the most out of them and making the workflow a bit easier. Paul Irish has a great roundup here : https://youtu.be/HF1luRD4Qmk Umar Hansa has a great mailing list for DevTools tips, and there are some good ones to browse here : https://umaar.com/dev-tips/

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/

I use source-map-explorer to see what's inside. Lighthouse Treemap provides a similar view. [source-map-explorer]: https://github.com/danvk/source-map-explorer [Lighthouse Treemap]: https://umaar.com/dev-tips/270-devtools-lighthouse-treemap/

possibly related: * https://umaar.com/dev-tips/241-puppeteer-recorder/ * https://umaar.com/dev-tips/248-recorder-playback/ * https://developer.chrome.com/docs/devtools/recorder/ I use Deno and its standard library for testing with Puppeteer. I've found unit tests overrated and scenarios underrated (ie testing pyramid).

Tacking a custom header to the response is a nice trick! Could be particularly useful for GraphQL apps where every response is a big opaque answer from `/api/graphql`: Add the GraphQL operation name to the response header. This will also help with Chrome Devtools where you can add custom headers to the Network tab, otherwise you just see tons of POST reqs to `/api/graphql`: https://umaar.com/dev-tips/115-manage-network-response-headers/

Those have worked for a while now? Like https://umaar.com/dev-tips/129-inline-breakpoints/ The bigger issue is when local variables aren't captured by the context when paused in chrome. I'm curious how the Firefox devtools handle that.

Also, http://devtoolstips.com/ and https://umaar.com/dev-tips/.

Here you have +100 more: https://umaar.com/dev-tips/

Just the links from…