{"id":273549,"date":"2016-02-04T03:37:02","date_gmt":"2016-02-04T00:37:02","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=273549"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=273549","title":{"rendered":"\u0420\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u043e \u043f\u043e HTML\/CSS\/JavaScript"},"content":{"rendered":"

<\/p>\n

Frontend Guidelines<\/b><\/h4>\n

\u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f, \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f HTML, \u0421SS \u0438 JavaScript \u043a\u043e\u0434\u0430. \u0415\u0433\u043e \u0446\u0435\u043b\u044c \u2014 \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 \u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b.<\/p>\n

\u041e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/b><\/h4>\n

\u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445 \u0441\u043d\u043e\u0432\u0430, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041c\u0430\u043a\u0441\u0438\u043c \u0418\u0432\u0430\u043d\u043e\u0432, \u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u043f\u0435\u0440\u0435\u0432\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c. \u0411\u0435\u043d\u0434\u0436\u0430\u043c\u0438\u043d \u0414\u0435 \u041a\u0443\u043a<\/a> (Benjamin De Cock), \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437 \u0411\u0435\u043b\u044c\u0433\u0438\u0438, \u0441\u043e\u0431\u0440\u0430\u043b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043f\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438<\/a> \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e HTML, CSS, JS. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d \u043e\u0442 Google<\/a>, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u0447\u0442\u043e-\u0442\u043e, \u043e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0438\u0437 \u043d\u0438\u0445, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0434\u0435\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0430\u0448 \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u0435\u0442 \u043b\u0443\u0447\u0448\u0435. \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u043c \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0430 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0412 \u043e\u0431\u0449\u0435\u043c \u0438 \u0446\u0435\u043b\u043e\u043c, \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u0432\u0438\u0434\u0435\u043d\u044c\u044f \u0434\u0435\u043b\u0430, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043e\u043a, \u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043f\u0438\u0448\u0443\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438 \u0432 \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u043d\u044b\u043c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0433\u0443\u0440\u0443, \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0432\u0430\u043c \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043a\u0435\u043c \u043d\u0430 \u0432\u0430\u0448 \u0432\u0437\u0433\u043b\u044f\u0434. \u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.
<\/a><\/p>\n

HTML<\/b><\/h4>\n

<\/p>\n

    \n
  1. \u0421\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430<\/a> <\/li>\n
  2. \u041b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n
  3. \u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n
  4. \u042f\u0437\u044b\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/a> <\/li>\n
  5. \u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n<\/ol>\n

    CSS<\/b><\/h4>\n

    <\/p>\n

      \n
    1. \u0422\u043e\u0447\u043a\u0430 \u0441 \u0437\u0430\u043f\u044f\u0442\u043e\u0439<\/a> <\/li>\n
    2. \u0411\u043b\u043e\u0447\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c<\/a> <\/li>\n
    3. \u041f\u043e\u0442\u043e\u043a\u0438<\/a> <\/li>\n
    4. \u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/a> <\/li>\n
    5. \u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/a> <\/li>\n
    6. \u0421\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n
    7. \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/a> <\/li>\n
    8. \u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/a> <\/li>\n
    9. \u041b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n
    10. \u0410\u043d\u0433\u043b\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/a> <\/li>\n
    11. \u0412\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b<\/a> <\/li>\n
    12. \u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/a> <\/li>\n
    13. \u0415\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/a> <\/li>\n
    14. \u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c<\/a> <\/li>\n
    15. \u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430<\/a> <\/li>\n
    16. \u0425\u0430\u043a\u0438<\/a> <\/li>\n<\/ol>\n

      JavaScript<\/b><\/h4>\n

      <\/p>\n

        \n
      1. \u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n
      2. \u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/a> <\/li>\n
      3. \u041d\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n
      4. \u041f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435<\/a> <\/li>\n
      5. \u0426\u0438\u043a\u043b\u044b<\/a> <\/li>\n
      6. \u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<\/a> <\/li>\n
      7. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 apply<\/a> <\/li>\n
      8. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 bind<\/a> <\/li>\n
      9. \u041c\u0435\u0442\u043e\u0434\u044b \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430<\/a> <\/li>\n
      10. \u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/a> <\/li>\n
      11. \u041a\u044d\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/a> <\/li>\n
      12. \u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/a> <\/li>\n
      13. \u0423\u0441\u043b\u043e\u0432\u0438\u044f<\/a> <\/li>\n
      14. \u0418\u0442\u0435\u0440\u0430\u0442\u043e\u0440<\/a> <\/li>\n
      15. \u041e\u0431\u044a\u0435\u043a\u0442 \u043a\u0430\u043a \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432<\/a> <\/li>\n
      16. \u041a\u0430\u0440\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/a> <\/li>\n
      17. \u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/a> <\/li>\n
      18. \u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/a> <\/li>\n
      19. \u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/a> <\/li>\n<\/ol>\n

        HTML<\/b><\/h3>\n

        <\/p>\n

        <\/a>\u0421\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0430<\/b><\/h4>\n

        HTML5 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0445 \u043d\u0430 \u0442\u043e\u0447\u043d\u043e\u0435 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430 \u0438\u043b\u0438 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0433\u043e. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u0443\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0443 \u0432\u0430\u0441 \u0432\u0441\u0435 \u0445\u043e\u0440\u043e\u0448\u043e \u0441 \u043b\u0435\u043a\u0441\u0438\u043a\u043e\u0439.<\/p>\n

        <!-- \u043f\u043b\u043e\u0445\u043e --> <div id="main">   <div class="article">     <div class="header">       <h1>Blog post<\/h1>       <p>Published: <span>21st Feb, 2015<\/span><\/p>     <\/div>     <p>\u2026<\/p>   <\/div> <\/div>  <!-- \u0445\u043e\u0440\u043e\u0448\u043e --> <main>   <article>     <header>       <h1>Blog post<\/h1>       <p>Published: <time datetime="2015-02-21">21st Feb, 2015<\/time><\/p>     <\/header>     <p>\u2026<\/p>   <\/article> <\/main> <\/code><\/pre>\n
          \u0423\u0431\u0435\u0434\u0438\u0442\u0435\u0441\u044c, \u0447\u0442\u043e \u0432\u044b \u043f\u043e\u043d\u044f\u043b\u0438 \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u043a\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 \u0432 \u0441\u0432\u043e\u0435\u043c \u043a\u043e\u0434\u0435. \u041e\u0447\u0435\u043d\u044c \u043f\u043b\u043e\u0445\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043d\u0435 \u043f\u043e \u043d\u0430\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u0438\u043b\u0438 \u043d\u0435 \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0435\u0436\u0435\u043b\u0438 \u0431\u044b \u0432\u044b \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0441\u0442\u0430\u0432\u0430\u043b\u0438\u0441\u044c \u043d\u0435\u0439\u0442\u0440\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a \u044d\u0442\u0438\u043c \u044d\u0442\u0438\u043c \u0441\u0435\u043c\u0430\u043d\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u043c \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c.<\/p>\n
        <!-- \u043f\u043b\u043e\u0445\u043e --> <h1>   <figure>     <img alt=Company src=logo.png>   <\/figure> <\/h1>  <!-- \u0445\u043e\u0440\u043e\u0448\u043e --> <h1>   <img alt=Company src=logo.png> <\/h1> <\/code><\/pre>\n
        <\/a>\u041b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043a\u0440\u0430\u0442\u043a\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u043a\u043e\u0434. \u0417\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043e \u0441\u0432\u043e\u0438\u0445 \u0441\u0442\u0430\u0440\u044b\u0445 \u043f\u0440\u0438\u0432\u044b\u0447\u043a\u0430\u0445, \u043f\u0435\u0440\u0435\u0442\u0435\u043a\u0430\u044e\u0449\u0438\u0445 \u0438\u0437 XHTML.<\/p>\n
        <!-- \u043f\u043b\u043e\u0445\u043e --> <!doctype html> <html lang=en>   <head>     <meta http-equiv=Content-Type content="text\/html; charset=utf-8" \/>     <title>Contact<\/title>     <link rel=stylesheet href=style.css type=text\/css \/>   <\/head>   <body>     <h1>Contact me<\/h1>     <label>       Email address:       <input type=email placeholder=you@email.com required=required \/>     <\/label>     <script src=main.js type=text\/javascript><\/script>   <\/body> <\/html>  <!-- \u0445\u043e\u0440\u043e\u0448\u043e --> <!doctype html> <html lang=en>   <meta charset=utf-8>   <title>Contact<\/title>   <link rel=stylesheet href=style.css>    <h1>Contact me<\/h1>   <label>     Email address:     <input type=email placeholder=you@email.com required>   <\/label>   <script src=main.js><\/script> <\/html> <\/code><\/pre>\n
        <\/a>\u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u0430 \u0438\u043c\u0435\u0442\u044c \u0432\u0442\u043e\u0440\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u044b\u0439 \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0432\u044b \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u043d\u044b \u0431\u044b\u0442\u044c \u044d\u043a\u0441\u043f\u0435\u0440\u0442\u043e\u043c \u043f\u043e \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u0438 (WCAG) \u0434\u043b\u044f \u0442\u043e\u0433\u043e, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u0443\u043b\u0443\u0447\u0448\u0438\u0442\u044c \u0441\u0432\u043e\u0439 \u0441\u0430\u0439\u0442, \u043e\u0434\u043d\u0430\u043a\u043e, \u0443\u0436\u0435 \u043f\u0440\u044f\u043c\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0447\u0430\u0442\u044c \u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043c\u0435\u043b\u043e\u0447\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u043c\u043e\u0433\u0443\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u043b\u0443\u0447\u0448\u0435, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n
           \u2014 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0442\u0440\u0438\u0431\u0443\u0442 alt<\/i> \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e
           \u2014 \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0438\u043c\u0435\u043d\u0430 (links) \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b (buttons) \u0438 \u043d\u0430\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u0438\u0445 \u043f\u043e \u0441\u043c\u044b\u0441\u043b\u0443 (<div class=button><\/i> \u2014 \u044d\u0442\u043e \u0437\u0432\u0435\u0440\u0441\u0442\u0432\u043e)
           \u2014 \u043d\u0435 \u043f\u043e\u043b\u0430\u0433\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043d\u0430\u0437\u0432\u0430\u043d\u0438\u0435 \u0446\u0432\u0435\u0442\u043e\u0432, \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438
           \u2014 \u044f\u0432\u043d\u043e \u0441\u0432\u044f\u0437\u044b\u0432\u0430\u0439\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u043e\u0439 \u043c\u0435\u0442\u043a\u043e\u0439 \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442 \u0444\u043e\u0440\u043c\u044b<\/p>\n
        <!-- \u043f\u043b\u043e\u0445\u043e --> <h1><img alt="Logo" src="logo.png"><\/h1>  <!-- \u0445\u043e\u0440\u043e\u0448\u043e --> <h1><img alt="My Company, Inc." src="logo.png"><\/h1> <\/code><\/pre>\n
        <\/a>\u042f\u0437\u044b\u043a \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430<\/b><\/h4>\n
          \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0438 \u044f\u0437\u044b\u043a\u0430 \u0438 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u0438 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u043d\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c, \u043e\u0434\u043d\u0430\u043a\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u0435\u0442\u0441\u044f \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u044a\u044f\u0432\u043b\u044f\u0442\u044c \u0438\u0445 \u043d\u0430 \u0443\u0440\u043e\u0432\u043d\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0434\u0430\u0436\u0435 \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u0443\u043a\u0430\u0437\u0430\u043d\u044b \u0432 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430\u0445 HTTP. \u041f\u0440\u0438\u043e\u0440\u0438\u0442\u0435\u0442\u043d\u043e\u0439 \u043a\u043e\u0434\u0438\u0440\u043e\u0432\u043a\u043e\u0439 \u0441\u0438\u043c\u0432\u043e\u043b\u043e\u0432 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f UTF-8.<\/p>\n
        <!-- \u043f\u043b\u043e\u0445\u043e --> <!doctype html> <title>Hello, world.<\/title>  <!-- \u0445\u043e\u0440\u043e\u0448\u043e --> <!doctype html> <html lang=ru>   <meta charset=utf-8>   <title>Hello, world.<\/title> <\/html> <\/code><\/pre>\n
        <\/a>\u042d\u0444\u0444\u0435\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u0415\u0441\u043b\u0438 \u043d\u0435\u0442 \u0443\u0432\u0430\u0436\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u043f\u0440\u0438\u0447\u0438\u043d \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u043a\u0440\u0438\u043f\u0442\u043e\u0432 \u0434\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430, \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u0432 \u043a\u043e\u043d\u0446\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430, \u0442\u0435\u043c \u0441\u0430\u043c\u044b\u043c \u0432\u0430\u0448\u0438 \u0441\u043a\u0440\u0438\u043f\u0442\u044b \u043d\u0435 \u0431\u0443\u0434\u0443\u0442 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u043e\u0447\u0435\u043d\u044c \u0442\u044f\u0436\u0435\u043b\u044b\u0435 \u0442\u0430\u0431\u043b\u0438\u0446\u044b \u0441\u0442\u0438\u043b\u0435\u0439, \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0440\u0430\u0437\u0431\u0438\u0442\u044c \u0438\u0445 \u043d\u0430 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0438 \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u043f\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438, \u0442\u0430\u043a \u0447\u0442\u043e\u0431\u044b \u043f\u0435\u0440\u0432\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0431\u044b\u043b \u0441\u0440\u0430\u0437\u0443 \u043e\u0442\u0440\u0438\u0441\u043e\u0432\u0430\u043d. \u041e\u0447\u0435\u0432\u0438\u0434\u043d\u043e, \u0447\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 \u0444\u0430\u0439\u043b\u043e\u0432, \u0442\u0435\u043c \u0431\u043e\u043b\u044c\u0448\u0435 HTTP \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0434\u0432\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430, \u043a\u043e\u043d\u0435\u0447\u043d\u043e, \u043c\u0435\u0434\u043b\u0435\u043d\u043d\u0435\u0435, \u0447\u0435\u043c \u043e\u0434\u0438\u043d, \u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0432\u0430\u0436\u043d\u044b\u043c \u0444\u0430\u043a\u0442\u043e\u0440\u043e\u043c \u0431\u0443\u0434\u0435\u0442 \u044f\u0432\u043b\u044f\u0442\u044c\u0441\u044f \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u043d\u0443\u0436\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430. <\/p>\n
        <!-- \u043f\u043b\u043e\u0445\u043e --> <!doctype html> <meta charset=utf-8> <script src=analytics.js><\/script> <title>Hello, world.<\/title> <p>...<\/p>  <!-- \u0445\u043e\u0440\u043e\u0448\u043e --> <!doctype html> <meta charset=utf-8> <title>Hello, world.<\/title> <p>...<\/p> <script src=analytics.js><\/script> <\/code><\/pre>\n
        CSS<\/b><\/h3>\n
          <\/p>\n
        <\/a>\u0422\u043e\u0447\u043a\u0430 \u0441 \u0437\u0430\u043f\u044f\u0442\u043e\u0439<\/b><\/h4>\n
          \u0412 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u0442\u043e\u0447\u043a\u0430 \u0441 \u0437\u0430\u043f\u044f\u0442\u043e\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0447\u0438\u0441\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0437\u0434\u0435\u043b\u0438\u0442\u0435\u043b\u0435\u043c \u043f\u0440\u0430\u0432\u0438\u043b, CSS \u0432\u0441\u0435\u0433\u0434\u0430 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0441\u044f \u043a \u0442\u043e\u0447\u043a\u0435 \u0437\u0430\u043f\u044f\u0442\u043e\u0439, \u043a\u0430\u043a \u043a \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440\u0443 \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043d\u0438\u044f.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   color: red }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   color: red; } <\/code><\/pre>\n
        <\/a>Box model<\/b><\/h4>\n
          \u0411\u043b\u043e\u0447\u043d\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c, \u0432 \u0438\u0434\u0435\u0430\u043b\u0435, \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u043e\u0434\u0438\u043d\u0430\u043a\u043e\u0432\u043e\u0439 \u0434\u043b\u044f \u0432\u0441\u0435\u0433\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u0413\u043b\u043e\u0431\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e * { box-sizing: border-box; }<\/i> \u044d\u0442\u043e \u043d\u043e\u0440\u043c\u0430\u043b\u044c\u043d\u043e, \u043e\u0434\u043d\u0430\u043a\u043e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u043c\u043d\u0438\u0442\u044c, \u0447\u0442\u043e \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u0442\u044c \u0431\u043b\u043e\u0447\u043d\u0443\u044e \u043c\u043e\u0434\u0435\u043b\u044c \u0443 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u044b\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   width: 100%;   padding: 10px;   box-sizing: border-box; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   padding: 10px; } <\/code><\/pre>\n
        <\/a>\u041f\u043e\u0442\u043e\u043a\u0438<\/b><\/h4>\n
          \u041d\u0435 \u043c\u0435\u043d\u044f\u0439\u0442\u0435 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430, \u0435\u0441\u043b\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e. \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0439\u0442\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u043e\u043c \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0438 \u0432 \u043f\u043e\u0442\u043e\u043a\u0435 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0443\u0434\u0430\u043b\u0435\u043d\u0438\u0435 \u043f\u0440\u043e\u0431\u0435\u043b\u043e\u0432 \u043f\u043e\u0434 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\u043c, \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043b\u0438\u044f\u0442\u044c \u043d\u0430 \u0435\u0433\u043e \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ img {   display: block; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ img {   vertical-align: middle; } <\/code><\/pre>\n
          \u0410\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e, \u043d\u0435 \u0432\u044b\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u0439\u0442\u0435 \u0438\u0437 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u043e\u0442\u043e\u043a\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0435\u0441\u043b\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c \u0431\u0435\u0437 \u044d\u0442\u043e\u0433\u043e.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   width: 100px;   position: absolute;   right: 0; }   \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   width: 100px;   margin-left: auto; } <\/code><\/pre>\n
        <\/a>\u041f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/b><\/h4>\n
          \u0421\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u0432 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 CSS, \u043e\u0434\u043d\u0430\u043a\u043e \u0441\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0432\u0430\u0442\u044c \u0441\u0435\u0431\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430\u043c\u0438 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u043c\u0438 \u043d\u0438\u0436\u0435. \u0412 \u043f\u043e\u0440\u044f\u0434\u043a\u0435 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0435\u043d\u0438\u044f:<\/p>\n
        display: block; display: flex; position: relative; position: sticky; position: absolute; position: fixed; <\/code><\/pre>\n
        <\/a>\u0421\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b<\/b><\/h4>\n
          \u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0441\u043e\u0447\u0435\u0442\u0430\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 DOM. \u0418\u043d\u043e\u0433\u0434\u0430, \u043b\u0443\u0447\u0448\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u043b\u0438\u0448\u043d\u0438\u0439 \u043a\u043b\u0430\u0441\u0441 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0443, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u043d\u0430\u0439\u0442\u0438, \u0447\u0435\u043c \u0438\u0441\u043a\u0430\u0442\u044c \u0435\u0433\u043e \u0447\u0435\u0440\u0435\u0437 \u0442\u0440\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u043d\u044b\u0445 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u0430: \u043f\u0441\u0435\u0432\u0434\u043e-\u043a\u043b\u0430\u0441\u0441, \u043f\u043e\u0442\u043e\u043c\u043e\u043a, \u043a\u043e\u043c\u0431\u0438\u043d\u0430\u0442\u043e\u0440.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div:first-of-type :last-child > p ~ *  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div:first-of-type .info <\/code><\/pre>\n
          \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0433\u0440\u0443\u0437\u043a\u0443 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ img[src$=svg], ul > li:first-child {   opacity: 0; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ [src$=svg], ul > :first-child {   opacity: 0; } <\/code><\/pre>\n
        <\/a>\u0421\u043f\u0435\u0446\u0438\u0444\u0438\u0447\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0438 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435\u043b\u044c\u0437\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c. \u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 id<\/i> (\u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0442\u043e\u0440\u043e\u0432) \u0438 \u0438\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043f\u0440\u0430\u0432\u0438\u043b\u043e !important<\/i><\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ .bar {   color: green !important; } .foo {   color: red; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ .foo.bar {   color: green; } .foo {   color: red; } <\/code><\/pre>\n
        <\/a>\u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f<\/b><\/h4>\n
          \u041f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435 \u0441\u0442\u0438\u043b\u0435\u0439 \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432 \u0437\u0430\u0442\u0440\u0443\u0434\u043d\u044f\u0435\u0442 \u043e\u0442\u043b\u0430\u0434\u043a\u0443. \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u044d\u0442\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u043c\u043e\u0436\u0435\u0442\u0435.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ li {   visibility: hidden; } li:first-child {   visibility: visible; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ li + li {   visibility: hidden; } <\/code><\/pre>\n
        <\/a>\u041d\u0430\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435<\/b><\/h4>\n
          \u041d\u0435 \u0434\u0443\u0431\u043b\u0438\u0440\u0443\u0439\u0442\u0435 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u044f \u0441\u0435\u043b\u0435\u043a\u0442\u043e\u0440\u043e\u0432, \u0441\u0442\u0438\u043b\u0438 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438 \u0442\u0430\u043a \u043c\u043e\u0433\u0443\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u043e \u043d\u0430\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0443.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div h1, div p {   text-shadow: 0 1px 0 #fff; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   text-shadow: 0 1px 0 #fff; } <\/code><\/pre>\n
        <\/a>\u041b\u0430\u043a\u043e\u043d\u0438\u0447\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u041f\u0443\u0441\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u0431\u0443\u0434\u0435\u0442 \u043d\u0435\u043c\u043d\u043e\u0433\u043e\u0441\u043b\u043e\u0432\u043d\u044b\u043c. \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0437\u0431\u0435\u0433\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u0442\u043e\u043c \u043c\u0435\u0441\u0442\u0435, \u0433\u0434\u0435 \u044d\u0442\u043e \u0432\u043e\u0432\u0441\u0435 \u043d\u0435 \u043d\u0443\u0436\u043d\u043e.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   transition: all 1s;   top: 50%;   margin-top: -10px;   padding-top: 5px;   padding-right: 10px;   padding-bottom: 20px;   padding-left: 10px; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   transition: 1s;   top: calc(50% - 10px);   padding: 5px 10px 20px; } <\/code><\/pre>\n
        <\/a>\u0410\u043d\u0433\u043b\u043e\u044f\u0437\u044b\u0447\u043d\u044b\u0435 \u043e\u0431\u043e\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f<\/b><\/h4>\n
          \u041f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u043d\u0433\u043b\u0438\u0439\u0441\u043a\u0443\u044e \u043c\u0430\u0442\u0435\u043c\u0430\u0442\u0438\u043a\u0443.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ :nth-child(2n + 1) {   transform: rotate(360deg); }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ :nth-child(odd) {   transform: rotate(1turn); } <\/code><\/pre>\n
        <\/a>\u0412\u0435\u043d\u0434\u043e\u0440\u043d\u044b\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b<\/b><\/h4>\n
          \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u0441\u0442\u0430\u0440\u0435\u0432\u0448\u0438\u0435 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u044b. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445, \u0432 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0439\u0442\u0435 \u0438\u0445 \u043f\u0435\u0440\u0435\u0434 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u043c\u0438.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   transform: scale(2);   -webkit-transform: scale(2);   -moz-transform: scale(2);   -ms-transform: scale(2);   transition: 1s;   -webkit-transition: 1s;   -moz-transition: 1s;   -ms-transition: 1s; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   -webkit-transform: scale(2);   transform: scale(2);   transition: 1s; } <\/code><\/pre>\n
        <\/a>\u0410\u043d\u0438\u043c\u0430\u0446\u0438\u044f<\/b><\/h4>\n
          \u0418\u043d\u043e\u0433\u0434\u0430 \u043f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u044b (transitions), \u0435\u0436\u0435\u043b\u0438 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e (animations). \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u0432 \u043f\u043e\u043b\u044c\u0437\u0443 opacity<\/i> \u0438 transform<\/i>. <\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div:hover {   animation: move 1s forwards; } @keyframes move {   100% {     margin-left: 100px;   } }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div:hover {   transition: 1s;   transform: translateX(100px); } <\/code><\/pre>\n
        <\/a>\u0415\u0434\u0438\u043d\u0438\u0446\u044b \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f<\/b><\/h4>\n
          \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0431\u0435\u0437\u0440\u0430\u0437\u043c\u0435\u0440\u043d\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f. \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c rem<\/i>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0435 \u0432\u0441\u0435 \u0432 \u043e\u0442\u043d\u043e\u0441\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0435\u0434\u0438\u043d\u0438\u0446\u0430\u0445. \u041f\u0440\u0435\u0434\u043f\u043e\u0447\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u043a\u0443\u043d\u0434\u044b, \u0435\u0436\u0435\u043b\u0438 \u043c\u0438\u043b\u043b\u0438\u0441\u0435\u043a\u0443\u043d\u0434\u044b.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   margin: 0px;   font-size: .9em;   line-height: 22px;   transition: 500ms; }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   margin: 0;   font-size: .9rem;   line-height: 1.5;   transition: .5s; } <\/code><\/pre>\n
        <\/a>\u0426\u0432\u0435\u0442\u043e\u0432\u0430\u044f \u043c\u043e\u0434\u0435\u043b\u044c<\/b><\/h4>\n
          \u0415\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u0430 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c rgba<\/i>. \u0412 \u043f\u0440\u043e\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435, \u0432\u0441\u0435\u0433\u0434\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0448\u0435\u0441\u0442\u043d\u0430\u0434\u0446\u0430\u0442\u0435\u0440\u0438\u0447\u043d\u044b\u0439 \u0444\u043e\u0440\u043c\u0430\u0442.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   color: hsl(103, 54%, 43%); }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   color: #5a3; } <\/code><\/pre>\n
        <\/a>\u041e\u0442\u0440\u0438\u0441\u043e\u0432\u043a\u0430<\/b><\/h4>\n
          \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 http-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432, \u0435\u0441\u043b\u0438 \u0440\u0435\u0441\u0443\u0440\u0441 \u043b\u0435\u0433\u043a\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0441\u044f \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e CSS.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div::before {   content: url(white-circle.svg); }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div::before {   content: "";   display: block;   width: 20px;   height: 20px;   border-radius: 50%;   background: #fff; } <\/code><\/pre>\n
        <\/a>\u0425\u0430\u043a\u0438<\/b><\/h4>\n
          \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0438\u0445.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ div {   \/\/ position: relative;   transform: translateZ(0); }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ div {   \/* position: relative; *\/   will-change: transform; } <\/code><\/pre>\n
        JavaScript<\/b><\/h3>\n
          <\/p>\n
        <\/a>\u041f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u041b\u0435\u0433\u043a\u043e\u0447\u0438\u0442\u0430\u0435\u043c\u044b\u0439, \u0432\u044b\u0440\u0430\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0438 \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u0434 \u0432\u0430\u0436\u043d\u0435\u0435 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u0438. \u041d\u0430 \u0441\u0430\u043c\u043e\u043c \u0434\u0435\u043b\u0435, JavaScript \u043d\u0438\u043a\u043e\u0433\u0434\u0430 \u043d\u0435 \u0431\u0443\u0434\u0435\u0442 \u0432\u0430\u0448\u0438\u043c \u0443\u0437\u043a\u0438\u043c \u043c\u0435\u0441\u0442\u043e\u043c \u0432 \u0440\u0430\u0441\u0447\u0435\u0442\u0435 \u043d\u0430 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c. \u041b\u0443\u0447\u0448\u0435 \u0443\u0434\u0435\u043b\u044f\u0442\u044c \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u0442\u0430\u043a\u0438\u043c \u0432\u0435\u0449\u0430\u043c, \u043a\u0430\u043a \u0441\u0436\u0430\u0442\u0438\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439, \u043e\u043f\u0442\u0438\u043c\u0438\u0437\u0430\u0446\u0438\u044f http-\u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 \u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u0441\u0435\u0442\u0438, \u043f\u0435\u0440\u0435\u0440\u0430\u0441\u0447\u0435\u0442 DOM-\u0434\u0435\u0440\u0435\u0432\u0430. \u0415\u0441\u043b\u0438 \u0432\u044b \u0437\u0430\u043f\u043e\u043c\u043d\u0438\u0442\u0435 \u0445\u043e\u0442\u044f \u0431\u044b \u043e\u0434\u043d\u0443 \u0438\u0437 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435, \u043e\u043f\u0438\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043d\u0435\u0435.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e (\u0445\u043e\u0442\u044f \u0438 \u043d\u0430\u043c\u043d\u043e\u0433\u043e \u0431\u044b\u0441\u0442\u0440\u0435\u0435) *\/ const arr = [1, 2, 3, 4]; const len = arr.length; var i = -1; var result = []; while (++i < len) {   var n = arr[i];   if (n % 2 > 0) continue;   result.push(n * n);  }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const arr = [1, 2, 3, 4]; const isEven = n => n % 2 == 0; \/\/ \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0430\u043d\u043e\u043d\u0438\u043c\u043d\u043e\u0439 \u0441\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 const square = n => n * n; \/\/ \u0441\u0438\u043d\u0442\u0430\u043a\u0441\u0438\u0441: (param1, param2, \u2026, paramN) => expression  const result = arr.filter(isEven).map(square);  <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u0421\u0442\u0440\u0435\u043b\u043e\u0447\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/a> \u0438 \u043f\u0435\u0440\u0435\u0431\u0438\u0440\u0430\u044e\u0449\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u044b \u043c\u0430\u0441\u0441\u0438\u0432\u043e\u0432<\/a><\/p>\n
        <\/a>\u041d\u0435\u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0442 \u0432\u043d\u0435\u0448\u043d\u0435\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f<\/b><\/h4>\n
          \u0421\u0442\u0430\u0440\u0430\u0439\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0441\u0432\u043e\u0431\u043e\u0434\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438. \u0412\u0441\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438 \u043c\u0435\u0442\u043e\u0434\u044b \u0432 \u0438\u0434\u0435\u0430\u043b\u0435 \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u044b \u043d\u0435\u0441\u0442\u0438 \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0431\u043e\u0447\u043d\u043e\u0433\u043e \u0445\u0430\u0440\u0430\u043a\u0442\u0435\u0440\u0430, \u0437\u0430\u0432\u0438\u0441\u0435\u0442\u044c \u043e\u0442 \u0432\u043d\u0435\u0448\u043d\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435, \u043e\u043d\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b, \u0430 \u043d\u0435 \u0432\u043d\u043e\u0441\u0438\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const merge = (target, ...sources) => Object.assign(target, ...sources); merge({ foo: "foo" }, { bar: "bar" }); \/\/ => { foo: "foo", bar: "bar" }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const merge = (...sources) => Object.assign({}, ...sources); merge({ foo: "foo" }, { bar: "bar" }); \/\/ => { foo: "foo", bar: "bar" }  <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b<\/a><\/p>\n
        <\/a>\u041d\u0430\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u041f\u043e\u043b\u0430\u0433\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u0441\u043e\u0431\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u043e\u0434\u044b, \u043a\u0430\u043a \u043c\u043e\u0436\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u0435.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const toArray = obj => [].slice.call(obj);  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const toArray = (() =>   Array.from ? Array.from : obj => [].slice.call(obj) )(); <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041c\u0430\u0441\u0441\u0438\u0432\u043e\u043f\u043e\u0434\u043e\u0431\u043d\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b<\/a><\/p>\n
        <\/a>\u041f\u0440\u0438\u043d\u0443\u0434\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435<\/b><\/h4>\n
          \u041b\u0438\u0448\u043d\u0438\u0435 \u0441\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u044f \u043d\u0435 \u0438\u043c\u0435\u044e\u0442 \u0441\u043c\u044b\u0441\u043b, \u0438\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0438\u0445.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ if (x === undefined || x === null) { \/* ... *\/  }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ if (x == undefined) { \/* ... *\/  } <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1.         \u0421\u0440\u0430\u0432\u043d\u0435\u043d\u0438\u0435 \u0441 null \u0438 undefined<\/a><\/p>\n
        <\/a>\u0426\u0438\u043a\u043b\u044b<\/b><\/h4>\n
          \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0446\u0438\u043a\u043b\u044b, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0438 \u0437\u0430\u0441\u0442\u0430\u0432\u043b\u044f\u044e\u0442 \u0432\u0430\u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0437\u043c\u0435\u043d\u044f\u0435\u043c\u044b\u0435 \u043e\u0431\u044a\u0435\u043a\u0442\u044b. \u041f\u043e\u043b\u0430\u0433\u0430\u0439\u0442\u0435\u0441\u044c \u043d\u0430 \u043c\u0435\u0442\u043e\u0434\u044b Array.prototype<\/i>.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const sum = arr => {   var sum = 0;   var i = -1;   for (;arr[++i];) {     sum += arr[i];   }   return sum; };  sum([1, 2, 3]); \/\/ => 6  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const sum = arr => arr.reduce((x, y) => x + y);  sum([1, 2, 3]); \/\/ => 6 <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u0421\u0443\u043c\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0435<\/a><\/p>\n
          \u0415\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434\u044b Array.prototype<\/i>, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044e.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const createDivs = howMany => {   while (howMany--) {     document.body.insertAdjacentHTML("beforeend", "<div><\/div>");   } };  createDivs(5);  \/* \u043f\u043b\u043e\u0445\u043e *\/ const createDivs = howMany =>   [...Array(howMany)].forEach(() =>     document.body.insertAdjacentHTML("beforeend", "<div><\/div>")   );  createDivs(5);   \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const createDivs = howMany => {   if (!howMany) return;   document.body.insertAdjacentHTML("beforeend", "<div><\/div>");   return createDivs(howMany - 1); };  createDivs(5); <\/code><\/pre>\n
          \u0412\u043e\u0442 \u043e\u0431\u0449\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f Loop<\/a>, \u0434\u0435\u043b\u0430\u044e\u0449\u0430\u044f \u0440\u0435\u043a\u0443\u0440\u0441\u0438\u044e \u043f\u0440\u043e\u0449\u0435 \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438.<\/p>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> (\u0438\u043b\u0438<\/a>) vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         insertAdjacentHTML() \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0431\u044b\u0441\u0442\u0440\u0435\u0435, \u0447\u0435\u043c \u043c\u0430\u043d\u0438\u043f\u0443\u043b\u044f\u0446\u0438\u0438 \u0441 innerHTML()<\/a><\/p>\n
        <\/a>\u0410\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u044b<\/b><\/h4>\n
          \u0417\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043e\u0431 arguments<\/i> \u043a\u0430\u043a \u043e\u0431 \u043e\u0431\u044a\u0435\u043a\u0442\u0435. \u041e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0435 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u044b \u044d\u0442\u043e \u0432\u0441\u0435\u0433\u0434\u0430 \u043b\u0443\u0447\u0448\u0438\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e:
          1. \u041f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0435\u043c\u043e\u0435 \u0438\u043c\u044f \u0434\u0430\u0435\u0442 \u043b\u0443\u0447\u0448\u0435\u0435 \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u043e\u0436\u0438\u0434\u0430\u0435\u0442 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043d\u0430 \u0432\u0445\u043e\u0434\u0435
          2. \u041e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u044b\u0439 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440 \u2014 \u044d\u0442\u043e \u043c\u0430\u0441\u0441\u0438\u0432 \u0438 \u043e\u043d \u043b\u0435\u0433\u043e\u043a \u0432 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const sortNumbers = () =>   Array.prototype.slice.call(arguments).sort();  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const sortNumbers = (...numbers) => numbers.sort(); <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u0414\u043e\u0441\u0442\u0443\u043f \u043a \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0430\u043c<\/a><\/p>\n
        <\/a>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 apply<\/b><\/h4>\n
          \u0417\u0430\u0431\u0443\u0434\u044c\u0442\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 apply(). \u0412\u043c\u0435\u0441\u0442\u043e \u044d\u0442\u043e\u0433\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f (\u0432\u044b\u0437\u043e\u0432\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u0438).<\/p>\n
        const greet = (first, last) => `Hi ${first} ${last}`; const person = ["John", "Doe"];  \/* \u043f\u043b\u043e\u0445\u043e *\/ greet.apply(null, person);  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ greet(...person); <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u0438\u044f<\/a><\/p>\n
        <\/a>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043c\u0435\u0442\u043e\u0434\u0430 bind<\/b><\/h4>\n
          \u041d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 bind(), \u043a\u043e\u0433\u0434\u0430 \u0435\u0441\u0442\u044c \u0431\u043e\u043b\u0435\u0435 \u0438\u0434\u0438\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ ["foo", "bar"].forEach(func.bind(this));  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ ["foo", "bar"].forEach(func, this); <\/code><\/pre>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const person = {   first: "John",   last: "Doe",   greet() {     const full = function() {       return `${this.first} ${this.last}`;     }.bind(this);     return `Hello ${full()}`;   } }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const person = {   first: "John",   last: "Doe",   greet() {     const full = () => `${this.first} ${this.last}`;     return `Hello ${full()}`;   } } <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         bind()<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0438\u0442\u0435\u0440\u0430\u0442\u043e\u0440\u044b<\/a> \u0432 JavaScript<\/p>\n
        <\/a>\u041c\u0435\u0442\u043e\u0434\u044b \u0432\u044b\u0441\u0448\u0435\u0433\u043e \u043f\u043e\u0440\u044f\u0434\u043a\u0430<\/b><\/h4>\n
          \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 \u0442\u0430\u043c \u0433\u0434\u0435 \u044d\u0442\u043e \u043d\u0435 \u043d\u0443\u0436\u043d\u043e. <\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const result = [1, 2, 3].map(num => String(num)); \/\/ => ["1", "2", "3"]  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const result = [1, 2, 3].map(String);  \/\/ \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0432\u0441\u0435\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043a \u0442\u0438\u043f\u0443 string <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u043c\u0430\u0441\u0441\u0438\u0432\u0430 \u0447\u0438\u0441\u0435\u043b \u0441 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435\u043c \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/a><\/p>\n
        <\/a>\u041a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u0438<\/b><\/h4>\n
          \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432\u044b\u0437\u043e\u0432\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0439. \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0432\u043c\u0435\u0441\u0442\u043e \u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u0437\u0438\u0446\u0438\u044e.<\/p>\n
        const plus1 = a => a + 1; const mult2 = a => a * 2;  \/* \u043f\u043b\u043e\u0445\u043e *\/ mult2(plus1(5)); \/\/ => 12  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const addThenMult = pipeline(plus1, mult2);  addThenMult(5); \/\/ => 12 <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a><\/p>\n
        <\/a>\u041a\u0435\u0448\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/b><\/h4>\n
          \u0414\u043e\u0440\u043e\u0433\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0435 \u043e\u043f\u0435\u0440\u0430\u0446\u0438\u0438 \u0441 \u0431\u043e\u043b\u044c\u0448\u0438\u043c\u0438 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0435\u043f\u0440\u043e\u0441\u0442\u0438\u0442\u0435\u043b\u044c\u043d\u044b, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u043a\u0435\u0448\u0438\u0440\u0443\u0435\u0442\u0435 \u0438\u0445.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const contains = (arr, value) =>   Array.prototype.includes     ? arr.includes(value)     : arr.some(el => el === value); contains(["foo", "bar"], "baz"); \/\/ => false  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const contains = (() =>   Array.prototype.includes     ? (arr, value) => arr.includes(value)     : (arr, value) => arr.some(el => el === value) )(); contains(["foo", "bar"], "baz"); \/\/ => false <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c,         \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043b\u0438 \u043e\u0434\u043d\u0430 \u0441\u0442\u0440\u043e\u043a\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0434\u0440\u0443\u0433\u043e\u0439<\/a>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u0434\u0435\u043b\u0430\u0435\u043c \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u043c\u0430\u0441\u0441\u0438\u0432\u0430<\/a><\/p>\n
        <\/a>\u041f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435<\/b><\/h4>\n
          \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 const<\/i> \u0432\u043c\u0435\u0441\u0442\u043e let<\/i> \u0438 let<\/i> \u0432\u043c\u0435\u0441\u0442\u043e var<\/i>.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ var me = new Map(); me.set("name", "Ben").set("country", "Belgium");  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const me = new Map(); me.set("name", "Ben").set("country", "Belgium"); <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041a\u043e\u043d\u0441\u0442\u0430\u043d\u0442\u044b<\/a>, \u043e\u043f\u0435\u0440\u0430\u0442\u043e\u0440 let<\/a>, \u0438 \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043e\u0431 \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u043c\u0430\u0441\u0441\u0438\u0432\u0435<\/a><\/p>\n
        <\/a>\u0423\u0441\u043b\u043e\u0432\u0438\u044f<\/b><\/h4>\n
          \u0411\u0443\u0434\u044c\u0442\u0435 \u043f\u0440\u0438\u0432\u0435\u0440\u0436\u0435\u043d\u044b \u043a\u043e\u043d\u0446\u0435\u043f\u0446\u0438\u0438 IIFE’s (\u043d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c\u044b\u0439 \u0444\u0443\u043d\u043a\u0442\u043e\u0440), \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u044b\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0432 \u0443\u0441\u043b\u043e\u0432\u0438\u044f\u0445 (if, else if, else \u0438 switch).<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ var grade, result = 50; if (result < 50)   grade = "bad"; else if (result < 90)   grade = "good"; else   grade = "excellent";    \/\/ grade = "good";  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ let result = 50; const grade = (() => {   if (result < 50)     return "bad";   if (result < 90)     return "good";   return "excellent"; })(); \/\/ grade = "good"; <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a> (\u0438\u043b\u0438<\/a>)
          2.         \u041d\u0435\u043c\u0435\u0434\u043b\u0435\u043d\u043d\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438<\/a><\/p>\n
        <\/a>\u0418\u0442\u0435\u0440\u0430\u0442\u043e\u0440\u044b<\/b><\/h4>\n
          \u0418\u0437\u0431\u0435\u0433\u0430\u0439\u0442\u0435 \u0446\u0438\u043a\u043b \u043f\u0435\u0440\u0435\u0431\u043e\u0440\u0430 for…in<\/i><\/p>\n
        const shared = { foo: "foo" }; const obj = Object.create(shared, {   bar: {     value: "bar",     enumerable: true   } });  \/* \u043f\u043b\u043e\u0445\u043e *\/ for (var prop in obj) {   if (obj.hasOwnProperty(prop))     console.log(prop); \/\/ => bar }  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ Object.keys(obj).forEach(prop => console.log(prop)); <\/code><\/pre>\n
          \u0420\u0430\u0437\u043d\u0438\u0446\u0430 \u043c\u0435\u0436\u0434\u0443 \u0446\u0438\u043a\u043b\u043e\u043c \u0438 \u043c\u0435\u0442\u043e\u0434\u043e\u043c \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e \u0446\u0438\u043a\u043b \u043f\u0435\u0440\u0435\u0447\u0438\u0441\u043b\u044f\u0435\u0442 \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430 \u0438 \u0438\u0437 \u0446\u0435\u043f\u043e\u0447\u043a\u0438 \u043f\u0440\u043e\u0442\u043e\u0442\u0438\u043f\u043e\u0432.<\/p>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 hasOwnProperty \u0434\u043b\u044f \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u043e\u0432\u0430\u043d\u0438\u044f \u0441\u0432\u043e\u0439\u0441\u0442\u0432\u0430<\/a> \u0438 \u043e\u0431\u0445\u043e\u0434 \u0441\u0432\u043e\u0439\u0441\u0442\u0432 \u043e\u0431\u044a\u0435\u043a\u0442\u0430<\/a><\/p>\n
        <\/a>\u041e\u0431\u044a\u0435\u043a\u0442 \u043a\u0430\u043a \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432<\/b><\/h4>\n
          \u0412 \u0442\u043e \u0432\u0440\u0435\u043c\u044f \u043a\u0430\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u044b \u043c\u043e\u0436\u043d\u043e \u0437\u0430\u043a\u043e\u043d\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c, \u043a\u0430\u043a \u043f\u0440\u0430\u0432\u0438\u043b\u043e, \u0430\u0441\u0441\u043e\u0446\u0438\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043c\u0430\u0441\u0441\u0438\u0432 (Map<\/i>) \u043b\u0443\u0447\u0448\u0435 \u0438 \u043c\u043e\u0449\u043d\u0435\u0435. \u0415\u0441\u043b\u0438 \u0441\u043e\u043c\u043d\u0435\u0432\u0430\u0435\u0442\u0435\u0441\u044c, \u0442\u043e\u0433\u0434\u0430 \u0442\u043e\u0447\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Map<\/i>.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const me = {   name: "Ben",   age: 30 }; var meSize = Object.keys(me).length; meSize; \/\/ => 2 me.country = "Belgium"; \/\/ \u043c\u043e\u0436\u043d\u043e  meSize++; meSize; \/\/ => 3  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const me = new Map(); me.set("name", "Ben"); me.set("age", 30); me.size; \/\/ => 2 me.set("country", "Belgium"); me.size; \/\/ => 3 <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0437\u0430\u043f\u0438\u0441\u0435\u0439 \u0432\u0438\u0434\u0430 \u043a\u043b\u044e\u0447: \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435<\/a><\/p>\n
        <\/a>\u041a\u0430\u0440\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/b><\/h4>\n
          \u041a\u0430\u0440\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043c\u043e\u0449\u043d\u043e\u0439, \u043d\u043e \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c \u0447\u0443\u0436\u0435\u0440\u043e\u0434\u043d\u043e\u0439 \u043f\u0430\u0440\u0430\u0434\u0438\u0433\u043c\u043e\u0439 \u0434\u043b\u044f \u043c\u043d\u043e\u0433\u0438\u0445 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u043e\u0432. \u041d\u0435 \u0437\u043b\u043e\u0443\u043f\u043e\u0442\u0440\u0435\u0431\u043b\u044f\u0439\u0442\u0435.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ const sum = a => b => a + b; sum(5)(3); \/\/ => 8  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const sum = (a, b) => a + b; sum(5, 3); \/\/ => 8 <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041a\u0430\u0440\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435<\/a> \u0438 \u043f\u0440\u0438\u043c\u0435\u0440\u044b<\/a><\/p>\n
        <\/a>\u0427\u0438\u0442\u0430\u0431\u0435\u043b\u044c\u043d\u043e\u0441\u0442\u044c<\/b><\/h4>\n
          \u041d\u0435 \u0441\u043a\u0440\u044b\u0432\u0430\u0439\u0442\u0435 \u043d\u0430\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0443\u043c\u043d\u044b\u0435 \u0442\u0440\u044e\u043a\u0438.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ foo || doSomething();  \/* \u043f\u043b\u043e\u0445\u043e *\/ void function() { \/* IIFE *\/ }();  \/* \u043f\u043b\u043e\u0445\u043e *\/ const n = ~~3.14;  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ if (!foo) doSomething();  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ (function() { \/* IIFE *\/ }());  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const n = Math.floor(3.14); <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1.         \u041e\u0431 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u043e\u043c \u043a\u043e\u0434\u0435 \u0438 \u0441\u0443\u0440\u043e\u0432\u043e\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438<\/a><\/p>\n
        <\/a>\u041f\u043e\u0432\u0442\u043e\u0440\u043d\u043e\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u043a\u043e\u0434\u0430<\/b><\/h4>\n
          \u041d\u0435 \u0431\u043e\u0439\u0442\u0435\u0441\u044c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e \u043c\u0435\u043b\u043a\u0438\u0445 \u0438 \u043c\u043d\u043e\u0433\u043e\u0440\u0430\u0437\u043e\u0432\u044b\u0445 \u0444\u0443\u043d\u043a\u0446\u0438\u0439, \u043e\u043d\u0438 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u043b\u0435\u0437\u043d\u044b.<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ let last = arr[arr.length - 1];  \/* \u043f\u043b\u043e\u0445\u043e *\/ const product = (a, b) => a * b; const triple = n => n * 3;  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const first = arr => arr[0]; \/\/ => first(arr); const last = arr => first(arr.slice(-1)); \/\/ => last(arr);  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const product = (a, b) => a * b; const triple = product.bind(null, 3); <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a><\/p>\n
        <\/a>\u0417\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438<\/b><\/h4>\n
          \u041c\u0438\u043d\u0438\u043c\u0438\u0437\u0438\u0440\u0443\u0439\u0442\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0432 \u043a\u0443\u0440\u0441\u0435 \u043a\u0430\u043a \u043e\u043d \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442. \u041d\u0435 \u043d\u0443\u0436\u043d\u043e \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u0442\u044c \u0432\u0441\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443 \u0440\u0430\u0434\u0438 \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u0438\u0445 \u043c\u0435\u0442\u043e\u0434\u043e\u0432, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u0435\u0433\u043a\u043e \u0432\u043e\u0441\u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u043c\u044b:<\/p>\n
        \/* \u043f\u043b\u043e\u0445\u043e *\/ var _ = require("underscore"); _.compact(["foo", 0])); _.unique(["foo", "foo"]); _.union(["foo"], ["bar"], ["foo"]);  \/* \u0445\u043e\u0440\u043e\u0448\u043e *\/ const compact = arr => arr.filter(el => el); const unique = arr => [...Set(arr)]; const union = (...arr) => unique([].concat(...arr));  compact(["foo", 0]); unique(["foo", "foo"]); union(["foo"], ["bar"], ["foo"]); <\/code><\/pre>\n
          \u041a \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u044e<\/b>:
          1. Babeljs (\u043f\u0440\u0438\u043c\u0435\u0440 \u0432 ES5):         \u043f\u043b\u043e\u0445\u043e<\/a> vs \u0445\u043e\u0440\u043e\u0448\u043e<\/a>
          2.         \u041f\u0443\u0442\u044c JavaScript \u043c\u043e\u0434\u0443\u043b\u044f<\/a> \u0438 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u044f \u043f\u043e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 Underscore<\/a>               <\/p>\n
        <\/div>\n
         \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habrahabr.ru\/post\/275729\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
               <\/p>\n
        Frontend Guidelines<\/b><\/h4>\n
        \u041f\u0440\u0430\u0432\u0438\u043b\u0430 \u0438 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044f, \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f HTML, \u0421SS \u0438 JavaScript \u043a\u043e\u0434\u0430. \u0415\u0433\u043e \u0446\u0435\u043b\u044c \u2014 \u043f\u043e\u0432\u044b\u0441\u0438\u0442\u044c \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e \u043a\u043e\u0434\u0430 \u0438 \u043e\u0431\u043b\u0435\u0433\u0447\u0438\u0442\u044c \u0441\u043e\u0432\u043c\u0435\u0441\u0442\u043d\u0443\u044e \u0440\u0430\u0431\u043e\u0442\u0443 \u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0438\u043d\u0444\u0440\u0430\u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u044b.<\/p>\n
        \u041e\u0442 \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0447\u0438\u043a\u0430<\/b><\/h4>\n
        \u041f\u0440\u0438\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e \u0432\u0441\u0435\u0445 \u0441\u043d\u043e\u0432\u0430, \u043c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u041c\u0430\u043a\u0441\u0438\u043c \u0418\u0432\u0430\u043d\u043e\u0432, \u0438 \u0441\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u043b \u043f\u0435\u0440\u0435\u0432\u043e\u0434, \u043a\u043e\u0442\u043e\u0440\u044b\u0439, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u043e\u043a\u0430\u0436\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0432\u0430\u0441 \u043f\u043e\u043b\u0435\u0437\u043d\u044b\u043c. \u0411\u0435\u043d\u0434\u0436\u0430\u043c\u0438\u043d \u0414\u0435 \u041a\u0443\u043a<\/a> (Benjamin De Cock), \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0438\u0437 \u0411\u0435\u043b\u044c\u0433\u0438\u0438, \u0441\u043e\u0431\u0440\u0430\u043b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0443\u043a\u0430\u0437\u0430\u043d\u0438\u044f \u043f\u043e \u043e\u0444\u043e\u0440\u043c\u043b\u0435\u043d\u0438\u044e \u043a\u043e\u0434\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u0437\u0438\u0446\u0438\u043e\u043d\u0438\u0440\u0443\u044e\u0442 \u0441\u0435\u0431\u044f \u043a\u0430\u043a \u043b\u0443\u0447\u0448\u0438\u0435 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0438<\/a> \u043f\u043e \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u044e HTML, CSS, JS. \u041a\u043e\u043d\u0435\u0447\u043d\u043e, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u0439, \u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u0442\u044c \u0445\u043e\u0440\u043e\u0448\u0438\u0439 \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d \u043e\u0442 Google<\/a>, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0435\u0441\u0442\u044c \u0435\u0449\u0435 \u0447\u0442\u043e-\u0442\u043e, \u043e\u0434\u043d\u0430\u043a\u043e, \u0435\u0441\u043b\u0438 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u0442\u044c \u0445\u043e\u0442\u044f \u0431\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c \u0438\u0437 \u043d\u0438\u0445, \u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0434\u0435\u044f\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0432\u0430\u0448 \u043a\u043e\u0434 \u0441\u0442\u0430\u043d\u0435\u0442 \u043b\u0443\u0447\u0448\u0435. \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u0438\u043c \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043b\u0435\u0437\u043d\u043e, \u0430 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0412 \u043e\u0431\u0449\u0435\u043c \u0438 \u0446\u0435\u043b\u043e\u043c, \u0432\u0441\u0435 \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0432\u0430\u0448\u0435\u0433\u043e \u043e\u043f\u044b\u0442\u0430 \u0438 \u0432\u0438\u0434\u0435\u043d\u044c\u044f \u0434\u0435\u043b\u0430, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u043e\u0432\u0438\u0447\u043e\u043a, \u0442\u043e \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u043e \u043e\u0446\u0435\u043d\u0438\u0442\u044c \u0442\u043e, \u0447\u0442\u043e \u043f\u0438\u0448\u0443\u0442 \u0434\u0440\u0443\u0433\u0438\u0435 \u0438 \u0432 \u043e\u0431\u0449\u0435\u0441\u0442\u0432\u0435 \u0441\u0447\u0438\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u0435\u0440\u043d\u044b\u043c, \u0435\u0441\u043b\u0438 \u0432\u044b \u0433\u0443\u0440\u0443, \u0442\u043e \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435 \u0432\u0430\u043c \u0438 \u043d\u0435 \u043d\u0443\u0436\u043d\u044b \u0433\u0430\u0439\u0434\u043b\u0430\u0439\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u044b \u043d\u0435\u043f\u043e\u043d\u044f\u0442\u043d\u043e \u043a\u0435\u043c \u043d\u0430 \u0432\u0430\u0448 \u0432\u0437\u0433\u043b\u044f\u0434. \u0418\u0442\u0430\u043a, \u043f\u0440\u0438\u0441\u0442\u0443\u043f\u0438\u043c.  <\/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-273549","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273549","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=273549"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/273549\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=273549"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=273549"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=273549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}