100 Javascript & Web Development Tips


This book is no longer available for sale.

100 Javascript & Web Development Tips

Bite-sized Solutions to Common Problems

About the Book

Back in 2017 I made a challenge for myself: I wanted to collect 100 things that are useful and I encounter regularly during my work as a Javascript/web developer. To my surprise, I finished in about a week.

Looking at that list I realized that many of them are far from trivial and required in-depth understanding of the technology to solve it. So I wrote short articles about each of them, detailing when that particular problem happens and how to solve it. This was the foundation of a weekly tips newsletter.

Ever since it went online, I've been keeping the content up-to-date, so that when some new version is released or a service goes offline it is reflected in a timely manner. Because of this ongoing maintenance, these tips are as relevant as ever.

This book is the collection of all 100 tips I wrote and polished over the years. It spans a range of topics from elementary Javascript, such as the array destructuring operator and regular expressions, to some more targeted technologies such as RxJS streams and immutable collections. I'm sure you'll find at least some of them that you didn't know about.

About the Author

Tamás Sallai
Tamás Sallai

Given a task that requires writing software, an expert provides better and more reliable solutions. I write articles and books to help you be that expert.

I'm a software developer focusing mostly on cloud computing and web technologies. I'm especially interested in how to handle edge cases to end up with dependable software. One of my main focus is security and how each part affects the whole system.

I co-author the advancedweb.hu blog where I've published more than a hundred technical articles.

Table of Contents

  • 1. Swap variables using the array destructuring operator
  • 2. Using console.group for hierarchical logging
  • 3. Combine validators
  • 4. RxJs first() vs take(1)
  • 5. Use Object.freeze for easy immutability
  • 6. Use SRI hashes to secure CDNs
  • 7. Serve files from GitHub
  • 8. Proper error handling in Promises
  • 9. Use classList to manipulate classes
  • 10. Merge objects using Object.assign
  • 11. Shuffle an array the right way
  • 12. Dynamic object property
  • 13. Use the initialValue argument of reduce
  • 14. Use <wbr/> to break words
  • 15. How to cancel a Promise
  • 16. How to check for undefined
  • 17. How to create a range of numbers
  • 18. Pass multiple values through Promise chains
  • 19. How to generate a UUID
  • 20. Run promises sequentially
  • 21. RxJS reduce vs scan
  • 22. Use the index argument in Lodash FP
  • 23. Convert Node callbacks to Promises
  • 24. RxJS pairwise with startWith
  • 25. Trailing comma
  • 26. How to make circular pairs
  • 27. Conditionally set an immutable value
  • 28. Scope async/await variables
  • 29. Use DOMContentLoaded to wait for page ready
  • 30. Wrap generators in iterables
  • 31. Sort strings containing numbers
  • 32. Use boundingClientRect to get an element's position
  • 33. Use cacheResult of ImmutableJs Seq
  • 34. Use a CORS proxy to access public APIs
  • 35. Use streaming collection processing with a limiting step
  • 36. Bind function arguments
  • 37. Return an object literal from an arrow function
  • 38. When default parameters differ from manual initialization
  • 39. Use ImmutableJs's update for code reuse
  • 40. Get an event's coordinates relative to an element
  • 41. How to copy an Array
  • 42. How to use named and default imports together with ES6 modules
  • 43. Use class methods as functions with React.PureComponent
  • 44. RxJs filter with previous value
  • 45. Convert a generator function to and RxJs Observable
  • 46. How to replace characters from the beginning of a String
  • 47. Use SVG viewBox for easy zooming
  • 48. Use a seeded random number generator
  • 49. The difference between for..of and for..in
  • 50. Use MutationObserver to detect DOM changes
  • 51. Convert a NodeList to an Array
  • 52. Know the precedence of the logical operators
  • 53. Start a Promise chain with Promise.resolve()
  • 54. Use script defer to wait for the DOM
  • 55. The difference between filter and takeWhile for lazy collections
  • 56. How to get all the function arguments
  • 57. How to store binary files in localStorage
  • 58. How to use forEach with async/await
  • 59. Make an object callable
  • 60. How to convert an Array of key-values to an Object
  • 61. How to get consistent timing with requestAnimationFrame
  • 62. Use String ids from backends
  • 63. Use a Set instead of an Array
  • 64. Use WeakMap to store data for DOM nodes
  • 65. Promisify FileReader
  • 66. Implement Drag & Drop with RxJs
  • 67. Generate all whole numbers
  • 68. How to make an infinitely indexable array
  • 69. Debounce user inputs
  • 70. Use higher-order functions for reusability
  • 71. Use a Set to remove duplicates
  • 72. Use the Web Crypto API to generate hashes
  • 73. Generate secure random numbers
  • 74. Use ImmutableJs Records as immutable Objects
  • 75. Preserve the original index before filtering or sorting
  • 76. How to detect no elements in an RxJS stream
  • 77. Use MessageChannel to respond to a postMessage call
  • 78. Use the "once" option for single-shot event listeners
  • 79. Know the difference between sort and sortBy
  • 80. How to await for multiple results in parallel
  • 81. Use preserveAspectRatio="none" for correct element positions
  • 82. Propagate errors from web workers
  • 83. Use Pointer Lock for infinite mouse movement
  • 84. Use the autocomplete attribute to control how autofill works
  • 85. How to detect an idle RxJs observable
  • 86. Why reverse sorting is not the same as sorting and reversing
  • 87. Utilize CSP to handle mixed content
  • 88. Use crossorigin="anonymous" when fetching public resources
  • 89. Use autocapitalize on inputs for better mobile experience
  • 90. Use Content Security Policy to deny IFraming
  • 91. Use an ellipse instead of a circle with preserveAspectRatio="none"
  • 92. Use createElementNS when creating SVG elements
  • 93. Use blocks to scope block-scoped variables
  • 94. Use SameSite attribute to enhance cookie security
  • 95. Wait in an async function
  • 96. Async synchronize
  • 97. Use Promise.race for user-friendly timeouts
  • 98. Speed up your site with perfect caching
  • 99. Use CSS variables to communicate between JS and CSS
  • 100. Use named capture groups in RegExp
  • About the author

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

80% Royalties. Earn $16 on a $20 book.

We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub