Nick Ribal
Front-end veteran, consultant and freelancer, who's armed with a decade of experience solving challenges on the Web platform for large Internet companies.
10 languages
50M monthly page views
4 domains
4 layouts
4 breakpoints
lots of pages
3rd party integrations:
we are embedded and we embed, in web & apps
tens of wildly varying integrations
ever-changing requirements
Rich content editor
Several back office systems
Embed host
Philosophy and power tools
Constant improvement
Iterative development
Directory/file structure
Code conventions and standards
DX, in dev and production
Feature flags
Meaningful error messages
Readable stack traces
Runtime introspection
Reuse smarter people's work, for free!
Contribute back
See how others use the same tools in other ways
Avoid monolithic, opinionated or hard to replace things
npm packages
npm scripts
Don't reinvent the wheel
Use emerging standards & polyfills
No JS/CSS frameworks
Webpack the all-capable module bundler
Babel transforms future JS to ES5
Sass real programming language for CSS, has packages and libraries (e.g. Sassdash)
PostCSS auto-prefixing and optimizations
Don't compromise on quality!
Use good software development practices
Have mandatory code reviews
Learn from industry experts
Try and prototype new small stuff all the time
Adopt what works well
Remove what doesn't
When something sucks - tackle and improve it
Continuous Integration and Deployment
are a must have!
tests and TDD eliminate fear of change
Evolution > Revolution
avoid breaking changes
interop the old with the new
Technical debt is the enemy
sometimes "done is better than perfect", but
pay your debt ASAP!
the later you do, the more it costs
Having conventions reduces the element of surprise, which speeds development
Commit to conventions - or don't bother
Enforce them via style guides, code reviews and linting everything
[scriptLoader] {name: "facebookPixel", src: "//connect.facebook.net/en_US/fbevents.js"},
{callbackQueue: Array[2], isLoading: true, isLoaded: false}
[scriptLoader] {name: "facebookPixel", src: "//connect.facebook.net/en_US/fbevents.js"},
{callbackQueue: Array[1], isLoading: true, isLoaded: true}
[scriptLoader] {name: "facebookPixel", src: "//connect.facebook.net/en_US/fbevents.js"},
{callbackQueue: Array[1], isLoading: false, isLoaded: false}
[scriptLoader] {name: "comscore", src: "//b.scorecardresearch.com/beacon.js"},
{callbackQueue: Array[1], isLoading: true, isLoaded: false}
[scriptLoader] {name: "quantcast", src: "//edge.quantserve.com/quant.js"},
{callbackQueue: Array[1], isLoading: true, isLoaded: false}
[scriptLoader] {name: "twitter", src: "//platform.twitter.com/widgets.js"},
{callbackQueue: Array[1], isLoading: false, isLoaded: false}
[scriptLoader] {name: "googleAnalytics", src: "//www.google-analytics.com/analytics.js"},
{callbackQueue: Array[1], isLoading: true, isLoaded: false}
[scriptLoader] {name: "googleAnalytics", src: "//www.google-analytics.com/analytics.js"},
{callbackQueue: Array[1], isLoading: true, isLoaded: true}
[Top posts] Overriding complex
logic, showing 5 latest
[QS] overriding countryCode with 'DE'
[World domination] Activated! ᕕ(ᐛ)ᕗ
#debug-layout is not some stupid hashtag. When added to the URL, it shows:
(hover me for details) and the tooltip are only visible in pre-prod
Meaningful error messages with relevant context make errors useful and actionable
function getApiEndpoint(endpointsConf){
// do some stuff. when that fails:
const message = 'FETCH types are undefined.' +
' Check pdo.config.api for available endpoints'
console.error(message, {
message,
endpointsConf,
api: pdo.get('config.api'),
})
return false
}
explicitAndDescriptive > implObsc
Searching for 'size' vs 'SIZE': hundreds vs 3 files
Makes reading, maintaining and searching easy
const COUNTRY_CODES_TO_REFRESH_ADS = [US, AR, ]
const SLIDE_COUNT_BEFORE_ADS_REFRESH = 3
function getConfFromElementDataset(element){...}
function iCanHasName(){} > function(){} || () => {}
Makes stack traces readable. Especially important in transpiled code, when source maps fail you
The only (anonymous function)s here are from 3rd parties or dependent packages :)
How do I inspect what's known only during runtime?
By Nick Ribal
Lessons learned and best practices while developing and maintaining our featureful and complex sites over the last two years: philosophy, tools, frameworks and packages; developer experience across environments - including production; JS runtime introspection, debugging, troubleshooting and reconfiguration techniques; CSS/HTML layout and component configuration troubleshooting; specific advice and best practices you can apply to your app today
Front-end veteran, consultant and freelancer, who's armed with a decade of experience solving challenges on the Web platform for large Internet companies.