admin 发布于 06月14, 2020

nestjs搭建系统

背景:这边想做一个题库系统,功能比较简单,就是能录入题目就行。

我不知道其他人是怎么想的,我当时的考虑是想着用node做一个企业级的应用。

原因有几个方面:

  • 前端在写功能的时候,需要swagger,那么我这边后端(Node)必须要提供swagger的功能
  • 未来能打通各种后端(java)的东西,比如说网关、Apollo(配置中心)、微服务等
  • 让其他同事觉得node做web并不是个玩具,而是可以像spring那样,也是有验证器、异常处理器、日志管理、统一封装response这些的

阅读全文 »

admin 发布于 06月07, 2020

函数式编程之函子记录

我接触函数式编程,大概是几年前,一微信上的哥们向我安利ramda,说这货很牛逼。

当时可能有点不以为意,现在想来,是我sb了,哈哈~这里面门道还是挺多的。

阅读全文 »

admin 发布于 05月31, 2020

新的生活,新的开始

已经N久没写博客了,期间生活也发生了很多的变化。

税友集团离职,入职现在的大掌柜,前一周刚刚转正。个人感慨还是比较多的。

阅读全文 »

admin 发布于 01月13, 2020

node-mail第二篇

在17年的时候,有写过一篇node-mail笔记

在现在看来,还是太年轻。年轻在毕竟没啥踩坑经验。

这次就来一个公司级别的node-mail发送吧。

毕竟公司邮件QQ163还是有很大的区别的。

阅读全文 »

admin 发布于 01月03, 2020

`publish`模块包的那些事儿

有些人会说:publish模块包,有什么难的?直接npm publish不就好了么?

其实不然,我们还会有这样的问题:

  • 单元测试是否通过?
  • 我怎么发测试包?
  • 发布之后能否打个tag?

阅读全文 »

admin 发布于 09月09, 2019

移动端1px的scss版本

基于antd-mobile的less代码改造而成:

$border-color-base: #ddd;

@mixin scale-hairline-common($color, $top, $right, $bottom, $left){
  content: '';
  position: absolute;
  background-color: $color;
  display: block;
  z-index: 1;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}

@mixin hairline($direction, $color: $border-color-base, $radius: 0) {
  @if ($direction == 'top') {
    border-top: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-top: none;

        &::before {
          @include scale-hairline-common($color, 0, auto, auto, 0);
          width: 100%;
          height: 1PX;
          transform-origin: 50% 50%;
          transform: scaleY(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'right') {
    border-right: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-right: none;

        &::after {
          @include scale-hairline-common($color, 0, 0, auto, auto);
          width: 1PX;
          height: 100%;
          background: $color;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'bottom') {
    border-bottom: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-bottom: none;

        &::after {
          @include scale-hairline-common($color, auto, auto, 0, 0);
          width: 100%;
          height: 1PX;
          transform-origin: 50% 100%;
          transform: scaleY(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleY(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'left') {
    border-left: 1PX solid $color;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border-left: none;

        &::before {
          @include scale-hairline-common($color, 0, auto, auto, 0);
          width: 1PX;
          height: 100%;
          transform-origin: 100% 50%;
          transform: scaleX(0.5);

          @media (min-resolution: 3dppx) {
            transform: scaleX(0.33);
          }
        }
      }
    }
  }
  @if ($direction == 'all') {
    border: 1PX solid $color;
    border-radius: $radius;

    html:not([data-scale]) & {
      @media (min-resolution: 2dppx) {
        position: relative;
        border: none;

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          width: 200%;
          height: 200%;
          border: 1PX solid $color;
          border-radius: $radius * 2;
          transform-origin: 0 0;
          transform: scale(0.5);
          box-sizing: border-box;
          pointer-events: none;

          // @media (min-resolution: 3dppx) {
          //   width: 300%;
          //   height: 300%;
          //   border-radius: $radius * 3;
          //   transform: scale(0.33);
          // }
        }
      }
    }
  }
}

阅读全文 »

admin 发布于 09月01, 2019

react在线编辑代码

很多时候,我们写了一个UI库,但是别人在用的过程中会出现问题。那么这个问题,可能是我们的,也可以是他们的,所以往往需要一个类似codesandbox的网站。

那个网站似乎没法用内网的npm包,所以这点比较蛋疼。

好在像react-live能够简单地支持上面的功能,即在线编辑代码。

那么来演示一下吧。

import React from 'react';
import ReactDOM from 'react-dom';

import * as dpl from 'dpl-react';

import "dpl-react/dist/dpl.css";

import {
  LiveProvider,
  LiveEditor,
  LiveError,
  LivePreview
} from 'react-live';

const scope = { dpl };

const importRegex = /import(?:["'\s]*([\w*{}\n, ]+)from\s*)["'\s]*([@\w/_-]+)["'\s]*;?/gm;

const imports = {
    "dpl-react": "dpl",
    "moment": "moment"
}

const transformCode = (code) => {
  return code.replace(importRegex, (match, p1, p2) => {
    const matchingImport = imports[p2];
    if (!matchingImport) {
      return match;
    }
    return 'const ' + p1 + ' = ' + matchingImport + ';';
  });
}

const code = `
  import { Button } from 'dpl-react';

  render(<Button>123</Button>)
`;

const App = () => {
  return (
    <LiveProvider transformCode={transformCode} code={code} scope={scope} noInline={true}>
      <LiveEditor />
      <LiveError />
      <LivePreview />
    </LiveProvider>
  )
};

ReactDOM.render(<App />, document.getElementById("root"));

效果如下:

alt

接下去无非是样式的美化而已。

阅读全文 »