├── .github ├── CONTRIBUTING.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── AI.md ├── CODE_OF_CONDUCT.md ├── README.md ├── TODO ├── 10-best-reactjs-ui-frameworks-for-rapid-prototyping.md ├── 10-steps-to-better-hybrid-apps.md ├── 10-things-you-probably-didnt-know-about-javascript-react-and-nodejs-and-graphql-development-at-facebook.md ├── 101-ways-to-make-your-website-more-awesome.md ├── 11-things-i-learned-reading-the-flexbox-spec.md ├── 11-top-designers-give-11-pieces-of-realistic-ux-advice.md ├── 12-best-practices-for-user-account.md ├── 14-must-knows-for-an-ios-developer.md ├── 17-xcode-tips-and-tricks-that-every-ios-developer-should-know.md ├── 19-things-i-learnt-reading-the-nodejs-docs.md ├── 2018-design-trends.md ├── 25-core-data-in-ios10-nspersistentcontainer.md ├── 3-new-css-features-to-learn-in-2017.md ├── 39-open-source-swift-ui-libraries-for-ios-app-development.md ├── 3d-force-touch-beyond-peek-pop.md ├── 4-must-know-tips-for-building-cross-platform-electron-apps.md ├── 5-not-so-obvious-things-about-rxjava.md ├── 5-step-life-cycle-neural-network-models-keras.md ├── 6-practical-skills-for-ux-designers.md ├── 8-key-react-component-decisions.md ├── Android-Studio-Tips.md ├── Breaking-Swift-with-reference-counted-structs.md ├── Cocoa-Architecture-Dropped-Design-Patterns.md ├── Dependency-Injection-with-Dagger-2.md ├── Eight-Ways-Your-Android-App-Can-Leak-Memory.md ├── GoogleCloudFunctions │ ├── calling-cloud-functions.md │ ├── catlog.md │ ├── command-reference.md │ ├── deploying-cloud-functions.md │ ├── getting-started.md │ ├── quick-starts.md │ ├── walkthroughs.md │ └── writing-cloud-functions.md ├── How-to-hideshow-Toolbar-when-list-is-scroling.md ├── Introducing-Swift 3.0.md ├── OAuth2 Authentication with Lua.md ├── Of SVG, Minification and Gzip ├── Optimization-killers.md ├── OptimizationTips.rst ├── Overview-of-JavaScript-ES6-features-a-k-a-ECMAScript-6-and-ES2015.md ├── PHP-7-Virtual-machine.md ├── Testing-Schemes.md ├── Top-5-Android-libraries-every-Android-developer-should-know-about.md ├── Under-the-hood-ReactJS.md ├── Understanding-code-signing-for-iOS-apps.md ├── Unit-tests-with-Mockito.md ├── Using-Flutter-in-China.md ├── What-would-be-your-advice-to-a-software-engineer-who-wants-to-learn-machine-learning.md ├── Yarn-A-new-package-manager-for-JavaScript.md ├── a-5-minute-intro-to-styled-components.md ├── a-beginners-guide-to-making-progressive-web-apps.md ├── a-beginners-guide-to-website-optimization.md ├── a-better-underline-for-android.md ├── a-blurring-view-for-android.md ├── a-cartoon-intro-to-webassembly.md ├── a-case-for-using-storyboards-on-ios.md ├── a-crash-course-in-assembly.md ├── a-crash-course-in-just-in-time-jit-compilers.md ├── a-day-without-javascript.md ├── a-detailed-guide-on-developing-android-apps-using-the-clean-architecture-pattern.md ├── a-dramatic-tour-through-pythons-data-visualization-landscape-including-ggplot-and-altair.md ├── a-fairer-vue-of-react-comparing-react-to-vue-for-dynamic-tabular-data-part-2.md ├── a-first-walk-into-kotlin-coroutines-on-android.md ├── a-follow-up-on-how-to-store-tokens-securely-in-android.md ├── a-functional-programmers-introduction-to-javascript-composing-software.md ├── a-gentle-introduction-to-self-sovereign-identity.md ├── a-guide-to-automating-scraping-the-web-with-javascript-chrome-puppeteer-node-js.md ├── a-guide-to-interviewing-for-product-design-internships.md ├── a-guide-to-the-google-play-console.md ├── a-look-back-at-the-state-of-javascript-in-2017.md ├── a-map-to-modern-javascript-development.md ├── a-mindful-design-process.md ├── a-primer-on-android-navigation.md ├── a-quick-look-at-semaphores.md ├── a-simple-object-model.md ├── a-simple-web-app-in-rust-conclusion.md ├── a-simple-web-app-in-rust-pt-1.md ├── a-simple-web-app-in-rust-pt-2a.md ├── a-simple-web-app-in-rust-pt-2b.md ├── a-simple-web-app-in-rust-pt-3.md ├── a-simple-web-app-in-rust-pt-4-cli-option-parsing.md ├── a-tinder-progressive-web-app-performance-case-study.md ├── a-unified-styling-language.md ├── after-a-year-of-nodejs-in-production.md ├── age-of-algorithm-human-gatekeeper.md ├── ajax-polling-in-react-with-redux.md ├── ajax-polling-part-2-sagas.md ├── align-svg-icons-to-text-and-say-goodbye-to-font-icons.md ├── all-about-concurrency-in-swift-1-the-present.md ├── all-about-react-router-4.md ├── all-you-need-to-know-about-parce.md ├── all-you-need-to-know-to-really-understand-the-node-js-event-loop-and-its-metrics.md ├── altering-javascript-frames.md ├── an-absolute-beginners-guide-to-swift.md ├── an-animated-guide-to-flexbox.md ├── an-exhaustive-guide-to-writing-dockerfiles-for-node-js-web-apps.md ├── an-introduction-to-functional-reactive-programming.md ├── an-introduction-to-in-app-a-b-testing.md ├── an-introduction-to-the-usernotifications-framework.md ├── an-ios-devs-experience-with-react-native.md ├── an-ode-to-async-await.md ├── an-overview-of-the-logging-ecosystem-in-2017.md ├── an-undervalued-blockchain-market-in-china-is-good-news-for-you.md ├── an-update-on-es6-modules-in-node-js.md ├── anatomy-of-a-function-call-in-go.md ├── android-app-optimization-using-arraymap-and-sparsearray.md ├── android-basic-project-architecture-for-mvp.md ├── android-data-binding-recyclerview.md ├── android-handler-internals.md ├── android-o-fonts.md ├── android-themes-an-in-depth-guide.md ├── android-why-your-canvas-shapes-arent-smooth.md ├── angular-jwt-authentication.md ├── angular-jwt.md ├── angular-vs-react-vs-vue-a-2017-comparison.md ├── angular-vs-react-which-is-better-for-web-development.md ├── animated-intro-rxjs.md ├── announcing-ant-design-3-0.md ├── any-web-site-can-become-a-pwa-but-we-need-to-do-better.md ├── applying-human-centered-design-to-emerging-technologies.md ├── approaching-android-with-mvvm.md ├── are-notifications-a-dark-pattern.md ├── are-the-ux-articles-youre-reading-trying-to-sell-you-something.md ├── artificial-intelligence-in-ux-design.md ├── atomic-design-how-to-design-systems-of-components.md ├── attract-millions-developers-product.md ├── audio-focus-1.md ├── audio-focus-2.md ├── audio-focus-3.md ├── auto-sizing-columns-css-grid-auto-fill-vs-auto-fit.md ├── automate-cicd-visual-app-center.md ├── automated-npm-releases-with-travis-ci.md ├── avoiding-accidental-complexity-when-structuring-your-app-state.md ├── avoiding-force-unwrapping-in-swift-unit-tests.md ├── avoiding-objc-in-swift.md ├── backend-api-documentation-in-swift.md ├── backwards-compatibility-with-ios-10-today-widgets.md ├── before-you-bury-yourself-in-packages-learn-the-node-js-runtime-itself.md ├── benchmarks-for-the-top-server-side-swift-frameworks-vs-node-js.md ├── best-practices-for-search-results.md ├── best-practices-in-designing-graphql-apis.md ├── better-form-design-one-thing-per-page.md ├── better-javascript-with-es6-pt-ii-a-deep-dive-into-classes.md ├── better-javascript-with-es6-pt-iii-cool-collections-slicker-strings.md ├── better-node-with-es6-pt-i.md ├── beyond-browser-web-desktop-apps.md ├── binary-ast-newsletter-1.md ├── bootstrap-considered-harmful.md ├── boring-design-systems.md ├── breaking-wpa2-by-forcubg-nonce-reuse.md ├── breakpoints-debugging-like-pro.md ├── bridging-existentials-generics-swift-2.md ├── bringing-Pokemon-GO-to-life-on-Google-Cloud.md ├── bubble-sheet-multiple-choice-scanner-and-test-grader-using-omr-python-and-opencv.md ├── build-a-journaling-app-with-meteor-1-3-beta-react-react-bootstrap-and-mantra.md ├── build-tic-tac-toe-with-ai-using-swift.md ├── building-a-kotlin-project-2.md ├── building-a-kotlin-project.md ├── building-a-mobile-app-with-cordova-vuejs.md ├── building-a-shop-with-sub-second-page-loads-lessons-learned.md ├── building-a-virtual-world-worthy-of-sci-fi.md ├── building-account-systems.md ├── building-an-api-gateway-using-nodejs.md ├── building-android-apps-30-things-that-experience-made-me-learn-the-hard-way.md ├── building-ar-game-arkit-spritekit.md ├── building-for-the-future-of-tv-with-android.md ├── building-interfaces-with-constraintlayout.md ├── building-ios-apps-with-xamarin-and-visual-studio.md ├── building-modern-web-applications-in-2017.md ├── building-our-personal-deep-learning-rig-gtx-1080-ubuntu-16-04-cuda-8-0rc-cudnn-7-tensorflowmxnetcaffedarknet.md ├── building-react-components-for-multiple-brands-and-applications.md ├── building-the-web-of-things.md ├── building-trello-layout-css-grid-flexbox.md ├── buttons-in-design-systems.md ├── bye-bye-burger.md ├── can-email-be-responsive.md ├── check-in-frequency-and-codebase-impact-the-surprising-correlation.md ├── choosing-a-front-end-framework-angular-ember-react.md ├── choosing-right-markdown-parser.md ├── chrome-devtools-performance-monitor.md ├── chrome-devtools.md ├── clean-java-immutability.md ├── closure-capture-1.md ├── code-comments-the-good-the-bad-and-the-ugly.md ├── code-smells-in-css-revisited.md ├── code-splitting-with-parcel-web-app-bundler.md ├── collaborative-map-reduce-in-the-browser.md ├── comparing-the-performance-between-native-ios-swift-and-react-native.md ├── compile-time-vs-runtime-type-checking-swift.md ├── complexion-reduction-a-new-trend-in-mobile-design.md ├── composable-datatypes-with-functions.md ├── comprehensive-guide-web-design.md ├── comprehensive-webfonts.md ├── computed-properties-javascript-dependency-tracking.md ├── concurrent-programming.md ├── conditions-for-css-variables.md ├── confusion-subject-observable-observer-android-rxjava2-hell-part8.md ├── constraint-layout-animations-dynamic-constraints-ui-java-hell.md ├── constraint-layout-concepts-hell-tips-tricks-part-2.md ├── constraint-layout-hell.md ├── constraint-layout-visual-design-editor-hell.md ├── contextual-chat-bots-with-tensorflow.md ├── continuation-observable-marriage-proposal-observer-dialogue-rx-observable-developer-android-rxjava2-hell-part7.md ├── continuation-summer-vs-winter-observable-dialogue-rx-observable-developer-android-rxjava2-hell-part6.md ├── contributing-hugh-lib.md ├── convert-time-series-supervised-learning-problem-python.md ├── convincing-the-kotlin-compiler-that-code-is-safe.md ├── core-plot-tutorial-getting-started.md ├── courseras-journey-to-graphql.md ├── crafting-better-code-reviews.md ├── crafting-high-performance-tv-user.md ├── create-effective-push-notifications.md ├── create-react-app.md ├── create-simple-blockchain-java-tutorial-from-scratch.md ├── create-your-first-ethereum-dapp-with-web3-and-vue-js-part-2.md ├── create-your-first-ethereum-dapp-with-web3-and-vue-js-part-3.md ├── create-your-first-ethereum-dapp-with-web3-and-vue-js.md ├── creating-accessible-react-apps.md ├── creating-an-html5-game-bot-using-python.md ├── creating-and-working-with-webassembly-modules.md ├── creating-highly-modular-android-apps.md ├── creating-usability-with-motion-the-ux-in-motion-manifesto.md ├── creating-your-first-blockchain-with-java-part-2-transactions.md ├── creating-your-first-desktop.md ├── csrf-is-dead.md ├── css-architecture.md ├── css-grid-supporting-browsers-without-grid.md ├── css-hex-colors-demystified.md ├── css-in-javascript-the-future-of-component-based-styling.md ├── css-inheritance-cascade-global-scope-new-old-worst-best-friends.md ├── css-is-fine-its-just-really-hard.md ├── css-naming-conventions-that-will-save-you-hours-of-debugging.md ├── css-writing-mode.md ├── csv-injection.md ├── dark-side-of-ui-benefits-of-dark-background.md ├── data-analytics-with-python-by-web-scraping-illustration-with-cia-world-factbook.md ├── data-flow-in-vue-and-vuex.md ├── dealing-with-complex-table-views-in-ios-and-keeping-your-sanity.md ├── dealing-with-imbalanced-data-undersampling-oversampling-and-proper-cross-validation.md ├── debugging-nodejs-in-chrome-devtools.md ├── debugging-swift-code-with-lldb.md ├── debugging-tips-tricks.md ├── declarative-api-design-in-swift.md ├── deconstructing-the-poor-design-of-a-well-intentioned-microinteraction.md ├── deep-learning-1-setting-up-aws-image-recognition.md ├── deep-learning-2-convolutional-neural-networks.md ├── deep-learning-3-more-on-cnns-handling-overfitting.md ├── deep-learning-4-embedding-layers.md ├── design-at-1x-its-a-fact.md ├── design-better-data-tables.md ├── design-doesnt-scale.md ├── design-for-internationalization.md ├── design-is-mainly-about-empathy.md ├── design-like-a-developer.md ├── design-principle-aesthetics.md ├── design-principle-consistency.md ├── design-principles-behind-great-products.md ├── design-principles-what-to-do-when-nobody-is-using-your-feature.md ├── design-thinking-not-just-another-buzzword.md ├── design-words-with-data.md ├── design-your-app-for-decision-making.md ├── designers-problem.md ├── designers-should-write.md ├── designing-a-product-youre-not-going-to-use.md ├── designing-anticipated-user-experiences.md ├── designing-better-tables-for-enterprise-applications.md ├── designing-design-system-for-complex-products.md ├── designing-html-apis.md ├── designing-in-app-survey.md ├── designing-the-icons-for-flinto-s-ui.md ├── designing-the-new-uber-app.md ├── designing-websites-for-iphone-x.md ├── detect-bots-apache-nginx-logs.md ├── detecting-incoming-phone-calls-in-android.md ├── detecting-low-power-mode.md ├── develop-your-first-application-with-flutter.md ├── developers-are-users-too-introduction.md ├── developers-are-users-too-part-1.md ├── developers-are-users-too-part-2.md ├── developing-games-with-react-redux-and-svg-part-1.md ├── developing-small-javascript-components-without-frameworks.md ├── dialogue-rx-observable-developer-android-rxjava2-hell-part5.md ├── disassembling-javascripts-iife-syntax.md ├── distributed-logging-architecture-in-the-container-era.md ├── distributing-react-components.md ├── dont-fear-the-rebase.md ├── dont-use-automatic-image-sliders-or-carousels.md ├── dos-and-don-ts-of-web-design.md ├── double-stuffed-security-in-android-oreo.md ├── dragging-react-performance-forward.md ├── dropouts-need-not-apply-silicon-valley-asks-mostly-for-developers-with-degrees.md ├── effective-environment-switching-in-ios.md ├── effective-java-for-android-cheatsheet.md ├── effective-okhttp.md ├── efficient-iOS-version-checking.md ├── elasticsearch-rolling-upgrades.md ├── embedding-lua-in-the-web.md ├── embracing-java-8-language-features.md ├── empathy-and-ux-design.md ├── empty-state-mobile-app-nice-to-have-essential.md ├── enabling-proguard-in-an-android-instant-app.md ├── enhancing-css-layout-floats-flexbox-grid.md ├── error-handling-in-rxjava.md ├── es6-modules-support-lands-in-browsers-is-it-time-to-rethink-bundling.md ├── es6-private-members.md ├── es6.md ├── es8-was-released-and-here-are-its-main-new-features.md ├── eslint-migrating-to-4.0.0.md ├── essential-guide-for-designing-your-android-app-architecture-mvp-part-2.md ├── essential-guide-for-designing-your-android-app-architecture-mvp-part-3.md ├── essential-guide-for-designing-your-android-app-architecture-mvp-part.md ├── even-fibonacci-numbers-python-vs-javascript.md ├── everyone-is-a-designer-get-over-it.md ├── everything-you-need-to-know-about-css-variables.md ├── evolving-the-facebook-news-feed-to-serve-you-better.md ├── explain-activity-launch-mode-with-examples.md ├── exploring-es7-decorators.md ├── exploring-firebase-on-android-ios-analytics.md ├── exploring-firebase-on-android-ios-remote-config.md ├── exploring-kotlins-hidden-costs-part-1.md ├── exploring-kotlins-hidden-costs-part-2.md ├── exploring-kotlins-hidden-costs-part-3.md ├── exploring-the-product.md ├── express-js-and-aws-lambda-a-serverless-love-story.md ├── facebook-content-placeholder-deconstruction.md ├── facebook-open-sources-detectron.md ├── familiarity-bias-is-holding-you-back-its-time-to-embrace-arrow-functions.md ├── fast-properties-in-v8.md ├── faster-more-reliable-ci-builds-with-yarn.md ├── faster-photos-in-facebook-for-ios.md ├── finally-understanding-how-references-work-in-android-and-java.md ├── fingerprinting-and-audio-recognition-with-python.md ├── five-things-you-can-do-with-yarn.md ├── five-tips-for-working-with-redux-in-large-applications.md ├── five-tips-to-improve-your-games-as-a-service-monetization.md ├── flat-ui-less-attention-cause-uncertainty.md ├── flatbuffers-in-android-introdution.md ├── floating-action-button-in-ux-design.md ├── floating-label-no-js-pure-css.md ├── flutter-5-reasons-why-you-may-love-it.md ├── flutter-for-javascript-developers.md ├── flying-solo-with-android-development.md ├── force-with-lease.md ├── form-design-for-complex-applications.md ├── forms-need-validation.md ├── freemium-conversion-rate │ ├── freemium-conversion-rate.md │ └── img │ │ ├── 1.jpg │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 8.jpg │ │ └── 9.jpg ├── from-a-react-point-of-vue-comparing-reactjs-to-vuejs-for-dynamic-tabular-data.md ├── from-app-explorer-to-first-time-buyer.md ├── from-automatons-to-deep-learning.md ├── from-form-to-function-our-thoughts-on-design-are-changing.md ├── from-functional-java-to-functioning-kotlin.md ├── from-product-design-to-virtual-reality.md ├── front-end-developers-guide-graphql.md ├── front-end-performance-checklist-2018-1.md ├── front-end-performance-checklist-2018-2.md ├── front-end-performance-checklist-2018-3.md ├── front-end-performance-checklist-2018-4.md ├── frontend-in-2017-the-important-parts.md ├── function-as-child-components.md ├── function-caller-considered-harmful.md ├── function-naming-in-swift-3.md ├── functional-interfaces-functional-programming-and-lambda-expressions-reactive-programming-android-rxjava2-what-the-hell-is-this-part3.md ├── functional-mixins-composing-software.md ├── functional-programming-for-android-developers-part-1.md ├── functional-programming-for-android-developers-part-2.md ├── functional-programming-for-android-developers-part-3.md ├── functional-programming-in-javascript-is-an-antipattern.md ├── functional-setstate-is-the-future-of-react.md ├── functors-categories.md ├── future-front-end-web-development.md ├── gang-of-four-patterns-in-kotlin.md ├── generative-research-ux.md ├── generic-data-sources-in-swift.md ├── gentle-introduction-to-functional-javascript-intro.md ├── genuine-guide-to-testing-react-redux-applications.md ├── geolocation-using-multiple-services.md ├── get-ready-a-new-v8-is-coming-node-js-performance-is-changing.md ├── get-started-tensorflow.md ├── getting-started-with-elasticsearch.md ├── getting-started-with-jrebel-for-android.md ├── getting-started-with-retrofit.md ├── getting-the-login-page-right.md ├── getting-to-swift-3-at-airbnb.md ├── go-function-calls-redux.md ├── golden-guidelines-for-writing-clean-css.md ├── good-swift-bad-swift-part-1.md ├── good-swift-bad-swift-part-2.md ├── google-design.md ├── google.interview.university.md ├── graphql-vs-rest.md ├── growing-popularity-atomic-css.md ├── guide-to-interviewing-for-product-design-internships.md ├── guide-to-ux-sketching.md ├── handling-scrolls-with-coordinatorlayout.md ├── handmade-svg-bar-chart-featuring-svg-positioning-gotchas.md ├── high-level-reactivity.md ├── higher-order-functions-composing-software.md ├── hot-vs-cold-observables.md ├── how-a-template-engine-works.md ├── how-apple.md ├── how-can-i-use-css-in-js-securely.md ├── how-chat-bots-work.md ├── how-color-affects-ux-and-behavior.md ├── how-do-promises-work.md ├── how-does-redux-work.md ├── how-google-builds-a-web-framework.md ├── how-i-built-a-web-server-using-go-and-on-chromeos.md ├── how-i-do-developer-ux-at-google.md ├── how-i-learned-to-love-parallelized-applies-with-python-pandas-dask-and-numba ├── how-i-used-stack-overflow-github-to-get-dream-job-before-19-without-degree.md ├── how-ios-apps-on-the-mac-could-work.md ├── how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path.md ├── how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with.md ├── how-javascript-works-inside-the-v8-engine-5-tips-on-how-to-write-optimized-code.md ├── how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks.md ├── how-javascript-works-the-building-blocks-of-web-workers-5-cases-when-you-should-use-them.md ├── how-modern-web-browsers-accelerate-performance-the-networking-layer.md ├── how-not-to-crash-1.md ├── how-protocol-oriented-programming-in-swift-saved-my-day.md ├── how-should-i-separate-components.md ├── how-switching-our-domain-structure-unlocked-international-growth.md ├── how-the-heck-does-async-await-work-in-python-3-5.md ├── how-to-achieve-reusability-with-react-components.md ├── how-to-be-a-compiler-make-a-compiler-with-javascript.md ├── how-to-become-an-ios-developer-bob.md ├── how-to-build-a-material-design-prototype-using-sketch-and-pixate-part-three.md ├── how-to-build-a-material-design-prototype-using-sketch-and-pixate-part-two.md ├── how-to-build-a-news-website-layout-with-flexbox.md ├── how-to-build-a-reactive-engine-in-javascript-part-1-observable-objects.md ├── how-to-build-a-spritekit-game-in-swift-3-part-1.md ├── how-to-build-a-spritekit-game-in-swift-3-part-2.md ├── how-to-build-a-spritekit-game-in-swift-3-part-3.md ├── how-to-build-and-publish-es6-modules-today-with-babel-and-rollup.md ├── how-to-build-mobile-games-with-people-in-mind.md ├── how-to-cancel-your-promise.md ├── how-to-communicate-hidden-gestures-in-mobile-app.md ├── how-to-configure-nginx-for-a-flask-web-application.md ├── how-to-craft-mobile-notifications-that-users-actually-want.md ├── how-to-create-a-bubble-selection-animation-on-android.md ├── how-to-create-a-front-end-framework-with-sketch.md ├── how-to-debug-front-end-console.md ├── how-to-design-notifications-for-better-ux.md ├── how-to-design-words.md ├── how-to-disable-links.md ├── how-to-do-proper-tree-shaking-in-webpack-2.md ├── how-to-generate-haptic-feedback-with-uifeedbackgenerator.md ├── how-to-get-the-most-out-of-the-javascript-console.md ├── how-to-go-from-hobbyist-to-professional-developer.md ├── how-to-handle-imbalanced-classes-in-machine-learning.md ├── how-to-implement-expandable-menu-on-ios-like-in-airbnb.md ├── how-to-improve-quality-and-syntax-of-your-android-code.md ├── how-to-javascript-in-2018.md ├── how-to-leak-memory-with-subscriptions-in-rxjava.md ├── how-to-make-a-chart-using-ajax-rest-apis.md ├── how-to-make-your-not-so-great-visual-design-better.md ├── how-to-make-your-react-app-fully-functional-fully-reactive-and-able-to-handle-all-those-crazy.md ├── how-to-make-your-react-native-app-respond-gracefully-when-the-keyboard-pops-up.md ├── how-to-pretend-youre-a-great-designer.md ├── how-to-set-up-a-continuous-integration-server-for-android-development-ubuntu-jenkins-sonarqube.md ├── how-to-start-with-backend-typescript-and-use-its-full-potential.md ├── how-to-stop-online-harassment.md ├── how-to-test-a-singleton-in-an-android-service-2.md ├── how-to-test-a-singleton-in-an-android-service-one.md ├── how-to-use-a-model-view-viewmodel-architecture-for-ios.md ├── how-to-use-colors-in-ui-design.md ├── how-to-use-generators.md ├── how-to-write-a-javascript-package-for-both-node-and-the-browser.md ├── how-to-write-a-perfect-error-message.md ├── how-to-write-dockerfiles-for-python-web-apps.md ├── how-to-write-high-performance-code-in-golang-using-go-routines.md ├── how-to-write-low-garbage-real-time-javascript.md ├── how-vr-is-changing-ux-from-prototyping-to-device-design.md ├── how-we-created-bubblepicker-a-colourful-animation-for-android.md ├── how-we-css-at-bigcommerce.md ├── how-we-use-bem-to-modularise-our-css.md ├── how-writing-custom-babel-and-eslint-plugins-can-increase-your-productivity-and-improve-user.md ├── how-you-can-decrease-application-size-by-60-in-only-5-minutes.md ├── how_to_draw.md ├── http2-for-web-developers.md ├── https-medium-com-alexstyl-animating-the-toolbar.md ├── i-interviewed-at-five-top-companies-in-silicon-valley-in-five-days-and-luckily-got-five-job-offers.md ├── i-m-a-web-developer-and-i-ve-been-stuck-with-the-simplest-app-for-the-last-10-days.md ├── ibeacon-in-swift.md ├── ibm-is-becoming-the-worlds-largest-design-company.md ├── if-i-have-one-month-to-learn-ios-how-would-i-spend-it.md ├── im-not-a-ux-designer-and-neither-are-you.md ├── image-upload-manipulation-react.md ├── immutable-models-and-data-consistency-our-ios-app.md ├── implementation-of-convolutional-neural-network-using-python-and-keras.md ├── implementing-delegates-in-swift-step-by-step.md ├── improve-web-typography-css-font-size-adjust.md ├── improving-perceived-performance-with-multiple-background-images.md ├── improving-performance-with-background-data-prefetching.md ├── improving-swift-compile-times.md ├── increasing-attacker-cost-using-immutable-infrastructure.md ├── incrementally-migrate-from-sqlite-to-room.md ├── ink-transition-effect.md ├── intro-to-swift-functional-programming-with-bob.md ├── introducing-design-systems-ops.md ├── introducing-pokedex-org │ ├── img │ │ ├── DeliriousNeedyAnophelesmosquito.gif │ │ ├── SlimySelfishHermitcrab.gif │ │ ├── offline-pokedex.gif │ │ └── pokedex-install-banner.gif │ └── introducing-pokedex-org.md ├── introducing-redux-recompose.md ├── introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser.md ├── introduction-nginscript.md ├── introduction-to-node-express.md ├── introduction-to-protocol-oriented-programming-in-swift.md ├── intuitive-design-vs-shareable-design.md ├── ios-11-machine-learning-for-everyone.md ├── ios-11-notable-uikit-additions.md ├── ios-9-tutorial-series-protocol-oriented-programming-with-uikit.md ├── ios-custom-modality.md ├── is-this-my-interface-or-yours.md ├── is-this-the-perfect-save-icon.md ├── is-vanilla-javascript-worth-learning-absolutely.md ├── its-not-dark-magic-pulling-back-the-curtains-from-your-stylesheets.md ├── jQuery-Tips-Everyone-Should-Know.md ├── java-8-in-android-n-preview.md ├── javascript-debugging-tips.md ├── javascript-developer-survey-results.md ├── javascript-es6-var-let-or-const.md ├── javascript-factory-functions-with-es6.md ├── javascript-firefox-debugger.md ├── javascript-monads-made-simple.md ├── javascript-package-managers.md ├── javascript-start-up-performance.md ├── javascript-testing-unit-functional-integration.md ├── javascript-what-the-heck-is-a-callback.md ├── jquery-3-0-final-released.md ├── js-things-i-never-knew-existed.md ├── json-javascript-object-notation.md ├── keep-webpack-fast-a-field-guide-for-better-build-performance.md ├── kerning.md ├── kotlin-its-the-little-things.md ├── lazy-loading-images-dont-rely-on-javascript.md ├── learn-blockchains-by-building-one.md ├── learn-css-flexbox-in-3-minutes.md ├── learning-how-to-set-up-automated-cross-browser-javascript-unit-testing.md ├── learning-javascript-9-common-mistakes.md ├── learning-react-js-is-easier-than-you-think.md ├── lecture-1-what-is-product-design.md ├── less-coding-guidelines.md ├── lets-make-your-svg-symbol-icons-multi-colored-with-css-variables.md ├── leveling-up-your-javascript.md ├── life-after-js-learning-2nd-language.md ├── life-without-interface-builder.md ├── little-big-details-for-your-mobile-app.md ├── lost-in-translation-the-importance-of-visual-design-localisation.md ├── love-letter-css.md ├── macOS-Security-and-Privacy-Guide.md ├── machine-learning-for-android-developers-with-the-mobile-vision-api-part-1-face-detection.md ├── make-memory-management-great-again.md ├── make-node-js-core-bigger.md ├── make-or-break-with-gradle.md ├── make-react-fast-again-tools-and-techniques-for-speeding-up-your-react-app.md ├── making-magic-with-websockets-and-css3.md ├── making-photos-smaller.md ├── making-react-native-apps-accessible.md ├── making-sense-of-ethereums-layer-2-scaling-solutions-state-channels-plasma-and-truebit.md ├── making-svg-icon-libraries-for-react-apps ├── making-the-most-of-the-apk-analyzer.md ├── making-the-web-more-accessible-with-ai.md ├── managing-css-js-http-2.md ├── managing-resources-for-large-scale-testing.md ├── mastering-swift-essential-details-about-strings.md ├── material-design-prototype-tutorial-part-1.md ├── media-query-units.md ├── meet-michelangelo-ubers-mechine-learning-plantform.md ├── meet-the-new-dialog-element.md ├── messaging-sync-scaling-mobile-messaging-at-airbnb.md ├── metaprogramming-in-es6-part-2-reflect.md ├── metaprogramming-in-es6-part-3-proxies.md ├── metaprogramming-in-es6-symbols.md ├── migrating-an-android-project-to-kotlin.md ├── migrating-mediastyle-notifications-to-support-android-o.md ├── million-requests-per-second-with-python.md ├── mobile-design-best-practices.md ├── mobile-friendly.md ├── mobile-small-portrait-slow-interlace-monochrome-coarse-non-hover-first.md ├── mocking-is-a-code-smell.md ├── modelling-state-in-swift.md ├── modern-javascript-for-ancient-web-developers.md ├── modernization-reactivity.md ├── modules-vs-microservices.md ├── mosby3-mvi-3.md ├── mosby3-mvi-4.md ├── mosby3-mvi-5.md ├── mosby3-mvi-6.md ├── mosby3-mvi.md ├── motion-in-ux-design-9-points-to-get-started.md ├── moving-a-large-and-old-codebase-to-python3.md ├── moving-existing-api-from-rest-to-graphql.md ├── multithreading-with-rxjava-dadddc.md ├── must-see-javascript-dev-tools-that-put-other-dev-tools-to-shame.md ├── mvvm-with-flow-controller-first-step.md ├── mvvmc-with-swift.md ├── my-least-favorite-thing-about-swift.md ├── mysql-migration.md ├── native-modules-for-react-native-android.md ├── natural-language-processing-made-easy-using-spacy-in-python.md ├── neo-project-docs-consensus.md ├── nested-ternaries-are-great.md ├── neural-networks-from-scratch-in-r.md ├── new-android-injector-with-dagger-2-part-1.md ├── new-android-injector-with-dagger-2-part-2.md ├── new-android-injector-with-dagger-2-part-3.md ├── new-in-python-3.7.md ├── next-generation-3d-graphics-on-the-web.md ├── no-excuses-it-takes-5-mins-make-that-drawer-visible-under-your-status-bar-2.md ├── node-hero-node-js-authentication-passport-js.md ├── node-js-child-processes-everything-you-need-to-know.md ├── node-js-development-tips-2018.md ├── node-js-native-modules-with-rust.md ├── node-js-streams-everything-you-need-to-know.md ├── node-js-war-stories-solving-issues-in-production.md ├── nodejs-best-practices-how-to-become-a-better-developer-in-2018.md ├── nodejs-vs-python-where-to-use-and-where-not.md ├── nothing-will-change-until-you-start-building.md ├── notifications-in-android-n.md ├── nsfetchedresultscontroller-woes.md ├── o-h-yeah-what-we-look-forward-to-in-android-o.md ├── object-detection-with-yolo.md ├── of-svg-minification-and-gzip.md ├── offline-friendly-forms.md ├── offline-support-try-again-later-no-more.md ├── on-loser-experience-design.md ├── on-performant-arrays-in-swift.md ├── on-strategies-to-apply-kotlin-to-existing-java-code.md ├── on-writing-less-damn-code.md ├── online-migrations.md ├── open-sourcing-a-10x-reduction-in-apache-cassandra-tail-latency.md ├── optimize-battery-life-with-androids-gcm-network-manager.md ├── optimizing-layouts-in-android-reducing-overdraw.md ├── our-best-practices-for-writing-react-components.md ├── out-of-the-dropshadows.md ├── outside-in-development-with-double-loop-tdd.md ├── outsmarting-subscription-challenges.md ├── package-manager-fetch.md ├── performance-metrics-whats-this-all-about.md ├── performance-optimisations-for-react-applications.md ├── performance-tuning-a-react-application.md ├── permissions-part-1.md ├── permissions-part-2.md ├── php-7-hhvm-benchmarks.md ├── playing-with-paths.md ├── popovers-on-popovers.md ├── post-a-boarding-pass-on-facebook-get-your-account-stolen.md ├── postcss-what-it-is-and-what-it-can-do.md ├── postgres-atomicity.md ├── postgres-full-text-search-with-django.md ├── powering-php-with-janusgraph.md ├── practical-guide-sql-isolation.md ├── practical-redux-part-0-introduction.md ├── practical-redux-part-1-redux-orm-basics.md ├── practical-redux-part-2-redux-orm-concepts-and-techniques.md ├── practical-svg.md ├── predicting-your-apps-monetization-future.md ├── preload-prefetch-and-priorities-in-chrome.md ├── preparing-ios-app-for-extensions.md ├── private-variables-in-javascript.md ├── product-listing-information.md ├── programmers-confess-unethical-illegal-tasks-asked-of-them.md ├── progressive-web-amps.md ├── progressive-web-apps-with-react-js-part-2-page-load-performance.md ├── progressive-web-apps-with-react-js-part-3-offline-support-and-network-resilience.md ├── progressive-web-apps-with-react-js-part-4-site-is-progressively-enhanced.md ├── progressive-web-apps-with-react-js-part-i-introduction.md ├── project-need-react.md ├── projects-need-react.md ├── promising-promise-tips.md ├── proof-of-work-vs-proof-of-stake.md ├── protocol-oriented-programming-view-in-swift-3.md ├── protocol-oriented-programming.md ├── pull-vs-push-imperative-vs-reactive-reactive-programming-android-rxjava2-hell-part2.md ├── pury-new-way-to-profile-your-android-application.md ├── push-for-a-point-of-view.md ├── pyqt-versus-wxpython.md ├── python-3-an-intro-to-encryption.md ├── python-dynamic-attributes.md ├── python-introspection-with-the-inspect-module.md ├── python-is-the-perfect-tool-for-any-problem.md ├── python-pandas-databases.md ├── quantum-up-close-what-is-a-browser-engine.md ├── quickly-process-api-requests-with-shoryuken-and-sqs.md ├── rate-limiters.md ├── react-16-features-and-fiber-explanation.md ├── react-aha-moments.md ├── react-at-light-speed.md ├── react-is-slow-react-is-fast.md ├── react-native-android-app-memory-investigation.md ├── react-native-at-walmartlabs.md ├── react-native-push-notifications-with-onesignal.md ├── react-newbies-tutorial.md ├── react-redux-optimization.md ├── reactive-generic-segue-with-rxswift.md ├── reactive-programming-android-rxjava2-hell-part1.md ├── reactiveswift-manage-your-memory.md ├── reacts-jsx-vs-vue-s-templates-a-showdown-on-the-front-end.md ├── real-world-flux-ios.md ├── rearchitecting-airbnbs-frontend.md ├── rebuilding-slack-com.md ├── recent-web-performance-fixes-on-airbnb-listing-pages.md ├── recurrent-neural-network-rnn-part-4-attentional-interfaces.md ├── recurrent-neural-network-rnn-part-5-custom-cells.md ├── recurrent-neural-networks-rnn-part-1-basic-rnn-char-rnn.md ├── recurrent-neural-networks-rnn-part-2-text-classification.md ├── recurrent-neural-networks-rnn-part-3-encoder-decoder.md ├── recyclerview-prefetch.md ├── reduce-composing-software.md ├── reducers-vs-transducers.md ├── reducing-cognitive-overload-for-a-better-user-experience.md ├── reducing-jpg-file-size.md ├── redux-4-ways.md ├── refactoring-not-on-the-backlog.md ├── refactoring-singletons-in-swift.md ├── reflections-on-eslints-success.md ├── regarding-swift-build-time-optimizations.md ├── requiring-modules-in-node-js-everything-you-need-to-know.md ├── rest-2-0-graphql.md ├── rest-apis-are-rest-in-peace-apis-long-live-graphql.md ├── retrofit-getting-started.md ├── rewriting-rxjava-with-kotlin-coroutines.md ├── rice-simple-prioritization-for-product-managers.md ├── right-click-logo-show-logo-download-options.md ├── rollup-interview.md ├── rom-simple-to-unusual-a-look-at-navigation-in-web-design.md ├── rss-responsive-design.md ├── rxandroid-tutorial.md ├── rxjava-production-line.md ├── rxjava-vs-kotlin-coroutines-quick-look.md ├── rxjs-observables-observers-operators.md ├── rxswift-at-first-sight.md ├── scaling-node-js-applications.md ├── schedule-tasks-and-jobs-intelligently-in-android.md ├── scrolling-behavior-for-appbars-in-android.md ├── seamless-ways-to-upgrade-angular-1-x-to-angular-2.md ├── secure-web-app-http-headers.md ├── securing-cookies-in-go.md ├── securing-your-express-app.md ├── server-side-react-rendering.md ├── server-side-web-components-how-and-why.md ├── service-workers-the-little-heroes-behind-progressive-web-apps.md ├── setstate-gate-abc.md ├── setting-up-prototypes-in-v8.md ├── sharing-files-though-intents-are-you-ready-for-nougat.md ├── shaving-our-image-size.md ├── shrinking-apks-growing-installs.md ├── simplify-your-life-with-an-ssh-config-file.md ├── six-of-the-most-exciting-es6-features-in-node-js-v6-lts.md ├── sketch-mastering.md ├── slack-s-2-8-billion-dollar-secret-sauce.md ├── sloped-edges-with-consistent-angle-in-css.md ├── smooth-css-animations.md ├── so-whats-this-graphql-thing-i-keep-hearing-about.md ├── so-you-want-to-be-a-functional-programmer-part-1.md ├── so-you-want-to-be-a-functional-programmer-part-2.md ├── so-you-want-to-be-a-functional-programmer-part-3.md ├── so-you-want-to-be-a-functional-programmer-part-4.md ├── so-you-want-to-be-a-functional-programmer-part-5.md ├── so-you-want-to-be-a-functional-programmer-part-6.md ├── so-you-want-to-learn-react-js.md ├── software-testing-big-picture.md ├── solid-principles-the-definitive-guide.md ├── spotifys-discover-weekly-how-machine-learning-finds-your-new-music.md ├── sprite-animation.md ├── sql-tutorial-how-to-write-better-queries.md ├── standard-package-layout.md ├── start-your-open-source-career.md ├── state-containers-in-swift.md ├── state-of-vue-report-2017.md ├── statements-messages-reducers.md ├── steve-jobs-in-1994-the-rolling-stone-interview-20110117.md ├── stop-designing-interfaces-start-designing-experiences.md ├── stop-foxtrots-now.md ├── story-thought-and-system-thought.md ├── streams-ftw.md ├── surprising-polymorphism-in-react-applications.md ├── svg-vs-gif.md ├── swift-3-0-release-process.md ├── swift-3-migration-pitfalls.md ├── swift-4-0-released.md ├── swift-algorithm-club-swift-binary-search-tree-data-structure.md ├── swift-arrays-holding-elements-weak-references.md ├── swift-initialization-with-closures.md ├── swift-keywords.md ├── swift-lazy-initialization-with-closures.md ├── swift-retention-cycle-in-closures-and-delegate.md ├── swift-struct-references.md ├── swift-testability.md ├── swift-value-types-reference-types.md ├── switching-site-https-shoestring-budget.md ├── talk-the-state-of-the-web.md ├── taming-great-complexity-mvvm-coordinators-and-rxswift.md ├── tdd-quick-nimble.md ├── tensorflow-in-a-nutshell-part-one-basics.md ├── tensorflow-in-a-nutshell-part-three-all-the-models.md ├── tensorflow-in-a-nutshell-part-two-hybrid-learning.md ├── terrible-ux-trends-for.md ├── test-driving-away-coupling-in-activities.md ├── testing-ios-apps.md ├── testing-mvp-using-espresso-and-mockito.md ├── testing-views-in-isolation-with-espresso.md ├── text-classification-using-neural-networks.md ├── text-fields-in-mobile-app.md ├── the-10-unique-ways-slack-hacked-growth-to-become-a-4-billion-company.md ├── the-9-rules-of-design-research.md ├── the-GCD-handbook.md ├── the-android-lifecycle-cheat-sheet-part-i-single-activities.md ├── the-art-of-defensive-programming.md ├── the-art-of-designing-with-heart.md ├── the-art-of-minimalism-in-mobile-app-ui-design.md ├── the-basics-of-designing-mobile-apps.md ├── the-caching-antipattern.md ├── the-circle-of-product-design.md ├── the-coming-era-of-the-zombie-token.md ├── the-complete-guide-to-network-unit-testing-in-swift.md ├── the-constructor-is-dead-long-live-the-constructor.md ├── the-details-that-matter.md ├── the-dos-and-don-ts-of-writing-test-cases-in-android.md ├── the-easiest-core-data.md ├── the-easy-way-to-turn-a-website-into-a-progressive-web-app.md ├── the-essentials-of-ios-app-testing-for-iphone-x.md ├── the-evolution-of-code-deploys-at-reddit.md ├── the-flexible-routing-approach-in-an-ios-app.md ├── the-future-of-deep-learning.md ├── the-future-of-state-management.md ├── the-future-of-ux-design.md ├── the-hidden-treasures-of-object-composition.md ├── the-introduction-of-starspace.md ├── the-limitations-of-deep-learning.md ├── the-many-faces-of-this-in-javascript.md ├── the-next-step-for-reactive-android-programming.md ├── the-one-python-library-everyone-needs.md ├── the-past-present-and-future-of-sketch.md ├── the-perils-of-shared-code.md ├── the-right-way-to-bundle-your-assets-for-faster-sites-over-http-2.md ├── the-rise-and-fall-and-rise-of-functional-programming-composable-software.md ├── the-secret-of-successful-typeface-combinations.md ├── the-secret-to-writing-killer-product-copy.md ├── the-three-economic-eras-of-bitcoin.md ├── the-time-i-had-to-crack-my-own-reddit-password.md ├── the-tiny-keyboard-problem-do-people-complete-forms.md ├── the-truth-is-in-the-code.md ├── the-two-types-of-product-virality.md ├── the-ultimate-guide-to-creating-a-mobile-application.md ├── the-way-of-the-gopher.md ├── the-worlds-fastest-javascript-memoization-library.md ├── things-i-wish-i-knew-before-i-wrote-my-first-android-app.md ├── things-i-wish-i-knew-when-i-started-building-android-sdk-libraries.md ├── things-i-wish-i-were-told-about-react-native.md ├── think-less-design-better.md ├── this-browser-tweak-saved-60%-of-requests-to-facebook.md ├── timeline-for-learning-react.md ├── timer-problems.md ├── timing-is-everything.md ├── tips-to-keep-in-mind-while-developing-complex-ui-in-web.md ├── tools-for-developing-accessible-websites.md ├── top-javascript-libraries-tech-to-learn-in-2018.md ├── top-ten-pull-request-review-mistakes.md ├── toward-go2.md ├── towards-godless-android-development-how-and-why-i-kill-god-objects.md ├── tracing-patterns-hinder-performance.md ├── transition-effect-with-css-masks.md ├── troubleshooting-proguard-issues-on-android.md ├── trusting-sdks.md ├── turbocharged-javascript-refactoring-with-codemods.md ├── turning-design-mockups-into-code-with-deep-learning-1.md ├── turning-design-mockups-into-code-with-deep-learning-2.md ├── type-checker-issues.md ├── typescript-class-vs-interface.md ├── typescript-getting-popular.md ├── typescript-javascript-with-super-powers.md ├── typescript-javascript-with-superpowers-part-ii.md ├── typography-as-base-from-the-content-out.md ├── typography-can-make-your-design-or-break-it.md ├── typography-for-user-interfaces.md ├── ui-vs-ux-what-is-the-difference.md ├── uiscrollview-tutorial.md ├── ultimate-guide-to-json-parsing-with-swift-4.md ├── unconventional-way-of-learning-a-new-programming-language.md ├── under-the-hood-of-futures-and-promises-in-swift.md ├── understanding-asynchronous-programming-in-python.md ├── understanding-higher-order-components.md ├── understanding-javascript-promises-pt-i-background-basics.md ├── understanding-javascripts-engine-with-cartoons.md ├── understanding-lock-files-in-npm-5.md ├── understanding-node-js-event-driven-architecture.md ├── understanding-service-workers.md ├── understanding-tensorflow-using-go.md ├── understanding-v8s-bytecode.md ├── undo-history-in-swift.md ├── upcoming-regexp-features.md ├── upgrade-project-css-selector-custom-attributes.md ├── use-a-render-prop.md ├── user-breakpoints-in-xcode.md ├── using-a-core-data-model-in-swift-playgrounds.md ├── using-a-function-in-setstate-instead-of-an-object.md ├── using-arkit-with-metal-part-2.md ├── using-arkit-with-metal.md ├── using-buffers-node-js-c-plus-plus.md ├── using-concurrency-and-speed-and-performance-on-android.md ├── using-css-counters.md ├── using-devtools-tweak-designs-browser.md ├── using-feature-queries-in-css.md ├── using-fetch-as-google-for-seo-experiments-with-react-driven-websites.md ├── using-leanbacks-diffcallback.md ├── using-machine-learning-to-predict-value-of-homes-on-airbnb.md ├── using-new-google-sheets-api.md ├── using-swifts-enums-for-quick-actions.md ├── using-zopfli-to-optimize-png-images.md ├── uuid-or-guid-as-primary-keys-be-careful.md ├── ux-and-design-thinking-5-tips-for-changing-your-company-mindset.md ├── ux-infinite-scrolling-vs-pagination.md ├── ux-is-grounded-in-rationale-not-design.md ├── ux-review-and-redesign-of-the-cocacola-freestyle-kiosk-interface.md ├── v3-1-0-such-perf-wow-many-streams.md ├── v8-behind-the-scenes-november-edition.md ├── vectors-for-all-almost.md ├── vectors-for-all-finally.md ├── vectors-for-all-slight-return.md ├── vertical-typesetting-revisited.md ├── viewmodels-a-simple-example.md ├── viewmodels-and-livedata-patterns-antipatterns.md ├── viewmodels-persistence-onsaveinstancestate-restoring-ui-state-and-loaders.md ├── war-learning-curve-rx-java-2-java-8-stream-android-rxjava2-hell-part4.md ├── we-analyzed-thousands-of-coding-interviews-heres-what-we-learned.md ├── web-developer-security-checklist.md ├── web-font-loading-patterns.md ├── web-fonts-when-you-need-them-when-you-dont.md ├── webhooks-dos-and-dont-s-what-we-learned-after-integrating-100-apis.md ├── webpack-3-official-release.md ├── webpack-4-beta-try-it-today.md ├── webpack-and-rollup-the-same-but-different.md ├── webpack-bits-getting-the-most-out-of-the-commonschunkplugin.md ├── webpack-http-2.md ├── webpack-your-bags.md ├── what-archive-format-should-you-use-war-or-jar.md ├── what-does-the-time-complexity-o-log-n-actually-mean.md ├── what-face-id-means-for-accessibility.md ├── what-i-hate-in-kotlin.md ├── what-i-learned-from-reading-the-redux-source-code.md ├── what-i-learned-from-writing-six-functions-that-all-did-the-same-thing.md ├── what-i-would-like-to-know-before-i-code-my-first-ios-application-in-swift.md ├── what-is-mcts.md ├── what-is-the-real-role-of-a-design-portfolio-website.md ├── what-makes-webassembly-fast.md ├── what-to-do-if-your-product-isnt-growing.md ├── what-unit-tests-are-trying-to-tell-us-about-activities-pt-2.md ├── what-unit-tests-are-trying-to-tell-us-about-activities-pt1.md ├── what-will-bitcoin-look-like-in-twenty-years-1.md ├── what-will-bitcoin-look-like-in-twenty-years-2.md ├── what-will-bitcoin-look-like-in-twenty-years-3.md ├── what-you-must-know-to-build-savvy-push-notifications.md ├── what-you-see-is-what-you-use.md ├── whats-in-the-apk.md ├── whats-new-in-html-5-2.md ├── whats-new-in-ios-11.md ├── whats-new-in-react-16-3.md ├── whats-new-in-vue-devtools-4-0.md ├── whats-so-great-about-redux.md ├── where-is-webassembly-now-and-whats-next.md ├── where-to-spot-new-design-trends-15-sources-to-stay-fresh.md ├── who-plays-mobile-games.md ├── whole-module-optimizations.md ├── why-and-how-the-cryptobubble-will-burst.md ├── why-android-testing-is-so-hard-historical-edition.md ├── why-building-community-is-the-new-growth-hack.md ├── why-composition-is-harder-with-classes.md ├── why-context-value-matters-and-how-to-improve-it.md ├── why-design-principles-shape-stronger-products.md ├── why-design.md ├── why-do-people-open-emails.md ├── why-do-we-need-a-new-api.md ├── why-drop-down-lists-are-bad-for-the-user-experience.md ├── why-i-close-prs-oss-project-maintainer-notes.md ├── why-i-havent-fixed-your-issue-yet.md ├── why-i-love-ugly-messy-interfaces-and-you-probably-do-too.md ├── why-is-arkit-better-than-the-alternatives.md ├── why-learn-functional-programming-in-javascript-composing-software.md ├── why-object-literals-in-javascript-are-cool.md ├── why-our-website-is-faster-than-yours.md ├── why-the-first-ten-minutes-is-crucial-if-you-want-to-keep-players-coming-back-to-your-mobile-game.md ├── why-user-experience-always-has-to-come-first.md ├── why-vertical-rhythms.md ├── why-we-desperately-need-women-to-design-ai.md ├── why-we-never-thank-open-source-maintainers.md ├── why-your-app-looks-better-in-sketch.md ├── women-and-mobile-games-learnings-for-developers.md ├── workcation-app-part-1-fragments-custom-transition.md ├── workcation-app-part-2-animating-markers-with-mapoverlaylayout.md ├── workcation-app-part-3-recyclerview-interaction-with-animated-markers.md ├── workcation-app-part-4-shared-element-transition-recyclerview-scenes.md ├── world-class-testing-development-pipeline-for-android-part-2.md ├── world-class-testing-development-pipeline-for-android.md ├── wrapping-existing-libraries-with-rxjava.md ├── write-clean-css-10-simple-steps-pt1.md ├── write-clean-css-10-simple-steps-pt2.md ├── write-safer-and-cleaner-code-by-leveraging-the-power-of-immutability.md ├── writing-a-lambda-calculus-interpreter-in-javascrip.md ├── writing-better-adapters.md ├── writing-better-css-with-currentcolor.md ├── writing-unit-tests-in-a-swift-playground.md ├── wwdc-2016-increased-safety-in-swift-3.md ├── xcode7-xcode8.md ├── yammer-ios-app-ported-to-swift-3.md ├── yeah-redesign-part-1.md ├── you-do-not-need-a-css-grid-based-grid-system.md ├── you-dont-know-node.md └── your-node-js-authentication-tutorial-is-wrong.md ├── TODO1 ├── 1-2-3-9-looking-into-assembly-code-of-coercion.md ├── 23-facilitation-tips-for-design-sprints.md ├── 5-rules-for-designer-engineer-collaboration.md ├── a-brief-totally-accurate-history-of-programming-languages.md ├── a-new-era-of-launching-mobile-games.md ├── an-in-depth-svg-tutorial ├── an-open-source-interactive-data-visualization-tool-for-neuroevolution.md ├── analysing-1-4-billion-rows-with-python.md ├── architecting-single-page-applications.md ├── building-bikesharing-application-open-source-tools.md ├── classes-without-classes.md ├── code-your-own-blockchain-in-less-than-200-lines-of-go.md ├── code-your-own-blockchain-mining-algorithm-in-go.md ├── connected-cars-what-are-they-and-how-to-get-started-developing-connected-car-apps.md ├── deploy-not-equal-release-part-one.md ├── developing-games-with-react-redux-and-svg-part-2.md ├── dont-call-me-i-ll-call-you-side-effects-management-with-redux-saga-part-1.md ├── ethereumbook-wallets.md ├── five-options-for-ios-continuous-delivery-without-fastlane.md ├── good-coding-practices-tips-enhance-code-quality.md ├── how-blockchain-can-help-re-invent-healthcare.md ├── how-javascript-works-the-rendering-engine-and-tips-to-optimize-its-performance.md ├── how-to-not-react-common-anti-patterns-and-gotchas-in-react.md ├── how-to-win-back-subscribers-who-cancel.md ├── how-to-write-a-discord-bot-in-python.md ├── immutability-in-react-theres-nothing-wrong-with-mutating-objects.md ├── interesting-ecmascript-2017-proposals.md ├── interpreting-predictive-models-with-skater-unboxing-model-opacity.md ├── javascript-unit-testing-frameworks.md ├── keras-generative-adversarial-networks-image-deblurring.md ├── lets-simplify-the-work-with-userdefaults.md ├── loaders-in-support-library-27-1-0.md ├── love-js-hate-css.md ├── machine-learning-for-diabetes-with-python.md ├── mastering-javascript-this-keyword-detailed-guide.md ├── mosby3-mvi-7.md ├── node-js-can-http-2-push.md ├── optimizing-a-static-site.md ├── pandas-dtypes.md ├── part-of-speech-tagging-tutorial-with-the-keras-deep-learning-library.md ├── predicting-your-games-monetization-future.md ├── python-data-cleaning-numpy-pandas.md ├── react-inline-functions-and-performance.md ├── sketch-plugins-i-cant-live-without.md ├── top-react-and-redux-packages-for-faster-development.md ├── unidirectional-user-interface-architectures.md ├── userland-api-monitoring-and-code-injection-detection.md ├── using-behavioural-economics-to-convey-the-value-of-paid-app-subscriptions.md └── windows-insets-fragment-transitions.md ├── a-new-post-template.md ├── android.md ├── backend.md ├── blockchain.md ├── design.md ├── front-end.md ├── glossary └── blockchain.md ├── integrals.md ├── ios.md ├── others.md └── product.md /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | ## 参与翻译 4 | 5 | - 请确保参与翻译之前已在相关文章的 Issue 发出过申请，避免重复性劳动。 6 | - 如果你还不是我们的译者，请参考 [如何参与翻译](https://github.com/xitu/gold-miner/wiki/%E5%A6%82%E4%BD%95%E5%8F%82%E4%B8%8E%E7%BF%BB%E8%AF%91)。 7 | 8 | ## 问题反馈 9 | 10 | - 本项目只接受译文存在的相关问题反馈。任何需要针对原文的讨论请在英文原文处讨论。 11 | - 针对译文的反馈，请 [提交一个 Issue](https://github.com/xitu/gold-miner/issues/new)，指出问题对应的译文地址，并简明扼要的叙述问题所在。 12 | 13 | ## Pull Requests 14 | 15 | - 译文请严格遵从 [译文排版规则指北](https://github.com/xitu/gold-miner/wiki/%E8%AF%91%E6%96%87%E6%8E%92%E7%89%88%E8%A7%84%E5%88%99%E6%8C%87%E5%8C%97) 中的要求。 16 | - 每个 PR 只允许包含一篇文章的翻译版本。包含两篇或多篇的 PR 会立即被 close 掉。 17 | - 翻译文章前，请从主分支的最新状态上新建一个译文分支，保证每个分支只翻译一篇文章。我们推荐的新分支名格式为：`translation/文件名`。 18 | - 在翻译过程中，请直接编辑源文件，并不需要包含英文原文内容。 19 | - 在翻译过程中，请尽可能保证在原行上进行修改，以保证行与行之间的原始对应关系。 20 | - 在翻译完成后，请在中文环境下完整地阅读一遍译文，保证语句符合中文表达习惯。 21 | - 在翻译完成后，请在 GitHub 网页版检查一下译文，确保不出现 Markdown 语法错误和排版错误。 22 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 译文翻译完成，resolve # 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .AppleDouble 3 | .LSOverride 4 | .idea -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hi@xitu.io. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /TODO/10-things-you-probably-didnt-know-about-javascript-react-and-nodejs-and-graphql-development-at-facebook.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [10-things-you-probably-didnt-know-about-javascript-react-and-nodejs-and-graphql-development-at-facebook](https://hashnode.com/post/10-things-you-probably-didnt-know-about-javascript-react-and-nodejs-and-graphql-development-at-facebook-cink0r0e500h5io53fpl7ediu) 2 | * 原文作者 : [Sandeep Panda](https://hashnode.com/@sandeep) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [Jack](https://github.com/Jack-Kingdom) 5 | * 校对者: [DeadLion](https://github.com/DeadLion),[Joddiy](https://github.com/joddiy) 6 | 7 | # 10 个你可能不知道的事，关于 Facebook 内部开发环境是如何使用 JavaScript 和 GraphQL 的 8 | 9 | 最近, 来自 Facebook 的 Lee Byron ([@leebyron](https://hashnode.com/@leebyron)) 在Hashnode上主办了一场 [AMA](https://hashnode.com/ama/with-lee-byron-cin0kpe8p0073rb53b19emcda)( Ask Me Anything )。 这里提出了许多有趣的问题，并且 Lee 透露了一些关于 Facebook 如何使用 React 、GraphQL 、和 React Native 的惊人事实与细节。我拜读了他在 AMA 上的回答，思考并总结出了十条有趣的重点。 10 | 11 | 那么，开始吧。 12 | 13 | ## React 背后的灵感? 14 | 15 | React 一定程度上受到了 [XHP](https://github.com/facebook/xhp-lib) 的启发，来自 Facebook 的 Marcel Laverdet 在2009年创建了此项目，用于模块化 Facebook 的用户界面。详见[这里](https://hashnode.com/ama/with-lee-byron-cin0kpe8p0073rb53b19emcda#cin120uib00edlv533i6d8yd7)。 16 | 17 | ## Facebook计划用React Native 重写他的移动应用吗？ 18 | 19 | 好吧, 答案是 : _他们已经这样做了_。 有一部分 Facebook 的应用使用了 React Native 构建，也有一部分不是。 详细的答案见这个[讨论](https://hashnode.com/ama/with-lee-byron-cin0kpe8p0073rb53b19emcda#cin6vg5r201wqjh53ne77tao1). 20 | 21 | ## 哪些场景正在使用 Immutable.js ？ 22 | 23 | * Ads Manager 和他们基于 React Native 的 Android 和 IOS 应用。 24 | * Messenger 网站 ([messenger.com](https://hashnode.com/util/redirect?url=http://messenger.com)) 25 | * 用 Draft.js 写的新文章。 26 | * 在 Facebook News Feed 上所有的评论。 27 | 28 | ## Facebook 如何为 React 组件写 CSS ? 29 | 30 | Lee 透露到他们禁止导入 CSS 规则到除 React 组件以外的任意文件。 这样不仅确保了一个组件经由格式化的属性所应该暴露出的正确的 API ，同时其他的组件不能够通过导入一个规则来覆盖他。 此外，他们并不需要通过 JavaScript 的一些技巧来导入 CSS 文件。相反，他们遵循`Button.js` 临靠 `Button.css` 的规范。详见 [这里](https://hashnode.com/ama/with-lee-byron-cin0kpe8p0073rb53b19emcda#cin5qpdbv01apk85319o2c1fx)。 31 | 32 | ## Facebook 会随着每个 React 重要发行版而更新 React 组件吗？ 33 | 34 | * 是的，他们会。 35 | * Facebook 通常将 React **master** 分支用于生产环境 36 | * 从2012开始，React API 并没有进行多少重大的更改。 因此，React 团队也很少面临必须更新组件的状况。 37 | * 如果有突发的更新，React 团队的成员 Ben Alpert 将会负责代码库的所有同步工作。 38 | * 他们也会使用类似 [jscodeshift](https://github.com/facebook/jscodeshift) 的自动化工具去简化问题。 39 | 40 | ## GraphQL 背后的故事是什么? 41 | 42 | GraphQL 诞生于2012年，当时 Lee 正在 IOS 组致力于 News Feed 。 当时，在一些网络环境糟糕的地区，Facebook 正急速增长。 因此, GraphQL 最初被设计于应对缓慢的手机连接。 不久，当 Relay 正准备开源时，他们认为缺乏 GraphQL ，Relay 的开源就没有多少意义。 同时，他们也意识到 GraphQL 服务编写得很巧妙并且大多数 Facebook 以外的公司都未尝使用过。因此，他们决定通过编写一个语言无关的规范来发布它。那就是 GraphQL 背后的故事。详情可阅读 [此处](https://hashnode.com/ama/with-lee-byron-cin0kpe8p0073rb53b19emcda#cin1gw37n00kwlv53rretxpe8) 的回答。 43 | 44 | ## Facebook 正在什么场景使用 GraphQL ？ 45 | 46 | Facebook的 Android 和 IOS 应用 几乎全部依赖于 GraphQL 支持。 在一些情况下, 如Ads Manager，整个应有都在使用 Relay + GraphQL 。 47 | 48 | 是的, Facebook 重度依赖 SSR 。尽管如此，Lee 说他们很少有在服务器使用 React 渲染组件的场景。这个主要取决于他们的服务器环境。 49 | 50 | ## Facebook 使用 Node.js 吗？ 51 | 52 | Lee 说他们有许多客户端的工具由 Javascript 编写并通过 Node 运行。[remodel](https://github.com/facebook/remodel) 就是这样一个通过 npm 安装的工具.他们所有的 IOS 和 android 上的内部 GraphQL 客户端工具都在使用 Node 。但是他们在服务器端使用 Node 并不多，因为迄今都没有一个强烈的需求。 即使某一天他们想在服务器端使用 Javascript (例如：在服务器上渲染 React )，他们也会直接使用 V8 引擎而非 Node 。 53 | 54 | ## Falcor (by Netflix) 对比 GraphQL 如何？ 55 | 据 Lee 所说, 两个工具都在尝试解决类似的问题。当 GraphQL 团队第一次听说 Falcor 时，他们与 Netflix 团队见了一面并交换了一些想法。虽然如此，Falcor 与GraphQL 之间还是有许多区别的。阅读 [此处](https://hashnode.com/ama/with-lee-byron-cin0kpe8p0073rb53b19emcda#cinj7lim4002lid53x47g060n) 的回答可以知道更多。 56 | 57 | 我希望你能喜欢这份非常简短的总结。 详细的回答与讨论请移步 [AMA 页面](https://hashnode.com/ama/with-lee-byron-cin0kpe8p0073rb53b19emcda)。 58 | -------------------------------------------------------------------------------- /TODO/6-practical-skills-for-ux-designers.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[6 Practical Skills for UX Designers](https://uxdesign.cc/6-practical-skills-for-ux-designers-22c852d6c576#.vjeb02dwq) 2 | * 原文作者：[Joanna Ngai](https://uxdesign.cc/@ngai.yt) 3 | * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者：[Kulbear](https://kulbear.github.io/) 5 | * 校对者：[owenlyn](https://github.com/owenlyn), [shixinzhang](https://github.com/shixinzhang) 6 | 7 | # 给 UX 设计师的 6 个超实用技巧指南 8 | 9 | ![](http://ac-Myg6wSTV.clouddn.com/2cc6a114bae9326ef2b0.png) 10 | 11 | #### 一些关于怎么变革产品、服务和流程的开发方式的想法 12 | 13 | ![](http://ac-Myg6wSTV.clouddn.com/66ff18b264d2c507aebe.png) 14 | 15 | 我们都同意[中高级设计师和初级设计师处理问题的方法有着显著区别](https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e#.4a2tc78vd)，到底是什么东西使我们能区分开新人和久经沙场的老设计师们呢？ 16 | 17 | 接下来是一些在你从事设计师的这条漫长旅途上需要磨砺的一些实用技能。 18 | 19 | ### 1. 从长远的角度看你的设计方案 20 | 21 | 如我[之前](https://blog.prototypr.io/essential-lessons-on-ux-18f96933e885#.mjgjp0osb)所提及的，设计师们需要站在一定高度上观察、理解复杂的问题，避免过早被细节困扰。 22 | 23 | > 我的一位导师提过，设计师们做的不仅仅是引导用户去点击一个按钮或是完成一个小任务。用户体验设计师必须从长远角度看待设计问题，并拥有一个**站在"10000 英尺以上高度” 的思维方式**。 24 | 25 | > 也就是需要在用户交互的这个系统中考虑以前的想法，态度，竞争对手和其他工具。 26 | 27 | 在你设计的时候，要从全局考虑用户所处的环境，而不是考虑某个特定的情况；避免出现不顾及你设计内容的上下文状态，横冲直撞的设计。 28 | 29 | ### 2. 专注于核心问题（Issue） 30 | 31 | 专注于核心问题的能力是设计师成功解决困难问题的保证。 32 | 33 | 老练的用户体验设计师即使在遇到未解决的问题（大型的或抽象的）也可以轻松的完成整个项目。 34 | 35 | 他们可以建立一些假设，根据自己最初的想法收集一些数据从而将口头上的想法通过设计和提炼转换为可见的概念。 36 | 37 | ![](http://ac-Myg6wSTV.clouddn.com/0178730cb78f19188ad0.jpeg) 38 | 39 | ### 3. 以人为本 40 | 41 | 及时对用户关注点的反馈提问。 42 | 43 | 世界那么大，你得去看看。走到外面去多观察，理解并明确的将以用户为中心的设计理念应用到设计中，这是对于设计师是十分重要的。 44 | 45 | 你要问自己这些问题：现在的问题是什么？我的目标用户是谁？我们为什么要解决这个问题？他们的目标是什么？ 46 | 47 | 所有的这些功夫都不会白费——在最终交付产品的时候这些都会成为产品的核心价值。 48 | 49 | ![](http://ac-Myg6wSTV.clouddn.com/a81a5f7c1d87b447e8a1.jpeg) 50 | 51 | ### 4. 用设计思维影响（我个人觉得引导更好）你的同事 52 | 53 | 优秀的用户体验设计师往往也是沟通的专家——无论是从口头上（为设计或非设计人员讲述故事、阐述概念等等）或是从视觉上（略图，草稿，模拟图）。 54 | 55 | 他们能在避免不必要的争论的同时将自己的要点阐述清楚，给大家呈现新鲜的观点（灵感）。 56 | 57 | ![](http://ac-Myg6wSTV.clouddn.com/8c47d6b213139f3b9299.jpeg) 58 | 59 | ![](http://ac-Myg6wSTV.clouddn.com/757f7956c7472be3245d.jpeg) 60 | 61 | ### 5. 不断观察与学习 62 | 63 | 设计是一个快速更迭的领域。你要随着科技快速增长的脚步持续学习新事物，使自己成长，让自己保持在潮流的前端。 64 | 65 | - [Seth 的博客](http://sethgodin.typepad.com/) — *一些有趣的商业 idea* 66 | - [Creative Mornings](https://creativemornings.com/) — *一些来自一个富有创造力的社区的早餐读物* 67 | - [LukeW](http://www.lukew.com/ff/) — *Web 的实用和美工设计策略* 68 | - [24 个最佳的用户体验设计学习去处](https://uxdesign.cc/learning-as-a-designer-9c1edcc989ae#.b4y792xhx) 69 | - [2016 年最佳用户体验设计](https://blog.prototypr.io/best-of-ux-links-of-2016-eb2f44a2c9c0#.w0fl1cq76) 70 | 71 | #### 持续学习、成长的思维是需要终生培养的。 72 | 73 | ### 6. 勇气（决心） 74 | 75 | ![](http://ac-Myg6wSTV.clouddn.com/f3a09e7bfde081d96716.png) 76 | 77 | Angela Lee Duckworth 78 | 79 | > 决心是长远目标的激情与持之以恒的源头。它是拥有着毅力。它和你的未来紧密相关，日复一日，直至数年，而非一周一月的功劳。它能实现你对未来的宏愿。它不是百米冲刺跑，而是一场生活中漫长的马拉松。 80 | 81 | > —* Angela Lee Duckworth, TED 演讲者, Grit: The power of passion and perseverance* 82 | 83 | 尽管所谓决心看起来和设计毫无关联，但我相信这是具有创新思维的人最实际的特点。 84 | 85 | 决心使你可以迈过失败。它的动力并非来自于燃烧你的激情，而是你的刻苦与努力。 86 | 87 | ![](http://ac-Myg6wSTV.clouddn.com/86448993741a25056617.jpeg) 88 | 89 | Ji lee — Words As Image 90 | 91 | ![](http://ac-Myg6wSTV.clouddn.com/3ed1526bbd427508ad81.png) 92 | 93 | Ji lee — Words As Image 94 | 95 | 对于设计师们来说，这看起来像是习惯或是一些[辅助项目](http://pleaseenjoy.com/projects/personal/bubble-project/)，或是超越基本要求的探索。这是对未来前景的乐观思考。 96 | 97 | #### 对我来说，最有价值的技能就是从失败中学习。 98 | 99 | — 100 | 101 | *感谢您的阅读，如果想浏览更多我的作品，请参考 [*design work*](http://www.cargocollective.com/joannan) 。* 102 | -------------------------------------------------------------------------------- /TODO/GoogleCloudFunctions/calling-cloud-functions.md: -------------------------------------------------------------------------------- 1 | * 原文[Calling Cloud Functions](https://cloud.google.com/functions/calling) 2 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 3 | * 译者 : [huanglizhuo](https://github.com/huanglizhuo) 4 | * 校对者: [shenxn](https://github.com/shenxn) [CoderBOBO](https://github.com/CoderBOBO) [edvarHua](https://github.com/edvardHua) 5 | 6 | ##调用 Cloud Functions 7 | 8 | Google Cloud Functions 可以和一个指定的触发器联系起来。触发器的类型决定了你的函数执行方式和执行时间。当前版本的 Cloud Functions 支持以下原生触发机制： 9 | 10 | * [Goocle Cloud Pub/Sub](https://cloud.google.com/functions/calling#google_cloud_pubsub) 11 | * [Goocle Cloud Storage](https://cloud.google.com/functions/calling#google_cloud_storage) 12 | * [HTTP Invocation](https://cloud.google.com/functions/calling#http_invocation) 13 | * [Debug/Direct Invocation](https://cloud.google.com/functions/calling#debugdirect_invocation) 14 | 15 | 你也可以把 Cloud Functions 和其它支持 Cloud Pub/Sub 的 Google 服务整合在一起，也可以和任何支持 HTTP 回调(webhooks) 的服务整合。这部分的更多细节在[其它触发器](https://cloud.google.com/functions/calling#other)中。 16 | 17 | ##Google Cloud Pub/Sub 18 | 19 | Cloud Functions 可以通过 [Cloud Pub/Sub topic](https://cloud.google.com/pubsub/docs) 主题异步触发。Cloud Pub/Sub 全球性的分布式消息总线，可以根据你的需求弹性扩展与收缩，为你构建强健的，全球化的服务提供良好的基础。 20 | 21 | 例子： 22 | 23 | > $ gcloud alpha functions deploy helloworld --bucket cloud-functions --trigger-topic hello_world 24 | 25 | 参数|描述 26 | ----|---- 27 | --trigger-topic|函数要订阅的Cloud Pub/Sub 主题名 28 | 29 | 由 Cloud Pub/Sub 触发器调用的 Cloud Functions 会接收到一个发布到 Pub/Sub 主题的 message，message必须是 JSON 格式。 30 | 31 | ##Google Cloud Storege 32 | 33 | Cloud Functions 可以对 Google Cloud Storage 发出的对象修改通知做出回应。这些通知是由对象添加(创建)，更新(修改)，或者删除触发的。 34 | 35 | 例子： 36 | 37 | > $ gcloud alpha functions deploy helloworld --bucket cloud-functions --trigger-gs-uri my-bucket 38 | 39 | 参数|描述 40 | ----|---- 41 | --trigger-gs-uri| 函数要监听变更的 Cloud Storage bucket 名字 42 | 43 | 由 Cloud Storage 触发器触发的 Cloud Functions 会接收到对象增加，更新，或者删除事件发出的预定义好的 JSON 结构，像这个[文档](https://cloud.google.com/storage/docs/object-change-notification#_Type_AddUpdateDel)中这样。 44 | 45 | ##HTTP 触发 46 | 47 | Cloud Functions 可以由 HTTP POST 方法同步的触发。为你的函数添加一个 HTTP 端点，你得在部署函数时通过 --trigger-http 指明触发器类型。HTTP 调用是同步触发的，也就意味着函数的结果会在 HTTP 响应的 body 中返回。 48 | 49 | 例子： 50 | 51 | > $ gcloud alpha functions deploy helloworld --bucket cloud-functions --trigger-http 52 | 53 | ``` 54 | 注意：现在只支持 HTTP POST 方法。其它任何方法(比如 GET 或者 PUT)都会引发 405(方法不支持) 错误。 55 | 56 | 部署带有 HTTP 触发的 Cloud Functions 可以通过简单的 curl 命令触发： 57 | 58 | > $ curl -X POST --data '{"message":"Hello World!"}' 59 | ``` 60 | 61 | 会在函数部署后返回，也可使用 gcloud 的 describe 查看 62 | 63 | ##Debug/Direct 调用 64 | 65 | 为了支持快速迭代和调试，Cloud Functions 命令行工具提供了 call 命令，并且在 UI 中提供了一个测试函数。这样你就可以手动调用函数并确保它的正确性。这种调用方式会同步触发函数的执行，即使部署时它的触发器是异步的，比如 Cloud Pub/Sub 触发器。 66 | 67 | 例子： 68 | 69 | > $ gcloud alpha functions call helloworld --data '{"message":"Hello World!"}' 70 | 71 | 72 | ##其它触发器 73 | 74 | 由于 Cloud Functions 可以由 Cloud Pub/Sub 主题消息触发，因此你可以把它和任何其它支持 Cloud Pub/Sub 作为事件总线的的 Google 服务整合起来。 借助于 HTTP 触发方式，你可以把任何其它提供 HTTP 回调(webhooks) 的服务整合起来。 75 | 76 | ###Cloud 日志 77 | 78 | Google Cloud Logging 事件可以输出到任何可以被 Cloud Functions 消费的 Cloud Pub/Sub 主题。在[这里](https://cloud.google.com/logging/docs/export/configure_export)参看更多关于 Cloud Logging 的文档。 79 | 80 | ###GMail 81 | 82 | 使用 [GMail推送通知 API](https://developers.google.com/gmail/api/guides/push) 你可以把 GMail 事件发送给 loud Pub/Sub 主题并交给 Cloud Functions 处理。 83 | -------------------------------------------------------------------------------- /TODO/GoogleCloudFunctions/catlog.md: -------------------------------------------------------------------------------- 1 | [入门](./quick-starts.md) 2 | [开始](./getting-started.md) 3 | [编写](./writing-cloud-functions.md) 4 | [部署](./deploying-cloud-functions.md) 5 | [调用](./calling-cloud-functions.md) 6 | [例子](./walkthroughs.md) 7 | [命令](./command-reference.md) 8 | -------------------------------------------------------------------------------- /TODO/GoogleCloudFunctions/command-reference.md: -------------------------------------------------------------------------------- 1 | * 原文[Command Reference](https://cloud.google.com/functions/reference) 2 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 3 | * 译者 : [huanglizhuo](https://github.com/huanglizhuo) 4 | * 校对者: [shenxn](https://github.com/shenxn) [CoderBOBO](https://github.com/CoderBOBO) [edvarHua](https://github.com/edvardHua) 5 | 6 | 7 | ##命令行参考 8 | 9 | ###Cloud Functions 命令行界面 10 | 11 | Google Cloud Functions 通过 gcloud SDK 提供了一个命令行界面(CLI)。如果你读过[入门](.getting-started.md)章节，那么你应该已经安装了这个工具了。 12 | 13 | ###认证 14 | 15 | 执行下面的命令给 gcloud 工具进行认证: 16 | 17 | > $ gcloud auth login 18 | 19 | ###CLI 方法 20 | 21 | 查看 gcloud 工具的全部方法列表，执行: 22 | 23 | > $ gcloud alpha functions -h 24 | 25 | 常用的方法如下: 26 | 27 | ``` 28 | call 同步调用该函数 29 | delete 删除一个函数 30 | deploy 创建一个新函数或者更新一个已经存在的函数 31 | describe 显示函数的相关描述 32 | get-logs 显示给定函数产生的日志 33 | list 列出给定区域的全部函数 34 | ``` 35 | 36 | 可以通过给单个命令添加一个 -h 参数来查看该命令的详细帮助文档，比如: 37 | 38 | >$ gcloud alpha functions call -h 39 | -------------------------------------------------------------------------------- /TODO/GoogleCloudFunctions/getting-started.md: -------------------------------------------------------------------------------- 1 | * 原文[Getting Started](https://cloud.google.com/functions/getting-started) 2 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 3 | * 译者 : [huanglizhuo](https://github.com/huanglizhuo) 4 | * 校对者: [shenxn](https://github.com/shenxn) [CoderBOBO](https://github.com/CoderBOBO) [edvarHua](https://github.com/edvardHua) 5 | 6 | 7 | #入门 8 | 9 | 使用 [Google Cloud Functions](https://cloud.google.com/functions/docs/) 的准备工作： 10 | 11 | 1. 要是你还没有 Google 账户的话[点击这里创建](https://accounts.google.com/SignUp) 12 | 13 | 2. 在你的 Google 账户中创建一个结算账户 14 | 15 | 为了使用 Google Cloud Function 你必须开启你计划使用的云工程的结算渠道，前提是你必须先有个可以结算的账户 16 | 17 | 如果你没有可以结算的账户，那么点击[这里](https://console.cloud.google.com/billing?_ga=1.11430708.1008720489.1449201561) 创建一个 18 | 19 | 3. 创建 Cloud Platform 工程 20 | 21 | 我们建议大家创建一个新的工程体验 Google Cloud Functions。当然你也可以使用已经创建的工程。点击[这里](https://console.cloud.google.com/project?_ga=1.203378321.1008720489.1449201561)创建新的项目。 22 | 23 | 4. 给你的项目开启结算 24 | 25 | 你要使用的云项目必须开启结算。可以在[这里](https://console.cloud.google.com/project?_ga=1.203378321.1008720489.1449201561) 开启结算。 26 | 27 | 5. 开启云函数 APIs 28 | 29 | 在开始使用 Cloud Functions 前，你需要确保 Cloud Functions API(以及所有的依赖 API ) 是开启的。你可以在[这里](https://console.cloud.google.com/flows/enableapi?apiid=cloudfunctions,container,compute_component,storage_component,pubsub,logging,source&pli=1&_ga=1.1977009.1008720489.1449201561)开启云函数 APIs 30 | 31 | 这将会开启下面的云平台 APIs 32 | 33 | * Google Cloud Functions 34 | * Google Container Engine 35 | * Google Compute Engine 36 | * Google Cloud Pub/Sub 37 | * Google Cloud Logging 38 | * Google Cloud Storage 39 | * Cloud Source Repositories 40 | 41 | 6. 安装 Google Cloud SDK 42 | 43 | 这份文档中的 walkthrough 例子就是使用的 gcloud 命令行工具可以在 Cloud SDK 中找到。安装和设置 Cloud SDK 的指导文档请参看 Cloud SDK 的[安装和快速开始](https://cloud.google.com/sdk) 44 | 45 | 接下来在你自己的机器上用下面的命令进行认证： 46 | 47 | > $ gcloud auth login 48 | 49 | 在 gcloud 中设置活跃项目，这个项目是应该是你之前选择的同一个项目： 50 | 51 | > $ gcloud config set project 52 | 53 | 参看 [Cloud Platform Console projects page](https://console.cloud.google.com/project?_ga=1.241528706.1008720489.1449201561) 来确定 或者通过 Google CLoud Platform Console 的控制台查找 ID 54 | 55 | ``` 56 | 注意:这里的 project ID 可能和 Cloud Platform Console 顶部显示的项目名字不一样 57 | 58 | ``` 59 | 60 | 开启 alpha 特性访问 Cloud Functions: 61 | 62 | > $ gcloud components update alpha 63 | 64 | 执行 gcloud functions 帮助命令确定所有都就绪了(别忘了加上 alpha 参数): 65 | 66 | > $ gcloud alpha functions -h 67 | -------------------------------------------------------------------------------- /TODO/GoogleCloudFunctions/quick-starts.md: -------------------------------------------------------------------------------- 1 | * 原文[Quickstarts - Guides](https://cloud.google.com/functions/docs) 2 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 3 | * 译者 : [huanglizhuo](https://github.com/huanglizhuo) 4 | * 校对者: [shenxn](https://github.com/shenxn) [CoderBOBO](https://github.com/CoderBOBO) [edvarHua](https://github.com/edvardHua) 5 | 6 | 7 | ##什么是 Google 云函数(Google Cloud Function)? 8 | 9 | ``` 10 | Alpah 11 | 12 | 这是 Google Cloud Function 的 Alpha 版。这些特性可能会通过向后兼容的方式进行改变，并且不推荐大家把它用到生成环境。它适用任何生产层面的协议（SLA -- service-level agreement ）或者弃用策略的附属物。[申请列入白名单以使用此特性](https://docs.google.com/forms/d/1WQNWPK3xdLnw4oXPT_AIVR9-gd6DLo5ZIucyxzSQ5fQ/viewform) 13 | 14 | ``` 15 | 16 | Google Cloud Functions 是一个轻量的，基于事件的，异步的计算解决方案，用于创建小而简单的函数。这些函数不需要管理服务器或者运行环境，只需要对云事件做出及时的响应即可。 17 | 18 | Google Cloud Function 用 JavaScript 编写并在 Google Cloud Platform 管理的 Node.js 环境中运行。由 Google Cloud Storage 和 Google Cloud Pub/Sub 产生的事件异步触发 Cloud Function，你也可以通过 HTTP 触发并同步执行 19 | 20 | ##云事件(Cloud Events)和触发器 21 | 22 | 云事件是指发生在你云环境中的事件。它们可能是数据库中数据的更改、存储系统中文件的添加，或者是创建了一个新的虚拟主机实例。 23 | 24 | 事件是不论你是否决定去响应都会发生的。创建一个事件的响应是通过触发器来实现的。触发器用来声明你对特定的一个或一组事件感兴趣。创建触发器可以捕获事件并响应。 25 | 26 | ##云函数 27 | 28 | Cloud Functions 是用来响应事件的一种机制。你的 Cloud Functions 中包含了用于响应触发器并处理事件的代码。 29 | -------------------------------------------------------------------------------- /TODO/Testing-Schemes.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [Using Xcode's Schemes to run a subset of your tests](http://artsy.github.io/blog/2016/04/06/Testing-Schemes/) 2 | * 原文作者 : [Orta Therox](http://artsy.github.io/author/orta/) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [Tuccuay](https://github.com/Tuccuay) 5 | * 校对者 : [Dwight](https://github.com/ldhlfzysys), [LoneyIsError](https://github.com/LoneyIsError) 6 | 7 | # 使用 Xcode 的 Scheme 来跑不同的测试集合 8 | 9 | [Eigen](https://github.com/artsy/eigen) 这个项目用来介绍测试集再好不过。这个项目在过去3年里，程序包的大小，复杂度和开发人员的数量都不断增加，这是积极的迹象。这种测试模式让我们对这些变化更加顺手。 10 | 11 | 在我最快的计算机上，我们只需要等一分钟—— `Executed 1105 tests, with 1 failure (0 unexpected) in 43.221 (48.201) seconds` 来执行整个测试集。我觉得我可以只用 20 秒来完成，所以我研究了如何用 [AppCode](https://www.jetbrains.com/objc/) 处理运行测试，这份指南可以让你基于这个技术轻松的在 Xcode 里搭建起测试集。 12 | 13 | 我曾经有一个 [点子](https://github.com/orta/life/issues/71) 在通常的测试中去节约时间，基于 [代码注入](http://artsy.github.io/blog/2016/03/05/iOS-Code-Injection/) ，但它并没有完全解决问题，我希望是时间密集型的，当时还没有完全达到要求。 14 | 15 | ### 什么是 Schemes？ 16 | 17 | > 一个 Xcode scheme 定义了编译集合中的若干 target，编译时的一些设置以及要执行的测试集合。 18 | > 19 | > 如果你想的话，你可以自定义若干个 schemes，但是你同一时刻只能运行一个。你可以定义 scheme 是保存于一个工程中，也就是 scheme 是否针对所有包含那个工程的 workspace，否则就只是针对此 workspace。当你选中了一个 scheme，你也就选择了一个运行目标（也就是选择的产品构建的硬件架构）。 20 | 21 | 引用自 [Apple](https://developer.apple.com/library/ios/featuredarticles/XcodeConcepts/Concept-Schemes.html)。 22 | 23 | ### 规划 Scheme 24 | 25 | 这个测试测试集大概有 50 个单元测试，看起来像是这样： 26 | 27 | ![Tests](http://artsy.github.io/images/2016-04-06-Testing-Schemes/tests.png) 28 | 29 | 在你开始之前，你可能会说：“我只想做一些有关 Fairs 的测试”。因为我接下来的几天都将为了这个目标而努力。为了准备开始，我需要创建一个新的 Scheme。当你点击 Xcode 左上角的 Target / Sim 按钮的时候你就会看见这个 schemes。 30 | 31 | ![Empty Scheme](http://artsy.github.io/images/2016-04-06-Testing-Schemes/empty_scheme.png) 32 | 33 | 在我看来，当我们需要创建一个新的 scheme 的时候，Xcode 会 modal(译注："modal" 是弹出浮窗) 出一个选择窗口，你可以在这个窗口里选择 App 的 target，当你选择好某一个 target 时，你就可以按下 `cmd + r` 来运行这个 target。 34 | 35 | ![New Scheme](http://artsy.github.io/images/2016-04-06-Testing-Schemes/new_scheme.png) 36 | 37 | 我给它起名叫 "Artsy just for Fairs"，因为我是唯一会看到它的人，所以我可以随意命名成我想要的。点击 "OK" 选择它，这个 modal 会被收起。你现在需要回到 target 选择，并且选择 "Edit Schemes ..." 来继续。 38 | 39 | ![Edit Schemes](http://artsy.github.io/images/2016-04-06-Testing-Schemes/edit_schemes.png) 40 | 41 | ### 做一些修正 42 | 43 | 现在，在侧栏中点击 "Test"，现在你进入了 Schemes 测试编辑器。这将是你接下来要干活的地方。 44 | 45 | ![Empty Edit Schemes](http://artsy.github.io/images/2016-04-06-Testing-Schemes/empty_edit_schemes.png) 46 | 47 | 你需要点击 "+" 来把你的测试 Target 添加到 Scheme 48 | 49 | ![Test Scheme](http://artsy.github.io/images/2016-04-06-Testing-Schemes/test_scheme.png) 50 | 51 | 选择并 "Add" 你的 Targets。这样你的 target 就成功的被添加了，然后你需要点击向下箭头让他来显示所有单元测试。 52 | 53 | __来，给你表演个魔法__。按住 `alt` 并单击蓝色的的标记框把测试 target 关闭。然后不按住 `alt` 再单击一次。这将会取消选择所有的类，这是所有 Mac 应用都可以进行的通用操作，所以不要在意。 54 | 55 | ![Deselect All](http://artsy.github.io/images/2016-04-06-Testing-Schemes/deselect_all.png) 56 | 57 | 这就意味这你可以去寻找你想要运行的类，对我来说，我想要运行关于 Fairs 的单元测试。 58 | 59 | ![Just The Good Tests](http://artsy.github.io/images/2016-04-06-Testing-Schemes/just_the_good_tests.png) 60 | 61 | 现在当我按下 `cmd + u` 就将指运行这些测试类。 62 | 63 | ### 封装起来 64 | 65 | 这意味着我可以以合理的步调继续我的工作了。`Executed 15 tests, with 0 failures (0 unexpected) in 0.277 (0.312) seconds`。现在我可以在我泡一杯茶的时间内运行一遍完整的单元测试集了。 66 | 67 | __额外提醒__：如果你不想用鼠标来改变 scheme，这些 [快捷键](http://artsy.github.io/images/2016-04-06-Testing-Schemes/next_prev.png) 可以让你在 scheme 之间上(``cmd + ctrl + [``)下(`cmd + ctrl + ]`)切换。 68 | -------------------------------------------------------------------------------- /TODO/Using-Flutter-in-China.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Using Flutter in China](https://github.com/flutter/flutter/wiki/Using-Flutter-in-China) 2 | > * 原文作者：[Flutter](https://github.com/flutter) 3 | > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/Using-Flutter-in-China.md](https://github.com/xitu/gold-miner/blob/master/TODO/Using-Flutter-in-China.md) 5 | > * 译者：[mysterytony](https://github.com/mysterytony) 6 | > * 校对者：[hanliuxin5](https://github.com/hanliuxin5), [Starriers](https://github.com/Starriers) 7 | 8 | # 在中国使用 Flutter 9 | 10 | 如果你在中国安装或使用 Flutter ，可以用一个可信的本地镜像来托管 Flutter 的依赖关系。为了让 Flutter 能使用一个备用的在线访问地址，你需要在运行 `flutter` 指令之前设置两个环境变量：`PUB_HOSTED_URL` 和 `FLUTTER_STORAGE_BASE_URL`。 11 | 12 | 比如说，在 MacOS 或 Linux 上，为了让你能使用镜像站点，下面是首先需要进行的一系列设置步骤。在你想要存储克隆下来的 Flutter 文件夹下运行下面的 Bash 命令： 13 | 14 | ```source-shell 15 | export PUB_HOSTED_URL=https://pub.flutter-io.cn 16 | export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn 17 | git clone -b dev https://github.com/flutter/flutter.git 18 | export PATH="$PWD/flutter/bin:$PATH" 19 | cd ./flutter 20 | flutter doctor 21 | ``` 22 | 23 | 然后，你就应该可以继续正常地 [配置 Flutter](https://flutter.io/setup/)。从现在开始，在有 `PUB_HOSTED_URL` 和 `FLUTTER_STORAGE_BASE_URL` 环境变量的控制台用 `flutter packages get` 下载的包将会从 `flutter-io.cn` 下载。 24 | 25 | `flutter-io.cn` 服务器是 Flutter 一个由 [GDG China](http://www.chinagdg.com/) 维护的依赖和包的临时镜像。Flutter 团队不能保证这个服务的长期可用性。你可以自由使用其他可用的镜像。如果你对在中国建立你自己的镜像感兴趣，请联系 [flutter-dev@googlegroups.com](mailto:flutter-dev@googlegroups.com) 以获得协助。 26 | 27 | 已知问题： 28 | 29 | * 从源码运行 Flutter Gallery 程序需要的资源目前托管在这个解决方案暂不支持的域名。你可以订阅 [这个问题](https://github.com/flutter/flutter/issues/13763) 的更新。同时，你也可以在 Google Play 或者你信任的第三方商店看看 Flutter Gallery。 30 | 31 | 32 | --- 33 | 34 | > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 35 | -------------------------------------------------------------------------------- /TODO/a-cartoon-intro-to-webassembly.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[A cartoon intro to WebAssembly](https://hacks.mozilla.org/2017/02/a-cartoon-intro-to-webassembly/) 2 | > * 原文作者：本文已获作者 [Lin Clark](https://code-cartoons.com/@linclark) 授权 3 | > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | > * 译者： [根号三](https://github.com/sqrthree) 5 | > * 校对者：[Reid](https://github.com/reid3290)、[Tina92](https://github.com/Tina92) 6 | 7 | # 看漫画，学 WebAssembly 8 | 9 | WebAssembly 运行得很快，你可能已经听说过这个了。但是是什么让 WebAssembly 这么快呢？ 10 | 11 | 在这个系列的文章里，我想和你解释一下为什么 WebAssembly 这么快。 12 | 13 | ## 等等，WebAssembly 究竟是什么？ 14 | 15 | WebAssembly 是一种用 JavaScript 以外的编程语言编写代码并在浏览器中运行该代码的方法。因此当人们说 WebAssembly 运行得很快的时候，通常他们都是在和 JavaScript 进行比较。 16 | 17 | 现在，我不想暗示这是一个二选一的情况 —— 你要么用 WebAssembly 或者用 JavaScript。事实上，我们期望开发者能够在同一个应用里面同时使用 WebAssembly 和 JavaScript。 18 | 19 | 但是比较一下这二者是非常有用的，你可以因此理解 WebAssembly 将会具有的潜在影响。 20 | 21 | ## 一点性能历史 22 | 23 | JavaScript 创建于 1995 年。它不是为了快而设计的，并且在最初前十年，它并不快。 24 | 25 | 然后浏览器之间的竞争开始变得愈演愈烈。 26 | 27 | 在 2008 年，人们所谓的“性能战争”时期开始了。很多浏览器都添加了即时编译器 —— 也叫做 JIT。当 JavaScript 运行时，JIT 可以看到模式（pattern）并且基于这些模式（pattern）让代码运行得更快。 28 | 29 | 这些 JIT 的引入致使 JavaScript 的性能进入了一个转折点。JS 的执行速度快了 10 倍。 30 | 31 | ![A graph showing JS execution performance increasing sharply in 2008](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/01-01-perf_graph05-500x409.png) 32 | 33 | 通过这种性能的改善，JavaScript 开始被用于没有人期望用它来做的一些事情上。例如使用 Node.js 进行服务端编程。性能的改善使得在一个全新的问题上使用 JavaScript 成为了可能。 34 | 35 | 伴随着 WebAssembly，我们现在可能正处于另一个转折点。 36 | 37 | ![A graph showing another performance spike in 2017 with a question mark next to it](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/01-02-perf_graph10-500x412.png) 38 | 39 | 因此，让我们深入细节之中，来理解是什么使得 WebAssembly 很快。 40 | 41 | [第二篇传送门](https://github.com/xitu/gold-miner/blob/master/TODO/a-crash-course-in-just-in-time-jit-compilers.md) 42 | -------------------------------------------------------------------------------- /TODO/a-crash-course-in-assembly.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[A crash course in assembly](https://hacks.mozilla.org/2017/02/a-crash-course-in-assembly/) 2 | > * 原文作者：本文已获作者 [Lin Clark](https://code-cartoons.com/@linclark) 授权 3 | > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | > * 译者：[zhouzihanntu](https://github.com/zhouzihanntu) 5 | > * 校对者：[Tina92](https://github.com/Tina92)、[zhaochuanxing](https://github.com/zhaochuanxing) 6 | 7 | # 汇编快速入门 8 | 9 | **本文是 WebAssembly 系列文章的第三部分。如果你还没有阅读过前面的文章，我们建议你 [从头开始](https://github.com/xitu/gold-miner/blob/master/TODO/a-cartoon-intro-to-webassembly.md)。** 10 | 11 | 理解汇编和编译器如何生成它的有助于你后续理解 WebAssembly 的工作原理， 12 | 13 | 在 [介绍 JIT 的文章](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/)里，我谈到了与机器交流的方式和与外星人通信是相似的。 14 | 15 | ![A person holding a sign with source code on it, and an alien responding in binary](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/03-01-alien03-500x286.png) 16 | 17 | 我现在真想看看外星人大脑的思考方式——即机器大脑解析和理解通信的机制。 18 | 19 | 大脑中有一部分专门用来思考（例如做加减或其他逻辑运算），一部分提供短期记忆存储，还有一部分提供长期记忆存储。 20 | 21 | 这几个不同的部分都有各自的名称： 22 | 23 | - 负责思维的部分称为算术逻辑单元 (ALU)。 24 | - 短期存储由寄存器提供。 25 | - 长期存储由随机存取存储器 (RAM) 提供。 26 | 27 | ![A diagram showing the CPU, including ALU and Registers, and RAM](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/03-02-computer_architecture09-500x302.png) 28 | 29 | 机器码中的句子被称为指令。 30 | 31 | 当一条指令进入大脑时会发生什么？它会被分解成带不同含义的不同部分。 32 | 33 | 指令分解的方式是特定于当前大脑构造的。 34 | 35 | 例如，这种结构的大脑可能总是将前六个字节传送给 ALU。ALU 根据接收到的序列中 1 和 0 的排列，就会明白需要将两个东西加在一起。 36 | 37 | 这个字段称为操作码(opcode)，它的作用是告诉 ALU 要执行的操作。 38 | 39 | ![6-bits being taken from a 16-bit instruction and being piped into the ALU](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/03-03-computer_architecture12-500x354.png) 40 | 41 | 接下来大脑会取后续两个三字节的字段来确定要相加的两个数。这两个数会存储在寄存器中。 42 | 43 | ![Two 3-bit chunks being decoded to determine source registers](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/03-04-computer_architecture17-500x352.png) 44 | 45 | 注意这里机器码上方的注释，有助于我们理解这个过程。这就叫做汇编。这段代码称为符号机器码。符号机器码是人类理解机器码的一种方式。 46 | 47 | 你会发现汇编和这台机器的机器码有很直接的关系。因此不同的机器架构对应有不同的汇编方式。当你遇到使用不同架构的机器时，可能就得按它们自己的方式进行汇编。 48 | 49 | 因此，我们的翻译对象并不止一个。机器码不止一种语言，有许多不同种类的机器码。就像我们人类会说不同的语言一样，机器也会使用不同的语言。 50 | 51 | 随着人类和外星人之间的翻译问题解决，你也可以将英语、俄语、普通话等语言转化成外星文A、外星文B了。对编程而言，就是将 C、C++、Rust 等语言转化成 x86、ARM。 52 | 53 | 如果你想将任意一种高级语言编译成对应任意体系结构的汇编语言，一种方法是创建一整套不同语言到不同汇编的转化器。 54 | 55 | ![Diagram showing programming languages C, C++, and Rust on the left and assembly languages x86 and ARM on the right, with arrows between every combination](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/03-05-langs05-500x308.png) 56 | 57 | 但这样的做法非常低效。大部分编译器会在中间放置至少一个中间层。编译器接收高级编程语言并将其转化成相对底层的形式，转化结果也不能和机器码一样直接运行。这类形式称为中间表示(IR)。 58 | 59 | ![Diagram showing an intermediate representation between high level languages and assembly languages, with arrows going from high level programming languages to intermediate representation, and then from intermediate representation to assembly language](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/03-06-langs06-500x317.png) 60 | 61 | 这意味着编译器可以将任意一种高级编程语言翻译成一种 IR 语言。编译器的另一部分将得到的 IR 内容编译成特定于目标架构的语言。 62 | 63 | 编译器的前端部分将高级编程语言翻译成 IR 语言，再由后端将它们从 IR 语言编译成目标架构的汇编代码。 64 | 65 | ![Same diagram as above, with labels for front-end and back-end](https://2r4s9p1yi1fa2jd7j43zph8r-wpengine.netdna-ssl.com/files/2017/02/03-07-langs09-500x306.png) 66 | 67 | ## 总结 68 | 69 | 以上就是汇编的简要说明，以及编译器将高级程序语言转成汇编的过程。在[下一篇文章](https://github.com/xitu/gold-miner/blob/master/TODO/creating-and-working-with-webassembly-modules.md)里，我们将会看到 WebAssembly 是如何实现的。 70 | -------------------------------------------------------------------------------- /TODO/a-simple-web-app-in-rust-conclusion.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[A Simple Web App in Rust, Conclusion: Putting Rust Aside for Now](http://joelmccracken.github.io/entries/a-simple-web-app-in-rust-conclusion/) 2 | > * 原文作者：[Joel's Journal](http://joelmccracken.github.io/) 3 | > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/a-simple-web-app-in-rust-conclusion.md](https://github.com/xitu/gold-miner/blob/master/TODO/a-simple-web-app-in-rust-conclusion.md) 5 | > * 译者：[mysterytony](https://github.com/mysterytony) 6 | > * 校对者：[pthtc](https://github.com/pthtc) 7 | 8 | # 使用 Rust 开发一个简单的 Web 应用之总结篇：还是先把 Rust 放一边吧 9 | 10 | **警告：这篇文章充满了主见。虽然 Rust 社区可能不会很震惊，但我还是想列出这一系列。** 11 | 12 | 多年前，我编辑过一系列以《Building a Simple Webapp in Rust》为标题的博客。我希望有一天能重新开始编辑，但是我没有，我甚至怀疑我能不能完成这一系列的创作 —— 现在来看，那个博客里几乎所有内容都是过时的。 13 | 14 | 但不可忽视的是，这个项目还是成功的，因为我学到了很多关于 Rust 的知识。 15 | 16 | 我最终还是停止了这个项目，也停止了学习 Rust 。为什么？简单来说，相比于其他互联网的领域，我开始怀疑 Rust 是否**对我来说**有足够的价值。对我来说有一点是很清楚的，那就是当需要对硬件和性能有严格控制的时候， Rust 是一个很不错的语言。如果给我一个有这些要求的项目，我肯定会重新使用 Rust 。当需要我在 Rust 和 C++ 中做出选择的话，我会选择 Rust 。 17 | 18 | 但是，在大多数我写过的软件里，硬件管理通常不是一个很重要的因素。我也从来没有写过 C++ ，因为需要权衡开发时间，简洁性和可维护性才是最重要的因素。性能问题几乎总可以等到软件能正常工作之后再来处理，例如通过一些性能测试和聪明的优化。 19 | 20 | 一个激励我继续研究 Rust 的原因是，有人说过 Rust 是对他们来说效率最高的语言，同时对一般程序员来说是也是效率最高的语言。其中的原因是，Rust 的 Ownership 机制让他们更多地思考代码，并在某些方面显著地改善着设计。但这个理由不足以让我对 Rust 倾注过多时间，还是把时间花在别的事上吧。 21 | 22 | 总而言之，我决定还是学习其他东西比较好。特别是 Haskell （最初由 Elm 演变而来）以及其他对系统有很大影响的语言。 23 | 24 | — 25 | 26 | 系列：用 Rust 做的简单网页 27 | 28 | * [部分 1](http://joelmccracken.github.io/entries/a-simple-web-app-in-rust-pt-1/) 29 | * [部分 2a](http://joelmccracken.github.io/entries/a-simple-web-app-in-rust-pt-2a/) 30 | * [部分 2b](http://joelmccracken.github.io/entries/a-simple-web-app-in-rust-pt-2b/) 31 | * [部分 3](http://joelmccracken.github.io/entries/a-simple-web-app-in-rust-pt-3/) 32 | * [部分 4](http://joelmccracken.github.io/entries/a-simple-web-app-in-rust-pt-4-cli-option-parsing/) 33 | * [总结](http://joelmccracken.github.io/entries/a-simple-web-app-in-rust-conclusion/) 34 | 35 | 36 | --- 37 | 38 | > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 39 | -------------------------------------------------------------------------------- /TODO/after-a-year-of-nodejs-in-production.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [AFTER A YEAR OF USING NODEJS IN PRODUCTION](http://geekforbrains.com/post/after-a-year-of-nodejs-in-production) 2 | * 原文作者 : [GEEK FOR BRAINS](http://geekforbrains.com/) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [cdpath](https://github.com/cdpath) 5 | * 校对者: [godofchina](https://github.com/godofchina) , [Zhangjd](https://github.com/Zhangjd) 6 | 7 | # 在生产环境中使用 NODEJS 一年记 8 | 9 | 本文是[「我为什么弃 Python 从 Node.js」](http://geekforbrains.com/post/why-im-switching-from-python-to-node-js)一文的续集。一年多前，我因为对 Python 的挫败，还想解释为什么转而尝试 Node ，故写下那篇文章。 10 | 11 | 一年后，公司内部的 CLI（命令行） 工具，客户项目以及[我司](http://inputlogic.ca)产品的更新，这些都是我学到的。不仅仅是 Node，基本上对 JavaScript 也学到不少。 12 | 13 | ### 易学难精 14 | 15 | Node 学起来很容易，尤其是对有 JavaScript 的基础的人。谷歌搜索一些入门教程，折腾一会儿 Express，就可以上道了，不是吗？然后你发现需要折腾数据库。没问题，搜索 NPM。哦，发现不少适用的 SQL 包。稍后你意识到所有的 ORM（对象关系映射）工具都很糟糕，最基本的数据库引擎才是最好的选择。然后就陷在手动实现冗余模型和验证逻辑的泥潭中不能自拔。随后你开始写更复杂的检索语句，开始迷失在回调函数中。自然，你读到了回调函数大坑，砍掉圣诞树，开始选一个 promise 库来用。现在你 Promisify 了一切，终于可以干一杯啤酒了。 16 | 17 | 上面实际是在说 Node 生态系统仍在经历持续的变革。这不是什么好事。好像每天都有更好的工具涌现取代旧工具。总有新奇的玩意可以取代其他东西。你会感到诧异这些竟会轻易发生在自己头上，而社区在似乎鼓励这种行为。你在用 Grunt！？大家都在用 Gulp！？等等，不对，应该用原生 NPM 脚本！ 18 | 19 | NPM 有些包只有不足十行代码，每天会被下载数千次。开什么玩笑！？检查个数组类型也要有依赖？甚至诸如 React 和 Babel 的巨型工具也在用这些包。 20 | 21 | 高速变革的技术根本无法掌握，更别提依赖包潜在的不稳定性。 22 | 23 | ### 处理错误，自求多福 24 | 25 | 如果用过 Python，Ruby 或 PHP 这类语言，你可能觉得通过抛出并捕获错误，甚至用函数返回错误的方式来处理错误再自然不过了。但是 Node 不行。相反，你必须用回调函数（或者 promise）传递错误，没错，就是不能抛出异常。当你深陷数个回调函数还试图跟踪调用栈的时候，Node 这种机制就没法用了。更不用说如果你忘了返回一个错误的回调函数，Node 会在你返回第一个错误之后继续运行然后引发其他错误。你会翻倍客户的费用来弥补 debug 的时间。 26 | 27 | 哪怕你想方设法构造了可靠的自定义错误标准，你也无法（在不阅读源码的前提下）保证已安装的所有 NPM 包都遵循相同的标准模板。 28 | 29 | 这些问题直接带来了「全捕获」异常处理器的使用，干脆直接记录下问题然后让你的 App 优雅地去屎。牢记，Node 是单线程。如果进程被锁，所有东西都会崩溃。不过这也没什么，你反正可以用 Forever，Upstart 还有 Monit 对吗？ 30 | 31 | ### 回调函数，Promise 还是生成器？ 32 | 33 | 为了搞定回调函数大坑，错误处理以及基本上很难读懂的逻辑，越来越多的开发者开始用 Promise。基本上就是用一种看上去像异步代码的东西来回避可怕的回调函数逻辑。不幸的是并没有一个标准（跟 Javascript 中的其他东西一样一样的）来规范该如何执行或使用 promise。 34 | 35 | 现在最值得注意的是 [Bluebird](http://bluebirdjs.com/docs/getting-started.html)。相当不错，速度快，用来搞一些「够用」的小东西相当不错。但是我觉得不得不把必要的东西都包裹在 `Promise.promisifyAll()` 简直是跑偏了。 36 | 37 | 大多数时候，我最后还是会用优秀的 [async](https://github.com/caolan/async) 库来收拾回调函数这一烂摊子。感觉自然多了。 38 | 39 | 在我体验 Node 进入尾声的时候，生成器越来越流行了。我没有很深入了解生成器，所以没什么好反馈的。希望能听到对此有经验的人的声音。 40 | 41 | ### 糟糕的标准 42 | 43 | 最后一件令我沮丧的东西就是标准的缺失。似乎每个人都对上述几点有自己的想法。回调函数？ Promise？错误处理？构建脚本？这话题根本说不完。 44 | 45 | 这还只是冰山一角。当然似乎也没有人能就如何写标准的 Javascript 达成共识。随手 Google 一把「Javascript 编程标准」你就懂我意思了。 46 | 47 | 我意识到许多语言都没有严格的结构，但是这些语言的维护者却都给出了编程标准。 48 | 49 | 我唯一能想到的还不错的 Javascript编程标准来自 [Mozilla](https://developer.mozilla.org/en-US/docs/Mozilla/Developer_guide/Coding_Style)。 50 | 51 | ### Node 终极感想 52 | 53 | 我花了一年的工夫尝试让我的团队使用 Javascript（具体地说是 Node）。但是这一年来我们浪费在追更新的文档，构想标准，争论使用哪个库以及 debug 无关紧要的代码的时间比其他事情还要多。 54 | 55 | 我会建议已具有较大规模的产品使用 Node 吗？当然不。那有人坚持这样干吗？当然。连我都试了。 56 | 57 | 我还是会向前端开发者推荐诸如 Angular 或 React 的 Javascript 库（好像你还有别的选择似地）。 58 | 59 | 如果后端服务器较简单，只是用来做 websockets 或 API 转发的话，我还是会推荐 Node。用 Express 实现起来很容易，我们的 [Quoterobot](https://quoterobot.com/) PDF 处理服务器就是这么搞的。只用了一个算上空格和注释才 186 行代码的脚本。而且完全可以胜任。 60 | 61 | ### 回到 Python 62 | 63 | 那你现在估计在寻思，我现在在搞啥呢？现在啊，我的大部分 web 产品和 API 的开发工作都是用 Python。基本上都是 Flask 或者 Django 结合 Postgres 或者 MongoDb。 64 | 65 | Python 经住了时间的检验，有众多不错的标准，库，易于 debug，完全可以胜任工作。当然 Python 也有缺点。每个语言都有，只要你开始用它编程。出于一些原因 Node 赢得了我的青睐并吸引了我。我并不后悔用过 Node，但是我还是觉得浪费了更多的时间。 66 | 67 | 我希望 Javascript 和 Node 将来有所改进。我不介意再次使用它。 68 | 69 | 你的经验又是什么呢？你也经历过我遇到的问题吗？你是否最终又重新启用了更习惯的语言呢？ 70 | -------------------------------------------------------------------------------- /TODO/android-app-optimization-using-arraymap-and-sparsearray.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Android App Optimization Using ArrayMap and SparseArray](https://medium.com/@amitshekhar/android-app-optimization-using-arraymap-and-sparsearray-f2b4e2e3dc47#.w9iubhupn) 2 | * 原文作者：[Amit Shekhar](https://medium.com/@amitshekhar) 3 | * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者：[Jamweak](https://github.com/jamweak) 5 | * 校对者：[Jacksonke](https://github.com/jacksonke), [Siegeout](https://github.com/siegeout) 6 | 7 | # 如何通过 ArrayMap 和 SparseArray 优化 Android App 8 | 9 | 10 | 这篇文章会讲述为何要使用 **ArrayMap** 和 **SparseArray** 来优化 Android 应用，以及什么情形下适用。 11 | 12 | 当你需要存储**键 -> 值**这样的数据类型时，你脑海里想到的第一个数据类型应该是 **HashMap**。然后你开始肆无忌惮地到处使用它，而从不考虑它所带来的副作用。 13 | 14 | 当你使用 HashMap 时，你的 Android 集成开发环境 (Android Studio) 会给出警告，提示你使用 ArrayMap 来代替 HashMap，但通常被你忽视了。 15 | 16 | Android 给你提供了 ArrayMap，你应该优先考虑使用它而不是 HashMap。 17 | 18 | 现在，让我们来理解 ArrayMap 的内部实现，以便探求在哪种场景下使用它，以及为什么这样做。 19 | 20 | #### HashMap vs ArrayMap 21 | 22 | 23 | HashMap 的位置在 _java.util.HashMap_ 包中。 24 | 25 | ArrayMap 的位置在 _android.util.ArrayMap_ 和 _android.support.v4.util.ArrayMap_ 包中。 26 | 27 | 它存在于 support.v4 包中，以便兼容较低的 Android 版本。 28 | 29 | [这里](https://www.youtube.com/watch?v=ORgucLTtTDI) 是直接出自 Android 开发者频道的 youtube 视频，强烈建议你看一下。 30 | 31 | ArrayMap 是一种通用的键->值映射数据结构，它在设计上比传统的 HashMap 更多考虑内存优化。 它使用两个数组来存储数据——一个整型数组存储键的哈希值，另一个对象数组存储键/值对。这样既能避免为每个存入 map 中的键创建额外的对象，还能更积极地控制这些数组的长度的增加（因为增加长度只需拷贝数组中的键，而不是重新构建一个哈希表）。 32 | 33 | 需要注意的是，ArrayMap 并不适用于可能含有大量条目的数据类型。它通常比 HashMap 要慢，因为在查找时需要进行二分查找，增加或删除时，需要在数组中插入或删除键。对于一个最多含有几百条目的容器来说，它们的性能差异并不巨大，相差不到 50%。 34 | 35 | #### HashMap 36 | 37 | HashMap 基本上就是一个 HashMap.Entry 的数组（Entry 是 HashMap 的一个内部类）。更准确来说，Entry 类中包含以下字段： 38 | 39 | * 一个非基本数据类型的 key 40 | * 一个非基本数据类型的 value 41 | * 保存对象的哈希值 42 | * 指向下一个 Entry 的指针 43 | 44 | 当有键值对插入时，HashMap 会发生什么 ? 45 | 46 | * 首先，键的哈希值被计算出来，然后这个值会赋给 Entry 类中对应的 hashCode 变量。 47 | * 然后，使用这个哈希值找到它将要被存入的数组中“桶”的索引。 48 | * 如果该位置的“桶”中已经有一个元素，那么新的元素会被插入到“桶”的头部，next 指向上一个元素——本质上使“桶”形成链表。 49 | 50 | 现在，当你用 key 去查询值时，时间复杂度是 O(1)。 51 | 52 | 虽然时间上 HashMap 更快，但同时它也花费了更多的内存空间。 53 | 54 | 缺点: 55 | 56 | * 自动装箱的存在意味着每一次插入都会有额外的对象创建。这跟垃圾回收机制一样也会影响到内存的利用。 57 | * HashMap.Entry 对象本身是一层额外需要被创建以及被垃圾回收的对象。 58 | * “桶” 在 HashMap 每次被压缩或扩容的时候都会被重新安排。这个操作会随着对象数量的增长而变得开销极大。 59 | 60 | 在Android中，当涉及到快速响应的应用时，内存至关重要，因为持续地分发和释放内存会出发垃圾回收机制，这会拖慢应用运行。 61 | 62 | **垃圾回收机制会影响应用性能表现** 63 | 64 | 垃圾回收时间段内，应用程序是不会运行的，最终应用使用上就显得卡顿。 65 | 66 | #### ArrayMap 67 | 68 | ArrayMap 使用2个数组。它的对象实例内部有用来存储对象的 Object[] mArray 和 存储哈希值的 int[] mHashes。当插入一个键值对时： 69 | 70 | * 键/值被自动装箱。 71 | * 键对象被插入到 mArray[] 数组中的下一个空闲位置。 72 | * 值对象也会被插入到 mArray[] 数组中与键对象相邻的位置。 73 | * 键的哈希值会被计算出来并被插入到 mHashes[] 数组中的下一个空闲位置。 74 | 75 | 对于查找一个 key : 76 | 77 | * 键的哈希值先被计算出来 78 | * 在 mHashes[] 数组中二分查找此哈希值。这表明查找的时间复杂度增加到了 O(logN)。 79 | * 一旦得到了哈希值所对应的索引 index，键值对中的键就存储在 mArray[2*index] ，值存储在 mArray[2*index+1]。 80 | * 这里的时间复杂度从 O(1) 上升到 O(logN)，但是内存效率提升了。当我们在 100 左右的数据量范围内尝试时，没有耗时的问题，察觉不到时间上的差异，但我们应用的内存效率获得了提高。 81 | 82 | #### 推荐的数据结构: 83 | 84 | * **ArrayMap<K,V> 替代 HashMap<K,V>** 85 | * **ArraySet<K,V> 替代 HashSet<K,V>** 86 | * **SparseArray<V> 替代 HashMap<Integer,V>** 87 | * **SparseBooleanArray 替代 HashMap<Integer,Boolean>** 88 | * **SparseIntArray 替代 HashMap<Integer,Integer>** 89 | * **SparseLongArray 替代 HashMap<Integer,Long>** 90 | * **LongSparseArray<V> 替代 HashMap<Long,V>** 91 | -------------------------------------------------------------------------------- /TODO/backend-api-documentation-in-swift.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Backend API Documentation in Swift](https://medium.com/ios-os-x-development/backend-api-documentation-in-swift-92b4874e4f78#.g2ofuey9d) 2 | * 原文作者：[Christopher Truman](https://medium.com/@iamchristruman?source=post_header_lockup) 3 | * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者：[Nicolas(Yifei) Li](https://github.com/yifili09) 5 | * 校对者：[Siegen](https://github.com/siegeout), [DeadLion](https://github.com/DeadLion) 6 | 7 | # 有关用 Swift 访问后端服务器的 API 文档中 8 | 9 | 我最近开始开发一个全新的项目，并且我正尝试一些新的设计模式，因为我开始投身于 `Swift 3`。我正使用的一个模式是“请求和响应模型”。这个“酷炫”的名字是我为记录这个后台 `API` 文档中的 `Struct` (结构体)。让我们来看一个例子： 10 | 11 | ``` 12 | import Alamofire 13 | 14 | protocol Request { 15 | var path : String { get } 16 | var method : Method { get } 17 | func parameters() -> [String : AnyObject] 18 | } 19 | 20 | struct AuthRequest : Request { 21 | let path = "auth" 22 | let method = Method.POST 23 | 24 | var password : String 25 | var password_verify : String 26 | var name : String 27 | var email : String 28 | 29 | func parameters() -> [String : AnyObject] { 30 | return ["password" : password, "password_verify" : password_verify, "name" : name, "email" : email] 31 | } 32 | } 33 | ``` 34 | 35 | 我们申明了一个 `Request` 协议，关于你所需要知道发起一个 `API` 请求的所有内容，它基本上都明确指出来了。 36 | 37 | * 需要添加进基本地址 (`URL`) 的路径（本例中是 `auth` ） 38 | * `HTTP` 方法（`GET`, `POST`, `PUT`, `DELETE` 等等） 39 | * 端点所要求的参数 40 | 41 | 为了需要的信息，你可以扩展这个协议，例如某个指定的 `ContentType` 或者其他 `HTTP` 报头。你能想象到增加一些验证规则，（请求）完成处理方法，或者与这个协议网络请求有关的任何东西。 42 | 43 | 所有这些结构体现在应该看上去像一个简明扼要的 `API` 文档，并且为你的网络操作提供了一些框架结构和类型安全验证。你可以把这些请求的结构体转变成你最喜欢的网络客户端。我有一个例子 [Alamofire](https://github.com/Alamofire/Alamofilre/tree/swift3) 44 | 45 | ``` 46 | class Client { 47 | var baseURL = "http://dev.whatever.com/" 48 | 49 | func execute(request : Request, completionHandler: (Response) -> Void){ 50 | Alamofire.request(request.method, baseURL + request.path, parameters: request.parameters()) 51 | .responseJSON { response in 52 | completionHandler(response) 53 | } 54 | } 55 | } 56 | 57 | Client().execute(request: AuthRequest(/*Insert parameters here*/), completionHandler: { response in } ) 58 | ``` 59 | 60 | 我们把 `AuthRequest` 对象传递给 `Alamofire`，它需要一个通用的对象去确认 `Request` 协议。它使用来自协议中规定的属性/方法来构造并执行一个网络请求。 61 | 62 | 现在我们已经定义了这个请求的结构体，并且使用它简单的访问服务器。我们现在需要处理响应。我们的 `AuthRequest` 返回一个不太大的用户 `JSON` 对象，我们需要把它序列化成一个 `Swift` 对象。 63 | 64 | ``` 65 | struct UserResponse { 66 | var _id : String 67 | var first_name : String 68 | var last_name : String 69 | 70 | init(JSON: [String : AnyObject]) { 71 | _id = JSON["_id"] as! String 72 | first_name = JSON["first_name"] as! String 73 | last_name = JSON["last_name"] as! String 74 | } 75 | } 76 | 77 | /* Inside our completion handler */ 78 | var user = UserResponse(JSON: response.result.value as! [String : AnyObject]) 79 | 80 | ``` 81 | 82 | 这个实现不太花哨，但是仍然记录了响应对象的属性。你能创建一个协议，它用来定义一个 `JSON` 初始器，但是使用简单的结构体目前对我来说已经足够了。 83 | 84 | 你发现这个实现有任何问题么？ 有什么方法能让我更高效地使用协议/扩展来组成我的网络请求代码么？请让我知道！[@iAmChrisTruman](https://twitter.com/iAmChrisTruman) 85 | -------------------------------------------------------------------------------- /TODO/best-practices-in-designing-graphql-apis.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Best Practices in Designing GraphQL APIs](https://medium.com/@zavilla90/best-practices-in-designing-graphql-apis-395225bdcd1) 2 | > * 原文作者：[Zenia Villa](https://medium.com/@zavilla90?source=post_header_lockup) 3 | > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/best-practices-in-designing-graphql-apis.md](https://github.com/xitu/gold-miner/blob/master/TODO/best-practices-in-designing-graphql-apis.md) 5 | > * 译者：[Jiang Haichao](https://github.com/AceLeeWinnie) 6 | > * 校对者：[缪宇](https://github.com/goldEli), [moods445](https://github.com/moods445) 7 | 8 | # GraphQL API 设计最佳实践 9 | 10 | 以下是由 Lee Byron 提出的 GraphQL API 设计最佳实践， 他是 GraphQL 峰会上 Facebook 的设计技术专家。 11 | 12 | #### 重视命名 13 | 14 | 最常见的情况是，你命名了一个名称，意识到这个命名有问题之后，于是决定重命名。可问题是，图形化 API 中某字段一旦被客户端使用，就不可更改了。所以错误命名的成本可能是高昂的。时刻反问一个重要的问题来提醒自己：“新来的工程师是否能够明白这一命名的含义？”时刻铭记有些工程师会绕过文档，尝试各种他们想当然的字段名称。当查询书名时，通常使用 “title” 字段，这说明定义的名称需要是自文档化的，并且含义要和实际用途保持接近。 15 | 16 | #### 前瞻性设计 17 | 18 | 为了避免未来破坏性的变更，前瞻性设计十分必要。自问一个问题很有帮助：“这个产品或功能的下一个版本可能是什么样的？” 设计 API 时，心中要有下一版本的雏形，然后根据雏形设计 API。设想这个 API 是否能够支持心中理想的未来产品的需要。 19 | 20 | #### 从 Graph 角度思考，而不是 endpoint 角度 21 | 22 | 大多数传统的 API 都是从一些新的产品体验开始的，并且根据这些体验向后设计 API。GraphQL 则不同，它在一个 endpoint 中暴露所有数据。如果你考虑的是 endpoint，你可能会创建多个 object，根据用途单独定义对象，而不是描述建模数据的语义。如果你将这个问题作为 Graph 中的对象，并将数据与你正在构建的功能分离开来，结果就是一个单一的、内聚的 Graph。 23 | 24 | #### 描述数据，而不是视图 25 | 26 | 确保没有将 API 与当前客户端需求紧密联系在一起，比如手机 app。创建的 API 只用于 TV app，而不适用于 web app，这当然不是你想要的。保持关注数据的语义，而不是过多地关注视图。反问自己一个问题：“这个 API 适用于未来客户端吗？” 27 | 28 | #### GraphQL 是简化的接口 29 | 30 | 记住，GraphQL 是设计用于当前系统之上简化接口，仍然需要搭建系统。 31 | 32 | #### 隐藏实现细节 33 | 34 | 当设计 API 时，问自己的一个问题，“如果底层实现变更了怎么办？” 诸如数据库从 SQL 迁移到 Mongo 之类的。变更之后这个 API 是否仍旧适用？最佳实践允许我们快速创建原型，轻松扩展，不需要中断客户端就能部署新的服务。 35 | 36 | --- 37 | 38 | > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 39 | -------------------------------------------------------------------------------- /TODO/bootstrap-considered-harmful.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Bootstrap considered harmful](https://hiddedevries.nl/en/blog/2016-08-09-bootstrap-considered-harmful) 2 | * 原文作者：[Hidde de Vries](https://hiddedevries.nl/en/about-me/) 3 | * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者： [MAYDAY1993](https://github.com/MAYDAY1993) 5 | * 校对者： [Kulbear](https://github.com/Kulbear) [hpoenixf](https://github.com/hpoenixf) 6 | 7 | # 你考虑清楚了吗就决定用 Bootstrap ？ 8 | 9 | 近年来，在前端项目中， Bootstrap 已经成为了一个非常受欢迎的工具。 Bootstrap 的确有很多优点，然而，如果你的团队中恰好有一个专职的前端工程师。那我推荐你们不要使用 Bootstrap ，因为在某些情况下， Bootstrap 弊大于利。 10 | 11 | ## Bootstrap 对什么有好处 12 | 13 | Bootstrap 带有栅格系统，也有针对很多组件的样式和脚本，包括表格，导航栏，进度条，分页，表单样式，模态框和提示框。在这篇文章中，谈论 ‘Bootstrap’，我的意思是包含所有组件的实践（与只选择包括一部分相反，例如， _只是_栅格）。 14 | 对于需要把项目输出成标记语言，并且不想操心将结果样式化的后端开发工程师来讲， Bootstrap 是一个好的工具。如果因为某些原因，比如预算或其他因素，在一个团队里没有前端开发者或设计师， Bootstrap 适合用来填坑。 15 | 16 | 对于设计师来讲， Bootstrap 也有一席之地：它是一个很有价值的工具，用来从设计软件快速移动到浏览器，而不需要过度担心前端代码策略。 17 | 甚至对于主要和数据打交道很少关注 UI 和布局的前端开发者，让一个开发者关注于搭建应用本身， Bootstrap 在这一方面也很好。 18 | 19 | ## 什么时候你最好别用它 20 | 21 | 然而，如果你的团队里有一个前端开发工程师，使用 Bootstrap 会潜在地浪费他们宝贵的时间，并且将他们的注意力从解决实际的问题转移。 Bootstrap 恰恰做的是前端开发者擅长的，但是它以一种很普遍的方式来实现。你的网站或应用是很具体的，所以如果你用一个普遍的系统，它有可能不会起作用。这意味着你的代码将包含全部的可能性才有可能实现具体的需求。 22 | ### 当你需要很多代码来覆盖 Bootstrap 的样式 23 | Bootstrap 是由 Twitter 的开发者开发来系统化他们网站应用的样式。当你的网站应用的样式和他们不一样，这意味着你不得不覆盖掉他们的样式来。 24 | 大多数网站的样式并不像 Twitter 那样。因此，如果他们安装 Bootstrap ，他们会覆盖掉很多样式。 25 | 在一些我参与的网站中，我发现多达十分之九的 Bootstrap 样式会被网站自己的样式覆盖掉。很坦率的讲，这是荒谬的。 26 | ### 当它让简单的事情复杂化 27 | CSS 用来为网页增加一系列简单的在某些条件下会被代码覆盖的样式规则。当你的网站中有 Bootstrap 的样式，几乎网站内所有的东西都已经被一系列复杂的代码规则设置好了。任何例外都会超出这个框架所设置好的规则。而大多数网站所面临的问题正是它们的样式对于 Bootstrap 来说往往是例外。 28 | Bootstrap 的样式是复杂的：你会有一个带有 12 列的栅格系统，这 12 列能以你想要的任何方式组合使用，有特殊的类来基于用户的视图尺寸设置不同的偏移量和列结构。很多网站是简单的：在小屏幕上没有列，在更大的屏幕会有一到两列。 29 | ### 当它产生了技术债务 30 | 一个前端代码库依赖 Bootstrap 的时间越长，纠缠的越多，并且它包含了更多只是用来覆盖掉 Bootstrap 代码的规则。这常常导致代码库陷于巨大的技术债务，尤其当前端代码以经常需要手动更新的方式整合在后端的时候。 31 | ### 当它引入可能不是你的应用的命名习惯 32 | 命名很难，而且想出有意义的属于你的团队和应用的命名习惯很花时间。对于组件名使用合适的名词，不要和一些名词的缩写像 ’btn’ 的类名混淆。 33 | ## 结论 34 | 在开发网站的过程中 Bootstrap 和朋友在各种各样的阶段是有好处的。然而它们不是一个能使任何事都简单的魔法：相反，会有很多能够通过让前端开发者关注于亲自开发 UI 来避免的缺点。 35 | -------------------------------------------------------------------------------- /TODO/check-in-frequency-and-codebase-impact-the-surprising-correlation.md: -------------------------------------------------------------------------------- 1 | * 原文地址：[ Prolific Engineers Take Small Bites — Patterns in Developer Impact ](https://blog.gitprime.com/check-in-frequency-and-codebase-impact-the-surprising-correlation/ ) 2 | * 原文作者：[ Ben Thompson ]( https://blog.gitprime.com/author/ben-thompson) 3 | * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者：[cdpath](https://github.com/cdpath) 5 | * 校对者：[marcmoore (Mark)](https://github.com/marcmoore), [phxnirvana (PhxNirvana)](https://github.com/phxnirvana) 6 | 7 | # 高效的工程师一步一步来 —— 开发者影响力中的模式 8 | 9 | 工程师的工作模式可以揭示他们性格中一些有趣的东西，不过和你想象的不太一样。 10 | 11 | ### 前提假设：要速度还是要数量 12 | 13 | 要探讨这个，我们得先假设团队里有的工程师易于快速切换工作，其他人则更喜欢一次搞定大量工作。如果假设成立，我们可以用频率和工作量这两个轴画出工程师的分布，就像这样： 14 | ![](https://blog.gitprime.com/hubfs/GitPrime/Blog/eng-character-1assumption-4.png?t=1481225729545) 15 | 16 | 但是「工作量」如何定义呢？ 17 | 18 | ### 什么是「大」工作量？ 19 | 20 | 我们试了能想到的所有衡量「大」工作量的手段。因为代码行数 (LoC) 比较简单（也很能说明问题！），所以用它来做基准线。尽管代码行数并不是切实可行的度量，详见这篇[更深入的文章](http://blog.gitprime.com/lines-of-code-is-a-worthless-metric-except-when-it-isnt/)，但它确实为我们找到更好的标准开了个头儿。 21 | 22 | 真正的挑战是找到一种度量，可以判断出用五行更高效的代码替换五十行旧代码的工作量要高于写一百行未编辑过的原型代码。毕竟从头开始写新代码可比追查一个可恶的 bug 结果只修改了四行代码要来得容易。 23 | 24 | 我们穷尽了能想到的所有办法尝试衡量工作量的大小：总体代码量，源码库中有效代码行数，被持续使用的代码，用到的文件数，不同的编辑位置数。差不多能想到的手段都用上了。 25 | 26 | 最后帮我们搞定这个难题的是大量关于工程工作的学术研究，尤其是关于提交常态（commit normality）的，正是这个概念最终促使我们找到了可以公平衡量工程工作量的指标，也叫做[「影响力（Impact）」](https://blog.gitprime.com/impact-a-better-way-to-measure-codebase-change)。 27 | 28 | 我们用影响力交叉衡量几个数据点，试着让数值接近我们认知上的工程工作量，再做一些调整，最后找到了比代码行数更符合开发者直觉的度量。 29 | 30 | ### 快速学习很重要 31 | 32 | 分析了数千个团队的数百万个提交（commit）之后，我们最初提出的关于工程师如何工作的理论被彻底推翻了。 33 | 34 | 更新代码的频率和个人对源码库的综合影响力的关联如此紧密以至于两者在作用上完全相等了，两者的关系如下图所示： 35 | 36 | ![](https://blog.gitprime.com/hubfs/GitPrime/Blog/eng-character-2actual-1.png?t=1481225729545) 37 | 38 | 当调整我们能想到的任何度量时，提交频率和对源码库的综合影响力都以同样的速率变化。 39 | 40 | 这种相关性如此之强，实际上在分析了数千个团队超过两千万个提交之后，我们没有找到一个有力的反例。 41 | 42 | ### 高影响力的工程师细分工作，提交频繁 43 | 44 | 这个观点本身就比较有意思，因为提出「我们得干更多活」就是种蹩脚的、试图提高工程团队产出的方法。大多数工程师已经尽力了，所以如果团队要「干更多活」，不能马上看出来什么东西，结果就是伤害了大家的感情。 45 | 46 | 这个特殊的数据集有意思的地方在于，它暗示了有可能通过某种结构性的工作方式的调整来提升工作效率。 47 | 48 | 将工作分成小部分已是公认的最佳实践，不过这个数据表明它比我们想象的还重要：鼓励细分工作（并且实行反馈机制帮助更好地实现）看起来是更可行的激励更高的个人影响力（impact）的手段。 49 | 50 | 「细分工作，频繁提交」是可行且可见的；而说「干更多活」实际上只能增加压力。 51 | 52 | 而且这是整体上的提升：除了通常有助于提高工程师的能力并提高个人影响力以外，更小更频繁的提交还可以为团队的其他成员带来额外的好处： 53 | 54 | - 更细粒度的提交便于追踪 bug 55 | - 撤回具体的改动比撤回一大块改动更容易。 56 | - 细分的工作重点明确，团队成员做代码审查和集成也更容易。 57 | - 更少的合并提交可以减少流程上的开支。 58 | 59 | ### 成功的工程活动图 60 | 61 | 我们的确创造了能说明很多工程风格的东西，但是得到它的过程却出乎我们的意料。我们用了从影响力概念了解到的所有东西一股脑塞进了一个叫做**生产量**的轴。经过了所有的探索，我们终于得到了能够度量软件开发中代码影响力的方法，可以替换掉过度简化的代码行数了。我们具体计算影响力的方法参见[这篇文章](http://help.gitprime.com/537-calculations/1606-what-is-impact)。 62 | 63 | 另一个轴是**改动率**，用来衡量工程师花了多少精力重写最近的代码。 64 | 65 | 把结果画成散点图可以充分说明一个工程师在特定时间段内（相对于团队其他成员）工作模式。 66 | 67 | ![成功地用来可视化软件工程师工作方式的框架](https://blog.gitprime.com/hubfs/GitPrime/Blog/eng-character-3rev2.png?t=1481225729545) 68 | 69 | 我们可以从这张可视化图看出一些启示： 70 | 71 | - 左下角还是最初设计中的「难题发现者」。 72 | - 左上角表示那些探索新实现方式的工程师，我们经常可以在这一区域看到提出新特性的原型的工程师。 73 | - 右下角则是那些「完美主义者」，他们的代码改动率在团队中较低，但是总体进展速度也较慢。 74 | - 最后**右上角**代表提交频繁，不太需要返工的工程师，最好别打扰他们，他们正干得起劲呢！ 75 | 76 | --- 77 | 78 | **备注：** 79 | 80 | 1. 感谢 [Bobby Wallace](https://twitter.com/bikeath1337) 帮忙将可视化图中的「探索（Exploring）」象限改成了「发现（Discovery)」。 81 | -------------------------------------------------------------------------------- /TODO/chrome-devtools-performance-monitor.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Chrome DevTools- Performance monitor](https://hospodarets.com/chrome-devtools-performance-monitor?utm_source=SitePoint&utm_medium=email&utm_campaign=Versioning) 2 | > * 原文作者：[malyw](https://twitter.com/malyw) 3 | > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/chrome-devtools-performance-monitor.md](https://github.com/xitu/gold-miner/blob/master/TODO/chrome-devtools-performance-monitor.md) 5 | > * 译者：[Cherry](https://github.com/sunshine940326) 6 | > * 校对者：[萌萌](https://github.com/yanyixin)、[noahziheng](https://github.com/noahziheng) 7 | 8 | # Chrome DevTools - 性能监控 9 | 10 | 你是否经常需要 JavaScript 或者 CSS 进行优化，但是不能找到一个简单的方式来衡量优化的效果？ 11 | 12 | 当然，你可以使用时间轴来记录，但是在大多数情况下，时间轴只记录数据，并不是实时更新的。在这点还有其他的性能测量技巧，Chrome DevTools 添加了 “Performance Monitor（性能监控）” 选项卡，可以体现实时性能： 13 | 14 | ![](https://static.hospodarets.com/img/blog/1511527599607549000.png) 15 | 16 | 这些都是在 Chrom 稳定版本中可用的并且可以进行以下性能监控： 17 | 18 | 1. 打开 URL：“chrome://flags/#enable-devtools-experiments” 19 | 2. 将 “Developer Tools experiments” 选项设置为“启用” 20 | 3. 点击 “Relaunch now” 来重启 Chrome 21 | 4. 打开 Chrome DevTools (快捷键为 CMD/CTRL + SHIFT + I) 22 | 5. 打开 DevTools “Setting” -> “Experiments” 选项 23 | 6. 点击 6 次 `SHIFT` 显示隐藏的选项 24 | 7. 选中 “Performance Monitor” 选项 25 | 8. 重启 DevTools (快捷键 CMD/CTRL + SHIFT + I ) 26 | 9. 点击 “Esc” 打开附加面板 27 | 10. 选择 “Performance monitor” 28 | 11. 单击启用/禁用 29 | 12. 开始使用性能监控吧 😀 30 | 31 | ![](https://static.hospodarets.com/img/blog/1511540400748823000.gif) 32 | 33 | 34 | 这里有很多不同的性能选项，大部分都是非常实用的并且我们在 Chrome 中用一些方法进行度量（例如时间轴，性能选项等）。 35 | 36 | 但是我想要分享一些新内容： 37 | 38 | * “Layouts / sec” 和 39 | * “Style recalcs / sec” 40 | 41 | 允许你实时的检测你的 CSS 性能，例如： 42 | 43 | 感谢 [csstriggers.com](https://csstriggers.com/)，我们知道，改变 CSS 的 [`top`](https://csstriggers.com/top) 和 [`left`](https://csstriggers.com/left) 属性会触发整个像素渲染流程：绘制，布局和组合。如果我们将这些属性用于动画，它将每秒触发几十次/上百次操作。 44 | 45 | 但是如果你使用 CSS 的 `transform` 属性的 `translateX/Y` 来切换动画，你将会发现，[这并不会触发绘制和布局，仅仅会触发组合这一阶段](https://csstriggers.com/top)，因为这是基于 GPU 的，会将你的 CPU 使用率降低为基本为 0%。 46 | 47 | 所有的这些都在 Paul Irish 的文章 [为什么使用 Translate() 移动元素优于 Top/left](https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)。为了测量差异，Paul 使用“时间轴”，展示了触发绘制和布局动作。但是近些年，Paul 正在致力于使用 Chrome DevTools 进行改良，这并不令人惊讶，我们终于有了一个合适的方法来衡量实时 CSS 性能。（我 fork 了他动画切换的示例代码） 48 | 49 | 50 | ![](https://user-gold-cdn.xitu.io/2017/12/17/1606485cac9627b6?w=972&h=424&f=gif&s=4926541) 51 | 52 | [示例](https://codepen.io/malyw/pen/QOQvyz) 53 | 54 | 一般来说，Chrome 中的性能监视器有很多用途。现在，您可以获得实时的应用程序性能数据。 55 | 56 | --- 57 | 58 | > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 59 | -------------------------------------------------------------------------------- /TODO/complexion-reduction-a-new-trend-in-mobile-design.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [Complexion Reduction: A New Trend In Mobile Design](https://medium.com/swarm-nyc/complexion-reduction-a-new-trend-in-mobile-design-cef033a0b978) 2 | * 原文作者 : [Michael Horton](https://medium.com/@michaelhorton) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [shixinzhang](https://github.com/shixinzhang) 5 | * 校对者 : [cyseria ](https://github.com/cyseria ) , [wild-flame](https://github.com/wild-flame) 6 | 7 | # 移动应用设计新趋势 8 | 9 | **我们生活在一个“极简风格”的世界有些时候了，接下来会怎么样呢？** 10 | 11 | 过去的几个月中，一些创新设计的先驱将“简约设计”带到了新的阶段。Facebook, Airbnb 和 Apple 都 都遵循一种相似的“界面简化”的设计风格来凸出产品的内容，这种设计影响了移动设计的新趋势。 12 | 13 | #### 究竟什么是“界面简化”？ 14 | 15 | 什么？你从来没听说过这个概念？好吧，因为它是我命名的:)。最近我留意到一种超越扁平化设计、极简设计的新设计趋势，它与[简化设计](http://www.uxbooth.com/articles/progressive-content/)也没有关系。有些人可能认为它只是极简设计下一阶段在移动端的实现，但是我认为这两者完全不同。下面是描述新趋势的一些特点。我决定给它命名为“界面简化”。没人不同意吧？:) 16 | 17 | **风靡硅谷的新趋势有以下特点：** 18 | 19 | 1. **标题更大、更粗** 20 | 2. **图标更简单、更常见** 21 | 3. **去除大量的颜色** 22 | 23 | 使用这种设计的结果呢？一些受人喜爱的应用的界面越来越像同一个品牌下的产品。 24 | 25 | #### 举几个栗子 26 | 27 | 五月初 **Instagram** 发布[新版界面](https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3#.gmyokj9qa)时我开启注意到这种新趋势。 28 | 29 | ![](http://ww2.sinaimg.cn/large/a490147fgw1f5rbu2godsj20go0frtb7.jpg) 30 | 31 | 官方介绍新版界面做了去除整个应用大部分的蓝色、深灰色，加粗标题，简化底部导航栏跟图标等改变。**剩下的是一款标题明显、内容突出、功能清晰的黑白主色调界面。**我喜欢这种简洁的界面，同时想起了另一款我追随好久的平台[**Medium**](http://www.medium.com)。Medium从2012年开始就使用黑白色基调，每次改版都在简化界面，实际上人们都不知道 Medium 是“界面简化”的发起人之一。恭喜 Medium ! 32 | 33 | 在 Facebook 发布 Instagram 新版界面后不久，我发现 Airbnb 跟 Instagram 看起来也太像了！这是 Airbnb [四月份发布新版界面](https://www.airbnb.com/livethere)后我第一次使用，但是我的感觉是早就见过这种界面。 34 | 35 | ![](http://ww3.sinaimg.cn/large/a490147fgw1f5rbuk3685j20go0hr76v.jpg) 36 | 37 | 虽然一个月后 **Airbnb** 的新版 UI 没有像 Instagram 发布新设计界面时那样被大肆报道（可能是因为它没有换一款让人眼前一亮的应用图标），它还是遵循了很多“界面简化”的要点的。 38 | 39 | Airbnb 移动端新界面的标题更大更粗，同时去除了不必要的图片和背景色，简化了图标让它们更容易辨认功能。**剩下的是一款内容突出、功能清晰的黑白主题界面。** 40 | 41 | **Apple** 最近也加入了“界面简化”的设计风潮。这个月初，科技界巨头苹果公司在它们的 [WWDC](http://www.wired.com/2016/06/heres-everything-apple-announced-wwdc-2016/) 大会上发布了许多用户期待的东西，其中包括所谓的“最最最牛的 iOS 版本” iOS 10 正式版（或许跟 iOS 8 相比的确牛一些:( ）。 42 | 43 | ![](http://ww2.sinaimg.cn/large/a490147fgw1f5rbv560zij20go0hr415.jpg) 44 | 45 | 在 WWDC 上有一个内容吸引了我，**Apple Music 的新版 UI** 。新版 UI 最大的改动是用户体验的变化和一些其他特点，其中最先吸引我的是整体界面的美感。Macword 全职作家 46 | Caitlin McGarry [对新版界面描述道](http://www.macworld.com/article/3082637/ios/every-change-coming-to-apple-music-in-ios-10.html)：**“这是一个全新的界面，大号的卡片布局，显眼的字体，白色简洁的背景，让专辑封面更加耀眼** 47 | 48 | 听起来是不是有点耳熟？Apple Music 的设计跟 Instagram 、Airbnb 的设计风格略有不同（后者用的是完全填充的图标，Apple Music 怎么不换呢？），但是关键元素都是一样的：显眼的标题，黑白色调的界面。 49 | 50 | #### 这些应用的新版界面意味着什么呢？ 51 | 52 | 正如我开始所说，将来会有越来越多的应用看起来长得都很相似。为什么这么说？就跟 NFL （美国国家足球联盟）一样，科技圈里到处都是山寨版。这些新版设计普遍受到好评（有些人可能一开始会抱怨这些黑白界面中没有什么特点，但是没多久他们就会适应了。人们使用软件都是为了使用它的功能，而不是为了它的特点），所以我希望所有应用都能加入这股“界面简化”的热潮中！ 53 | 54 | > 这意味着你的iPhone主屏幕上很快只是一片会带给你欢乐的五颜六色的闪耀的马赛克了。 55 | 56 | ![](http://ww3.sinaimg.cn/large/a490147fgw1f5rbwhezc1j20u00goaee.jpg) 57 | 58 | **现在不论你是否支持这种单色调的设计风格，都要承认它是一种进步。**产品的设计从之前的崇尚浮夸，开始逐渐演化的更聚焦于用户。在过去的产品设计流程中，用户体验师或者产品经理将原型图交给设计师，然后扔下句：“做的好看点。”设计师花费好多时间填色、去色、改色，却一直没有注意到最好的解决方法就在他们面前，那些原型图！在如今更加完整的设计流程中， 59 | 设计师和体验师的界限越来越模糊，设计师不必那么担心没有尽到他们的责任（比如把界面做的好看些），从而可以专注于为他们的用户创造最好的产品。 60 | 61 | #### 界面简化的最终指南 62 | 63 | 现在你也看好“界面简化”并且准备跟随这种风潮？好的，遵循以下指导,没多久你的应用就能大火特火！ 64 | 65 | > **1\. 去除颜色。**当然你可以有一种主题色，但是要慎用，尽量只用在指示操作上。剩下的最好都用黑白色，突显你应用的内容。 66 | 67 | > **2\. 更大、更粗、颜色更黑的标题。**你看到那个标题了吗？将它增加约20至30像素，让它看起来“重”一些。 68 | 69 | > **3\. 简单、辨识度高的图标。**应用里的图标（底部导航的图标）最好很常见，周围也不要有什么颜色。把它们从左到右按这种顺序排列；主页、搜索、主要操作、次要操作、个人中心，这样体验更好。 70 | 71 | > **4\. 增加两倍甚至三倍的留白。**甚至四倍留白，多点总没错。 72 | 73 | > **5\. 应用图标颜色更亮些。**如果你喜欢设计一些带有闪光和颜色的东西，就做应用图标吧。它可以表现你的个性和品牌，让它脱颖而出吧！ 74 | 75 | -------------------------------------------------------------------------------- /TODO/deconstructing-the-poor-design-of-a-well-intentioned-microinteraction.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [Deconstructing the Poor Design of a Well-Intentioned Microinteraction](https://medium.com/ux-immersion-interactions/deconstructing-the-poor-design-of-a-well-intentioned-microinteraction-e667e022e628#.u41e59zgi) 2 | * 原文作者 : [Jared M. Spool](https://medium.com/@jmspool) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [L9m](https://github.com/L9m) 5 | * 校对者: [shenxn](https://github.com/shenxn), [Hugo Xie](https://github.com/xcc3641) 6 | * 状态： 翻译完成 7 | 8 | # 为什么有些设计初衷很好，结果却很糟糕 9 | 10 | 美航的乘客愣愣地盯着屏幕上的突然出现的信息：**你的会话已过期**。她对此不知所措。 11 | 12 | 刚刚，在她意识到自己已经买了机票之后，她又打开另一个标签页，预定这次旅行的酒店房间，又租了一辆车。随后返回到美国航空的标签页获取她的确认编号，同时记录在她的日历上。 13 | 14 | 取确认编号代之的是过期提示。**所有已确认事务都已保存，但你需要重新开始未完成的事务或重新开始查询**已经完成了吗？她很确定自己买了票，票被确认了吗？她不知道接下来该做什么。 15 | 16 | #### 一种典型的安全性设计模式 17 | 18 | 美国航空的设计者们有很多理由想要一个会话过期。如果用户不确定航班（或是最终从其他渠道购买），就可能会留下一个未完成的预定。而美国航空的设计者希望将这些未完成的预定返回到库存中，使得其他用户可以预定这些座位。 19 | 20 | 同样，如果某个人在别人订票完成但没关闭浏览器的情况下使用机器，他们就有可能获取用户不愿意公开的详细资料和使用账号功能。有会话过期就可以防止混乱。 21 | 22 | 不只有美国航空会使用会话过期。银行网站，业务工具和其他应用也是如此，如果某人花太长时间或长时间未活动，将会强行使某人下线。 23 | 24 | 网站常常使用**你的会话已过期**的设计模式来处理会话过期。这个消息会在任意时间弹出。对大多数用户来说，这通常以为着没什么好消息。无论是一个重要功能中断或或只是令人困扰。 25 | 26 | #### 初衷很好但交互性差 27 | 28 | **你的会话已过期** 设计模式是一个微交互，微交互指的是设计中一些微小的功能性交互。微交互构成了所有的设计但却遭到设计团队的轻视。这个设计模式也不例外。 29 | 30 | ![](https://cdn-images-1.medium.com/max/600/1*h11V6a7RWk1PxpVMzp1z9A.jpeg)] 31 | 32 | 美国航空的设计者们想要从坏人的手中保护他们的客户。一个高尚的目标。 33 | 34 | 然而，他们似乎并没有注意到突然过期会话给用户带去了糟糕的用户体验。当用户面对这消息（错误信息的一种形式），他们并不知道应该如何继续。 35 | 36 | 会话过期在真实世界不会常常发生。当你在杂货店购物时，你的购物车不会因为你长时间未添加东西而突然清空。当你绕街区走了很长一段路后，不会自动被锁在你房子外面。你的电视不会每过15分钟就检查一次你是否还在房间里。 37 | 38 | 会话过期随处可见，可见我们的真实世界和数字世界是多么不协调。如果你的笔记本能准确知道其他某个人坐在它之前，我们就能更好的从坏人手中保护用户。 39 | 40 | 保护业务需求这个初衷是好的。 41 | 42 | 设计就是我们在真实世界中呈现我们想法的方式。美国航空的会话过期使它的用户感到困扰，这些并不是美国航空网站设计者们的初衷。我们能怎样提高呢？ 43 | 44 | #### 用微交互框架改进设计 45 | 46 | 近几年来，Dan Saffer 致力于研究于微交互的设计 并写了一本叫_微交互._的书。Dan 把微交互分解成四个构成因素：**反馈, 模式 和 循环, 触发器,** 以及 **规则** 。我们能从这四构成因素着手改进美国航空网站的会话过期的微交互。 47 | 48 | **反馈** 是用户怎样去了解这个微交互。在这里, 一个对话框提示用户会话已过期，但是没有告诉用户意味着什么. 他确实解释了“确认的交易已保存”，但是没有解释确认的交易是什么或保存的是什么。一个已经预定的航班是一个确认的交易吗？ 49 | 50 | 使用用户熟悉的语言会更有帮助吗？（一条像**“你飞往皮奥里亚的航班已出票，确认邮件已发至您的邮箱”** 这样的信息是不是好很多？） 51 | 52 | 按钮上唯一标签标示回到首页。回到首页后用户要干嘛呢？下一步可能的操作是什么？对话框能否列出一些用户下面该做的事（然后要他们重新认证，确保是同一用户）？ 53 | 54 | **模式** 是系统如何决定用户可以访问哪些内容。在美国航空的网站上，他们看起来使用一种二元验证 — 用户有权使用或无权。当会话过期，系统会从验证状态变成未验证状态。 55 | 56 | 根据下一步可能的操作，设计者是否应该考虑不仅仅使用二元验证的模式？ 57 | 58 | **触发器** 决定何时触发微交互。 看起来美国航空的会话过期触发器会在最后一个页面加载后15分钟后触发。 59 | 60 | 使用页面加载作为计时器的起点合适吗？如果用户用键盘或鼠标改变焦点，应重启计时吗？ 61 | 62 | 为什么是15分钟？为什么不是20或40分钟？15分钟的依据在哪里，什么研究表明它是最佳时间？ 63 | 64 | 航班预订成功后，与机票预定成功之前应该使用相同的过期时间吗？毕竟，一个未预订的航班可能供不应求，但在被预订之后不再可订。 65 | 66 | 触发器应该完全基于时间吗？有没有更好的方法能确定用户已经对网页没有兴趣了或是已经离开了（即产生了一个安全威胁）？ 67 | 68 | 如果触发器是基于下一个操作的呢？ 如果屏幕不动，微交互不会触发。但是如果用户试图在会话过期后做点什么，是否可以通过微交互告知用户需要重新认证或是重新确认库存？ 69 | 70 | **规则** 指导微交互的行为。会话过期的规则是为了防止进一步访问，从验证状态变成未验证状态，并给用户反馈。 71 | 72 | 我们需要告诉用户他们的会话已过期吗？毕竟，根据这个消息他们也做不了什么。反之，如果没有提示，然后在用户做任何试图需要身份验证的访问时，我们可以触发登录的微交互？ 73 | 74 | #### 有意设计的微交互体验 75 | 76 | 像安全执行，存量管理这样的业务需求总是在牺牲用户体验？会话过期的确解决了一些问题，但这种设计是最好的吗？ 77 | 78 | 许多微交互，像错误信息和警报，都是无意之中为之。通常，一个开发者急于赶时间，不会考虑在边缘状况时用户的体验。 79 | 80 | 注重这些小细节并提出问题 会创造一个更好的体验。Dan 的微交互框架会帮助我们发现其中的问题，反过来，能让我们更好的设计。 81 | 82 | 微交互对构建优秀的用户体验是至关重要的，我们邀请 Dan Saffer 组织了一次名为[**使用微交互设计关键的细节**](https://uxi16.uie.com/workshops/designing-the-critical-details-using-microinteractions?src=workshop-desc)的研讨会。它是4月18-20日在加利福尼亚的圣迭戈 UX Immersion 的一部分。Dan 的研讨会有充实的数据，精彩的观点，设计出彩的做法，有效的微交互。不要错过。 详情请点击 [uxi16.com](https://uxi16.uie.com/#designing-the-critical-details-using-microinteractions)。 83 | 84 | -------------------------------------------------------------------------------- /TODO/designing-a-product-youre-not-going-to-use.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Designing a Product You’re Not Going To Use](https://medium.com/@michalbaryoseph/designing-a-product-youre-not-going-to-use-7c3d069e84e8#.706sfym6k) 2 | * 原文作者：[Michal Turjeman](https://medium.com/@michalbaryoseph) 3 | * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者：[jiaowoyongqi](https://github.com/jiaowoyongqi) 5 | * 校对者：[cbangchen](https://github.com/cbangchen), [mypchas6fans](https://github.com/mypchas6fans) 6 | 7 | # 设计一个你自己不会去用的产品 8 | 9 | 当我告诉朋友说我的工作是设计一款主打运动新闻的产品，他们往往会说，“你了解运动吗？”。作为回应，我常常在电视上观看比赛，同时也知道一些基本的运动常识，但是我绝对不是运动迷，离运动迷还差远了。 10 | 11 | 必须承认，当我开始为 90min 和 12up 的母公司 MinuteMedia 工作的时候是有所考虑的。毕竟我自己之前还是一位芭蕾舞者，所以现在设计一款面向运动爱好者的产品，听起来也是很适合的，不是吗？事实也的确如此。 12 | 13 | 当我开始参与 90min 的设计时，就相信这是款很棒的产品。不仅是因为其外在，而是因为其核心理念。这不仅是一个发表足球文章的平台，而且是一个足球迷可以发声讨论的地方。它内容的独特之处立马打动了我。当我被指派去设计一款我们的新产品 12up 的时候，我知道这将会是个不小的挑战。当时我想到的是做一个 90min 的进化版。但这还不够，12up 涉及美国所有的运动，而对此我一无所知。我该如何把过往的产品打碎回炉，（找出可取之处）重新铸造一个优质的产品呢？而我又如何向其他工作人员表达自己对于新产品的看法呢？他们为 90min 倾注了心血，并彻夜赶工只为了解决用户的某一痛点。如果我告诉你这个过程十分的简单，那这肯定是一个弥天大谎。实际上整个过程花费了巨大的精力，其中就包含了成千上万的草图以及许多设计方案的尝试，而我们也从这段难忘的过程中得到了很多。 14 | 15 | 我相信你们肯定也有同样的项目经历，所以我就自己的经历提出一些心得总结。 16 | 17 | #### 不懂就问 18 | 19 | 不懂就问没啥好丢脸的，我们不可能什么都了解。是的我明白，提问题在任何一个设计项目中都十分重要，但是当你不是这个产品的目标用户，那么向相关的人进行提问就十分重要。提问是你试图解决问题的第一步。如果你对这个问题毫无所知那么你该如何解决它？所以勇于不耻下问吧，即使当别人听到“一场足球赛要多长时间”这种问题后一脸懵逼也不要紧。（真事儿） 20 | 21 | ![](https://cdn-images-1.medium.com/max/1600/1*EmWQVu_aNLk3qPpCPJJ0YA.jpeg) 22 | 23 | 图 [Sam Bunny](https://dribbble.com/sambunny) 24 | 25 | #### “我”永远不是用户 26 | 27 | 我们总是会说：“我不会点击这个的”，“这个很好理解呀”，我们只知道**自己**如何在界面上进行操作。这里有两个概念，一个是你自己，另一个是用户，你是在为用户而设计。我也不完美，也时常会犯这样的错误。当我在和产品经理争论某个功能的时候，他总是会跟我说“可你并不是用户呀”。有时候你很难割舍那些你创造出来的东西（特别是当你已经深深爱上它的时候），但有时候确实需要为了更好的产品而牺牲掉某些东西。有时候我们只是需要一个想法，提出来然后该放手时就放手。当你在实践你的想法时，试着想想用户模型，是否这想法值得保留。你会惊奇地发现时刻考虑着目标用户将会帮你走出设计的困境，而不是纠结着自认为的完美主义。我为凯文，约翰，克里斯他们做设计，而不是为自己而设计，当我无法解决问题的时候，都会向他们求助。 28 | 29 | ![](https://cdn-images-1.medium.com/max/1600/1*-UcyNbvC7CnUXX29iHmyaw.jpeg) 30 | 31 | 图 [Willian Matiola](https://dribbble.com/willianmatiola) 32 | 33 | #### 你的直觉 vs A/B 测试 34 | 35 | 当你对某事胸有成竹的时候，总是会满腔热血。我们的直觉很奇妙，有时候能给我们带来意想不到，但有时候又会带来灾难。学会控制这股不能名状的洪荒之力十分重要。 36 | 37 | 在设计的时候，我总会有这样的感受，在做决定的时候，心里总会出现一个声音告诉我该如何做，但在把想法告诉团队里其他的小伙伴前，我会再想出另一套方案。然后我将会进行仔细的对比，并且测试并记录每一个解决方案的优劣。如果如实操作了，你就会清晰地发现哪一个才是更佳的方案。在你知道最佳的方案之后，就应该准备说服其他人了，但这并不是一件简单的事情。这里提一下来自我父亲的一个小小的建议，“如果你坚信某些东西，那就坚持说服其他人直到他们相信你为止”。我总是会以自己的方式来履行这一点。我的上司可以证明这一点：） 38 | 39 | #### 最后的建议 40 | 41 | 我们在为更好的体验而设计，而具体是什么领域真的不重要。不要因为你缺少某方面的知识，或者你不是产品的目标用户而担心。而是应该考虑这个项目是不是你感兴趣的，是否对你而言有所挑战，想想一个前芭蕾舞者都能设计一款运动新闻产品，还有什么不可以的呢？：） 42 | -------------------------------------------------------------------------------- /TODO/designing-the-new-uber-app.md: -------------------------------------------------------------------------------- 1 | 2 | > * 原文地址：[Designing the new Uber App](https://medium.com/uber-design/designing-the-new-uber-app-16afcc1d3c2e#.kaoghc61m) 3 | * 原文作者：[Didier Hilhorst](https://medium.com/@didierh) 4 | * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 5 | * 译者：[PhxNirvana](https://github.com/phxnirvana) 6 | * 校对者：[Gocy](https://github.com/Gocy015), [Freya Yu](https://github.com/ZiXYu) 7 | 8 | # 全新的 Uber 应用设计 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ![](https://cdn-images-1.medium.com/max/2000/1*7ocitrf1HvNFK8Hbo3FoOw.png) 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 大刀阔斧地（对当前应用）重新设计这种东西光是听起来就足以让人裹足不前。大量的变数和未知情况都暗示着这条道路上充满荆棘，甚至通向悬崖。但只要我们还想建设光明未来，就势必承担这风险。这意味着不仅要下血本重新设计界面外观，还要重新构思交互流程。 26 | 27 | Uber 起初的愿景很简单。“轻触屏幕，即刻接驾。”无需设置目的地，无需选择套餐，只需轻轻一点，至多两次，就可以开启一段行程。 28 | 29 | 随着新功能的不断加入，我们的产品变得越来越复杂，我们不断地努力，试图保持最初一键式的简洁高效。后来我们意识到高效率绝不仅仅是减少点击和优化流程这么简单。人们总是在赶着去看电影时选择了错误的服务类型（对，就是你，Uber Pool）。通过选择合适接人地点来节省时间的这种机会就被生生错过了。 30 | 31 | 在一家快速增长的公司考虑未来道路是很有挑战性的。所以，为了走出我们先前的舒适区，我们决定用**“以终为始”**作为新 Uber 的设计理念。 32 | 33 | 有时为了更快的从 A 点到达 B 点，需要减速、抬头、观察前方。原先的 Uber 只让你考虑搭便车，而现在会问你“去哪儿？”（Where to go?）。 34 | 35 | 一切流程始于此并环绕它（Where to go）打造。下一步的界面元素飞入屏幕，并以动画的形式播放通往终点的路线。指引前进的是基于向前看的哲学理念。每一个动作都引领用户走向下一步，每一步结束时同样会带来反馈。当你打算开始一段行程时，一切都将水到渠成。 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | ![](https://cdn-images-1.medium.com/max/2000/1*1xHu1vhKVvIx2SY-XdiF7A.jpeg) 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 一个关于体验的关键分歧是产品选择滑动条。一个好的界面有，呃，三到四个选项，至多八个，我们在洛杉矶和其他城市的司机可以证明这一点。（现实情况却）甚至更糟，当我们打开计划选项时，位置就不够用了，而且我们基本可以说是随意地把这个窗口扔在屏幕中间。 52 | 53 | 这项功能经历了最多的设计循环和迭代。从列表视图到表格视图再到分页视图及其之间的众多设计。用户调研和原型迭代在过程中扮演了重要角色。我们每天都带着用 Framer 和 Swift 建立的原型去人群中做调查。日复一日，周复一周地迭代，直到我们找到答案。我们发现人们并不关心我们能在一个屏幕上填满多少产品和特性。 54 | 55 | 通过对目的地的了解，我们可以在屏幕上显示最恰当的选项来提供让用户提供选择的机会。我们在（界面）最上层显示不同服务的费用，以此让用户可以简洁直观的选择到达方式。对于 Uber Pool 和 UberX 我们会显示到达时间来让你知道你能不能赶上晚餐订座的时间。 56 | 57 | 58 | 59 | 60 | 61 | 62 | ![](https://cdn-images-1.medium.com/max/2000/1*U6PKgfBbne-QQZJIWSOvew.jpeg) 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 就像期待的那样，应用总会先想一步来节省时间。它会在选择所需服务时搜索最佳搭车点。一旦提交请求，我们会马上显示可能的配对司机，并提供预估时间。 71 | 72 | 起初我们想建立一个其他人「能用、能建设、能扩展」的平台。这花了不少功夫，而且有着设计师、工程师、产品经理、运维、市场和其他各种人才的参与。边设计边创造一个全新的产品的确是个挑战，尤其是这么大的产品。 73 | 74 | 理想状况下你可能会选择先进行产品设计，再进行平台设计，但以我们进行的速度来说，这基本不可能。但这项限制，却最终成为了一个“美妙的意外”：它迫使我们不得不在敲定产品设计的同时应用相应的平台设计，并用真实数据开发。这让我想起了一个传奇赛车手的名言： 75 | 76 | > “如果一切都在掌控中，那只能说明速度不够快。”——Mario Andretti. 77 | 78 | 我们在基础阶段就建立了一系列元素的标准，如间距、字体、颜色、内容、图标、图表、阴影、状态栏、动画以及用动作表单实现的警告框、头像、按钮、卡片、时间选择器、空状态、表格、标题、列表、地图、加载指示器、选择器和标签。但可能最重要的是，我们建立了和乘客交流的空间。 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | ![](https://cdn-images-1.medium.com/max/2000/1*t_KgpnQ5C_CPhQxuXXCEtA.png) 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 我们曾以为用户走进车门时我们的工作就结束了，在那之后，（用户）越快关闭应用体验越好。但在审视每一步之后，发现我们忽略了旅程中最长的一部分：在路上。 95 | 96 | 我们考虑到了可能在路上听的音乐，目标饭馆的菜单，以及如何与将要见的人保持联系。（因此）我们建立了一个以旅客和旅程为中心的平台。 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | ![](https://cdn-images-1.medium.com/max/2000/1*uX84vBZ06pGXvKnW0MZUPw.jpeg) 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 全新 Uber 应用是关于你，你的目标和你的目的地。我们以终为始，希望可以让你的下一次旅程到来的更早些。 113 | 114 | 特别鸣谢 Peter Ng，Bryant Jow，Nick Kruge 和 [Uber Design](https://medium.com/u/f0f8b53891a8) 的全体成员。除了设计之外，最值得称道的是和一群优异的工程师和产品经理共事的经历，正是他们的努力，才有了新 Uber 应用的诞生。设计并不止是设计师的职责，它关乎我们全体。我们工作的环境从一开始就有着一群以让用户更满意为目标的工程师和产品经理。如果（你）觉得这有趣的话，那就加入我们来一起设计更好未来吧——我们需要你的帮助。 [点这里](https://www.linkedin.com/in/dhilhorst)，让我们喝着咖啡携手共事吧。 115 | 116 | 年底，有着更多功能的更新会在全球各应用市场分批上线。 希望你和我们一样激动。如果你读到这里的话，可以看看下面介绍新应用的短视频： 117 | 118 | [点这里](https://www.youtube.com/embed/I1DdoN6NLDg)（Youtube地址，需自备梯子） 119 | -------------------------------------------------------------------------------- /TODO/detecting-low-power-mode.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [Detecting low power mode](http://useyourloaf.com/blog/detecting-low-power-mode/) 2 | * 原文作者 : [useyourloaf](http://useyourloaf.com/) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [Zheaoli](https://github.com/Zheaoli) 5 | * 校对者 : [LoneyIsError](https://github.com/LoneyIsError), [wild-flame](https://github.com/wild-flame) 6 | 7 | # 如何检测 iPhone 是否处于低电量模式 8 | 9 | 这个星期，我阅读了一篇关于Uber怎样检测手机处于省电模式的文章。（注：文章连接是[Uber found people more likely to pay](http://www.npr.org/2016/05/17/478266839/this-is-your-brain-on-uber)） 在人们手机快要关机时，使用Uber可能会面临更高的价格。 这家公司（注：指Uber）宣称他们不会利用手机是否处于节能模式这一数据来进行定价， 但是这里我想知道 **我们怎么知道用户的iPhone处于低电量模式** 10 | 11 | 12 | ### 低电量模式 13 | 14 | 在iOS 9中，苹果为iPhone手机新添加了 [低电量模式](https://support.apple.com/en-gb/HT205234) 功能。在你能充电之前，低电量模式通过关闭诸如邮件收发，Siri，后台消息推送能耗电功能来延长你的电池使用时间。 15 | 16 | 在这里面，很重要的一点是，是否进入低电量模式是由用户自行决定的。 你需要进入电池设置中去开启低电量模式。当你进入低电量模式的时候，状态栏上的电池图标会变成黄色。 17 | 18 | ![Low Power Mode](http://ww3.sinaimg.cn/large/72f96cbajw1f4dvuztcnej20m80et0u9) 19 | 20 | 当你充电至80%以上时，系统会自动关闭低电量模式。 21 | 22 | ### 低电量模式检测 23 | 24 | 事实证明，在iOS 9中获取低电量模式信息是很容易的一件事。 你可以通过**NSProcessInfo**这个类来判断用户是否进入了低电量模式： 25 | 26 | ~~~ Swift 27 | if NSProcessInfo.processInfo().lowPowerModeEnabled { 28 | // stop battery intensive actions 29 | } 30 | 31 | ~~~ 32 | 33 | 如果你想用Objective-C来实现这个功能: 34 | 35 | ~~~ Objective-C 36 | if ([[NSProcessInfo processInfo] isLowPowerModeEnabled]) { 37 | // stop battery intensive actions 38 | } 39 | 40 | ~~~ 41 | 42 | 如果你监听了**NSProcessInfoPowerStateDidChangeNotification**通知，在用户切换进入低电量模式的时候你将接收到一个消息。比如，在视图控制器中的**viewDidLoad**方法中: 43 | 44 | ~~~ Swift 45 | NSNotificationCenter.defaultCenter().addObserver(self, 46 | selector: #selector(didChangePowerMode(_:)), 47 | name: NSProcessInfoPowerStateDidChangeNotification, 48 | object: nil) 49 | ~~~ 50 | 51 | ~~~ Objective-C 52 | [[NSNotificationCenter defaultCenter] addObserver:self 53 | selector:@selector(didChangePowerMode:) 54 | name:NSProcessInfoPowerStateDidChangeNotification 55 | object:nil]; 56 | ~~~ 57 | 58 | 在我第一次发布这篇文章后，很多人提醒我：对于只对iOS 9.X适配的开发者而言，没有必要在 **ViewController** 消失时去移除 **Observer** 。 59 | 60 | 接着在这个方法会监视电池模式并在切换的时候给予一个响应。 61 | 62 | ~~~ swift 63 | func didChangePowerMode(notification: NSNotification) { 64 | if NSProcessInfo.processInfo().lowPowerModeEnabled { 65 | // low power mode on 66 | } else { 67 | // low power mode off 68 | } 69 | } 70 | ~~~ 71 | 72 | ~~~ Objective-C 73 | - (void)didChangePowerMode:(NSNotification *)notification { 74 | if ([[NSProcessInfo processInfo] isLowPowerModeEnabled]) { 75 | // low power mode on 76 | } else { 77 | // low power mode off 78 | } 79 | } 80 | ~~~ 81 | 小贴士: 82 | 83 | * 这个通知方法和NSProcessInfo里的属性是在iOS 9系统中新提供的方法。如果你想让你的APP兼容iOS8或者更早版本的系统，你需要去这个网站 [test for availability](http://useyourloaf.com/blog/checking-api-availability-with-swift/)测试你的代码是否能正常运行。 84 | 85 | * 低电量模式是iPhone独有的特性，如果你在iPad上测试前面的代码，会一直返回false。 86 | 87 | 88 | 只有在你的 App 能够采取一些节能措施来延长电池寿命的情况下，检测用户开启了低电量模式才是有用的。这里，苹果给了一些建议： 89 | 90 | 91 | 92 | * 停止更新位置 93 | * 减少用户交互动画 94 | * 关闭数据流量这样的后台操作 95 | * 关闭特效 96 | -------------------------------------------------------------------------------- /TODO/developers-are-users-too-introduction.md: -------------------------------------------------------------------------------- 1 | > * 原文地址：[Developers are users too — Introduction](https://medium.com/google-developers/developers-are-users-too-introduction-fefdb42f05a) 2 | > * 原文作者：[Florina Muntenescu](https://medium.com/@florina.muntenescu?source=post_header_lockup) 3 | > * 译文出自：[掘金翻译计划](https://github.com/xitu/gold-miner) 4 | > * 本文永久链接：[https://github.com/xitu/gold-miner/blob/master/TODO/developers-are-users-too-introduction.md](https://github.com/xitu/gold-miner/blob/master/TODO/developers-are-users-too-introduction.md) 5 | > * 译者：[lsvih](https://github.com/lsvih) 6 | > * 校对者：[IllllllIIl](https://github.com/IllllllIIl), [hanliuxin5](https://github.com/hanliuxin5) 7 | 8 | # 开发者也是用户 - 简介 9 | 10 | ## 易用性 - 学于 UI，用于 API 11 | 12 | ![](https://cdn-images-1.medium.com/max/2000/1*KwDN8m7j1MLxObs2-znrVA.png) 13 | 14 | 题图：[Virgina Poltrack](https://twitter.com/VPoltrack) 15 | 16 | 当谈起**易用性**时，我们通常会将其与地图、短信或照片分享之类的 app 的用户界面联系起来。我们希望它们有着各自的优质特性，例如一个地图 app 应该要有： 17 | 18 | * **直观性** —— 能够轻松让用户知道如何从 A 导航至 B。 19 | * **高效性** —— 能够快速地获得导航方向。 20 | * **正确性** —— 能够获得从 A 至 B 正确的、无障碍的路线。 21 | * 提供**适当的功能** —— 能够让用户探索地图，比如放大、缩小和导航。 22 | * 为以上功能提供**适当的使用方式** —— 例如通过手指的缩放来操作地图。 23 | 24 | 同样的，我们也希望自己所使用的 API 也能有与此相同的特性。如果说 UI 是用户与功能之间的界面，那么 API 就是使用这个 API 的开发者和能实现相应功能代码之间的界面。因此，API 与 UI 一样需要易用性。 25 | 26 | 库、框架、SDK - API 无处不在。每当你把代码分离为模块，那么模块暴露的类与方法就成为了 API。其他的开发者（和未来的你）都将会要使用它。 27 | 28 | 易用性与如何学习使用某个事物花的时间可以说是成反比。无论是新手开发者还是专家都需要用许多的时间学习如何使用新的 API，一个低易用性的 API 可能会导致它被错误的调用，从而造成 bug 和安全问题。这些问题最终不仅会影响使用这些 API 的开发者，还会影响使用 app 的用户。因此，提供高易用性的 API 至关重要。 29 | 30 | Nielsen 与 Molich 编写了一套广为人知的手册：[UI 易用性的启示](https://www.nngroup.com/articles/ten-usability-heuristics/)，它可以简单地套用于任何产品中（包括 API），你可以结合 Bloch 所著的 [指南](https://dl.acm.org/citation.cfm?id=1176622) 了解如何设计优秀的 API。 31 | 32 | 1. [系统状态的可见性](https://medium.com/google-developers/developers-are-users-too-part-1-c753483a50dc#a062) 33 | 2. [让系统符合真实世界](https://medium.com/google-developers/developers-are-users-too-part-1-c753483a50dc#fd9a) 34 | 3. [为用户提供自由的操作方式](https://medium.com/google-developers/developers-are-users-too-part-1-c753483a50dc#52bc) 35 | 4. [一致性与标准](https://medium.com/google-developers/developers-are-users-too-part-1-c753483a50dc#7d0b) 36 | 5. [预防错误的发生](https://medium.com/google-developers/developers-are-users-too-part-1-c753483a50dc#6f9b) 37 | 6. [让用户认知，而不是回忆](https://medium.com/google-developers/developers-are-users-too-part-2-96e03fe17535#b705) 38 | 7. [弹性、高效的使用方式](https://medium.com/google-developers/developers-are-users-too-part-2-96e03fe17535#0709) 39 | 8. [优雅、极简的设计](https://medium.com/google-developers/developers-are-users-too-part-2-96e03fe17535#3033) 40 | 9. [帮助用户认识、判断、改正错误](https://medium.com/google-developers/developers-are-users-too-part-2-96e03fe17535#d40e) 41 | 10. [提供帮助与文档](https://medium.com/google-developers/developers-are-users-too-part-2-96e03fe17535#e86b) 42 | 43 | * * * 44 | 45 | 在下篇文章中，我们将一同深入探讨这些原则，并了解如何将它们应用于 API 设计。敬请关注！ 46 | 47 | --- 48 | 49 | > [掘金翻译计划](https://github.com/xitu/gold-miner) 是一个翻译优质互联网技术文章的社区，文章来源为 [掘金](https://juejin.im) 上的英文分享文章。内容覆盖 [Android](https://github.com/xitu/gold-miner#android)、[iOS](https://github.com/xitu/gold-miner#ios)、[前端](https://github.com/xitu/gold-miner#前端)、[后端](https://github.com/xitu/gold-miner#后端)、[区块链](https://github.com/xitu/gold-miner#区块链)、[产品](https://github.com/xitu/gold-miner#产品)、[设计](https://github.com/xitu/gold-miner#设计)、[人工智能](https://github.com/xitu/gold-miner#人工智能)等领域，想要查看更多优质译文请持续关注 [掘金翻译计划](https://github.com/xitu/gold-miner)、[官方微博](http://weibo.com/juejinfanyi)、[知乎专栏](https://zhuanlan.zhihu.com/juejinfanyi)。 50 | 51 | -------------------------------------------------------------------------------- /TODO/dropouts-need-not-apply-silicon-valley-asks-mostly-for-developers-with-degrees.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [Dropouts Need Not Apply: Silicon Valley Asks Mostly for Developers With Degrees](http://blogs.wsj.com/economics/2016/03/30/dropouts-need-not-apply-silicon-valley-asks-mostly-for-developers-with-degrees/) 2 | * 原文作者 : [LAUREN WEBER](http://topics.wsj.com/person/W/lauren-weber/7369) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [Zhangjd](https://github.com/Zhangjd) 5 | * 校对者: [yangzj1992](https://github.com/yangzj1992), [shaohui10086](https://github.com/shaohui10086) 6 | 7 | # 互联网公司真的是「看重能力，不看重学历」吗？ 8 | 9 |
![](http://ww2.sinaimg.cn/large/a490147fjw1f2uxkmiivnj20kt0dvae7.jpg) 10 | 11 | 图为 Facebook 创始人马克·扎克伯格 2011 年在哈佛大学和记者交流。众所周知，扎克伯格曾经在 05 年辍学，但根据 Burning Glass Technologies 的最新调查数据显示，硅谷的雇主们更倾向于雇佣一个有本科甚至更高级学位的员工。 12 | 13 | 有种说法在硅谷流传已久，那就是科技公司招聘只看重你的代码能力而非学历。但调查发现，科技公司在招聘软件工程师时，相比于其他雇主，更倾向于要求大学学历。 14 | 15 | **Burning Glass Technologies** 是一家劳动市场数据分析公司，他们分析了全美国 160 万条关于软件工程师的招聘信息，根据报告显示，技术型公司高达 75% 的招聘广告都指明了学历要求，相比之下，所有包含软件工程师岗位的公司中，只有 58% 公开表明有学历要求。 16 | 17 | 并且在 95% 的技术部门招聘广告中，都列出了最低学历要求，雇主们需要学士或以上学位的开发者，与此同时，所有寻找开发者的雇主中，对开发者有学历要求的比例是 92%。 18 | 19 | Burning Glass 的 CEO，**Matt Sigelman**，对于表面现象和调查结果的分歧感到很困惑，“一方面是诸如比尔盖茨和扎克伯格这样的传说级人物，人们对于他们的成功奥秘很感兴趣，因为”。- [他们都是哈佛大学的辍学生](http://www.wsj.com/articles/college-dropouts-thrive-in-tech-1433323802) — “但另一方面，现实是许多优质岗位并不欢迎那些没有拿到大学学位的人”。 20 | 21 | 在美国，25 岁以上的人群中，多达 68% 的人没有学士及以上学位。 22 | 23 | Burning Glass 发现，硅谷的雇主对于学历的要求最为严格，在 77% 的开发岗招聘启事里列出了教育程度要求，并且其中 98% 的广告都要求学士或以上学位。 24 | 25 | ![](http://ww3.sinaimg.cn/large/005SiNxygw1f2mzk4y4tvj30qn0hr0v3.jpg) 26 | _辍学生更受技术公司欢迎？招聘启事里可不是这么说的。硅谷的高科技行业的雇主们在招聘开发者时，更倾向于在招聘启事中对学历作出要求。图中列出的是学历要求在招聘启事中所占比例。从左到右依次为：包含软件工程师岗位的公司、技术型公司、硅谷的技术型公司。_ 27 | 28 | ![](http://ww1.sinaimg.cn/large/005SiNxygw1f2mzkkvlyqj30qn0hr40v.jpg) 29 | _在列出学历要求的招聘启事中，硅谷的技术公司相对于其他公司更倾向于考虑学士以上学历的人群。图中列出的是学历最低要求在招聘启事中的比例分布，蓝色为学士以下学历，绿色为学士学历，红色为硕士以上学历。从左到右依次为：包含软件工程师岗位的公司、技术型公司、硅谷的技术型公司。_ 30 | 31 | 相比之下，在俄勒冈州波特兰市，开发岗招聘广告中有要求大学文凭的比例是 88%，在达拉斯和明尼阿波里斯的比例是 90%。 32 | 33 | Burning Glass 还发现，公司会为那些高学历人群开出更高的工资，对于大学毕业生，雇主支出的工资比平均水平要高出 29%，其中技术部门雇主的支出要比平均水平更是高出 36%。 34 | 35 | 这家公司还对比了有大学学历要求的职位和没有学历要求的职位之间的技能要求，却发现两者提到最多的前五项技能都是相同的。所以学历要求体现了什么作用呢？ 36 | 37 | 大部分雇主认为，拥有高学历的员工会在软技能上面体现优势，比如沟通协作能力和批判性思维。而在硅谷那些快速成长的公司中，才华可能显得尤其重要。但是，Sigelman 先生也提到，“大学学历和拥有这些技能之间并没有明显的联系”。 38 | 39 | 虽然一些公司已经开始尝试 “[盲眼招聘](http://www.wsj.com/articles/the-boss-doesnt-want-your-resume-1452025908)” 流程 - 一种完全根据工作能力而非简历信息来评价候选人的招聘方式 - 不过这一招聘方式目前尚未被深入探索。 40 | 41 | 不幸的是，技术部门仍在使用大学学历作为许多高薪工作机会的筛选条件。Sigelman 透露，他的公司正将相关数据和分析报告作为技术招聘倡议书提交给白宫 ，目的是提高美国人在互联网行业中的技能水平。“这一充满活力的行业正是招聘市场高速增长的引擎，我们对于如何把这些机会开放给大部分的美国群众非常感兴趣。” 42 | 43 | -------------------------------------------------------------------------------- /TODO/embedding-lua-in-the-web.md: -------------------------------------------------------------------------------- 1 | >* 原文链接 : [Embedding Lua in the Web](http://starlight.paulcuth.me.uk/docs/embedding-lua-in-the-web) 2 | * 原文作者 : [paulcuth](https://github.com/paulcuth) 3 | * 译文出自 : [掘金翻译计划](https://github.com/xitu/gold-miner) 4 | * 译者 : [narcotics726](https://github.com/narcotics726) 5 | * 校对者: [markzhai](https://github.com/markzhai), [yangzj1992](https://github.com/yangzj1992) 6 | 7 | # Starlight - 在网页中运行 Lua 8 | 9 | Starlight 可以让你通过「将 Lua 代码置于 `