“Yeah It’s on. ”
学习
node学习
https://yunnysunny.gitbooks.io/nodebook/content/
前端大牛blog
印记中文(翻译的文档)
vue SSR
stylus学习网站
http://www.zhangxinxu.com/jq/stylus/
less文档
http://www.bootcss.com/p/lesscss/#docs
浏览器的工作原理
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/
腾讯AlloyTeam的github
ui
Can I use
cubic-bezier
http://cubic-bezier.com/#.17,.67,.83,.67
CSS Tricks (常用的 CSS 样式)
https://qishaoxuan.github.io/css_tricks/
很多css效果
https://chokcoco.github.io/CSS-Inspiration/#/
http://css-tricks.neatbang.com/createTriangle/
CSS3动画帧数计算器
http://tid.tenpay.com/labs/css3_keyframes_calculator.html
缓动函数查表
ascii art(字符画)
https://asciiart.website//index.php?art=animals/bats
文字转ascii画
http://patorjk.com/software/taag/#p=display&h=2&v=0&f=Big&t=xhw%20
图标库
mock 模拟图片
https://picsum.photos/
clip-path: polygon(x1 y1, x2 y2, x3 y3, …)
https://bennettfeely.com/clippy/
loading动画设计
css-doodle
A web component for drawing patterns with CSS
一个用CSS绘制模式的web组件 (好看的背景墙)
gka
gka 是一款简单的、高效的帧动画生成工具,图片处理工具。
只需一行命令,快速图片优化、生成动画文件,支持效果预览。
白板
less to css online
https://lesscss.org/less-preview/
svg背景
https://philiprogers.com/svgpatterns/#argyle
svg to react component
https://react-svgr.com/playground/
browserslist
https://github.com/browserslist/browserslist
查看不同Browserslist的配置的各种浏览器占用率 coverage
Add the Browserslist config to display compatible browsers
autoprefixer
Autoprefixer is a PostCSS plugin which parses your CSS and adds vendor prefixes
texturepacker
https://www.codeandweb.com/texturepacker
Create sprite sheets and optimize your game graphics.
纹理打包器
开发工具
工具大全
https://wangchujiang.com/tools/#/
在线ts编译
https://www.typescriptlang.org/play/
md在线编辑
代码转图片
Create and share beautiful images of your source code. Start typing or drop a file into the text area to get started.
自定义border-radius
https://9elements.github.io/fancy-border-radius/
生成雪碧图
https://www.toptal.com/developers/css/sprite-generator
工具大全
正则检验
ES6转ES5
ast转换
pdf转换器
GitHub上 README 增加图片标签
在线运行
http://jsbin.com/?css,js,console
生成展示GitHub信息的iframe
easy-mock
https://easy-mock.com/ Easy Mock 是一个可视化,并且能快速生成 模拟数据 的持久化服务。
管理github上的star
Webpack分析打包结果
http://webpack.github.io/analyse/
You can generate the required JSON file for this tool by running
webpack –profile –json > stats.json
会生成stats.json文件,把这个文件扔到analyse分析网站就可以了。
详情https://github.com/webpack/analyse
Web前端实验室
materialpalette 画板
https://www.materialpalette.com/
解决命名难题
https://unbug.github.io/codelf/
前景色和后景色的对比度计算
record a terminal session
http://www.network-science.de/ascii/
IP地址查找
在线测试npm包
vue sfc
vue 单文件组件的编译结果
fake API for testing
模拟请求
https://jsonplaceholder.typicode.com/
测试用的api接口
dog API service
bundlephobia
bundlephobia
find the cost of adding a npm package to your bundle
找出在你的项目中添加一个NPM包的体积
性能
谷歌pagespeed页面性能分析
https://developers.google.com/speed/pagespeed/insights
页面性能分析
browserslist
浏览器兼容列表
https://browserslist.dev/
mobile-friendly
判断网页是否适合在移动设备上浏览
https://search.google.com/test/mobile-friendly
Web 指标
其他
论文文献下载
代码转图片
免费制作思维导图
获取webstorm破解激活码
记得输入lookdiv.com 记得输入lookdiv.com 记得输入lookdiv.com
emoji表情for GitHub
https://www.webpagefx.com/tools/emoji-cheat-sheet/
netlify
The fastest way to combine your favorite tools and APIs to build the fastest sites, stores, and apps for the web.
部署github上的网站 同时支持https
vercel
可以部署github上的页面 支持ssr方式部署 (next.js等)
Vercel is the platform for frontend developers, providing the speed and reliability innovators need to create at the moment of inspiration.
Vercel是面向前端开发人员的平台,提供创新者在灵感迸发时所需的速度和可靠性。
We enable teams to iterate quickly and develop, preview, and ship delightful user experiences. Vercel has zero-configuration support for 35+ frontend frameworks and integrates with your headless content, commerce, or database of choice.
我们使团队能够快速迭代、开发、预览和发布令人愉快的用户体验。Vercel对35个以上前端框架提供零配置支持,并与您选择的无头内容、商业或数据库集成。
cli
通过cli链接到vercel上面的项目,可以本地跑vercel的命令
// 拉取环境变量
vercel env pull