Tagged: tricks

Writing code is only one small piece of being a developer. In order to be efficient and capable at our jobs, we must also excel at debugging. When I dedicate some time to learning new debugging skills, I often find I can move much quicker, and add more value to the teams I work on. I have a few tips and tricks I rely on pretty heavily and found that I give the same advice again and again during workshops, so here’s a compilation of some of them, as well as some from the community.

Lots of useful debugging advice, well worth a read.

Let’s look at some ways we can use the browsers DevTools to do design work. There are a few somewhat hidden tricks you mind find handy!

A good article with some handy tips. I’ve only recently discovered Firefox’s Screenshot Node feature, it’s covered in this article and is very nifty! I hope it comes to Chrome soon.

A quick tip for using wget to download all images at a given URL.

A quick tip for disabling window shadows when taking screenshots in macOS. Terminals ready:

defaults write com.apple.screencapture disable-shadow -bool true

Followed by:

killall SystemUIServer

Nifty!

welcome.js is a tiny javascript file you can add to any web page to help novice users get the most out of the web.

An interesting use of the developer console, born out of disgust at Facebook’s implementation. I’m thinking this is too cool not to implement.

It’s possible to do this styling now, though, thanks to CSS counters. The trick is to remove the list-style, then apply the markers through pseudo-element counters.

Nice tip for styling HTML list markers with CSS. See demo.

I’m not the most talented coder in the world. No, it’s true. So I try to write as little code as possible. The less I write, the less there is to break, justify, or maintain.

Amen.

The background-attachment property has never seemed all that useful to me. I have always looked at it as some sort of old school design trick from the GeoCities days to get a repeating background to stay in place during scroll. Turns out a background with a fixed position can be much more useful than that.

Some nifty examples of the background-attachment CSS property. I really like how you can use this to achieve a fairly dramatic effect with relatively little effort.

A clever use of CSS functions not only solves known problems like establishing smarter grid systems but it also gives you more creative freedom. With browser support getting better and better, you should really take a critical look at your CSS and improve it with functions like calc().

It’s pretty cool how powerful CSS is becoming.

I’ve said it before, I love this guy’s enthusiasm. I also love his video format, it’s succinct, but fun. If you’re interested in Javascript, his YouTube channel might be worth a subscription.