{"id":25221892,"url":"https://github.com/helkyle/article","last_synced_at":"2025-04-05T12:12:22.767Z","repository":{"id":35196929,"uuid":"39455311","full_name":"HelKyle/Article","owner":"HelKyle","description":"所有翻译文章","archived":false,"fork":false,"pushed_at":"2016-02-27T01:50:52.000Z","size":22,"stargazers_count":36,"open_issues_count":0,"forks_count":9,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-02-10T22:53:25.449Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://w3ctrain.com","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HelKyle.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-21T15:58:06.000Z","updated_at":"2022-08-30T03:01:24.000Z","dependencies_parsed_at":"2022-08-17T19:41:11.815Z","dependency_job_id":null,"html_url":"https://github.com/HelKyle/Article","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelKyle%2FArticle","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelKyle%2FArticle/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelKyle%2FArticle/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HelKyle%2FArticle/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HelKyle","download_url":"https://codeload.github.com/HelKyle/Article/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247332612,"owners_count":20921854,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-10T22:53:27.473Z","updated_at":"2025-04-05T12:12:22.720Z","avatar_url":"https://github.com/HelKyle.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"#已翻译\n---\n## Gulp\n###[Gulp新手入门教程](http://www.w3ctrain.com/2015/12/22/gulp-for-beginners/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[Gulp for Beginners](https://css-tricks.com/gulp-for-beginners/)\n\n\n###[也许你并不需要 Gulp， Grunt ?](http://www.w3ctrain.com/2016/02/27/why-npm-scripts/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[Why npm Scripts?](https://css-tricks.com/why-npm-scripts/)\n\n## css\n\n###[12个鲜为人知的CSS技能(上)](http://www.w3ctrain.com/2015/07/22/12-Little-Known-CSS-Facts/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[12 Little-Known CSS Facts (The Sequel)](http://www.sitepoint.com/12-little-known-css-facts-the-sequel/)\n\n###[前端面试专题特攻之CSS权重](http://www.w3ctrain.com/2015/07/25/specifics-on-css-specificity/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[12 Little-Known CSS Facts (The Sequel)](https://css-tricks.com/specifics-on-css-specificity/)\n\n###[前端工程师应该知道的Margin坍塌](http://www.w3ctrain.com/2015/07/30/what-you-should-know-about-collapsing-margins/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[What You Should Know About Collapsing Margins](https://css-tricks.com/what-you-should-know-about-collapsing-margins/)\n\n###[:nth-child 和 :nth-of-type的区别](http://www.w3ctrain.com/2015/09/04/the-difference-between-nth-child-and-nth-of-type/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[The Difference Between :nth-child and :nth-of-type](https://css-tricks.com/the-difference-between-nth-child-and-nth-of-type/)\n\n###[关于居中(一)](http://www.w3ctrain.com/2015/12/07/about-center/)\n译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)\n译文：[centering css complete guide](https://css-tricks.com/centering-css-complete-guide/)\n\n###[前端绘制图形的几种方式](http://www.w3ctrain.com/2015/08/09/working-with-shapes-in-web-design/)\n译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)\n译文：[working with shapes in web design](https://css-tricks.com/working-with-shapes-in-web-design/)\n\n## javascript\n\n\n###[详解JavaScript构造器](http://www.w3ctrain.com/2015/09/25/understanding-javascript-constructors/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[Understanding JavaScript Constructors](https://css-tricks.com/understanding-javascript-constructors/)\n\n### [使用JavaScript修改伪类样式的方法总结](http://www.w3ctrain.com/2015/07/21/modify-pseudo-elements-css/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文： [Modify pseudo element styles with JavaScript](http://pankajparashar.com/posts/modify-pseudo-elements-css/)\n\n## Animation\n\n###[如何调试CSS的关键帧(keyframe)动画](http://w3ctrain.com/2016/02/04/debug-animation/)\n译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)\n译文：[Debugging CSS Keyframe Animations](https://css-tricks.com/debugging-css-keyframe-animations/)\n\n\n## 小练习\n### [新手学Flexbox之绘制色子](http://www.w3ctrain.com/2015/08/15/flexbox-dice/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文： [Getting Dicey With Flexbox](http://www.w3ctrain.com/2015/08/15/flexbox-dice/)\n\n### [前端绘制图形的几种方式](http://www.w3ctrain.com/2015/08/09/working-with-shapes-in-web-design/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文： [working with shapes in web design](https://css-tricks.com/working-with-shapes-in-web-design/)\n\n### [黑客物理学（part 1）](http://www.w3ctrain.com/2015/09/01/hack-physics-and-javascript-1/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文： [hack physics and javascript 1](http://codepen.io/rachsmith/blog/hack-physics-and-javascript-1)\n\n### [用emoji做切换按钮](http://www.w3ctrain.com/2015/12/29/use-emoji-toggles/)\n译者：[Cyseria](http://www.w3ctrain.com/about/#Cyseria)\n译文： [Emoji Toggles!](https://css-tricks.com/emoji-toggles/)\n\n## 小技巧\n### [网页上的复制粘贴](http://www.w3ctrain.com/2015/08/09/copy-paste-the-web/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文： [Copy \u0026 Paste \u0026 The Web](https://css-tricks.com/copy-paste-the-web/)\n\n### [Data URIs](http://www.w3ctrain.com/2015/08/05/data-uris/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文： [Data URIs](https://css-tricks.com/data-uris/)\n\n### [使用css秒过\u003c大家来找茬\u003e](http://www.w3ctrain.com/2015/10/18/image-deffing-using-css/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[Image diffing using CSS](http://franklinta.com/2014/11/30/image-diffing-using-css/)\n\n### [继承使用box-sizing可能会更好](http://www.w3ctrain.com/2016/02/19/inheriting-box-sizing-probably-slightly-better-best-practice/)\n译者：[Helkyle](http://www.w3ctrain.com/about/#Helkyle)\n译文：[Inheriting box-sizing Probably Slightly Better Best-Practice](https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)\n\n\n#待翻译\n---\n\n- [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/)\n\n- [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)\n\n\n- [http://www.sitepoint.com/accessible-footnotes-css/](http://www.sitepoint.com/accessible-footnotes-css/) by [Hugo Giraudel](http://www.sitepoint.com/author/hgiraudel/)\n\n\n- [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/)\n\n- [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)\n\n- [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)\n\n- [http://tutorialzine.com/2013/10/buttons-built-in-progress-meters/](http://tutorialzine.com/2013/10/buttons-built-in-progress-meters/) by [ Martin Angelov ]\n\n- [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/)\n\n- [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)\n\n- [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)\n\n\n- [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/)\n\n- [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/)\n\n- [https://css-tricks.com/transforms-on-svg-elements/](https://css-tricks.com/transforms-on-svg-elements/)\n\n- [https://css-tricks.com/a-complete-guide-to-svg-fallbacks/](https://css-tricks.com/a-complete-guide-to-svg-fallbacks/)\n\n- [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/)\n\n\n- [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 []\n\n- [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/)\n\n- [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)\n\n- [How Floating Works](http://bitsofco.de/how-floating-works/) by [bitsofco](http://bitsofco.de/)\n\n- [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/)\n\n- [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)\n\n- [Localizing Times in JavaScript](https://css-tricks.com/localizing-times-in-javascript/) by [CHRIS COYIER ](https://css-tricks.com/author/chriscoyier/)\n\n- [Scroll/Follow Sidebar, Multiple Techniques](https://css-tricks.com/scrollfollow-sidebar/) by [CHRIS COYIER ](https://css-tricks.com/author/chriscoyier/)\n\n- [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/)\n\n## Animation\n\n- [Animations: the Angular Way](https://css-tricks.com/animations-the-angular-way/) by  [css-tricks](https://css-tricks.com)\n\n- [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/)\n\n- [CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More](https://css-tricks.com/css-animation-tricks/) by [ Zach Saucier](http://zachsaucier.com/)\n\n## Optimize\n\n- [Best Practices for Speeding Up Your Web Site](https://developer.yahoo.com/performance/rules.html) by [yahoo](developer.yahoo.com)\n\n- [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/)\n\n- [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/)\n\n- [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/)\n\n## SVG\n- [Click SVG Element to Focus (and Style)](https://css-tricks.com/click-svg-to-focus/) by  [css-tricks](https://css-tricks.com)\n\n- [How SVG Line Animation Works](https://css-tricks.com/svg-line-animation-works/) by [Chris Coyier](https://css-tricks.com/author/chriscoyier/)\n\n- [A Guide to SVG Animations (SMIL)](https://css-tricks.com/guide-svg-animations-smil/) by [ Sara Soueidan](http://sarasoueidan.com/)\n\n- [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/)\n\n## Sass\n- [How to structure a Sass project](http://thesassway.com/beginner/how-to-structure-a-sass-project) by [John W. Long](http://wiseheartdesign.com/)\n\n- [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/)\n\n- [The Sass Ampersand](https://css-tricks.com/the-sass-ampersand/) by [Rich Finelli](http://www.richfinelli.com/)\n\n## Flex\n- [`flex-grow` is weird. Or is it?](https://css-tricks.com/flex-grow-is-weird/) by  [css-tricks](https://css-tricks.com)\n\n## Pseudo\n- [Pseudo and pseudon’t](https://adactio.com/journal/10000) by [Adactio](https://adactio.com/)\n\n## React\n- [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/)\n\n## Design Pattern\n- [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)\n\n## Media Query\n- [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)\n\n## Gulp\n- [Advanced Gulp File](http://www.mikestreety.co.uk/blog/an-advanced-gulpjs-file) by [Mike Street](http://www.mikestreety.co.uk/)\n\n## Form\n- [Drag and Drop File Uploading](https://css-tricks.com/drag-and-drop-file-uploading/) by [Osvaldas Valutis](http://osvaldas.info/)\n\n- [Styling \u0026 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/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelkyle%2Farticle","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhelkyle%2Farticle","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhelkyle%2Farticle/lists"}