- 博客(25)
- 收藏
- 关注
RSS订阅原创 前端论坛、博客及公众号汇总
技术社区：SegmentFault 掘金 Reddit EchoJS CodeBurst Frontendfront FreeCodeCamp Codepen Css-Tricks SitePoint 团队博客 凹凸实验室 大搜车博客 众成翻译 人人网FED博客 美团点评技术团队 奇舞团博客 IMWeb前端博客 gitbook AlloyTeam 淘宝FED Facebook博客 Mozilla博客 Google博客 Airbnb博客 webpack
2021-10-07 20:15:43
236
转载 我给鸿星尔克写了一个720°看鞋展厅
最近因为鸿星尔克给河南捐了5000万物资，真的是看哭了很多的网友，普通一家公司捐款5000万可能不会有这样的共情，但是看了鸿星尔克的背景之后，发现真的是令人心酸。鸿星尔克2020年的营收是28亿，但是利润却是亏损2个亿，甚至连微博的官方账号都舍不得开会员，在这种情况下，还豪气地捐赠5000万，真的是破防了。网友还称鸿星尔克，特别像是老一辈人省吃俭用一分一毛攒起来的存款，小心翼翼存在铁盒里。一听说祖国需要，立马拿出铁盒子，哗~全导给你。让上最贵的鞋，拿出了双 249 的。然后我去鸿星尔..
2021-07-28 21:53:02
237
原创 HTML讲解
1.html5的新特性文件类型声明（<!DOCTYPE>）仅有一型：<!DOCTYPE HTML>。新的解析顺序：不再基于SGML。绘画 canvas;用于媒介回放的 video 和 audio 元素;语意化更好的内容元素:article、footer、header、nav、section;表单控件:calendar、date、time、email、url、search;input元素的新类型：date, email, url等。新的技术: webworker, w
2021-07-27 21:19:24
742
1
原创 javascript数据类型
typeof能判断哪些数据类型？// 判断所有值类型let a; typeof a //'undefined'const str='abc'; typeof str//'string'const n=100; typeof n //'number'const b=true; typeof b //'boolen'const s=Symbol('s'); typeof s //'symbo
2021-07-26 21:55:18
98
原创 15条高效的JS技巧，你千万要收藏好了
1、延迟函数delayconst delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) const getData = status => new Promise((resolve, reject) => { status ? resolve('done') : reject('fail') }) const getRes = async (data) => {
2021-07-24 22:04:17
65
原创 新手玩CSS中的一些黑科技
1、鼠标移进网页里，不见了= =*{ cursor: none!important;}2、简单的文字模糊效果*{ color: transparent; text-shadow: #111 0 0 5px;}3、多重边框.div { box-shadow: 0 0 0 6px rgba(0, 0, 0, 0.2), 0 0 0 12px rgba(0, 0, 0, 0.2), 0 0 0 18px rgba(0, 0, 0, 0..
2021-07-13 20:21:58
139
原创 Vue前端开发规范
基于Vue官方风格指南整理一、强制1. 组件名为多个单词组件名应该始终是多个单词的，根组件 App 除外。正例：export default { name: 'TodoItem', // ...}复制代码反例：export default { name: 'Todo', // ...}复制代码2. 组件数据组件的 data 必须是一个函数。当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个
2021-07-09 21:15:22
262
原创 Vue中避免滥用this去读取data中数据
前言在Vue中，data选项是个好东西，把数据往里一丢，在一个Vue组件中任何一个地方都可以通过this来读取data中数据。但是要避免滥用this去读取data中数据，至于在哪里要避免滥用，如果滥用会导致什么后果，本专栏将会一一揭晓。一、用this读取data中数据的过程在Vue源码中会把data中数据添加getter函数和setter函数，将其转成响应式的。getter函数代码如下所示：function reactiveGetter() { var value = getter
2021-07-07 19:38:31
265
转载 CSS优秀起来真没JS什么事
文章目录基础代码 定位栅栏 -webkit-box-reflect 动画 最后一点思考最近我在CodePen上发现了一个纯CSS实现，具有渐变倒影和3D旋转效果的栅栏动画，他的实现方式是：利用10个<div>元素创建10个栅条，接着再复制整份<div>元素，并创建一个渐变遮罩形成渐变效果，以此作为栅栏的倒影。这听起来有点像用左脚的脚趾去抓你的右耳背部（译者理解：表达的意思应该是用了复杂的方式去处理一个其实可以用简单方式达成的事情）！更不用说这种渐变遮罩的方式根本
2021-07-06 20:57:34
80
原创 Js是怎样运行起来的？
前言不知道大家有没有想过这样一个问题，我们所写的 JavaScript 代码是怎样被计算机认识并且执行的呢？这中间的过程具体是怎样的呢？有的同学可能已经知道，Js 是通过 Js 引擎运行起来的，那么什么是 Js 引擎？ Js 引擎是怎样编译执行和优化 Js 代码的？Js 引擎有很多种，比如 Chrome 使用的 V8 引擎，Webkit 使用的是 JavaScriptCore，React Native 使用的是 Hermes。今天我们主要来分析一下比较主流的 V8 引擎是怎样运行 Js
2021-07-05 19:26:33
1624
原创 js代码常见技巧总结
1. 避免链式声明后果：可能引入全局变量 //错误的写法 var a = b = 0;这段代码中,b实际上被声明为全局变量。因为操作符优先级是是从右往左，所以该语句相当于: var a = (b = 0)此时b未声明就被直接赋值，所以b成了全局变量2. 单一var原则这条规则的意思是，把函数内部的所有变量，放到顶部声明。比如： //示例 function A(){ var a = 1, b = 2,
2021-07-03 20:05:40
152
转载 使用 vscode 省时的6个插件
使用Visual Studio Code开发项目省时的六个插件。1.vscode-icon不同的文件展示不同的图标，方便快速识别文件类型。2.Color Highlight颜色标记3.Auto Rename Taghtml/xml标签改变，将会成对改变～4.Live Server开启本地服务，类似webpack中的热加载，很适合编写模版页面。5.Code Spell Checker检查单词拼写，支持驼峰式。6.Rai...
2021-07-02 20:35:34
191
原创 CSS的伪类和伪元素
定义伪类:CSS 伪类 是添加到选择器的关键字，指定要选择的元素的特殊状态。例如，:hover 可被用于在用户将鼠标悬停在按钮上时改变按钮的颜色。/* 所有用户指针悬停的按钮 */button:hover { color: blue;}伪类存在的意义是为了通过选择器，格式化DOM树以外的信息以及不能被常规CSS选择器获取到的信息。伪元素:伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。下例中的 ::first-line 伪元素可改变段落首行文字的样
2021-06-29 21:29:30
413
原创 引入 CSS 的方式
引入 CSS 有 4 种方式。其中有 2 种方式是在 HTML 文件中直接添加 CSS 代码，另外 2 种是引入外部 CSS 文件。下面我们就来看看这些方式和它们的优缺点。内联方式内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。示例：<div style="background: red"></div>这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个
2021-06-28 20:32:43
185
原创 CSS样式全部属性和难记忆点（归纳）
有一些CSS的冷门样式太多了，但是又想记住，可以看这篇文章，这篇文章包括了一些css需要记忆的一些属性，不包括平时经常使用的（相信你已经接触的太多了）伪类选择器文字阴影简写：text-shadow:水平位置 垂直位置 模糊距离 阴影颜色;text-indent：首行缩进 ;word-spacing: 单词间距;letter-spacing:字间距;link答疑type="text/css"在link中可以忽略不写，写了比较规范,rel定义当前文档和被链接文档之间的关系.
2021-06-27 20:33:40
502
原创 九个css小技巧
1.去除网页超链接的下划线<style>a {text-docoration:none}a:hover {color: #3366CC;text-decoration:underline}</style>2.设置浮动背景<style type="text/css"> body { background-image:url(image/bg.gif); background-attachment:fixed}</style>..
2021-06-25 17:15:32
74
原创 CSS实现一个粒子动效的按钮
按钮（button）可能是网页中最常见的组件之一了，大部分都平淡无奇，如果你碰到的是一个这样的按钮，会不会忍不住多点几次呢？通常这类效果第一反应可能就是借助canvas了，比如下面这个案例点击预览（建议去codepen原链接点击预览访问，segmentfault内置的预览js会加载失败）效果就更加震撼了，当然canvas实现也有一定的门槛，而且实际使用起来也略微麻烦（所有js实现的通病），这里尝试一下CSS的实现方式。生成粒子抛开js方案，还有HTML和CSS实现方式
2021-06-23 19:48:54
569
原创 Facebook 重构：抛弃 Sass / Less ，迎接原子化 CSS 时代
随着 Facebook 和 Twitter 最近的产品部署，我认为一个新的趋势正在缓慢增长:Atomic CSS-in-JS。在这篇文章中，我们将看到什么是Atomic CSS（原子 CSS），它如何与 Tailwind CSS 这种实用工具优先的样式库联系起来，目前很多大公司在 React 代码仓库中使用它们。由于我不是这方面的专家，所以我不会去深入探讨它的利弊。我只是希望能帮助你了解它的大致内容。先抛出一个令人开心的结论，新的 CSS 编写和构建方式让 Facebook 的主页减少了 80%
2021-06-16 20:30:41
172
原创 5个不常提及的HTML技巧
2021年你需要知道的HTML标签和属性Web开发人员都在广泛的使用HTML。无论你使用什么框架或者选择哪个后端语言，框架在变，但是HTML始终如一。尽管被广泛使用，但还是有一些标签或者属性是大部分开发者不熟知的。虽然现在有很多的模版引擎供我们使用，但是我们还是需要尽可能的熟练掌握HTML内容，就像CSS一样。在我看来，最好尽可能使用HTML特性来实现我们的功能，而不是使用JavaScript实现相同的功能，尽管我承认编写HTML可能会是重复的和无聊的。尽管许多开发人员每天都在使用HTML，.
2021-06-12 20:02:39
256
4
原创 仅使用CSS提高页面渲染速度
用户在访问一个Web网站（页面）或应用时，总是希望它的加载速度快，功能流畅。如果过于慢，用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员，给自己应用提供更快的访问速度，提供很好的用户体验是必备的基础技能，而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊，在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。内容可见性（content-visibility）...
2021-06-05 19:19:59
450
原创 3 分钟搞定 CSS 的 4 种引入方式
在 HTML 样式中有 4 种 CSS 引用方式，分别为：行内样式（行间样式、内联样式、行嵌样式）、内部样式、链入外部样式、导入外部样式。 行内样式（行间样式、内联样式、行嵌样式）：在网页元素上通过style=""属性直接写样式。如： ...
2021-06-02 16:18:40
197
原创 不写JavaScript，教你只用纯HTML做出几个实用网页效果
在我们以往看到的页面效果中，很多是需要JS搭配使用的，那如果不写JS你知道如何实现吗？在本文中，将介绍如何使用纯HTML打造属于自己的实用网页效果。1.折叠手风琴使用Details和Summary标签可以创建没有JavaScript代码的可折叠手风琴。效果：...
2021-05-28 20:16:37
627
原创 web前端开发9个超实用小技巧
今天来给大家介绍9个web前端开发中的小窍门小技巧，能够帮助大家在开发过程中解决一些小问题，耐心看下去呦~~一、浏览器地址栏运行JavaScript代码这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javascript:开头后跟要执行的语句。比如：javascript:alert('hello from address bar :)');将以上代码贴到浏览器地址栏回车后alert正常执行，一个弹窗神现。你去试一试，是不是没有出现弹窗？？？那是因为：如果是
2021-05-26 20:40:11
903
原创 请问自学Web前端有必要买课程吗？
目前网上优质、实用的免费课程有很多，而一些收费的课程目的并不在于授业解惑，而是在于盈利。如果本着分享的目的，获取一些回报自然无可厚非，只怕绝大多数提供课程的出发点就带着商业行为，这样对于刚入门、不了解情况的初学者是一个非常严重的误导，不仅花费冤枉钱，而且掉进坑里费心费力，文末有“惊喜”。2021年怎么样自学前端才能达到就业要求呢？（附最全前端学习路线图）https://www.bilibili.com/video/BV1p64y1y7zd入门-高级掘金和其他论文关于前端入门的讨论已经有很多
2021-05-18 19:19:04
315
原创 ## 五周从前端入门到前端开发工程师
五周从前端入门到前端开发工程师作为一名大三开始学习前端，如今已经工作三年的前端狗，跟大家谈谈我的前端自学之路，以及自己的学习方法，和前端学习资源推荐。本篇为前端入门指导文，各位大神请避让。前端行业这几年发展飞速，各种框架层出不穷，很多开发者都戏谑说自己学不动了。确实，我们应该充分利用自己的有限时间，好的学习方法和资源非常重要。以下所有方法都是自己踩过坑的总结，保证能让各位在前端学习之路上事半功倍。写在前面：尽信书不如无书，人工撰写定有纰漏，争议之处可留言讨论第一阶段的学习：html+css+jav.
2021-05-17 15:45:41
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人