小编Mar*_*ska的帖子

用CSS3捏缩放

我正在尝试完全像在Google地图中那样实现捏合缩放手势.我观看了Stephen Woods的演讲 - "创建响应式HTML5触摸界面" - 关于这个问题,并使用了上面提到的技术.我们的想法是将目标元素的变换原点设置为(0,0)并在此处进行缩放.然后转换图像使其保持在变换点的中心位置.

在我的测试代码缩放工作正常.图像在后续翻译之间放大和缩小.问题是我没有正确计算翻译价值.我正在使用jQuery和Hammer.js进行触摸事件.如何在变换回调中调整计算,使图像在变换点保持居中?

所述的CoffeeScript(#test-resize是一个div与背景图像)

image = $('#test-resize')

hammer = image.hammer ->
  prevent_default: true
  scale_treshold: 0

width = image.width()
height = image.height()
toX = 0
toY = 0
translateX = 0
translateY = 0
prevScale = 1
scale = 1

hammer.bind 'transformstart', (event) ->

  toX = (event.touches[0].x + event.touches[0].x) / 2
  toY = (event.touches[1].y + event.touches[1].y) / 2

hammer.bind 'transform', (event) ->

  scale = prevScale * event.scale
  shiftX = toX * ((image.width() * …
Run Code Online (Sandbox Code Playgroud)

javascript jquery touch css3 coffeescript

24
推荐指数
2
解决办法
5万
查看次数

打开开发者控制台,从终端打开Chrome

我可以使用命令行运行Google Chrome $ google-chrome,但是我可以通过开放式控制台打开它来打开它,最好打开控制台选项卡?

我检查了google-chrome的手册页,但它说明了这一点

谷歌浏览器有数百个未记录的命令行标志,可以根据开发人员的兴趣添加和删除.

我希望其中一个无证件的旗子做我想要的.

shell terminal console google-chrome command-line-arguments

20
推荐指数
2
解决办法
8794
查看次数

如何使用Webpack代码拆分处理部署?

这是一个意外的问题,我遇到了Webpack代码在野外分裂:想象一下这种情况:

  1. 用户加载带有Webpack代码拆分的React应用程序,并加载一些包块
  2. 发生部署,并且更新用户可能从服务器接收的任何未来块的内容(注意:在部署期间,先前的块在服务器上被删除)
  3. 用户单击链接并加载新路由,以触发更多捆绑块加载.除了这些新的块与用户的浏览器已经加载的那些不兼容,并且应用程序因运行时错误而中断

如何防止这种情况?

一种可能的解决方案是维护多个版本化的块集,但我想知道大型应用程序是否使用了更简单的解决方案.

如果使用了preload-webpack-plugin,则可以预取所有块,但它们只会在短时间内保持缓存(在Chrome中为5分钟).

javascript deployment reactjs webpack code-splitting

19
推荐指数
1
解决办法
750
查看次数

Rails中的竞争条件first_or_create

我正试图在我的一个表字段中强制执行值的唯一性.更改表格不是一种选择.我需要使用ActiveRecord有条件地在表中插入一行,但我担心同步.

first_or_create在Rails ActiveRecord中是否可以防止竞争条件?

这是first_or_create来自GitHub 的源代码:

def first_or_create(attributes = nil, options = {}, &block)
  first || create(attributes, options, &block)
end
Run Code Online (Sandbox Code Playgroud)

由于多个进程的同步问题,重复条目是否可能导致数据库?

activerecord ruby-on-rails ruby-on-rails-3

15
推荐指数
2
解决办法
6080
查看次数

Nginx使用重写反向代理Node.js

我在Nginx反向代理后面运行了几个应用程序,其中一个是带有Express.js的节点服务器.我进行代理domain.com/demo/app/<path>localhost:7003/<path>使用此Nginx的配置:

http {

    ...

    server {

        listen 80;
        server_name domain.com;

        ...

        location /demo/app {

            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Scheme $scheme;

            rewrite ^/demo/app/?(.*) /$1 break;
            proxy_pass http://localhost:7003;
        }

        ...
    }
}
Run Code Online (Sandbox Code Playgroud)

这很有效,并且app接收请求就像它的根源一样/.问题是app处理自己的静态文件,并可能请求路由,如css/app.cssimages/image.jpg.但由于反向代理,这些实际上分别存在于/demo/app/css/app.css/demo/app/images/image.jpg.

我已经通过让Nginx向Node传递一个自定义标头来解决这个问题,该标头指示根路径,节点服务器将其添加到所有后续请求的URL之前.但现在我的代码充满了这些根路径字符串.例如,我的后端模板的一部分:

link(rel='stylesheet', href="#{basePath}/css/base.css")
link(rel='stylesheet', href="#{basePath}/css/skeleton.css")
link(rel='stylesheet', href="#{basePath}/css/layout.css")
Run Code Online (Sandbox Code Playgroud)

处理这个问题的更优雅的方法是什么?难道没有办法让Nginx识别来自上游服务器的请求并自动将它们转发到该服务器吗?

javascript reverse-proxy nginx node.js express

14
推荐指数
1
解决办法
8706
查看次数

Node.js Selenium IPv6问题(SocketException协议系列不可用)

仅当我将ios驱动程序 jar作为Node.js子项生成时才会发生此错误.

错误是 java.net.SocketException: Protocol family unavailable

硒test.js:

var spawn = require('child_process').spawn;

var selenium = spawn('java', ['-jar', './ios-server-standalone-0.6.6-SNAPSHOT.jar', '-port', '4444']);
selenium.stderr.setEncoding('utf8');
selenium.stderr.on('data', function (data){
  console.log(data);
});
Run Code Online (Sandbox Code Playgroud)

webdriverjs-test.js(webdriverjs)

var webdriverjs = require('webdriverjs');
var options = {
    desiredCapabilities: {
        browserName: 'safari',
        platform: 'OS X 10.9',
        version: '7.1',
        device: 'iphone'
    }
};

webdriverjs
  .remote(options)
  .init()
  .end();
Run Code Online (Sandbox Code Playgroud)

通过创建上述文件重现此错误,在一个窗口中运行selenium-test.js,在另一个窗口中运行webdriverjs-test.js.你首先需要npm install webdriverjscurl -O http://ios-driver-ci.ebaystratus.com/userContent/ios-server-standalone-0.6.6-SNAPSHOT.jar

版本信息:

$ java version
java version "1.7.0_51"
Java(TM) SE Runtime Environment (build 1.7.0_51-b13)
Java HotSpot(TM) …
Run Code Online (Sandbox Code Playgroud)

javascript node.js selenium-webdriver

12
推荐指数
1
解决办法
855
查看次数

Ember:关系链接相关数据未加载/消失

我在使用Ember/Ember数据时遇到了一些错误.这是我的情景:

  1. 客户登陆/路线,Ember从中加载数据/api/v1/videos?limit=8.响应来自使用active_model_serializers的rails-api后端,可确保响应符合JSON API.现在商店已经加载了8个任意视频.

  2. DOM中的每个视频组件都有一个指向用户页面的链接(视频belongsTo是用户和用户hasMany视频).

  3. 客户点击link-to导航到/users/1哪个代表ID为1的用户

  4. 该路由的模型挂钩只加载单个用户记录.用户记录具有以下有效负载:

{
    "data": {
        "id": "1",
        "relationships": {
            "videos": {
                "data": [],
                "links": {
                    "related": "/api/v1/videos?user_id=1"
                }
            },
        },
        "type": "users"
    }
}
Run Code Online (Sandbox Code Playgroud)

问题是,ember不会自动发送请求/api/v1/videos?user_id=1(可能是因为类似的请求/api/v1/videos?limit=8已经发生).

如果我直接加载/users/1页面,那么Ember是智能的,并从/api/v1/videos?user_id=1端点自动加载数据.

我怀疑Ember被这样一个事实所迷惑,即对视频端点的类似请求已经发生了不同的查询参数.最终结果是我的应用程序没有在用户页面上显示任何数据.

解决此问题的一种方法是不使用链接/相关语法,而是填充"data": [],视频ID,这将导致ember发送n个视频的n个请求.这适用于大型应用程序,但用户页面可能包含数百个视频.

我怎样才能解决这个问题?

您可以看到,链接/相关结构的active_model_serializers设置应该专门为ember-data定制.


编辑:我试图摆脱data: []使用include_data falseactive_model_serializers没有帮助.


编辑2:这是有效载荷/api/v1/videos?limit=8:

{
    "data": [
        ...
        {
            "attributes": {
                ...
            }, …
Run Code Online (Sandbox Code Playgroud)

ruby-on-rails ember.js ember-data active-model-serializers json-api

10
推荐指数
1
解决办法
509
查看次数

Does link prefetching work across subdomains?

I've been trying to use something like this to get a performance boost when clicking from a simple landing page to a heavyweight single page app:

<link rel="prefetch" href="https://example.com" as="document" />
<link rel="prefetch" href="https://example.com/app.js" as="script" />
<link rel="prefetch" href="https://example.com/app.css" as="style" />
Run Code Online (Sandbox Code Playgroud)

It seems to have no noticeable performance boost when my landing page is on a subdomain. Say, https://subdomain.example.com.

When I click on a link to visit https://example.com, I still see a long delay in the Chrome network …

html link-prefetch

10
推荐指数
1
解决办法
755
查看次数

iOS 自动续订订阅的动态标题/描述

我在其他帖子中读到这是不可能的。然而,不知何故 YouTube 似乎正在这样做 - 您可以在屏幕截图中看到订阅显示名称是“Marques Brownlee”,这是频道/内容创建者的名称。

我想代表应用程序用户以编程方式创建自动更新订阅。

YouTube 是如何动态创建 iOS 订阅组的?

YouTube 频道会员资格

subscription in-app-purchase ios auto-renewable

9
推荐指数
0
解决办法
219
查看次数

JavaScript:Boolean对象可以用作回调函数吗?

我想写array.some(Boolean)一个方法来测试是否有任何元素array是真实的.

Boolean以这种方式使用对象有任何问题吗?它在现代浏览器中是否具有相同的行为?它总是相当于array.some(function(elem) { return !!elem; })

javascript boolean callback ecmascript-6

7
推荐指数
1
解决办法
549
查看次数