Skip to content

Instantly share code, notes, and snippets.

View msyfls123's full-sized avatar
🕶️
Learn Cycle.js and Rust

Gnome Bard msyfls123

🕶️
Learn Cycle.js and Rust
  • Yuewen
  • Shanghai
  • 06:53 (UTC +08:00)
View GitHub Profile
Gone with the wind
DROP TABLE IF EXISTS `workers`;
CREATE TABLE `workers` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(20) NOT NULL,
`sex` enum('F','M','S'),
`salary` int(11) DEFAULT '0',
`email` varchar(30),
`EmployedDates` date,
`department` varchar(30),
PRIMARY KEY (`id`)
Asynchrony: Under the Hood - Shelley Vohr - JSConf EU 2018
event loop
micro task / macro task (setTimeout Promise nextTick)
本质:callback,单一事件
Promise -> generator -> async/await
Reactive
响应的、离散的、惰性的、纯函数的
@msyfls123
msyfls123 / talk.md
Last active September 16, 2019 14:30

Reactive programming makes you see more and further

响应式编程使你看得更远

简介切入

现代 web 开发的痛点:从只是展示静态的页面,到富交互的 web app

障碍:网页元素重绘延迟/网络请求延迟/交互的响应延迟带来的复杂状态维护

重点:让一切变成更及时、同步、可交互

@msyfls123
msyfls123 / talk.md
Last active October 11, 2019 07:14

Questions:

马老师,您好!非常高兴能够采访到您。请您先简单介绍下目前您在豆瓣前端团队所负责的工作,以及团队情况。

你好,我是豆瓣阅读前端负责人马申彦,现在负责豆瓣阅读 web 前端的开发与维护,包括一个完整的 web 版电子书店、App 内嵌页面、原创作品的写作发布及后台审稿相关功能,日常运营相关活动与比赛等,阅读工程团队内前端组共 3 人,整个技术团队不超过 15 人,继承了豆瓣优良的技术氛围同时具有自主创新的产品方法。

豆瓣是Web2.0时代比较有代表性的网站,在信息聚合与用户分享的部分都做得非常好。现在移动应用越来越注重用户交互,前端可以从哪几个方面入手,实现创新?可否和我们分享豆瓣的一些具体实践?

用户交互与前端关系密切,影响用户体验的要素很多,简单来说分为页面加载与后续交互两部分,页面加载方面又分为 App 内嵌页面、传统服务器渲染页面和 SPA 页面等,这里面加载的体验效果是从前往后递减,App 内嵌页面直接打包在 App 内无需加载页面,只需要载入数据,但这需要和 App 通讯获取数据,所以开发时需要与客户端配合定义相关数据;服务器渲染页面一般适合纯展示的需求,特点是加载快但基本没有后续交互了;SPA 页面是前端自主控制数据的获取与存储等,可以有更多的交互操作,但缺点是 js 文件加载会导致出首屏慢,这时就需要通过 webpack 等进行分包或进行异步加载以提升载入速度。页面载入后的交互上一般会考虑以下几种情况:

  1. SPA 页面的话有路由问题,如何在路由间共享数据等,比如 redux,来方便切换路由时有足够数据渲染。
#enables colorin the terminal bash shell export
export CLICOLOR=1
#sets up thecolor scheme for list export
export LSCOLORS=gxfxcxdxbxegedabagacad
#sets up theprompt color (currently a green similar to linux terminal)
@msyfls123
msyfls123 / dependency-injection.ts
Created April 27, 2022 10:32
dependency injection
import 'reflect-metadata';
abstract class Singleton {
static getInstance: () => Singleton;
}
const INJECTION_KEY = 'inject:';
const inject =
(kls: typeof Singleton): PropertyDecorator =>
@msyfls123
msyfls123 / first-insight
Created January 24, 2024 15:56
copilot
GitHub Copilot
Welcome, @msyfls123, I'm your Copilot and I'm here to help you get things done faster. You can also start an inline chat session.
I'm powered by AI, so surprises and mistakes are possible. Make sure to verify any generated code or suggestions, and share feedback so that we can learn and improve. Check out the Copilot documentation to learn more.
msyfls123: tell me how to use next.js connect to sqlite3
GitHub Copilot: To connect Next.js with SQLite3, you can use the `sqlite3` package. Here's a step-by-step guide:
1. Install the `sqlite3` package using npm or yarn:
// https://regex101.com/r/30Xvde/1
const fs = require('fs')
const VAR_REG = /(?:@extend\s.\\@|&:extend\(\.\\@|@extend\s.\\\$)([^\;\r\n\t\s\)]+)/gm;
const sassInput = fs.readFileSync('style/style.scss', 'utf-8');
const lessInput = fs.readFileSync('style/style.less', 'utf-8');
const stylusInput = fs.readFileSync('style/style.styl', 'utf-8');