推特 搜索 代码_推特代码＃1

推特 搜索 代码

You don't need a thousand lines of code to make a big difference in any coding language.  Oftentimes it's quite the opposite:  a few tiny code snippets can do a world of good and accomplish big things.  I asked my Twitter followers to tweet to me their favorite tiny snippets of code -- that's a bit difference to try to pack into 140 characters!  Here are my favorites from this round!

您不需要一千行代码就可以在任何一种编码语言中产生很大的不同。 通常情况恰恰相反：一些小巧的代码片段可以成就一个美好的世界，并成就大事。 我要求我的Twitter关注者向我发送他们最喜欢的小片段代码-尝试打包成140个字符有点不同！ 这是我这一轮的最爱！

垂直居中元素 (Vertically Centering Elements)

Vertically centering elements is a massive pain, even 20 years into CSS' life. This snippet cures all of those issues:

垂直居中的元素是一个巨大的痛苦，甚至进入CSS生命已经20年了。 此代码段解决了所有这些问题：

@davidwalshblog .children{ top: 50%; transform: translateY(-50%); }. Easiest way to vertically align any object, even unknown heights.

— Brian (@Fi2o)

@davidwalshblog .children {顶部：50％； 转换：translateY(-50％); }。 垂直对齐任何对象(甚至是未知高度)的最简单方法。

— Brian(@ Fi2o) January 7, 2014 2014年1月7日

border-box所有内容！ (border-box All the Things!)

I've seen a lot of people mention applying this CSS globally. I've not done so but it's worth checking out.

我见过很多人提到在全球范围内应用此CSS。 我还没有这样做，但是值得一试。

@davidwalshblog * { Box-sizing: Border-box }

— EricAnton (@EricAnton)

@davidwalshblog * {框大小：边框}

— EricAnton(@EricAnton) January 7, 2014 2014年1月7日

查看所有全局变量和对象属性 (View All Global Variables and Object Properties)

I love this for (manually) checking for leaked global variables. Can also be used on other objects to get properties and methods.

我喜欢(手动)检查泄漏的全局变量。 也可以在其他对象上使用以获取属性和方法。

@davidwalshblog View all global variables: Object.keys(window)

— Nils Ekman (@nekman)

@davidwalshblog查看所有全局变量：Object.keys(窗口)

— Nils Ekman(@nekman) January 7, 2014 2014年1月7日

定位Chrome (Targeting Chrome)

Targeting Chrome on mobile done with just CSS? Nice!

仅使用CSS定位移动设备上的Chrome？ 真好！

@davidwalshblog /* target Chrome */ [at]media screen and (-webkit-min-device-pixel-ratio:0) { ... } for cross-browser compatibility fun

— Carly Willats (@carlyweb)

@davidwalshblog / *目标Chrome * / [位于]媒体屏幕和(-webkit-min-device-pixel-ratio：0){...}可实现跨浏览器兼容性

— Carly Willats(@carlyweb) January 7, 2014 2014年1月7日

查看对象的当前状态 (Viewing the Current State of an Object)

Using console.log on objects which may change will throw you off. This snippet prints out the object and its values at the immediate state:

在可能更改的对象上使用console.log会使您失望。 此代码段在即时状态下打印出对象及其值：

@davidwalshblog console.logNow = function(o){console.log(JSON.parse(JSON.stringify(o)));}; for logging those objects that might change.

— Alexis Martin (@AlexisYj)

@davidwalshblog console.logNow = function(o){console.log(JSON.parse(JSON.stringify(o)));}; 用于记录可能更改的对象。

— Alexis Martin(@AlexisYj) January 7, 2014 2014年1月7日

模拟console.dir (Emulate console.dir)

If a given browser doesn't support console.dir, you can use this code snippet:

如果给定的浏览器不支持console.dir ，则可以使用以下代码段：

@davidwalshblog @fwenzel var pp = function(o) { return JSON.stringify(o, null, ' '); }; // ( if console.dir doesn't exist in your browser )

— Jeff the Elder (@canuckistani)

@davidwalshblog @fwenzel var pp = function(o){return JSON.stringify(o，null，''); }; //(如果浏览器中不存在console.dir)

—年长的杰夫(@canuckistani) January 7, 2014 2014年1月7日

防止IE楼梯步进 (Prevent IE Stair Stepping)

Internet Explorer's "stair stepping" effect -- we've all been there, we haven't always had a fix.

Internet Explorer的“阶梯式”效果-我们都曾参加过会议，但并非总是可以解决。

@davidwalshblog transform: scale3d(1.2, 1.2, 1) rotate(0.01deg); - rotate bit is for stair-stepping scale issues in IE

— Travis Almand (@TravisAlmand)

@davidwalshblog变换：scale3d(1.2，1.2，1)旋转(0.01deg); -旋转位用于IE中的阶梯式比例尺问题

—特拉维斯·阿尔曼(@TravisAlmand) January 8, 2014 2014年1月8日

This is just the first TFC -- I'll be running these periodically over the year.  Great work to those who tweeted this round and I hope to get the same massive response next time!

这只是第一个TFC，我将在一年中定期运行这些TFC。 对于在本轮发推文的人来说真是太好了，我希望下次能得到同样的好评！

翻译自: https://davidwalsh.name/code-tweets-1

推特 搜索 代码