03 2022 档案

摘要:前言 以前写过 Asp.net core 学习笔记 ( ViewComponent 组件 ), 这篇作为翻新版. 参考 Docs – View components in ASP.NET Core Don't replace your View Components with Razor Compo 阅读全文
posted @ 2022-03-31 11:52 兴杰 阅读(969) 评论(0) 推荐(1) 编辑
摘要:前言 以前写的 Asp.net core 学习笔记之 Tag Helper, 这篇是整理版. 参考 Docs – Author Tag Helpers in ASP.NET Core Creating a Custom Tag Helper in ASP.NET Core: Gathering Da 阅读全文
posted @ 2022-03-27 22:25 兴杰 阅读(169) 评论(0) 推荐(0) 编辑
摘要:前言 之前就写过 2 篇, 只是写的很乱, 这篇作为整理版. Asp.net core (学习笔记 路由和语言 route & language) Asp.net core 学习笔记之 globalization & localization 复习篇 我的项目只是做语言而已, 没有做区域, 也没有 阅读全文
posted @ 2022-03-22 20:18 兴杰 阅读(410) 评论(0) 推荐(0) 编辑
摘要:前言 之前有提过, MVC 和 Razor Pages 最大的区别就在 Routing 上. Razor Pages 的结构是 route, page, model route match to page, page declare model (route > page > model) rout 阅读全文
posted @ 2022-03-22 08:28 兴杰 阅读(509) 评论(1) 推荐(1) 编辑
摘要:前言 之前就写过 Asp.net core 学习笔记 ( Configuration 配置 ) 只是有点乱, 这篇作为整理版. 项目中会有许许多多的 Config 要设定. 比较好的管理方式是把它们放到 json file 里. 这样想修改时就不需要改动源码, 改 json file 就行了. AS 阅读全文
posted @ 2022-03-21 14:00 兴杰 阅读(1512) 评论(0) 推荐(0) 编辑
摘要:前言 以前就写过了 Asp.net core 学习笔记 (Logging 日志), 只是有点乱, 这篇作为整理版. 参考: docs – Logging in .NET Core and ASP.NET Core Github – Serilog.AspNetCore Setting up Seri 阅读全文
posted @ 2022-03-21 13:10 兴杰 阅读(1895) 评论(0) 推荐(0) 编辑
摘要:前言 之前就写过 angular cli, vs code liveserver, vs 2019 iis express 10, vs code kestrel 使用 https + ip. 但写的很乱. 这篇作为整理版. 默认情况下, 本地开发的 URL 是 localhost, ASP.NET 阅读全文
posted @ 2022-03-20 23:30 兴杰 阅读(360) 评论(0) 推荐(0) 编辑
摘要:前言 以前就写过了, 只是写的太乱, 这篇是一个整理版. 以前的文章: Git Bash 创建证书 PowerShell 创建证书 我已经没有用 PowerSheel 做证书了, 所以就不介绍了. 参考: generate-trusted-ssl-certificate Git Bash OpenS 阅读全文
posted @ 2022-03-20 21:43 兴杰 阅读(560) 评论(0) 推荐(0) 编辑
摘要:前言 ASP.NET Core 6.0 Razor Pages 新功能, 我是用 webpack 做打包的, 所以这个对我没有什么帮助. 但是了解一下是可以的. 希望 .NET 会继续发展的更好, 多一点 build-in 的功能. 参考: CSS Isolation in ASP.NET Core 阅读全文
posted @ 2022-03-20 16:20 兴杰 阅读(269) 评论(0) 推荐(0) 编辑
摘要:前言 这篇想整理一下在网页开发中, 字体是如果被处理的. 先看完: 平面设计 – 字体 CSS – Font / Text 属性 CSS – Font Family CSS – word-break, overflow-wrap, word-wrap, white-space CSS – ellip 阅读全文
posted @ 2022-03-19 18:12 兴杰 阅读(103) 评论(0) 推荐(0) 编辑
摘要:前言 平面设计的基础是排版, 字体, 颜色, 这篇是排版的学习笔记. 不管是网页设计, 还是平面设计, 只要你想表达内容, 就离不开文字, 图画 (多媒体). 而当把一堆内容放在一起时, 就需要排一排, 弄整齐. 这样才容易阅读. 而这个过程就叫排版咯. 参考: 知乎 – “四大设计原则”在排版中的 阅读全文
posted @ 2022-03-19 16:30 兴杰 阅读(1501) 评论(0) 推荐(0) 编辑
摘要:前言 之前 W3Schools 学习笔记 (1) 也记入过 Color, 这篇整理一下在网页开发中, 颜色是如果被处理的. 网页都有什么颜色? 网页篇幅最大的颜色, 通常是来自图片, 不管是背景图, 还是内容图片. 这些都是比较 colorful 的. 其次是黑白灰, 因为除了图片, 大部分内容都是 阅读全文
posted @ 2022-03-19 12:15 兴杰 阅读(235) 评论(0) 推荐(0) 编辑
摘要:参考 Youtube – #3 JavaScript Loading Strategies (async and defer) | JavaScript Full Tutorial no async no defer 当游览器 parse HTML 遇到 <script src> 时, 它会去 do 阅读全文
posted @ 2022-03-18 21:04 兴杰 阅读(84) 评论(0) 推荐(0) 编辑
摘要:参考 Understanding the “Initial”, “Inherit” and “Unset” CSS Keywords 【译】理解CSS关键字:“Initial”,“Inherit”和“Unset” 属性, 固定值, 相关值, 元素 display, width 是属性 block, 阅读全文
posted @ 2022-03-17 15:10 兴杰 阅读(401) 评论(0) 推荐(0) 编辑
摘要:前言 以前写过 form 表单, 但很不齐全, 这篇想做一个大整理. 主要讲讲在网站中使用原生 Form 的功能, 不足和扩展. 前端是原生的 HTML/JS, 后端是 ASP.NET Core Razor Pages. Simplest Form Overview form 的职责是让 user 阅读全文
posted @ 2022-03-16 10:55 兴杰 阅读(701) 评论(0) 推荐(0) 编辑
摘要:前言 在 CSS – Position 我有提到过, 原生的 sticky 有一些 limitation. 不是每次都闪的掉. 这篇主要是通过 JS 来模拟它, 突破那些限制. Google Ads 的 table header sticky 也是通过 JS 实现的 The Limitation 场 阅读全文
posted @ 2022-03-12 10:37 兴杰 阅读(210) 评论(0) 推荐(0) 编辑
摘要:前言 没有深入研究过, 懂个概念就好, 等性能遇到问题在来看看. 以前写的笔记: 游览器 reflow 参考: reflow和repaint引发的性能问题 精读《web reflow》 Reflow & Repaint repaint 是小的, 性能没有那么伤, 它只是换换颜色之类的. reflow 阅读全文
posted @ 2022-03-11 21:33 兴杰 阅读(79) 评论(0) 推荐(0) 编辑
摘要:介绍 它和 IntersectionObserver, ResizeObserver 差不多, 都是观察 element 变化的. 它可以观察元素的 attribute 增加, 移除, 修改, append child 等等. 建议先看前 2 篇 IntersectionObserver 和 Res 阅读全文
posted @ 2022-03-11 21:15 兴杰 阅读(178) 评论(0) 推荐(0) 编辑
摘要:介绍 想监听一个 element 的 size changes 就可以使用 ResizeObserver 了. 在看这一篇之前, 建议先看看 DOM & BOM – IntersectionObserver, 它们的模式很像, 一起了解会比较容易. 效果 参考: MDN – ResizeObserv 阅读全文
posted @ 2022-03-11 19:38 兴杰 阅读(240) 评论(0) 推荐(0) 编辑
摘要:介绍 IntersectionObserver 的作用是监听某个元素是否出现在框内 (比如 viewport). 它可以实现 lazy load image, 一开始图片是没有加载的, 当图片出现在 viewport 时才去加载. 也可以用来做 tracking, 比如某个商品 (card 元素), 阅读全文
posted @ 2022-03-11 15:13 兴杰 阅读(387) 评论(0) 推荐(0) 编辑
摘要:介绍 counter 有点像 JS 的 for loop index. 最常用到的地方就是做 ol > li. 参考: W3Schools – CSS Counters 默认 ol > li <ol> <li> Lorem ipsum dolor sit amet. Lorem ipsum dolo 阅读全文
posted @ 2022-03-10 23:21 兴杰 阅读(99) 评论(0) 推荐(0) 编辑
摘要:效果 参考: Youtube – Responsive FAQ accordion dropdown | HTML and CSS Tutorial 几个难点 1. 如何 align left for +- icon. 2. 如何实现点击 3. 如何实现 slide down 一步一步做 Seman 阅读全文
posted @ 2022-03-10 14:49 兴杰 阅读(99) 评论(0) 推荐(0) 编辑
摘要:效果 参考: Youtube – Responsive Navigation Menu Bar + Hamburger Menu Toggle - Only with CSS Youtube – Making an animated hamburger button and a challenge 阅读全文
posted @ 2022-03-08 22:20 兴杰 阅读(70) 评论(0) 推荐(0) 编辑
摘要:前言 在网站嵌套 Facebook 专页是很好的推广方式哦. 虽然网站还是需要做 Blog, 但是通常被订阅的都是 Facebook 专页而不是网站 Blog. 开通账号 它的 setup 很简单, 去 developers.facebook.com 注册一个开发者账号, 然后做一个 App 给网站 阅读全文
posted @ 2022-03-06 15:08 兴杰 阅读(137) 评论(0) 推荐(0) 编辑
摘要:前言 ul > li 经常会用到, 它原本的 style 很丑, 这篇介绍如果修改它. 以前学 W3Schools 的时候也有记入过: HTML – W3Schools 学习笔记 参考: Youtube – HTML & CSS for Beginners Part 17: How to Creat 阅读全文
posted @ 2022-03-05 18:17 兴杰 阅读(205) 评论(0) 推荐(0) 编辑
摘要:前言 续上一篇介绍了各种语言的阅读方向. 这一篇来讲一下 Logical Properties. 它与 left to right, right to left, horizontal, vertical 息息相关. 参考: Youtube – Write better CSS using logi 阅读全文
posted @ 2022-03-05 14:10 兴杰 阅读(193) 评论(0) 推荐(0) 编辑
摘要:前言 世界上有很多语言的阅读方向是不同的. 英文 中文 (以前才有竖排文字, 现在中文和英语一样了) 阿拉伯文 (Arabic) 面对不同的语言, HTML 和 CSS 就需要不同的写法. 虽然我没有做过类似的项目, 但是知识还是要有的, 正所谓 "没吃过猪肉,也见过猪跑" 嘛. 参考: HTML 阅读全文
posted @ 2022-03-05 10:33 兴杰 阅读(460) 评论(0) 推荐(0) 编辑
摘要:前言 CSS 很早就有 build-in 方案 for 省略号 ellipsis 了. 但是只能 one line, 遇到多行的时候只能用 JS. 后来出了 line-clamp 终于把 multiple line ellipsis 解决了. 参考: stackoverflow – Limit te 阅读全文
posted @ 2022-03-03 15:42 兴杰 阅读(317) 评论(0) 推荐(0) 编辑
摘要:前言 要让一个元素"消失", 有 3 种做法. 它们有一点点的不同. 在实战时要清楚什么时候用什么哦. 例子说明 <div class="abc"> <div class="xyz"></div> </div> CSS Style .abc { border: 1px solid red; widt 阅读全文
posted @ 2022-03-02 18:22 兴杰 阅读(407) 评论(0) 推荐(0) 编辑
摘要:参考: stackoverflow – Is there a CSS-only (pure CSS) workaround to apply fade-in and fade-out on objects with display:none? 思路和难点 最简单的思路就是 opacity 0 到 1 阅读全文
posted @ 2022-03-02 17:32 兴杰 阅读(72) 评论(0) 推荐(0) 编辑

点击右上角即可分享
微信分享提示