前端开发不得不知道的那些事

文章目录

      • 一、技能提升篇
        • vueuse
        • JavaScript中文网
        • JavaScript.info
        • RxJs
        • Web安全学习
        • 书栈网
        • 码农之家
      • 二、UI篇
        • iconfont:阿里巴巴矢量图标库
        • IconPark
        • 3dicons
        • 美叶
        • Undraw
        • Error 404
        • 摹克
      • 三、CSS篇
        • You-need-to-know-css
        • CSS Tricks
        • Animate.css
        • CSS Scan
        • CSS Filter
      • 四、颜色篇
        • 中国色
        • 渐变色网站
        • 波浪生成
        • 透明磨砂框
        • 色卡组合
      • 五、工具篇
        • Transform.tools
        • 代码美化
        • 查询网
        • FreeCodeCamp
        • Codecademy
        • CodePen
        • 蛙蛙工具
        • Carbon
        • TinyPNG
      • 六、性能篇
        • Can I Use
        • PageSpeed Insights
        • GTmetrix
      • 七、技术社区
        • CSDN
        • 博客园
        • 掘金
        • 思否
        • 开源中国
        • 51CTO
        • Stack Overflow

一、技能提升篇

vueuse

它包含了各种用于处理常见任务的功能函数和组合式 API,如操作DOM、状态管理、副作用处理等。VueUse的使用使得Vue.js开发更加高效和便捷,适合想要进一步优化Vue.js应用程序的开发者使用。
网址:https://vueuse.org/
在这里插入图片描述

JavaScript中文网

JavaScript中文网是一家以JavaScript资源分享为主的专业网站,面向web前端JavaScript爱好人员提供最新JavaScript资讯、原创内容、Ajax、jQuery、node.js及JavaScript等等相关教程文档。
网址:https://www.javascriptcn.com/
在这里插入图片描述

JavaScript.info

JavaScript.info是一个专注于现代JavaScript教程和文档的网站。它提供深入和易于理解的教程,涵盖从基础到高级的各个主题,包括语法、DOM操作、异步编程等。网站内容由专业的JavaScript开发者编写,适合初学者和有经验的开发者深入学习和提升技能。
网址:https://javascript.info/
在这里插入图片描述

RxJs

RxJs是专注于响应式编程库RxJS的介绍和使用指南。网站提供了RxJS操作符、Observable的详细说明和示例,帮助开发者理解和利用响应式编程范式来简化异步和事件驱动的编程。适合希望学习RxJS的前端开发者和其他使用JavaScript的技术人员。

网址:https://cn.rx.js.org/
在这里插入图片描述

Web安全学习

eb安全从基础到高级的文档和指南,旨在帮助开发人员和安全专家了解和实施Web应用程序的安全措施。涵盖了各种安全威胁、攻击技术和防御方法,包括跨站脚本(XSS)、SQL注入、CSRF等。适合想要提升Web应用程序安全性的开发者和安全从业人员参考学习。
网址:https://websec.readthedocs.io/zh/latest/index.html

在这里插入图片描述

书栈网

IT程序员互联网开源编程书籍阅读分享,囊括小程序、前端、后端、移动端、云计算、大数据、区块链、机器学习、人工智能和面试笔试等相关书籍。
网址:https://www.bookstack.cn/

在这里插入图片描述

码农之家

整理了计算机电子书和一些编程电子文档,可以免费下载,是你能够系统的入门一门课程或者提高一门编程语言技能的重要途径。
网址:https://www.xz577.com/

在这里插入图片描述

二、UI篇

iconfont:阿里巴巴矢量图标库

千万矢量图标素材,内容丰富且精美,支持各种风格,只有你想不到的,没有你找不到的,而且支持下载不同格式的icon。
网址:https://www.iconfont.cn/
在这里插入图片描述

IconPark

拥有2600+基础图标,29种图标分类,丰富多彩的资源库免费使用
网址:https://iconpark.oceanengine.com/home
在这里插入图片描述

3dicons

为你的网站增添立体感图标是网站设计中的重要元素,而 3dicons 提供了丰富的 3D图标资源。无论是扁平化还是立体感的图标,你都能在这里找到。将这些图标融入你的网站,定能让你的网站焕发出新的活力!
网址:https://3dicons.co/
在这里插入图片描述

美叶

本网站是一个宝藏设计灵感网站。包含UI设计、应用墙、插画师、标志库、运营活动、图标icon、平面排版以及字体设计。发现美,学习美,创作美。

网址:https://www.meiye.art/

在这里插入图片描述

Undraw

免费 SVG 插图库如果你正在为找不到合适的插图而烦恼,Undraw 这个网站或许能帮到你。它提供了大量免费的 SVG插图,你可以随意选择并应用到你的网站或应用中,让你的作品更加生动有趣。
网址:https://undraw.co/illustrations
在这里插入图片描述

Error 404

打造个性化的错误页面当用户遇到 404 错误时,一个精心设计的错误页面能够为他们提供更好的用户体验。Error 404 网站提供了多种 404页面模板供你选择,让你能够轻松打造出符合自己风格的错误页面。
网址:https://error404.fun/
在这里插入图片描述

摹克

随时随地自主获取设计图的最新切图文件,一键下载全部切图压缩后体减小50%以上,自动换算不同平台尺寸,还可以自定义切图尺寸。样式代码,自动生成。

网址:https://www.mockplus.cn/idoc/developer
在这里插入图片描述

三、CSS篇

You-need-to-know-css

是一个专注于 CSS 的学习平台,涵盖了 CSS 的所有基本概念和高级技巧。可以更高效的学习并提升你的css技能。

网址:https://lhammer.cn/You-need-to-know-css/#/zh-cn/
在这里插入图片描述

CSS Tricks

总结一些常用的 CSS 样式,并记录一些 CSS 的新属性和一点奇技淫巧,提供了大量的技术文档、教程和代码示例。
网址:https://qishaoxuan.github.io/css_tricks/
在这里插入图片描述

Animate.css

是一个 CSS 动画库,提供了大量现成的动画效果,可以让你轻松为网页增添动态效果。
网址:https://animate.style/
在这里插入图片描述

CSS Scan

box-shadow 效果的灵感库box-shadow 是 CSS 中一个非常强大的属性,可以用来创建阴影效果,增加元素的立体感。CSS Scan 网站展示了大量 box-shadow 的实例,你可以在这里找到灵感,应用到自己的项目中。
网址:https://getcssscan.com/

在这里插入图片描述

CSS Filter

CSS 滤镜的无限可能CSS Filter 这个网站可以让你实时预览各种 CSS滤镜 效果,包括模糊、亮度调整、颜色变换等。通过尝试不同的组合和调整参数,你可以创造出独特的视觉效果。
网址:https://www.cssfilters.co/
在这里插入图片描述

四、颜色篇

中国色

网址:https://www.zhongguose.com/#haibaohui

在这里插入图片描述

渐变色网站

Wbgradients 是一个在线调整渐变色的网站 ,可以根据你想要的调整效果,同时支持复制 CSS 代码,可以更好的与开发对接。
网址:https://webgradients.com/

在这里插入图片描述

波浪生成

创意分割线生成器在网页设计中,分割线可以用来划分不同区域,增强视觉效果。Shape Divider 是一个在线生成器,让你能够轻松创建出各种形状的分割线,并导出为 SVG 格式,方便你在项目中使用。

网址:https://www.shapedivider.app/

在这里插入图片描述

透明磨砂框

一个有趣的在线CSS玻璃风格工具,可以帮助开发者们在 UI 设计中快速应用 Glass Morphism 风格,并且提供了多种自定义选项和实时预览功能并支持将生成的css代码导出。
网址:https://glassgenerator.netlify.app/#

在这里插入图片描述

色卡组合

在这里插入图片描述

网址:https://www.colorion.co/

五、工具篇

Transform.tools

是一个多功能的网站,可以将任何各种各样的元素进行转换,例如将HTML转换为JSX,JavaScript转换为JSON,CSS转换为JS对象等等。
网址:https://transform.tools/
在这里插入图片描述

代码美化

CodeBeautify是一个在线工具,可以美化和格式化源代码,使其更具视觉吸引力和易读性。它还提供其他附加功能,例如图像转换为base64样式美化、JSON格式化等等多种功能。
网址:https://codebeautify.org/

在这里插入图片描述

查询网

提供各种各样的在线便捷工具。有常见计算、生活日常、格式化工具、编码/加密工具、转换工具等等诸多工具。
网址:https://www.ip138.com/

在这里插入图片描述

FreeCodeCamp

FreeCodeCamp 是一个免费的在线编程学习平台,提供了大量的编程课程和实践项目。它不仅仅是一个在线课程,更是一个充满活力的开发者社区,让你可以在实践中提升技能,并通过实际项目为非营利组织做贡献。
网址:https://www.freecodecamp.org/

在这里插入图片描述

Codecademy

一个在线编程学习平台,提供了包括 HTML 在内的、多种编程语言的基础入门到高级课程,包括网页开发、数据分析和全栈工程等。为任何想学习代码的人提供服务。
网址:https://www.codecademy.com/

CodePen

Codepen可以用来构建和部署网站,展示你的工作,同时也可以构建测试用例以学习和调试。并且能够从 180w + 的前端设计师和开发人员的优质作品里寻找灵感。
网址:https://codepen.io/

在这里插入图片描述

蛙蛙工具

一个免费便捷在线工具网站,提供语言工具、文本工具、转换工具、编码解码、站长工具等便利的在线工具服务,是你生活和工作学习的好帮手。
网址:https://www.iamwawa.cn/

在这里插入图片描述

Carbon

是一个在线工具,将代码转为图片工具,很容易的为你的代码创建漂亮的图片。
网址:https://carbon.now.sh/
在这里插入图片描述

TinyPNG

TinyPNG 加速网站的访问并节约带宽。将 WebP、PNG 和 JPEG 图片压缩50-80%。同时保留PNG的透明度。帮助用户减小图像文件的尺寸,同时保持高质量的图像显示。
网址:https://tinypng.com/

在这里插入图片描述

六、性能篇

Can I Use

Can I Use是 提供了各种Web技术在不同浏览器和平台上的兼容性信息。Can I Use的界面简洁明了,支持多种Web技术,例如HTML、CSS、JavaScript、SVG、WebGL等。用户可以在搜索框中输入要查询的Web技术名称,然后选择相应的版本和浏览器,即可查看该技术在不同浏览器和平台上的兼容性信息。Can I Use还提供了一些高级功能,例如趋势图、全球使用情况、版本历史等,可以帮助用户更好地了解Web技术的发展和使用情况。
网址:https://caniuse.com/

PageSpeed Insights

针对移动设备和桌面设备生成网页的实际性能报告,并能够提供关于如何改进相应网页的建议。主要通过速度得分,网页加载分布图,优化程度得分以及优化建议给出用户全面的实际性能报告。
网址:https://pagespeed.web.dev/

GTmetrix

它可以通过诊断速度问题来帮助您分析和提高 Web 性能。并确定网站优化的机会。包括全面的性能分析,提供网页元素的加载顺序,并指出其优化机会。
网址:https://gtmetrix.com/

七、技术社区

CSDN

CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
网址:https://www.csdn.net/

博客园

是一个面向开发者的知识分享社区,创立于2004年1月。自创建以来,博客园一直致力并专注于为开发者打造一个纯净的技术交流社区,推动并帮助开发者通过互联网分享知识,从而让更多开发者从中受益。博客园的使命是帮助开发者用代码改变世界。
网址:https://www.cnblogs.com/

掘金

是面向全球中文开发者的技术内容分享与交流平台。通过技术文章、沸点、课程、直播等产品和服务,打造一个激发开发者创作灵感,激励开发者沉淀分享,陪伴开发者成长的综合类技术社区。
网址:https://juejin.cn/

思否

SegmentFault是一个开发者社区,专注于技术问答和知识分享。用户可以在这里提问和回答与软件开发相关的问题,涵盖前端、后端、数据库、云计算等多个领域。网站还提供技术文章、观点和行业动态,帮助开发者解决问题和学习新技能。
网址:https://segmentfault.com/

开源中国

OSCHINA是中国开源技术社区平台,提供开源软件、技术资讯和开发者社区交流。用户可以获取最新的开源项目、技术文章和行业动态,参与开源社区讨论和贡献代码。
网址:https://www.oschina.net/

51CTO

该网站提供广泛的技术文章、教程和行业动态,涵盖IT、云计算、网络安全、人工智能等多个领域。用户可以在这里阅读到来自业界专家和技术大牛的原创文章,获取最新的技术趋势和实用的技术指导,有助于技术人员扩展知识和解决实际问题。
网址:https://blog.51cto.com/

Stack Overflow

为开发者提供了一个交流和分享知识的平台。用户可以在这里提出技术问题、分享编程经验、回答其他人的问题,并通过投票机制评估答案的质量。网站上涵盖了几乎所有编程语言和技术领域的问题,从前端开发到后端架构,再到数据科学和机器学习。
网址:https://stackoverflow.com/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/387562.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视觉SLAM第一讲

第一讲-预备知识 SLAM是什么? SLAM(Simultaneous Localization and Mapping)是同时定位与地图构建。 它是指搭载特定传感器的主体,在没有环境先验信息的情况下,于运动过程中建立环境的模型,同时估计自己…

KVM虚拟机迁移

KVM虚拟机迁移 KVM虚拟机迁移,是将某一虚拟机上的环境和软件完全复制到另一台物理机上继续运行。KVM虚拟机迁移可以优化系统负载、重新规划KVM虚拟机布局并简化KVM虚拟机的管理维护工作。 KVM虚拟机迁移的主要应用场景如下所示。 当一台KVM宿主机的负载比较高时&am…

C++重载左移运算符

通过重载左移运算符&#xff0c;可以实现cout << p;直接输出类对象的各个属性。 其只能使用全局函数重载。 注意cout的定义如下&#xff1a; _EXPORT_STD extern "C" __PURE_APPDOMAIN_GLOBAL _CRTDATA2_IMPORT ostream cout; 也就是说我们一直用来输出的c…

公布一批脸书爬虫(facebook)IP地址,真实采集数据

一、数据来源&#xff1a; 1、这批脸书爬虫&#xff08;facebook&#xff09;IP来源于尚贤达猎头公司网站采集数据&#xff1b; ​ 2、数据采集时间段&#xff1a;2023年10月-2024年7月&#xff1b; 3、判断标准&#xff1a;主要根据用户代理是否包含“facebook”和IP核实。…

《程序猿入职必会(4) · Vue 完成 CURD 案例 》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…

【C语言】指针基础知识理解【续】

1. ⼆级指针 指针变量也是变量&#xff0c;是变量就有地址&#xff0c;那指针变量的地址存放在哪⾥&#xff1f;这就是 ⼆级指针 。 1.1 引入二级指针 由于一级指针已经很熟悉&#xff0c;这里就不再赘述&#xff0c;这里我们重点探讨二级指针 下面先简单使用一个二级指针看…

视图,存储过程和触发器

目录 视图 创建视图&#xff1a; 视图的使用 查看库中所有的视图 删除视图 视图的作用&#xff1a; 存储过程&#xff1a; 为什么使用存储过程&#xff1f; 什么是存储过程&#xff1f; 存储过程的创建 创建一个最简单的存储过程 使用存储过程 删除存储过程 带参的存储…

【投标】运维服务方案(2024Word完整版)

1.项目情况 2.服务简述 2.1服务内容 2.2服务方式 2.3服务要求 2.4服务流程 2.5工作流程 2.6业务关系 2.7培训 3.资源提供 3.1项目组成员 3.2服务保障 软件资料清单列表部分文档&#xff1a; 工作安排任务书&#xff0c;可行性分析报告&#xff0c;立项申请审批表&a…

kvm虚拟化平台部署

kvm虚拟化平台部署 kvm概念简介 kvm自linux2.6版本以后就整合到内核中&#xff0c;因此可以看做是一个原生架构. kvm虚拟化架构 硬件底层提供物理层面的硬件支持 linux&#xff08;host&#xff09;&#xff0c;就相当于这个架构中的宿主机&#xff0c;上面运行了多个虚拟机。…

科普文:分布式数据一致性协议Paxos

1 什么是Paxos Paxos协议其实说的就是Paxos算法, Paxos算法是基于消息传递且具有高度容错特性的一致性算 法&#xff0c;是目前公认的解决分布式一致性问题最有效的算法之一。 Paxos由 莱斯利兰伯特(Leslie Lamport)于1998年在《The Part-Time Parliament》论文中首次公 开&…

装饰大师——装饰模式(Java实现)

引言 大家好&#xff0c;上期我们介绍了装饰模式在Python中的实现&#xff0c;今天&#xff0c;我们将继续探讨装饰模式&#xff0c;并展示如何在Java中实现它。 装饰模式概述 装饰模式的核心思想是将功能附加到对象上&#xff0c;而不是通过继承来实现&#xff0c;这种模式…

安防监控视频平台LntonAIServer视频监控管理平台裸土检测算法

LntonAIServer裸土检测算法代表了一种先进的土地监测技术&#xff0c;它利用人工智能的强劲能力&#xff0c;实现了对裸土区域的自动识别和实时监测。该算法的推出&#xff0c;为环境保护、农业管理以及城市规划等多个领域提供了创新的解决方案&#xff0c;其应用前景广阔&…

如何准备 Java API 文档以供下游对接

个人名片 🎓作者简介:java领域优质创作者 🌐个人主页:码农阿豪 📞工作室:新空间代码工作室(提供各种软件服务) 💌个人邮箱:[2435024119@qq.com] 📱个人微信:15279484656 🌐个人导航网站:www.forff.top 💡座右铭:总有人要赢。为什么不能是我呢? 专栏导…

QT:控件圆角设置、固定窗口大小

实现控件圆角度设置//使用的是setStyleSheet方法 //改变的控件是QTextEdit&#xff0c;如果你想改变其他控件&#xff0c;将QTextEdit进行更换 this->setStyleSheet("QTextEdit{background-color:#FFFFFF;border-top-left-radius:15px;border-top-right-radius:15px;bo…

是否掌握数据结构对于IT职业发展至关重要?

算法跟代码实现有时候是两回事&#xff0c;在开始前刚好我有一些资料&#xff0c;是我根据网友给的问题精心整理了一份「数据结构的资料从专业入门到高级教程」&#xff0c; 点个关注在评论区回复“888”之后私信回复“888”&#xff0c;全部无偿共享给大家&#xff01;&#…

Chat2DB新推Chat2Excel,让数据对话跃然纸上

Excel 智能问答 Chat2Excel 1. 创建新聊天 点击左侧AI对话&#xff0c;进入对话界面。点击加号""按钮以开始一个新的对话。 新建对话选择表格类型, 选择上传excel文档。 双击对话名称可以修改对话名称。现在我们就可以开始针对于Excel进行智能问答了。 2. 智能…

智能小家电的跨境渠道有哪些?入驻百思买还是选择做亚马逊?——WAYLI威利跨境助力商家

在全球化贸易背景下&#xff0c;智能小家电企业面临机遇与挑战。消费者追求高品质生活&#xff0c;智能小家电市场需求旺盛&#xff0c;跨境销售成为拓展市场、提升品牌影响力的关键。选择合适的跨境渠道至关重要。以下是智能小家电跨境销售的主要渠道&#xff0c;并深入分析了…

layui 乱入前端

功能包含 本实例代码为部分傻瓜框架&#xff0c;插入引用layui。因为样式必须保证跟系统一致&#xff0c;所以大部分功能都是自定义的。代码仅供需要用layui框架&#xff0c;但原项目又不是layui搭建的提供解题思路。代码较为通用 自定义分页功能自定义筛选列功能行内编辑下拉、…

【探索Linux】P.43(网络层 —— IP协议)

阅读导航 引言一、IP协议基本概念二、IP协议头格式三、网段划分1. 网络号和主机号2. 引入子网掩码&#xff08;1&#xff09;基本概念&#xff08;2&#xff09;默认子网掩码&#xff08;3&#xff09;子网掩码的作用&#xff08;4&#xff09;子网掩码与IP地址的结合&#xff…

国内NAT服务器docker方式搭建rustdesk服务

前言 如果遇到10054,就不要设置id服务器!!! 由于遇到大带宽,但是又贵,所以就NAT的啦,但是只有ipv4共享和一个ipv6,带宽50MB(活动免费会升130MB~) https://bigchick.xyz/aff.php?aff322 月付-5 循环 &#xff1a;CM-CQ-Monthly-5 年付-60循环&#xff1a;CM-CQ-Annually-60官方…