Repository: Huxpro/huxpro.github.io Branch: master Commit: a2ab0900be50 Files: 145 Total size: 1.1 MB Directory structure: gitextract_blccy3x8/ ├── .gitignore ├── 404.html ├── CNAME ├── Gemfile ├── Gruntfile.js ├── LICENSE ├── README.md ├── Rakefile ├── _config.yml ├── _doc/ │ ├── Manual.md │ └── README.zh.md ├── _includes/ │ ├── about/ │ │ ├── en.md │ │ └── zh.md │ ├── ads.html │ ├── featured-tags.html │ ├── footer.html │ ├── friends.html │ ├── head.html │ ├── intro-header.html │ ├── mathjax_support.html │ ├── multilingual-sel.html │ ├── nav.html │ ├── posts/ │ │ └── 2017-07-12-upgrading-eleme-to-pwa/ │ │ ├── en.md │ │ └── zh.md │ ├── search.html │ ├── short-about.html │ └── sns-links.html ├── _layouts/ │ ├── default.html │ ├── keynote.html │ ├── page.html │ └── post.html ├── _posts/ │ ├── 2014-01-29-hello-2015.markdown │ ├── 2014-08-16-miui6.markdown │ ├── 2014-09-04-is-pure-android-better.markdown │ ├── 2014-10-01-why-alibaba-ux-sucks.markdown │ ├── 2014-11-20-responsive-web-design.markdown │ ├── 2014-12-13-wechat-block-kuaidi.markdown │ ├── 2015-03-10-apple-event-2015.markdown │ ├── 2015-03-25-digital-native.markdown │ ├── 2015-03-31-e2e_user_scenarios.markdown │ ├── 2015-04-14-unix-linux-note.markdown │ ├── 2015-04-15-os-metro.markdown │ ├── 2015-05-11-see-u-ali.markdown │ ├── 2015-05-25-js-module-loader.markdown │ ├── 2015-06-15-alitrip-strategy.markdown │ ├── 2015-07-09-js-module-7day.markdown │ ├── 2015-09-22-js-version.markdown │ ├── 2015-10-28-how-designer-learn-fe.markdown │ ├── 2015-12-15-ios9-safari-web.markdown │ ├── 2015-12-28-css-sucks-2015.markdown │ ├── 2016-02-01-React-vs-Angular2.markdown │ ├── 2016-06-05-pwa-in-my-pov.markdown │ ├── 2016-09-22-the-open-web.md │ ├── 2016-10-20-pwa-qcon2016.markdown │ ├── 2016-11-20-sw-101-gdgdf.markdown │ ├── 2017-01-09-wechat-miniapp-ux.md │ ├── 2017-02-09-nextgen-web-pwa.markdown │ ├── 2017-04-06-html-document.md │ ├── 2017-05-28-sw-precache.md │ ├── 2017-06-25-you-are-slaves.markdown │ ├── 2017-07-12-upgrading-eleme-to-pwa.markdown │ ├── 2017-07-26-farewell-flash.md │ ├── 2017-10-06-css-complaints.md │ ├── 2017-12-12-halting-problem.md │ ├── 2017-12-12-uncomputable-funcs.md │ ├── 2018-05-11-pwa-zh-preface.md │ ├── 2018-06-30-dreamer.md │ ├── 2018-09-27-avoiding-success-at-all-cost.md │ ├── 2018-10-06-vim-cn-im.md │ ├── 2019-09-03-vim-from-finder.md │ ├── 2019-09-08-spacemacs-workflow.md │ ├── 2019-11-19-is-pwa-dead-in-2019.md │ ├── 2020-04-03-react-hooks-vue-composition.md │ ├── 2020-07-05-reflection-2020.md │ ├── 2021-01-19-the-systematic-failure-of-higher-education-in-china.md │ ├── 2021-04-10-js-20yrs-preface.md │ ├── cs_idols/ │ │ └── 2019-09-13-peter-john-landin.md │ ├── data_rep/ │ │ ├── 2020-06-19-data-rep-int.md │ │ ├── 2020-06-21-data-rep-float.md │ │ └── 2020-06-21-data-rep-todo.md │ ├── hidden/ │ │ └── 2020-05-05-pl-chart.md │ ├── read_sf_lf/ │ │ ├── 2019-01-01-sf-lf-01-basics.md │ │ ├── 2019-01-02-sf-lf-02-induction.md │ │ ├── 2019-01-03-sf-lf-03-list.md │ │ ├── 2019-01-04-sf-lf-04-poly.md │ │ ├── 2019-01-05-sf-lf-05-tactics.md │ │ ├── 2019-01-06-sf-lf-06-logic.md │ │ ├── 2019-01-07-sf-lf-07-indprop.md │ │ ├── 2019-01-08-sf-lf-08-map.md │ │ ├── 2019-01-09-sf-lf-09-proof-object.md │ │ ├── 2019-01-10-sf-lf-10-ind-principle.md │ │ ├── 2019-01-11-sf-lf-11-rel.md │ │ ├── 2019-01-12-sf-lf-12-imp.md │ │ ├── 2019-01-13-sf-lf-13-imp-parser.md │ │ ├── 2019-01-14-sf-lf-14-imp-ceval.md │ │ ├── 2019-01-15-sf-lf-15-extraction.md │ │ └── 2019-01-16-sf-lf-16-auto.md │ ├── read_sf_plf/ │ │ ├── 2019-03-01-sf-plf-01-equiv.md │ │ ├── 2019-03-02-sf-plf-02-hoare-1.md │ │ ├── 2019-03-03-sf-plf-03-hoare-2.md │ │ ├── 2019-03-04-sf-plf-04-hoare-logic.md │ │ ├── 2019-03-05-sf-plf-05-smallstep.md │ │ ├── 2019-03-06-sf-plf-06-types.md │ │ ├── 2019-03-07-sf-plf-07-STLC.md │ │ ├── 2019-03-08-sf-plf-08-STLC-prop.md │ │ ├── 2019-03-09-sf-plf-09-more-STLC.md │ │ ├── 2019-03-10-sf-plf-10-subtyping.md │ │ ├── 2019-03-11-sf-plf-11-typechecking.md │ │ ├── 2019-03-12-sf-plf-12-records.md │ │ ├── 2019-03-13-sf-plf-13-references.md │ │ ├── 2019-03-14-sf-plf-14-record-sub.md │ │ ├── 2019-03-15-sf-plf-15-norm-STLC.md │ │ ├── 2019-03-16-sf-plf-16-lib-tactics.md │ │ ├── 2019-03-17-sf-plf-17-use-tactics.md │ │ ├── 2019-03-18-sf-plf-18-use-auto.md │ │ └── 2019-03-19-sf-plf-19-partial-eval.md │ └── read_sf_qc/ │ └── 2019-09-02-sf-qc-02-typeclasses.md ├── about.html ├── ads.txt ├── archive.html ├── css/ │ ├── bootstrap.css │ └── hux-blog.css ├── feed.xml ├── index.html ├── js/ │ ├── archive.js │ ├── bootstrap.js │ ├── hux-blog.js │ ├── jquery.js │ ├── jquery.nav.js │ ├── jquery.tagcloud.js │ ├── snackbar.js │ └── sw-registration.js ├── less/ │ ├── highlight.less │ ├── hux-blog.less │ ├── mixins.less │ ├── search.less │ ├── side-catalog.less │ ├── sidebar.less │ ├── snackbar.less │ └── variables.less ├── offline.html ├── package.json ├── pwa/ │ └── manifest.json ├── search.json └── sw.js ================================================ FILE CONTENTS ================================================ ================================================ FILE: .gitignore ================================================ _site _posts/_draft _posts/_archive _archive node_modules .vscode *.log *.lock *.sh .DS_Store .jekyll-cache */.DS_Store */*/.DS_Store ================================================ FILE: 404.html ================================================ --- layout: default title: 404 hide-in-nav: true description: "你来到了没有知识的荒原 :(" header-img: "img/404-bg.jpg" permalink: /404.html --- {% include intro-header.html type="page" short='true' %} ================================================ FILE: CNAME ================================================ huangxuan.me ================================================ FILE: Gemfile ================================================ source 'https://rubygems.org' gem 'jekyll-paginate' gem "jekyll", "~> 4.0" gem "rake" gem "webrick", "~> 1.7" ================================================ FILE: Gruntfile.js ================================================ module.exports = function(grunt) { // Project configuration. grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), uglify: { main: { src: 'js/<%= pkg.name %>.js', dest: 'js/<%= pkg.name %>.min.js' } }, less: { expanded: { options: { paths: ["css"] }, files: { "css/<%= pkg.name %>.css": "less/<%= pkg.name %>.less" } }, minified: { options: { paths: ["css"], cleancss: true }, files: { "css/<%= pkg.name %>.min.css": "less/<%= pkg.name %>.less" } } }, banner: '/*!\n' + ' * <%= pkg.title %> v<%= pkg.version %> (<%= pkg.homepage %>)\n' + ' * Copyright <%= grunt.template.today("yyyy") %> <%= pkg.author %>\n' + ' */\n', usebanner: { dist: { options: { position: 'top', banner: '<%= banner %>' }, files: { src: ['css/<%= pkg.name %>.css', 'css/<%= pkg.name %>.min.css', 'js/<%= pkg.name %>.min.js'] } } }, watch: { scripts: { files: ['js/<%= pkg.name %>.js'], tasks: ['uglify'], options: { spawn: false, }, }, less: { files: ['less/*.less'], tasks: ['less'], options: { spawn: false, } }, }, }); // Load the plugins. grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-banner'); grunt.loadNpmTasks('grunt-contrib-watch'); // Default task(s). grunt.registerTask('default', ['uglify', 'less', 'usebanner']); }; ================================================ FILE: LICENSE ================================================ Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "{}" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright 2015-2016 Huxpro https://github.com/Huxpro/ Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ======================================================================= Hux Blog Subcomponents: The Hux Blog project contains subcomponents with separate copyright notices and license terms. Your use of the source code for the these subcomponents is subject to the terms and conditions of the following licenses. (MIT License) Clean Blog Jekyll Theme: https://github.com/BlackrockDigital/startbootstrap-clean-blog-jekyll/ https://github.com/BlackrockDigital/startbootstrap-clean-blog-jekyll/blob/master/LICENSE Copyright (c) 2013-2016 Blackrock Digital LLC. ================================================ FILE: README.md ================================================ [Hux Blog](https://huangxuan.me) ================================ > I never expected this to become popular. ![](http://huangxuan.me/img/blog-desktop.jpg) [User Manual 👉](_doc/Manual.md) -------------------------------------------------- ### Getting Started 1. You will need [Ruby](https://www.ruby-lang.org/en/) and [Bundler](https://bundler.io/) to use [Jekyll](https://jekyllrb.com/). Following [Using Jekyll with Bundler](https://jekyllrb.com/tutorials/using-jekyll-with-bundler/) to fullfill the enviromental requirement. 2. Installed dependencies in the `Gemfile`: ```sh $ bundle install ``` 3. Serve the website (`localhost:4000` by default): ```sh $ bundle exec jekyll serve # alternatively, npm start ``` ### Development (Build From Source) To modify the theme, you will need [Grunt](https://gruntjs.com/). There are numbers of tasks you can find in the `Gruntfile.js`, includes minifing JavaScript, compiling `.less` to `.css`, adding banners to keep the Apache 2.0 license intact, watching for changes, etc. Yes, they were inherited and are extremely old-fashioned. There is no modularization and transpilation, etc. Critical Jekyll-related code are located in `_include/` and `_layouts/`. Most of them are [Liquid](https://github.com/Shopify/liquid/wiki) templates. This theme uses the default code syntax highlighter of jekyll, [Rouge](http://rouge.jneen.net/), which is compatible with Pygments theme so just pick any pygments theme css (e.g. from [here](http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html) and replace the content of `highlight.less`. ### Interesting to know more? Checkout the [full user manual](_doc/Manual.md)! Other Resources --------------- Ports - [**Hexo**](https://github.com/Kaijun/hexo-theme-huxblog) by @kaijun - [**React-SSR**](https://github.com/LucasIcarus/huxpro.github.io/tree/ssr) by @LucasIcarus [Starter/Boilerplate](https://github.com/huxpro/huxblog-boilerplate) - Out of date. Helps wanted for updating it on par with the main repo Translation - [🇨🇳 中文文档（有点过时）](https://github.com/Huxpro/huxpro.github.io/blob/master/_doc/README.zh.md) License ------- Apache License 2.0. Copyright (c) 2015-present Huxpro Hux Blog is derived from [Clean Blog Jekyll Theme (MIT License)](https://github.com/BlackrockDigital/startbootstrap-clean-blog-jekyll/) Copyright (c) 2013-2016 Blackrock Digital LLC. ================================================ FILE: Rakefile ================================================ require "rubygems" require 'rake' require 'yaml' require 'time' SOURCE = "." CONFIG = { 'version' => "12.3.2", 'themes' => File.join(SOURCE, "_includes", "themes"), 'layouts' => File.join(SOURCE, "_layouts"), 'posts' => File.join(SOURCE, "_posts"), 'post_ext' => "md", 'theme_package_version' => "0.1.0" } # Usage: rake post title="A Title" subtitle="A sub title" desc "Begin a new post in #{CONFIG['posts']}" task :post do abort("rake aborted: '#{CONFIG['posts']}' directory not found.") unless FileTest.directory?(CONFIG['posts']) title = ENV["title"] || "new-post" subtitle = ENV["subtitle"] || "This is a subtitle" slug = title.downcase.strip.gsub(' ', '-').gsub(/[^\w-]/, '') begin date = (ENV['date'] ? Time.parse(ENV['date']) : Time.now).strftime('%Y-%m-%d') rescue Exception => e puts "Error - date format must be YYYY-MM-DD, please check you typed it correctly!" exit -1 end filename = File.join(CONFIG['posts'], "#{date}-#{slug}.#{CONFIG['post_ext']}") if File.exist?(filename) abort("rake aborted!") if ask("#{filename} already exists. Do you want to overwrite?", ['y', 'n']) == 'n' end puts "Creating new post: #{filename}" open(filename, 'w') do |post| post.puts "---" post.puts "layout: post" post.puts "title: \"#{title.gsub(/-/,' ')}\"" post.puts "subtitle: \"#{subtitle.gsub(/-/,' ')}\"" post.puts "date: #{date}" post.puts "author: \"Hux\"" post.puts "header-img: \"img/post-bg-2015.jpg\"" post.puts "tags: []" post.puts "---" end end # task :post desc "Launch preview environment" task :preview do system "jekyll --auto --server" end # task :preview #Load custom rake scripts Dir['_rake/*.rake'].each { |r| load r } ================================================ FILE: _config.yml ================================================ # Site settings title: Hux Blog SEOTitle: 黄玄的博客 | Hux Blog header-img: img/home-bg.jpg email: huxpro@gmail.com description: "这里是 @Hux黄玄 的个人博客，与你一起发现更大的世界 | 要做一个有 swag 的程序员" keyword: "黄玄, Hux黄玄, Hux, 鬼栈, huxpro, @huxpro, 黄玄的博客, Hux Blog, 博客, 个人网站, 互联网, Web, JavaScript, React, React Native, 前端, 设计" url: "https://huangxuan.me" # your host, for absolute URL baseurl: "" # for example, '/blog' if your blog hosted on 'host/blog' # Publish posts or collection documents with a future date. future: true # SNS settings RSS: false weibo_username: huxpro zhihu_username: huxpro github_username: huxpro twitter_username: huxpro #facebook_username: huxpro #linkedin_username: firstname-lastname-idxxxx # Build settings # from 2016, 'pygments' is unsupported on GitHub Pages. Use 'rouge' for highlighting instead. highlighter: rouge permalink: pretty paginate: 10 exclude: [ "less", "node_modules", "Gruntfile.js", "package.json", "README.md", "README.zh.md", ] anchorjs: true # if you want to customize anchor. check out line:181 of `post.html` # If you have timezone issue (e.g. #68) in China, uncomment to use this: #timezone: CN # Gems # from PR#40, to support local preview for Jekyll 3.0 # make sure you have this gem installed # `$ gem install jekyll-paginate` plugins: [jekyll-paginate] # Markdown settings # replace redcarpet to kramdown, # although redcarpet can auto highlight code, the lack of header-id make the catalog impossible, so I switch to kramdown # document: http://jekyllrb.com/docs/configuration/#kramdown markdown: kramdown kramdown: input: GFM # use Github Flavored Markdown !important syntax_highlighter_opts: span: line_numbers: false block: line_numbers: true start_line: 1 # Disqus settings disqus_username: hux # Netease settings netease_comment: false # Analytics settings # Baidu Analytics # ba_track_id: [your track id] # Google Analytics ga_track_id: "UA-49627206-1" # Format: UA-xxxxxx-xx ga_domain: huangxuan.me # Sidebar settings sidebar: true # whether or not using Sidebar. sidebar-about-description: "要做一个有 swag 的程序员
React Team @ Meta" sidebar-avatar: https://github.com/Huxpro.png # use absolute URL, seeing it's used in both `/` and `/about/` # Featured Tags featured-tags: true # whether or not using Feature-Tags featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value # Progressive Web Apps chrome-tab-theme-color: "#000000" service-worker: true # MathJax rendering for layout:page (e.g. post preview) page-mathjax: false # Friends friends: [ { title: "乱序（Midare）", href: "http://mida.re/" }, { title: "Ebn Zhang", href: "https://ebnbin.dev/" }, { title: "Kun Qian", href: "http://kunq.me" }, { title: "Sherry Woo", href: "https://sherrywoo.me/" }, { title: "SmdCn", href: "http://blog.smdcn.net" }, { title: "JiyinYiyong", href: "http://tiye.me/" }, { title: "DHong Say", href: "http://dhong.co" }, { title: "尹峰以为", href: "http://ingf.github.io/" }, ] ================================================ FILE: _doc/Manual.md ================================================ Hux Blog User Manual ==================== * Basics * [Getting Started](#getting-started) * [Development](#development) * [Config](#configs) * [Posts](#posts) * Components * [SideBar](#sidebar) * [Mini About Me](#mini-about-me) * [Featured Tags](#featured-tags) * [Friends](#friends) * [Keynote Layout](#keynote-layout) * Misc * [Comment](#comment) * [Analytics](#analytics) * [SEO Title](#seo-title) * [FAQ](#faq) * [Releases](#releases) ### Getting Started 1. You will need [Ruby](https://www.ruby-lang.org/en/) and [Bundler](https://bundler.io/) to use [Jekyll](https://jekyllrb.com/). Following [Using Jekyll with Bundler](https://jekyllrb.com/tutorials/using-jekyll-with-bundler/) to fullfill the enviromental requirement. 2. Installed dependencies in the `Gemfile`: ```sh $ bundle install ``` 3. Serve the website (`localhost:4000` by default): ```sh $ bundle exec jekyll serve # alternatively, npm start ``` ### Development To modify the theme, you will need [Grunt](https://gruntjs.com/). There are numbers of tasks you can find in the `Gruntfile.js`, includes minifing JavaScript, compiling `.less` to `.css`, adding banners to keep the Apache 2.0 license intact, watching for changes, etc. Yes, they were inherited and are extremely old-fashioned. There is no modularization and transpilation, etc. Critical Jekyll-related code are located in `_include/` and `_layouts/`. Most of them are [Liquid](https://github.com/Shopify/liquid/wiki) templates. This theme uses the default code syntax highlighter of jekyll, [Rouge](http://rouge.jneen.net/), which is compatible with Pygments theme so just pick any pygments theme css (e.g. from [here](http://jwarby.github.io/jekyll-pygments-themes/languages/javascript.html) and replace the content of `highlight.less`. ### Configs You can easily customize the blog by modifying `_config.yml`: ```yml # Site settings title: Hux Blog # title of your website SEOTitle: Hux Blog # check out docs for more detail description: "Cool Blog" # ... # SNS settings github_username: huxpro # modify this account to yours weibo_username: huxpro # the footer woule be auto-updated. # Build settings paginate: 10 # nums of posts in one page ``` For more options, please check out [Jekyll - Official Site](http://jekyllrb.com/). Most of them are very descriptive so feel brave to dive into code directly as well. ### Posts Posts are simply just Markdown files in the `_posts/`. Metadata of posts are listed in a YAML style _front-matter_. For instance, [Hello 2015])(https://huangxuan.me/2015/01/29/hello-2015/) has the front-matter of this: ```yml --- layout: post title: "Hello 2015" subtitle: " \"Hello World, Hello Blog\"" date: 2015-01-29 12:00:00 author: "Hux" header-img: "img/post-bg-2015.jpg" catalog: true tags: - Life - Meta --- ``` > Note: `tags` section can also be written as `tags: [Life, Meta]`. After [Rake](https://github.com/ruby/rake) is introduced, we can use the command below to simplify the post creation: ``` rake post title="Hello 2015" subtitle="Hello World, Hello Blog" ``` This command will automatially generate a sample post similar as above under the `_posts/` folder. There are a bunch of _advanced_ configs: 1. a _text style_ header like [this](https://huangxuan.me/2019/09/08/spacemacs-workflow/) with ```yml header-style: text ``` 2. Turning on Latex support: ```yml mathjax: true ``` 3. Adding a mask to the header picture: ```yml header-mask: 0.3 ``` Etc. ### SideBar ![](http://huangxuan.me/img/blog-sidebar.jpg) **SideBar** provides possible modules to show off more personal information. ```yml # Sidebar settings sidebar: true # default true sidebar-about-description: "your description here" sidebar-avatar: /img/avatar-hux.jpg # use absolute URL. ``` Modules *[Featured Tags](#featured-tags)*, *[Mini About Me](#mini-about-me)* and *[Friends](#friends)* are turned on by default and you can add your own. The sidebar is naturally responsive, i.e. be pushed to bottom in a smaller screen (`<= 992px`, according to [Bootstarp Grid System](http://getbootstrap.com/css/#grid)) ### Mini About Me **Mini-About-Me** displays your avatar, description and all SNS buttons if `sidebar-avatar` and `sidebar-about-description` variables are set. It would be hidden in a smaller screen when the entire sidebar are pushed to bottom. Since there is already SNS portion there in the footer. ### Featured Tags **Featured-Tags** is similar to any cool tag features in website like [Medium](http://medium.com). Started from V1.4, this module can be used even when sidebar is off and displayed always in the bottom. ```yml # Featured Tags featured-tags: true featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value ``` The only thing need to be paid attention to is `featured-condition-size`, which indicate a criteria that tags need to have to be able to "featured". Internally, a condition `{% if tag[1].size > {{site.featured-condition-size}} %}` are made. ### Friends Friends is a common feature of any blog. It helps with SEO if you have a bi-directional hyperlinks with your friends sites. This module can live when sidebar is off as well. Friends information is configured as a JSON string in `_config.yml` ```yml # Friends friends: [ { title: "Foo Blog", href: "http://foo.github.io/" }, { title: "Bar Blog", href: "http://bar.github.io" } ] ``` ### Keynote Layout ![](http://huangxuan.me/img/blog-keynote.jpg) There is a increased trend to use Open Web technology for keynotes and presentations via Reveal.js, Impress.js, Slides, Prezi etc. I consider a modern blog should have first-class support to embed these HTML based presentation so **Keynote layout** are made. To use, in the **front-matter**: ```yml --- layout: keynote iframe: "http://huangxuan.me/js-module-7day/" --- ``` The `iframe` element will be automatically resized to adapt different form factors and device orientation. Because most of the keynote framework prevent the browser default scroll behavior. A bottom-padding is set to help user and imply user that more content could be presented below. ### Comment > Help Wanted: Moving to a Github-based solution. Currently, [Disqus](http://disqus.com) and [Duoshuo](http://duoshuo.com) are supported as third party discussion system. First of all, you need to sign up and get your own account. **Repeat, DO NOT use mine!** (I have set Trusted Domains) It is deathly simple to sign up and you will get the full power of management system. Please give it a try! Second, from V1.5, you can easily complete your comment configuration by just adding your **short name** into `_config.yml`: ```yml duoshuo_username: _your_duoshuo_short_name_ # OR disqus_username: _your_disqus_short_name_ ``` **To the old version user**, it's better that you pull the new version, otherwise you have to replace code in `post.html`, `keynote.html` and `about.html` on your own. Furthermore, Duoshuo support Sharing. if you only wanna use Duoshuo comment without sharing, you can set `duoshuo_share: false`. ### Analytics From V1.5, Google Analytics and Baidu Tongji are supported with a simple config away: ```yml # Baidu Analytics ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900 # Google Analytics ga_track_id: 'UA-49627206-1' # Format: UA-xxxxxx-xx ga_domain: huangxuan.me ``` Just checkout the code offered by Google/Baidu, and copy paste here, all the rest is already done for you. (Google might ask for meta tag `google-site-verification`) ### SEO Title Before V1.4, site setting `title` is not only used for displayed in Home Page and Navbar, but also used to generate the `` in HTML. It's possible that you want the two things different. For me, my site-title is **“Hux Blog”** but I want the title shows in search engine is **“黄玄的博客 | Hux Blog”** which is multi-language. So, the SEO Title is introduced to solve this problem, you can set `SEOTitle` different from `title`, and it would be only used to generate HTML `<title>` and setting DuoShuo Sharing. FAQ --- #### cannot load such file -- jekyll-paginate This blog started in Jekyll 2 time when `jekyll-paginate` is standard. With Jekyll 3, it's a plugin we included in `_config.yml`. Make sure you installed it via plain `gem` CLI or Bundler. Releases -------- #### V1.8.2 - Merged #333, #336 from @JinsYin. - Add `Gemfile` due to increasing Bundler using. - TODO: `multilingual` could be more automative via configurations and convention. - Drop the entire `portfolio` page until a big rewrite of a better `project` page. #### V1.8.1 - Improve multi-lingual implementation, see `about.html` or `_posts/2017-07-12-upgrading-eleme-to-pwa.markdown` for a example of uses. #### V1.8 - Brand new [Archive](https://huangxuan.me/archive/) page! It combines previous Archive and Tag page and it's backward-cmpatible. Shout out to [@kitian616/jekyll-TeXt-theme](https://github.com/kitian616/jekyll-TeXt-theme) of bringing this idea. - Improve engineering by extracting duplicated liquid templates into reuseable includes. This was proposed in #74 by @Kaijun but postponed for entirely 2.5 years! I wasn't able to merge his PR directly because of long-time divegence but the credit is belonging to @Kaijun. - Improved code block. Long-wanted line number are supported out of the box (thanks for @SmilingParadise's help from Sina Weibo), the default theme is updated to Atom One Dark as well (checkout FQA for how to change to your farovite theme) - MathJax support by @Voleking in #80. I choose to use the SVG renderer though. See [Mathjax, kramdown and Octopress](https://www.lucypark.kr/blog/2013/02/25/mathjax-kramdown-and-octopress/) for writing and escaping details. - Open Graph Protocol support by @Android-KitKat in #253 - `header-img-credit` and `header-img-credit-href` - `nav-style: invert` and `header-style: text` #### V1.7 - PWA / Service Worker support. #### v1.6 - Change cdn to cdnjs for better HTTPS support #### V1.5.2 - Feeling annoyed to delete my blog post after clone or pull? Try **Boilerplate (Beta)** to help you get started quickly and easily merge update. - `-apple-system` is added in font rule, which display beautiful new font **San Francisco** in iOS 9 by default. - Fixed [issue#15](https://github.com/Huxpro/huxpro.github.io/issues/15) about code wrap. #### V1.5.1 - **[Comment](#comment)** support [**Disqus**](http://disqus.com) officially, thanks to @rpsh. #### V1.5 - **[Comment](#comment)** and **[Analytics](#analytics)** is configurable now! We also add **Google Analytics support** and drop tencents. Both documents is updated. #### V1.4 - **[Featured Tags](#featured-tags)** is now independent of [SideBar](#sidebar). Both documents is updated. - New **[SEO Title](#seo-title)** for SEO usage which is differ from the site title #### V1.3.1 - Support **PingFang (苹方)**, the new Chinese font presented by [OS X El Capitan](http://www.apple.com/cn/osx/whats-new/) #### V1.3 - Big Improvement to the **Navigation Menu** *(especially in Android)*: Dropping the old, stuttering, low-performance [Bootstrap collapse.js](http://getbootstrap.com/javascript/#collapse), replaced with an own wrote, [jank free](http://jankfree.org/) navbar menu in a pretty high-performance implementation of [Google Material Design](https://www.google.com/design/spec/material-design/introduction.html). <img src="http://huangxuan.me/img/blog-md-navbar.gif" width="320" /> #### V1.2 - Brand new **[Keynote Layout](#keynote-layout)** is provided for easily posting beautiful HTML presentations you have created with this blog #### V1.1 - We now support a clean and gorgeous **[SideBar](#sidebar)** for displaying more info - **[Friends](#friends)** is also added as a common feature of blog help you do SEO #### V1.0 - Full-feature **Tag** support - **Mobile first** user experience optimization - **Typographic optimization** for Chinese Fonts - **Network optimizaition** for China, dropping Google webfont, using local CDN - Using [Github Flavored Markdown](https://help.github.com/articles/github-flavored-markdown/) - Using Baidu, Tencent/QQ analytics - Using [DuoShuo](http://duoshuo.com/) as the Disqus-like third party discussion system ================================================ FILE: _doc/README.zh.md ================================================ # Hux blog 模板 ### [我的博客在这里 →](http://huxpro.github.io) ### 关于收到"Page Build Warning"的email 由于jekyll升级到3.0.x,对原来的pygments代码高亮不再支持，现只支持一种-rouge，所以你需要在 `_config.yml`文件中修改`highlighter: rouge`.另外还需要在`_config.yml`文件中加上`gems: [jekyll-paginate]`. 同时,你需要更新你的本地jekyll环境. 使用`jekyll server`的同学需要这样： 1. `gem update jekyll` # 更新jekyll 2. `gem update github-pages` #更新依赖的包 使用`bundle exec jekyll server`的同学在更新jekyll后，需要输入`bundle update`来更新依赖的包. 参考文档：[using jekyll with pages](https://help.github.com/articles/using-jekyll-with-pages/) & [Upgrading from 2.x to 3.x](http://jekyllrb.com/docs/upgrading/2-to-3/) ## 关于模板(beta) 我的博客仓库——`huxpro.github.io`，是经常修改的，而且还会有人乱提交代码，因此给大家做了一个稳定版的模板。大家可以直接fork模板——`huxblog-boilerplate`,要改的地方我都说明了。或者可以直接下载zip到本地自己去修改。 ``` $ git clone git@github.com:Huxpro/huxblog-boilerplate.git ``` **[在这里预览模板 →](http://huangxuan.me/huxblog-boilerplate/)** ## 各版本特性 ##### New Feature (V1.5.2) * 当你fork了我的仓库之后，还要删掉里面的关于我的文档是不是感到略烦躁呢？**Boilerplate** 模板将帮助你快速开始，方便合并与更新。 * `-apple-system`被添加到了字体规则里面了，这套字体格式能将iOS9默认的新字体**San Francisco**表现的非常漂亮。 * 解决了代码过长自动换行的bug,替换为横向滚动条。详情请见[issue#15](https://github.com/Huxpro/huxpro.github.io/issues/15) ###### 其他历史版本个人觉得没有必要了解，看看英文就行了。 ## 支持 * 你可以自由的fork。如果你能将主题作者和 github 的地址保留在你的页面底部，我将非常感谢你。 * 如果你喜欢我的这个博客模板，请在`huxpro.github.io`这个repository点个赞——右上角**star**一下。 ## 说明文档 * 开始 * [环境要求](#environment) * [开始](#get-started) * [写一篇博文](#write-posts) * 组件 * [侧边栏](#sidebar) * [迷你关于我](#mini-about-me) * [推荐标签](#featured-tags) * [好友链接](#friends) * [HTML5 演示文档布局](#keynote-layout) * 评论与 Google/Baidu Analytics * [评论](#comment) * [网站分析](#analytics) * 高级部分 * [自定义](#customization) * [标题底图](#header-image) * [搜索展示标题-头文件](#seo-title) #### Environment 如果你安装了jekyll，那你只需要在命令行输入`jekyll serve`就能在本地浏览器预览主题。你还可以输入`jekyll serve --watch`，这样可以边修改边自动运行修改后的文件。 经 [@BrucZhaoR](https://github.com/BruceZhaoR)的测试，好像两个命令都是可以的自动运行修改后的文件的，刷新后可以实时预览。官方文件是建议安装bundler，这样你在本地的效果就跟在github上面是一样的。详情请见这里：https://help.github.com/articles/using-jekyll-with-pages/#installing-jekyll #### Get Started 你可以通用修改 `_config.yml`文件来轻松的开始搭建自己的博客: ``` # Site settings title: Hux Blog # 你的博客网站标题 SEOTitle: Hux Blog # 在后面会详细谈到 description: "Cool Blog" # 随便说点，描述一下 # SNS settings github_username: huxpro # 你的github账号 weibo_username: huxpro # 你的微博账号，底部链接会自动更新的。 # Build settings # paginate: 10 # 一页你准备放几篇文章 ``` Jekyll官方网站还有很多的参数可以调，比如设置文章的链接形式...网址在这里：[Jekyll - Official Site](http://jekyllrb.com/) 中文版的在这里：[Jekyll中文](http://jekyllcn.com/). #### write-posts 要发表的文章一般以markdown的格式放在这里`_posts/`，你只要看看这篇模板里的文章你就立刻明白该如何设置。 yaml 头文件长这样: ``` --- layout: post title: "Hello 2015" subtitle: "Hello World, Hello Blog" date: 2015-01-29 12:00:00 author: "Hux" header-img: "img/post-bg-2015.jpg" tags: - Life --- ``` 在引入[Rake](https://github.com/ruby/rake)工具之后，我们可以使用命令： ``` rake post title="Hello 2015" subtitle="Hello World, Hello Blog" ``` 来自动生成上面的文章模板。 #### SideBar 看右边: ![](http://huangxuan.me/img/blog-sidebar.jpg) 设置是在 `_config.yml`文件里面的`Sidebar settings`那块。 ``` # Sidebar settings sidebar: true #添加侧边栏 sidebar-about-description: "简单的描述一下你自己" sidebar-avatar: /img/avatar-hux.jpg #你的大头贴，请使用绝对地址. ``` 侧边栏是响应式布局的，当屏幕尺寸小于992px的时候，侧边栏就会移动到底部。具体请见bootstrap栅格系统 <http://v3.bootcss.com/css/> #### Mini About Me Mini-About-Me 这个模块将在你的头像下面，展示你所有的社交账号。这个也是响应式布局，当屏幕变小时候，会将其移动到页面底部，只不过会稍微有点小变化，具体请看代码。 #### Featured Tags 看到这个网站 [Medium](http://medium.com) 的推荐标签非常的炫酷，所以我将他加了进来。 这个模块现在是独立的，可以呈现在所有页面，包括主页和发表的每一篇文章标题的头上。 ``` # Featured Tags featured-tags: true featured-condition-size: 1 # A tag will be featured if the size of it is more than this condition value ``` 唯一需要注意的是`featured-condition-size`: 如果一个标签的 SIZE，也就是使用该标签的文章数大于上面设定的条件值，这个标签就会在首页上被推荐。 内部有一个条件模板 `{% if tag[1].size > {{site.featured-condition-size}} %}` 是用来做筛选过滤的. #### Friends 好友链接部分。这会在全部页面显示。 设置是在 `_config.yml`文件里面的`Friends`那块，自己加吧。 ``` # Friends friends: [ { title: "Foo Blog", href: "http://foo.github.io/" }, { title: "Bar Blog", href: "http://bar.github.io" } ] ``` #### Keynote Layout HTML5幻灯片的排版： ![](http://huangxuan.me/img/blog-keynote.jpg) 这部分是用于占用html格式的幻灯片的，一般用到的是 Reveal.js, Impress.js, Slides, Prezi 等等.我认为一个现代化的博客怎么能少了放html幻灯的功能呢~ 其主要原理是添加一个 `iframe`，在里面加入外部链接。你可以直接写到头文件里面去，详情请见下面的yaml头文件的写法。 ``` --- layout: keynote iframe: "http://huangxuan.me/js-module-7day/" --- ``` iframe在不同的设备中，将会自动的调整大小。保留内边距是为了让手机用户可以向下滑动，以及添加更多的内容。 #### Comment 博客不仅支持多说[Duoshuo](http://duoshuo.com)评论系统，也支持[Disqus](http://disqus.com)评论系统。 `Disqus`优点是：国际比较流行，界面也很大气、简介，如果有人评论，还能实时通知，直接回复通知的邮件就行了；缺点是：评论必须要去注册一个disqus账号，分享一般只有Facebook和Twitter，另外在墙内加载速度略慢了一点。想要知道长啥样，可以看以前的版本点[这里](http://brucezhaor.github.io/about.html) 最下面就可以看到。 `多说` 优点是：支持国内各主流社交软件(微博，微信，豆瓣，QQ空间 ...)一键分享按钮功能，另外登陆比较方便，管理界面也是纯中文的，相对于disqus全英文的要容易操作一些；缺点是：就是界面丑了一点。 当然你是可以自定义界面的css的，详情请看多说开发者文档 http://dev.duoshuo.com/docs/5003ecd94cab3e7250000008 。 **首先**，你需要去注册一个账号，不管是disqus还是多说的。**不要直接使用我的啊！** **其次**，你只需要在下面的yaml头文件中设置一下就可以了。 ``` duoshuo_username: _你的用户名_ # 或者 disqus_username: _你的用户名_ ``` **最后**多说是支持分享的，如果你不想分享，请这样设置：`duoshuo_share: false`。你可以同时使用两个评论系统，不过个人感觉怪怪的。 #### Analytics 网站分析，现在支持百度统计和Google Analytics。需要去官方网站注册一下，然后将返回的code贴在下面： ``` # Baidu Analytics ba_track_id: 4cc1f2d8f3067386cc5cdb626a202900 # Google Analytics ga_track_id: 'UA-49627206-1' # 你用Google账号去注册一个就会给你一个这样的id ga_domain: huangxuan.me # 默认的是 auto, 这里我是自定义了的域名，你如果没有自己的域名，需要改成auto。 ``` #### Customization 如果你喜欢折腾，你可以去自定义我的这个模板的 code，[Grunt](gruntjs.com)已经为你准备好了。（感谢 Clean Blog） JavaScript 的压缩混淆、Less 的编译、Apache 2.0 许可通告的添加与 watch 代码改动，这些任务都揽括其中。简单的在命令行中输入 `grunt` 就可以执行默认任务来帮你构建文件了。如果你想搞一搞 JavaScript 或 Less 的话，`grunt watch` 会帮助到你的。 **如果你可以理解 `_include/` 和 `_layouts/`文件夹下的代码（这里是整个界面布局的地方），你就可以使用 Jekyll 使用的模版引擎 [Liquid](https://github.com/Shopify/liquid/wiki)的语法直接修改/添加代码，来进行更有创意的自定义界面啦！** #### Header Image 标题底图是可以自己选的，看看几篇示例post你就知道如何设置了。在 [issue #6 ](https://github.com/Huxpro/huxpro.github.io/issues/6) 中我被问到：怎么样才能让标题底图好看呢？ 标题底图的选取完全是看个人的审美了，我也帮不了你。每一篇文章可以有不同的底图，你想放什么就放什么，最后宽度要够，大小不要太大，否则加载慢啊。 但是需要注意的是本模板的标题是**白色**的，所以背景色要设置为**灰色**或者**黑色**，总之深色系就对了。当然你还可以自定义修改字体颜色，总之，用github pages就是可以完全的个性定制自己的博客。 #### SEO Title 我的博客标题是 **“Hux Blog”** 但是我想要在搜索的时候显示 **“黄玄的博客 | Hux Blog”** ，这个就需要SEO Title来定义了。 其实这个SEO Title就是定义了<head><title>标题这个里面的东西和多说分享的标题，你可以自行修改的。 ## 致谢 1. 这个模板是从这里[IronSummitMedia/startbootstrap-clean-blog-jekyll](https://github.com/IronSummitMedia/startbootstrap-clean-blog-jekyll) fork 的。 感谢这个作者 2. 感谢[@BrucZhaoR](https://github.com/BruceZhaoR)的中文翻译 3. 感谢 Jekyll、Github Pages 和 Bootstrap! ================================================ FILE: _includes/about/en.md ================================================ Hey, I am Huang, Xuan (a.k.a. _@huxpro_). I worked on the [React Team](https://beta.reactjs.org/community/meet-the-team#react-core) at FacebookMeta. I considered myself as a hybrid between a software engineer specifically into the programming languages theories and implementations domain (i.e. compiler, type system, type-based formal verification, virtual machine, runtime systems, garbage collection), and a creative technologiest deeply caring about many humanistic aspects (e.g. visual, sound, interaction) in UI and HCI in general. I also worked on the [Hermes JavaScript Engine](https://hermesengine.dev/), some other projects under the [Reality Labs (Research)](https://tech.fb.com/ar-vr/), and [ReasonML](https://reasonml.github.io/) (now [ReScript](https://rescript-lang.org/)) efforts at Meta (Facebook). In the past, I worked on [Alitrip (Fliggy)](https://www.alitrip.com/) mobile and web apps under the [Alibaba Group](https://en.wikipedia.org/wiki/Alibaba_Group), found and lead front-end infrastructure team at an unicorn startup company [Beijing Weiying (a.k.a. WePiao, now acquired by Maoyan)](https://www.crunchbase.com/organization/beijing-weiying-technology), and helped [Ele.me (now acquired by Alibaba)](https://en.wikipedia.org/wiki/Ele.me) to upgrade their mobile web site into [the first influential PWA (progressive web app) in China](https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509). I studied BA, Digital Media Art at [Communication University of China](https://en.wikipedia.org/wiki/Communication_University_of_China) and MS, Computer Science (with a focus on programming languages, mainly supervised by [Prof. Matthew Fluet](https://www.cs.rit.edu/~mtf/)) at [Rochester Institute of Technology](https://en.wikipedia.org/wiki/Rochester_Institute_of_Technology). ##### Appearence - [React Labs: What We've Been Working On – June 2022][12] · React Blog · 2022 - [React Without Memo][11] · [React Conf 2021](https://conf.reactjs.org/) - [Toward Hermes being the Default][11] · React Native Blog · 2021 - React Native 0.64 with Hermes for iOS · [The RN Show Podcast Ep #5](https://www.callstack.com/podcast-react-native-show) · 2021 - [Upgrading to Progressive Web Apps][9] · [JSConf China Shanghai 2017](http://2017.jsconf.cn/) - Building Progressive Web Apps · [CSDI Guangzhou 2017](http://www.csdisummit.com/) - The State of Progressive Web App · GDG IO Redux Beijing 2017 - PWA Rehashing · Baidu HQ Beijing 2017 - [Service Worker 101][5] · GDG DevFest Beijing 2016 - [Progressive Web Apps][4] · QCon Shanghai 2016 - Progressive Web App in my POV · GDG IO Redux Beijing 2016 - [CSS Still Sucks 2015][2] · 2015 - [JavaScript Modularization Journey][1] · 2015 [1]: //huangxuan.me/2015/07/09/js-module-7day/ [2]: //huangxuan.me/2015/12/28/css-sucks-2015/ [3]: //huangxuan.me/2016/06/05/pwa-in-my-pov/ [4]: //huangxuan.me/2016/10/20/pwa-qcon2016/ [5]: //huangxuan.me/2016/11/20/sw-101-gdgdf/ [6]: https://yanshuo.io/assets/player/?deck=58ac8598b123db0067292f92 "PWA Rehashing" [7]: https://yanshuo.io/assets/player/?deck=593ad6fbfe88c2006a0a0d6d "The State of PWA" [8]: https://yanshuo.io/assets/player/?deck=594d673d570c357d0698a950 "Building PWA" [9]: //huangxuan.me/jsconfcn2017/ [10]: https://reactnative.dev/blog/2021/10/26/toward-hermes-being-the-default [11]: https://youtu.be/lGEMwh32soc [12]: https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html ================================================ FILE: _includes/about/zh.md ================================================ Hey，我是黄玄（a.k.a. Hux, _@huxpro_），一个略懂计算机科学与艺术的斜杆不动青年，自诩是一个[广院](https://baike.baidu.com/item/%E4%B8%AD%E5%9B%BD%E4%BC%A0%E5%AA%92%E5%A4%A7%E5%AD%A6)数字媒体艺术系与 RIT 计算机科学系（师从 [Prof. Matthew Fluet](https://www.cs.rit.edu/~mtf/) 专攻编程语言）杂交出来的[黑客与画家](https://book.douban.com/subject/6021440/)。 现为 Facebook Meta 签约软件工程师，就职于开源技术网红团队 [React](https://beta.reactjs.org/community/meet-the-team#react-core)，曾参与 [Hermes JavaScript 引擎](https://hermesengine.dev/)，[ReasonML](https://reasonml.github.io/) (现 [ReScript](https://rescript-lang.org/))，以及 [Reality Labs](https://tech.fb.com/ar-vr/) 某保密项目等。在国内期间，曾被招募为阿里巴巴 · [阿里旅行（飞猪）](http://alitrip.com)· 前端工程师、微影时代 · 微票儿 · 前端基础设施工程团队负责人、[饿了么](https://ele.me/) · 大前端团队 · [PWA 顾问](https://medium.com/elemefe/upgrading-ele-me-to-progressive-web-app-2a446832e509) 等。 目前的物理活动范围主要在美帝纽约与硅谷，也想当个数字游民侠。虚拟分身日常出没于[微博](https://weibo.com/huxpro)、[知乎](https://www.zhihu.com/people/huxpro/pins/posts)、[B站](https://space.bilibili.com/43271611)、[Instagram](https://www.instagram.com/huxpro/)、[推特](https://twitter.com/Huxpro/)、[Github](https://github.com/huxpro) 等。 ##### 技术演讲 - [我的大前端世界观][20] · [FEDAY](https://fequan.com/2023/) · 2023 - [前端已死，前端永生][21] · [掘金年度技术演讲](https://juejin.cn/meetings/talk2023) · 2023 - [React 国情咨文 2022][13] · 第七届中国开源年会 · 2023 - [React Labs: What We've Been Working On – June 2022][12] · React Blog - [React Without Memo][11] · [React Conf 2021](https://conf.reactjs.org/) - [Toward Hermes being the Default][11] · React Native Blog · 2021 - React Native 0.64 with Hermes for iOS · [The RN Show Podcast Ep #5](https://www.callstack.com/podcast-react-native-show) · 2021 - [Upgrading to Progressive Web Apps][9] · [Youtube](https://www.youtube.com/watch?v=RWzMF-1fjJ8&t=1s) · [JSConf CN 上海 2017](http://2017.jsconf.cn/) - Building Progressive Web Apps · [CSDI 广州 2017](http://www.csdisummit.com/) - The State of Progressive Web App · GDG IO Redux 北京 2017 - 炒冷饭 · PWA 到底是个什么玩意？· Baidu HQ 北京 2017 - [Service Worker 101][5] · GDG DevFest 北京 2016 - [Progressive Web App，复兴序章][4] · [QCon 上海 2016](http://2016.qconshanghai.com/presentation/3111) - Progressive Web App 之我见 · GDG IO Redux 北京 2016 - [CSS Still Sucks 2015][2] · 2015 - [JavaScript 模块化七日谈][1] · 2015 ##### 媒体关注 - [Hux 黄玄：从全局视角看 React 生态][14] · 直播 · 图灵 8 点半 · 2023 - [2022 中国开源先锋 33 人][18] · SegmentFault · 2023 - [React 黄玄：不懂艺术的 B-Boy 不是 Swag 的程序员][16] · Gitee 封面人物 · 2022 - [在硅谷当程序员是怎样的体验？][17] · 知乎[《我所向往的职业啊》](https://movie.douban.com/subject/36015036/) · 2022 [1]: //huangxuan.me/2015/07/09/js-module-7day/ [2]: //huangxuan.me/2015/12/28/css-sucks-2015/ [3]: //huangxuan.me/2016/06/05/pwa-in-my-pov/ [4]: //huangxuan.me/2016/10/20/pwa-qcon2016/ [5]: //huangxuan.me/2016/11/20/sw-101-gdgdf/ [6]: https://yanshuo.io/assets/player/?deck=58ac8598b123db0067292f92 "PWA Rehashing" [7]: https://yanshuo.io/assets/player/?deck=593ad6fbfe88c2006a0a0d6d "The State of PWA" [8]: https://yanshuo.io/assets/player/?deck=594d673d570c357d0698a950 "Building PWA" [9]: //huangxuan.me/jsconfcn2017/ [10]: https://reactnative.dev/blog/2021/10/26/toward-hermes-being-the-default [11]: https://youtu.be/lGEMwh32soc [12]: https://reactjs.org/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.html [13]: https://www.bilibili.com/video/BV1LY411Q7hC/?spm_id_from=333.999.0.0 [14]: https://appycyfaqcq1951.pc.xiaoe-tech.com/p/t_pc/course_pc_detail/video/v_64477dbfe4b0cf39e6c11d2a [15]: https://segmentfault.com/a/1190000043208486 [16]: https://gitee.com/gitee-stars/30 [17]: https://www.zhihu.com/zvideo/1542577108190068737?page=ogv [18]: https://segmentfault.com/a/1190000043208486 [19]: https://juejin.cn/post/6844903750155419655 [20]: https://www.bilibili.com/video/BV1SC4y1c7ju/ [21]: https://www.bilibili.com/video/BV1uz421d7Ch/ ================================================ FILE: _includes/ads.html ================================================ ================================================ FILE: _includes/featured-tags.html ================================================ {% comment %} @param {boolean} bottom - bottom will render
{% endcomment %} {% if site.featured-tags %}
{% if include.bottom %} {% endif %}
FEATURED TAGS
{% capture tags %} {% comment %} there must be no space between for and if otherwise this tricky sort won't work. url_encode/decode is for escaping otherwise extra will get generated but it will break sort... {% endcomment %} {% for tag in site.tags %}{% if tag[1].size > site.featured-condition-size %} {{ tag[0] }}__SEPARATOR__ {% endif %}{% endfor %} {% endcapture %} {{ tags | split:'__SEPARATOR__' | sort }}
{% endif %} ================================================ FILE: _includes/footer.html ================================================ {% if site.service-worker %} {% endif %} {% if page.plchart %} {% endif %} {% if page.title == 'Archive' %} {% endif %} {% if site.ga_track_id %} {% endif %} {% if site.ba_track_id %} {% endif %} {% unless page.no-catalog %} {% endunless %} {% if page.multilingual %} {% endif %} ================================================ FILE: _includes/friends.html ================================================ {% if site.friends %}
FRIENDS
{% endif %} ================================================ FILE: _includes/head.html ================================================ {% case page.layout %} {% when 'post' %} {% if page.date %} {% endif %} {% if page.author %} {% endif %} {% for tag in page.tags %} {% endfor %} {% else %} {% endcase %} {% if page.title %}{{ page.title }} - {{ site.SEOTitle }}{% else %}{{ site.SEOTitle }}{% endif %} ================================================ FILE: _includes/intro-header.html ================================================ {% comment %} @param {string} type - 'page' | 'post' | 'keynote' @param {boolean} short {% endcomment %} {% if include.type == 'post' or include.type == 'page' %} {% endif %} {% if include.type == 'post' %} {% if page.header-style == 'text' %}
{% else %}
{% endif %}
{% if page.header-img-credit %}
Image by {{page.header-img-credit}}
{% endif %}
{% for tag in page.tags %} {{ tag }} {% endfor %}

{{ page.title }}

{% comment %} always create a h2 for keeping the margin {% endcomment %}

{{ page.subtitle }}

Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}
{% endif %} {% if include.type == 'keynote' %}
{% for tag in page.tags %} {{ tag }} {% endfor %}

{{ page.title }}

{% comment %} always create a h2 for keeping the margin {% endcomment %}

{{ page.subtitle }}

Posted by {% if page.author %}{{ page.author }}{% else %}{{ site.title }}{% endif %} on {{ page.date | date: "%B %-d, %Y" }}
{% endif %} {% if include.type == 'page' %}
{% if include.short %}
{% else %}
{% endif %}

{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}

{{ page.description }}
{% endif %} ================================================ FILE: _includes/mathjax_support.html ================================================ ================================================ FILE: _includes/multilingual-sel.html ================================================ ================================================ FILE: _includes/nav.html ================================================ {% if page.nav-style == "invert" or page.header-style == "text" %}