xml地图|网站地图|网站标签 [设为首页] [加入收藏]
Codecademy为编程初学者新增HTML和CSS两门课程,你所
分类:web前端

前端是否应该将CSS和JS分开设置两个不同岗位

2012/03/06 · CSS, JavaScript · 来源: 阿当     · CSS, Javascript

来源:阿当

这事从Franky的一则招聘说起。昨天Franky发了一则招聘前端的微博,招聘条件写得比较实在,不是那种一看就是从别的地方复制过来的那种:

招聘条件写得看似很低,所以一下子引起了很多关注,微博和QQ群里很多人在讨论。关于这则招聘,我也有些话想说。

在新浪和腾讯,前端都是分 CSS 方向和 JS 方向的。在淘宝和百度是不分的。不同的公司岗位设置不同,都有各自的道理。

澳门新葡亰手机版 1

我在淘宝时觉得 CSS 和 JS 应该一个人来做,因为这两样是紧密合作的, CSS 如何设置和 JS 是关联很大的,这个分开两个人做,在对接的时候一定有很多隐患。当时我认为设置 CSS 工程师这个岗位,是因为合格的前端(既精 CSS 又精 JS )很少,但市场需求大,所以拉了些只会 CSS 的工程师回来设一个 CSS 工程师的职位来凑数,其实是为了起一个过渡作用,等到合格的前端多起来的时候,这些 CSS 工程师岗位一定会给撤掉的。但当时我在淘宝大部分时间都在做一些毫无技术含量的专题页,一两个小时出一个页面的那种,占了我工作时间80%以上,其实对我本人来说很痛苦,没什么可提高的。

后来去了新浪,我是专职做 JS ,不用切页面的,后来我发现 CSS 和 JS 分开来其实比我想像中隐患小很得多——如果 CSS 工程师靠谱的话(事实上 CSS 工程师们也在学一些 JS ,大部分人都会借助jQuery自己完成一些功能,所以其实他们对 JS 和 CSS 如何协同工作是了解的)。我在新浪时,和 CSS 工程师配合得很好,很多问题其实事先说明一下我的思路, CSS 工程师们一点就透。我个人可以有更多的时间关注一些别的东西,以自我提升。在新浪时,无论从工作量上,还是从专注程度上,都比之前我 CSS 、 JS 全包时要好上很多。有非常多的知识是我在新浪工作期间学会的,比如ror、python和敏捷。在老东家灰头土脸迎接一个又一个专题页时,我完全不可能在短时间内学习到这么多知识点。而专门设置一个 CSS 工程师的岗位,公司招人也会容易得多,而且无论是 JS 还是 CSS 工程师,因为分开来工作,所以每个人其实都保持了一个很高的工作效率,不用不停地切换思维模式。在薪水方面, CSS 工程师比 JS 工程师薪水普遍要低一些,事实上这个大家其实都能理解,无论 CSS 工程师们是否愿意承认, JS 的确比 CSS 门槛高,也更有供挖掘的深度。所以 CSS 工程师们也会想要转型做 JS ,往往是以 CSS 入行,再慢慢转型做 JS 。老实说,我觉得有这样一个梯度,无论对公司招聘,还是工程师们的发展,都是非常有利的。

我现在个人非常赞成将两者分开的做法。就像Franky说的“只不过我的原则就是:绝对不搞那种,招御厨的标准,费劲半年,招来一个御厨,结果让人家整天削土豆皮。虽然这个说法有点攻击重构这个工作,但是还是有那么几分道理在”。

澳门新葡亰手机版 2

赞 收藏 评论

澳门新葡亰手机版 3

Codecademy为编程初学者新增HTML和CSS两门课程

2012/04/03 · CSS · 来源: 伯乐在线     · CSS

英文原文:Mashable   编译:伯乐在线 – 澳门新葡亰手机版,黄利民

趣味在线学习编程网站 Codecademy 的注册用户近期已超过 100 万,包括纽约市市长 Bloomberg 。尽管 Codecademy 承诺可以让任何人都可以通过互动式的在线课程成为一名程序员,但它一直没有提供更为基础的语言。

不过在本周一,这家创业公司推出了 HTML 和 CSS 的教程(译注:貌似需要用梯子访问)。Codecademy 网站之前只有 JavaScript 课程。

JavaScript 是用于开发应用程序,而 HTML 和 CSS 是用于网页开发的语言。新程序员在学习其他编程语言之前常会学习这两种。推出这两种语言的课程,无疑会让 Codecademy 成为真正新手的学习选择。

“当你想做个网站时,(它们可用来完成)基础的东西,” Codecademy 联合创始人 Zach Sims 告诉 Mashable。

澳门新葡亰手机版 4

(伯乐在线配图)

 

有游戏般的课程,Codecademy 在吸引新用户方面没有困难。比如,在2012年年初的新年决议课程中,就有超过40万的新注册用户。这家创业公司的一个比较大的障碍是,其内容和用户基础的步调不一样。

在今年1月,该公司宣告找到了这个问题的解决方法。推出了一个新的教学工具,任何人都可以给大课程(curriculum)提交一份课件(lesson),此举让 Codecademy 从课程内容创建者成为了课程内容管理者。已有2000多分课件提交至该网站,包括组成 CSS 和 HTML 新课程的那些课件。用户的课件提交,将非常有助于后续推出其他课程。

“[CSS 和 HTML] 是我们在不久将在推出更多编程语言的先头部队,” Sims 表示。

澳门新葡亰手机版 5

课程截图(Image courtesy of iStockphoto, nullplus)

 

英文原文:Mashable   编译:伯乐在线 – 黄利民

【如需转载,请标注并保留原文链接、译文链接和译者等信息,谢谢合作!】

 

赞 收藏 评论

你所不知道的 CSS 滤镜技巧与细节

2017/09/19 · CSS · 滤镜

本文作者: 伯乐在线 - chokcoco 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

承接上一篇你所不知道的 CSS 动画技巧与细节,本文主要介绍 CSS 滤镜的不常用用法,希望能给读者带来一些干货!

系列 CSS 文章汇总在我的 Github ,持续更新,欢迎点个 star 订阅收藏。

OK,下面直接进入正文。本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN — filter 了解下:

{ filter: blur(5px); filter: brightness(0.4); filter: contrast(200%); filter: drop-shadow(16px 16px 20px blue); filter: grayscale(50%); filter: hue-rotate(90deg); filter: invert(75%); filter: opacity(25%); filter: saturate(30%); filter: sepia(60%); /* Apply multiple filters */ filter: contrast(175%) brightness(3%); /* Global values */ filter: inherit; filter: initial; filter: unset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    filter: blur(5px);
    filter: brightness(0.4);
    filter: contrast(200%);
    filter: drop-shadow(16px 16px 20px blue);
    filter: grayscale(50%);
    filter: hue-rotate(90deg);
    filter: invert(75%);
    filter: opacity(25%);
    filter: saturate(30%);
    filter: sepia(60%);
 
    /* Apply multiple filters */
    filter: contrast(175%) brightness(3%);
 
    /* Global values */
    filter: inherit;
    filter: initial;
    filter: unset;
}

关于作者:黄利民

澳门新葡亰手机版 6

伯乐在线联合发起人,关注 IT 和互联网。 个人主页 · 我的文章 · 99 ·  

澳门新葡亰手机版 7

基本用法

先简单看看几种滤镜的效果:

澳门新葡亰手机版 8

CodePen Demo — Css3 filter

你可以通过 hover 取消滤镜,观察该滤镜的效果。

简单来说,CSS 滤镜就是提供类似 PS 的图形特效,像模糊,锐化或元素变色等功能。通常被用于调整图片,背景和边界的渲染。本文就会围绕这些滤镜展开,看看具体能怎么使用或者玩出什么花活。

澳门新葡亰手机版 9

常用用法

既然是标题是你所不知道的技巧与细节,那么比较常用的一些用法就不再赘述,通常我们见得比较多的 CSS 滤镜用法有:

  1. 使用 filter: blur() 生成毛玻璃效果
  2. 使用 filter: drop-shadow() 生成整体阴影效果
  3. 使用 filter: opacity() 生成透明度

如果对上面的技巧不是很了解,可以稍稍百度谷歌一下,下文将由浅及深,介绍一些不大常见的滤镜的具体用法及一些小细节:

contrast/brightness — hover 增亮图片

通常页面上的按钮,都会有 hover/active 的颜色变化,以增强与用户的交互。但是一些图片展示,则很少有 hover 的交互,运用 filter: contrast() 或者 filter: brightness() 可以在 hover 图片的时候,调整图片的对比图或者亮度,达到聚焦用户视野的目的。

brightness表示亮度,contrast 表示对比度。

当然,这个方法同样适用于按钮,简单的 CSS 代码如下:

.btn:hover, .img:hover { transition: filter .3s; filter: brightness(1.1) contrast(110%); }

1
2
3
4
5
.btn:hover,
.img:hover {
    transition: filter .3s;
    filter: brightness(1.1) contrast(110%);
}

澳门新葡亰手机版 10

CodePen Demo — CSS3 filter hover IMG

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:Codecademy为编程初学者新增HTML和CSS两门课程,你所

上一篇:不可思议的颜色混合模式,遇见未知的 下一篇:CSS模块化编码让开发事半功倍,30个最常用CSS选择
猜你喜欢
热门排行
精彩图文