随笔分类 - Project-WebFnd
Front-End
摘要:一、创建Canvas的过程 Ref: https://github.com/mozilla/pdf.js/blob/master/web/pdf_page_view.js PDF.js 先创造canvas,再在上面渲染pdf的内容。 打开一次pdf,只需要渲染一次canvas,那么问题来了: 创建一
阅读全文
摘要:收集一些难得的样例代码。 电子书:https://riptutorial.com/ebook/html5-canvas 不错的菜单:Demos of open web technologies 待定:分享10款效果惊艳的HTML5图片特效 在线画板 code: https://github.com/
阅读全文
摘要:其实,判断页码的过程,蕴含了Canva positioning的线索。 Let's 探寻一下。 一、确定Canvas的定位 Ref: https://github.com/mozilla/pdf.js/blob/master/web/ui_utils.js [Screen Size: 411 x 7
阅读全文
摘要:一、初始化CropBox repo: https://github.com/fengyuanchen/cropperjs html: https://github.com/fengyuanchen/cropperjs/blob/master/docs/examples/upload-cropped-
阅读全文
摘要:Based on [PDF] How to use pdf.js 这里需要复习一下网页开发的基本概念。 HTML教程 一、CSS 样式表 Ref: https://www.runoob.com/html/html5-intro.html <head> 元素 <head> 元素包含了所有的头部标签元素
阅读全文
摘要:代码资源 Official page: https://mozilla.github.io/pdf.js/ UI示范:https://mozilla.github.io/pdf.js/web/viewer.html 直接部署该地址:http://localhost:8888/web/viewer.h
阅读全文
摘要:Display 一、PDF.js 基础知识 https://github.com/mozilla/pdf.js 二、Rendering PDF Files in the Browser with PDF.js One of the most popular solutions for renderi
阅读全文
摘要:前言 From : http://www.runoob.com/jquery/jquery-intro.html Ref: jQuery 实例 一、什么是 jQuery ? jQuery是一个JavaScript函数库。 jQuery是一个轻量级的"写的少,做的多"的JavaScript库。 jQu
阅读全文
摘要:前言 一、资源 From: http://www.imooc.com/code/3777 内置组件 一、缩略图 效果图: 二、警示框 三、进度条 四、媒体对象 左图,右文字 嵌套布局 <div class="media"> <a class="pull-left" href="#"> <img cl
阅读全文
摘要:前言 一、资源 From: http://www.imooc.com/code/2881 Ref: http://www.runoob.com/try/bootstrap/layoutit/【拖拽布局】 本篇讲得是:布局组件。 菜单、按钮及导航组件 一、菜单 综合示范 注释A: 特别声明:因为Boo
阅读全文
摘要:前言 一、框架体系 Bootstrap 是基于 HTML5、CSS3、JAVASCRIPT。 教程被分为: Bootstrap 基本结构、 Bootstrap CSS、 Bootstrap 布局组件 Bootstrap 插件 Bootstrap 基本结构、 Bootstrap CSS、 Bootst
阅读全文
摘要:开胃小菜 一、纯CSS布局 UI效果 From: 创建一个没有表格的网页 代码详情 * { box-sizing: border-box; } body { margin: 0; } .header { background-color: #2196F3; color: white; text-al
阅读全文
摘要:前言 一、认识 From: http://www.runoob.com/css/css-tutorial.html CSS 指层叠样式表 (Cascading Style Sheets) 解决内容与表现分离的问题。 二、结构 形式:属性-值 class 选择器 id 选择器 分组 选择器 为了尽量减
阅读全文
摘要:前言 Ref: Build Real Web App with React #02 - 20:04 / 34:47 开始介绍后端搭建。 代码分析 一、搭建HTTP服务器 安装 bebal 配置 package.json > 自动执行bebal,when code is changed. Ref: n
阅读全文
摘要:前言 一、故事背景 Build App with React Project系列,主要是从实践的角度来分析需求,设计组件,设计网页。 二、组件设计纲要 /* implement */ 代码分析 一、项目配置问题 Eslint .eslintrc文件采用airbnb的严格检查模式。 package.j
阅读全文
摘要:前言 一、故事背景 本篇是个热身项目:Using APIs in React - Create a Weather Application 未来还有另一个系列:Build App with React Project系列,主要是从实践的角度来分析需求,设计组件,设计网页。 二、组件设计纲要 本篇主要
阅读全文
摘要:Ref: React.js 中文开发入门教学 - Redux - Redux Toolkit 重构我的工程 Ref: Redux 最佳实践 Redux Toolkit 前言 使用过 Vuex 再来使用 Redux 我自己的感觉就是 Redux 的写法太复杂、太分散了,不像 Vuex 在一个文件里聚合
阅读全文
摘要:第一部分 setState Ref: 116 尚硅谷 react教程 扩展1 setState 先复习 useState,[React] Review。 import React, { Component } from 'react' export default class Demo extend
阅读全文
摘要:基本开发流程 (针对一个组件) Ref: 108 尚硅谷 react教程 优化3 整合UI组件与容器组件 模拟逐渐完善一个组件的过程~ 第一步 现在 “容器组件” 中 建立UI组件的框架如下。 第二步 he的初始值;this.add调用的对应方法jiafa; 注意:createIncrementAc
阅读全文
摘要:097 尚硅谷 react教程 redux简介 Redux原本与react没有如何关系,是完全独立的存在。 什么情况下需要使用redux 某个组件的状态,需要让其他组件可以随时拿到(共享)。 一个组件需要改变另一个组件的状态(通信)。 总体原则:能不用就不用, 如果不用比较吃力才考虑使用。 Reac
阅读全文