Article

Article copied to clipboard

#已翻译

Gulp

###Gulp新手入门教程 译者：Helkyle 译文：Gulp for Beginners

###也许你并不需要 Gulp， Grunt ? 译者：Helkyle 译文：Why npm Scripts?

css

###12个鲜为人知的CSS技能(上) 译者：Helkyle 译文：12 Little-Known CSS Facts (The Sequel)

###前端面试专题特攻之CSS权重 译者：Helkyle 译文：12 Little-Known CSS Facts (The Sequel)

###前端工程师应该知道的Margin坍塌 译者：Helkyle 译文：What You Should Know About Collapsing Margins

###:nth-child 和 :nth-of-type的区别 译者：Helkyle 译文：The Difference Between :nth-child and :nth-of-type

###关于居中(一) 译者：Cyseria 译文：centering css complete guide

###前端绘制图形的几种方式 译者：Cyseria 译文：working with shapes in web design

javascript

###详解JavaScript构造器 译者：Helkyle 译文：Understanding JavaScript Constructors

使用JavaScript修改伪类样式的方法总结

译者：Helkyle 译文： Modify pseudo element styles with JavaScript

Animation

###如何调试CSS的关键帧(keyframe)动画 译者：Cyseria 译文：Debugging CSS Keyframe Animations

小练习

新手学Flexbox之绘制色子

译者：Helkyle 译文： Getting Dicey With Flexbox

前端绘制图形的几种方式

译者：Helkyle 译文： working with shapes in web design

黑客物理学（part 1）

译者：Helkyle 译文： hack physics and javascript 1

用emoji做切换按钮

译者：Cyseria 译文： Emoji Toggles!

小技巧

网页上的复制粘贴

译者：Helkyle 译文： Copy & Paste & The Web

Data URIs

译者：Helkyle 译文： Data URIs

使用css秒过<大家来找茬>

译者：Helkyle 译文：Image diffing using CSS

继承使用box-sizing可能会更好

译者：Helkyle 译文：Inheriting box-sizing Probably Slightly Better Best-Practice

#待翻译

• http://www.smashingmagazine.com/2015/07/smarter-grids-with-sass-and-susy/ by Michelle Barker

• http://alistapart.com/article/container-queries-once-more-unto-the-breach by Mat Marquis

• http://www.sitepoint.com/accessible-footnotes-css/ by Hugo Giraudel

• http://demosthenes.info/blog/1052/position-sticky-scroll-to-top-then-fixed-in-pure-CSS by demosthenes

• https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property by Chris Ruppel

• https://code.tutsplus.com/tutorials/understanding-fluent-apis-in-javascript--cms-24429 by David Catuhe

• http://tutorialzine.com/2013/10/buttons-built-in-progress-meters/ by [ Martin Angelov ]

• http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/ Mary Lou

• https://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274

• https://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112

• https://css-tricks.com/functional-css-tabs-re-revisited/ by Geoff Graham

• https://css-tricks.com/sites-with-high-quality-photos-you-can-use-for-free/

• https://css-tricks.com/transforms-on-svg-elements/

• https://css-tricks.com/a-complete-guide-to-svg-fallbacks/

• https://css-tricks.com/the-priority-navigation-pattern/ by Chris Coyier

• Picturefill 2.0: Responsive Images And The Perfect Polyfill by []

• http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/ by Ritesh Kumar

• CSS-Only Raindrops on Window Effect by Lucas Bebber

• How Floating Works by bitsofco

• [https://css-tricks.com/building-a-circular-navigation-with-css-clip-paths/](Building A Circular Navigation with CSS Clip Paths) by Sara Soueidan

• Simulate mouse / touch events with jQuery in PhantomJS and the browser by Nicolas Gryman

• Localizing Times in JavaScript by CHRIS COYIER

• Scroll/Follow Sidebar, Multiple Techniques by CHRIS COYIER

• How I Live-Coded My Most-Hearted Pen by ANA TUDOR

Animation

• Animations: the Angular Way by css-tricks

• Recreating the Google Logo Animation with SVG and GreenSock by Petr Tichy

• CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More by Zach Saucier

Optimize

• Best Practices for Speeding Up Your Web Site by yahoo

• The 300 ms Click Delay and iOS 8 by Opinion

• 5 Ways to Prevent the 300ms Click Delay on Mobile Devices by Craig Buckler

• 4 steps to improve your website’s performance by Sebastian Ekström

SVG

• Click SVG Element to Focus (and Style) by css-tricks

• How SVG Line Animation Works by Chris Coyier

• A Guide to SVG Animations (SMIL) by Sara Soueidan

• Tight Fitting SVG Shapes, the Present and Future by ANA TUDOR

Sass

• How to structure a Sass project by John W. Long

• A Simple Responsive Grid, Made Even Better With Sass by Hugo Giraudel

• The Sass Ampersand by Rich Finelli

Flex

• flex-grow is weird. Or is it? by css-tricks

Pseudo

• Pseudo and pseudon’t by Adactio

React

• I Learned How to be Productive in React in a Week and You Can, Too by Sarah Drasner

Design Pattern

• 4 JavaScript Design Patterns You Should Know by DEVAN PATEL

Media Query

• The Fab Four technique to create Responsive Emails without Media Queries by Rémi Parmentier

Gulp

• Advanced Gulp File by Mike Street

Form

• Drag and Drop File Uploading by Osvaldas Valutis

• Styling & Customizing File Inputs the Smart Way by Osvaldas Valutis