Building pixel perfect apps for 1 billion people. Areas: social network, delivery, finance, logistics.
**TikTok, October, 2023 – Present
class Frame extends Component { | |
componentDidMount() { | |
this.iframeHead = this.node.contentDocument.head | |
this.iframeRoot = this.node.contentDocument.body | |
this.forceUpdate() | |
} | |
render() { | |
const { children, head, ...rest } = this.props | |
return ( |
// Debug/Checked compilation | |
const DEBUG = true; | |
function conditional(condition) { | |
return target => condition ? target : Function.prototype; | |
} | |
@conditional(DEBUG) | |
function assert(condition, message = "assertion failed.") { | |
if (!condition) throw new Error(message); |
All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.
Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.
elem.offsetLeft
, elem.offsetTop
, elem.offsetWidth
, elem.offsetHeight
, elem.offsetParent
$ git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git
$ nano ~/.zshrc
path=('/path/to/depot_tools' $path)
define([ | |
'marionette', | |
'router', | |
'controller', | |
'modules/auth', | |
'modules/vent', | |
'views/_layout' | |
], function(Marionette, Router, Controller, Auth, Vent, Layout){ | |
var App = new Marionette.Application(); |
App = new Marionette.Application(); | |
App.addRegions { | |
"headerRegion": "#header" | |
"topMenuRegion": "#top-menu" | |
"mainRegion" : "#main" | |
} | |
App.on 'initialize:after', -> | |
Backbone.history.start() |