浏览器收藏夹的东西太多又没简介,收藏过就忘了看,所以博客上单独开个收藏夹,记录些会经常回来看的东西
独立博客
- 从浏览器渲染原理谈动画性能优化 | 云音乐大前端专栏 云音乐大前端专栏 github 归档
- 高效的 GraphQL + Ant.Design - Randy's Blog
- 冴羽写博客的地方
- 面向信仰编程
- (已挂)精选技术资讯渠道合集 - 拍岸的博客 | Paian's Blog
- cssinspirationguide - csc inspiration guide online
- 懶惰的權利 - 曼努 manzoo
- 暂未下沉的离岛 - 舒乐熊
- dtysky | 一个行者的轨迹 Github | dtysky (Tianyu Dai)
- SardineFish
- 构建我的被动收入 _(注:文章写得不错)
- James Smyth | Creating stylized grass in WebGL
- 傅里叶变换交互式入门 GitHub: Jezzamonn/fourier 作者: Jez Swanson
- 与上个示例相似的3D动画: Bartosz Ciechanowski GitHub: Bartosz Ciechanowski
- 早早聊分享——前端女生职业路 Blog:麻凯倩
- 何遇的博客 - Github:QxQstar (何遇) - 掘金:何遇er 的个人主页
独立博客列表
设计博客
页面设计实例
- 素马设计
- 365 A Year of Cartier
- CSS Design Awards - Website Awards - Best Web Design Inspiration - CSS Awards
- 优秀网页设计欣赏: Web Design File - Website Awards | Web Design Inspiration
- Awwwards - Website Awards - Best Web Design Trends
- 4db * 地域別Webデザインリンク集
- 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG
- KPR | Story
- 与我协作,让 <div> 变成杰作 - GitHub: SuneBear/freelance-landing - 与舒乐熊一起快乐协作手册.pdf - 开源一个我 2024 接活用的介绍页 - V2EX
页面设计参考
Design Inspiration (from Free for Developers with Github)
- awwwards. - Top websites A showcase of all the best-designed websites (voted on by designers).
- Behance - Design showcase A place where designers showcase their work. Filterable with categories for UI/UX projects.
- dribbble - Design showcase Unique design inspiration, generally not from real applications.
- Landings - Web Screenshots Find the best landing pages for your design inspiration based on your preference.
- LovelyLanding.net - Landing Page Designs Frequently updated landing page screenshots. Includes Desktop, Tablet, and Mobile screenshots.
- Mobbin - Mobile screenshots Save hours of UI & UX research with our library of 50,000+ fully searchable mobile app screenshots.
- Mobile Patterns - Mobile screenshots A design inspirational library featuring the finest UI UX Patterns (iOS and Android) for designers, developers, and product makers to reference.
- Screenlane - Mobile screenshots Get inspired and keep up with the latest web & mobile app UI design trends. Filterable by pattern and app.
- scrnshts - Mobile screenshots A hand-picked collection of the finest app store design screenshots.
- UI Garage - Mobile and web screenshots Daily UI inspiration & patterns for designers and developers to find inspiration, tools, and the best resources for your project.
- Refero - Web screenshots Tagged and searchable collection of design references from great web applications.
作品集
- Stefan Hiienurm | User Experience Designer
- Design Director - Bradley Haynes
- Takehiko Ono 注:nipponcolors.com 作者
- 倾城之链 | NICE LINKS
- Frontend Mentor | Front-end coding challenges using a real-life workflow
CSS 文章博客
- Issues · chokcoco/iCSS(issue 形式博客 )
- Issues · chokcoco/cnblogsArticle
- Michael-lzg/my--article
- chokcoco/CSS-Inspiration: 在这里找到写 CSS 的灵感! [live demo]
- SVG 线条动画入门 - ChokCoco
- Coding an Interactive (and Damn Satisfying) Cursor - DEV Community - Codepen:Satisfying curly cursor - Twitter: Ksenia Kondrashova
编程规范
- 网易 NEC 代码规范 : 更好的 CSS 样式解决方案
- 腾讯 TGideas 游戏团队代码规范
- 京东凹凸实验室 Aotu.io - 前端代码规范
- Google 软件工程之工具篇
- Google 软件工程之过程篇
- Google 软件工程之文化篇
手绘风格 CSS 库
- papercss/papercss: The Less Formal CSS Framework
- fxaeberhard/handdrawn.css: Handdrawn.css lets you prototype your web site with a hand drawn look and feel.
- wiredjs/wired-elements: Collection of custom elements that appear hand drawn. Great for wireframes or a fun look.
CSS 模板工具
- CodeMyUI
- CSSFX - Beautifully simple click-to-copy CSS effects
- NIPPON COLORS - 日本の伝統色 需翻墙
- Visualization Collection - 一个专注于前端视觉效果的集合应用 Github:hepengwei/visualization-collection
- whatamesh
- Particles for Framer
- Fresh Background Gradients
音频可视化库
Canvas 效果库
- 彩色纸屑:catdad/canvas-confetti - Live
WebGL
- oframe/ogl: Minimal WebGL Library(轻量的 webgl 渲染库) - OGL WebGL Library
- davidlyons/threejs-intro: Intro to WebGL with Three.js - Online Presentation
- akira-cn/graphics: 一些图形系统相关的小例子
- chenjsh36/ThreeJSForFun: 收集关于 ThreeJS 的系列教程、Demo、工具,整理学习笔记和 Demo
- Three.js 教程
- WebGL 教程
- webgl-fundamentals - preview
- webgl2-fundamentals - preview
- GLSL 详解(基础篇) · Colin's Nest
- GLSL 详解(高级篇) · Colin's Nest
- GAMES101-现代计算机图形学入门-闫令琪_哔哩哔哩_bilibili
- (创建 3D 场景工具)Verge3D 中国 | FunJoy.Tech
- WEBGL 案例 - GhostCat
- 课程 PPT 和视频 – 计算机图形学与混合现实研讨会
- 从头开始学习 GLSL 着色器 Learn GLSL Shaders from Scratch_bilibili
- three.js 实战式入门教程 vite+three+vue3 - 效果网站:cpc-web-library
- 数据图表设计师。他的 repo 很有意思,各种粒子效果:wangyasai (Yasai) - e.g.Perlin-Noise
- 使用 WebGL 和 Shaders 进行高级创意编码【中英字幕 Advanced Creative Coding with WebGL & Shaders】
- WebGL 和着色器简介 - 无涯教程
- Modern OpenGL Tutorial - Compute Shaders - YouTube
- three.js WebGL Shaders Tutorial - For Beginners - YouTube
- WebGPU 中文社区-Orillusion/orillusion-web - Live - https://www.orillusion.com/ - 简介 - Orillusion | 第一个 WebGPU 中文社区 - 知乎
- pmndrs/threejs-journey: Bruno Simons journey demos in React
- Live Lessons: Journey.pmnd.rs
- Examples: React Three Fiber Documentation - Examples
- R3F - drei.pmnd.rs - Github
- (该框架的3D文字模型很好用) protectwise/troika
- 【ThreeJs 推荐教程】
30天成為鍵盤麥可貝:前端視覺特效開發實戰 - 作者: iT 邦幫忙::伍瑪斯
Day27: WebGL Shader—透過Shader製作光暈:Shader傳值的原理 - iT 邦幫忙 - 这个博主讲了各种图像算法的实现:Maxim McNair
- 这个repo提供了各种效果源码和原理讲解:boytchev/etudes: Computer Graphics Études with WebGL and Three.js - Twitter:Pavel Boytchev
- 系统性Shader教程:B站 - 掘金 - 李伟的博客 - 示例代码Github
- 着色器语法API :OpenGL-Refpages
WebGL 实例
- threejs历年案例合集 - 2019案例
- threejs Resources
- threejs 实例合集:暮志未晚
- List of Explorations
- NovaEra Showcase
- dailycssdesign Shader创意合集(F12 源码)
- 让 WebGL 的暴雨拍打你的屏幕(雾) [Demo] [Code - SardineFish/raindrop-fx]
- (风格化渲染shader教程) Custom Toon Shader in Three.js - Tutorial
- [ThreeJs Sample] Pioneer – Corn. Revolutionized.
- 三盛网络
- Chartogne-Taillet
- Lusion
- Gergely Gizella - Full stack development and Illustration
- Mixamo - Character Model
- Oat The Goat – The Story – MoE
- Luis Henrique Bizarro — Creative Developer
- Elysium - A Tranquil 3D Nature World
- Make A Pie - 上海职住可视化
- Car Visualizer WebGL - The FWA
- Renault Espace Visualization
- 上面的例子是从这里来的:WebGL 实现 3d 渲染 - 知乎
- Shader Park shader-park/shader-park-core: A JavaScript library for creating real-time 2D and 3D shaders. JS -> Shader.
- OpenProcessing - Creative Coding for the Curious Mind
- 墨雨設計 | Monoame Design
- Codrops - Creative front-end resources and inspiration for web professionals (附源码的 demo)
- Liquid Distortion Effects - Codrops demo
- WebGL Distortion Hover Effects - Codrops github demo
- Interactive WebGL Hover Effects - Codrops github demo
- Mechanical Watch – Bartosz Ciechanowski
- KUBOTA FUTURE CUBE | Kubota Global Site
- CineShader
- 码语派 - 3D数字创意工作室
- 云朵 Thunder clouds - CodeSandbox - Twittter
- Threejs油画效果 dli/paint: Fluid Paint - live demo
- Threejs反射 MeshReflectorMaterial.js - 0beqz/vanilla-threejs-meshreflectormaterial-example
- Threejs SDF文字 带roughness的反射等各种实例 alienkitty/alien.js
- Threejs后处理效果 pmndrs/postprocessing
- ykob/sketch-threejs
- 瓦片加载: dragonir/zelda-map: zelda-map 塞尔达:旷野之息地图
- dragonir/threejs-odessey: Three.js 进阶之旅,掘金专栏配套项目
- Ocean Wave Simulation
- git1029/waves_threejs - Preview: Waves
- ThreeJS Caustics Github: martinRenou/threejs-caustics
- enable3d - Standalone 3D Framework
- Question: (模板测试截面轮廓实现)Cap outline in Threejs
Answer: Three-mesh-bvh: A plugin for fast geometry raycasting and spatial queries! - WebGL 3D Gaussian Splat Viewer- Live
- Realtime procedural planet shader in WebGL - Live
- Three.js Material which lets you do Texture Projection on a 3d Model
- Strange Attractors in WebGL - Live
- WebGPU Samples author:Martin Laxenaire | Creative front-end developer
- R3F Playground - Gravity - Maxime Heckel - Blog:Maxime Heckel's Blog - Twitter:@MaximeHeckel
- MeshTranslucentMaterial - CodeSandbox - Live - Twitter: Anderson Mancini
- CodePen: Glass Configurator (Three.js MeshPhysicalMaterial) - Twitter - Ksenia Kondrashova:This glass MeshPhysicalMaterial
- Portfolio 2023 - Michal Zalobny - Portfolio: Michal Zalobny - Github
- 只有一部分滤镜是怎么写的:实例 waterfalls - Github - Twitter
- 人体皮肤材质实例 Github: lo-th Twitter
- 丁达尔效应光线
- Scroll Shader: gotohiroki/three-monopo-london - three-monopo-london - Twitter: @G=H
- Hover Shader: List Hover Image Ripple - List Hover Image Ripple
- hand script Shadow: Handdrawn | Labs | OHZI Interactive
- Interctive Toys Created by ShoyaKajita. | WebGL, Three.js | GLSL
- 风格化草地: twitter: FluffyGrass - Github:thebenezer/FluffyGrass - Live
- 原神启动shader: 超还原!three.js复刻原神启动 Github:gamemcu/www-genshin
- 小米汽车 su7
- 丁达尔光效果 - Github:nemutas/light-shaft
- 可交互水面 nhtoby311/WaterSurface: 🌊 Interactive Water Surface shader component for React Three Fiber - Live
- 体积光教程 Eric Heitz's Research Page - WebGL实现
WebGL 博客
- PlayCanvas Blog | The latest news and updates from the PlayCanvas Team.
- 网格采样摩尔纹的解决 The Best Darn Grid Shader (Yet). by Ben Golus | Medium - codesandbox - twitter@Renaud
WebGPU 实例
3D 素材 & 商店
TA 相关
- [游戏美术文档]从技术到艺术(艺术篇) - 知乎
- [游戏美术文档]从技术到艺术(技术篇) - 知乎
- 美术设定案-石墨文档
- 浅墨的游戏编程 - 知乎
- 【傅老师】【OpenGL 教学】
- #Shader #WebGL 老闆週六來聊聊 - 聊聊外星圖像渲染語言 Shader 跟 WebGL - YouTube
- The Book of Shaders
- 计算机图形学系列笔记 - 知乎
- TheTus Games 101 笔记 · 语雀
- 可以将 Unity 和 Three 打通的工具:Needle github/Needle
- (用于调试pixijs的案例网站) PixiJS Filters Demo
- Misora Ryo Experimental World BLOG | Creative Coding-玻璃实例博文:【Three.js】Glass material and Broken glass | Misora Ryo Experimental World BLOG - Twitter:Misora Ryo (@MSRDGC)
TA 从业者博客
- [游戏美术文档]故事与立体构成的基础 - 知乎
- WalkingFat – 行尸走油肉的笔记
- 还原《塞尔达-旷野之息》的草地 – WalkingFat
- 游戏开发养成方法 - 石墨文档 这个引用出自这里毕业杂谈
Github 相关
- Github repo card: nwtgck/gh-card: GitHub Repository Card for Every Web Site
- Github contribution chart: Github Chart API
- Github buttons: mdo/github-buttons
- Github readme tags: badges/shields
- Github Resume: https://resume.github.io
- Github history: pomber/git-history
- Github cards(unofficial): lepture/github-cards - repo
- Programming Quotes: PiyushSuthar/github-readme-quotes
- github-profile-summary-cards
- An infographics generator: lowlighter/metrics Live Demo
- Moe Counter! journey-ad/Moe-counter: 多种风格可选的萌萌计数器 Live Page
- honzaap/GithubCity: Create a 3D city from your GitHub contributions - live
- GitHub Profile Generator
WebAssembly
简历工具
- Latex 简历模板
- markdown-resume: 支持 markdown 和富文本的在线简历排版工具
- Resume-vuepress: 用 Vuepress 将 markdown 渲染为静态页面简历
- xitanggg/open-resume Live
- 简历本; 超级简历; 五百丁
酷炫的工具
- Markdown->PPT: ksky521/nodeppt
- The HTML Presentation Framework: hakimel/reveal.js
- Slidev 制作 - 一个为开发者打造的演示文档工具: slidevjs/slidev: Presentation Slides for Developers (Public Beta 🎉)
- 半色像素效果生成器: Vector Halftone Maker - Interactive PNG/SVG halftone pattern generator
- 极简在线样机效果图: Mockup your designs simply and beautifully.
- 页面外框截图工具: Screely - Generate Website Mockups
- 知乎卡片:laike9m/zhihu-card
- UI 画圆角工具:Coupon.io repo: XboxYan/coupon: 🎫 Generate Coupon-UI CSS code
- Some CSS tricks,一些 CSS 常用样式:QiShaoXuan/css_tricks Live
- Clippy — CSS clip-path maker
- 阿里工具: CSS Trick - CSS Trick
- nolimits4web/atropos: Stunning touch-friendly 3D parallax hover effects
- 可商用的免费漫画风素材: Loose Drawing | 無料で商用利用可なフリーイラスト
- Animated Icons - Lordicon
- Fontmin - 纯 JavaScript 字体子集化方案
已经看过的文章
- 视差滚动 - 滚动视差?CSS 不在话下 [Demo]
- 全屏滚动 - 仅用 CSS 实现 fullpage.js 全屏滚动效果 [Demo]
- 从零配置 webpack 4+react 脚手架(一) - 掘金
- 从零配置 webpack 4+react 脚手架(二) - 掘金
- 从零配置 webpack 4+react 脚手架(三) - 掘金
- 从零配置 webpack 4+react 脚手架(四) - 掘金
- CSS Grid 网格布局教程 - 知乎
- 超简单并超详细的 CSS Grid 布局(上)bilibili
- 超简单并超详细的 CSS Grid 布局(下)bilibili
- 一文读懂渲染管线(7k 字) - 知乎
- (TAA) Temporal Anti-Aliasing
TypeScript
- 旧版,需要该章中一个示例 #hybrid-types TypeScript: Handbook - Interfaces
- 电子书 | 深入理解 TypeScript 作者博客:sitemap | 三毛
前端早早聊大会
前端技术交流与演讲
- 2021 GMTC 讲师 PPT 合集 - 早早聊收藏 · 语雀
- 技术周报 · 字节跳动的现代 Web 开发实践
- 迈入现代 Web 开发(GMTC 2021 演讲《字节跳动的现代 Web 开发实践》全文)
- 现代 Web 开发的现状与未来(JSDC 2019 演讲全文) - 知乎