webkit | 易学教程

一位工作10年的前端总结的10个忠告

阅读更多关于一位工作10年的前端总结的10个忠告

最近在知乎看到这样一个问题：“作为IT行业的过来人，你有什么话想对后辈说的？” 笔者作为一位工作10年的老前端，忍不住也答了一波，为前端的朋友们总结了10条“走心”建议，都是那些年我踩过的坑，希望能帮你少走一些弯路。前端十年，从业人数激增面试竞争更为激烈，前几天一个朋友跟我说：“现在全网好像都在告诉我今年找工作很难，找工作快要崩溃了。”在疫情黑天鹅阴霾的笼罩下，让今年求职的人变得异常困难：xx企业缩招、xx公司裁员，俨然已成热搜常态。除此之外，大前端的发展无论从技术深度和广度也发生了陡峭的变化。前端不再是页面仔、组件仔，而是指能够使用JavaScript和相关H5技术开发iOS、Android、AR、VR、IoT、PC、Server、WebApp、3D甚至Web AI的综合性技术人才。这十年笔者从百度、腾讯到放弃阿里的offer选择创业，见证了无数前端新新新新新新新新技术此起彼伏和老一代框架的销声匿迹，更亲身经历了一个程序员的不平凡的十年，对技术和生活有了更深刻的认知。讲给前端圈年轻人的十点“走心”建议： 1、非科班出身的同学切记夯实计算机基础 2、避免天天使用各种cli搬砖，发布属于自己的CLI 3、X平台的小程序和生成小程序库，要深入理解背后原理 4、走出自己的安逸区，敢于去迈上更高的人生台阶 5、提升自己的技术能力，对框架的源码要深入阅读 6、要学C|C++

隐藏滚动条，但仍可以滚动

阅读更多关于隐藏滚动条，但仍可以滚动

问题： I want to be able to scroll through the whole page, but without the scrollbar being shown. 我希望能够滚动浏览整个页面，但不显示滚动条。 In Google Chrome it's: 在Google Chrome浏览器中： ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. 但是Mozilla Firefox和Internet Explorer似乎无法正常工作。 I also tried this in CSS: 我也在CSS中尝试过： overflow: hidden; That does hide the scrollbar, but I can't scroll any more. 那确实隐藏了滚动条，但是我不能再滚动了。 Is there a way I can remove the scrollbar while still being able to scroll the whole page? 有什么办法可以删除滚动条，同时仍然可以滚动整个页面？ With just CSS or HTML, please

纯css实现gif动图生成字画符

阅读更多关于纯css实现gif动图生成字画符

之前有一篇博客试过使用 JavaScript生成字符画，但是最终没有实现gif转字画符，事实上用当时说的方法：把gif每帧抽取出来，然后绘制到canvas上即可。不过这次要说的实现方式并非js，而是纯css实现，核心的属性是 background-clip 和 text-fill-color ，由于这俩属性目前并没有被纳入标准，所以需要加上 -webkit-前缀。当初发现这个属性是真的像发现了个宝藏，通过它们的组合可以实现非常多有意思的效果。前者用于对背景裁剪，后者用于和背景颜色叠加。于是就有了下图的效果（背景是一张动图，然后使用文字对背景进行裁剪。字体透明填充，与背景叠加） html结构： <!doctype html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css ascii srt</title> <style> /* 样式 */ <

博客园美化（最全）

阅读更多关于博客园美化（最全）

使用博客园快一星期了，看自己博客太单调了，就网上翻找别人的美化教程，自己钻研一整天，现在整理分享出来。首先要申请js权限，在设置选项，博客设置里，一般十几分钟就审核好了，如图背景图片设置先选择模板，选择SimpleMemory。注：后面的css代码是基于这个模板修改的新建一个相册，上传背景图片，尽量选清晰度高的。在相册那里点击查看图片会弹出一个很大的页面，右键图片，选择复制图片地址。然后将以下css代码粘贴到博客设置的页面定制CSS代码处，记得展开代码。 #google_ad_c1, #google_ad_c2 { display : none ;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { font-size : 14px

CSS基础面试题，快来查漏补缺

阅读更多关于 CSS基础面试题，快来查漏补缺

本文大部分问题来源： 50道CSS基础面试题（附答案），外加一些面经。我对问题进行了分类整理，并给了自己的回答。大部分知识点都有专题链接（来源于本博客相关文章），用于自己前端CSS部分的查漏补缺。虽作为一个面试资料，但感觉也能帮助前端新手梳理CSS的知识点。开胃餐-两道常见考题盒子模型样式与选择器 CSS3 包含块 BFC 中插小点定位position display与visibility float flexbox overflow 响应式设计 CSS优化应用 ▶开胃餐x2 用纯CSS创建一个三角形的原理是什么？ CSS 边框的基础使用图1为border最普遍的用法，border: solid 10px #ffb6b9;。用多了你会不会就觉得border是由四个矩形边框拼接而成，但其实是错的。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们继续看：图2，我们为边框四个方向设置不同颜色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，并加大边框宽度。图3，我们进一步将元素的宽高设为0。我们发现，此时元素由上下左右4个三角形组成。为了实现一个三角形，那就很简单了，我们只需将其它border边的颜色设置为白色或者透明色即可图4，border-color: transparent

How to make title-change call work in webkit2gtk?

阅读更多关于 How to make title-change call work in webkit2gtk?

问题 I am trying to port an old GTK webkit code written in python2 to webkit2 and python3 (Ubuntu has removed old webkit v1). The js code changes the title of the html, and python detected it to close it. However, it is not working in webkit2. In the old code, there is the line self.webview.connect('title-changed', title_changed) #title_changed is a python function, which will do something which shows TypeError: <WebKit2.WebView object at 0x7f14b687ecd0 (WebKitWebView at 0x557297cdb7c0)>: unknown

css如何实现超出几行显示省略号？

阅读更多关于 css如何实现超出几行显示省略号？

1、单行文本使用 text-overflow：ellipsis 属性 text-overflow: clip | ellipsis | string; clip：修剪文本。 ellipsis：显示省略符号来代表被修剪的文本。 string：使用给定的字符串来代表被修剪的文本。示例： css: p{ overflow: hidden;/*超出部分隐藏*/ text-overflow:ellipsis;/* 超出部分显示省略号 */ white-space: nowrap;/*规定段落中的文本不进行换行 */ width: 200px;/*需要配合宽度来使用*/ border: 1px solid; font-size: 25px; } html:　　 <p>单行文本超出部分显示省略号哈哈哈哈哈哈哈</p> 2、多行文本显示省略号，省略号在段尾 p{　　　display: -webkit-box; 　　-webkit-box-orient: vertical; 　　-webkit-line-clamp: 3; 　　overflow: hidden; 　　width: 250px; 　　border: 1px solid red; 　　font-size: 30px;　 } 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；注： -webkit

iview通过select勾选动态生成表单的demo

阅读更多关于 iview通过select勾选动态生成表单的demo

<template> <div id="app"> <Select v-model="model" style="width:200px" @on-change="selectChange" label-in-value> <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option> </Select> <Button type="dashed" @click="handleAdd" icon="md-add">Add item</Button> <Form ref="formDynamic" :model="formDynamicConfig" :label-width="80" style="width: 300px"> <transition-group name="fades"> <FormItem v-for="(item, index) in formDynamic" :key="item.value" :label="item.label"> <Row> <Col span="18"> <Input type="text" v-model="formDynamicConfig[item.value]" placeholder="Enter

2. chromium开发工具--gclient

阅读更多关于 2. chromium开发工具--gclient

2. chromium开发工具--gclient 1.gclient简介 gclient是谷歌开发的一套跨平台git仓库管理工具，用来将多个git仓库组成一个solution进行管理。总体上，其核心功能是根据一个Solution的DEPS文件所定义的规则将多个git仓库拉取到指定目录。例如，chromium就是由80多个独立仓库组成。 2.相关概念 hooks: 当gclient拉完代码后执行的额外脚本； solution: 一个包含DEPS文件的仓库，可以认为是一个完整的项目； DEPS: 一个特殊的文件，规定了项目依赖关系； .gclient：一个特殊文件，规定了要拉取的solution，可由 gclient config 命令创建出来； include_rules：指定当前目录下哪些目录/文件可以被其他代码include包含，哪些不可以被include。帮助命令: gclient --help 3.常用命令 3.1 gclient config 该命令会生成 .gclient 文件，用于初始化要拉取的solution，其内容记录了solution仓库的地址以及要保存的位置。我们在拉取chromium代码时第一步其实也是生成了 .gclient 文件，内容如下： solutions = [ { "url": "https://chromium.googlesource

1.CSS3简介

阅读更多关于 1.CSS3简介

# 1.CSS3简介 - 前缀 google/safari : -webkit- ie : -ms- firefox : -moz- opera : -o- - 前缀官方网址参考手册：http://css.doyoe.com 权威网站：http://www.caniuse.com - 预处理器:pre-processor less/sass cssNext插件 cssNext:用来实现一些未来的标准（未完全在各大浏览器实现的功能） - 后处理器:post-processor 后处理器插件 autoprefixer : 可以帮助我们自动添加前缀 - postCss + 插件（充分体现了扩展性）用JS实现的css抽象的语法树 AST(Abstract Syntax Tree) 剩下的是留给了后人来做来源： oschina 链接： https://my.oschina.net/u/4413947/blog/4282731

订阅 webkit