Dvorak
Dvorak

Dvorak Chen

All Posts


HTML 样式设计的兼容性考虑

HTML样式设计的兼容性考虑 这篇博客讨论了HTML元素的大小应该由其外部元素决定的概念。作者指出,这样设计的元素能够具有兼容性和伸缩性,适应不同大小的要求。通过使用Vue框架编写组件的例子,作者展示了组件和元素的伸缩性的重要性。他提到了一个手机组件的例子,该组件的固定宽高导致在不同屏幕上显示不完美。为了使组件具有伸缩性,作者建议将组件的宽高设置为100%,使其大小取决于使用它的地方。最后,作者指出并非所有组件都需要伸缩性,例如按钮组件可以使用固定的宽高。这篇博客引发了读者对HTML样式设计的思考,并提出了一个问题:什么样的元素需要具有伸缩性?--GPT 4

css

在 Dockerfile 里使用 crates 镜像提升 crates 下载速度

在这篇博客中,作者介绍了如何在Dockerfile中使用crates镜像来提高crates下载速度。文章首先说明了在国内访问crates时下载速度较慢的问题,并提出了在本地设置crates镜像的解决方案。然后,作者给出了在Dockerfile中添加镜像配置的具体步骤,并提到了与本地配置方式的细微差别。最后,作者引用了一个参考链接,供读者进一步了解和学习。通过本文,读者可以了解到如何在Dockerfile中使用crates镜像来提升下载速度,并且可以思考如何在其他环境中应用相似的镜像配置来优化软件开发过程中的依赖下载速度。--GPT 4

Rust

更好的 Javascript 运行时 Deno

# 更好的 Javascript 运行时 Deno 本博客介绍了一种更好的 JavaScript 运行时环境——Deno。与目前占据主导地位的Node不同,Deno提供了更好的使用体验。 Deno同样基于V8引擎,但与Node不同的是,Deno默认支持TypeScript,并提供了HTTP服务器等功能,而Node需要通过添加依赖来实现这些功能。 在安装Deno后,可以通过在控制台输入`deno -v`来查看Deno的版本。 Deno可以直接运行TypeScript,只需创建一个ts文件并编写代码,然后使用`deno`命令运行。此外,Deno还可以作为服务器使用,它提供了用于构建HTTP服务器的库。只需创建一个新文件并编写代码,然后使用`deno run --allow-net`命令运行即可。需要注意的是,在Deno中,默认情况下网络权限是关闭的,需要使用`--allow-net`参数开启。 通过使用Deno,无需安装任何依赖即可运行TypeScript和构建HTTP服务器。 想要了解更多关于Deno的信息,请查看[官方文档](https://deno.com/)。--GPT 4

Javascript

P2P 的使用 coturn 搭建 ICE 服务器

在这篇博客中,我们讨论了在NAT网络环境下进行P2P通信的问题,并介绍了使用STUN和TURN协议来解决这个问题。我们还介绍了如何使用coturn来搭建一个ICE服务器。首先,我们安装了coturn,并配置了证书和监听端口。然后,我们配置了用户名、密码和域名。最后,我们进行了测试,验证了STUN和TURN服务器的正常工作。我们还提供了让coturn在后台自启动的命令。通过阅读这篇博客,你将了解到如何搭建一个ICE服务器来支持P2P通信,并解决NAT网络环境下的问题。--GPT 4

network

Create your own simple reactivity front-end framework

创造你自己的简单响应式前端框架 本文介绍了如何创建一个简单的响应式前端框架。作者对Angular、Vue和React这三个主流前端框架进行了评价,并提到了自己对它们的喜好和不喜欢之处。作者决定尝试创建自己的响应式前端框架,类似于Solid并使用Signal。 首先,作者决定使用函数组件而不是类组件。作者展示了一个函数组件的例子,并介绍了如何通过编译器将jsx转换为普通的JavaScript代码。作者提到了SWC作为一个可用于转换JavaScript/TypeScript和支持jsx/tsx的工具,并提供了SWC playground用于查看jsx/tsx转换为JavaScript的过程。 接下来,作者讨论了响应式的实现。作者提到了Angular通过绑定变量、React通过虚拟DOM以及Solid使用Signal来实现响应式。作者决定使用Signal,并展示了如何使用createSignal创建一个信号,并在HTML中使用该信号的值。作者还展示了如何实现一个自定义的useSignal函数。 然后,作者讨论了如何在Dvorak.createElement函数中实现订阅值的逻辑。作者展示了如何在createElement函数中绑定属性值,并订阅相应的发布者。作者还展示了如何处理元素的子节点,并通过一个reactiveChildren函数实现了子节点的响应式。 总结起来,本文介绍了如何创建一个简单的基于Signal的响应式库。阅读全文可以了解更多细节和实现方法。 摘要:本文介绍了如何创建一个简单的响应式前端框架。作者讨论了Angular、Vue和React这三个前端框架,并决定尝试创建自己的框架。作者展示了如何使用SWC转换jsx/tsx为JavaScript,并介绍了Signal作为响应式的实现方式。作者还展示了如何实现一个简单的useSignal函数和reactiveChildren函数。阅读全文可以了解更多细节和实现方法。--GPT 4

Javascript

supplement of Authentication

# Authentication Failure Handling in .NET In my recent blog post titled ".NET Authentication and Authorization," I discussed the configuration and implementation of authentication and authorization in a .NET application. However, I failed to address an important aspect: handling authentication failures. By default, the authentication configuration in .NET uses a cookie policy. When an authentication failure occurs, it responds with a 302 status code and redirects to the `/Account/Login` page. This poses a problem when the frontend and backend of the application are separated, as the redirect will not point to the correct address. For instance, let's assume the frontend app is hosted at `localhost:8800` and the backend app at `localhost:9900`. If an authentication failure occurs during a frontend API request, the response will contain a 302 status code with the location set to `localhost:9900/Account/Login`. The frontend, using HTTP APIs like `fetch` or `Axios`, will automatically fol...--GPT 4

.NET

dotnet Authentication and Authorization

# .NET身份验证和授权 本篇博客介绍了在.NET中的身份验证和授权。使用了基于Cookie的身份验证,即用户身份信息将存储在Cookie中并响应给客户端。在控制器中,通过创建一个包含用户身份信息的`ClaimsPrincipal`对象,并使用`SignIn(claimsPrincipal, CookieAuthenticationDefaults.AuthenticationScheme)`方法将其发送给客户端: ```csharp var claims = new List<Claim> { new(ClaimTypes.Sid, <Id>,ClaimValueTypes.Sid, ISSUER, ISSUER), new(ClaimTypes.Email, <Email>, ClaimValueTypes.Email, ISSUER, ISSUER) }; var claimsIdentity = new ClaimsIdentity( claims, CookieAuthenticationDefaults.AuthenticationScheme); var claimsPrincipal = new ClaimsPrincipal(claimsIdentity); return SignIn(claimsPrincipal, CookieAuthenticationDefaults.AuthenticationScheme); ``` `SignIn`方法将创建一个包含Cookie的`SignInResult`对象,并将其从控制器返回给客户端,你可以在响应中看到`set-cookie`头部: ![file](/image/img-b9fca940-08db-4696-9537-d76aecf8a553.png) ## 我更喜欢使用Cookie 有多种身份验证方式可供选择,例如:Cookie、JWT等。如果我使用基于浏览器的客户端,我更倾向于使用Cookie,例如Web、Tauri、Electron等。 因为现代浏览器具有更高的安全性,它们会自动处理Cookie,接收Cookie并存储Cookie,并在发送请求时附加Cookie。客户端不需要额外处理Cookie。 相比之下,JWT会更加复杂。 包含用户身份信息的Cookie可...--GPT 4

.NET

play sound when piece moved

摘要: 这篇博客讲述了在国际象棋网站上添加一个新功能:当棋子移动时播放声音。作者最初认为这是一个很简单的功能,但最终发现并不像想象中那么简单。由于浏览器的自动播放策略,作者无法按照自己的意愿播放声音。 浏览器的自动播放策略规定: - 静音自动播放是允许的。 - 有声音的自动播放是允许的,如果: - 用户与该域进行了交互(点击、触摸等)。 - 在桌面上,用户的媒体参与指数已经超过了阈值,这意味着用户之前已经播放过带有声音的视频。 - 用户在移动设备上将该网站添加到了主屏幕或在桌面上安装了渐进式Web应用程序(PWA)。 - 顶级框架可以将自动播放权限委托给其内嵌框架,以允许带有声音的自动播放。 因此,在用户与页面进行交互之前,无法播放声音,在用户停止与页面进行交互时也无法播放声音。 为了解决这个问题,作者找到了一个绕过限制的方法:循环播放声音并调节音量!在棋子移动时将音量调节为1,棋子移动后将音量调节为0.0001。 为什么是0.0001而不是0或静音? 因为如果设置为静音或音量为0,将触发自动播放策略的限制,而将音量设置为1或取消静音将在用户停止与页面进行交互时被阻止。但是,如果将音量设置为足够低的值,就不会触发自动播放策略,因为声音仍在播放。 在代码中,作者使用了以下方法来实现: ```rust sound.volume = 1; setTimeout(() => { sound.currentTime = 0; sound.volume = 0.0001; }, 500); ``` 当音量为0.0001时,用户听不到声音。 需要注意的是,在移动设备上不允许将音量设置为1!因此,在移动设备上可以将音量设置为静音。 ```rust sound.muted = false; setTimeout(() => { sound.currentTime = 0; sound.muted = true; }, 500); ``` --GPT 4

Javascript

学学dotnet core中的身份验证和授权-2-cookie

学习dotnet core中的身份验证和授权-2-cookie 本文介绍了如何使用cookie进行基于声明的身份验证和授权。首先,通过登录接口获取凭证,然后将声明下发到客户端的cookie中。接着,使用身份验证中间件解析cookie中的声明。最后,通过定义基于声明的授权策略来对接口进行授权处理。文章还提到了如何使用AddAuthentication和AddCookie方法定义身份验证策略,并介绍了如何在接口上使用[Authorize("Need24")]来指定授权策略。最后,通过测试验证了身份验证和授权的生效。文章指出,虽然使用cookie进行身份验证和授权简单,但在实际情况中可能会遇到一些问题,如跨域情况。--GPT 4

.NET

学学dotnet core中的身份验证和授权-1-概念

学习.NET Core中的身份验证和授权-1-概念 本文旨在讲解.NET Core中的身份验证和授权的概念。身份验证和授权是相辅相成的,必须先进行身份验证才能进行授权。身份验证是为了证明来者的身份,而授权是根据身份的权限决定是否允许访问某个资源。在.NET Core中,身份验证和授权的信息传递通过声明(Claim)来实现。声明是身份的相关信息,每个声明由类型和值组成。通过身份验证后得到的声明将传递给授权程序,授权程序根据声明判断是否通过授权。授权通过将允许访问对应的资源,不通过将被拒绝。在下一篇文章中,我们将使用cookie来实现一个简单的身份验证和授权。通过本文的学习,你将了解身份验证和授权的关系以及如何使用声明进行授权判断。--GPT 4

.NET