umaar

Sometimes I think it's fascinating the rabbit holes we'll go down, when ultimately, the user just doesn't care.

TypeScript vs. plain JS

Logic-less templates like Mustache vs. Handlebars

Vue vs. React

Using async/await, and adding the relevant infrastructure to support that (transpiler)

Clean code practices in general

Unit tests, end to end tests

CSS BEM vs. tailwind

You can make indirect connections to imply the user does care, e.g. E2E tests catch a bug which meant the user didn't see it, but generally, these things are meaningless to them.

For my first course, I put time into those things - time taken away from making content. The more I think about it for my new course, the more I wonder should I just sell on a platform which already handles all of that, like gumroad.

Where's the line though? When is gumroad or squarespace not the answer?

Honestly, I'd completely avoid sleeps. I think it always comes back to bite you. In the end you need to learn and understand the context of the page to determine when the page has loaded.

When you say "wait for some DOM element", not sure what that refers to exactly, but how about using: `page.waitForSelector` and in addition, using the `visible: true` option?

It really depends on the page you're testing, feels like when I'm automating Wikipedia, I very rarely have to wait for stuff, whereas with JavaScript heavy sites, I use a custom wait function, or the waitForSelector with visible: true.

I'm working on a video course for all things browser automation, whether it's testing, scraping, auditing, deploying etc.

I'm keeping the codebase open on GitHub: https://github.com/umaar/learn-browser-testing/ so anyone who wants to follow along can do so for free.

I've almost finished some cool content such as:

- An Amazon price checker which sends you a text message when the price decreases

- An Playwright script which gets to Wikipedia Philosophy (https://en.wikipedia.org/wiki/Wikipedia:Getting_to_Philosoph...)

- Having an automation script constantly running on a cheap Raspberry PI

I've been running a mailing list for 5 years now, and one of the most requested features is an RSS feed https://github.com/umaar/dev-tips-tracker/issues/9

I always assumed RSS was dying out, but it's clear there's still a large audience for it, so I will be implementing it.

I've been wondering if there'll be a noticeable drop in mailing list subscribers, which in turn leads to less email sponsorships. Open rates + mailing list size are all that companies seem to care about when deciding to sponsor you.

But anyway I'd rather support users in consuming my content however they prefer, and figure out monetization options when it comes to that.

Turns out Google has been doing this for my own site on certain pages. If I search for:

devtools capture element screenshot

It has listed the exact instructions on the search results page: https://i.imgur.com/NTdDjZY.png

Can I get an outsider perspective, are those 4 list items shown in the rich snippet too many? Is it too wordy? I'm wondering if a single item which said:

Search for screenshot in the Command Menu (Cmd + Shift + P)

Would be better?

Generally, I like the 'rich snippets' feature, but I think they've gotten worse.

For example here's a reddit post I made from 6 years ago showcasing a search for 'mac shortcut screenshot' https://www.reddit.com/r/google/comments/1ou4i0/a_search_for...

It's extremely clear, and results in minimal cognitive effort in parsing the result.

Here's the result now: https://i.imgur.com/A726Dhw.png

There's so much more cruft:

- 4x low resolution screenshots which I initially thought were related to ads

- An extra URL

- Multi-step instructions

- Lots of extra words

- Bold formatting has been applied inconsistently

Seeing the text: "Command + Shift + 3" in big bold letters was great, but it's now changed into something else.

Hey thanks for that appreciate it. Yes not spending time on fancy things/random enhancements let's me actually focus on creating new content.

I learnt CSS in a similar way. I'd take Photoshop designs and try to recreate them in vanilla HTML + CSS:

https://jsfiddle.net/umaar/YNA5V/

https://jsfiddle.net/umaar/fu4TT/

I'd even make 3d graphics of things like the HTML5 logo: https://i.imgur.com/kuEYpSV.png

I posted this all to a community called "Forrst" (think of it like twitter, but curated for developers and designers).

I spent time giving feedback on other peoples work, I tried to ask insightful questions https://twitter.com/umaar/status/823915022917271552 to have an open discussion, I spent hours replying to comments every few days.

Then one day, Forrst got acquired by Zurb https://zurb.com/blog/zurb-acquires-forrst and later on it got shut down, and with that, I lost access to huge amounts of my work which I hadn't stored anywhere else (some stuff has been archived online, but not everything).

When it comes to web development tips, I now self-host on my own website and it's a really good feeling knowing that it'll be preserved: https://umaar.com/dev-tips/

I noticed there are a number of popups/stickies/banners on this site. How do folks feel about blocking them with uBlock considering it's a nonprofit, and one of those banners was asking for a donation?

The page in incognito: https://i.imgur.com/EHhGjJ9.png

The page with uBlock, sticky elements removed, and the sidebar removed: https://i.imgur.com/mNJFMyj.png

Can you comment on the pricing? Am I understanding correctly that 1 year of your VPN service costs $195 USD?

This is a great explanation thank you! Makes much more sense now.

Will indeed read into the all-intra format.

Sounds fascinating, stuff like that interests me a lot. Hope that video surfaces one day, would really like to see it.

As a little side project, I've been trying to automate creation of those "1 second everyday" style videos [1], and used FFmpeg to achieve this.

For things like trimming and concatenating videos, one thing that surprised me was that it was slower than using a tool like ScreenFlow. Note, we're talking about hundreds of gigabytes worth of 4K videos.

slower = When I say slower, I mean, if I manually performed the same operation in a professional video editing tool like ScreenFlow, the time it took ScreenFlow to export a video was quicker than the time it took FFmpeg to finish executing the command.

Interestingly, there seems to be a fast and a slow way to do things in FFmpeg [2]. The slow way is free of quirks, whereas the fast way introduces something unexpected to the video, like a half a second of a black screen with audio continue playing like normal.

I'm still curious as to how a tool like ScreenFlow can achieve faster trimming/concatenation/subtitle overlaying, than FFmpeg. I suspect if I read their documentation and do some more research, I'll discover a more optimal way of ordering the various flags on the command line which can speed up the execution, while preserving accuracy.

[1] https://github.com/umaar/video-everyday

[2] https://superuser.com/questions/499380/accurate-cutting-of-v...

I'm all for web apps, but does CS actually require admin rights?

> disk space

CS just downloaded 185mb of network resources for me to play. I would have thought those resources are stored on my disk, and not just in memory.

> installation time

That 185mb of resources took ~1 minute to download. By the time it had finished, it told me the server was full.

Regardless this is still very impressive.

When it comes to browser automation tests, everywhere I've worked at suffered from intermittently failing tests. When I was at the Ministry of Justice (UK), I configured CircleCI to run tests hundreds of times [1] (over a number of days) through cron jobs. This allowed me to reflect on all test results, and find out what failed most often and eventually solve those root causes. This strategy worked well.

Interestingly enough, just today I posted a GitHub thread [2] and asked the community to 'thumbs up' the video course they'd like for me to create. "Learn Browser Automation" is currently the highest voted. If it's the one I end up making, a huge focus will absolutely be on: How to reduce test flakiness with headless browsers.

Words of advice, avoiding sleep() and other brittle bits of code will help. But in addition, run your tests frequently to catch out the flakiness early. Invest in tooling which helps you diagnose failing tests (screenshots, devtools trace dumps). Configure something like VNC so you can remotely connect to the machine running the test.

[1] https://github.com/ministryofjustice/fb-automated-tests/blob...

[2] https://github.com/umaar/dev-tips-tracker/issues/33

I've been doing voice + screencasting on a modern MacBook Pro. The fans seem to intermittently kick at full blast while connected to a 4k external display, or sometimes it's just Dropbox doing CPU intensive things. Either way it's disruptive to the sound, and background noise removal in post doesn't completely fix it.

I've never had to think about heat dissipation so much. Might try a laptop cooling pad.

Thanks Kasra, yes it seemed 'spyware' was disputed and I didn't want to jump to any conclusions. But it's good to know it's a non issue.

RE: 2fa. Brute force protection is a step in the right direction, but passwords can leak in various ways, brute force isn't the only attack vector. I'll comment in the actual two factor auth discussion on the CapRover GitHub issue though.

Hi sneak, I left a comment explaining my journey with CapRover in this HN thread. In there I explained one thing which concerned me was "netdata image in use is spyware #553" which you raised last year.

I haven't yet gone through the discussion but would you mind letting me know if you're satisfied with the outcome? You appeared to be fighting for increased privacy, so thank you.

Also you'll see that in my comment, I raised another issue RE: lack of two factor auth. I'm curious, why do you think single factor auth is fine? Simply because brute force for a 30 char password is not practical on todays hardware? Or is there something I'm missing?

A few weeks ago I mentioned on HN [1] I was looking for something where I can take a $5 VPS and install a bunch of Node.js apps easily. I did this with DigitalOcean + CapRover and it was extremely smooth. Initialising the app, enabling SSL, deploying - everything just worked. It was great.

I was hoping to move over, but I won't just yet. Was hoping for two factor auth support [2]. The dashboard was publicly facing and only guarded by a password.

There was also an issue which concerned me: 'netdata image in use is spyware' [3] - however I have not digested that thread and its related discussions to understand if it's a genuine issue yet.

Finally, I was hoping to understand more about the motivations of the project. Who's funding this project? The OpenCollective [4] page shows an annual budget of $529.55 USD? What are the long term goals? How can they sustain themselves?

I use PM2 for running some of my Node.js apps, but I can see there's also PM2 Plus and PM2 Enterprise [5] which helps me understand how they're able to sustain the free version.

I don't mean to be pessimistic towards a piece of software which actually works extremely well. Just want to better understand its long-term suitability for deploying production-grade applications.

[1] https://news.ycombinator.com/item?id=23278095

[2] https://github.com/caprover/caprover/issues/493

[3] https://github.com/caprover/caprover/issues/553

[4] https://opencollective.com/caprover

[5] https://pm2.io/pricing

I like this style of writing, feels like storytelling, rather than something purely instructional. As someone who doesn't do Rust, the code lost me a little, however it has been one of the most loved technologies on the Stack Overflow Developer Survey [1] and that has me intrigued.

On the subject of technical interviews, I recently collected, cleaned up and published [2] the code exercises I submitted to Monzo, Geckoboard, SitePen & Masabi (and a Google one which I didn't actually submit).

All code solutions, except one, let me proceed to the next stage of the application process, and I hope this can help others, or at least offer an interesting insight.

[1]: https://insights.stackoverflow.com/survey/2020#most-loved-dr...

[2]: https://umaar.com/blog/my-code-exercise-submissions-part-1/

I had a similar issue for the tweet embedding, so I wrote a Node.js script to download tweets via their API, and construct the HTML and CSS necessary to display it on my own website, without needing to include their JavaScript: https://github.com/umaar/better-twitter-embed

As an example, to display 442 tweets on one page, it's around 2.4mb of network download - most of that is from media which some of the tweets use.

This way, text is selectable and links can be clicked.

Yeah the hiding of the protocol in the URL was a pain to deal with. I updated Chrome today and looks like there's a way to turn this off:

1. Enable chrome://flags/#omnibox-context-menu-show-full-urls

2. Right click the address bar

3. Select 'Always show full URLs'

Instead of seeing: news.ycombinator.com You'll now see: https://news.ycombinator.com

I made a Tell HN post about it: https://news.ycombinator.com/item?id=23322705

A while back I installed ServerPilot which automatically sets up Nginx/Apache/PHP/MySQL for you. It also handles security updates. This made those $5 VPS' so much more appealing [1] as I could install lots of small Node.js apps on a single server, and avoid managed hosting providers who seem to prefer charging per app instance.

Anyway ServerPilot then scrapped their free plan so I've been looking for an alternative. cloudron looks cool, I don't see anything specific to Node.js/Express, but it does have a LAMP stack which includes Apache, so I might try that. Otherwise I'll probably use something like CapRover [2], a self-hosted platform as a service.

[1] https://twitter.com/umaar/status/1256155563748139009

[2] https://caprover.com/

I repurposed a WebGL globe to visualise anonymous Wikipedia edits made around the world: https://umaar.com/globe/

This is the original, which visualised tweets: https://github.com/cedricpinson/globetweeter

Nice work. I investigated a few similar services, mailtrap, mailgun, mailosaur. I wanted to try having my end-to-end tests assert that the email which got sent out actually included the correct info. (As in, you request a password reset to test@emailtesting.tld, and then you make API calls to assert the email exists and includes the correct text)

It works well for peace of mind as it gave me a high degree of confidence that I'm testing almost exactly what the end-user would experience. However, it does add 5-10 seconds of delay to your tests while polling the email inbox, it can be a little expensive depending on your test frequency, I think there are even some cases where you can hurt your email deliverability stats during automated email sending.

In the end, I decided to keep this test manual which I run every now and then only after making big changes. Instead integration tests which mock the email service are probably enough for my use case.

Curious how do others test the end-to-end behaviour of their web application, when it comes to emailing?

That's really useful, appreciated.

To answer your q (btw it's not a popup), I tried to explain in my comment you're replying to:

> sometimes I do the thing that works/is quickest to do, move on, and then revisit when I have time

Knowing me, it was probably something where, at the time of building (2015), I saw elsewhere - naively assumed it was a good idea/it works, copied it and moved on. I didn't give it as much thought as I could have. Now it's a case to prioritise that and improve it, along with some other much needed optimisations.

Sorry you feel that way. I'm an independent creator and agree there's lots of room for improvement on everything I build, sometimes I do the thing that works/is quickest to do, move on, and then revisit when I have time - the design of the site, web optimisation techniques, a11y best practices, offline support, less gimmicky call-to-actions, marking deprecated features are examples of things I defo want to prioritise and get done - but I agree with you, I don't want to annoy anyone so I should focus what you mentioned first.

Btw using mobile emulation I tried iPhone 5/SE/6/7/8/X, and on none of those did the signup form take up the whole screen. Maybe it's because the emulation doesn't have browser frames? Either way will eventually shrink that down so it doesn't occupy so much screen real estate.

> Why if I’ve never even seen your site, do you think that the first thing I want to do is divulge my email address to you and receive spam?

Don't know why you think my emails are spam! I think there are nicer way to convey your message, but appreciate you are sharing your thoughts. I myself often use uBlock origin to select + remove sticky headers/sidebars/ads which often detract from the main reading experience.

I make Dev Tips: https://umaar.com/dev-tips/ a place to share little tips primarily with DevTools. Currently at 200+ tips.

Few other random things I've written:

* The Benefits of Speaking at Tech Conferences: https://www.freecodecamp.org/news/the-benefits-of-speaking-a...

* Data Visualisation with 1 Billion Shazam Music Recognitions: https://www.freecodecamp.org/news/data-visualisation-with-1-...

* Open Source: Learning new code techniques and concepts: https://umaar.com/dev-tips/200-learning-from-open-source/

* Programmatically creating images with the CSS Paint API: https://www.sitepen.com/blog/programmatically-create-images-...

In addition to using a video which would be the biggest improvement here, `font-display: swap;` can help with the perceived performance when using custom web fonts.

Made a video on how to use Chrome DevTools in applying this technique: https://www.youtube.com/watch?v=yRrrL0Mg1pM