https://github.com/helkyle/article
所有翻译文章
https://github.com/helkyle/article
Last synced: about 1 year ago
JSON representation
所有翻译文章
- Host: GitHub
- URL: https://github.com/helkyle/article
- Owner: HelKyle
- License: mit
- Created: 2015-07-21T15:58:06.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-02-27T01:50:52.000Z (about 10 years ago)
- Last Synced: 2025-02-10T22:53:25.449Z (over 1 year ago)
- Homepage: http://w3ctrain.com
- Size: 21.5 KB
- Stars: 36
- Watchers: 6
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#已翻译
---
## Gulp
###[Gulp新手入门教程](http://www.w3ctrain.com/2015/12/22/gulp-for-beginners/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[Gulp for Beginners](https://css-tricks.com/gulp-for-beginners/)
###[也许你并不需要 Gulp， Grunt ?](http://www.w3ctrain.com/2016/02/27/why-npm-scripts/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[Why npm Scripts?](https://css-tricks.com/why-npm-scripts/)
## css
###[12个鲜为人知的CSS技能(上)](http://www.w3ctrain.com/2015/07/22/12-Little-Known-CSS-Facts/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[12 Little-Known CSS Facts (The Sequel)](http://www.sitepoint.com/12-little-known-css-facts-the-sequel/)
###[前端面试专题特攻之CSS权重](http://www.w3ctrain.com/2015/07/25/specifics-on-css-specificity/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[12 Little-Known CSS Facts (The Sequel)](https://css-tricks.com/specifics-on-css-specificity/)
###[前端工程师应该知道的Margin坍塌](http://www.w3ctrain.com/2015/07/30/what-you-should-know-about-collapsing-margins/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)
###[:nth-child 和 :nth-of-type的区别](http://www.w3ctrain.com/2015/09/04/the-difference-between-nth-child-and-nth-of-type/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[The Difference Between :nth-child and :nth-of-type](https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/)
###[关于居中(一)](http://www.w3ctrain.com/2015/12/07/about-center/)
译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)
译文：[centering css complete guide](https://css-tricks.com/centering-css-complete-guide/)
###[前端绘制图形的几种方式](http://www.w3ctrain.com/2015/08/09/working-with-shapes-in-web-design/)
译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)
译文：[working with shapes in web design](https://css-tricks.com/working-with-shapes-in-web-design/)
## javascript
###[详解JavaScript构造器](http://www.w3ctrain.com/2015/09/25/understanding-javascript-constructors/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[Understanding JavaScript Constructors](https://css-tricks.com/understanding-javascript-constructors/)
### [使用JavaScript修改伪类样式的方法总结](http://www.w3ctrain.com/2015/07/21/modify-pseudo-elements-css/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文： [Modify pseudo element styles with JavaScript](http://pankajparashar.com/posts/modify-pseudo-elements-css/)
## Animation
###[如何调试CSS的关键帧(keyframe)动画](http://w3ctrain.com/2016/02/04/debug-animation/)
译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)
译文：[Debugging CSS Keyframe Animations](https://css-tricks.com/debugging-css-keyframe-animations/)
## 小练习
### [新手学Flexbox之绘制色子](http://www.w3ctrain.com/2015/08/15/flexbox-dice/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文： [Getting Dicey With Flexbox](http://www.w3ctrain.com/2015/08/15/flexbox-dice/)
### [前端绘制图形的几种方式](http://www.w3ctrain.com/2015/08/09/working-with-shapes-in-web-design/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文： [working with shapes in web design](https://css-tricks.com/working-with-shapes-in-web-design/)
### [黑客物理学（part 1）](http://www.w3ctrain.com/2015/09/01/hack-physics-and-javascript-1/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文： [hack physics and javascript 1](http://codepen.io/rachsmith/blog/hack-physics-and-javascript-1)
### [用emoji做切换按钮](http://www.w3ctrain.com/2015/12/29/use-emoji-toggles/)
译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)
译文： [Emoji Toggles!](https://css-tricks.com/emoji-toggles/)
## 小技巧
### [网页上的复制粘贴](http://www.w3ctrain.com/2015/08/09/copy-paste-the-web/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文： [Copy & Paste & The Web](https://css-tricks.com/copy-paste-the-web/)
### [Data URIs](http://www.w3ctrain.com/2015/08/05/data-uris/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文： [Data URIs](https://css-tricks.com/data-uris/)
### [使用css秒过<大家来找茬>](http://www.w3ctrain.com/2015/10/18/image-deffing-using-css/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[Image diffing using CSS](http://franklinta.com/2014/11/30/image-diffing-using-css/)
### [继承使用box-sizing可能会更好](http://www.w3ctrain.com/2016/02/19/inheriting-box-sizing-probably-slightly-better-best-practice/)
译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)
译文：[Inheriting box-sizing Probably Slightly Better Best-Practice](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)
#待翻译
---
- [http://www.smashingmagazine.com/2015/07/smarter-grids-with-sass-and-susy/](http://www.smashingmagazine.com/2015/07/smarter-grids-with-sass-and-susy/) by [Michelle Barker](http://www.smashingmagazine.com/author/michellebarker/)
- [http://alistapart.com/article/container-queries-once-more-unto-the-breach](http://alistapart.com/article/container-queries-once-more-unto-the-breach) by [Mat Marquis](http://alistapart.com/author/matmarquis)
- [http://www.sitepoint.com/accessible-footnotes-css/](http://www.sitepoint.com/accessible-footnotes-css/) by [Hugo Giraudel](http://www.sitepoint.com/author/hgiraudel/)
- [http://demosthenes.info/blog/1052/position-sticky-scroll-to-top-then-fixed-in-pure-CSS](http://demosthenes.info/blog/1052/position-sticky-scroll-to-top-then-fixed-in-pure-CSS) by [demosthenes](http://demosthenes.info/)
- [https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property](https://fourword.fourkitchens.com/article/fix-scrolling-performance-css-will-change-property) by [Chris Ruppel](https://fourword.fourkitchens.com/author/chris-ruppel)
- [https://code.tutsplus.com/tutorials/understanding-fluent-apis-in-javascript--cms-24429](https://code.tutsplus.com/tutorials/understanding-fluent-apis-in-javascript--cms-24429) by [David Catuhe](https://tutsplus.com/authors/david-catuhe)
- [http://tutorialzine.com/2013/10/buttons-built-in-progress-meters/](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/](http://tympanus.net/codrops/2014/04/09/how-to-create-a-circular-progress-button/) [Mary Lou](http://tympanus.net/codrops/author/crnacura/)
- [https://webdesign.tutsplus.com/tutorials/how-to-give-your-logo-the-slip-scroll-effect--cms-22274](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://webdesign.tutsplus.com/tutorials/create-a-masked-background-effect-with-css--cms-21112)
- [https://css-tricks.com/functional-css-tabs-re-revisited/](https://css-tricks.com/functional-css-tabs-re-revisited/) by [Geoff Graham ](https://css-tricks.com/author/geoffreygrahamgmail-com/)
- [https://css-tricks.com/sites-with-high-quality-photos-you-can-use-for-free/](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/transforms-on-svg-elements/)
- [https://css-tricks.com/a-complete-guide-to-svg-fallbacks/](https://css-tricks.com/a-complete-guide-to-svg-fallbacks/)
- [https://css-tricks.com/the-priority-navigation-pattern/](https://css-tricks.com/the-priority-navigation-pattern/) by [Chris Coyier](https://css-tricks.com/author/chriscoyier/)
- [Picturefill 2.0: Responsive Images And The Perfect Polyfill](http://www.smashingmagazine.com/2014/05/picturefill-2-0-responsive-images-and-the-perfect-polyfill/) by []
- [http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/](http://www.sitepoint.com/understanding-block-formatting-contexts-in-css/) by [Ritesh Kumar](http://www.sitepoint.com/author/rkumar/)
- [CSS-Only Raindrops on Window Effect](http://blogs.adobe.com/dreamweaver/2015/06/css-only-raindrops-on-window-effect.html#.VXT6Glyqqko) by [Lucas Bebber](http://blogs.adobe.com/dreamweaver/author/lucas-bebber)
- [How Floating Works](http://bitsofco.de/how-floating-works/) by [bitsofco](http://bitsofco.de/)
- [https://css-tricks.com/building-a-circular-navigation-with-css-clip-paths/](Building A Circular Navigation with CSS Clip Paths) by [Sara Soueidan](http://sarasoueidan.com/)
- [Simulate mouse / touch events with jQuery in PhantomJS and the browser](http://ngryman.sh/articles/simulate-mouse--touch-events-with-jquery-in-phantomjs-and-the-browser/) by [ Nicolas Gryman](https://plus.google.com/116260634660700511285)
- [Localizing Times in JavaScript](https://css-tricks.com/localizing-times-in-javascript/) by [CHRIS COYIER ](https://css-tricks.com/author/chriscoyier/)
- [Scroll/Follow Sidebar, Multiple Techniques](https://css-tricks.com/scrollfollow-sidebar/) by [CHRIS COYIER ](https://css-tricks.com/author/chriscoyier/)
- [How I Live-Coded My Most-Hearted Pen](https://css-tricks.com/how-i-live-coded-my-most-hearted-codepen-demo/) by [ANA TUDOR ](https://css-tricks.com/author/thebabydino/)
## Animation
- [Animations: the Angular Way](https://css-tricks.com/animations-the-angular-way/) by [css-tricks](https://css-tricks.com)
- [Recreating the Google Logo Animation with SVG and GreenSock](https://css-tricks.com/recreating-the-google-logo-animation-with-svg-and-greensock/) by [ Petr Tichy](https://ihatetomatoes.net/)
- [CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More](https://css-tricks.com/css-animation-tricks/) by [ Zach Saucier](http://zachsaucier.com/)
## Optimize
- [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) by [yahoo](developer.yahoo.com)
- [The 300 ms Click Delay and iOS 8](http://developer.telerik.com/featured/300-ms-click-delay-ios-8/) by [Opinion](http://developer.telerik.com/category/content-types/opinion/)
- [5 Ways to Prevent the 300ms Click Delay on Mobile Devices](http://www.sitepoint.com/5-ways-prevent-300ms-click-delay-mobile-devices/) by [Craig Buckler](http://www.sitepoint.com/author/craig-buckler/)
- [4 steps to improve your website’s performance](http://zerosixthree.se/4-steps-to-improve-your-websites-performance/) by [Sebastian Ekström](http://zerosixthree.se/)
## SVG
- [Click SVG Element to Focus (and Style)](https://css-tricks.com/click-svg-to-focus/) by [css-tricks](https://css-tricks.com)
- [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/) by [Chris Coyier](https://css-tricks.com/author/chriscoyier/)
- [A Guide to SVG Animations (SMIL)](https://css-tricks.com/guide-svg-animations-smil/) by [ Sara Soueidan](http://sarasoueidan.com/)
- [Tight Fitting SVG Shapes, the Present and Future](https://css-tricks.com/tight-fitting-svg-shapes/) by [ANA TUDOR ](https://css-tricks.com/author/thebabydino/)
## Sass
- [How to structure a Sass project](http://thesassway.com/beginner/how-to-structure-a-sass-project) by [John W. Long](http://wiseheartdesign.com/)
- [A Simple Responsive Grid, Made Even Better With Sass](http://webdesign.tutsplus.com/tutorials/a-simple-responsive-grid-made-even-better-with-sass--cms-21540) by [Hugo Giraudel](http://hugogiraudel.com/)
- [The Sass Ampersand](https://css-tricks.com/the-sass-ampersand/) by [Rich Finelli](http://www.richfinelli.com/)
## Flex
- [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) by [css-tricks](https://css-tricks.com)
## Pseudo
- [Pseudo and pseudon’t](https://adactio.com/journal/10000) by [Adactio](https://adactio.com/)
## React
- [I Learned How to be Productive in React in a Week and You Can, Too](https://css-tricks.com/productive-in-react/) by [Sarah Drasner](https://css-tricks.com/author/sdrasner/)
## Design Pattern
- [4 JavaScript Design Patterns You Should Know](https://scotch.io/bar-talk/4-javascript-design-patterns-you-should-know) by [DEVAN PATEL](https://scotch.io/author/devan)
## Media Query
- [The Fab Four technique to create Responsive Emails without Media Queries](https://medium.freecodecamp.com/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848#.hyjx3kl5m) by [Rémi Parmentier](https://medium.com/@hteumeuleu)
## Gulp
- [Advanced Gulp File](http://www.mikestreety.co.uk/blog/an-advanced-gulpjs-file) by [Mike Street](http://www.mikestreety.co.uk/)
## Form
- [Drag and Drop File Uploading](https://css-tricks.com/drag-and-drop-file-uploading/) by [Osvaldas Valutis](http://osvaldas.info/)
- [Styling & Customizing File Inputs the Smart Way](http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/) by [Osvaldas Valutis](http://tympanus.net/codrops/author/osvaldasv/)