VideoYouTube

Our SponsorTrackJSJavaScript breaks sometimes. Even the code you write. You need to know when things start crashing in production.

TrackJS Front-End Monitoring quickly integrates with your front-end or node application, regardless of framework, so you know when a bug gets out. TrackJS installs in minutes, and you get context about what the user, network, and application were doing before an error. It's like having an airplane's blackbox in your UI, so you can find, recreate, and fix problems fast.

TrackJS is an engineer-owned cloud service that will make your JavaScript better and your website more reliable. Try it free at TrackJS.com.

Today’s GuestN/A

Your HostsDavid Walsh
@davidwalshblog
https://davidwalsh.name

Todd Gardner
@toddhgardner
https://todd.mn

Episode SummaryRebuilt trackjs.com
Pride in small, fast sites
Static content, doesn’t need a lot of JavaScript. Sparkle
Lots of people focus on BIG javascript--expansive sites, big teams
We want to share some lessons on SMALL javascript, and how to do it well
You don’t need a framework
No React, No jQuery, No Mootools.
Big sledgehammers
Modern browsers--everything except IE11 basically, give you everything you need.
Avoid JavaScript where possible
Progressive Enhancement!!!CSS Can do magic things
Hidden Input tricks
TrackJS Menu
Don’t expect scripts to run/load.
Couple times a day we see failures. What does the site look like when the scripts fail?
No-js yes-js classes.
Video on TrackJS.com
Don’t assume you need a build step
<500 of commented script. 1 file, no minification. It doesn’t matter. 4KB after gzip
You can look at it, read it. Learn from it how we used to learn javascript before github--reading code from websites we liked.
Prettify
Avoiding Spaghetti Code in Scripts.js
Util object
ReadyState
Browser Compat Check. Doesn’t scale forever, but I use only:
querySelector, [].forEach, el.classList, el.matches
“Modular” IIFE for each responsibility.
pageViewCounter()
tabs()
Any signals between them should be through common DOM idioms, like ready events or element attributes.