{"id":183746,"date":"2013-06-24T12:51:03","date_gmt":"2013-06-24T08:51:03","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=183746"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=183746","title":{"rendered":"<span class=\"post_title\">\u0427\u0435\u043c \u0436\u0438\u0432\u0435\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0439 \u041e\u0441\u0442\u0440\u043e\u0432\u043e\u043a<\/span>"},"content":{"rendered":"<div class=\"content html_format\">   \t\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041c\u0430\u043a\u0441 \u0414\u0435\u0433\u0442\u0435\u0440\u0435\u0432 (\u0443 \u043c\u0435\u043d\u044f \u0442\u0443\u0442 \u043d\u0435\u0442 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0440\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u043e\u0442 \u043c\u043e\u0439 twitter: <a href=\"https:\/\/twitter.com\/suprMax\">@suprMax<\/a> \u0438 \u0441\u0430\u0439\u0442 <a href=\"http:\/\/maxdegterev.name\">maxdegterev.name<\/a> ). \u041c\u044b \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u043a\u043b\u0430\u0441\u0441\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u041f\u0440\u043e \u043d\u0435\u0433\u043e-\u0442\u043e \u044f \u0432\u0430\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443. <a name=\"habracut\"><\/a><\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/2f2\/c81\/0bc\/2f2c810bc0ce9db08195848bca598339.jpg\"\/><\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/d46\/60c\/0a0\/d4660c0a0458a13b8bfd9db93d554602.jpg\"\/> <\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/ded\/07e\/f1f\/ded07ef1f4d1071c537d5a899e76ab02.jpg\"\/><\/p>\n<p>  <\/p>\n<h3>\u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u043e\u0441\u043d\u043e\u0432\u0430<\/h3>\n<p>  \u0420\u0430\u0431\u043e\u0442\u0430\u044f \u043d\u0430\u0434 \u043d\u043e\u0432\u044b\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u043c \u0441\u0430\u0439\u0442\u043e\u043c, \u044f \u0443\u0436\u0435 \u0438\u043c\u0435\u043b \u0437\u0430 \u043f\u043b\u0435\u0447\u0430\u043c\u0438 \u043e\u043f\u044b\u0442 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0441\u0442\u0430\u0440\u043e\u0433\u043e. \u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0431\u0443\u043a\u0432 \u043e\u043d \u0435\u0449\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/ostrovok.ru\/m\" title=\"Good old Ostrovok.ru\">http:\/\/ostrovok.ru\/m<\/a>, \u043d\u043e \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043e\u043d \u043f\u0440\u043e\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442, \u044f \u043d\u0435 \u0437\u043d\u0430\u044e. \u0421\u0442\u0430\u0440\u044b\u0439 \u0441\u0430\u0439\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e. \u041e\u043d \u0436\u0438\u0432\u0435\u0442 \u0432 \u043e\u0431\u0449\u0435\u043c \u043f\u0440\u043e\u0435\u043a\u0442\u0435 OTA \u0438, \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0442\u043e\u0442 \u0436\u0435 Back-end (Django), \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 \u043c\u0435\u0434\u0438\u0430\u0433\u0435\u043d\u0435\u0440\u0430\u0442\u043e\u0440, \u043f\u0440\u043e\u0441\u0442\u044b\u0435 HTML \u0448\u0430\u0431\u043b\u043e\u043d\u044b (server-side), \u043d\u0435\u043c\u043d\u043e\u0433\u043e JavaScipt \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u043d\u0430 underscore, SCSS \u0438 \u043e\u0431\u044b\u0447\u043d\u044b\u0439 JavaScipt. \u042d\u0442\u043e \u0432\u0441\u0435 \u043c\u044b \u0443\u0436\u0435 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b\u0438 \u0441\u043e\u0442\u043d\u044e \u0440\u0430\u0437, \u044d\u0442\u043e \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u0441\u043a\u0443\u0447\u043d\u043e. <\/p>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u043e\u0439 \u043d\u043e\u0432\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430 \u0443 \u043c\u0435\u043d\u044f \u0441\u0442\u043e\u044f\u043b\u0438 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0437\u0430\u0434\u0430\u0447\u0438:   <\/p>\n<ul>\n<li>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0430\u0439\u0442 \u0432 \u043d\u043e\u0432\u043e\u043c \u0434\u0438\u0437\u0430\u0439\u043d\u0435, \u0437\u0430\u043e\u0434\u043d\u043e \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c, \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u043d\u043e\u0432\u044b\u0439 \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u043e\u0431\u0449\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c, \u0438 \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u0435\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c.<\/li>\n<li>\u0421\u0430\u0439\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0445\u043e\u0440\u043e\u0448\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043d\u0430 iPhone \u0438 Android 2.x, 4.x, default \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b.<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u043e\u0432\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043d\u0435\u0442 \u043d\u0430 \u0441\u0442\u0430\u0440\u043e\u043c. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0444\u0438\u043b\u044c\u0442\u0440 \u043f\u043e \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044e \u043e\u0442\u0435\u043b\u044f \u0438 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e\u0442\u0435\u043b\u0435\u0439 \u0432 favorites. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0441\u0430\u0439\u0442 \u043d\u0435 \u0441\u043b\u0435\u0434\u0443\u0435\u0442.<\/li>\n<li>\u0421\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e \u0438 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e.<\/li>\n<\/ul>\n<p>  \u0422\u0430\u043a \u0443\u0436 \u0438\u0441\u0442\u043e\u0440\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u043b\u043e\u0436\u0438\u043b\u043e\u0441\u044c, \u0447\u0442\u043e \u0441\u0430\u0439\u0442 \u0432\u0441\u0435\u0433\u0434\u0430 \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441 \u0434\u0438\u0437\u0430\u0439\u043d\u043e\u043c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u044d\u0442\u043e\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u043d\u0430 \u043d\u0435\u043c \u043e\u0431\u043a\u0430\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f. \u0412\u0440\u043e\u0434\u0435 \u0442\u0430\u043a\u043e\u0433\u043e \u044d\u043a\u0441\u043f\u0435\u0440\u0438\u043c\u0435\u043d\u0442\u0430. \u0412\u043e\u0442 \u0438 \u0442\u0443\u0442 \u0434\u0438\u0437\u0430\u0439\u043d \u0431\u044b\u043b \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043d\u043e\u0432\u044b\u0439, flat (iOS 7 style, \u043c\u043e\u0434\u043d\u043e!). \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0435 \u0443\u0434\u0438\u0432\u043b\u044f\u0439\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0446\u0432\u0435\u0442\u0430, \u0434\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u0432\u0438\u0434, \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u0432\u0441\u0435\u0433\u043e \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u041e\u0441\u0442\u0440\u043e\u0432\u043a\u0430.<\/p>\n<p>  \u041c\u043d\u0435 \u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 OTA, \u043a\u0430\u043a \u0432 \u043f\u0440\u043e\u0448\u043b\u044b\u0439 \u0440\u0430\u0437. \u041f\u043b\u044e\u0441 \u044f \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u043d\u0430\u0434 \u0441\u0430\u0439\u0442\u043e\u043c \u043e\u0434\u0438\u043d, \u0438 \u0443\u0447\u0438\u0442\u044c Django \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u0430 \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0442\u0432\u043b\u0435\u043a\u0430\u0442\u044c \u043a\u043e\u0433\u043e-\u0442\u043e \u0438\u0437 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432 OTA \u2013 \u043d\u0435 \u043a\u043e\u043c\u0438\u043b\u044c\u0444\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u0440\u0435\u0448\u0438\u043b \u043c\u044b\u0441\u043b\u0438\u0442\u044c \u043a\u0430\u043a \u043f\u0438\u0440\u0430\u0442. \u0412 \u041e\u0441\u0442\u0440\u043e\u0432\u043a\u0435 \u0443\u0436\u0435 \u0435\u0441\u0442\u044c \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0435 API, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043f\u043e\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0431\u00f3\u043b\u044c\u0448\u0443\u044e \u0447\u0430\u0441\u0442\u044c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u043e\u0442 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u0421\u0434\u043e\u0431\u0440\u0438\u0432 \u044d\u0442\u043e \u0447\u0430\u0441\u0442\u044f\u043c\u0438 API \u043e\u0442 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430, \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u0441\u0435\u0431\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435. \u0418\u043c\u0435\u043d\u043d\u043e \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u044f \u0438 \u0432\u044b\u0431\u0440\u0430\u043b.<\/p>\n<p>  \u0417\u0430 \u043e\u0441\u043d\u043e\u0432\u0443 \u044f \u0432\u0437\u044f\u043b NodeJS. \u0412\u0441\u0435\u0433\u0434\u0430 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430 \u0432\u044b\u0441\u0442\u0443\u043f\u0438\u043b ExpressJS, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 Sinatra (\u043f\u0440\u0438\u0432\u0435\u0442 Ruby!). \u041c\u043d\u0435 \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0432\u0435\u0441\u0442\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0435 \u0441\u0435\u0441\u0441\u0438\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u0435\u0437 Redis \u043d\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c. \u0427\u0442\u043e\u0431\u044b \u043c\u0435\u043d\u044c\u0448\u0435 \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0432\u043c\u0435\u0441\u0442\u043e \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e JavaScript \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b CoffeeScript. \u0414\u043b\u044f \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432 \u0432\u0437\u044f\u043b Jade, \u0430 \u0434\u043b\u044f CSS \u2014 Stylus. \u041d\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u043c\u043e\u0434\u043d\u044b\u0439 \u0441\u0430\u0439\u0442, \u0434\u0430 \u0438 \u043d\u0430 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u0432\u044b\u0438\u0433\u0440\u044b\u0448 \u0432 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u0441\u0435 \u0440\u0435\u0448\u0438\u043b \u0434\u0435\u043b\u0430\u0442\u044c singlepage. \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0443\u043c\u0430\u043b \u0432\u0437\u044f\u0442\u044c SpineJS, \u043d\u043e \u0443 \u043d\u0435\u0433\u043e \u043a\u043e\u043c\u044c\u044e\u043d\u0438\u0442\u0438 \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0430\u044f \u0441\u0432\u044f\u0437\u043a\u0430: Backbone, Lo-Dash, Zepto.<\/p>\n<p>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/43e\/e4a\/3c1\/43ee4a3c102464c515f03f21f5f3a23f.jpg\"\/><\/p>\n<p>  \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043f\u043e\u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f \u0441\u043e \u0441\u0431\u043e\u0440\u043a\u043e\u0439 \u0430\u0441\u0441\u0435\u0442\u043e\u0432. \u0425\u043e\u0447\u0435\u0442\u0441\u044f, \u0447\u0442\u043e\u0431\u044b \u0432\u0441\u0435 \u0431\u044b\u043b\u043e \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e, \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438, \u043a\u0430\u043a \u0443 \u0440\u0435\u043b\u044c\u0441\u043e\u0432\u0438\u043a\u043e\u0432. \u0412\u043f\u043e\u043b\u043d\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u0438\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f asset-rack, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0437\u0430\u0434\u0430\u0447\u0438 \u0441\u0431\u043e\u0440\u043a\u0438 JS, CSS \u0438 \u0434\u0430\u0436\u0435 Jade \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. \u041a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435 \u043e\u043d \u0443\u043c\u0435\u0435\u0442 \u043f\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0448\u0430\u0431\u043b\u043e\u043d\u044b, \u043a\u043b\u0430\u0434\u0435\u0442 \u0438\u0445 \u0432 \u0443\u043a\u0430\u0437\u0430\u043d\u043d\u044b\u0439 \u043d\u0435\u0439\u043c\u0441\u043f\u0435\u0439\u0441 (\u044f \u0432\u044b\u0431\u0440\u0430\u043b app.templates). \u0422\u0430\u043a \u0436\u0435 \u043e\u043d \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0433\u043e\u043b\u043e\u0432\u043d\u0443\u044e \u0431\u043e\u043b\u044c \u043f\u043e \u043f\u0440\u0435\u043a\u043e\u043c\u043f\u0438\u043b\u044f\u0446\u0438\u0438 CoffeeScript \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u0435 requirements, \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u044f 2 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u0430: Snockets (Sprockets) \u0438 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u0434\u043b\u044f NodeJS \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0441 RequireJS (Browserify). \u0422\u0435\u043c \u043d\u0435 \u043c\u0435\u043d\u0435\u0435 NodeJS \u0448\u0442\u0443\u043a\u0430 \u043d\u043e\u0432\u0430\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u0431\u044b\u043b\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b:   <\/p>\n<ul>\n<li>\u0421\u0442\u0430\u0442\u0438\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f \u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0437\u0430\u043f\u0443\u0441\u043a\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0430. \u0427\u0442\u043e-\u0442\u043e \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c \u0432 \u0444\u0430\u0439\u043b\u0435 \u2014 \u0438\u0437\u0432\u043e\u043b\u044c \u043f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440. \u041d\u0430 production \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u043d\u0435\u0442, \u0430 \u0432\u043e\u0442 \u0432\u043e \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0435 \u043e\u0441\u043e\u0431\u043e \u0443\u0434\u043e\u0431\u043d\u043e. \u0420\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u043e\u0439 nodemon. \u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u0442\u044c \u043f\u0440\u043e\u0441\u0442\u0443\u044e \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0432 Cakefile \u0438 \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0435\u0440, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u043a: `cake dev`. \u0418 \u043d\u0435\u0442 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.   <\/li>\n<li>\u0421\u0442\u0430\u0442\u0438\u043a\u0430 \u043a\u043e\u043c\u043f\u0438\u043b\u0438\u0440\u0443\u0435\u0442\u0441\u044f, \u043d\u043e \u043d\u0435 \u043a\u043b\u0430\u0434\u0435\u0442\u0441\u044f \u043d\u0430 \u0434\u0438\u0441\u043a. Asset-rack \u0443\u043c\u0435\u0435\u0442 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0444\u0430\u0439\u043b\u044b \u043d\u0430 \u0445\u043e\u0441\u0442\u0438\u043d\u0433 (Amazon S3 etc.), \u043d\u043e \u0432\u043e\u0442 \u0435\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0430\u043c\u043e\u043c\u0443 \u043e\u0442\u0434\u0430\u0432\u0430\u0442\u044c \u0438\u0445, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0447\u0435\u0440\u0435\u0437 nginx, \u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043f\u0440\u043e\u044f\u0432\u0438\u0442\u044c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c:<br \/> \n<pre>         compressAsset = (filename, contents)-&gt;           console.log(&quot;[#{(new Date()).toUTCString()}] #{logPrefix} Compressing asset #{filename}.gz&quot;)           zlib.gzip(contents, (e, buffer) -&gt; fs.writeFile(filename + '.gz', buffer))          generateAssets = -&gt;           for asset in assets.assets             filename = __dirname + '\/public' + asset.url.replace('.', &quot;-#{asset.md5}.&quot;)             if not fs.existsSync(filename)               console.log(&quot;[#{(new Date()).toUTCString()}] #{logPrefix} Saving asset #{filename}&quot;)               fs.writeFileSync(filename, asset.contents, encoding: 'utf-8')               compressAsset(filename, asset.contents)          assets.on('complete', -&gt;           generateAssets() unless config.is_dev       <\/pre>\n<\/li>\n<\/ul>\n<p>   \u041f\u043e\u0434\u0438\u0442\u043e\u0433:<\/p>\n<ul>\n<li>Back-end \u0438 Front-end \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0430 \u043e\u0434\u043d\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u041e\u0434\u0438\u043d codestyle, \u0430 \u0442\u0430\u043a \u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u043e\u0434\u043d\u0438 \u0438 \u0442\u0435 \u0436\u0435 \u0444\u0430\u0439\u043b\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0432\u0430\u043b\u0438\u0434\u0430\u0446\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0438 helpers \u0448\u0430\u0431\u043b\u043e\u043d\u043e\u0432. \u041d\u0443 \u0438 \u043a\u0430\u043a \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0431\u043e\u043d\u0443\u0441 \u2014 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435\u0440\u044b \u043c\u043e\u0433\u0443\u0442 \u0447\u0438\u0442\u0430\u0442\u044c \u0431\u0435\u043a\u0435\u043d\u0434 \u043a\u043e\u0434 \u0438 \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c, \u0447\u0442\u043e \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442.<\/li>\n<li>\u041a\u0441\u0442\u0430\u0442\u0438 \u043e \u0448\u0430\u0431\u043b\u043e\u043d\u0430\u0445. Jade \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043a\u0430\u043a \u043d\u0430 \u043a\u043b\u0438\u0435\u043d\u0442\u0435, \u0442\u0430\u043a \u0438 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440\u0435. \u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u044e \u043e\u0434\u0438\u043d layout.jade \u043d\u0430 \u0432\u0441\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u041d\u043e \u0435\u0441\u043b\u0438 \u044f \u0437\u0430\u0445\u043e\u0447\u0443, \u044f \u043c\u043e\u0433\u0443 \u043e\u0442\u0434\u0430\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e \u043b\u044e\u0431\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0432 \u0435\u0435 \u043d\u0430 back-end. \u041f\u0440\u043e\u043a\u0438\u043d\u0443\u0432 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u0443\u044e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0443 \u0434\u0430\u043d\u043d\u044b\u0445 \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043d\u043e \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u043e \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e. <\/li>\n<li>Stylus \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0431\u043e\u0436\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e. \u041c\u043e\u0436\u043d\u043e \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u043a\u043e\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c Jade \u0448\u0430\u0431\u043b\u043e\u043d \u0432 Stylus \u0444\u0430\u0439\u043b, \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043e\u0442\u0442\u0443\u0434\u0430 \u0432\u0441\u0435 \u043b\u0438\u0448\u043d\u0435\u0435 \u0438 \u043f\u0438\u0441\u0430\u0442\u044c \u0441\u0442\u0438\u043b\u0438. \u042d\u0442\u043e \u0442\u043e, \u043a\u0430\u043a \u0434\u043e\u043b\u0436\u0435\u043d \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0432\u0435\u0431. <\/li>\n<li> \u041f\u0440\u043e\u0441\u0442\u044b\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u0435 JSON \u043a\u043e\u043d\u0444\u0438\u0433\u0438 \u043d\u0430 Back-end, Front-end, \u043a\u0443\u0434\u0430 \u0443\u0433\u043e\u0434\u043d\u043e. <\/li>\n<\/ul>\n<p>  \u0417\u0430\u0434\u0430\u0447\u0443 \u0441 \u0442\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u043b\u043e \u043c\u043e\u0434\u043d\u043e, \u043c\u043e\u043b\u043e\u0434\u0435\u0436\u043d\u043e \u0438 \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e, \u044f, \u0442\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0440\u0435\u0448\u0438\u043b.<\/p>\n<h3>\u041a\u0430\u043a \u0432\u0441\u0435 \u044d\u0442\u043e \u0437\u0430\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u043e<\/h3>\n<p>   \u041d\u0435\u043c\u043d\u043e\u0433\u043e \u043e \u0442\u043e\u043c, \u043a\u0430\u043a \u043e\u0440\u0433\u0430\u043d\u0438\u0437\u043e\u0432\u0430\u043d \u0441\u0430\u043c \u043f\u0440\u043e\u0435\u043a\u0442. A picture is worth a thousand words:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/68f\/54d\/95d\/68f54d95dda742e006a310ba2b87b745.jpg\"\/> <br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/a7a\/db4\/698\/a7adb469899dd6edb57b7c1add6980a8.jpg\"\/> <br \/>  \u042f \u043d\u0435 \u0431\u0443\u0434\u0443 \u0432\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u0435\u0442\u0430\u043b\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043d\u0430 Backbone \u0438 CoffeeScript. \u041e\u0431 \u044d\u0442\u043e\u043c \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u0442\u044b\u0441\u044f\u0447\u0438 \u0441\u0442\u0430\u0442\u0435\u0439. \u042f \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e\u0447\u0435\u043d\u044c \u043a\u0440\u0430\u0442\u043a\u043e \u043e \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u043c\u043e\u0434\u0443\u043b\u0435\u0439, \u0438 \u0432\u043e\u043e\u0431\u0449\u0435, \u043a\u0430\u043a \u044f \u0434\u0435\u043b\u0430\u043b, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0441\u043e\u0439\u0442\u0438 \u0441 \u0443\u043c\u0430.<\/p>\n<p>  \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e Backbone \u0438\u043c\u0435\u0435\u0442 collections, models \u0438 views. \u042f \u043f\u043e\u043b\u043e\u0436\u0438\u043b \u0438\u0445 \u0432 \u0440\u0430\u0437\u043d\u044b\u0435 \u043f\u0430\u043f\u043a\u0438. \u0415\u0449\u0435 \u043c\u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c \u043c\u043e\u0434\u0443\u043b\u0438. \u042d\u0442\u043e \u0442\u0430\u043a\u0438\u0435 \u0448\u0442\u0443\u043a\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0443\u0436\u043d\u044b \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e, \u0432\u043d\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0442\u043e\u0433\u043e, \u043d\u0430 \u043a\u0430\u043a\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u044f \u043d\u0430\u0445\u043e\u0436\u0443\u0441\u044c. \u041e\u043d\u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u0442\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0438 \u0443\u0436\u0435 \u043d\u0435 \u0432\u044b\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f, \u043a\u043e\u0433\u0434\u0430 view, \u043a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0443\u043d\u0438\u0447\u0442\u043e\u0436\u0430\u044e\u0442\u0441\u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0435 \u043d\u0430 \u0434\u0440\u0443\u0433\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443. \u041a\u0430\u043a \u0438 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0434\u0435\u043b\u0438\/\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0441\u043f\u0438\u0441\u043e\u043a \u0431\u0440\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0439 \u043f\u0440\u0438 \u043d\u0430\u0436\u0430\u0442\u0438\u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u00ab\u0412\u044b\u0439\u0442\u0438\u00bb). \u0423 \u043c\u0435\u043d\u044f \u043c\u043e\u0434\u0443\u043b\u0438 \u2014 \u044d\u0442\u043e \u043c\u043e\u0434\u0430\u043b\u044c\u043d\u044b\u0435 \u043e\u043a\u043d\u0430, \u0441\u0430\u0439\u0434\u0431\u0430\u0440, \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043c\u0435\u0441\u0442\u043e\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u0430 \u0438 \u0442.\u043f.<\/p>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0432\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043c\u043e\u0439 \u0433\u043b\u0430\u0432\u044b\u0439 \u0444\u0430\u0439\u043b app.coffee:   <\/p>\n<pre>     #= require ..\/..\/data\/app.config.js     #= require ..\/helpers.js     #= require app.utils.js      #= require_tree modules      #= require router.coffee     #= require_tree models     #= require_tree collections     #= require_tree views      app = _.extend(<a href=\"http:\/\/habrahabr.ru\/users\/app\/\" class=\"user_link\">app<\/a>, Backbone.Events)      # ...      # Layout modules     app.size = new app.modules.Size()      # Data modules     app.geo = new app.modules.Geo()     app.user = new app.modules.User()     app.analytics = new app.modules.Analytics()      # Modals and extra views     app.overlay = new app.modules.Overlay()     app.modal = new app.modules.Modal()      # Router relies heavily on stuff above     app.router = new app.Router()      # ...      Backbone.history.start(pushState: true, hashChange: false) <\/pre>\n<p>  \u0412\u043e\u0442 \u0438 helpers.js, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0438 \u043d\u0430 Back-end. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043f\u0430\u043f\u043e\u043a \u0447\u0435\u0440\u0435\u0437 require_tree \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u043d\u0435 \u0437\u0430\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043e \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0438 \u0438\u043d\u0434\u0438\u0432\u0438\u0434\u0443\u0430\u043b\u044c\u043d\u044b\u0445 \u0444\u0430\u0439\u043b\u043e\u0432, \u043d\u043e \u0432\u043e\u0442 \u043f\u043e\u0440\u044f\u0434\u043e\u043a \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043d\u0435 \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u0440\u0443\u0435\u0442, \u0442\u0430\u043a \u0447\u0442\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 require, \u0435\u0441\u043b\u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u043e\u0442 \u043a\u0430\u043a\u043e\u0433\u043e-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440 view). \u0423 \u043c\u0435\u043d\u044f \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0438 \u043d\u0435 \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u043b\u043e, \u0430 \u043a \u043c\u043e\u043c\u0435\u043d\u0442\u0443 \u0432\u044b\u0437\u043e\u0432\u0430 Backbone.history.start \u0432\u0441\u0435 \u043c\u043e\u0434\u0443\u043b\u0438 \u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0443\u0436\u0435 \u0432 \u043f\u0430\u043c\u044f\u0442\u0438, \u0442\u0430\u043a \u0447\u0442\u043e \u0440\u043e\u0443\u0442\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u0440\u0430\u0431\u043e\u0442\u0443, \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c view \u0438 \u0442.\u0434.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043f\u0440\u043e Stylus. \u041e\u043d \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 SASS, \u043d\u043e \u0438\u043c\u0435\u0435\u0442 \u0440\u044f\u0434 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0442\u043e \u043e\u043d identation based. \u042d\u0442\u043e \u0434\u0430\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u043d\u0435 \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u043e \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0438 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441\u043e\u0432. \u041d\u043e \u044d\u0442\u043e \u0432\u0441\u0435 \u043c\u044b \u0443\u0436\u0435 \u0434\u0430\u0432\u043d\u043e \u0432\u0438\u0434\u0435\u043b\u0438, \u044d\u0442\u043e \u0441\u043a\u0443\u0447\u043d\u043e. \u041a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043b\u044e\u0431\u043e\u0433\u043e CSS \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439?<\/p>\n<pre>     .my-awesome-block       width: 100px       height: 100px        margin: (@width \/ 2) auto        line-height: <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a>   <\/pre>\n<p>  \u041d\u0435\u043f\u043b\u043e\u0445\u043e. \u0410 \u043a\u0430\u043a \u043d\u0430\u0441\u0447\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 vendor prefixes? \u041c\u044b \u0436\u0438\u0432\u0435\u043c \u0432 \u0443\u0436\u0430\u0441\u043d\u043e\u043c \u043c\u0438\u0440\u0435 \u043a\u043e\u043d\u043a\u0443\u0440\u0435\u043d\u0442\u043d\u043e\u0439 \u0431\u043e\u0440\u044c\u0431\u044b. \u041a \u0441\u0447\u0430\u0441\u0442\u044c\u044e, \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre>     .my-awesome-block       box-sizing: border-box       transition: all .2s ease   <\/pre>\n<p>  Stylus \u0441\u0430\u043c \u0441\u043c\u043e\u0442\u0440\u0438\u0442 \u043d\u0430 \u0442\u043e, \u043a\u0430\u043a\u0438\u0435 mixin \u0443 \u043d\u0435\u0433\u043e \u0435\u0441\u0442\u044c, \u0438 \u0435\u0441\u043b\u0438 \u043d\u0430\u0445\u043e\u0434\u0438\u0442 properties \u0441 \u0442\u0430\u043a\u0438\u043c \u0436\u0435 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435\u043c, \u0442\u043e \u043e\u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043b\u044f\u0435\u0442 \u0437\u0430\u043c\u0435\u043d\u0443. \u0421\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e, \u0435\u0441\u043b\u0438 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0437\u0430\u043f\u043e\u043b\u043d\u044f\u0442\u044c vendor prefixes, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043b\u044f border-radius (\u0447\u0442\u043e, \u043a\u0441\u0442\u0430\u0442\u0438, \u043f\u0440\u0430\u0432\u0434\u0430), \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0443\u0434\u0430\u043b\u0438\u0442\u044c \u043e\u0434\u0438\u043d mixin \u0438 \u0434\u0430\u0436\u0435 \u043d\u0435 \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0430\u0439\u043b\u044b. \u042f \u043d\u0435 \u0443\u0432\u0435\u0440\u0435\u043d, \u043d\u043e \u043c\u043d\u0435 \u043a\u0430\u0436\u0435\u0442\u0441\u044f, \u044d\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0441\u044d\u043a\u043e\u043d\u043e\u043c\u0438\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0441\u043e\u0442\u043d\u0438 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0432 \u0431\u0443\u0434\u0443\u0449\u0435\u043c. \u041d\u0443 \u0438 \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u0440\u0438\u043c\u0435\u0440 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u043c\u043e\u0439 app.styl:<\/p>\n<pre>     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'config'      <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'includes\/reset.css'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'includes\/fonts.css'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'includes\/mixins'      <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'plugins\/iswipe'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'plugins\/zepto.sidebarify'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'plugins\/zepto.calendar.css'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'plugins\/zepto.input.numselect.css'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'plugins\/zepto.listselect.css'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'plugins\/zepto.textarea_autogrow'      <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'partials\/partial_date'     <a href=\"http:\/\/habrahabr.ru\/users\/import\/\" class=\"user_link\">import<\/a> 'partials\/partial_spinner'      \/\/ ...  <\/pre>\n<p>  \u0412\u044b\u0445\u043e\u0434\u0438\u0442, \u0441\u043c\u0435\u0448\u0430\u043d\u043d\u044b\u0435 \u0438\u043c\u043f\u043e\u0440\u0442\u044b \u0442\u043e\u0436\u0435 \u043d\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0415\u0434\u0438\u043d\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u043a \u043d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u2013 \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0432\u044b\u0437\u0432\u0430\u0442\u044c mixin \u043d\u0443\u0436\u043d\u044b \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b. \u0411\u0435\u0437 \u044d\u0442\u043e\u0433\u043e \u0443 \u043c\u0435\u043d\u044f \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0432\u044b\u0437\u043e\u0432, \u0445\u043e\u0442\u044f \u044d\u0442\u043e \u0443\u0436\u0435 \u043c\u043e\u0433\u043b\u0438 \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c. \u0423 \u043c\u0435\u043d\u044f \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u043e\u0442 \u0442\u0430\u043a:<\/p>\n<pre>     html,     body        \/\/ lol!       noselect plz      body, select, input, button, textarea        color: #4b5c66       font: normal 14px Helvetica, Arial, sans-serif       line-height: 1.4em      \/\/... <\/pre>\n<p>  \u0414\u043b\u044f \u0441\u0442\u0438\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043b\u0430\u0441\u0441\u044b, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0431\u0435\u0434\u0438\u0442\u044c \u0437\u043b\u044b\u0445 <a href=\"http:\/\/www.stuffandnonsense.co.uk\/archives\/images\/specificitywars-05v2.jpg\">specificity \u0441\u0438\u0442\u0445\u043e\u0432<\/a> \u0427\u0442\u043e\u0431\u044b \u0434\u0430\u0442\u044c 146% \u0433\u0430\u0440\u0430\u043d\u0442\u0438\u044e \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u043a\u043b\u0430\u0441\u0441\u044b \u043d\u0443 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u043f\u0435\u0440\u0435\u0441\u0435\u043a\u0443\u0442\u0441\u044f, \u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b \u043f\u043e\u0434\u0445\u043e\u0434 SMACSS. \u041d\u0443, \u0438\u043b\u0438 \u043d\u0435 \u0441\u043e\u0432\u0441\u0435\u043c, \u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436\u0435. \u0412\u0441\u0435, \u0447\u0442\u043e \u043e\u0442\u043d\u043e\u0441\u0442\u0438\u0442\u0441\u044f \u043a \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b, \u0438 \u043d\u0435 \u043c\u0435\u043d\u044f\u0435\u0442\u0441\u044f \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445, \u044f \u0434\u0435\u043b\u0430\u043b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c l (layout). \u0422\u0430\u043a \u0436\u0435 \u0443 \u043c\u0435\u043d\u044f \u0435\u0441\u0442\u044c p (page), \u0431\u043b\u043e\u043a\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0442\u0440\u0430\u043d\u0438\u0446 b (block) \u0438 \u0442.\u0434. \u0412 \u0441\u043b\u0443\u0447\u0430\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0435\u0433\u043e \u043a\u043b\u0430\u0441\u0441 \u0431\u0443\u0434\u0435\u0442 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0432 \u0441\u0435\u0431\u0435 \u0447\u0430\u0441\u0442\u044c \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u044f \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044f. \u0410 \u043c\u043e\u0436\u0435\u0442 \u0438 \u043d\u0435 \u043d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c, \u043d\u043e \u043a\u043e\u0440\u043d\u0435\u0432\u043e\u0439 \u043a\u043b\u0430\u0441\u0441 \u043d\u0430\u0441\u043b\u0435\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430. \u0412\u043e\u0442 \u043f\u0440\u0438\u043c\u0435\u0440 \u0441\u0442\u0438\u043b\u0435\u0439:<\/p>\n<pre>     .p-awesomepage       .p-a-header         \/\/ styles         .p-a-h-soopermenulink           color: hotpink        .p-a-content         \/\/ styles        .p-a-loading         \/\/ styles        .p-a-title         \/\/ styles <\/pre>\n<p>   \u0414\u043b\u044f \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0439 \u0440\u0430\u0437\u043c\u0435\u0442\u043a\u0438:   <\/p>\n<pre>     .p-awesomepage       header.p-a-header wow, header!       .p-a-content         .p-a-title my awesome title        .p-a-loading         .p-a-title loading is being loaded   <\/pre>\n<p>  \u0415\u0441\u043b\u0438 \u0441\u043e\u0447\u0435\u0442\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u0441 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0441\u0442\u044c\u044e \u043f\u0440\u0430\u0432\u0438\u043b \u0432 Stylus (\u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u043d\u0435 \u043f\u0435\u0440\u0435\u0432\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c, \u0430 \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u0442\u0441\u044f \u043a\u043e\u043b\u0431\u0430\u0441\u0430 \u043d\u0430 \u0432\u044b\u0445\u043e\u0434\u0435), \u0442\u043e \u043f\u0435\u0440\u0435\u0441\u0435\u0447\u0435\u043d\u0438\u0439 \u0431\u044b\u0442\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e.<\/p>\n<p>  \u041f\u0440\u043e Jade \u043e\u0441\u043e\u0431\u043e \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0435\u0447\u0435\u0433\u043e. \u0412\u043f\u043e\u043b\u043d\u0435 \u0441\u0435\u0431\u0435 \u0448\u0430\u0431\u043b\u043e\u043d\u0438\u0437\u0430\u0442\u043e\u0440. \u041a\u0442\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b Slim \u2013 \u0442\u043e \u0436\u0435 \u0441\u0430\u043c\u043e\u0435. \u041f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442 include \u0438 partial. \u0425\u0435\u043b\u043f\u0435\u0440\u044b \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u043a\u0438\u043d\u0443\u043b \u0447\u0435\u0440\u0435\u0437 \u043e\u0431\u0449\u0438\u0439 helpers.js \u0444\u0430\u0439\u043b. \u0425\u043e\u0442\u044f \u043c\u043e\u0436\u043d\u043e \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0438. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0436\u0435 \u0435\u0441\u0442\u044c :markdown.<\/p>\n<h3>\u041d\u0435\u043c\u043d\u043e\u0436\u043a\u043e \u043f\u0440\u043e \u0434\u0435\u043f\u043b\u043e\u0438<\/h3>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u0440\u043e \u0442\u043e, \u043a\u0430\u043a \u0440\u0430\u0437\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443, \u0432\u0441\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0441\u0440\u0430\u0437\u0443, \u0442\u043e \u0432\u043e\u0442 \u043a\u0430\u043a \u0434\u0435\u043f\u043b\u043e\u0438\u0442\u044c \u0434\u0435\u043f\u043b\u043e\u0438 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u0437\u0430\u0434\u0443\u043c\u0430\u0442\u044c\u0441\u044f. \u0423 \u0440\u0435\u043b\u044c\u0441\u043e\u0432\u0438\u043a\u043e\u0432 \u0443\u0436\u0435 \u043f\u0440\u0438\u0434\u0443\u043c\u0430\u043d\u043e 9999999 \u0440\u0435\u0448\u0435\u043d\u0438\u0439 \u0432\u0440\u043e\u0434\u0435 capistrano, \u0430 \u0434\u043b\u044f \u043d\u043e\u0434\u044b \u043f\u043e\u043a\u0430-\u0447\u0442\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u043e\u0433\u043e \u043c\u043d\u0435 \u043d\u0430\u0439\u0442\u0438 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c.<br \/>  \u042f \u0440\u0435\u0448\u0438\u043b \u043d\u0430 \u0442\u0435\u0441\u0442\u043e\u0432\u044b\u0439 VPS \u0432\u044b\u043a\u043b\u0430\u0434\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u043e\u0441\u0442\u043e cake \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0435\u0439: `cake deploy`, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0434\u0435\u043b\u0430\u0435\u0442 \u0431\u0443\u043a\u0432\u0430\u043b\u044c\u043d\u043e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0435:<\/p>\n<pre>     task 'update', '[VPS]: Update current state with new from repo', -&gt;       console.log('[Cake]: Pulling updates from repo')       exec('git pull', (error, stdout, stderr) -&gt;         unless error           console.log('[Cake]: Installing npm packages')           exec('npm install', (error, stdout, stderr) -&gt;             unless error               console.log('[Cake]: Restarting forever')               # exec('forever restartall')               exec('killall forever')               exec('killall nodejs')                console.log('[Cake]: Cleaning up old assets')               exec('find .\/public\/assets -regextype posix-egrep -regex &quot;.*\\.(js|css|gz|gzip)$&quot; -delete')                exec('cake forever')               sendMail()             else               console.warn(&quot;[Cake]: Installation failed with error: #{error}&quot;)           )         else           console.warn(&quot;[Cake]: Update failed with error: #{error}&quot;)       )     task 'deploy', '[DEV]: Deploy current repo state to dev VPS', -&gt;       console.log('[Cake]: Connecting to VPS mobota@mobota-dev.ostrovok.ru && running update')       exec('ssh mobota@mobota-dev.ostrovok.ru \\'cd \/var\/www\/mobota && cake update\\'', (error, stdout, stderr) -&gt;         if error           console.warn(&quot;[Cake]: Deploy failed with error: #{error}&quot;)         else           console.log('[Cake]: Deployed!')       )   <\/pre>\n<p>  \u0414\u043b\u044f \u0432\u044b\u043a\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043d\u0430 production \u0414\u0435\u043d\u0438\u0441 \u041e\u0440\u043b\u0438\u0445\u0438\u043d \u043d\u0430\u043b\u0430\u0434\u0438\u043b \u0441\u043e\u0431\u0438\u0440\u0430\u043b\u043a\u0443 debian \u043f\u0430\u043a\u0435\u0442\u043e\u0432. \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0447\u0435\u0440\u0435p teamcity, \u043f\u0440\u043e\u0433\u043e\u043d\u044f\u0435\u0442 \u0442\u0435\u0441\u0442\u044b \u043f\u0435\u0440\u0435\u0434 \u0441\u0431\u043e\u0440\u043a\u043e\u0439. \u041e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u043e. \u0414\u0435\u0442\u0430\u043b\u0438 \u043d\u0435 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u043e\u043d \u043a\u0430\u043a-\u043d\u0438\u0431\u0443\u0434\u044c \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0435\u0442.<\/p>\n<p>  \u041a\u0441\u0442\u0430\u0442\u0438 \u043e \u0442\u0435\u0441\u0442\u0430\u0445. \u042f \u043e\u0431\u044b\u0447\u043d\u043e \u0442\u0435\u0441\u0442\u044b \u043d\u0435 \u043f\u0438\u0448\u0443, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0445\u0430\u0445\u0430-\u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434 \u0438 \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435 \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u043d\u0438\u0432\u044b\u0439. \u041d\u043e \u0442\u0443\u0442 integration tests \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u0438\u043b\u0438\u0441\u044c, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e API. \u042f \u043f\u0438\u0441\u0430\u043b \u0442\u0435\u0441\u0442\u044b \u043d\u0430 mocha + chaiJS. \u041e\u0447\u0435\u043d\u044c \u043f\u0440\u043e\u0441\u0442\u043e \u0438 \u0443\u0434\u043e\u0431\u043d\u043e, \u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u0445\u043e\u0440\u043e\u0448\u0438\u0439 reporter:<br \/>  <img decoding=\"async\" src=\"http:\/\/habrastorage.org\/storage2\/5eb\/2ae\/ac6\/5eb2aeac6f8d25f10a9f910e5cac283b.png\"\/><br \/>  (\u0421\u0438\u0436\u0443 \u0432 \u043f\u0430\u0440\u043a\u0435, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0438\u043d\u0442\u0435\u0440\u043d\u0435\u0442 \u043d\u0435 \u0441\u0443\u043f\u0435\u0440 \u0431\u044b\u0441\u0442\u0440\u044b\u0439 \u0438 \u0442\u0435\u0441\u0442\u044b \u0441\u0432\u0430\u043b\u0438\u043b\u0438\u0441\u044c)<\/p>\n<h3>\u042d\u0442\u043e \u0432\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e, \u043d\u043e \u0433\u0434\u0435 \u0442\u0443\u0442 \u043f\u0440\u043e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0443\u044e \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0443.<\/h3>\n<p>  \u0418 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e, \u043f\u043e\u0440\u0430 \u0431\u044b \u0443\u0436\u0435 \u043f\u0440\u043e \u0441\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435. \u041a\u0430\u043a\u0438\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f \u044f \u0437\u0430\u043c\u0435\u0442\u0438\u043b \u043f\u0440\u0438 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0434 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0432 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0438 \u0441 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u044b\u043c\u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u043c\u0438. \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u044f, \u0447\u0442\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u043e\u0434 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u0441\u0440\u0430\u0437\u0443, \u0430 \u0443 \u043a\u0430\u0436\u0434\u043e\u0439 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0441\u0432\u043e\u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442\u0441\u044f \u043d\u0435 \u0442\u0430\u043a \u0443\u0436 \u0438 \u043f\u0440\u043e\u0441\u0442\u043e. \u041c\u043e\u0433\u0443 \u0441\u043a\u0430\u0437\u0430\u0442\u044c \u0447\u0442\u043e, \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0430\u0441\u044c \u043d\u0435 \u0441\u0438\u043b\u044c\u043d\u043e. \u0413\u043b\u0430\u0432\u043d\u0430\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u044d\u0442\u043e Android \u0442\u0435\u043b\u0435\u0444\u043e\u043d\u044b 2-\u0439 \u0432\u0435\u0440\u0441\u0438\u0438, \u0438 \u0440\u0430\u043d\u043d\u0438\u0435 4-\u043a\u0438. \u0421 iOS \u0432\u0441\u0435 \u043a\u0443\u0434\u0430 \u043f\u0440\u043e\u0449\u0435, \u0445\u043e\u0442\u044f \u0438 \u0443 \u043d\u0438\u0445 \u0431\u044b\u0432\u0430\u044e\u0442 \u0447\u0443\u0434\u0435\u0441\u0430.<\/p>\n<p>  \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u0435\u0442\u0430\u043b\u044c\u043d\u0435\u0435 \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u043e\u0432\u0441\u0435\u043c \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u044b\u0435, \u043d\u043e \u044f \u043f\u043e\u0432\u0442\u043e\u0440\u044e\u0441\u044c. \u041d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u043d\u043e\u0432\u044b\u043c\u0438, \u0430 \u0437\u043d\u0430\u0447\u0438\u0442 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b \u0438 \u043a\u043e\u043c\u0443-\u0442\u043e \u0435\u0449\u0435.<\/p>\n<ul>\n<li>\u0422\u043e\u0440\u043c\u043e\u0437\u0430 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0430\u0445. \u0412\u0441\u0435 \u0437\u043d\u0430\u044e\u0442 \u043f\u0440\u043e 300ms \u0437\u0430\u0434\u0435\u0440\u0436\u043a\u0443 \u043f\u0440\u0438 \u043a\u043b\u0438\u043a\u0430\u0445. \u041b\u044e\u0431\u044b\u0435 \u043a\u043b\u0438\u043a\u0438 \u043f\u043e \u043e\u0431\u044b\u0447\u043d\u044b\u043c \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0430 \u0441\u0430\u0439\u0442\u0435 \u0431\u0443\u0434\u0443\u0442 \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438\u043c\u0435\u0440\u043d\u043e \u0447\u0435\u0440\u0435\u0437 300ms \u043f\u043e\u0441\u043b\u0435 \u043d\u0430\u0436\u0430\u0442\u0438\u044f. \u042d\u0442\u043e \u043d\u0443\u0436\u043d\u043e, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043d\u044f\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u043e \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043a\u043b\u0438\u043a, \u0430 \u043d\u0435 \u043a\u0430\u043a\u043e\u0439-\u0442\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0436\u0435\u0441\u0442. \u0412 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0431\u043e\u043d\u0443\u0441\u0430, \u0435\u0441\u043b\u0438 \u043f\u043e\u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c touchstart event listener, \u043c\u044b \u0443\u0432\u0438\u0434\u0438\u043c \u0442.\u043d. ghost click \u0432 \u044d\u0442\u043e\u0439 \u0436\u0435 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u0440\u043e\u0432\u043d\u043e \u0447\u0435\u0440\u0435\u0437 300ms, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u0443\u0436\u0435 \u043f\u043e\u043c\u0435\u043d\u044f\u043b\u043e\u0441\u044c. \u0410 \u043d\u0430 Android 2 \u0431\u044b\u0432\u0430\u0435\u0442 \u0434\u0430\u0436\u0435 \u043d\u0430 \u0441\u043e\u0432\u0435\u0440\u0448\u0435\u043d\u043d\u043e \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0420\u0435\u0448\u0435\u043d\u0438\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u041c\u043e\u0436\u043d\u043e \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0445\u0438\u0442\u0440\u043e\u0443\u043c\u043d\u044b\u0435 \u0441\u0445\u0435\u043c\u044b \u043f\u043e \u043e\u0442\u043b\u0430\u0432\u043b\u0438\u0432\u0430\u043d\u0438\u044e \u044d\u0442\u0438\u0445 ghost-click, \u043a\u0430\u043a \u044d\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u0432 Google. \u0410 \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0442\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0441\u0441\u044b\u043b\u043e\u043a \u0438 click event \u0432 \u043f\u0440\u0438\u043d\u0446\u0438\u043f\u0435. \u0412 \u043c\u043e\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044f \u0432\u044b\u0431\u0440\u0430\u043b \u0432\u0442\u043e\u0440\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442. \u0412 Zepto \u0435\u0441\u0442\u044c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 tap event \u043a\u0430\u043a \u0440\u0430\u0437 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e, \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u043e\u0442 \u043e\u043d \u0441\u043b\u043e\u043c\u0430\u043d. \u042f \u043d\u0430\u043f\u0438\u0441\u0430\u043b \u0441\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0438, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0432\u044b\u043b\u043e\u0436\u0443 \u0435\u0433\u043e \u043d\u0430 GitHub.    <\/li>\n<li>\u0420\u0430\u0437\u043c\u044b\u0442\u044b\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0430 Retina. \u0421\u0435\u0439\u0447\u0430\u0441 \u0432\u0441\u0435 \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432 \u0441 pixel-ratio &gt; 1.5, \u0447\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u043d\u0430 \u043e\u0434\u0438\u043d \u0432\u0438\u0440\u0442\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u043f\u0438\u043a\u0441\u0435\u043b \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u0438\u0445. \u0427\u0442\u043e\u0431\u044b \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u0438\u0441\u044c \u043d\u0430 \u0442\u0430\u043a\u0438\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445 \u0440\u0430\u0437\u043c\u0430\u0437\u0430\u043d\u043d\u044b\u043c\u0438 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0434\u043b\u044f \u043d\u0438\u0445 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0432 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0440\u0430\u0437 \u0431\u043e\u043b\u044c\u0448\u0435 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c. \u041f\u043e\u0434\u0445\u043e\u0434 \u0434\u043b\u044f \u043b\u0435\u043d\u0438\u0432\u044b\u0445 \u2014 \u0432\u0441\u0435\u0433\u0434\u0430 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0438 \u0438 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u0442\u044c (background-size FTW).   <\/li>\n<li>Hardware-accelerated animations \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 transition\/transform. \u0412\u0440\u043e\u0434\u0435 \u0431\u044b \u0442\u0443\u0442 \u0432\u0441\u0435 \u043e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439 \u0432\u0435\u0437\u0434\u0435 translate \u0438\u043b\u0438 \u0434\u0430\u0436\u0435 translate3d \u0438 \u0431\u0443\u0434\u0435\u0442 \u0442\u0435\u0431\u0435 \u0441\u0447\u0430\u0441\u0442\u044c\u0435. \u041d\u0430 \u0434\u0435\u043b\u0435 \u0432\u044b\u0445\u043e\u0434\u0438\u0442 \u043d\u0435 \u0442\u0430\u043a. \u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445, \u043d\u0435 \u0432\u0441\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0431\u0443\u0434\u0443\u0442 \u0443\u0441\u043a\u043e\u0440\u0435\u043d\u044b \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 GPU, \u0438\u0445 \u0432\u0441\u0435\u0433\u043e \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e. \u041f\u043e\u0437\u0438\u0446\u0438\u044f, \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u0442.\u043f. \u0412\u043e \u0432\u0442\u043e\u0440\u044b\u0445 \u0443 Android 2 \u0441\u0435\u0440\u044c\u0435\u0437\u043d\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 translate3d \u0432 \u0432\u0438\u0434\u0435 \u043f\u0435\u0440\u0438\u043e\u0434\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u043c\u0435\u0440\u0446\u0430\u043d\u0438\u044f \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430, \u043f\u043e\u044f\u0432\u043b\u0435\u043d\u0438\u044f \u00ab\u0435\u043b\u043e\u0447\u0435\u043a\u00bb, \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u0442\u043e\u0440\u043c\u043e\u0437\u043e\u0432. \u041d\u0443 \u0430 \u0443 iOS \u0435\u0441\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c re-render \u0431\u043b\u043e\u043a\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 GPU \u0441\u043b\u043e\u0435. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u043d\u0430 \u043c\u043e\u0435\u043c \u0441\u0430\u0439\u0442\u0435 \u0435\u0441\u0442\u044c sidebar, \u0438 \u0435\u0433\u043e \u043c\u043e\u0436\u043d\u043e \u0442\u0430\u0441\u043a\u0430\u0442\u044c, \u0430 \u0442\u0430\u043a \u0436\u0435 \u043e\u043d \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u0432\u044b\u0435\u0437\u0436\u0430\u0435\u0442\/\u0443\u0435\u0437\u0436\u0430\u0435\u0442 \u043f\u043e \u043a\u043b\u0438\u043a\u0443. \u041f\u0440\u0438\u043a\u043e\u043b\u044c\u043d\u0430\u044f \u0448\u0442\u0443\u043a\u0430, \u043c\u0430\u043b\u043e \u0433\u0434\u0435 \u0435\u0441\u0442\u044c, \u0430 \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0435\u0439 \u044f \u0432\u043e\u043e\u0431\u0449\u0435 \u043d\u0438\u0433\u0434\u0435 \u043d\u0435 \u0432\u0438\u0434\u0435\u043b. \u041d\u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430 \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0435\u0441\u043b\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u043d\u0435\u0441\u0442\u0438 \u043d\u0430 GPU, \u0442\u043e \u043f\u0440\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430\u0445 \u043d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b \u043e\u043d \u043d\u0430\u0447\u0438\u043d\u0430\u0435\u0442 \u043c\u0435\u0440\u0446\u0430\u0442\u044c, \u043f\u0440\u043e\u043f\u0430\u0434\u0430\u0442\u044c \u0441 \u044d\u043a\u0440\u0430\u043d\u0430 \u043d\u0430 \u043f\u043e\u043b\u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u043f\u043e\u043a\u0430 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0435\u0433\u043e \u043d\u0435 \u043e\u0442\u0440\u0438\u0441\u0443\u0435\u0442 \u0438 \u0441\u043d\u043e\u0432\u0430 \u043d\u0435 \u0441\u043a\u0438\u043d\u0435\u0442 \u043d\u0430 GPU. \u041f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044e left\/top. \u041f\u043e\u043c\u0438\u043c\u043e \u044d\u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0442\u044c \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 select \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0430 \u0431\u043b\u043e\u043a\u0435, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b\u0442\u0430\u0449\u0438\u043b\u0438 \u043e\u0442\u043a\u0443\u0434\u0430-\u0442\u043e c \u043f\u043e\u043c\u043e\u0449\u044c\u044e translate, \u0442\u043e \u043d\u0430 Android 2 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043e\u043d\u0438 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043d\u0435 \u0431\u0443\u0434\u0443\u0442. \u0418\u043c\u0435\u0439\u0442\u0435 \u0432 \u0432\u0438\u0434\u0443 (\u0432\u044b\u043f\u0430\u0434\u0430\u044e\u0449\u0438\u0439 \u0441\u043f\u0438\u0441\u043e\u043a \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0442\u0430\u043c, \u0433\u0434\u0435 \u0431\u043b\u043e\u043a \u0431\u044b\u043b \u0438\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e, \u0430 \u043d\u0435 \u0442\u0430\u043c, \u0433\u0434\u0435 \u043e\u043d \u0441\u0430\u0439\u0447\u0430\u0441 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435).   <\/li>\n<li>Fixed positioning. \u042f \u0431\u044b \u0434\u0430\u0436\u0435 \u043d\u0435 \u0441\u0442\u0430\u043b \u043f\u0440\u043e\u0431\u043e\u0432\u0430\u0442\u044c. \u0421 overflow:scroll \u0432\u0440\u043e\u0434\u0435 \u0441\u0438\u0442\u0443\u0430\u0446\u0438\u044f \u0441\u0442\u0430\u043b\u0430 \u043f\u043e\u043b\u0443\u0447\u0448\u0435, \u0442\u0430\u043a \u0447\u0442\u043e \u0440\u0435\u0448\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0443 \u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043d\u0430\u0434\u043e \u0445\u0438\u0442\u0440\u044b\u043c\u0438 layout. \u041a\u043e\u0433\u0434\u0430 \u044f \u0441\u043c\u043e\u0442\u0440\u0435\u043b \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437, \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0430 \u043f\u0440\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0439 \u043a\u043b\u0430\u0432\u0438\u0430\u0442\u0443\u0440\u0435 \u043d\u0430 iOS \u0442\u0430\u043a \u0442\u043e\u043b\u043a\u043e\u043c \u0438 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0430.   <\/li>\n<li>Android 2 \u043f\u0440\u043e\u0441\u0442\u043e \u0447\u0443\u0434\u0435\u0441\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441 JSON.parse(null). \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0432\u0430\u043b\u0438\u0434\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0440\u043e\u043a\u0443 \u043f\u0435\u0440\u0435\u0434 \u043f\u0430\u0440\u0441\u0438\u043d\u0433\u043e\u043c. \u0410 \u0435\u0449\u0435 \u043e\u043d \u043d\u0435 \u0443\u043c\u0435\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0442\u044c \u0442\u0435\u043a\u0441\u0442 \u0441 text-shadow. \u041c\u043e\u0433\u0443\u0442 \u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u043d\u043e\u0441\u044b, \u0443\u043b\u0435\u0442\u0430\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u0443\u043a\u0432\u044b \u0438 \u0432\u043e\u043e\u0431\u0449\u0435 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442\u044c \u0447\u0442\u043e \u0443\u0433\u043e\u0434\u043d\u043e. \u042f \u0432\u0441\u0435\u0433\u0434\u0430 \u0434\u0435\u043b\u0430\u044e:<br \/> \n<pre>         .android2 *           text-shadow: none !important; <\/pre>\n<p>  \u042d\u043a\u043e\u043d\u043e\u043c\u0438\u0442 \u043c\u043d\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u0438 \u043d\u0435\u0440\u0432\u043e\u0432.   <\/li>\n<li>\u0412 \u0442\u043e\u043c \u043a\u0430\u043a \u0432\u0435\u0434\u0435\u0442 \u0441\u0435\u0431\u044f window \u0435\u0441\u0442\u044c \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u043b\u0438\u0447\u0438\u044f. \u0412\u043e \u043f\u0435\u0440\u0432\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u043e\u0447\u0435\u043d\u044c \u043b\u0435\u0433\u043a\u043e \u043c\u0435\u043d\u044f\u0442\u044c \u043c\u0430\u0441\u0448\u0442\u0430\u0431, \u0447\u0442\u043e \u043d\u0430 \u0431\u043e\u043b\u044c\u0448\u0438\u0445 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430\u0445 \u043f\u043e\u0447\u0442\u0438 \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0434\u0435\u043b\u0430\u044e\u0442. \u042f \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u043c\u0430\u0441\u0448\u0442\u0430\u0431 \u0437\u0430\u043b\u043e\u0447\u0438\u0442\u044c, \u0436\u0438\u0442\u044c \u0441\u0442\u0430\u043d\u0435\u0442 \u043f\u0440\u043e\u0449\u0435. \u041b\u043e\u0447\u0438\u0442\u0441\u044f \u0442\u0430\u043a:<br \/> \n<pre>         meta(name=&quot;viewport&quot;, content=&quot;width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no&quot;)       <\/pre>\n<p>  \u0415\u0449\u0435 \u043d\u0443\u0436\u043d\u043e \u0443 <a href=\"http:\/\/html5boilerplate.com\/mobile\/\">mobile html5boilerplate<\/a> \u043f\u043e\u0434\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043c\u0435\u0442\u043e\u0434 preventZoom(). \u041e\u0447\u0435\u043d\u044c \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442. \u0414\u0430 \u0438 \u0432\u043e\u043e\u0431\u0449\u0435, \u043e\u0442\u0442\u0443\u0434\u0430 \u043c\u043d\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0445 \u0432\u0435\u0449\u0435\u0439 \u043c\u043e\u0436\u043d\u043e \u0432\u0437\u044f\u0442\u044c.<\/p>\n<p>  \u0421 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u044b\/\u0448\u0438\u0440\u0438\u043d\u044b \u044d\u043a\u0440\u0430\u043d\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b. Android\/iOS \u043d\u0435\u043a\u043e\u043d\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u043d\u044b \u0432 \u0441\u0432\u043e\u0438\u0445 \u043e\u0442\u0432\u0435\u0442\u0430\u0445. Android, \u0432 \u0447\u0430\u0441\u0442\u043d\u043e\u0441\u0442\u0438, \u0432\u043e\u043e\u0431\u0449\u0435 \u043c\u043e\u0436\u0435\u0442 \u0441\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043e\u043d \u0432 2 \u0440\u0430\u0437\u0430 \u0448\u0438\u0440\u0435 \u0438 \u0432\u044b\u0448\u0435, \u0447\u0435\u043c \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435. \u042f \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0438\u0442\u0430\u044e \u043f\u043e \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c CSS, \u0438 \u0432\u0430\u043c \u0441\u043e\u0432\u0435\u0442\u0443\u044e.\u041d\u043e \u0435\u0441\u043b\u0438 \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0447\u0435\u0442\u0441\u044f, \u0443 \u043c\u0435\u043d\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u043e\u0441\u044c \u0432\u043e\u0442 \u0442\u0430\u043a:   <\/p>\n<pre>         class Size           _min_width: 320           _min_height: 416            _iOS_toolbar_height: 44           _android_delay: 300            constructor: -&gt;             @width = null             <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a> = null              if $.os.ios               app.dom.win.on('orientationchange load', @orientationChange)             else               app.dom.win.on('orientationchange resize load', =&gt;                 window.setTimeout(@orientationChange, @_android_delay)               )              @orientationChange()            orientationChange: =&gt;             prevWidth = @width             prevHeight = <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a>              if $.os.ios and not window.orientation               @width = window.screen.availWidth               <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a> = window.screen.availHeight - @_iOS_toolbar_height             else               @width = app.dom.win.width()               <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a> = app.dom.win.height()              @width = Math.max(@_min_width, @width)             <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a> = Math.max(@_min_height, <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a>)              if @width isnt prevWidth or <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a> isnt prevHeight               app.trigger('size:resize',                 width: @width                 height: <a href=\"http:\/\/habrahabr.ru\/users\/height\/\" class=\"user_link\">height<\/a>                 )  <\/pre>\n<p>  \u0421 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u044b \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430\/\u043e\u043a\u043d\u0430 \u043e\u0436\u0438\u0434\u0430\u0439\u0442\u0435 \u043c\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0439, \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u0432 \u044d\u0442\u043e\u043c \u043f\u043b\u0430\u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u043a\u043b\u0430\u0441\u0441\u043d\u044b\u0435 \u0438 \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u043f\u043e\u043b\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0438 \u0441 overlay\/modal \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u043e.   <\/li>\n<li>\u0421\u0435\u0442\u0435\u0432\u044b\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u044b\u0435, \u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u0435\u0441\u043b\u0438 \u0434\u043e\u043b\u0433\u043e\u0435 \u0432\u0440\u0435\u043c\u044f \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u043b\u043e\u0441\u044c. \u041f\u0430\u0440\u0430\u043b\u043b\u0435\u043b\u0438\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441\u044b \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u0435\u0442 \u043e\u043a\u0430\u0437\u0430\u0442\u044c\u0441\u044f \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0445\u043e\u0440\u043e\u0448\u0435\u0439 \u0437\u0430\u0442\u0435\u0435\u0439, \u043e\u0434\u0438\u043d \u0438\u0437 \u043d\u0438\u0445 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0444\u0435\u0439\u043b\u0438\u0442\u044c\u0441\u044f, \u0434\u0430 \u0438 \u043a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u044d\u0442\u043e \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u0431\u044b\u0441\u0442\u0440\u0435\u0435. \u042f \u0441\u0442\u0430\u0440\u0430\u044e\u0441\u044c \u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u043b\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u043e\u0442\u0432\u0435\u0442\u0430\u043c\u0438. (\u0431\u043e\u043b\u044c\u0448\u0438\u0435 \u044d\u0442\u043e 500\u043a\u0431-1\u043c\u0431 \u043c\u0430\u043a\u0441\u0438\u043c\u0443\u043c, \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0441\u0432\u044f\u0437\u044c). \u041a\u0430\u0436\u0435\u0442\u0441\u044f, \u0442\u0430\u043a \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0435. \u0421 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u044f\u043c\u0438 \u0441 DOM \u2014 \u0442\u0430 \u0436\u0435 \u0438\u0441\u0442\u043e\u0440\u0438\u044f. \u0412\u0441\u0435 \u043e\u0447\u0435\u043d\u044c \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u0430\u043f\u043f\u0430\u0440\u0430\u0442 \u043e\u0447\u0435\u043d\u044c \u0442\u0443\u043f\u043e\u0439. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e Android, \u044f \u043d\u0435 \u043f\u043e\u043d\u0438\u043c\u0430\u044e \u0432 \u0447\u0435\u043c \u0443 \u043d\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430. \u0414\u0430\u0436\u0435 \u043d\u043e\u0432\u044b\u0435 4-\u043a\u0438 \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u044e\u0442 \u0442\u043e\u043c\u0443 \u0436\u0435 iPhone 4S. \u0412 \u043e\u0431\u0449\u0435\u043c, \u0442\u0443\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u044e\u0442 \u043e\u0431\u044b\u0447\u043d\u044b\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u0430 \u2013 \u043c\u0435\u043d\u044c\u0448\u0435 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0433\u0440\u0443\u043f\u043f\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u043f\u0438\u0441\u044c\/\u0447\u0442\u0435\u043d\u0438\u0435.   <\/li>\n<li>\u0420\u0430\u043d\u043d\u0438\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 Android 4 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 History API. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442, \u0447\u0442\u043e \u0432 Backbone \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0445\u0435\u0448\u0438 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f state. \u041d\u043e\u0432\u044b\u0435 \u0432\u0435\u0440\u0441\u0438\u0438 \u0443\u0436\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0442\u044c \u0432\u0441\u0435 \u043a\u0430\u043a \u0438 \u043d\u0430\u0434\u043e, \u0430 Android 2 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u043b, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u044f \u043f\u0440\u043e\u0441\u0442\u043e \u043d\u0435 \u0441\u0442\u0430\u043b \u0437\u0430\u043c\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c\u0441\u044f.   <\/li>\n<li>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u043e\u0442\u0441\u043a\u0440\u043e\u043b\u043b\u0435\u043d\u0430 \u0432\u043d\u0438\u0437 \u0438 \u0432\u044b \u043c\u0435\u043d\u044f\u0435\u0442\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u2013 Android \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u0441\u043a\u0440\u043e\u043b\u043b \u043f\u043e\u0437\u0438\u0446\u0438\u044e \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u0412 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0441\u043e\u0442\u044b \u043d\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u0432\u0438\u0434\u0438\u043c\u044b\u0435 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b.   <\/li>\n<li>\u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0431\u043b\u043e\u043a \u0441 position: absolute, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0443\u043b\u0435\u0442\u0435\u043b \u043a\u0443\u0434\u0430-\u0442\u043e \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u044d\u043a\u0440\u0430\u043d\u0430, \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u043e\u043d \u043d\u0435 \u043e\u0447\u0435\u043d\u044c \u0431\u043e\u043b\u044c\u0448\u043e\u0439 \u043f\u043e \u0432\u044b\u0441\u043e\u0442\u0435. \u0418\u043d\u0430\u0447\u0435 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u043f\u043e\u044f\u0432\u044f\u0442\u0441\u044f \u00ab\u0434\u044b\u0440\u043a\u0438\u00bb \u043a\u0430\u043a \u0431\u0443\u0434\u0442\u043e \u043e\u043d \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u0435\u0442 \u043a\u0430\u043a\u0443\u044e-\u0442\u043e \u0432\u044b\u0441\u043e\u0442\u0443. \u0410\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e \u0434\u043b\u044f iOS.   <\/li>\n<li>\u0415\u0441\u043b\u0438 \u0445\u043e\u0447\u0435\u0442\u0441\u044f \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u043f\u043e\u043b\u043d\u044b\u0439 \u044d\u043a\u0440\u0430\u043d \u0432 iOS, \u0442\u043e \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0434\u0430\u0442\u044c height \u043e\u0434\u043d\u043e\u043c\u0443 \u0438\u0437 \u043a\u043e\u0440\u043d\u0435\u0432\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0440\u0430\u0432\u043d\u044b\u0439 \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0439 \u0432\u044b\u0441\u043e\u0442\u0435 \u044d\u043a\u0440\u0430\u043d\u0430. \u0418\u043d\u0430\u0447\u0435 \u0441\u0442\u0430\u0442\u0443\u0441 \u0431\u0430\u0440 \u043d\u0438\u043a\u0443\u0434\u0430 \u043d\u0435 \u043f\u0440\u043e\u043f\u0430\u0434\u0435\u0442 \u043a\u0430\u043a \u043d\u0438 \u0441\u0442\u0430\u0440\u0430\u0439\u0441\u044f. height: 100% \u0442\u043e\u0436\u0435 \u043d\u0435 \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043a\u0430\u043a \u043d\u0430\u0434\u043e.   <\/li>\n<li>\u0415\u0441\u043b\u0438 \u0443 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430 \u0435\u0441\u0442\u044c overflow: scroll, \u0430 \u0443 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 position: absolute, \u043c\u043e\u0433\u0443\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u043f\u0440\u0438 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0435 \u043d\u0430 Android. \u0420\u0435\u0448\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c overflow: scroll.   <\/li>\n<\/ul>\n<p>  \u0412 \u0446\u0435\u043b\u043e\u043c, \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0435 \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0441\u0430\u0439\u0442\u0430\u043c\u0438 \u043d\u0430 \u043e\u0447\u0435\u043d\u044c \u0441\u043b\u0430\u0431\u044b\u0445 \u043c\u0430\u0448\u0438\u043d\u0430\u0445. \u041d\u0443\u0436\u043d\u043e \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0442\u044c, \u0447\u0442\u043e \u0431\u0430\u0442\u0430\u0440\u0435\u0439\u043a\u0430 \u0438 \u0440\u0435\u0441\u0443\u0440\u0441\u044b \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u043e\u0440\u0430\/\u043f\u0430\u043c\u044f\u0442\u0438 \u043e\u0447\u0435\u043d\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u044b, \u0438 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u043d\u0430 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0445 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u044d\u0442\u043e \u0442\u043e\u043b\u044c\u043a\u043e \u043c\u043e\u0439 \u043b\u0438\u0447\u043d\u044b\u0439 \u043e\u043f\u044b\u0442, \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043d\u0430 \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0431\u044b\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b \u0434\u043b\u044f \u0442\u0435\u0441\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f. \u042f \u043c\u043e\u0433\u0443 \u043e\u0448\u0438\u0431\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u043f\u0443\u043d\u043a\u0442\u0430\u043c.<\/p>\n<p>  \u0411\u043e\u043d\u0443\u0441\u044b \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043f\u043e\u0434 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435, \u0432 \u043e\u0442\u043b\u0438\u0447\u0438\u0435 \u043e\u0442 \u0434\u0435\u0441\u043a\u0442\u043e\u043f\u043d\u044b\u0445, \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b:   <\/p>\n<ul>\n<li>\u0425\u043e\u0442\u044c \u0443\u0441\u0442\u0440\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0442\u043e\u0440\u043c\u043e\u0437\u043d\u044b\u0435, \u043d\u043e \u0432\u0441\u0435-\u0442\u0430\u043a\u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0438 \u043c\u043d\u043e\u0433\u043e \u0447\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044f. \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 keyframes\/transition \u0438 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0439 JavaScript etc.   <\/li>\n<li>\u0412\u0441\u0435\u0433\u043e 3 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b. iOS \u0432\u043f\u043e\u043b\u043d\u0435 \u043d\u0435\u043f\u043b\u043e\u0445\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0441\u0430\u043c\u0430 \u043f\u043e \u0441\u0435\u0431\u0435, \u0430 \u0434\u043b\u044f \u043e\u0442\u043b\u0430\u0434\u043a\u0438 \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c Developer Tools \u0432 Safari, \u0441\u043e\u0432\u0435\u0442\u0443\u044e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c. \u0421 Android \u043f\u043e\u0445\u0443\u0436\u0435, \u043c\u0430\u043b\u043e \u043a\u0430\u043a\u0438\u0435 \u043e\u0442\u0434\u0430\u044e\u0442 browser log \u0432 adb \u043a\u043e\u043d\u0441\u043e\u043b\u044c, \u043d\u043e \u0432\u0441\u0435 \u0440\u0430\u0432\u043d\u043e \u0438\u0445 \u0432\u0441\u0435\u0433\u043e 2 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b \u0438 \u0441\u0445\u043e\u0436\u0438\u0439 \u0434\u0432\u0438\u0436\u043e\u043a \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430. \u041c\u043e\u0436\u043d\u043e \u0437\u0430\u0431\u044b\u0442\u044c \u043f\u0440\u043e \u043c\u043d\u043e\u0433\u0438\u0435 vendor prefixes.   <\/li>\n<li>\u0412\u0441\u0435\u0433\u0434\u0430 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e \u043f\u043e\u0438\u0433\u0440\u0430\u0442\u044c \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0438\u0433\u0440\u0443\u0448\u043a\u0430\u043c\u0438. \u0410 \u0435\u0449\u0435 \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0435 \u0441\u0430\u0439\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u0432\u043e\u0440\u0430\u0447\u0438\u0432\u0430\u0442\u044c \u043a\u0430\u043a native apps, \u0438\u043b\u0438 \u0445\u043e\u0442\u044f-\u0431\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 homescreen. \u041a\u043b\u0430\u0441\u0441\u043d\u043e.   <\/li>\n<\/ul>\n<h3>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h3>\n<p>  \u041c\u044b \u0436\u0438\u0432\u0435\u043c \u0432 \u043e\u0442\u043b\u0438\u0447\u043d\u043e\u0435 \u0432\u0440\u0435\u043c\u044f, \u0434\u043b\u044f \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0431\u044b\u0442\u044c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u043c. \u0412 \u0433\u043e\u043b\u043e\u0432\u0435 \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0438\u0434\u0435\u044f, \u0438 \u0442\u044b \u043b\u0435\u0433\u043a\u043e \u0435\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u0443\u0435\u0448\u044c. \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043b\u044e\u0434\u0438 \u0436\u0438\u0432\u0443\u0442 \u0441 \u0438\u0434\u0435\u044f\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0434\u043b\u044f \u043d\u0438\u0445 \u043d\u0443 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u043e\u043f\u043b\u043e\u0442\u0438\u0442\u044c \u0432 \u0436\u0438\u0437\u043d\u044c. \u0422\u0430\u043a \u0447\u0442\u043e \u043f\u0438\u0448\u0438\u0442\u0435 \u043a\u043e\u0434 \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 NodeJS \u2013 \u0431\u044b\u0441\u0442\u0440\u043e, \u0443\u0434\u043e\u0431\u043d\u043e, \u0430\u0441\u0438\u043d\u0445\u0440\u043e\u043d\u043d\u043e, \u043c\u043e\u043b\u043e\u0434\u0435\u0436\u043d\u043e. \u0418 \u0431\u043e\u043b\u044c\u0448\u0435 \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043e\u0441\u0442\u0430\u043d\u0435\u0442\u0441\u044f \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u0438\u0434\u0443\u043c\u044b\u0432\u0430\u0442\u044c \u0438\u0434\u0435\u0438, \u0430 \u043d\u0435 \u043f\u0435\u0447\u0430\u0442\u0430\u0442\u044c \u0431\u0443\u043a\u0432\u044b.<\/p>\n<p>  \u0414\u0443\u043c\u0430\u044e, \u044f \u0432\u044b\u043b\u043e\u0436\u0443 \u0447\u0442\u043e-\u043d\u0438\u0431\u0443\u0434\u044c \u0438\u0437 \u0441\u0430\u0439\u0442\u0430 \u043d\u0430 GitHub, \u043c\u043e\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0443 \u0441\u0435\u0431\u044f. \u0412\u0441\u0435\u043c \u0443\u0434\u0430\u0447\u0438, \u043f\u043e\u0446\u043e\u043d\u044b.    \t<\/p>\n<div class=\"clear\"><\/div>\n<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"http:\/\/habrahabr.ru\/company\/ostrovok\/blog\/183746\/\"> http:\/\/habrahabr.ru\/company\/ostrovok\/blog\/183746\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div class=\"content html_format\">   \t\u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442. \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041c\u0430\u043a\u0441 \u0414\u0435\u0433\u0442\u0435\u0440\u0435\u0432 (\u0443 \u043c\u0435\u043d\u044f \u0442\u0443\u0442 \u043d\u0435\u0442 \u0430\u043a\u043a\u0430\u0443\u043d\u0442\u0440\u0430, \u0442\u0430\u043a \u0447\u0442\u043e \u0432\u043e\u0442 \u043c\u043e\u0439 twitter: <a href=\"https:\/\/twitter.com\/suprMax\">@suprMax<\/a> \u0438 \u0441\u0430\u0439\u0442 <a href=\"http:\/\/maxdegterev.name\">maxdegterev.name<\/a> ). \u041c\u044b \u043d\u0435\u0434\u0430\u0432\u043d\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u043b\u0438 \u043d\u043e\u0432\u0443\u044e \u043a\u043b\u0430\u0441\u0441\u043d\u0443\u044e \u0432\u0435\u0440\u0441\u0438\u044e \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u0430\u0439\u0442\u0430. \u041f\u0440\u043e \u043d\u0435\u0433\u043e-\u0442\u043e \u044f \u0432\u0430\u043c \u0441\u0435\u0439\u0447\u0430\u0441 \u0438 \u0440\u0430\u0441\u0441\u043a\u0430\u0436\u0443. <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-183746","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/183746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=183746"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/183746\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=183746"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=183746"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=183746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}