├── .editorconfig ├── .gitignore ├── .travis.yml ├── .yaspellerrc ├── CONTRIBUTING.md ├── README.md ├── articles ├── a-minimal-guide-to-ecmascript-decorators │ └── README.md ├── aggelos-arvanitakis-an-introduction-to-webpack-s-philosophy │ └── README.md ├── alexander-campbell-elm-changed-my-mind │ ├── README.md │ └── background.jpg ├── allan-macgregor-you-should-learn-functional-programming-in-2017 │ └── README.md ├── aneeta-sharma-mevn-stack-application-part-1 │ ├── images │ │ ├── .gitkeep │ │ ├── logo.png │ │ ├── mevn-01.png │ │ ├── mevn-02.png │ │ ├── mevn-03.png │ │ ├── mevn-04.png │ │ └── mevn-05.png │ └── readme.md ├── aneeta-sharma-mevn-stack-application-part-2 │ ├── images │ │ ├── .gitkeep │ │ ├── logo.png │ │ ├── vue-02-01.png │ │ ├── vue-02-02.gif │ │ ├── vue-02-03.gif │ │ ├── vue-02-04.gif │ │ ├── vue-02-05.gif │ │ └── vue-02-06.gif │ └── readme.md ├── anthony-gore-code-five-plugins-vuex │ ├── README.md │ └── images │ │ ├── vuex_plugins_01.gif │ │ ├── vuex_plugins_02.gif │ │ ├── vuex_plugins_03.gif │ │ ├── vuex_plugins_04.gif │ │ └── vuex_plugins_05.gif ├── anthony-gore-code-splitting-in-vue.js │ ├── images │ │ ├── code-splitting-01.png │ │ ├── code-splitting-02.png │ │ ├── code-splitting-03.png │ │ ├── code-splitting-04.png │ │ ├── code-splitting-05.png │ │ ├── code-splitting-06.png │ │ └── code-splitting-07.png │ └── index.md ├── anthony-gore-reactivity-in-vue.js │ ├── README.md │ └── reactivity.png ├── benedikt-meurer-javascript-optimization-patterns-part1 │ └── README.md ├── benedikt-meurer-javascript-optimization-patterns-part2 │ └── README.md ├── benedikt-meurer-sometimes-undefined-is-defined │ └── README.md ├── benedikt_meurer_v8_behind_the_scenes_feb_edition │ └── readme.md ├── benedikt_meurer_v8_behind_the_scenes_march_edition │ └── README.md ├── berry-de-witte-unit-testing-your-react-application-with-jest-and-enzyme │ └── README.md ├── boris-cherny-introducing-lazy-arrays-in-javascript │ ├── README.md │ └── lazy.gif ├── brandon-morelli-learn-how-to-debug-javascript-with-chrome-devtools │ ├── README.md │ └── debug.gif ├── brandon-smith-reactive-uis-with-vanillajs-part-1-pure-functional-style │ ├── README.md │ └── tools.jpg ├── brian-greig-quick-tip-getting-started-with-headless-chrome-in-nodejs │ ├── README.md │ └── headless.png ├── charles-scalfani-so-you-want-to-be-a-functional-programmer-part-1 │ └── README.md ├── charles-scalfani-so-you-want-to-be-a-functional-programmer-part-2 │ └── README.md ├── charles-scalfani-so-you-want-to-be-a-functional-programmer-part-3 │ └── README.md ├── charles-scalfani-so-you-want-to-be-a-functional-programmer-part-4 │ └── README.md ├── charles-scalfani-so-you-want-to-be-a-functional-programmer-part-5 │ └── README.md ├── charles-scalfani-so-you-want-to-be-a-functional-programmer-part-6 │ └── README.md ├── cristian-alfoni-cerebral-2 │ └── README.md ├── daan-15-helpful-javascript-one-liners │ └── README.md ├── daan-8-tricks-for-web-developers-you-can-put-into-practice-immediately │ └── README.md ├── daniel-li-not-everything-in-javascript-is-an-object │ ├── README.md │ └── shock.jpg ├── daniel-simmons-get-started-with-webassembly-using-only-14-lines-of-javascript │ └── README.md ├── david_gilbertson_rems_and_ems_and_why_you_probably_dont_need_them │ └── README.md ├── dhaivat-pandya-graphql-concepts-visualized │ └── README.md ├── ecmascript_observable │ └── readme.md ├── eric-elliott-common-misconceptions-about-inheritance-in-javascript │ ├── README.md │ └── images │ │ ├── header-image.jpeg │ │ └── secret-agent.jpeg ├── eric-elliott-composing-software-an-introduction │ └── README.md ├── erik-rasmussen-final-form-the-road-to-the-checkered-flag │ └── Readme.md ├── eryk-napierała-performance-of-javascript-optional-chaining │ ├── README.md │ └── images │ │ ├── chain.jpg │ │ ├── parse_time.png │ │ └── runtime_performance.png ├── esteban-herrera-5-reasons-you-shouldnt-use-graphql │ ├── README.md │ └── images │ │ └── graphql.png ├── event-loop-timers-and-nexttick │ └── README.md ├── fedor-indutny-alocating-numbers │ └── README.md ├── fedor-indutny-how-to-start-jitting │ └── README.md ├── fedor-indutny-smis-and-doubles │ └── README.md ├── filippos-vasilakis-3-years-of-ember-6-months-of-react │ └── README.md ├── functional-reactive-ninja-function-type-signatures-in-javascript │ └── README.md ├── functional-reactive-ninja-partial-application-of-functions │ └── README.md ├── gabriel-peal-building-a-cross-platform-mobile-team │ └── README.md ├── gabriel-peal-react-native-at-airbnb-the-technology │ └── README.md ├── gabriel-peal-react-native-at-airbnb │ └── README.md ├── gabriel-peal-sunsetting-react-native │ └── README.md ├── gabriel-peal-whats-next-for-mobile-at-airbnb │ └── README.md ├── gina-trapani-modern-javascript-for-ancient-web-developers │ └── readme.md ├── glossary_of_modern_javaScript_concepts_part_1 │ └── readme.md ├── graham-cox-ember-the-perfect-framework-for-web-applications │ └── README.md ├── greg-kroczek-quasar-framework │ ├── README.md │ └── images │ │ ├── logo.jpg │ │ ├── quasar-01.png │ │ ├── quasar-02.png │ │ ├── quasar-03.png │ │ ├── quasar-04.png │ │ ├── quasar-05.png │ │ ├── quasar-06.png │ │ ├── quasar-07.png │ │ ├── quasar-08.png │ │ ├── quasar-09.png │ │ ├── quasar-10.png │ │ ├── quasar-11.png │ │ ├── quasar-12.png │ │ └── quasar-13.png ├── gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue │ ├── img │ │ ├── logo.jpg │ │ ├── vue-01.png │ │ ├── vue-02.gif │ │ ├── vue-03.png │ │ ├── vue-04.gif │ │ ├── vue-05.gif │ │ ├── vue-06.gif │ │ ├── vue-07.gif │ │ ├── vue-08.png │ │ ├── vue-09.gif │ │ ├── vue-10.gif │ │ ├── vue-11.gif │ │ ├── vue-12.gif │ │ ├── vue-13.gif │ │ ├── vue-14.gif │ │ ├── vue-15.gif │ │ ├── vue-16.gif │ │ ├── vue-17.gif │ │ ├── vue-18.gif │ │ ├── vue-19.gif │ │ ├── vue-20.gif │ │ ├── vue-21.gif │ │ ├── vue-22.gif │ │ ├── vue-23.gif │ │ ├── vue-24.png │ │ ├── vue-25.png │ │ └── vue-26.gif │ └── readme.md ├── hacktoberfest-is-back-and-celebrating-its-fifth-year │ └── README.md ├── how-to-build-vue-components-that-play-nice │ └── README.md ├── how-to-write-your-own-virtual-dom │ └── readme.md ├── ira-shestak-async-hooks-in-node-js-illustrated │ └── README.md ├── ira_shestak_garbage_collection_in_v8 │ └── readme.md ├── ire-aderinokun-asynchronous-functions-101 │ ├── README.md │ └── octopus.jpg ├── jack-scott-goodbye-redux │ └── README.md ├── jakob-lind-code-your-own-redux-part-2-the-connect-function │ ├── README.md │ └── connect-react-redux.png ├── jakob-lind-learn-redux-by-coding-a-mini-redux │ ├── README.md │ └── redux.png ├── james-kyle-javascripts-new-private-class-fields │ └── README.md ├── james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code │ ├── images │ │ ├── debbuging_breakpoint.webp │ │ ├── debbuging_conditional_breakpoint.webp │ │ ├── debbuging_console.webp │ │ ├── debbuging_debugger.webp │ │ ├── debbuging_debugger_source-stop.webp │ │ ├── debbuging_debugger_source.webp │ │ ├── debbuging_list.webp │ │ ├── debbuging_quick_chat.webp │ │ ├── debbuging_scope.webp │ │ ├── debbuging_source_code.webp │ │ ├── debbuging_watch.webp │ │ ├── logo.png │ │ ├── vsc-01.webp │ │ ├── vsc-02.webp │ │ ├── vsc-03.webp │ │ ├── vsc-04.webp │ │ ├── vsc-05.webp │ │ ├── vsc-06.webp │ │ ├── vsc-07.webp │ │ └── vsc-08.webp │ └── readme.md ├── james-snell-an-update-on-es6-modules-in-node-js │ └── README.md ├── james_m_snell_nodejs_tc-39_and_modules │ └── readme.md ├── javascript-event-loop-explained │ └── README.md ├── javascript-typeof │ └── README.md ├── jean-paul-delimat-boost-your-react-with-state-machines │ └── README.md ├── jiri-pospisil-understanding-lock-files-in-npm-5 │ └── README.md ├── joel-thoms-functional-javascript-decoupling-methods-from-their-objects │ └── README.md ├── jordan-harband-array-iteration-methods-summarized │ ├── README.md │ └── make_juice_with_reduce.jpg ├── jordan-irabor-natural-language-processing-for-nodejs │ ├── README.md │ └── images │ │ ├── logrocket.png │ │ └── nlpnode.png ├── joseph-zimmerman-drag-drop-file-uploader-vanilla-js │ ├── README.md │ └── images │ │ └── logo.png ├── kat-marchan-introducing-npx-an-npm-package-runner │ └── README.md ├── kim-maida-glossary-of-modern-javascript-concepts-part-2 │ ├── README.md │ └── dna.jpg ├── kye-hohenberger-emotion │ └── README.md ├── kyle-simpson-you-dont-know-js-async--performance │ └── README.md ├── lin-clark-a-cartoon-intro-to-arraybuffers-and-sharedarraybuffers │ └── README.md ├── lin-clark-a-crash-course-in-memory-management │ └── README.md ├── link-clark-avoiding-race-conditions-in-sharedarraybuffers-with-atomics │ └── README.md ├── lucas-fernandes-da-costa-y-the-most-beautiful-idea-in-computer-science-explained-in-javascript │ └── README.md ├── mark-erikson-idiomatic-redux-the-tao-of-redux-part-1---implementation-and-intent │ ├── README.md │ └── tao.jpg ├── mathias-bynens-asynchronous-stack-traces-why-await-beats-then │ ├── README.md │ └── async-await-1024x430.jpg ├── matt-zeunert-lazy-javascript-parsing-in-v8 │ └── README.md ├── micha-piotrkowski-lodash-is-not-only-for-list-manipulation │ └── readme.md ├── michał-piotrkowski-higher-order-functions-in-lodash │ └── readme.md ├── nader-dabit-ionic-react-first-look │ ├── README.md │ └── images │ │ ├── IonicReact.png │ │ ├── conference.jpeg │ │ ├── ionicserve.jpg │ │ └── usage.png ├── neil-fenton-improving-react-and-redux-performance-with-reselect │ └── README.md ├── neural-networks-from-scratch-for-javascript-linguists-part1-the-perceptron │ └── README.md ├── nicholas-c-zakas-computer-science-in-javascript-quicksort │ └── README.md ├── nicholas-c-zakas-why-ive-stopped-exporting-defaults-from-my-javascript-modules │ ├── README.md │ └── why-ive-stopped-exporting-defaults-from-my-javascript-modules-hero.png ├── nicola-del-gobbo-how-i-ported-bcrypt-to-new-n-api │ ├── NAPI.jpg │ └── README.md ├── nicolas-carlo-using-observables-in-real-life │ └── README.md ├── node-js-8-big-improvements-for-the-debugging-and-native-module-ecosystem │ └── README.md ├── npm-5-is-now-npm-latest │ └── README.md ├── per-harald-borgen-learn-css-variables-in-5-minutes │ └── README.md ├── peter-chang-break-down-isomorphic-and-universal-boilerplate-react-redux-server-rendering │ ├── README.md │ └── images │ │ ├── isomophic-react1.jpeg │ │ ├── isomophic-react2.jpeg │ │ └── isomophic-react3.jpeg ├── playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation │ ├── README.md │ └── images │ │ ├── all.jpg │ │ ├── aug.jpg │ │ ├── back-kick.gif │ │ ├── back.png │ │ ├── cnn-rnn.svg │ │ ├── cover.png │ │ ├── demo.gif │ │ ├── punching.gif │ │ ├── roundhouse.png │ │ ├── transfer.svg │ │ └── vgg-16.svg ├── poki-engineering-from-monolith-to-microservices │ └── README.md ├── praveen-durairaj-an-exhaustive-guide-to-writing-dockerfiles-for-node-js-web-apps │ └── readme.md ├── rachel-andrew-refer-to-the-spec │ ├── README.md │ └── grid_draft.png ├── rachel-refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec │ ├── README.md │ └── grid_draft.png ├── react-is-not-the-new-jquery │ └── README.md ├── refactoring-node-with-higher-order-functions │ └── README.md ├── reselect-selector-library-for-redux │ └── readme.md ├── robin-pokorny-do-pure-functions-exist-in-javascript │ └── README.md ├── safia-abdalla-node-module-deep-dive-eventemitter │ └── README.md ├── sam-williams-es6-tips-and-tricks-to-make-your-code-cleaner-shorter-and-easier-to-read │ └── README.md ├── sarah-dayan-how-to-handle-monetary-values-in-javascript │ ├── images │ │ ├── dinerojs.png │ │ └── momentjs-locales.png │ └── readme.md ├── sarah-drasner-render-function-h │ ├── images │ │ └── logo.png │ └── readme.md ├── sebastián-peyrott-introduction-to-immutablejs-and-functional-programming-concepts │ └── README.md ├── stefan-baumgartner-the-definitive-guide-to-object-streams-in-nodejs │ └── README.md ├── stephane-pericat-vue-ui-first-look │ ├── images │ │ ├── logo.jpeg │ │ ├── vue-ui-01.png │ │ ├── vue-ui-02.png │ │ ├── vue-ui-04.png │ │ ├── vue-ui-05.png │ │ ├── vue-ui-06.png │ │ ├── vue-ui-07.png │ │ ├── vue-ui-08.png │ │ ├── vue-ui-09.png │ │ ├── vue-ui-10.png │ │ ├── vue-ui-11.png │ │ ├── vue-ui-12.png │ │ ├── vue-ui-13.png │ │ ├── vue-ui-14.png │ │ ├── vue-ui-15.png │ │ ├── vue-ui-16.png │ │ ├── vue-ui-17.png │ │ ├── vue-ui-18.png │ │ ├── vue-ui-19.png │ │ └── vue-ui-20.png │ └── readme.md ├── tal-kol-redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps │ ├── README.md │ └── images │ │ ├── cycle.jpg │ │ └── cycle2.jpg ├── the-cat-with-a-dragon-tattoo-10-things-you-will-eventually-learn-about-javascript-projects │ └── README.md ├── the-critical-request │ └── README.md ├── the-most-important-skill-a-programmer-can-learn │ ├── README.md │ └── images │ │ ├── chart.png │ │ └── no.jpeg ├── the-state-of-javascript-2018-the-view-on-vue │ └── README.md ├── todd-motto-classes-vs-interfaces-in-typescript │ ├── README.md │ └── images │ │ └── logo.png ├── tom-harding-curry-on-wayward-son │ └── README.md ├── tom-harding-fantas-eel-and-specification-1-daggy │ └── README.md ├── tom-harding-fantas-eel-and-specification-2-type-signatures │ └── README.md ├── tom-harding-fantas-eel-and-specification-3-setoid │ └── README.md ├── tom-harding-peanos-forte │ └── README.md ├── tom-harding-reductio-and-abstract-em │ └── README.md ├── top-6-ways-to-make-your-elm-app-crash-at-runtime │ ├── README.md │ └── background.jpg ├── using-mixins-in-vuejs │ └── readme.md ├── using-the-chrome-devtools-new-code-coverage-feature │ └── readme.md ├── using-vue-template-loader-with-vuejs-to-compile-html-templates │ └── README.md ├── valery-semenencko-vueapp-deploy-heroku │ ├── heroku-01.png │ ├── heroku-02.png │ ├── heroku-03.png │ ├── heroku-04.png │ ├── heroku-logo.jpg │ └── heroku.md ├── vue-js-rest-api-consumption-with-axios │ └── readme.md ├── vue-test-utils-and-jest-how-to-write-simple-unit-tests-for-your-front-end │ └── README.md ├── vuejs — considerations-and-tricks │ └── README.md ├── what-and-how-to-test-with-jest-and-enzyme-full-instruction-on-react-components-testing │ ├── README.md │ └── images │ │ ├── img-1.png │ │ ├── img-2.png │ │ ├── img-3.png │ │ ├── img-4.gif │ │ ├── img-5.gif │ │ ├── img-6.gif │ │ ├── img-7.gif │ │ ├── img-8.gif │ │ └── img-9.png ├── what’s-testing-and-why-should-we-do-it │ └── README.md ├── william-imoh-documentation-system-with-vue-and-vuepress │ ├── images │ │ ├── .gitkeep │ │ ├── logo.jpg │ │ ├── vuepress-00.gif │ │ ├── vuepress-01.png │ │ └── vuepress-02.gif │ └── readme.md └── writing-abstract-components-with-vuejs │ └── README.md ├── assets ├── README.md ├── _translator.jpg └── sample.md ├── node-hero ├── README.md ├── chapter1 │ └── README.md ├── chapter10 │ ├── NodeHeroEbook-TheComplete-014.png │ ├── NodeHeroEbook-TheComplete-015.png │ ├── NodeHeroEbook-TheComplete-016.png │ └── readme.md ├── chapter11 │ └── README.md ├── chapter12 │ ├── NodeHeroEbook-TheComplete-017.png │ ├── NodeHeroEbook-TheComplete-018.png │ ├── NodeHeroEbook-TheComplete-019.png │ └── README.md ├── chapter13 │ ├── NodeHeroEbook-TheComplete-020.png │ ├── NodeHeroEbook-TheComplete-021.png │ ├── NodeHeroEbook-TheComplete-022.png │ ├── NodeHeroEbook-TheComplete-023.png │ ├── NodeHeroEbook-TheComplete-024.png │ ├── NodeHeroEbook-TheComplete-025.png │ └── README.md ├── chapter2 │ ├── NodeHeroEbook-TheComplete-008.png │ └── README.md ├── chapter3 │ ├── NodeHeroEbook-TheComplete-009.jpg │ └── README.md ├── chapter4 │ ├── README.md │ └── middlewares.png ├── chapter5 │ ├── NodeHeroEbook-TheComplete-010.png │ └── README.md ├── chapter6 │ └── README.md ├── chapter7 │ └── README.md ├── chapter8 │ ├── NodeHeroEbook-TheComplete-011.png │ └── README.md ├── chapter9 │ ├── NodeHeroEbook-TheComplete-012.png │ ├── NodeHeroEbook-TheComplete-013.png │ └── README.md ├── full_book.md ├── node-hero.epub ├── node-hero.mobi └── nodehero.jpg ├── package-lock.json ├── package.json ├── translation_guide.md ├── utils ├── create-sample.js └── publish.sh ├── wish-list.md └── yarn.lock /.editorconfig: -------------------------------------------------------------------------------- 1 | ; top-most EditorConfig file 2 | root = true 3 | 4 | [*] 5 | end_of_line = lf 6 | insert_final_newline = true 7 | trim_trailing_whitespace = true 8 | charset = utf-8 9 | indent_style = space 10 | indent_size = 4 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | .DS_Store 3 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "6" 4 | -------------------------------------------------------------------------------- /articles/alexander-campbell-elm-changed-my-mind/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/alexander-campbell-elm-changed-my-mind/background.jpg -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-1/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-1/images/.gitkeep -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-1/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-1/images/logo.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-01.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-02.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-03.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-04.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-1/images/mevn-05.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/.gitkeep -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/logo.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-01.png -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-02.gif -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-03.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-03.gif -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-04.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-04.gif -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-05.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-05.gif -------------------------------------------------------------------------------- /articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-06.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/aneeta-sharma-mevn-stack-application-part-2/images/vue-02-06.gif -------------------------------------------------------------------------------- /articles/anthony-gore-code-five-plugins-vuex/README.md: -------------------------------------------------------------------------------- 1 | # Пять плагинов Vuex 2 | 3 | *Перевод статьи [Anthony Gore](https://twitter.com/anthonygore): [5 Vuex Plugins For Your Next VueJS Project](https://vuejsdevelopers.com/2017/09/11/vue-js-vuex-plugins/). Опубликовано с разрешения автора.* 4 | 5 | *** 6 | 7 | Можно привести много доводов использования Vuex в целях управления состоянием приложения. 8 | 9 | Одним из таких доводов можно назвать возможность расширения возможностей Vuex при помощи дополнительных плагинов. 10 | 11 | Разработчиками из сообщества Vuex было создано огромное количество бесплатных плагинов. Эти плагины могут расширить функционал Vuex настолько, насколько позволит воображение обычного разработчика. А некоторые из них даже выходят за пределы воображения некоторых разработчиков. 12 | 13 | В этой статье будет дан краткий обзор пяти плагинов под Vuex, которые вы сможете добавить в свой следующий проект: 14 | 15 | * Сохранение state приложения 16 | * Синхронизация state между вкладками 17 | * Локализация приложения 18 | * Управление state приложения 19 | * Кэширование actions 20 | 21 | ## Сохранение state приложения 22 | 23 | Плагин [vuex-persistedstate](https://github.com/robinvdvleuten/vuex-persistedstate "Persist Vuex state with localStorage") использует localStorage браузера для сохранения текущего состояния приложения (state) между сессиями. 24 | 25 | Другими словами, обновление страниц или закрытие вкладок браузера не позволит потерять уже введенные данные. 26 | 27 | Показательным примером работы данного плагина может послужить интернет-магазин: если пользователь вдруг случайно закроет вкладку браузера, то можно снова открыть её и все ранее введенные данные останутся сохраненными: 28 | 29 | ![Persist Vuex state with localStorage](./images/vuex_plugins_01.gif "Persist Vuex state with localStorage") 30 | 31 | ## Синхронизация state между вкладками 32 | 33 | Плагин [vuex-shared-mutations](https://github.com/xanf/vuex-shared-mutations) позволяет синхронизировать состояние проекта (state) между открытыми вкладками нескольких запущенных браузеров. 34 | 35 | Такой метод осуществляется благодаря сохранению мутации (mutation) в local storage. Возникающее событие в storage запускает процесс обновления во всех остальных вкладках/окнах, что в свою очередь запускает мутацию. 36 | 37 | Таким образом выполняется синхронизация состояния (state) приложения. 38 | 39 | ![Share Vuex mutations between tabs/windows](./images/vuex_plugins_02.gif "Share Vuex mutations between tabs/windows") 40 | 41 | ## Локализация приложения 42 | 43 | При помощи плагина [vuex-i18n](https://github.com/dkfbasel/vuex-i18n "vuex-i18n") можно выполнять локализацию приложения путём сохранения контента в многоязычном формате. Когда плагин настроен и подключен, то переключить язык контента в приложении - очень простая задача. 44 | 45 | Замечательной особенностью плагина является возможность сохранения строк контента совместно с токенами (tokens), например так: 46 | 47 | ```js 48 | Hello {name}, this is your Vue.js app. 49 | ``` 50 | 51 | Все переводы могут храниться в виде строк с одним и тем же токеном: 52 | 53 | ![vuex-i18n](./images/vuex_plugins_03.gif "vuex-i18n") 54 | 55 | ## Управление state приложения 56 | 57 | С помощью плагина [vuex-loading](https://github.com/f/vuex-loading) можно управлять несколькими состояниями (states) приложения. Удобство использования данного плагина очевидно при разработке приложения, в котором часто меняются состояния (states), которые можно легко отследить: 58 | 59 | ![vuex-loading](./images/vuex_plugins_04.gif "vuex-loading") 60 | 61 | ## Кэширование actions 62 | 63 | Плагин [vuex-cache](https://github.com/superwf/vuex-cache "vuex-cache") может кэшировать действия (actions) Vuex. К примеру, если приложение получает данные с сервера, то плагин может сохранять первоначально полученные результаты и выдавать их при соответствующих запросах. 64 | 65 | Если есть необходимость удалить кэшированные данные - это можно сделать очень просто. 66 | 67 | ![vuex-cache](./images/vuex_plugins_05.gif "vuex-cache") 68 | 69 | В заключение я хотел бы услышать о ваших любимых Vuex-плагинах в комментариях к этой статье. 70 | 71 | *** 72 | -------------------------------------------------------------------------------- /articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_01.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_01.gif -------------------------------------------------------------------------------- /articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_02.gif -------------------------------------------------------------------------------- /articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_03.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_03.gif -------------------------------------------------------------------------------- /articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_04.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_04.gif -------------------------------------------------------------------------------- /articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_05.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-five-plugins-vuex/images/vuex_plugins_05.gif -------------------------------------------------------------------------------- /articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-01.png -------------------------------------------------------------------------------- /articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-02.png -------------------------------------------------------------------------------- /articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-03.png -------------------------------------------------------------------------------- /articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-04.png -------------------------------------------------------------------------------- /articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-05.png -------------------------------------------------------------------------------- /articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-06.png -------------------------------------------------------------------------------- /articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-code-splitting-in-vue.js/images/code-splitting-07.png -------------------------------------------------------------------------------- /articles/anthony-gore-reactivity-in-vue.js/reactivity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/anthony-gore-reactivity-in-vue.js/reactivity.png -------------------------------------------------------------------------------- /articles/benedikt-meurer-sometimes-undefined-is-defined/README.md: -------------------------------------------------------------------------------- 1 | # Иногда undefined это defined 2 | 3 | *Перевод статьи [Benedikt Meurer](http://benediktmeurer.de): [Sometimes undefined is defined](https://medium.com/@bmeurer/sometimes-undefined-is-defined-7701e1c9eff8). Опубликовано с разрешения автора* 4 | 5 | В JavaScript всегда была путаница с `undefined`. Я попытаюсь пролить немного света на эту проблему и объяснить, почему может быть лучше (т.е. безопаснее и/или быстрее) писать `void 0` в некоторых случаях. 6 | 7 | [EcmaScript](https://tc39.github.io/ecma262) содержит специальный тип [**Undefined**](https://tc39.github.io/ecma262/#sec-ecmascript-language-types-undefined-type), имеющий ровно одно значение, называемое **undefined**. 8 | 9 | ![](https://cdn-images-1.medium.com/max/1440/1*YypO_ktnhkZt-PnQ49cU5g.png) 10 | 11 | Это актуальная семантика выполнения **undefined**. На уровне синтаксиса `undefined` - это просто произвольный идентификатор – в отличие от `null`, `true` и `false`, являющихся ключевыми словами в JavaScript. Это означает, что, когда вы пишете `undefined` в программе JavaScript, вы на самом деле ссылаетесь на ранее связанное имя. По умолчанию это приведёт к поиску имени `undefined` в глобальном объекте, что и ожидается большинством людей. 12 | 13 | ![](https://cdn-images-1.medium.com/max/1440/1*BA91YUgpvZ9aOI4Xh3Wk8A.png) 14 | 15 | Однако, поскольку это просто обычное имя переменной, оно может использоваться как таковое произвольными способами. Например, с точки зрения языка JavaScript, это вполне разумный код: 16 | 17 | ```javascript 18 | const isDefined = (function() { 19 | const undefined = 1; 20 | return x => x !== undefined; 21 | })(); 22 | 23 | console.log(isDefined(undefined)); // true 24 | console.log(isDefined(1)); // false 25 | ``` 26 | 27 | Благодаря весёлым языковым конструкциям, таким как `eval` или `with`, это может быть даже несколько скрыто. Например, с помощью `eval`: 28 | 29 | ```javascript 30 | const isDefined = (function(s) { 31 | eval(s); 32 | return x => x !== undefined; 33 | })('var undefined = 1;'); 34 | 35 | console.log(isDefined(undefined)); // true 36 | console.log(isDefined(1)); // false 37 | ``` 38 | 39 | Или используя `with`: 40 | 41 | ```javascript 42 | const isDefined = (function(o) { 43 | with(o) return x => x !== undefined; 44 | })({undefined: 1}); 45 | 46 | console.log(isDefined(undefined)); // true 47 | console.log(isDefined(1)); // false 48 | ``` 49 | 50 | То же самое, кстати, относится и к `NaN`, которое также является просто незаписываемым, неконфигурируемым свойством глобального объекта. Это довольно запутанно, и является прекрасной причиной не использовать `eval` или `with` в вашем коде. 51 | 52 | --- 53 | 54 | Вы можете избежать этих проблем, используя оператор `void` вместо `undefined`, когда хотите быть уверенны, что получили настоящее значение `undefined` (и поверьте мне, вы всегда этого хотите, если пишите `undefined`). 55 | 56 | ![](https://cdn-images-1.medium.com/max/1440/1*FiFSYpmswu-zbs4FcdAXzQ.png) 57 | [tc39.github.io/ecma262/#sec-void-operator](https://tc39.github.io/ecma262/#sec-void-operator) 58 | 59 | Оператор `void` всегда возвращает значение `undefined`. Так как выражение, переданное ему, вычисляется, но результат не используется, то для нашего трюка подойдёт любое. Я предлагаю придерживаться `void 0`, так как это читается коротко и легко. 60 | 61 | ```javascript 62 | const isDefined = (function() { 63 | const undefined = 1; 64 | return x => x !== void 0; 65 | })(); 66 | 67 | console.log(isDefined(undefined)); // false 68 | console.log(isDefined(1)); // true 69 | ``` 70 | 71 | Теперь программа делает то, что мы хотим. 72 | 73 | --- 74 | 75 | Очевидно, что здесь есть и аспект производительности. V8 на самом деле ведёт себя довольно умно и избегает поиска значения глобального свойства для `undefined` во многих случаях. На самом деле, V8 всегда будет сбрасывать `undefined` до фактического **undefined** значения (и отдавать его как константу), если у вас нет никакого `eval` или `with` в цепочке областей видимости. 76 | 77 | ![](https://cdn-images-1.medium.com/max/1440/1*VcwOlirpsR7mrc33t6wiiA.png) 78 | 79 | Однако другие механизмы JavaScript могут не иметь такой оптимизации. Например, JavaScriptCore (движок внутри Safari) не применяет эту оптимизацию для выше приведённой функции `getUndefined` — по крайней мере, не на уровне байт-кода: 80 | 81 | ![](https://cdn-images-1.medium.com/max/1440/1*dgXA6fypc2JAgpR0mDGuAw.png) 82 | 83 | --- 84 | 85 | Резюмируя: помните, что когда вы обращаетесь к `undefined` в вашем JavaScript, в зависимости от окружающего кода не всегда там может содержаться значение **undefined**. Возможно, будет безопаснее (и быстрее с точки зрения производительности) использовать вместо этого `void 0`. 86 | 87 | --- 88 | 89 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 90 | 91 | [Статья на Medium](https://medium.com/devschacht/benedikt-meurer-sometimes-undefined-is-defined-91f32af4532c) 92 | -------------------------------------------------------------------------------- /articles/boris-cherny-introducing-lazy-arrays-in-javascript/README.md: -------------------------------------------------------------------------------- 1 | # Ленивые массивы в JavaScript 2 | 3 | *Перевод статьи [Boris Cherny](https://github.com/bcherny): [Introducing: Lazy Arrays in JavaScript](https://performancejs.com/post/ewffd34/Introducing:-Lazy-arrays-in-JavaScript). Опубликовано с разрешения автора.* 4 | 5 | ![](./lazy.gif) 6 | 7 | Сегодня я представляю [lazy-arr](https://github.com/bcherny/lazy-arr), привносящую ленивые массивы в JavaScript. 8 | 9 | ## Что такое ленивый массив и почему он полезен? 10 | 11 | Давайте вспомним своё первое собеседование по разработке программного обеспечения: напишем функцию Фибоначчи. Мы определяем базовые случаи `0` и `1`, а затем рекурсивно генерируем остальные: 12 | 13 | ```js 14 | let fib = n => { 15 | switch (n) { 16 | case 0: return 0 17 | case 1: return 1 18 | default: return fib(n - 1) + fib(n - 2) 19 | } 20 | } 21 | ``` 22 | 23 | Проще некуда. 24 | 25 | В чем проблема этого решения? Ну, это действительно неэффективно. Чтобы вычислить `n`-е число Фибоначчи, мы вызовем `fib` `2` в степени `n-1` раз! Ясно, что это отстой, и мы должны делать лучше. 26 | 27 | Один из способов сделать это - запомнить вывод `fib`. То есть, поскольку `fib` является чистой и идемпотентной функцией, мы можем кэшировать её вывод: 28 | 29 | ```js 30 | let memoize = fn => { 31 | let cache = new Map 32 | return _ => { 33 | if (!cache.has(_)) { 34 | cache.set(_, fn(_)) 35 | } 36 | return cache.get(_) 37 | } 38 | } 39 | 40 | let fib = memoize(n => { 41 | switch (n) { 42 | case 0: return 0 43 | case 1: return 1 44 | default: return fib(n - 1) + fib(n - 2) 45 | } 46 | }) 47 | ``` 48 | 49 | Ах, уже лучше! Теперь мы вызываем `fib` только `n - 1` раз для ввода размера `n`. Как ещё мы можем сделать это? 50 | 51 | ## Ленивые последовательности 52 | 53 | В Scala вы можете сделать это так (авторство [Philipp Gabler](https://github.com/phipsgabler)): 54 | 55 | ``` 56 | def fib(n: Int): Stream[Int] = { 57 | lazy val stream: Stream[Int] = 0 #:: stream.scan(1)(_ + _) 58 | stream.take(n) 59 | } 60 | ``` 61 | 62 | Здесь определяется ленивый поток чисел (два начальных числа и функция, генерирующая больше чисел), а когда вы вызываете функцию `fib(n)`, она возвращает `n`-е число или генерирует и возвращает его, если оно все ещё не было вычислено. Ещё один способ посмотреть на это, как на генератор и кеш, отслеживающий ранее созданные значения, которые вы можете получить с помощью индекса значения. 63 | 64 | Ленивые потоки - это действительно крутая абстракция для работы с последовательностями, которые либо дорого рассчитать, либо невозможно вычислить для всех индексов (бесконечные последовательности). Они популярны в функциональных языках, особенно в языках с ленивым вычислением по умолчанию. Например, вот так это можно сделать в Haskell: 65 | 66 | ``` 67 | fibs :: [Integer] 68 | fibs = 0 : 1 : zipWith (+) fibs (tail fibs) 69 | ``` 70 | 71 | И та же идея, но в Clojure: 72 | 73 | ``` 74 | (defn fib [] 75 | ((fn rfib [a b] 76 | (cons a (lazy-seq (rfib b (+ a b))))) 77 | 0 1)) 78 | ``` 79 | 80 | Ну, вы поняли. 81 | 82 | Итак, как вы это можете сделать в JavaScript? 83 | 84 | ## Ленивые последовательности в JavaScript 85 | 86 | С [lazy-arr](https://github.com/bcherny/lazy-arr) вы можете это сделать так: 87 | 88 | ```js 89 | let fibs = lazy([0, 1])(_ => fibs[_ - 1] + fibs[_ - 2]) 90 | ``` 91 | 92 | И это всё! Затем вы можете обращаться к элементам в массиве по мере необходимости, и они будут вычисляться по требованию: 93 | 94 | ```js 95 | fibs[10] // 55 96 | fibs[7] // 13 97 | ``` 98 | 99 | В первой строке вычисляется десятый номер Фибоначчи, и поскольку мы определили, что вычисление рекурсивно (в терминах предыдущих чисел Фибоначчи), нам нужно вычислить первые девять чисел Фибоначчи, чтобы вычислить десятую. Поэтому, когда мы вычисляем седьмой номер Фибоначчи во второй строке, результат возвращается мгновенно, потому что мы уже вычислили его! 100 | 101 | Хорошая новость для обеспокоенного пользователя. Массив `fibs` не делает ничего лениво или с состоянием, или рекурсивно, или что угодно в этом роде. Это всего лишь массив. Всё зашито `lazy-arr`, а генератор - одна строка. 102 | 103 | Аккуратно, да? 104 | 105 | --- 106 | 107 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 108 | 109 | [Статья на Medium](https://medium.com/devschacht/boris-cherny-introducing-lazy-arrays-in-javascript-d7f9da531820) 110 | -------------------------------------------------------------------------------- /articles/boris-cherny-introducing-lazy-arrays-in-javascript/lazy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/boris-cherny-introducing-lazy-arrays-in-javascript/lazy.gif -------------------------------------------------------------------------------- /articles/brandon-morelli-learn-how-to-debug-javascript-with-chrome-devtools/debug.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/brandon-morelli-learn-how-to-debug-javascript-with-chrome-devtools/debug.gif -------------------------------------------------------------------------------- /articles/brandon-smith-reactive-uis-with-vanillajs-part-1-pure-functional-style/tools.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/brandon-smith-reactive-uis-with-vanillajs-part-1-pure-functional-style/tools.jpg -------------------------------------------------------------------------------- /articles/brian-greig-quick-tip-getting-started-with-headless-chrome-in-nodejs/headless.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/brian-greig-quick-tip-getting-started-with-headless-chrome-in-nodejs/headless.png -------------------------------------------------------------------------------- /articles/daniel-li-not-everything-in-javascript-is-an-object/shock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/daniel-li-not-everything-in-javascript-is-an-object/shock.jpg -------------------------------------------------------------------------------- /articles/eric-elliott-common-misconceptions-about-inheritance-in-javascript/images/header-image.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/eric-elliott-common-misconceptions-about-inheritance-in-javascript/images/header-image.jpeg -------------------------------------------------------------------------------- /articles/eric-elliott-common-misconceptions-about-inheritance-in-javascript/images/secret-agent.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/eric-elliott-common-misconceptions-about-inheritance-in-javascript/images/secret-agent.jpeg -------------------------------------------------------------------------------- /articles/eryk-napierała-performance-of-javascript-optional-chaining/images/chain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/eryk-napierała-performance-of-javascript-optional-chaining/images/chain.jpg -------------------------------------------------------------------------------- /articles/eryk-napierała-performance-of-javascript-optional-chaining/images/parse_time.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/eryk-napierała-performance-of-javascript-optional-chaining/images/parse_time.png -------------------------------------------------------------------------------- /articles/eryk-napierała-performance-of-javascript-optional-chaining/images/runtime_performance.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/eryk-napierała-performance-of-javascript-optional-chaining/images/runtime_performance.png -------------------------------------------------------------------------------- /articles/esteban-herrera-5-reasons-you-shouldnt-use-graphql/images/graphql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/esteban-herrera-5-reasons-you-shouldnt-use-graphql/images/graphql.png -------------------------------------------------------------------------------- /articles/gabriel-peal-react-native-at-airbnb/README.md: -------------------------------------------------------------------------------- 1 | # React Native в Airbnb 2 | ### В 2016 году мы сделали большую ставку на React Native. Два года спустя мы готовы поделиться своим опытом с миром и рассказать, что будет дальше. 3 | 4 | *Перевод статьи [Gabriel Peal](https://medium.com/@gpeal): [React Native at Airbnb](https://medium.com/airbnb-engineering/react-native-at-airbnb-f95aa460be1c).* 5 | 6 | ![](https://cdn-images-1.medium.com/max/2000/1*P9Kc_EWojKpqfc1-_AhnSg.jpeg) 7 | *Годы спустя, все еще можно назначить совещание в нашем Airstream* 8 | 9 | *Это первая статья в серии, в которой мы поделимся нашим опытом с React Native и расскажем, что ждёт в дальнейшем мобильную разработку в Airbnb.* 10 | 11 | Когда Airbnb был запущен 10 лет назад, смартфоны находились в зачаточном состоянии. С тех пор смартфоны стали важным инструментом в повседневной жизни, тем более, что всё больше людей путешествуют по миру. Для нас, как сообщества, которое открывает новые формы путешествий для миллионов людей, имеет решающее значение наличие приложения мирового класса. Мобильные устройства часто являются основным или единственным средством коммуникации вдали от дома. 12 | 13 | С тех пор, как первые трое наших гостей остановились на улице Рауш в 2008 году, использование мобильных телефонов увеличилось с нуля до миллионов заказов в год. Наши приложения предоставляют владельцам возможность управлять своими списками на ходу и дают путешественникам вдохновение открывать для себя новые места и события. 14 | 15 | Чтобы не отставать от роста использования мобильных устройств, мы увеличили нашу команду мобильных разработчиков до более чем 100 инженеров, чтобы обеспечить новый опыт и улучшить существующий. 16 | 17 | ## Делаем ставку на React Native 18 | 19 | Мы постоянно оцениваем новые технологии, которые позволяют нам улучшить опыт использования Airbnb для гостей и владельцев, быстро развиваться и поддерживать хорошее восприятие со стороны разработчиков (developer experience). В 2016 году одной из этих технологий стал React Native. В то время мы узнали, насколько важно мобильное приложение для нашего бизнеса, но и насколько нам не хватает инженеров мобильной разработки для достижения наших целей. В результате мы начали изучать альтернативные варианты. Наш сайт построен в основном с помощью React. На тот момент это уже был очень эффективный и общепризнанный веб-фреймворк в Airbnb. Из-за этого мы обратили внимание на React Native как возможность быстрее открыть мобильную разработку для большего числа инженеров, а также ускорить доставку нового кода до конечных пользователй за счёт кроссплатформенного характера React Native. 20 | 21 | Когда мы начинали инвестировать в React Native, мы знали, что есть риски. Мы добавляли новую, быстро развивающуюся и непроверенную платформу в нашу кодовую базу, которая потенциально могла фрагментировать её, вместо обещанного объединения. Мы также знали, что если мы собираемся инвестировать в React Native, мы хотим сделать это правильно. Наши цели с React Native были: 22 | 23 | 1. **Быстро развивать** приложение; 24 | 2. Поддерживать **планку качества**, установленную нативным приложением; 25 | 3. Писать _**общий код** для двух платформ_ (iOS и Android); 26 | 4. Дать разработчикам хороший **developer experience**. 27 | 28 | ## Наш опыт 29 | 30 | За последние два года этот эксперимент превратился в серьезное усилие. Мы создали невероятно сильную интеграцию в наши приложения, чтобы включить сложные нативные функции, такие как общие переходы элементов, параллакс и геозоны, а также бриджи к нашей существующей нативной инфраструктуре, такой как работа с сетью, эксперименты и интернационализация. 31 | 32 | Мы запустили ряд критически важных для Airbnb продуктов с использованием React Native. React Native позволил нам запустить [Experiences](https://www.airbnb.com/s/experiences), совершенно новый бизнес для Airbnb, а также десятки других функций от отзывов до подарочных карт. Многие из этих функций были созданы в то время, когда у нас просто не было достаточного количества нативных инженеров для достижения наших целей. 33 | 34 | Разные команды получили большой практический опыт с React Native. В одних React Native оказался невероятным инструментом, одновременно создавая технические и организационные проблемы в других. В этой серии мы подробно расскажем о нашем опыте и о том, куда мы двигаемся дальше. 35 | 36 | [Во второй части](../gabriel-peal-react-native-at-airbnb-the-technology) мы перечисляем, что работало хорошо и что не было не так с React Native с точки зрения технологии. 37 | 38 | [В третьей части](../gabriel-peal-building-a-cross-platform-mobile-team) мы перечисляем некоторые организационные проблемы, связанные с созданием кроссплатформенной команды мобильной разработки. 39 | 40 | [В четвертой части](../gabriel-peal-sunsetting-react-native) мы расскажем о том, где мы находимся сегодня с React Native и каково его будущее в Airbnb. 41 | 42 | [В пятой части](../gabriel-peal-whats-next-for-mobile-at-airbnb) мы берем наши лучшие знания полученные от работы с React Native и используем их, чтобы сделать нативную разработку еще лучше. 43 | 44 | - - - - 45 | 46 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 47 | 48 | [Эта статья на Medium](https://medium.com/devschacht/react-native-at-airbnb-9cd91177f0d0) 49 | -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/logo.jpg -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-01.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-02.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-03.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-04.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-05.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-06.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-07.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-08.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-09.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-10.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-11.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-12.png -------------------------------------------------------------------------------- /articles/greg-kroczek-quasar-framework/images/quasar-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/greg-kroczek-quasar-framework/images/quasar-13.png -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/logo.jpg -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-01.png -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-02.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-02.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-03.png -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-04.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-04.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-05.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-05.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-06.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-06.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-07.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-07.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-08.png -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-09.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-09.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-10.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-10.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-11.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-11.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-12.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-12.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-13.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-13.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-14.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-14.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-15.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-15.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-16.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-16.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-17.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-17.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-18.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-18.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-19.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-19.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-20.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-20.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-21.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-21.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-22.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-22.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-23.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-23.gif -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-24.png -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-25.png -------------------------------------------------------------------------------- /articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-26.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/gregg_pollack_why-43-of-front-end-developers-want-to-learn-vue/img/vue-26.gif -------------------------------------------------------------------------------- /articles/hacktoberfest-is-back-and-celebrating-its-fifth-year/README.md: -------------------------------------------------------------------------------- 1 | # Hacktoberfest вернулся и празднует свой пятый год! 2 | 3 | *Перевод поста в официальном блоге GitHub [Lee Reilly](http://twitter.com/leereilly): [Hacktoberfest is back and celebrating its fifth year!](https://blog.github.com/2018-09-24-hacktoberfest-is-back-and-celebrating-its-fifth-year/).* 4 | 5 | ![](https://user-images.githubusercontent.com/121322/45653341-78d1c000-ba8c-11e8-9497-2855130c0634.png) 6 | 7 | Присоединяйтесь к нам в октябре этого года поучаствовать в уже пятом ежегодном [Hacktoberfest](https://hacktoberfest.digitalocean.com/), событии, посвящённом месячному празднованию проектов с открытым исходным кодом (опенсорс). Как и прошлом году в организации нам помогают наши друзья из DigitalOcean, но в этому к нашему партнёрству присоединяется Twilio. 8 | 9 | Легко приобщиться к данному веселью (и получить фирменную футболку!), Все, что вам нужно сделать, это зайти на [сайт Hacktoberfest](https://hacktoberfest.digitalocean.com/) для регистрации в качестве участника. Затем отправить 5 пулреквестов в публичные репозитории опенсорс-проектов в период с 1 по 31 октября. Вот и всё! Первые 50 000 участников, которые сделают это, получат футболку лимитированную Hacktoberfest. Полные условия этой акции размещены на сайте Hacktoberfest. 10 | 11 | ![](https://user-images.githubusercontent.com/121322/45907730-f6a80b00-bdad-11e8-93ef-774392192716.png) 12 | 13 | Если вы никогда раньше не участвовали в опенсорс-проекте, рекомендуем вам поучаствовать в этом празднике опенсорса, а [наше руководство по внесению своего вклада в опенсорс](https://opensource.guide/how-to-contribute/), помогут в этом. 14 | 15 | Хотите поделиться своей любовью к Hacktoberfest? Расскажите миру о хештеге #hacktoberfest в [Twitter](https://twitter.com/hashtag/hacktoberfest), [Facebook](https://www.facebook.com/hashtag/hacktoberfest) или [Instagram](https://www.instagram.com/explore/tags/hacktoberfest/). 16 | 17 | В прошлом году более 30 000 человек из более чем 100 стран (119, если быть точным!) создали почти 240 000 пулреквестов в самые разные проекты — все, начиная от правок в документацию и исправлений ошибок вплоть до реализации новых фич и улучшений производительности. Почитайте их рассказы и (а посмотри их селфи!) в Twitter с хештегом [#hacktoberfest](https://twitter.com/hashtag/hacktoberfest). 18 | 19 | ![](https://user-images.githubusercontent.com/11401067/33097285-775a8ad2-cebe-11e7-8309-5c408859a182.png) 20 | 21 | ## Не знаете с чего начать — сделайте перевод для devSchacht! 22 | 23 | Поскольку перевод в devSchacht делается через PR в [репозитории на GitHub](https://github.com/devSchacht/translations) (не забудьте поставить звёздочку, если вам нравится наши переводы!), то мы предлагаем нашим читателям и просто желающим принять участие в Hacktoberfest, перевести какую-нибудь статью. Ниже приведён список статей, перевод которых мы хотели бы наиболее сильнее получить, однако вы можете любую, связанную с веб-разработкой статью: 24 | 25 | 1. [12 Factor CLI Apps](https://medium.com/@jdxcode/12-factor-cli-apps-dd3c227a0e46) 26 | 1. [Refactoring Node with Higher-Order Functions](http://blog.rangle.io/refactoring-node-with-higher-order-functions/) 27 | 1. [What's a Transducer?](http://raganwald.com/2017/04/30/transducers.html) 28 | 1. [How we do Vue: one year later](https://about.gitlab.com/2017/11/09/gitlab-vue-one-year-later/) 29 | 1. [Idiomatic Redux: The Tao of Redux, Part 2 - Practice and Philosophy](https://blog.isquaredsoftware.com/2017/05/idiomatic-redux-tao-of-redux-part-2/1) 30 | 1. [JavaScript typeof](https://blog.logrocket.com/javascript-typeof-2511d53a1a62) 31 | 1. [5 reasons you shouldn’t be using GraphQL](https://blog.logrocket.com/5-reasons-you-shouldnt-be-using-graphql-61c7846e7ed3) 32 | 1. [Immutability in React and Redux: The Complete Guide](https://daveceddia.com/react-redux-immutability-guide/) 33 | 1. [What is Modular CSS?](https://spaceninja.com/2018/09/17/what-is-modular-css/) 34 | 1. [5 Most-Requested Features For Vue.js in 2018](https://vuejsdevelopers.com/2018/09/17/highly-requested-new-vue-js-features/) 35 | 1. [What and How to Test with Jest and Enzyme. Full Instruction on React Components Testing](https://djangostars.com/blog/what-and-how-to-test-with-enzyme-and-jest-full-instruction-on-react-component-testing/) 36 | 37 | Руководство — «[Участие в переводах devSchacht](https://medium.com/devschacht/contributing-4e86e4481699)» 38 | 39 | Не стесняйтесь переводить и вообще участвовать в Hacktoberfest! 🎃 40 | 41 | - - - - 42 | 43 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 44 | -------------------------------------------------------------------------------- /articles/ira-shestak-async-hooks-in-node-js-illustrated/README.md: -------------------------------------------------------------------------------- 1 | # Иллюстрированное объяснение работы async_hooks в Node.js 2 | 3 | *Перевод статьи [Ирины Шестак](https://medium.com/@_lrlna?source=post_header_lockup):[async_hooks in node.js, illustrated](https://medium.com/the-node-js-collection/async-hooks-in-node-js-illustrated-b7ce1344111f). Опубликовано с разрешения автора.* 4 | 5 | Несколько недель назад я обратила внимание на [async_hooks](http://devdocs.io/node/async_hooks), новое и все ещё экспериментальное API, которое вышло с node 8, и я решила немного разобраться, чем оно может мне помочь. 6 | 7 | ![](https://cdn-images-1.medium.com/max/2000/1*WvQ_cZPu8DaHTx2StbpPTA.jpeg) 8 | 9 | *async_hooks API в кратком изложении* 10 | 11 | *async_hooks* API существенно упрощает отслеживание ваших ресурсов (прощай, dtrace?). Вы начинаете с инициализации его объектом колбэков: `init`, `before`, `after` и `destroy`. 12 | 13 | ```javascript 14 | var asyncHooks = require('async_hooks') 15 | var hooks = { 16 | init: init, 17 | before: before, 18 | after: after, 19 | destroy: destroy 20 | } 21 | var asyncHook = asyncHooks.createHook(hooks) 22 | ``` 23 | 24 | *async_hooks* основаны на концепции ресурсов. `resource` запускает колбэки *async_hooks*, описанные в вышепреведённом коде, и может быть чем угодно: от `TTYWRAP` и `SSLCONNECTION` до тех, которые вы определили сами, используя [Embedder API](https://nodejs.org/api/async_hooks.html#async_hooks_javascript_embedder_api)(подробнее об этом позже). Если вы должны написать сервер с `http.createServer()`, запустите *async_hooks* API и посмотрите, `init` колбэки каких ресурсов вызываются в этом случае. Пример такого кода: 25 | 26 | ```javascript 27 | var http = require('http') 28 | // asyncHook был описан в примере кода выше 29 | asyncHook.enable() 30 | 31 | http.createServer(function (req, res) { 32 | res.end('hello qts') 33 | }).listen(8079) 34 | 35 | function init(asyncId, type, triggerId) { 36 | fs.writeSync(1, `${type} \n`) 37 | } 38 | ``` 39 | 40 | ![](https://cdn-images-1.medium.com/max/2000/1*ObGpUcFpGwbTR3naPODtqg.gif) 41 | *Примеры ресурсов для GET-запроса* 42 | 43 | 44 | ## function init(asyncId, type, triggerId) {} 45 | 46 | ![](https://cdn-images-1.medium.com/max/2000/1*RpvWsEE-O7_8BgEA6ezIdA.jpeg) 47 | *`init` колбэк async_hooks* 48 | 49 | Этот колбэк `init`, вероятно, самый интересный — он позволяет вам получить доступ к текущему ресурсу и посмотреть, что вызвало его запуск. Это означает, что в конечном итоге вы сможете создать хорошую структуру логов, чтобы понять, что действительно происходит в вашем приложении. 50 | 51 | ![](https://cdn-images-1.medium.com/max/1200/1*5wZTATIQvOXIebSR9MPRAg.jpeg) 52 | *Запускаем отслеживание на `init`, и группируем временные интервалы по их `triggerId`* 53 | 54 | Я подумала, что это хороший вход в трассировку исполнения программы — получаем `asyncId` и `triggerId` на `init`, запускаем таймер, чтобы отслеживать время исполнения вашей операции и в конце уничтожаем его в колбэке `destroy`. С этой идеей я написала [`on-async-hook`](https://github.com/lrlna/on-async-hook), простой эмиттер трассировки с использованием *async_hook*. 55 | 56 | `on-async-hook` создает трассировку, когда *async_hooks* вызывает колбэк init и группирует ресурсы на основе их `triggerId`. Я хотела измерять время исполнения операций, поэтому структура вывода трассировки `on-async-hook` также включает время начала и время окончания, которое фиксирует, когда ресурс был добавлен на `init` и когда удалён в `destroy`. Простой *hello world* сервер в конечном итоге получит такую трассировку: 57 | 58 | ![](https://cdn-images-1.medium.com/max/1600/1*NaukfvJ4LfQD-7_sJjXJdg.gif) 59 | *трассировка ‘hello world’ с помощью on-async-hook* 60 | 61 | ## Embedder API 62 | 63 | Если вы работаете с нативными биндингами на C++, вы можете определить свои собственные ресурсы. Вы можете легко это сделать с помощью интерфейса Embedder API. Вот пример, использующий [utp-native](https://github.com/mafintosh/utp-native) библиотеку [mafintosh](https://twitter.com/mafintosh): 64 | 65 | ```javascript 66 | var AsyncResource = require('async_hooks').AsyncResource 67 | var utp = require('utp-native') 68 | var resource = new AsyncResource('UTPNative') 69 | var server = utp.createServer(function (socket) { 70 | socket.pipe(socket) 71 | }) 72 | server.listen(1337, function () { 73 | var socket = utp.connect(1337) 74 | resource.emitBefore() 75 | socket.write('hello qts') 76 | resource.emitAfter() 77 | socket.on('data', function (data) { 78 | console.log('resourceId', resource.asyncId()) 79 | console.log('triggerAsyncId', resource.triggerAsyncId()) 80 | console.log('this is my data ', data) 81 | }) 82 | }) 83 | server.on('close', function () { 84 | resource.emitDestroy() 85 | }) 86 | ``` 87 | 88 | ## Что дальше? 89 | 90 | *async_hooks* все ещё довольно экспериментальны — все сломано™, и API, возможно, все ещё меняется (например, `async_hooks.executionAsyncId()` используется как `async_hooks.currentId()`), но так приятно видеть, что node объединяет вместе новые способы для мониторинга наших приложений. 91 | 92 | ## Дополнительная информация: 93 | 94 | * Performance Timing API. [@jasnell](https://twitter.com/jasnell) добавил его поддержку в Node.js [на прошлой неделе](https://medium.com/the-node-js-collection/async-hooks-in-node-js-illustrated-b7ce1344111f). Это довольно интересная новость для тех, кто хочет мониторить производительность приложений на Node.js, и я бы определенно посоветовала изучить её. 95 | * Если вы уже используете *async_hooks* в продакшене, есть [ишью](https://github.com/nodejs/node/issues/14794), открытое для сбора отзывов. 96 | * Поскольку *async_hooks* доступен только для node 8, я также предложила бы изучить [async-tracer](http://github.com/davidmarkclements/async-tracer) от [davidmarkclem](https://twitter.com/davidmarkclem) - он поддерживает предыдущие версии node. 97 | 98 | --- 99 | 100 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 101 | 102 | [Статья на Medium](https://medium.com/devschacht/async-hooks-in-node-js-illustrated-e8ddcfcffac9) 103 | -------------------------------------------------------------------------------- /articles/ira_shestak_garbage_collection_in_v8/readme.md: -------------------------------------------------------------------------------- 1 | # Сборщик мусора в V8, иллюстрированное руководство 2 | *Перевод статьи [Ирины Шестак](https://medium.com/@_lrlna). [Garbage collection in V8, an illustrated guide](https://medium.com/@_lrlna/garbage-collection-in-v8-an-illustrated-guide-d24a952ee3b8). Опубликовано с разрешения автора.* 3 | 4 | ### [Статья на Medium](https://medium.com/devschacht/сборщик-мусора-в-v8-иллюстрированное-руководство-d3e496a4d378) 5 | 6 | Это руководство отличается от тех, что я делала раньше, и содержит немного сопровождающего текста вместе с эскизами. Я подумала, что вся концепция сборки мусора и то, как она обрабатывается в javascript (или, точнее, в движках javascript), заслуживает более подробного объяснения. Я также хотела бы упомянуть, что это руководство предназначено для начинающих пользователей и не охватывает все аспекты управления памятью в V8 и другие его подробности. Если же вы хотите исследовать глубже, то я приложила ссылки на несколько [ресурсов](#-sourcesjs). Также, это руководство сосредоточено на ✨javascript✨ и, очевидно, что сборка мусора в нём отличается от сборки мусора в других языках, таких, как, например, C *(примечание переводчика: в C/C++ нет автоматических сборщиков мусора)*. 7 | 8 | Хорошо, давайте приступим. 9 | 10 | ## Что такое v8? 11 | V8, движок javascript (не путайте с вашим любимым томатным соком 🍹), компилирует и исполняет ваш прекрасно написанный javascript. V8 поставляется с основанным на поколения (generational), останавливающем-весь-мир (stop-the-world) сборщиком мусора (это я постараюсь объяснить ниже). Он поставляется с Chrome. Эквивалент от Mozilla это SpiderMonkey, а Chakra - от Microsoft. В любом случае, при запуске javascript вам нужен движок для его исполнения, и V8 - один из ваших вариантов, будь то в браузере или в среде node.js. (P.S. и всё это ✨[опенсорс](https://github.com/v8/v8)✨.) 12 | 13 | ## Что такое сборщик мусора? 14 | Важнейшей задачей сборки мусора является возможность управления использованием памяти конкретной программой. Такие языки, как C, обычно могут подключаться к управлению памятью программы и выделять и освобождать её в контексте программы. ECMAScript, с другой стороны, не имеет интерфейса для доступа к управлению памятью (да, это означает отсутствие соответствующего API). Что, в общем-то, означает, что все *права на управление памятью*™ в программе передаются V8. 15 | 16 | Поскольку у нас нет доступа к бесконечному объему памяти, работа сборщика мусора заключается в том, что нужно перебрать все объекты, для которых выделена память, и определить, *мертвы они или нет*. Те, которые живы, должны остаться в памяти, те, которые мертвы, удаляются, а память возвращается обратно в кучу. 17 | 18 | *Что такое куча*? Куча - это неструктурированная область, из которой объекты получают выделенную память. Распределение является динамическим, поскольку размер / время жизни / количество объектов неизвестно, поэтому выделение и освобождение памяти происходит во время выполнения программы. 19 | 20 | Поэтому, если мы посмотрим на конкурентную модель, куча работает непосредственно со стеком вызовов, так как объекты, отображаемые в стеке, требуют выделения памяти. Это будет выглядеть примерно так: 21 | 22 | ![](https://cdn-images-1.medium.com/max/800/1*kSaW2ZV1fpDsw9G-_snWSQ.jpeg) 23 | 24 | ## Живой или мёртвый? 25 | Базовая проверка того, жив или мертв объект, основана на том, может ли клиент или программа, выполняющая код, достичь его. Наиболее достижимый объект, как вы можете подумать, это, вероятно, объект, объявленный в корневой области видимости. 26 | 27 | Некоторые C++ биндинги (или веб-API на клиенте) также являются частью корня, поэтому вы можете напрямую обращаться к методам типа `setInterval`. 28 | 29 | О достижимости можно также думать так: сможет ли другой объект или корневой объект получить его, и если да, то память, требуемая для этого объекта, сохраняется. 30 | 31 | ## Итак, как мы можем добраться до сборки мусора? (Расскажи мне! Расскажи мне!) 32 | V8 выделяет память в куче при создании новых объектов или новых «указателей». (У javascript нет реальных указателей, поэтому 'указатели' технически просто копируют ссылки на исходный объект). В куче есть множество разных пространств для разных типов объектов, и она будет организована примерно так: 33 | 34 | ![](https://cdn-images-1.medium.com/max/800/1*UEWA_EZ5Txo3h72VsCqztg.jpeg) 35 | 36 | В целях сбора мусора V8 делит кучу на две части: молодое и старое пространство. Когда вы выполняете операции, требующие выделения памяти, V8 выделяет место в первой части. Когда вы продолжаете добавлять вещи в кучу, вы в конечном итоге исчерпываете память, поэтому V8 будет запускать очистку. Для вновь созданных объектов память выделяется очень быстро из короткой и быстрой коллекции, очищаемой на регулярной основе (для удаления уже мертвых объектов). Как только объекты «переживают» несколько (2, чтобы быть точными) циклов очистки, они переносятся в старое пространство, обрабатывающееся сборщиком мусора в отдельном цикле по факту заполнения. 37 | 38 | ![](https://cdn-images-1.medium.com/max/800/1*RgDxqjirrzdNW4RLDPebKw.jpeg) 39 | 40 | Старые объекты - это те, которые пережили более одного цикла сборки мусора, то есть на них продолжают ссылаться другие объекты, и они должны оставаться в памяти. Обычно они не ссылаются на молодые объекты, но продолжают иметь ссылки на более старые объекты. Нежелательно допускать смешение поколений, так как это делает уборку менее чистой. 41 | 42 | ## 🆒 sources.js 43 | - [memory management](http://www.memorymanagement.org/); мне нравится читать [глоссарий](http://www.memorymanagement.org/glossary/), потому что вы обнаруживаете кучу замечательных вещей. 44 | - это действительно хороший и детальный [справочник](https://github.com/thlorenz/v8-perf) 45 | по производительности v8. 46 | - вы можете заглянуть в [v8 wiki](https://github.com/v8/v8/wiki) для получения большей информации о внутренней работе v8 и том, как отлаживать ваши проекты. 47 | - о "частоте кадров" в [firefox dev tools](https://developer.mozilla.org/en-US/docs/Tools/Performance/Frame_rate) 48 | - другое хорошее руководство [V8 && garbage collection](http://jayconrod.com/posts/55/a-tour-of-v8-garbage-collection) 49 | -------------------------------------------------------------------------------- /articles/ire-aderinokun-asynchronous-functions-101/octopus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/ire-aderinokun-asynchronous-functions-101/octopus.jpg -------------------------------------------------------------------------------- /articles/jakob-lind-code-your-own-redux-part-2-the-connect-function/connect-react-redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/jakob-lind-code-your-own-redux-part-2-the-connect-function/connect-react-redux.png -------------------------------------------------------------------------------- /articles/jakob-lind-learn-redux-by-coding-a-mini-redux/README.md: -------------------------------------------------------------------------------- 1 | # Изучаем Redux на примере создания мини-Redux 2 | 3 | *Перевод статьи [Jakob Lind](https://twitter.com/karljakoblind): [Learn Redux by coding a Mini-Redux](http://blog.jakoblind.no/2017/03/13/learn-redux-by-coding-a-mini-redux)* 4 | 5 | Есть множество ресурсов по изучению Redux: официальная документация, примеры, руководства, блоги, шаблоны, Youtube видео, подкасты и так далее. Список можно продолжать. И хотя у нас есть так много замечательных ресурсов для изучения, появляющиеся новички по-прежнему впадают в замешательство. Из-за огромного количества материала, может быть сложно найти действительно стоящий. 6 | 7 | Другая стратегия обучения — самостоятельное написание простой реализации Redux для развития глубокого понимания основополагающих принципов библиотеки. Для меня это был настоящий прорыв в моём процессе обучения. Теперь я чувствую, что знаю Redux, потому что я написал похожий код самостоятельно. 8 | 9 | **Не беспокойтесь, это не сложно**. Ядро Redux удивительно простое. Вы увидите это в ходе чтения и написания кода по этой статье. 10 | 11 | Прежде, чем мы начнём, нам необходимо общее представление о том, что же делает Redux. 12 | 13 | ## Что делает Redux? 14 | Суть Redux — иметь единственный источник состояния вашего приложения. Состояние хранится как обычный JavaScript объект в одном месте: в Redux **Store** (*хранилище*). Объект с состоянием доступен только для чтения. Если вы хотите изменить состояние, то вам необходимо эмитировать **Action** (*действие*), представляющий собой обычный JavaScript объект. 15 | 16 | Ваше приложение может **подписаться**, чтобы получить уведомление об изменении хранилища. Когда Redux используется с React, компоненты React уведомляются об изменении состояния и могут перерисовываться на основе нового контента в хранилище. 17 | 18 | ![](./redux.png) 19 | 20 | Хранилищу необходим способ понять, как ему обновить своё состояние, когда он получает действие. Для этого оно использует обычную JavaScript функцию, которую Redux называет **reducer** (*редьюсер*). Редюсер передаётся при создании хранилища. 21 | 22 | ## Начнём программировать! 23 | Подводя итог, мы должны иметь возможность делать с нашим хранилищем три вещи: 24 | 25 | 1. Получать текущее состояние хранилища 26 | 2. Передавать действие в качестве аргумента к редьюсеру, чтобы обновить состояние в хранилище 27 | 3. Подписаться на события изменения хранилища 28 | 29 | Мы также должны определить редюсер и начальное состояние на момент запуска. Давайте с этого и начнём: 30 | 31 | ```js 32 | function createStore(reducer, initialState) { 33 | const currentReducer = reducer; 34 | let currentState = initialState; 35 | } 36 | ``` 37 | 38 | ### 1. Получение состояния 39 | Итак, мы создали функцию, которая просто сохраняет начальное состояние и редюсер как локальные переменные. Сейчас давайте реализуем возможность получать состояние нашего хранилища. 40 | 41 | ```js 42 | function createStore(reducer, initialState) { 43 | const currentReducer = reducer; 44 | let currentState = initialState; 45 | 46 | return { 47 | getState() { 48 | return currentState; 49 | } 50 | }; 51 | } 52 | ``` 53 | 54 | Теперь мы можем получать объект состояния с помощью `getState()`! Это было несложно. 55 | 56 | ### 2. Передача действия 57 | Следующий шаг - внедрить поддержку передачи действия. 58 | 59 | ```js 60 | function createStore(reducer, initialState) { 61 | const currentReducer = reducer; 62 | let currentState = initialState; 63 | 64 | return { 65 | getState() { 66 | return currentState; 67 | }, 68 | dispatch(action) { 69 | currentState = currentReducer(currentState, action); 70 | return action; 71 | } 72 | }; 73 | } 74 | ``` 75 | 76 | Функция `dispatch` передаёт текущее состояние и передаёт действие через редьюсер, который мы определили при инициализации. Затем она перезаписывает старое состояние новым состоянием. 77 | 78 | ### 3. Подписка на события 79 | Теперь мы можем получать текущее состояние и обновлять его! Последний шаг — научиться слушать изменения: 80 | 81 | ```js 82 | function createStore(reducer, initialState) { 83 | const currentReducer = reducer; 84 | let currentState = initialState; 85 | let listener = () => {}; 86 | 87 | return { 88 | getState() { 89 | return currentState; 90 | }, 91 | dispatch(action) { 92 | currentState = currentReducer(currentState, action); 93 | listener(); // Заметьте, что мы добавили эту строку! 94 | return action; 95 | }, 96 | subscribe(newListener) { 97 | listener = newListener; 98 | } 99 | }; 100 | } 101 | ``` 102 | 103 | Теперь мы можем вызвать `subscribe` c функцией обратного вызова в качестве параметра, которая будет вызываться всякий раз, когда происходит передача действия. 104 | 105 | ## Мы закончили. Воспользуемся этим! 106 | 107 | *Вот и вся реализация мини-Redux*! На самом деле, это урезанная версия настоящего кода Redux. 108 | 109 | В [официальном репозитории Redux](https://github.com/reactjs/redux) есть пример использования Redux. Мы можем скопировать и вставить этот пример, чтобы проверить нашу собственную реализацию Redux: 110 | 111 | ```js 112 | function counter(state = 0, action) { 113 | switch (action.type) { 114 | case 'INCREMENT': 115 | return state + 1; 116 | case 'DECREMENT': 117 | return state - 1; 118 | default: 119 | return state; 120 | } 121 | } 122 | 123 | let store = createStore(counter); 124 | 125 | store.subscribe(() => 126 | console.log(store.getState()) 127 | ) 128 | 129 | store.dispatch({ type: 'INCREMENT' }) 130 | store.dispatch({ type: 'INCREMENT' }) 131 | store.dispatch({ type: 'DECREMENT' }) 132 | ``` 133 | 134 | Получить полный код для запуска на вашем компьютере вы можете [здесь](https://gist.github.com/jakoblind/6b90d0b677d26effcebbed69b24cb05f). 135 | 136 | ## Заключение 137 | Мы реализовали полностью рабочую версию Redux в восемнадцати строках кода! Довольно впечатляюще! 138 | 139 | Код, который мы написали, само собой, **не подходит для production**. По сравнению с "реальным" Redux мы убрали обработку ошибок, не реализовали поддержку нескольких слушателей, не реализовали поддержку промежуточного ПО (*middlewares*) и так далее. 140 | 141 | Теперь вы знаете основные принципы работы Redux и будете лучше подготовлены, продолжая ваше учебное путешествие! 142 | 143 | В следующей [статье](http://blog.jakoblind.no/2017/03/20/learn-react-redux-by-coding-the-connect-function-yourself/) мы будем реализовывать функцию connect, связывающую хранилище Redux c React компонентами. 144 | 145 | - - - - 146 | 147 | *Слушайте наш подкаст на [SoundCloud](https://soundcloud.com/devschacht), читайте на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 148 | 149 | [Статья на Medium](https://medium.com/devschacht/jakob-lind-learn-redux-by-coding-a-mini-redux-d1a58e830514) 150 | -------------------------------------------------------------------------------- /articles/jakob-lind-learn-redux-by-coding-a-mini-redux/redux.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/jakob-lind-learn-redux-by-coding-a-mini-redux/redux.png -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_breakpoint.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_breakpoint.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_conditional_breakpoint.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_conditional_breakpoint.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_console.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_console.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_debugger.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_debugger.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_debugger_source-stop.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_debugger_source-stop.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_debugger_source.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_debugger_source.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_list.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_list.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_quick_chat.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_quick_chat.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_scope.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_scope.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_source_code.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_source_code.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_watch.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/debbuging_watch.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/logo.png -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-01.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-01.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-02.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-02.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-03.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-03.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-04.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-04.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-05.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-05.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-06.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-06.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-07.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-07.webp -------------------------------------------------------------------------------- /articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-08.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/james-quick-debugging-javascript-in-google-chrome-and-visual-studio-code/images/vsc-08.webp -------------------------------------------------------------------------------- /articles/javascript-event-loop-explained/README.md: -------------------------------------------------------------------------------- 1 | # Объяснение работы EventLoop в JavaScript 2 | 3 | _Перевод статьи [Anoop Raveendran](https://medium.com/@anooprav7): [JavaScript Event Loop Explained](https://medium.com/front-end-weekly/javascript-event-loop-explained-4cd26af121d4)._ 4 | 5 | «Как JavaScript может быть асинхронным и однопоточным?» Если кратко, то JavaScript однопоточный, а асинхронное поведение не является частью самого языка; вместо этого оно построено на основе него в браузере (или среде программирования) и доступно через браузерные API. 6 | 7 | Теперь посмотрим на длинный ответ. 8 | 9 | ### Базовая архитектура 10 | 11 | Обзор основных компонентов в браузере
12 | _Обзор основных компонентов в браузере_ 13 | 14 | - Heap (куча) - объекты собраны в кучу, которая есть ни что иное, как название для наименее структурированной части памяти. 15 | - Stack (стопка, стек)  — репрезентация единственного потока выполнения JavaScript-кода. Вызовы функций помещаются в стек (об этом ниже). 16 | - Browser or Web API's (браузерные или веб API) - встроены в браузер и способны предоставлять данные из браузера и окружающей компьютерной среды и давать возможность выполнять с ними полезные и сложные вещи. **Они не являются частью языка JavaScript, но они построены на его основе и предоставляют вам супер силы, которые можно использовать в JavaScript коде**. Например [Geolocation API](https://medium.com/r/?url=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FAPI%2FGeolocation%2FUsing_geolocation) предоставляет доступ к нескольким простым конструкциям JavaScript, которые используются для получения данных о местоположении, так что вы можете, скажем, отобразить своё местоположение на Google Map. В фоновом режиме браузер использует низкоуровневый код (например C++) для связи с оборудованием GPS устройства (или любым другим, доступным для определения данных о местоположении), получения данных о местоположении и возвращения их в среду браузера для использования в вашем коде. Но опять, эта сложность абстрагирована от вас посредством API. 17 | 18 | ### Пример кода №1: Интрига 19 | 20 | ```js 21 | function main() { 22 | console.log('A') 23 | setTimeout(function exec() { 24 | console.log('B') 25 | }, 0) 26 | console.log('C') 27 | } 28 | main() 29 | 30 | // Output 31 | // A 32 | // C 33 | // B 34 | ``` 35 | 36 | Здесь мы видим функцию main, включающую в себя два `console.log`, выводящих в консоль 'A' и 'C'. Между ними находится setTimeout, вызов которого выведет в консоль 'B' после ожидания в 0 секунд. 37 | 38 | ![](https://cdn-images-1.medium.com/max/1600/1*64BQlpR00yfDKsXVv9lnIg.png) 39 | _Вот что происходит внутри во время исполнения_ 40 | 41 | 1. Вызов функции `main` сначала поместит её в стек (в качестве первого элемента (frame)). Потом браузер поместит в стек первое выражение функции `main`, которое представляет собой `console.log('A')`. Это выражение выполняется и, после завершения, удаляется из стека. Буква 'A' выводится в консоль. 42 | 2. Следующее выражение (`setTimeout()` с коллбэком `exec()` и временем ожидания в 0 секунд) помещается в стек вызовов и выполнение начинается. Функция `setTimeout` использует API браузера для задержки вызова предоставленной функции. Элемент (frame) удаляется из стека сразу после завершения передачи таймера браузерному API. 43 | 3. `console.log('C')` помещается в стек, пока в браузере запускается таймер для вызова функции `exec()`. В этом конкретном случае, поскольку время ожидания составляет 0 секунд, коллбэк (функция `exec()`) будет помещён в message queue (очередь сообщений), сразу после того как браузер его получит (в идеале). 44 | 4. После выполнения последнего выражения функции `main`, элемент `main` удаляется из стека вызовов (call stack), оставляя его пустым. Стек вызовов должен быть пустым, для того чтобы браузер поместил в него элемент из message queue. Именно по этой причине даже если в `setTimeout` указано время ожидания в 0 секунд, функция `exec()` не выполняется, пока не закончится выполнение всех элементов в стеке вызовов. 45 | 5. Теперь функция `exec()` помещается в стек вызовов и выполняется. Буква 'C' выводится в консоль. Вот он  —  цикл событий (EventLoop) JavaScript. 46 | 47 | > Таким образом аргумент `delay` в `setTimeout(function, delayTime)` не означает точное время задержки, после которого функция выполнится. Он означает минимальное время ожидания, после которого в какой-нибудь момент времени, функция будет вызвана. 48 | 49 | ### Пример кода №2: Более глубокое понимание 50 | 51 | ```js 52 | function main() { 53 | console.log('A') 54 | setTimeout(function exec() { 55 | console.log('B') 56 | }, 0) 57 | runWhileLoopForNSeconds(3) 58 | console.log('C') 59 | } 60 | main() 61 | function runWhileLoopForNSeconds(sec) { 62 | let start = Date.now(), 63 | now = start 64 | while (now - start < sec * 1000) { 65 | now = Date.now() 66 | } 67 | } 68 | 69 | // Output 70 | // A 71 | // C 72 | // B 73 | ``` 74 | 75 | ![](https://miro.medium.com/max/800/1*RuCaP1t09YaF7wfernuLWA.png) 76 | 77 | * Функция `runWhileLoopForNSeconds()` делает именно то, что отражено в её названии. Она постоянно проверяет, прошло ли со времени её вызова то количество секунд, которое передано аргументом. Главное, что нужно помнить - что цикл `while` является блокирующим выражением, и это означает, что его выполнение происходит в стеке вызовов и не использует браузерные API. Таким образом он блокирует все последующие выражения, пока не выполнится до конца. 78 | * В коде выше, даже не смотря на то, что `setTimeout` имеет задержку в 0 секунд и цикл `while` выполняется 3 секунды, функция `exec()` застрянет в очереди сообщений. Цикл `while` будет выполняться в стеке вызовов (в котором один поток), пока не пройдет 3 секунды. И только после того, как стек вызовов опустеет, функция `exec()` будет помещена в стек и выполнена. 79 | * Таким образом аргумент `delay` в `setTimeout()` не гарантирует начала выполнения после завершения указанной задержки. Он является минимальным временем задержки. 80 | 81 | Эта статья была написана под сильным влиянием от доклада, который сделал [Philip Roberts](http://latentflip.com/) (Филип Робертс) — [JS Event Loop](https://medium.com/r/?url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D8aGhZQkoFbQ). Для демонстрации работы цикла событий вы можете перейти на созданный им http://latentflip.com/loupe. Спасибо Филипу за доклад, он помог мне лучше понять JavaScript. 82 | 83 | --- 84 | _Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht)._ 85 | 86 | _Если вам понравилась статья, внизу можно поддержать автора хлопками 👏🏻 Спасибо за прочтение!_ 87 | -------------------------------------------------------------------------------- /articles/jordan-harband-array-iteration-methods-summarized/make_juice_with_reduce.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/jordan-harband-array-iteration-methods-summarized/make_juice_with_reduce.jpg -------------------------------------------------------------------------------- /articles/jordan-irabor-natural-language-processing-for-nodejs/images/logrocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/jordan-irabor-natural-language-processing-for-nodejs/images/logrocket.png -------------------------------------------------------------------------------- /articles/jordan-irabor-natural-language-processing-for-nodejs/images/nlpnode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/jordan-irabor-natural-language-processing-for-nodejs/images/nlpnode.png -------------------------------------------------------------------------------- /articles/joseph-zimmerman-drag-drop-file-uploader-vanilla-js/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/joseph-zimmerman-drag-drop-file-uploader-vanilla-js/images/logo.png -------------------------------------------------------------------------------- /articles/kim-maida-glossary-of-modern-javascript-concepts-part-2/dna.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/kim-maida-glossary-of-modern-javascript-concepts-part-2/dna.jpg -------------------------------------------------------------------------------- /articles/kyle-simpson-you-dont-know-js-async--performance/README.md: -------------------------------------------------------------------------------- 1 | Статья переехала 2 | https://github.com/devSchacht/You-Dont-Know-JS/blob/master/async%20&%20performance/ch1.md 3 | -------------------------------------------------------------------------------- /articles/mark-erikson-idiomatic-redux-the-tao-of-redux-part-1---implementation-and-intent/tao.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/mark-erikson-idiomatic-redux-the-tao-of-redux-part-1---implementation-and-intent/tao.jpg -------------------------------------------------------------------------------- /articles/mathias-bynens-asynchronous-stack-traces-why-await-beats-then/README.md: -------------------------------------------------------------------------------- 1 | # Асинхронные стектрейсы: почему `await` побеждает `.then()` 2 | 3 | *Перевод заметки [Mathias Bynens](https://mathiasbynens.be): [Asynchronous stack traces: why await beats .then()](https://mathiasbynens.be/notes/async-stack-traces). Опубликовано с разрешения автора.* 4 | 5 | ![Асинхронные стектрейсы: почему await побеждает .then()](./async-await-1024x430.jpg) 6 | 7 | В сравнении использованием промисов напрямую, [async/await](https://developers.google.com/web/fundamentals/getting-started/primers/async-functions) не только делают код более читабельным для разработчиков, но также добавляют некоторые оптимизации в движке JavaScript. 8 | 9 | Фундаментальное отличие между `await` и нативными промисами в том, что `await X()` приостанавливает выполнение текущей функции, когда `promise.then(X)` продолжает выполнение после добавления вызова `X` в цепочку функций обратного вызова (*callback*). Для стектрейса эта разница весьма значительная. 10 | 11 | В любой момент, когда цепочка промисов бросает необработанное исключение, движок JavaScript должен отобразить сообщение об ошибке и (вероятно) полезный стектрейс. Как разработчик, вы ожидаете этого, независимо от того, используете вы нативные промисы или же `async/await`. 12 | 13 | ## Нативные промисы 14 | 15 | Представим сценарий, когда функция `c` была вызвана в результате `resolve` асинхронного выполнения функции `b`. 16 | 17 | ```javascript 18 | const a = () => { 19 | b().then(() => c()); 20 | }; 21 | ``` 22 | 23 | Когда `a` была вызвана, следующее было выполнено синхронно: 24 | 25 | - `b` была вызвана и вернула `Promise`, который выполнил `resolve` в некоторый момент времени в будущем. 26 | - функция обратного вызова `.then`, вызывающая функцию `c`, была добавлена в цепочку (или, говоря на языке V8: «был добавлен, как «*resolve handler*»). 27 | 28 | После этого мы завершаем выполнение кода в теле функции `a`. `a` никогда не приостанавливается, из-за чего мы теряем контекст в результате асинхронного вызова `resolve` функции `b`. Представьте, что будет, если `b` (или `c`) асинхронно бросит исключение. Стектрейс должен включать информацию о функции `a`, так как источник исключения `b` (или `c`), правильно? Как это возможно, когда ссылка на `a` потеряна? 29 | 30 | Для того, чтобы этого избежать, движок JavaScript должен сделать кое-что помимо перечисленных выше шагов: он захватывает и хранит стектрейс в пределах функции `a` до конца её выполнения. В V8 стектрейс привязан к промису, возвращенному от `b`. По завершён.и промиса, стектрейс передаётся дальше и `c` может использовать его по мере необходимости. 31 | 32 | Захват стектрейса забирает время (следовательно, ухудшает производительность) и хранение стектрейса требует памяти. 33 | 34 | ## `async/await` 35 | 36 | Это та же программа, написанная с использованием `async/await` вместо нативных промисов. 37 | 38 | ```javascript 39 | const a = async () => { 40 | await b(); 41 | c(); 42 | }; 43 | ``` 44 | 45 | C `await` нет необходимости хранить текущий стектрейс — достаточно хранить указатель от `b` на `a`. Во время выполнения `b`, `a` приостанавливается, что позволяет всё ещё иметь доступ к текущему контексту. Если `b` бросает исключение, стектрейс может быть восстановлен путём перемещения этих указателей. Если `c` бросает исключение, стектрейс будет сформирован точно также, как это бы было в случае с синхронным выполнением, так как в это время мы все ещё находимся внутри функции `a`. Так или иначе, захват стектрейса больше не нужен: вместо этого его формирование происходит тогда, когда это необходимо. 46 | 47 | ## Рекомендации 48 | 49 | Большинство ECMAScript фич являются «просто синтаксическим сахаром», но `async/await` - нечто большее. 50 | 51 | Делайте так, чтобы JavaScript движок мог обрабатывать стектрейсы более производительным и менее затратным к памяти способом, следуя этим рекомендациям: 52 | 53 | - Используйте `async/await` вместо нативных промисов. 54 | - Используйте [babel-preset-env](https://github.com/babel/babel-preset-env) во избежание транспайлига `async/await` без необходимости. 55 | 56 | Несмотря на то, что V8 ещё не реализует эту оптимизацию, следуя этим советам вы обеспечите оптимальную производительность, как только она появится. 57 | 58 | Не используйте транспиляцию кода, пока вы действительно не испытываете в этом необходимость. Например, [все современные браузеры, которые поддерживают *сервис воркеры*](https://caniuse.com/#feat=serviceworkers), также поддерживают `async/await`. В следствии чего, нет необходимости в транспиляции этого кода в нативные промисы. То же касается и [браузеров с поддержкой ES модулей](https://caniuse.com/#feat=es6-module). Для более детальной информации, смотрите статью Филлипа на [deploying ES2015+ code in production today](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) 59 | 60 | --- 61 | 62 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 63 | 64 | [Статья на Medium](https://medium.com/devschacht/асинхронные-стектрейсы-почему-await-побеждает-then-6a5e6dad0584) 65 | -------------------------------------------------------------------------------- /articles/mathias-bynens-asynchronous-stack-traces-why-await-beats-then/async-await-1024x430.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/mathias-bynens-asynchronous-stack-traces-why-await-beats-then/async-await-1024x430.jpg -------------------------------------------------------------------------------- /articles/nader-dabit-ionic-react-first-look/images/IonicReact.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/nader-dabit-ionic-react-first-look/images/IonicReact.png -------------------------------------------------------------------------------- /articles/nader-dabit-ionic-react-first-look/images/conference.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/nader-dabit-ionic-react-first-look/images/conference.jpeg -------------------------------------------------------------------------------- /articles/nader-dabit-ionic-react-first-look/images/ionicserve.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/nader-dabit-ionic-react-first-look/images/ionicserve.jpg -------------------------------------------------------------------------------- /articles/nader-dabit-ionic-react-first-look/images/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/nader-dabit-ionic-react-first-look/images/usage.png -------------------------------------------------------------------------------- /articles/nicholas-c-zakas-why-ive-stopped-exporting-defaults-from-my-javascript-modules/why-ive-stopped-exporting-defaults-from-my-javascript-modules-hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/nicholas-c-zakas-why-ive-stopped-exporting-defaults-from-my-javascript-modules/why-ive-stopped-exporting-defaults-from-my-javascript-modules-hero.png -------------------------------------------------------------------------------- /articles/nicola-del-gobbo-how-i-ported-bcrypt-to-new-n-api/NAPI.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/nicola-del-gobbo-how-i-ported-bcrypt-to-new-n-api/NAPI.jpg -------------------------------------------------------------------------------- /articles/npm-5-is-now-npm-latest/README.md: -------------------------------------------------------------------------------- 1 | # npm@5 теперь `npm@latest` 2 | 3 | ![](https://cdn-images-1.medium.com/max/1600/1*9nI6dL1Z-8cqFpCX96zVFA.gif) 4 | 5 | *Перевод заметки в [официальном блоге npm](https://medium.com/npm-inc): [npm@5 is now `npm@latest`](https://medium.com/npm-inc/npm-5-is-now-npm-latest-d674e9e3b0ec).* 6 | 7 | Уже здесь! 8 | 9 | Начиная с сегодняшнего дня, если вы наберёте `npm install npm@latest -g`, вы обновитесь до версии npm 5.0.1. Кроме того, npm@5 поставляется вместе с [новой Node.js 8](https://medium.com/@nodejs/node-js-8-big-improvements-for-the-debugging-and-native-module-ecosystem-58454861f2fc). 10 | 11 | [Последние полтора года](https://www.youtube.com/watch?v=5CcaebJeXFU&feature=youtu.be&t=24m21s) мы работали над устранением большого количества болячек, некоторые из которых существовали с момента создания реестра. Сегодняшний выпуск - самое большое достижение в скорости, консистентности и удобстве работы с npm. 12 | 13 | Окончательный список того, что появилось нового и что изменилось, в [примечаниях к релизу](http://blog.npmjs.org/post/161081169345/v500), но вот некоторые основные моменты: 14 | 15 | ## Он быстрый 16 | Мы переработали метаданные пакета, загрузку пакетов и кэширование пакетов, и это дало значительное ускорение. В целом мы ожидаем улучшения производительности на 20-100%. В некоторых случаях мы наблюдали ускорение до 5x. 17 | 18 | ![](https://cdn-images-1.medium.com/max/1600/0*K1Wb1ERhtAHLRG0m.) 19 | 20 | Установка веб-сайта npm в наших собственных dev-средах уменьшилась с 99 секунд с использованием npm@4 до 27 секунд с npm@5. Теперь мы тратим меньше времени [на офисные поединки](https://twitter.com/AhmadNassri/status/859934689863245825). 21 | 22 | С тех пор как npm был спроектирован, разработчики изменили способ его использования. Не только размер экосистемы экспоненциально растёт, но и количество зависимостей в среднем npm-пакете увеличилось на 250% с 2014 года. Всё больше разработчиков устанавливают различные полезные утилиты, такие как Babel, Webpack и Tap, локально, а не глобально. Это лучше, но это означает, что `npm install` делает гораздо больше работы. 23 | 24 | Учитывая размер нашего сообщества, любое ускорение превращается в огромную экономию для миллионов пользователей, не говоря уже обо всех наших организациях и энтерпрайз-пользователях. Сделать npm@5 быстрым было очевидной целью с огромными наградами. 25 | 26 | ## Он консистентный 27 | ### Лок-файл по умолчанию 28 | Shrinkwrap долгое время является частью npm, но npm@5 создаёт lockfiles по умолчанию, поэтому все установки npm-зависимостей теперь воспроизводятся. Файлы, которые вы получаете при установке данной версии пакета, будут одинаковыми при каждой его установке. 29 | 30 | Мы обнаружили, что бесчисленные общие и трудоемкие проблемы могут быть связаны с «дрейфом», возникающим, когда разные окружения разработчиков используют разные версии пакетов. С заблокированными файлами по умолчанию это уже не проблема. Вы больше не будете терять время, пытаясь выяснить ошибку, только чтобы узнать, что она исходит от людей, использующих разные версии библиотеки. 31 | 32 | ### Хэш SHA-512 33 | Npm@5 добавляет поддержку хеширования tarball(*tar-архивов*) любыми хэш-функциями, поддерживаемыми Node.js, и публикует с использованием хеша SHA-512. С проверкой целостности загруженных пакетов вы защищены от повреждения данных и вредоносных атак, и получаете гарантию, что код, загружаемый из реестра, консистентен и безопасен. 34 | 35 | ### Самовосстанавливающийся кэш 36 | Наше новое кэширование [дьявольски быстрое](https://twitter.com/maybekatz/status/865393382260056064), но также оно более устойчивое. Несколько процессов npm не смогут повредить общий кэш, а npm@5 проверит данные как при добавлении, так и при извлечении, чтобы предотвратить установку повреждённых данных. Если запись в кэш не прошла проверку целостности, npm@5 автоматически удалит их и загрузит повторно. 37 | 38 | ## Он проще в использовании 39 | Основываясь на ваших отзывах мы улучшили пользовательский опыт, сделав оптимизацию по всему npm@5. Большая часть этих улучшений - более информативный и полезный вывод. Лучшим примером является то, что npm больше не показывает вам все дерево при установке пакета: вместо этого вы увидите итоговый отчёт о том, что было установлено. Мы сделали это изменение из-за большого числа зависимостей в среднем пакете. Пошаговый вывод оказался довольно громоздким после превышения определённого количества файлов. 40 | 41 | ## Ты нужен ему 42 | Npm@5 - огромный шаг вперёд как для npm, так и для нашего удивительного сообщества, а сегодняшний релиз - только начало. Ряд улучшений в конвейере сделает использование npm гладким настолько, насколько это возможно, и быстрым, как никогда ранее. 43 | 44 | Но: npm существует ради своих пользователей, и наша цель — оставаться открытыми и гибкими, чтобы помочь людям создавать потрясающие вещи, поэтому мы зависим от ваших отзывов. 45 | 46 | Какие нововведения были вам полезны? Что нам следует улучшить дальше? Насколько быстрее стали ваши установки? Дайте нам знать. Не стесняйтесь [найти нас в Твиттере](https://twitter.com/npmjs), и, если у вас возникнут какие-либо проблемы, обязательно [напишите нам](mailto:support@npmjs.com). 47 | 48 | --- 49 | 50 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 51 | 52 | [Статья на Medium](https://medium.com/devschacht/npm-5-is-now-npm-latest-9ef037c9f5f5) 53 | -------------------------------------------------------------------------------- /articles/peter-chang-break-down-isomorphic-and-universal-boilerplate-react-redux-server-rendering/images/isomophic-react1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/peter-chang-break-down-isomorphic-and-universal-boilerplate-react-redux-server-rendering/images/isomophic-react1.jpeg -------------------------------------------------------------------------------- /articles/peter-chang-break-down-isomorphic-and-universal-boilerplate-react-redux-server-rendering/images/isomophic-react2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/peter-chang-break-down-isomorphic-and-universal-boilerplate-react-redux-server-rendering/images/isomophic-react2.jpeg -------------------------------------------------------------------------------- /articles/peter-chang-break-down-isomorphic-and-universal-boilerplate-react-redux-server-rendering/images/isomophic-react3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/peter-chang-break-down-isomorphic-and-universal-boilerplate-react-redux-server-rendering/images/isomophic-react3.jpeg -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/all.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/all.jpg -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/aug.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/aug.jpg -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/back-kick.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/back-kick.gif -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/back.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/back.png -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/cover.png -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/demo.gif -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/punching.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/punching.gif -------------------------------------------------------------------------------- /articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/roundhouse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/playing-mortal-kombat-with-tensorflowjs-transfer-learning-and-data-augmentation/images/roundhouse.png -------------------------------------------------------------------------------- /articles/rachel-andrew-refer-to-the-spec/README.md: -------------------------------------------------------------------------------- 1 | # Обратитесь к спецификации 2 | 3 | *Перевод вступительной заметки приглашённого эксперта Рабочей группы CSS [Rachel Andrew](http://twitter.com/rachelandrew) к серии [Refer to the spec](https://rachelandrew.co.uk/archives/2017/04/11/refer-to-the-spec/).* 4 | 5 | ![](./grid_draft.png) 6 | 7 | По мере того, как люди начинали работать с CSS раскладкой гридов, ко мне поступало все больше и больше вопросов. На большинство из них можно было легко ответить, едва взглянув в спецификацию. Прямо сейчас я наблюдаю несколько популярных статей и заметок в блогах, которые, очевидно, не основаны на чётком понимании спецификации, поскольку неверно интерпретируют функционал или делают предположения, не относящиеся к предмету объяснения. 8 | 9 | Почему мы не обращаемся к спецификации? Весь смысл браузеров, использующих «веб-стандарты», в том, что они будут следовать стандартной спецификации, которую мы, веб-разработчики, можем также использовать при создании сайтов. Идея проста: все работают по одному документу, мы разрабатываем по спецификации, они отрисовывают по ней, и все рано возвращаемся домой. Я понимаю, что реальная жизнь не всегда соответствует этой утопии, но поверьте старому веб-разработчику: сейчас все намного лучше, чем десять лет назад. 10 | 11 | Я знаю, спецификации CSS - не самое простое чтиво. Они всегда будут длинными и академичными, поскольку они предназначены для описания разработчикам браузеров того, как их движок должен отображать определенную функциональность, помимо объяснения того, как мы, веб-разработчики, должны использовать эту функциональность. Однако именно поэтому научиться читать спецификации настолько полезно. Если что-то ведёт себя иначе, чем вы ожидали, вы можете заглянуть в спецификацию и увидеть, каким инструкциям разработчики браузеров следовали при реализации этой функциональности. Это именно то, что вам нужно делать, если вы хотите начать сообщать об ошибках браузера, поскольку, если вы не знаете, *как* что-то должно работать, вы не можете знать, работает ли оно неправильно. 12 | 13 | Научиться читать спецификации также означает, что вы не будете всегда получать информацию, отфильтрованную «экспертами». И это говорю я - человек, которого часто называют таким экспертом, много лет преподававшим CSS. Если вы полностью полагаетесь на обучение по учебным пособиям, написанным другими людьми, то вы всегда получаете свои знания из вторых рук: тот материал, который был выбран за вас. Это, конечно же, полезно и экономит время, однако, навык обращения к спецификации и проверки упущений «экспертов» - ваш следующий большой шаг. 14 | 15 | Поэтому, чтобы показать вам, как читать спецификации, и потому что я устала проверять достоверность информации из третьих рук, я собираюсь начать в блоге серию заметок по [спецификации гридов](https://drafts.csswg.org/css-grid). Я объясню значение непривычной терминологии и буду ссылаться на ресурсы, демонстрирующие каждую часть спецификации. Следуя за мной, вы не только получите отличное понимание спецификации гридов, но и станете одним из тех людей, кто способен обратиться к непосредственному тексту спецификации, а ваша жизнь в качестве разработчика CSS станет намного проще. 16 | 17 | *В свою очередь devSchacht обязательно переведёт все заметки серии!* 18 | 19 | - - - - 20 | 21 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 22 | 23 | [Заметка на Medium](https://medium.com/devschacht/rachel-andrew-refer-to-the-spec-21630c105f3d) 24 | -------------------------------------------------------------------------------- /articles/rachel-andrew-refer-to-the-spec/grid_draft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/rachel-andrew-refer-to-the-spec/grid_draft.png -------------------------------------------------------------------------------- /articles/rachel-refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec/README.md: -------------------------------------------------------------------------------- 1 | # Обратитесь к спецификации: что её предваряет? 2 | 3 | *Перевод [заметки](https://rachelandrew.co.uk/archives/2017/04/24/refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec/) приглашённого эксперта Рабочей группы CSS [Rachel Andrew](http://twitter.com/rachelandrew) к серии [Refer to the spec](https://medium.com/devschacht/rachel-andrew-refer-to-the-spec-21630c105f3d).* 4 | 5 | ![](./grid_draft.png) 6 | 7 | Это первая заметка [серии](https://medium.com/devschacht/rachel-andrew-refer-to-the-spec-21630c105f3d), где мы рассматриваем спецификацию CSS раскладки гридов. Мы начнём с самого начала: со всего того, что предваряет спецификации CSS. 8 | 9 | Несмотря на то, что начало спецификации выглядит скучным формальным материалом, оно даёт вам массу полезной информации для старта. Например, информирует вас о статусе этой спецификации, чтобы вы могли оценить её стабильность, а также приводит ссылки на черновики и предыдущие версии. Начало закрепляет процесс участия в обсуждениях или поднятия проблемы. Давайте взглянем на некоторые ключевые фрагменты раздела, предваряющего спецификацию. 10 | 11 | ## Где спецификация? 12 | 13 | Вот последняя версия [спецификации CSS-гридов уровня 1](https://www.w3.org/TR/css-grid-1/). На момент написания этой статьи вышел кандидат в рекомендацию, опубликованный 9 февраля 2017 года. Вы можете найти ссылки на предыдущие версии спецификации под заголовком «Предыдущие версии» (*«Previous Versions»*). 14 | 15 | Вы также можете обратиться к находящейся в производстве версии любой спецификации. Это уведёт вас от текущей спецификации и приведёт в редакторский черновик - место, где редакторы спецификации вносят в неё изменения. В зависимости от степени зрелости спецификации различия между опубликованной версией и версией редакторского черновика могут варьироваться от небольших редакционных правок до крупных переписываний. 16 | 17 | Если вы думаете поднять проблему по какому-либо вопросу, то было бы хорошей идеей сначала взглянуть на актуальную версию редакторского черновика, чтобы убедиться, что её ещё не обсуждают/не обсуждали. 18 | 19 | ## Кто изменяет спецификацию? 20 | 21 | В каждой спецификации CSS есть редакторы. Спецификацией гридов занимаются Tab Atkins из Google, Elika J. Etemad / fantasai - приглашенный эксперт, и Rossen Atanassov из Microsoft. 22 | 23 | Хотя незначительные изменения опубликованной спецификации производятся без обязательного направления их в Рабочую группу CSS, существенные изменения и дополнения обсуждаются лично или на еженедельной конференц-связи по телефону. Это гарантирует, что охвачен максимально широкий спектр мнений. Как только консенсус достигнут, один из редакторов вносит изменения в спецификацию. 24 | 25 | Однако люди, не являющиеся редакторами спецификаций, также вносят изменения в них. В большинстве случаев они поднимают проблему, а редакторы вносят изменения. Но все спецификации лежат [на GitHub](https://github.com/w3c/csswg-drafts), поэтому в любой момент может появиться пулреквест с добавлением примера или исправлением ошибки. Редакторы просмотрят этот пулреквест, попросят внести в него изменения или, возможно, объединят его с собственными изменениями. Позднее в спецификации вы встретите [раздел с благодарностями](https://www.w3.org/TR/css-grid-1/#acks), где отражается информация о вкладе людей, не являющихся редакторами. 26 | 27 | Рабочая группа CSS осуществляет свою деятельность открыто. Если вы задаётесь вопросом, почему было принято то или иное решение, вы можете покопаться в архивах [www-style](https://lists.w3.org/Archives/Public/www-style/), где размещается протокол каждой личной встречи Рабочей группы или еженедельной связи по телефону. Если вы хотите прокомментировать спецификацию, комментируйте или создавайте *issue* на GitHub. Чтобы сделать это, вам не нужно быть членом Рабочей группы CSS: участие людей извне очень приветствуется. 28 | 29 | ## Краткое описание 30 | 31 | Под разделом документа «Краткое описание» (*«Abstract»*) вы найдете максимально обобщённое описание спецификации гридов и CSS в целом. Это очень краткий обзор для чего-то размером с Гриды! 32 | 33 | ## Каков текущий статус спецификации гридов? 34 | 35 | Раздел документа «Статус» (*«Status»*) ссылается на множество материалов о патентах и работе W3C, которые, вероятно, не очень интересны веб-разработчику. Однако он также включает информацию и о том, какое место текущий документ занимает в работе W3C. 36 | 37 | CSS раскладка гридов уровня 1 теперь является Кандидатом в рекомендацию (*CR*), о чем я [уже рассказывала](https://rachelandrew.co.uk/archives/2016/09/29/css-grid-layout-module-level-1-at-candidate-recommendation/) в своём блоге. Понимать статус спецификации очень полезно, потому что это даёт вам понимание, изменится технология, о которой вы читаете, или нет. 38 | 39 | В спецификацию гридов уровня 1 на нынешнем этапе могут быть внесены только незначительные изменения. И дело не только в том, что спецификация находится в статусе CR, но и в том, что у нас есть совместимые реализации с большей частью спецификации. Имплементации важны для любой спецификации: они свидетельствуют, что спецификация имеет смысл и может быть реализована в более чем одном браузере. 40 | 41 | ## Группа риска 42 | 43 | В спецификации есть раздел «С риском» (*at-risk*) - это требование для совместимых реализаций. Функциональность (*фича*) может быть вынесена из спецификации, чтобы позволить ей иметь две реализации. Это не означает, что фича отбрасывается навсегда или её обсуждение прекратилось. Если вы сравните версию спецификации от 9 февраля с текущим редакторским черновиком, вы увидите, что субгрид (*subgrid*), одна из фич c риском, [выведен из спецификации уровня 1](https://rachelandrew.co.uk/archives/2017/03/16/subgrid-moved-to-level-2-of-the-css-grid-specification/), однако эта функциональность обсуждалась на личной встрече и ожидает публикации в спецификации гридов уровня 2. 44 | 45 | ## Теперь вы знаете! 46 | 47 | Итак, теперь вы знаете, что предваряет спецификации CSS, и некоторые ключевые моменты, на которые стоит обращать внимание. В следующей заметке мы рассмотрим раздел «Введение» (*«Introduction»*) спецификации. 48 | 49 | - - - - 50 | 51 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 52 | 53 | [Заметка на Medium](https://medium.com/devschacht/rachel-refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec-3853fd3566d3) 54 | -------------------------------------------------------------------------------- /articles/rachel-refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec/grid_draft.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/rachel-refer-to-the-spec-what-is-all-that-stuff-at-the-top-of-the-spec/grid_draft.png -------------------------------------------------------------------------------- /articles/react-is-not-the-new-jquery/README.md: -------------------------------------------------------------------------------- 1 | # React — это не новый jQuery 2 | 3 | *Перевод статьи [Dmitri Grabov](https://twitter.com/dmitrigrabov): [React is not the new JQuery](https://medium.com/@dmitrigrabov/react-is-not-the-new-jQuery-e42a19f165f4).* 4 | 5 | ![](https://cdn-images-1.medium.com/max/1000/1*8dLOOJAWO2m2nJTZGd6SSQ.jpeg) 6 | Photo by [Mike Marquez](https://unsplash.com/photos/gOROUFiJ8qU?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/search/photos/shiny?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 7 | 8 | Это был тихий субботний день, когда я столкнулся с таким постом — [React is the New JQuery (React — это новый jQuery)](http://bradfrost.com/blog/link/replacing-jQuery-with-vue-js-no-build-step-necessary/). Я чувствовал, что было довольно много недоразумений, и подумал попытаться разрешить некоторые из поднятых в статье вопросов. 9 | 10 | Я считаю, что обсуждение инструментов с точки зрения их крутости — это пустая трата времени и сил. Каждый инструмент разработан как ответ на улучшение решения распространённых проблем. Когда мы решаем одну проблему, возникают новые, которые, в свою очередь, требуют иных инструментов. Сами инструменты не вызывают сложности, они являются реакцией на более сложную работу, которой мы пытаемся заниматься. 11 | 12 | Цель jQuery в основном заключалась в предоставлении единообразного способа решения проблем, связанными с кроссбраузерностью, а также обеспечить мощными инструментами управления DOM. Этот подход был основан на сервере, генерирующем HTML-страницу, а затем JS загружался на фронтенде для обработки взаимодействий пользователя. Вы можете создавать переключатели или любые компоненты для расширения возможностей браузера по умолчанию. Проблема с данным подходом заключается в том, что ваш пользовательский интерфейс заканчивается тем, что реализуется через клиент и сервер. Чаще всего это означает, что нам нужно два разработчика для реализации функциональных возможностей в двух местах — и на клиенте, и на сервере. Это занимает больше времени, больше общения и, скорее всего, приведёт к багам. 13 | 14 | Вместо того, чтобы думать о React как способе реализации компонентов, подумайте о React как о самом пользовательском интерфейсе. Мы можем собрать пользовательский интерфейс из повторно используемых компонентов, которые создаём по ходу работы над приложением. Мы можем выполнять код таким же образом на сервере, как мы это делаем на клиенте. Это означает, что у нас наконец есть возможность реализовать весь наш пользовательский интерфейс на одном языке программирования. Это не только экономит значительное количество времени, но мы теперь свободны от багов, возникающих из-за того, что какая-нибудь одна из функций реализована в двух местах. Любые обновления теперь могут быть сделаны одним человеком. 15 | 16 | React и Redux также приносят с собой ряд интересных идей, например как то, что пользовательский интерфейс является функцией состояния приложения. Мы больше не сохраняем состояние приложения в DOM, как это было бы с jQuery, поток состояния теперь изменился в обратную сторону. Состояние может находится в хранилище, а всем компонентам нужно сделать повторную отрисовку при каждом обновлении состояния. Хотя потребуется какое-то время, чтобы разобраться в этой концепции, но после этого ваш код станет легче для понимания. 17 | 18 | Теперь я хотел бы рассмотреть некоторые из поднятых вопросов. 19 | 20 | > Перепишите свою разметку на JSX. Обязательно замените атрибут `class` на `className`, иначе ничего не заработает. 21 | 22 | Причина в том, что JSX представляет собой JS-представление сегмента DOM, который выводит наш компонент. Мы не можем использовать `class`, потому что это зарезервированное ключевое слово в JavaScript, используемое для объявления классов, появившихся в ES6. `className` — неплохая альтернатива, поскольку это имя свойства, которое DOM-элементы используют для обозначения атрибута класса. 23 | 24 | > Встроенный атрибут `onClick`, добавляемый к вашему JSX, сопоставляется с функцией для обработки щелчка мыши. 25 | 26 | В то время как обработчики событий выглядят так, как будто они являются встроенными, это всего лишь синтаксис, используемый для их объявления. По факту они реализованы с использованием делегирования, таким образом React применяет один-единственный обработчик событий в корне приложения для обработки всех событий. В результате наше приложение будет по-прежнему эффективным и высокопроизводительным даже с большим количеством обработчиков событий. 27 | 28 | Одно сходство, которое React имеет с jQuery — это то, что они оба гарантируют одинаковую работоспособность событий во всех браузерах, что пытается сделать нашу жизнь немного легче. 29 | 30 | > Добавьте `this.handleClick = this.handleClick.bind(this);` в конструктор, чтобы вызов метода класса заработал. 31 | 32 | Контекстное разыменование — сложная тема и может подловить даже опытных разработчиков. Один из способов обойти эту проблему в React — использовать стрелочные функции, как описано в [этом ишью](https://github.com/facebook/react/issues/9851). 33 | 34 | > Это может быть только для меня, но React кажется сравнительно более сложным и неэлегантным. 35 | 36 | Это другой подход. Во многих случаях он будет лучше, но не всегда. Хотя может показаться, что его использование осложняет наше приложение, но на мой взгляд он на самом деле помогает нам справляться со сложностью, которая существует в больших приложениях. Я работал над приложениями, созданными с помощью React с более чем ста тысяч строк кода и на каждом шагу React был огромной помощью и играл важную роль. Некоторые проекты было бы сложно реализовать любым другим способом. 37 | 38 | React может быть сложным, поскольку предполагает не только смену подхода к разработке, но также требует глубокого понимания основ JavaScript. Если вас это интересует, я запускаю [учебную программу по JavaScript в Лондоне](http://constructorlabs.com/), которая охватывает именно эту тему. У нас ещё осталось несколько мест в нашей сентябрьской группе, и я хотел бы помочь вам справиться с изучением React, а также со всеми сопутствующими технологиями. 39 | 40 | > Примечание переводчика: а для всех тех, кто не живёт в Лондоне, но хочет изучить React на базовом уровне, предлагаю прочитать небольшую бесплатную книгу [«Путь к изучению React»](https://leanpub.com/the-road-to-learn-react-russian). Это перевод известной книги «The Road to learn React», которая переведена на четыре языка, а буквально недавно был закончен перевод на русский язык. Так что, если вы или кто-нибудь из вашего круга общения не знают React, но хотят его изучить, то эта книга будет отличным стартом для погружения в мир React! 41 | 42 | - - - - 43 | 44 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 45 | -------------------------------------------------------------------------------- /articles/sarah-dayan-how-to-handle-monetary-values-in-javascript/images/dinerojs.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/sarah-dayan-how-to-handle-monetary-values-in-javascript/images/dinerojs.png -------------------------------------------------------------------------------- /articles/sarah-dayan-how-to-handle-monetary-values-in-javascript/images/momentjs-locales.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/sarah-dayan-how-to-handle-monetary-values-in-javascript/images/momentjs-locales.png -------------------------------------------------------------------------------- /articles/sarah-drasner-render-function-h/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/sarah-drasner-render-function-h/images/logo.png -------------------------------------------------------------------------------- /articles/sarah-drasner-render-function-h/readme.md: -------------------------------------------------------------------------------- 1 | # Функция render() - что такое аргумент h 2 | 3 | ![logo](./images/logo.png) 4 | 5 | *Перевод статьи [Sarah Drasner](https://sarahdrasnerdesign.com/): [What does the ‘h’ stand for in Vue’s render method?](https://css-tricks.com/what-does-the-h-stand-for-in-vues-render-method/). Опубликовано с разрешения автора.* 6 | 7 | *** 8 | 9 | Если вы когда-либо работали с фреймворком [Vue.js](https://ru.vuejs.org/), то вам приходилось сталкиваться в файле `main.js` с подобным способом рендеринга приложения: 10 | 11 | ```js 12 | new Vue({ 13 | render: h => h(App) 14 | }).$mount('#app') 15 | ``` 16 | 17 | В последней версии консольной утилиты [vue-cli](https://github.com/vuejs/vue-cli) такой способ является способом по умолчанию. 18 | 19 | Другим возможным случаем, когда вам приходилось сталкиваться с функцией рендеринга `render()`, является использование синтаксического расширения [JSX](https://jsx.github.io/) в локальном компоненте Vue-приложения: 20 | 21 | ```js 22 | Vue.component('jsx-example', { 23 | render (h) { 24 | return
bar
25 | } 26 | }) 27 | ``` 28 | 29 | В обоих случаях у вас мог возникнуть вопрос - что такое `h` и для чего оно предназначено? 30 | 31 | Если кратко - `h` является сокращением от **hyperscript**. Это название является (в свою очередь) сокращением для [Hypertext Markup Language](https://ru.wikipedia.org/wiki/HTML). Такое имя используется потому, что при работе с Vue-приложением мы фактически имеем дело со скриптом, результатом работы которого является виртуальное DOM-дерево. Использование подобного сокращения также встречается в официальной документации других JavaScript-фреймворков. Например, в документации [Cycle.js](https://cycle.js.org/) есть определение `h` - [The hyperscript function h()](https://cycle.js.org/api/dom.html#api-h). 32 | 33 | Из [официальной документации Vue.js](https://ru.vuejs.org/v2/guide/render-function.html#JSX): 34 | 35 | > Сокращение createElement до h — распространённое соглашение в экосистеме Vue и обязательное для использования JSX. В случае отсутствия h в области видимости, приложение выбросит ошибку. 36 | 37 | В [одном из ишью](https://github.com/vuejs/babel-plugin-transform-vue-jsx/issues/6) создатель фреймворка Vue.js Эван Ю ([Evan You](https://twitter.com/youyuxi)) так объясняет, что такое `h`: 38 | 39 | > Термин hyperscript можно объяснить так - это "скрипт, который генерирует HTML-структуру" 40 | 41 | Сокращение `h` используется при написании кода - так быстрее и легче. Более подробно это сокращение также объясняется Эваном в [Advanced Vue Workshop](https://frontendmasters.com/courses/advanced-vue/render-function-api/) - курсов для фронтенд-разработчиков [Frontend Masters](https://frontendmasters.com/). 42 | 43 | Про сокращение `h` можно думать как о более краткой форме функции `createElement`. Например, полная форма функции `createElement` представлена ниже: 44 | 45 | ```js 46 | render: function (createElement) { 47 | return createElement(App); 48 | } 49 | ``` 50 | 51 | Если заменить `createElement` на `h`, то получим более сокращенный вариант этой функции: 52 | 53 | ```js 54 | render: function (h) { 55 | return h(App); 56 | } 57 | ``` 58 | 59 | ... который можно сократить еще больше при помощи возможностей ES6: 60 | 61 | ```js 62 | render: h => h (App) 63 | ``` 64 | 65 | Vue-версия функции `render()` принимает три аргумента: 66 | 67 | ```js 68 | render(h) { 69 | return h('div', {}, [...]) 70 | } 71 | ``` 72 | 73 | * первый аргумент - это тип элемента (в примере представлен `div`); 74 | * второй аргумент - это объект данных (здесь можно передать свойства, атрибуты, классы или стили); 75 | * третий аргумент - это массив дочерних Node-узлов; здесь можно размещать вложенные вызовы функции `createElement` и вернуть обратно дерево виртуальных DOM-узлов; 76 | 77 | Термин **hyperscript** может вводить в заблуждение в некоторых случаях, так как это имя JavaScript-библиотеки [hyperscript](https://github.com/hyperhype/hyperscript), у которой есть одноименная [экосистема](https://github.com/hyperhype/hyperscript#ecosystem). В нашем конкретном случае речь не идет об этих сущностях. 78 | 79 | Надеюсь, статья оказалась полезной для тех читателей, которые задавались подобным вопросом. 80 | -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/logo.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/logo.jpeg -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-01.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-02.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-04.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-05.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-05.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-06.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-06.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-07.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-07.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-08.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-08.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-09.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-09.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-10.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-11.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-12.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-13.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-14.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-15.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-16.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-17.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-18.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-19.png -------------------------------------------------------------------------------- /articles/stephane-pericat-vue-ui-first-look/images/vue-ui-20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/stephane-pericat-vue-ui-first-look/images/vue-ui-20.png -------------------------------------------------------------------------------- /articles/tal-kol-redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps/images/cycle.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/tal-kol-redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps/images/cycle.jpg -------------------------------------------------------------------------------- /articles/tal-kol-redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps/images/cycle2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/tal-kol-redux-step-by-step-a-simple-and-robust-workflow-for-real-life-apps/images/cycle2.jpg -------------------------------------------------------------------------------- /articles/the-most-important-skill-a-programmer-can-learn/images/chart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/the-most-important-skill-a-programmer-can-learn/images/chart.png -------------------------------------------------------------------------------- /articles/the-most-important-skill-a-programmer-can-learn/images/no.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/the-most-important-skill-a-programmer-can-learn/images/no.jpeg -------------------------------------------------------------------------------- /articles/todd-motto-classes-vs-interfaces-in-typescript/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/todd-motto-classes-vs-interfaces-in-typescript/images/logo.png -------------------------------------------------------------------------------- /articles/tom-harding-curry-on-wayward-son/README.md: -------------------------------------------------------------------------------- 1 | # Каррируй, мой блудный сын 2 | 3 | *Перевод статьи [Tom Harding](http://www.tomharding.me): [Curry On Wayward Son](http://www.tomharding.me/2016/11/12/curry-on-wayward-son/). Опубликовано с разрешения автора.* 4 | 5 | Каррирование - в настоящий момент **острая** тема в функциональном JavaScript сообществе. Если вы использовали библиотеки, такие как [Ramda](http://ramdajs.com/), возможно, вы сталкивались с ним. В любом случае, я поясню, чтобы все понимали. 6 | 7 | Функции в таких языках как [Haskell](https://www.haskell.org/) или [Elm](http://elm-lang.org/) **принимают одно значение и возвращают одно значение**, нравится вам это или нет. Если мы хотим два аргумента, мы пишем функцию, которая *возвращает* функцию (потому что функции тоже значения!) и передаём их: 8 | 9 | ```js 10 | const add = x => y => x + y // ES6 11 | ``` 12 | 13 | И так, для сложения `2` и `3`, мы пишем `add(2)(3)`. *Каррирование* функции означает превращение её из обычной записи (`(x, y) => x + y`) в такую. Вскоре мы увидим, что большинство из наших любимых реализаций `curry` больше похожи на `curryish`… 14 | 15 | ## Есть ли в этом смысл? 16 | 17 | Да! Очевидно, писать `add(2)(3)` некрасиво - и мы это исправим позже, - но эта возможность *не*передавать все аргументы сразу ещё пригодится. 18 | 19 | Подумайте об этом: `add(2)` вернёт функцию, принимающая значение и прибавляющая к нему `2`. Почему мы должны передавать второй аргумент сразу же? Мы можем делать различные вещи: 20 | 21 | ```js 22 | // 1, 2, 3, 4, 5 - Oooooo 23 | [-1, 0, 1, 2, 3].map(add(2)) 24 | ``` 25 | 26 | Когда мы используем функции, не имеющие все их аргументы сразу же, мы называем это **частичное применение**. На практике, что мы делаем - это берём общую функцию (`add`) и *специализируем* её с помощью аргументов. 27 | 28 | А вот немного более полезный (хотя ещё очень надуманный) пример того, как можно обернуть `String.replace`, чтоб сделать более гибким: 29 | 30 | ```js 31 | const replace = from => to => str => 32 | str.replace(from, to) 33 | 34 | const withName = replace(/\{NAME\}/) 35 | const withTom = withName('Tom') 36 | const withTrump = withName('tiny hands') 37 | 38 | const stripVowels = replace(/[aeiou]/g)('') 39 | 40 | withTom('Hello, {NAME}!') // Hello, Tom! 41 | withTrump('Hello, {NAME}!') // Hello, tiny hands! 42 | 43 | stripVowels('hello') // hll 44 | 45 | // ['hll', 'wmbldn'] 46 | ['hello', 'wimbledon'].map(stripVowels) 47 | ``` 48 | 49 | Я не знаю как вы, но я думаю, что это *реально* впечатляет: мы взяли функцию и использовали частичное применение для специализации её различными путями. Вместо того, чтобы писать полностью новую функцию замены для каждого случая, мы просто частично применили некоторые её аргументы! **Так** жарко сейчас. 50 | 51 | Это сила присущая частичному применению: мы можем написать очень общие функции и специализировать их для различных целей. Это позволяет значительно сократить шаблонный код и выглядит очень красиво. 52 | 53 | ## Но это *ужасно* 54 | 55 | Да, немного некрасиво, когда вы видите такой вызов `replace(/a/)('e')(str)` (все эти скобочки!) в отличии от `replace(/a/, 'e', str)`, *но* мы не хотим быть вынуждены писать все аргументы сразу. 56 | 57 | Что мы *действительно* любим, так это писать эти аргументы группируя как нам надо: 58 | 59 | ```js 60 | replace(/a/)('e')(str) 61 | == replace(/a/, 'e')(str) 62 | == replace(/a/)('e', str) 63 | == replace(/a/, 'e', str) 64 | ``` 65 | 66 | И так, заметили, у нас нет **не каррированной** функции - мы просто говорим, что, если мы передаём больше, чем один аргумент, мы хотим, чтоб они применились одновременно. Технически, мы **немножко убираем каррирование**. Это значит, мы можем, создать соответствующую функцию: 67 | 68 | ```js 69 | const uncurryish = f => { 70 | if (typeof f !== 'function') 71 | return f // Needn't curry! 72 | 73 | return (... xs) => uncurryish( 74 | xs.reduce((f, x) => f (x), f) 75 | ) 76 | } 77 | ``` 78 | 79 | Может, немного коряво, но суть такова: 80 | 81 | - Все значения, не являющиеся функциями, будут возвращаться целыми и невредимыми. 82 | - Функции обёрнуты в функцию, которая принимает один или несколько аргументов, применяет их по одному, затем возвращает результат в `uncurryish`. 83 | 84 | Это всё ужасная **рекурсия** опять! Если вы определите функции `replace` и `uncurryish` как раньше, вы увидите всё работает. Ура! 85 | 86 | ## Подожди, `uncurry`? Я хотел `curry`! 87 | 88 | Ну, нет, это не `uncurry` (он просто выглядит немного похоже, но я понял вас). Когда вы используете что-то типа [Ramda](http://ramdajs.com/docs/#curry) `curry`, они означают `curryish`. Единственное реальное различие между `curryish` и `uncurryish` это то, что `curryish` начинает с «нормальной» функции (например `(x, y) => x + y`), а `uncurryish` начинает с функции как в этой статье. Конечный результат одинаковый, также `uncurryish` имеет [реализацию **гораздо** проще](https://github.com/ramda/ramda/blob/v0.22.1/src/internal/_curryN.js)\*… Используете ли вы одно или другое полностью зависит от вас! 89 | 90 | В любом случае, я надеюсь, это прольёт свет. Я думал, что это может быть проще начать с `uncurry`, а потом изменять его, пока он не будет соответствовать `curry`, к которому мы привыкли. Все, что вам нужно знать, это то что `curry` и `uncurryish` достигают одного результата: они собирают аргументы функции пока не наберут нужное количество для её запуска и потом возвращают результат функции. 91 | 92 | Это действительно отличный трюк и вы можете проделать **невероятный** рефакторинг. Конечно, если что-то не так, напишите мне [tweet](https://twitter.com/am_i_tom) или ещё что, и я постараюсь, прояснить! 93 | 94 | Большое спасибо за чтение! 95 | 96 | Берегите себя ♥ 97 | 98 | \* *Не совсем справедливо - Ramda делает некоторые другие вещи, такие как заполнители, но это определенно сложнее из-за необходимости отслеживать «состояние» аргумента явно.* 99 | 100 | - - - - 101 | 102 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 103 | 104 | [Статья на Medium](https://medium.com/devschacht/tom-harding-curry-on-wayward-son-293d1c4f455f) 105 | -------------------------------------------------------------------------------- /articles/tom-harding-peanos-forte/README.md: -------------------------------------------------------------------------------- 1 | # Форте Пеано 2 | 3 | *Перевод статьи [Tom Harding](http://www.tomharding.me): [Peano's Forte](http://www.tomharding.me/2016/10/29/peano-forte/). Опубликовано с разрешения автора.* 4 | 5 | Сто лет назад, за долго до Покемонов и [Slap Chop](https://www.youtube.com/watch?v=rUbWjIKxrrs), жил умный парень по имени [Джузеппе Пеано](https://ru.wikipedia.org/wiki/Пеано,_Джузеппе), придумавший изящный способ описать натуральные числа (`0, 1, 2, 3, ...`): 6 | 7 | Первое — `0`, которое мы будем писать как `Z`. 8 | 9 | Число после любого `x`, его **наследник**, `S x`. 10 | 11 | Используя эти два правила, мы можем записать каждое число в этой последовательности: 12 | 13 | | Обычное | Пеано | 14 | | --- | --- | 15 | | 0 | Z | 16 | | 1 | S Z | 17 | | 2 | S (S Z) | 18 | | 3 | S (S (S Z)) | 19 | | . . . | . . . | 20 | 21 | Может быть, не самая красивая запись, но, мне кажется, довольно неплохо выглядит. Число или `Z`, или `S` другого числа, которое или `Z`, или `S` другого числа, которое… ну, вы поняли! Назовём это **рекурсивное определение**. 22 | 23 | Благодаря этому, мы можем определить функции чисел Пеано, используя рекурсию! Вот функция для проверки эквивалентности: 24 | 25 | | A | B | A == B | 26 | | --- | --- | --- | 27 | | Z | Z | true | 28 | | S x | Z | false | 29 | | Z | S y | false | 30 | | S x | S y | x == y | 31 | 32 | Правило **3** может показаться дублем **2**, но мы должны определить оба, как в случае, когда порядок аргументов важен (например, с вычитанием: `2 - 3` не тоже самое, что `3 - 2`). 33 | 34 | Правило **4** — кусочек рекурсивной магии: если `x` и `y` всё ещё наследники, мы проверяем правило **4** ещё раз, и мы продолжаем делать это, пока одно из других трёх условий не удовлетворим. Мы можем записать процесс определения `2 == 3` с нашими числами Пеано: 35 | 36 | ``` 37 | (S (S Z)) == (S (S (S Z))) 38 | => (S Z) == (S (S Z)) -- By rule 4 39 | => Z == (S Z) -- By rule 4 40 | => false -- By rule 2 41 | ``` 42 | 43 | Множество скобок, но, надеюсь, достаточно ясно, чтобы понять, что происходит: пока оба аргумента являются наследниками, мы убираем одну `S` на каждом шаге, пока не останется одна `Z`. Если с другой стороны тоже `Z` в то же самое время, тогда два числа равны! О, да. 44 | 45 | Определить сложение тоже довольно просто: 46 | 47 | | A | B | A + B | 48 | | --- | --- | --- | 49 | | Z | Z | Z | 50 | | S x | Z | S x | 51 | | Z | S y | S y | 52 | | S x | S y | S (S (x + y)) | 53 | 54 | правила **1**, **2** и **3** определяют наши *базовые сценарии*: прибавляя `Z` к любому значению, получаем то же самое значение. Правило **4**, конечно же, там мы определяем нашу рекурсию. Давайте посмотрим на пример с `3 + 2`. Мы будем использовать квадратные скобки для наглядности, но будем думать о них, как об обычных скобках: 55 | 56 | ``` 57 | (S (S (S Z))) + (S (S Z)) 58 | => S (S [(S (S Z)) + (S Z)]) -- By rule 3 59 | => S (S (S (S [(S Z) + Z]))) -- By rule 3 60 | => S (S (S (S (S Z)))) -- By rule 1 61 | ``` 62 | 63 | Получилось! Ещё один пример, который стоит упомянуть, прежде чем мы перейдём к конвертации наших Пеано чисел обратно в целые числа, которые мы знаем и любим: 64 | 65 | | A | toInt A | 66 | | --- | --- | 67 | | Z | 0 | 68 | | S x | 1 + toInt x | 69 | 70 | Нам нужен всего один аргумент для этого, так что функция очень простая. Ура! Вот эта функция работает с числом `3`: 71 | 72 | ``` 73 | toInt (S (S (S Z))) 74 | => 1 + toInt (S (S Z)) -- By rule 2 75 | => 1 + 1 + toInt (S Z) -- By rule 2 76 | => 1 + 1 + 1 + toInt Z -- By rule 2 77 | => 1 + 1 + 1 + 0 -- By rule 1 78 | => 3 -- By addition 79 | ``` 80 | 81 | Итак, это может быть не самый крутой пример, но мы рассмотрели некоторые важные вещи: 82 | 83 | - Мы можем использовать **рекурсию** для написания простых функций, которые могут вызывать себя, чтобы разобраться с каждым «шагом» проблемы. 84 | 85 | - Мы можем использовать **индукцию** чтобы показать, что если функция работает для `Z` (или другого базового случая) и `S x`, она может работать для *любого* числа Пеано! 86 | 87 | - Выполнение функции — просто подмена одного на другое! Функции не должны *делать* ничего - они должны менять входные данные на выходящие. 88 | 89 | Это всё от меня на сегодня! Если вы хотите потренироваться, вы можете использовать [try.purescript.org gist](http://try.purescript.org/?gist=d2be4384a7b4cc6283be5097df12c63c), чтобы поиграться с кодом. В противном случае, я надеюсь, было хоть немного интересно, и я ещё поговорю с тобой позже! 90 | 91 | Берегите себя ♥ 92 | 93 | - - - - 94 | 95 | *Слушайте наш подкаст в [iTunes](https://itunes.apple.com/ru/podcast/девшахта/id1226773343) и [SoundCloud](https://soundcloud.com/devschacht), читайте нас на [Medium](https://medium.com/devschacht), контрибьютьте на [GitHub](https://github.com/devSchacht), общайтесь в [группе Telegram](https://t.me/devSchacht), следите в [Twitter](https://twitter.com/DevSchacht) и [канале Telegram](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht).* 96 | 97 | [Статья на Medium](https://medium.com/p/форте-пеано-8ad7190b4ae9) 98 | -------------------------------------------------------------------------------- /articles/top-6-ways-to-make-your-elm-app-crash-at-runtime/background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/devSchacht/translations/0402760d2c263ff06e78de1a470d5e7ed7b76034/articles/top-6-ways-to-make-your-elm-app-crash-at-runtime/background.jpg -------------------------------------------------------------------------------- /articles/using-mixins-in-vuejs/readme.md: -------------------------------------------------------------------------------- 1 | # Используем миксины во Vue.js 2 | 3 | *Перевод статьи [Sarah Drasner](https://css-tricks.com/author/sdrasner/): [Using Mixins in Vue.js](https://css-tricks.com/using-mixins-vue-js/)* 4 | 5 | ![](https://cdn-images-1.medium.com/max/1000/1*JAbXlOdwiVhwfXla9zE7Nw.png) 6 | 7 | Как это обычно бывает: у нас есть два во многом похожих компонента, имеющих одинаковую базовую функциональность, но достаточно появления минимального отличия, чтобы встал вопрос, делать два разных компонента или же сделать один компонент, меняя необходимые параметры через `props`? 8 | 9 | Ни одно из решений не является идеальным: если вы примете решение разделить на два компонента, то рискуете обновлять его в двух местах в случае изменения логики в будущем. К тому же это решение нарушит принцип DRY (не повторяйся). 10 | 11 | С другой стороны, слишком много `props` приведёт к тому, что даже автор кода без погружения в контекст не поймет, как это работает. 12 | 13 | Познакомьтесь с миксинами. Миксины (*mixins* или примеси) во Vue.js полезны для написания кода в функциональном стиле, потому что, в конечном итоге, функциональное программирование - это создание понятного кода за счёт сокращения изменяемых частей. Миксины позволяют вам инкапсулировать одну функциональность, чтобы вы могли использовать её в разных компонентах. Если миксины написаны правильно, то они не изменяют ничего вне своей области действия: вы всегда будете получать одинаковую логику в разных местах использования. Это и правда очень удобно. 14 | 15 | ## Базовый пример 16 | 17 | Допустим у нас есть два различных компонента, задача которых заключается в переключении видимости: модальное окно и тултип. 18 | 19 | Эти компоненты не имеют между собой ничего общего кроме одинаковой логики: 20 | 21 | ![](https://cdn-images-1.medium.com/max/1000/1*B3Mbc8-x1GxwtxDg5XcLIQ.png) 22 | 23 | Мы могли бы извлечь логику и создать миксин, который можно использовать повторно: 24 | 25 | ![](https://cdn-images-1.medium.com/max/1000/1*m0SoV-mwTg_LMHmr50HPZQ.png) 26 | 27 | https://codepen.io/sdras/pen/101a5d737b31591e5801c60b666013db 28 | 29 | Разумеется, использование миксинов применимо к куда большему количеству ситуаций. Этот пример намеренно сделан простым и компактным для удобства чтения. 30 | 31 | ## Использование 32 | 33 | Предыдущий пример не показывает как использовать миксины в реальном приложении, поэтому давайте посмотрим на следующий. 34 | 35 | Вы можете настроить структуру проекта любым удобным для вас способом, я же создаю папку `mixins`, чтобы всё было организованно. 36 | 37 | Файл имеет расширение `.js` в отличие от наших обычных `.vue` компонентов. Экспортируем наш миксин: 38 | 39 | ![](https://cdn-images-1.medium.com/max/1000/1*lCXeQ51slInBPiDfi4pYrg.png) 40 | 41 | Затем импортируем его в `modal.vuе` вот так: 42 | 43 | ![](https://cdn-images-1.medium.com/max/800/1*MyYBEm3-9lYnZx8aPnqXow.png) 44 | 45 | Важно понимать, что несмотря на то, что мы используем объект, а не компонент, хуки жизненного цикла всё ещё доступны для нас. 46 | 47 | ## Слияние 48 | 49 | Рассматривая последний пример, мы можем увидеть, что у нас есть не только логика, но и хуки жизненного цикла, доступные нам из миксина. 50 | 51 | Другой вопрос, а как поведут себя хуки при наложении, то есть если мы создадим хук `created` в миксине и в компоненте? 52 | 53 | По умолчанию, сначала применяются методы и хуки из миксина, затем из компонента, это сделано для того чтобы при необходимости мы могли переопределить логику миксина. 54 | 55 | Это действительно имеет значение: когда возникает конфликт, за компонентом последнее слово. 56 | 57 | ![](https://cdn-images-1.medium.com/max/800/1*YE4ijLZrLiCjGvuVA3GA3w.png) 58 | 59 | При конфликте, мы увидим, кто победит: 60 | 61 | ![](https://cdn-images-1.medium.com/max/800/1*dsgKb0WoTCPwAbpBvokcqQ.png) 62 | 63 | Вы могли заметить, что у нас два вывода `console.log` для экземпляра Vue вместо одного, это потому что первый вызванный метод не был уничтожен: он был переопределен. Мы все ещё вызываем метод `sayHello()`. 64 | 65 | ## Глобальные миксины 66 | 67 | Когда мы используем слово «Глобальные» в отношении миксинов, мы не имеем ввиду возможность доступа к ним в каждом компоненте, ведь мы уже можем получить к ним доступ, импортируя там, где нужно. 68 | 69 | Глобальные миксины буквально применяются к каждому компоненту, по этой причине использовать их нужно с осторожностью. 70 | 71 | Использование, которое я могу предположить, это что-то вроде плагина, где вам может понадобится доступ ко всем компонентам. Но опять же, даже в этом случае я был бы очень осторожен, особенно когда вы расширяете логику для приложений, которые писали не вы. 72 | 73 | Чтобы создать глобальный миксин, нужно разместить его над Vue экземпляром. В обычной vue-cli сборке это будет в файле `main.js`. 74 | 75 | ![](https://cdn-images-1.medium.com/max/1000/1*XzMhbRqDkIbQ2-N_HwYA1Q.png) 76 | 77 | Используйте с осторожностью! Теперь `console.log` появится в каждом компоненте, в этом случае это не так плохо, за исключением кучи визуального мусора в консоли, зато вы можете увидеть насколько потенциально опасно это может быть. 78 | 79 | ## Заключение 80 | 81 | Миксины могут быть полезны для инкапсуляции различной небольшой логики, которую вы хотите повторно использовать. 82 | 83 | Это не единственный вариант для решения проблемы, однако мне нравятся миксины потому что можно абстрагироваться от данных, чего например не получится в случае с `props`. 84 | 85 | Однако решение нужно применять в зависимости от ситуации, что наиболее логично подходит в контексте вашей задачи. 86 | - - - 87 | 88 | *Читайте нас на [Медиуме](https://medium.com/devschacht), контрибьютьте на [Гитхабе](https://github.com/devSchacht), общайтесь в [группе Телеграма](https://t.me/devSchacht), следите в [Твиттере](https://twitter.com/DevSchacht) и [канале Телеграма](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht) 89 | 90 | [Статья на Medium]() 91 | -------------------------------------------------------------------------------- /articles/using-the-chrome-devtools-new-code-coverage-feature/readme.md: -------------------------------------------------------------------------------- 1 | # Использование code coverage – нового инструмента Chrome DevTools. 2 | 3 | *Перевод заметки [Ben Edelstein](https://blog.logrocket.com/@edelstein): [Using the Chrome devtools new code coverage feature](https://blog.logrocket.com/using-the-chrome-devtools-new-code-coverage-feature-ca96c3dddcaf)* 4 | 5 | Code coverage (инструмент анализа покрытия кода) наконец-то вышел из стадии экспериментов и уже появился в [Chrome Canary](https://www.google.com/chrome/browser/canary.html) и скоро будет доступен для всех. Это интересный инструмент, который пригодится как при работе с JavaScript, так и с CSS, поэтому я решил сделать быстрое демо и изучить, какую он может принести пользу. 6 | 7 | ## Для чего он предназначен? 8 | Code coverage запускает ваше веб-приложение и даёт возможно увидеть для каждого JS/CSS файла, какие строки кода выполнялись, а какие нет. 9 | 10 | ![](https://cdn-images-1.medium.com/max/800/1*gD8lX40PSemDOZgvT695Mg.png) 11 | 12 | Здесь я запустил простую статическую веб-страницу, и Chrome создал эту разбивку файлов CSS и JS, которые на ней подключались. Полосы справа показывают относительный размер каждого файла, красный – неиспользованный код, а зеленый – код, который запускался. 13 | 14 | Запись code coverage работает аналогично таймлайнам devtools – вы нажимаете кнопку записи, а затем взаимодействуете с вашим сайтом в обычном режиме. Как только вы закончите, Chrome выполнит некоторые вычисления и сгенерирует данные. Здесь мне было интересно, сколько неиспользованных CSS было на сайте, поэтому я перешёл на различные подстраницы, чтобы убедиться, что я попал в каждую "ветку кода" CSS. Конечно же, здесь есть много возможностей для улучшения, так как 97% css на моем сайте не использовались! 15 | 16 | ![](https://cdn-images-1.medium.com/max/800/1*1SUTeKlhRee3MyKdxkUGtQ.png) 17 | 18 | Chrome также позволяет вам подробно изучить покрытие кода отдельных файлов. Здесь красные и зелёные полосы слева показывают, какие конкретно строки исполнялись, а какие нет. Обратите внимание, что при проверке минифицированных файлов вы можете нажать кнопку в нижнем левом углу файла, чтобы развернуть ваш код в удобночитаемый вид. 19 | 20 | ## Почему это полезно? 21 | При работе над сложным или долгосрочным проектом легко накапливается мертвый код. Если вы используете webpack или другую систему сборки JS, есть инструменты для предотвращения попадания мёртвого JS кода в продакшен. Но для CSS сделать это несколько сложнее. Наличие инструмента анализа покрытия кода в Chrome – отличный способ получить краткий обзор того, сколько лишнего кода вы отправляете в продакшен, и какие файлы стоит оптимизировать. 22 | 23 | ## Как его получить? 24 | Загрузите [Chrome Canary](https://www.google.com/chrome/browser/canary.html) или подождите несколько недель, пока он появится в обычном Chrome. 25 | 26 | ## Стоит почитать 27 | - Более полезные (и менее известные) инструменты в Chrome devtools: [https://blog.logrocket.com/making-the-most-of-the-chrome-developer-tools-8cac9a206979](https://blog.logrocket.com/making-the-most-of-the-chrome-developer-tools-8cac9a206979) 28 | 29 | - Визуализация производительности бэкенда в Chrome devtools: https://blog.logrocket.com/visualizing-backend-performance-in-the-chrome-devtools-bb6fd232540 30 | 31 | *Примечание переводчика: для тех, кто не может найти этот новый инструмент в Chrome devtools, я в свою очередь подготовил небольшое демо.* 32 | 33 | ![](https://cdn-images-1.medium.com/max/1440/1*Sh5v8Fsi21CTzuQ3eHRg4A.gif) 34 | 35 | - - - - 36 | 37 | *Читайте нас на [Медиуме](https://medium.com/devschacht), контрибьютьте на [Гитхабе](https://github.com/devSchacht), общайтесь в [группе Телеграма](https://t.me/devSchacht), следите в [Твиттере](https://twitter.com/DevSchacht) и [канале Телеграма](https://t.me/devSchachtChannel), рекомендуйте в [VK](https://vk.com/devschacht) и [Facebook](https://www.facebook.com/devSchacht). Скоро подъедет подкаст, не теряйтесь.* 38 | 39 | [Статья на Medium](https://medium.com/devschacht/using-the-chrome-devtools-new-code-coverage-feature-6535bc26c97b) 40 | -------------------------------------------------------------------------------- /articles/using-vue-template-loader-with-vuejs-to-compile-html-templates/README.md: -------------------------------------------------------------------------------- 1 | # Использование vue-template-loader с Vue.js для компиляции шаблонов HTML 2 | 3 | *Перевод статьи [Akanksha Sharma](https://github.com/Akanksha-26): [Using vue-template-loader with Vue.js to Compile HTML Templates](https://alligator.io/vuejs/vue-template-loader/).* 4 | 5 | > Большинство людей, знакомых с Angular 2+, знают, что для компиляции HTML-шаблонов просто нужно добавить URL-адрес шаблона в TypeScript-файл компонента и дело с концом. В случае Vue рекомендуется использовать теги `