问:
"Unable to merge dex" when using room
I'm trying to add a "room" to my project.

When I try to build a project, I get an error:

Error:Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
   java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex

What I have already done:

Clean/Rebuild project

I added "multiDexEnabled true" in defaultConfig{}. Then I get the error:

Error:Execution failed for task ':app:transformClassesWithMultidexlistForDebug'.
  java.io.IOException: Can't write [C:\Users\user1\AndroidStudioProjects\git\mobile\app\build\intermediates\multi-dex\debug\componentClasses.jar]
  (Can't read [C:\Users\user1.gradle\caches\transforms-1\files-1.1\support-core-utils-26.1.0.aar\a6c34f6784b0b6bc5c2fc7a7815426da\jars\classes.jar(;;;;;;**.class)] (Duplicate zip entry [classes.jar:android/support/v4/content/PermissionChecker$PermissionResult.class]))

If I remove the "room" from my project, it is build without errors.

I'm using Android Studio 3, gradle build tools 3.0.0.

This is my build.gradle:

```<code>apply plugin: 'com.android.application'
apply plugin: 'me.tatarka.retrolambda'

buildscript {
   repositories {
       mavenCentral()
   }

   dependencies {
       classpath 'me.tatarka:gradle-retrolambda:3.2.5'
   }
}

repositories {
    mavenCentral()
}

android {
   compileSdkVersion 23
   buildToolsVersion '26.0.2'

   defaultConfig {
        applicationId "trsnet.gtp2.com"
        minSdkVersion 17
        targetSdkVersion 23
        multiDexEnabled true
   }

   buildTypes {
       release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'),
                'proguard-rules.txt'
       }
   }

   compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }

}

dependencies {

    compile files('libs/commons-codec-1.9.jar')
    compile files('libs/ksoap2-android-assembly-3.0.0-jar-with-
    dependencies.jar')
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:cardview-v7:23.2.1'
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:23.2.1'
    compile 'com.android.support.constraint:constraint-layout:+'
    compile 'io.reactivex:rxandroid:1.2.1'
    compile 'io.reactivex:rxjava:1.1.6'
    compile 'com.jakewharton.rxbinding:rxbinding:0.4.0'
    implementation 'android.arch.persistence.room:runtime:1.0.0'
    annotationProcessor 'android.arch.persistence.room:compiler:1.0.0'
}
</code>```

答:
I was having this problem too and it took me quite a while to solve, but I finally got it. ROOM uses some of the support-v4 libraries so this is why you are getting the error that there are duplicate zip entries. In my situation, ROOM is using components from an earlier version than what I needed. So what worked for me (found here) is adding the following to the root level of the Gradle file:

```<code>configurations {
    all*.exclude group: 'com.android.support', module: 'support-v4'
}
</code>```

What I found this does is it prevents libraries from including any support-v4 components, but then you have to manually include the necessary components for both ROOM and anything else you might need. If you need to find out exactly which libraries are duplicates then you can follow these instructions to look into each library and it's dependencies.

Slightly unrelated note: As of Gradle 3.0 using the compile configuration is deprecated and should be replace with implementation or api, a nice explanation can be found here.

Title: "Unable to merge dex" when using room

Body:
I'm trying to add a "room" to my project.

When I try to build a project, I get an error:

Error:Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
   java.lang.RuntimeException: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex

What I have already done:

Clean/Rebuild project

I added "multiDexEnabled true" in defaultConfig{}. Then I get the error:

Error:Execution failed for task ':app:transformClassesWithMultidexlistForDebug'.
  java.io.IOException: Can't write [C:\Users\user1\AndroidStudioProjects\git\mobile\app\build\intermediates\multi-dex\debug\componentClasses.jar]
  (Can't read [C:\Users\user1.gradle\caches\transforms-1\files-1.1\support-core-utils-26.1.0.aar\a6c34f6784b0b6bc5c2fc7a7815426da\jars\classes.jar(;;;;;;**.class)] (Duplicate zip entry [classes.jar:android/support/v4/content/PermissionChecker$PermissionResult.class]))

If I remove the "room" from my project, it is build without errors.

I'm using Android Studio 3, gradle build tools 3.0.0.

This is my build.gradle:

apply plugin: 'com.android.application'
apply plugin: 'me.tatarka.retrolambda'

buildscript {
   repositories {
       mavenCentral()
   }

   dependencies {
       classpath 'me.tatarka:gradle-retrolambda:3.2.5'
   }
}

repositories {
    mavenCentral()
}

android {
   compileSdkVersion 23
   buildToolsVersion '26.0.2'

   defaultConfig {
        applicationId "trsnet.gtp2.com"
        minSdkVersion 17
        targetSdkVersion 23
        multiDexEnabled true
   }

   buildTypes {
       release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'),
                'proguard-rules.txt'
       }
   }

   compileOptions {
       sourceCompatibility JavaVersion.VERSION_1_8
       targetCompatibility JavaVersion.VERSION_1_8
   }

}

dependencies {

    compile files('libs/commons-codec-1.9.jar')
    compile files('libs/ksoap2-android-assembly-3.0.0-jar-with-
    dependencies.jar')
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile 'com.android.support:cardview-v7:23.2.1'
    compile 'com.android.support:appcompat-v7:23.2.1'
    compile 'com.android.support:design:23.2.1'
    compile 'com.android.support.constraint:constraint-layout:+'
    compile 'io.reactivex:rxandroid:1.2.1'
    compile 'io.reactivex:rxjava:1.1.6'
    compile 'com.jakewharton.rxbinding:rxbinding:0.4.0'
    implementation 'android.arch.persistence.room:runtime:1.0.0'
    annotationProcessor 'android.arch.persistence.room:compiler:1.0.0'
}

Body:
I was having this problem too and it took me quite a while to solve, but I finally got it. ROOM uses some of the support-v4 libraries so this is why you are getting the error that there are duplicate zip entries. In my situation, ROOM is using components from an earlier version than what I needed. So what worked for me (found here) is adding the following to the root level of the Gradle file:

configurations {
    all*.exclude group: 'com.android.support', module: 'support-v4'
}

What I found this does is it prevents libraries from including any support-v4 components, but then you have to manually include the necessary components for both ROOM and anything else you might need. If you need to find out exactly which libraries are duplicates then you can follow these instructions to look into each library and it's dependencies.

Slightly unrelated note: As of Gradle 3.0 using the compile configuration is deprecated and should be replace with implementation or api, a nice explanation can be found here.


来源: stackexchange

问:
How can I convert from Expression<Func<TSource, TSourceMember>> to Func<TSource, bool> condition
I am trying to convert from

```<code>x => x.SomeProperty
</code>```

to

```<code>x => x.SomeProperty is ISomeInterface
</code>```

In a method that fits the following signature:

```<code>Func<TSource, bool> Convert(Expression<Func<TSource, TSourceMember>> source);
</code>```

Where SomeProperty might be a collection or a single object. Can anyone help?

I'm finding it difficult to work out what kind of expressions these are. I think that the first one is a MemberExpression and the second is a UnaryExpression.

I'd be happy to move the

```<code>x.SomeProperty is ISomeInterface
</code>```

logic into a method if that would make things easier.

```<code>bool IsSomeInterface(object obj)
{
  return obj is ISomeInterface;
}
</code>```

Any pointers or tutorials on how to put this stuff together would be appreciated. I always seem to struggle with Expression trees.

答:
You might be looking for Expression.TypeIs(...). Try this:

```<code>    Func<TSource, bool> Convert<TSource, TSourceMember>(Expression<Func<TSource, TSourceMember>> source)
    {
        return (Func<TSource, bool>)(Expression.Lambda<Func<TSource, bool>>(Expression.TypeIs(source.Body, typeof(ISomeInterface)), source.Parameters).Compile());
    }
</code>```

ContentLicense: CC BY-SA 3.0

Body:
I am trying to convert from

x => x.SomeProperty

to

x => x.SomeProperty is ISomeInterface

In a method that fits the following signature:

Func<TSource, bool> Convert(Expression<Func<TSource, TSourceMember>> source);

Where SomeProperty might be a collection or a single object. Can anyone help?

I'm finding it difficult to work out what kind of expressions these are. I think that the first one is a MemberExpression and the second is a UnaryExpression.

I'd be happy to move the

x.SomeProperty is ISomeInterface

logic into a method if that would make things easier.

bool IsSomeInterface(object obj)
{
  return obj is ISomeInterface;
}

Any pointers or tutorials on how to put this stuff together would be appreciated. I always seem to struggle with Expression trees.

Body:
You might be looking for Expression.TypeIs(...). Try this:

    Func<TSource, bool> Convert<TSource, TSourceMember>(Expression<Func<TSource, TSourceMember>> source)
    {
        return (Func<TSource, bool>)(Expression.Lambda<Func<TSource, bool>>(Expression.TypeIs(source.Body, typeof(ISomeInterface)), source.Parameters).Compile());
    }


问:
.map() is not a function Error on Mapping Dynamically created Object
I am trying to map a dynamically created Object to an Array like this

```<code>          params.junctionBarriers = dojo.toJson(junctionBarriers);
          // printing the object in the console (Please look at attached image)
          console.log(params.junctionBarriers);

          var value = [];
          var data = params.junctionBarriers.map(function (s) {
             value.push(webMercatorUtils.xyToLngLat(s.x, s.y, true));
              return s;
          })
</code>```

but I am getting this error

params.junctionBarriers.map is not a function

As you can see from the image the params.junctionBarriers is dynamically loaded but the .map() is not valid. Why is this, and how I can fix it?

答:
Do not check arrays with a console.log() you have a method called Array.isArray(myArray) that returns true or false depending if your variable is an array or not.

Actually your converting your junctionBarriers into an String so params.junctionBarriers is a String and you can't do a .map() to a String.

Try to look always in the documentation:

dojo.toJson()

Array.isArray()

ContentLicense: CC BY-SA 4.0

Body:
I am trying to map a dynamically created Object to an Array like this

          params.junctionBarriers = dojo.toJson(junctionBarriers);
          // printing the object in the console (Please look at attached image)
          console.log(params.junctionBarriers);

          var value = [];
          var data = params.junctionBarriers.map(function (s) {
             value.push(webMercatorUtils.xyToLngLat(s.x, s.y, true));
              return s;
          })

but I am getting this error

params.junctionBarriers.map is not a function

As you can see from the image the params.junctionBarriers is dynamically loaded but the .map() is not valid. Why is this, and how I can fix it?


问:
Why i couldn't append a child node to the document object model directly?
While studying the Document object model today, I faced a problem of appending a newly created child on the document object directly,
here is my code :

```<code>var newEl=document.createElement("textarea");
document.appendChild(newEl);
</code>```

the resulted error is :

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

I know the solution is to either append it to document.body or document.documentElement , but I didn't find a reference pointing that the mentioned way is not correct for a specific reason.

accept my apologies for being a beginner.

答:
This may be what you're looking for if what you want to do is understand the spec and constraints surrounding the different items in the Node Tree. Basically, the Document can have only 1 type (HTML or XML) and 1 element/child (e.g ) and the element ( tag) can have multiple children (, , etc..), attributes, etc.. So the element () and its children can be appended to, but the document itself cannot.

Hope that helps.

Body:
While studying the Document object model today, I faced a problem of appending a newly created child on the document object directly,
here is my code :

var newEl=document.createElement("textarea");
document.appendChild(newEl);

the resulted error is :

Uncaught DOMException: Failed to execute 'appendChild' on 'Node': Only one element on document allowed.

I know the solution is to either append it to document.body or document.documentElement , but I didn't find a reference pointing that the mentioned way is not correct for a specific reason.

accept my apologies for being a beginner.

Body:
This may be what you're looking for if what you want to do is understand the spec and constraints surrounding the different items in the Node Tree. Basically, the Document can have only 1 type (HTML or XML) and 1 element/child (e.g <html>) and the element (<html> tag) can have multiple children (<body>, <head>, etc..), attributes, etc.. So the element (<html>) and its children can be appended to, but the document itself cannot.

Hope that helps.


问:
How to use an object of type class from an generic class as a parameter? - generics and reflection combined
I have two classes:

```<code>public abstract class MyAbstractSuperClass<A, B> {

    public MyAbstractSuperClass(Class<A> a, Class<B> b) {
        ...
    }

    ...
}

public class MyClass<A> extends MyAbstractSuperClass<A, MyOtherClass<A>> {

    public MyClass(Class<A> a) {
    super(a, MyOtherClass.class));
            ...
    }

    ...
}
</code>```

Now you see, the subclass has to call the superclass's constructor. At that line I get the following error:

```<code>The constructor MySuperClass<A, MyOtherClass<A>>(Class<A>, Class<MyOtherClass>) is undefined
</code>```

So how do I get an object of type Class<MyOtherClass>?

And how do I do it in the super constructor call, where I can't execute much?

Thanks in advance.

答:
The constructor is expecting a Class<MyOtherClass>, not a Class<MyOtherClass>.  The only way I can think to satisfy the compiler is through an ugly series of casts:

```<code>@SuppressWarnings("unchecked")
public MyClass(Class<A> a) {
   super(a, (Class<MyOtherClass<A>>)(Class<?>)MyOtherClass.class);
}
</code>```

It is type safe as seen through inspection, since the class literal for the raw type MyOtherClass is the same as for the parameterized MyOtherClass.  But that doesn't stop an unchecked warning from being generated, which can be suppressed as above, or simply ignored.

ContentLicense: CC BY-SA 2.5

Body:
I have two classes:

public abstract class MyAbstractSuperClass {

    public MyAbstractSuperClass(Class a, Class b) {
        ...
    }

    ...
}

public class MyClass extends MyAbstractSuperClass<A, MyOtherClass> {

    public MyClass(Class a) {
    super(a, MyOtherClass.class));
            ...
    }

    ...
}

Now you see, the subclass has to call the superclass's constructor. At that line I get the following error:

The constructor MySuperClass<A, MyOtherClass>(Class, Class<MyOtherClass>) is undefined

So how do I get an object of type Class<MyOtherClass>?

And how do I do it in the super constructor call, where I can't execute much?

Thanks in advance.

Body:
The constructor is expecting a Class<MyOtherClass<A>>, not a Class<MyOtherClass>.  The only way I can think to satisfy the compiler is through an ugly series of casts:

@SuppressWarnings("unchecked")
public MyClass(Class<A> a) {
   super(a, (Class<MyOtherClass<A>>)(Class<?>)MyOtherClass.class);
}

It is type safe as seen through inspection, since the class literal for the raw type MyOtherClass is the same as for the parameterized MyOtherClass<A>.  But that doesn't stop an unchecked warning from being generated, which can be suppressed as above, or simply ignored.


问:
on_delete error for Django
I'm currently doing some projects from a book called Python Crash Course by Eric Matthes. Currently, I'm doing lab 19.1 where I have to use previous code to make a Django project while changing some of his own code but ran into a problem.
Every time I want to run this command

```<code>>>>python manage.py makemigration blogs
</code>```

in return, I get this code

TypeError: init() missing 1 required positional argument:
  'on_delete'

His original models.py code:

```<code>from django.db import models

class Topic(models.Model):
    """A topic the user is learning about."""
    text = models.CharField(max_length=200)
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        """Return a string representation of the model."""
        return self.text

class Entry(models.Model):
    """Something specific learned about a topic."""
    topic = models.ForeignKey(Topic)
    text = models.TextField()
    date_added = models.DateTimeField(auto_now_add=True)

    class Meta:
        verbose_name_plural = 'entries'

    def __str__(self):
        """Return a string representation of the model."""
        return self.text[:50] + "..."
</code>```

and my current code:

```<code>from django.db import models

# Create your models here.

class BlogPost(models.Model):
    title = models.CharField(max_length=200)
    text = models.CharField(max_length=200)
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        """Return a string representation of the model."""
        return self.text

class Post(models.Model):
    """SThe post"""
    topic = models.ForeignKey(BlogPost)
    text = models.TextField()
    date_added = models.DateTimeField(auto_now_add=True)

    class Meta:
        verbose_name_plural = 'posts'

    def __str__(self):
        if len(self.text) >= 50:
            """Return a string represerntation of the model"""
            return self.text[:50] + "..."
        else:
            return self.text
</code>```

I honestly do not know why I'm getting this error code I've check to see if I messed something up but I cannot find anything. Is there anyone that may know?

答:
Since Django 2.x, on_delete is required. This is from the Django 2.0 relase notes:

The on_delete argument for ForeignKey and OneToOneField is now
  required in models and migrations. Consider squashing migrations so
  that you have fewer of them to update.

Therefore, the error comes from this line:

```<code>topic = models.ForeignKey(BlogPost)
</code>```

You're creating a Foreign key relationship without providing the on_delete property. So, follow the link and pick the one that suits your needs.

Title: on_delete error for Django

Body:
I'm currently doing some projects from a book called Python Crash Course by Eric Matthes. Currently, I'm doing lab 19.1 where I have to use previous code to make a Django project while changing some of his own code but ran into a problem.
Every time I want to run this command

>>>python manage.py makemigration blogs

in return, I get this code

TypeError: init() missing 1 required positional argument:
  'on_delete'

His original models.py code:

from django.db import models

class Topic(models.Model):
    """A topic the user is learning about."""
    text = models.CharField(max_length=200)
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        """Return a string representation of the model."""
        return self.text

class Entry(models.Model):
    """Something specific learned about a topic."""
    topic = models.ForeignKey(Topic)
    text = models.TextField()
    date_added = models.DateTimeField(auto_now_add=True)

    class Meta:
        verbose_name_plural = 'entries'

    def __str__(self):
        """Return a string representation of the model."""
        return self.text[:50] + "..."

and my current code:

from django.db import models

# Create your models here.

class BlogPost(models.Model):
    title = models.CharField(max_length=200)
    text = models.CharField(max_length=200)
    date_added = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        """Return a string representation of the model."""
        return self.text

class Post(models.Model):
    """SThe post"""
    topic = models.ForeignKey(BlogPost)
    text = models.TextField()
    date_added = models.DateTimeField(auto_now_add=True)

    class Meta:
        verbose_name_plural = 'posts'

    def __str__(self):
        if len(self.text) >= 50:
            """Return a string represerntation of the model"""
            return self.text[:50] + "..."
        else:
            return self.text

I honestly do not know why I'm getting this error code I've check to see if I messed something up but I cannot find anything. Is there anyone that may know?

Body:
Since Django 2.x, on_delete is required. This is from the Django 2.0 relase notes:

The on_delete argument for ForeignKey and OneToOneField is now
  required in models and migrations. Consider squashing migrations so
  that you have fewer of them to update.

Therefore, the error comes from this line:

topic = models.ForeignKey(BlogPost)

You're creating a Foreign key relationship without providing the on_delete property. So, follow the link and pick the one that suits your needs.


问:
Invalid Toolchain. Itunes store operation failed
As soon as I updated xcode to 9.2 , I cannot validate my archived builds. I get this error message every time:

Invalid Toolchain. New apps and app updates must be built with the public (GM) versions of Xcode 6 or later, macOS, and iOS SDK or later. Don't submit apps built with beta software including beta macOS builds.

Is this something wrong with Apple's new relase of xcode? Otherwise, I didn't change anything that would make this project using "Beta software".

答:
Download Xcode 9.1 from https://developer.apple.com/download/more/

After extracting the .xip, rename it as Xcode-9.1.app (or whatever you want), then drag it into your Applications folder. Xcode.app and Xcode-9.1.app can co-exist in the same folder, and can both run at the same time if you want.

Build your app with Xcode 9.1 and continue to do regular development with Xcode 9.2. At some point, iTunesConnect will start accepting builds made with Xcode 9.2, at which time you can delete Xcode-9.1.app.


问:
Twitter-style time-ago formatting ("2h") with Javascript
Timeago.js does a great job of formatting time stamps relative to the current time ("about 2 hours ago").

Are there any solutions that accomplish the same thing, but abbreviated? IE "2h", like Twitter uses.

答:
You can use Timeago.js and overwrite the local time formatting with the abbreviated version, e.g.</p>

```<code>var locale = function(number, index, total_sec) {
  return [
    ['just now', 'right now'],
    ['%s s ago', 'in %s s'],
    ['1 m ago', 'in 1 m'],
    ['%s m ago', 'in %s m'],
    ['1 h ago', 'in 1 h'],
    ['%s h ago', 'in %s h'],
    ....
  ][index];
};

timeago.register('pt_ABBR', locale);
var timeagoInstance = timeago();

// then you can use it
timeagoInstance.format(1473245023718, 'pt_ABBR');
</code>```

Body:
You can use Timeago.js and overwrite the local time formatting with the abbreviated version, e.g.

var locale = function(number, index, total_sec) {
  return [
    ['just now', 'right now'],
    ['%s s ago', 'in %s s'],
    ['1 m ago', 'in 1 m'],
    ['%s m ago', 'in %s m'],
    ['1 h ago', 'in 1 h'],
    ['%s h ago', 'in %s h'],
    ....
  ][index];
};

timeago.register('pt_ABBR', locale);
var timeagoInstance = timeago();

// then you can use it
timeagoInstance.format(1473245023718, 'pt_ABBR');


问:
Why is it legal to borrow a temporary?
Coming from C++, I'm rather surprised that this code is valid in Rust:

```<code>let x = &mut String::new();
x.push_str("Hello!");
</code>```

In C++, you can't take the address of a temporary, and a temporary won't outlive the expression it appears in.

How long does the temporary live in Rust?  And since x is only a borrow, who is the owner of the string?

答:
Why is it legal to borrow a temporary?

It's legal for the same reason it's illegal in C++ — because someone said that's how it should be.

How long does the temporary live in Rust? And since x is only a borrow, who is the owner of the string?

The reference says:

the temporary scope of an expression is the
smallest scope that contains the expression and is for one of the following:

The entire function body.

A statement.

The body of a if, while or loop expression.

The else block of an if expression.

The condition expression of an if or while expression, or a match
guard.

The expression for a match arm.

The second operand of a lazy boolean expression.

Essentially, you can treat your code as:

let mut a_variable_you_cant_see = String::new();
let x = &mut a_variable_you_cant_see;
x.push_str("Hello!");
```

See also:

Why can I return a reference to a local literal but not a variable?

What is the scope of unnamed values?

Are raw pointers to temporaries ok in Rust?

Title: Why is it legal to borrow a temporary?

Body:
Coming from C++, I'm rather surprised that this code is valid in Rust:

let x = &mut String::new();
x.push_str("Hello!");

In C++, you can't take the address of a temporary, and a temporary won't outlive the expression it appears in.

How long does the temporary live in Rust?  And since x is only a borrow, who is the owner of the string?

Body:
Why is it legal to borrow a temporary?

It's legal for the same reason it's illegal in C++ — because someone said that's how it should be.

How long does the temporary live in Rust? And since x is only a borrow, who is the owner of the string?

The reference says:

the temporary scope of an expression is the
smallest scope that contains the expression and is for one of the following:

The entire function body.

A statement.

The body of a if, while or loop expression.

The else block of an if expression.

The condition expression of an if or while expression, or a match
guard.

The expression for a match arm.

The second operand of a lazy boolean expression.

Essentially, you can treat your code as:

let mut a_variable_you_cant_see = String::new();
let x = &mut a_variable_you_cant_see;
x.push_str("Hello!");

See also:

Why can I return a reference to a local literal but not a variable?

What is the scope of unnamed values?

Are raw pointers to temporaries ok in Rust?


问:
Angular 5 Runtime compiler is not loaded
I am compiling my angular project using

```<code>ng build --prod
</code>```

But I get

```<code>main.bundle.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded
</code>```

I can't figured out what to do.
This is my package.json

```<code>{
  "name": "gestionerADJ",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^4.0.0-beta.2",
    "core-js": "^2.4.1",
    "ngx-bootstrap": "^2.0.0-beta.8",
    "rxjs": "5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}
</code>```

I have seen some other questions about this error but none of them is helping me.. Thank you to any of you that are going to help me!

答:
If you have any modules inside your project you're not lazy-loading, you might want to switch to lazy-loading:

```<code>export const routes: Routes = [
    {
        path: '',
        component: myComponent,
        children: [
            {
                path: '',
                loadChildren: myModule
            }
        ]
    }
];
</code>```

Replace loadChildren: myModule with loadChildren: '../../test.module#myModule', using the appropriate path for your project.

Body:
I am compiling my angular project using

ng build --prod

But I get

main.bundle.js:1 ERROR Error: Uncaught (in promise): Error: Runtime compiler is not loaded

I can't figured out what to do.
This is my package.json

{
  "name": "gestionerADJ",
  "version": "0.0.1",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.0.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "bootstrap": "^4.0.0-beta.2",
    "core-js": "^2.4.1",
    "ngx-bootstrap": "^2.0.0-beta.8",
    "rxjs": "5.5.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "^1.5.5",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/language-service": "^5.0.0",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.4.2"
  }
}

I have seen some other questions about this error but none of them is helping me.. Thank you to any of you that are going to help me!

Body:
If you have any modules inside your project you're not lazy-loading, you might want to switch to lazy-loading:

export const routes: Routes = [
    {
        path: '',
        component: myComponent,
        children: [
            {
                path: '',
                loadChildren: myModule
            }
        ]
    }
];

Replace loadChildren: myModule with loadChildren: '../../test.module#myModule', using the appropriate path for your project.


问:
How to access request body when using Django Rest Framework and avoid getting RawPostDataException
I need to get the raw content of POST request body (as a string) yet when I try to access request.body I'm getting an exception:

```<code>django.http.request.RawPostDataException:
You cannot access body after reading from request's data stream
</code>```

I am aware that it is adviced to use request.data instead of request.body when using Django Rest Framework, yet for the purpose of validating digital signature I have to have the request body in a raw and "untouched" form, since this is what 3rd-party signed and what I need to validate.

Pseudocode:

```<code>3rd_party_sign(json_data + secret_key) != validate_sign(json.dumps(request.data) + secret_key)

3rd_party_sign(json_data + secret_key) == validate_sign(request.body + secret_key)
</code>```

答:
I have found interesting topic on DRFs GitHub, but it does not fully cover the problem. I have investigated the case and came up with a neat solution. Surprisingly there was no such question on SO, so I decided to add it for public following the SO self-answer guidelines.

The key for understanding the problem and solution is how the HttpRequest.body (source) works:

```<code>@property
def body(self):
    if not hasattr(self, '_body'):
        if self._read_started:
            raise RawPostDataException("You cannot access body after reading from request's data stream")
        # (...)
        try:
            self._body = self.read()
        except IOError as e:
            raise UnreadablePostError(*e.args) from e
        self._stream = BytesIO(self._body)
    return self._body
</code>```

When accessing body - if the self._body is already set its simply  returned, otherwise the internal request stream is being read and assigned to _body: self._body = self.read(). Since then any further access to body falls back to return self._body. In addition before reading the internal request stream there is a if self._read_started check which raises an exception if "read has started".

The self._read_started flague is being set by the read() method (source):

```<code>def read(self, *args, **kwargs):
    self._read_started = True
    try:
        return self._stream.read(*args, **kwargs)
    except IOError as e:
        six.reraise(UnreadablePostError, ...)
</code>```

Now it should be clear that the RawPostDataException will be raised after accessing the request.body if only the read() method has been called without assigning its result to requests self._body.

Now lets have a look at DRF JSONParser class (source):

```<code>class JSONParser(BaseParser):
    media_type = 'application/json'
    renderer_class = renderers.JSONRenderer

    def parse(self, stream, media_type=None, parser_context=None):
        parser_context = parser_context or {}
        encoding = parser_context.get('encoding', settings.DEFAULT_CHARSET)
        try:
            data = stream.read().decode(encoding)
            return json.loads(data)
        except ValueError as exc:
            raise ParseError('JSON parse error - %s' % six.text_type(exc))
</code>```

(I have chosen slightly older version o DRF source, cause after May 2017 there have been some performance improvements that obscure the key line for understanding our problem)

Now it should be clear that the stream.read() call sets the _read_started flague and therefore it is impossible for the body property to access the stream once again (after the parser).

The solution

The "no request.body" approach is a DRF intention (I guess) so despite it is technically possible to enable access to request.body globally (via custom middleware) - it should NOT be done without deep understanding of all its consequences.

The access to the request.body property may be explicitly and locally granted in the following manner:

You need to define custom parser:

```<code>import json
from django.conf import settings
from rest_framework.exceptions import ParseError
from rest_framework import renderers
from rest_framework.parsers import BaseParser

class MyJSONParser(BaseParser):
    media_type = 'application/json'
    renderer_class = renderers.JSONRenderer

    def parse(self, stream, media_type=None, parser_context=None):
        parser_context = parser_context or {}
        encoding = parser_context.get('encoding', settings.DEFAULT_CHARSET)
        request = parser_context.get('request')
        try:
            data = stream.read().decode(encoding)
            setattr(request, 'raw_body', data) # setting a 'body' alike custom attr with raw POST content
            return json.loads(data)
        except ValueError as exc:
            raise ParseError('JSON parse error - %s' % six.text_type(exc))
</code>```

Then it can be used when it is necessary to access raw request content:

```<code>@api_view(['POST'])
@parser_classes((MyJSONParser,))
def example_view(request, format=None):
    return Response({'received data': request.raw_body})
</code>```

While request.body still remains globally inaccessible (as DRF authors intended).

Body:
I need to get the raw content of POST request body (as a string) yet when I try to access request.body I'm getting an exception:

django.http.request.RawPostDataException:
You cannot access body after reading from request's data stream

I am aware that it is adviced to use request.data instead of request.body when using Django Rest Framework, yet for the purpose of validating digital signature I have to have the request body in a raw and "untouched" form, since this is what 3rd-party signed and what I need to validate.

Pseudocode:

3rd_party_sign(json_data + secret_key) != validate_sign(json.dumps(request.data) + secret_key)

3rd_party_sign(json_data + secret_key) == validate_sign(request.body + secret_key)

Body:
I have found interesting topic on DRFs GitHub, but it does not fully cover the problem. I have investigated the case and came up with a neat solution. Surprisingly there was no such question on SO, so I decided to add it for public following the SO self-answer guidelines.

The key for understanding the problem and solution is how the HttpRequest.body (source) works:

@property
def body(self):
    if not hasattr(self, '_body'):
        if self._read_started:
            raise RawPostDataException("You cannot access body after reading from request's data stream")
        # (...)
        try:
            self._body = self.read()
        except IOError as e:
            raise UnreadablePostError(*e.args) from e
        self._stream = BytesIO(self._body)
    return self._body

When accessing body - if the self._body is already set its simply  returned, otherwise the internal request stream is being read and assigned to _body: self._body = self.read(). Since then any further access to body falls back to return self._body. In addition before reading the internal request stream there is a if self._read_started check which raises an exception if "read has started".

The self._read_started flague is being set by the read() method (source):

def read(self, *args, **kwargs):
    self._read_started = True
    try:
        return self._stream.read(*args, **kwargs)
    except IOError as e:
        six.reraise(UnreadablePostError, ...)

Now it should be clear that the RawPostDataException will be raised after accessing the request.body if only the read() method has been called without assigning its result to requests self._body.

Now lets have a look at DRF JSONParser class (source):

class JSONParser(BaseParser):
    media_type = 'application/json'
    renderer_class = renderers.JSONRenderer

    def parse(self, stream, media_type=None, parser_context=None):
        parser_context = parser_context or {}
        encoding = parser_context.get('encoding', settings.DEFAULT_CHARSET)
        try:
            data = stream.read().decode(encoding)
            return json.loads(data)
        except ValueError as exc:
            raise ParseError('JSON parse error - %s' % six.text_type(exc))

(I have chosen slightly older version o DRF source, cause after May 2017 there have been some performance improvements that obscure the key line for understanding our problem)

Now it should be clear that the stream.read() call sets the _read_started flague and therefore it is impossible for the body property to access the stream once again (after the parser).

The solution

The "no request.body" approach is a DRF intention (I guess) so despite it is technically possible to enable access to request.body globally (via custom middleware) - it should NOT be done without deep understanding of all its consequences.

The access to the request.body property may be explicitly and locally granted in the following manner:

You need to define custom parser:

import json
from django.conf import settings
from rest_framework.exceptions import ParseError
from rest_framework import renderers
from rest_framework.parsers import BaseParser

class MyJSONParser(BaseParser):
    media_type = 'application/json'
    renderer_class = renderers.JSONRenderer

    def parse(self, stream, media_type=None, parser_context=None):
        parser_context = parser_context or {}
        encoding = parser_context.get('encoding', settings.DEFAULT_CHARSET)
        request = parser_context.get('request')
        try:
            data = stream.read().decode(encoding)
            setattr(request, 'raw_body', data) # setting a 'body' alike custom attr with raw POST content
            return json.loads(data)
        except ValueError as exc:
            raise ParseError('JSON parse error - %s' % six.text_type(exc))

Then it can be used when it is necessary to access raw request content:

@api_view(['POST'])
@parser_classes((MyJSONParser,))
def example_view(request, format=None):
    return Response({'received data': request.raw_body})

While request.body still remains globally inaccessible (as DRF authors intended).


问:
Identifying DDD Bounded Contexts and Structuring Project
I'm trying to get my head around Domain Driven Design and the examples I've seen seem to make sense but I am still unsure of how to apply them to my specific situation.

I am designing a CMS where a user can post/edit an article. These can then be viewed by other users who can also make comments, add tags etc. The question I have is, What are the bounded contexts in this situation. You can view users as either "Content Creators" or "Content Users".

As far as project structure goes I was planning on having for example, Project.Data (Model Classes), Project.Services, Project.Repositories etc. This is all very data centric, should I be splitting these by the bounded context they inhabit. If so how do you deal with shared objects such as an Article?

As usual when trying to get your head around new concepts, the examples make perfect sense until you try to apply the thinking to a real situation.

Any pointers or useful links would be great.

Thanks,

答: I would create a shared kernel with the core of the application and reference the other context to the shared kernel. I can't explain this better then Eric Evans does in his book. </p>

OwnerDisplayName: Paco


问:
How to do an internal redirect with CodeIgniter for robots.txt?
I have a server running Apache 2.2.24 and CodeIgniter 2.1.0 .

I want to handle requests for /robots.txt dynamically, using CodeIgniter, but the only solution I have found so far is to use .htaccess to issue a temporary redirect that tells clients to fetch /robots_txt instead (note the underscore).

```<code>RewriteRule ^robots\.txt$ /robots_txt [NC,L,R=307]
</code>```

Later in the .htaccess there are these rules for CodeIgniter:

```<code>RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1
</code>```

Within CodeIgniter I can route requests for robots_txt to a controller.

My question is, how can I change this to an internal redirect? That is, when I get a request for robots.txt, instead of issuing a redirect response to the client, how can I rewrite the url to handle it internally as robots_txt?

Anything I have tried leads to a 404.

答:
To avoid a full redirect just do it as follows:

```<code># rewrite robots.txt to index.php
RewriteRule ^robots\.txt$ index.php?/$0 [L,NC]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]
</code>```

Then within CodeIgniter you can route requests for robots.txt (no underscore here) to a controller.

Body:
I have a server running Apache 2.2.24 and CodeIgniter 2.1.0 .

I want to handle requests for /robots.txt dynamically, using CodeIgniter, but the only solution I have found so far is to use .htaccess to issue a temporary redirect that tells clients to fetch /robots_txt instead (note the underscore).

RewriteRule ^robots\.txt$ /robots_txt [NC,L,R=307]

Later in the .htaccess there are these rules for CodeIgniter:

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1

Within CodeIgniter I can route requests for robots_txt to a controller.

My question is, how can I change this to an internal redirect? That is, when I get a request for robots.txt, instead of issuing a redirect response to the client, how can I rewrite the url to handle it internally as robots_txt?

Anything I have tried leads to a 404.

Body:
To avoid a full redirect just do it as follows:

# rewrite robots.txt to index.php
RewriteRule ^robots\.txt$ index.php?/$0 [L,NC]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php?/$1 [L]

Then within CodeIgniter you can route requests for robots.txt (no underscore here) to a controller.


问:
React/Redux controlled input with validation
Lets imagine we want an input for a "product" (stored in redux) price value.

I'm struggle to come up with the best way to handle input constraints.  For simplicity, lets just focus on the constraint that product.price cannot be empty.

It seems like the 2 options are:

1: Controlled

Implementation: The input value is bound to product.price. On change dispatches the changePrice() action.

The main issue here is that if we want to prevent an empty price from entering the product store, we essentially block the user from clearing the input field.  This isn't ideal as it makes it very hard to change the first digit of the number (you have to select it and replace it)!

2: Using defaultValue

Implementation: We set the price initially using input defaultValue, that allows us to control when we want to actually dispatch changePrice() actions and we can do validation handling in the onChange handler.

This works well, unless the product.price is ever updated from somewhere other than the input change event (for example, an applyDiscount action).  Since defaultValue doesn't cause rerenders, the product.price and the input are now out of sync!

So what am I missing?

There must be a simple & elegant solution to this problem but I just can't seem to find it!

答:
What I have done in the past is to use redux-thunk and joi to solve input constraints/validation using controlled inputs.

In general I like to have one update action that will handle all the field updating. So for example if you have two inputs for a form, it would looks something like this:

```<code>render() {
  const { product, updateProduct } = this.props;
  return (
    <div>
      <input
        value={product.name}
        onChange={() => updateProduct({...product, name: e.target.value})}
      />
      <input
        value={product.price}
        onChange={() => updateProduct({...product, price: e.target.value})}
      />
    </div>
  )
}
</code>```

Having one function/action here simplifies my forms a great deal. The updateProject action would then be a thunk action that handles side effects. Here is our Joi Schema(based off your one requirement) and updateProduct Action mentioned above. As a side note, I also tend to just let the user make the mistake. So if they don't enter anything for price I would just make the submit button inactive or something, but still store away null/empty string in the redux store.

```<code>const projectSchema = Joi.object().keys({
  name: Joi.number().string(),
  price: Joi.integer().required(), // price is a required integer. so null, "", and undefined would throw an error.
});

const updateProduct = (product) => {
  return (dispatch, getState) {
    Joi.validate(product, productSchema, {}, (err, product) => {
      if (err) {
        // flip/dispatch some view state related flag and pass error message to view and disable form submission;
      }

    });
    dispatch(update(product)); // go ahead and let the user make the mistake, but disable submission
  }
}
</code>```

I stopped using uncontrolled inputs, simply because I like to capture the entire state of an application. I have very little local component state in my projects. Keep in mind this is sudo code and probably won't work if directly copy pasted. Hope it helps.

Body:
What I have done in the past is to use redux-thunk and joi to solve input constraints/validation using controlled inputs.

In general I like to have one update action that will handle all the field updating. So for example if you have two inputs for a form, it would looks something like this:

render() {
  const { product, updateProduct } = this.props;
  return (
    <div>
      <input
        value={product.name}
        onChange={() => updateProduct({...product, name: e.target.value})}
      />
      <input
        value={product.price}
        onChange={() => updateProduct({...product, price: e.target.value})}
      />
    </div>
  )
}

Having one function/action here simplifies my forms a great deal. The updateProject action would then be a thunk action that handles side effects. Here is our Joi Schema(based off your one requirement) and updateProduct Action mentioned above. As a side note, I also tend to just let the user make the mistake. So if they don't enter anything for price I would just make the submit button inactive or something, but still store away null/empty string in the redux store.

const projectSchema = Joi.object().keys({
  name: Joi.number().string(),
  price: Joi.integer().required(), // price is a required integer. so null, "", and undefined would throw an error.
});

const updateProduct = (product) => {
  return (dispatch, getState) {
    Joi.validate(product, productSchema, {}, (err, product) => {
      if (err) {
        // flip/dispatch some view state related flag and pass error message to view and disable form submission;
      }

    });
    dispatch(update(product)); // go ahead and let the user make the mistake, but disable submission
  }
}

I stopped using uncontrolled inputs, simply because I like to capture the entire state of an application. I have very little local component state in my projects. Keep in mind this is sudo code and probably won't work if directly copy pasted. Hope it helps.


问:
SVG gooey effect not working on the latest version of FireFox
I have an issue where my feGuassian blur is not working properly when using any other color than black.

On chrome it works perfectly. I have not tested on safari yet.

I have created an example on jsFiddle :

HTML:

```<code><div>
<div class="bigLogo">
    <div class="blobs">
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="blob"></div>
    <div class="connect12">
        <div class="part1"></div>
        <div class="part2"></div>
        <div class="part3"></div>
    </div>
    <div class="connect23">
        <div class="part3"></div>
    </div>
    <div class="connect31">
        <div class="part3"></div>
    </div>
</div>
<svg xmlns="http://www,w3.org" version='1.1'>
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0                                                                                0 1 0 0 0                                                                                0 0 1 0 0                                                                                0 0 0 18 -7" result="goo"/>
            <feBlend in="SourceGraphic" in2="goo" />
        </filter>
    </defs>
</svg>
</div>
</div>

<div class="break">
<div class="smallLogo">
        <div class="blobs">
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="blob"></div>
            <div class="connect12">
                <div class="part1"></div>
                <div class="part2"></div>
                <div class="part3"></div>
            </div>
            <div class="connect23">
                <div class="part3"></div>
            </div>
            <div class="connect31">
                <div class="part3"></div>
            </div>
        </div>

        <svg xmlns="http://www,w3.org" version='1.1'>
            <defs>
                <filter id="goo2">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
                    <feColorMatrix in="blur" mode="matrix" values="0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 18 -7" result="goo"/>
                    <feBlend in="SourceGraphic" in2="goo" />
                </filter>
            </defs>
        </svg>
    </div>
</div>
</code>```

SCSS:

```<code>@-webkit-keyframes rotate-logo {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-logo {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate-logo-small {
    0% {
        -webkit-transform: rotate(0deg) scale(0.3);
        transform: rotate(0deg) scale(0.3);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.3);
        transform: rotate(360deg) scale(0.3);
    }
}

@keyframes rotate-logo-small {
    0% {
        -webkit-transform: rotate(0deg) scale(0.3);
        transform: rotate(0deg) scale(0.3);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.3);
        transform: rotate(360deg) scale(0.3);
    }
}

@-webkit-keyframes blob-anim-left {
    0% {
        -webkit-transform: translateX(6px) translateY(10px);
        transform: translateX(6px) translateY(10px);
    }
    100% {
        -webkit-transform: translateX(-43px) translateY(25px);
        transform: translateX(-43px) translateY(25px);
    }
}

@keyframes blob-anim-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-43px) translateY(25px);
        transform: translateX(-43px) translateY(25px);
    }
}

@-webkit-keyframes blob-anim-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(59px) translateY(-61px);
        transform: translateX(59px) translateY(-61px);
    }
}

@keyframes blob-anim-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(59px) translateY(-61px);
        transform: translateX(59px) translateY(-61px);
    }
}

@-webkit-keyframes blob-anim-top-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(28px) translateY(36px);
        transform: translateX(28px) translateY(36px);
    }
}

@keyframes blob-anim-top-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(28px) translateY(36px);
        transform: translateX(28px) translateY(36px);
    }
}

@keyframes line-anim-con12 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        width: 0px;
    }
    100% {
        -webkit-transform: rotate(-37deg) translateX(-37px) translateY(-83px);
        transform: rotate(-37deg) translateX(-37px) translateY(-83px);
        width: 120px;
    }
}

@keyframes line-anim-con23 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        height: 1px;
    }
    100% {
        -webkit-transform: rotate(13deg) translateX(19px) translateY(-46px);
        transform: rotate(13deg) translateX(19px) translateY(-46px);
        height: 25px;
    }
}

@keyframes line-anim-con31 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        width: 1px;
    }
    100% {
        -webkit-transform: translateX(-46px) translateY(8px) rotate(25deg);
        transform: translateX(-46px) translateY(8px) rotate(25deg);
        width: 23px;
    }
}

.bigLogo{
    position: absolute;
    width: 208.8px;
    height: 208.8px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.smallLogo{
    position: absolute;
    width: 75px;
    height: 75px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    .blobs{
        -webkit-filter: url('#goo2') !important;
        filter: url('#goo2') !important;
        -webkit-animation: rotate-logo ease-in-out 9s infinite alternate !important;
        animation: rotate-logo ease-in-out 9s infinite alternate !important;
        .blob{
            background: #000 !important;
        }
        .part1{
            background-color: #000 !important;
        }
        .part2{
            background-color: #000 !important;
        }
        .part3{
            background-color: #000 !important;
        }
    }
}

.blobs {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 208.8px;
    height: 208.8px;
    margin: auto;
    -webkit-filter: url('#goo');
    filter: url('#goo');
    -webkit-animation: rotate-logo ease-in-out 9s infinite alternate;
    animation: rotate-logo ease-in-out 9s infinite alternate;
}

.blob {
    background: #2a4059;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 60%;
    margin-top: -50px;
    margin-left: -50px;
    border-radius: 100%;
}

.blob:nth-child(1) {
    -webkit-animation: blob-anim-left ease-in-out 2.5s infinite alternate;
    animation: blob-anim-left ease-in-out 2.5s infinite alternate;
}

.blob:nth-child(2) {
    -webkit-animation: blob-anim-right ease-in-out 2.5s infinite alternate;
    animation: blob-anim-right ease-in-out 2.5s infinite alternate;
    width: 72px;
    height: 72px;

}

.blob:nth-child(3) {
    -webkit-animation: blob-anim-top-right ease-in-out 2.5s infinite alternate;
    animation: blob-anim-top-right ease-in-out 2.5s infinite alternate;
    width: 84px;
    height: 84px;
}

.line{
    width: 150px;
    height: 10px;
    margin: 150px;
    position: relative;
    filter: url('#goo');

}

.part1{
    width: 50%;
    height: 100%;
    background: #2a4059;
    transform: perspective(70px) rotateY(50deg);
    position: absolute;
    left: 0;
}

.part2{
    width: 50%;
    height: 100%;
    right: 0;
    position: absolute;
    background: #2a4059;
    transform: perspective(70px) rotateY(-50deg);
}

.part3{
    background: #2a4059;
    width: 100%;
    height: 100%;
}

.connect12{
    height: 14px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con12 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con12 ease-in-out 2.5s infinite alternate;
    .part3{
        height: 78% !important;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
}

.connect23{
    width: 11px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con23 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con23 ease-in-out 2.5s infinite alternate;
}

.connect31{
    height: 11px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con31 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con31 ease-in-out 2.5s infinite alternate;
}

.break{
    position: relative;
    top: 350px;
}
</code>```

https://jsfiddle.net/lastgiven/kqmabvxs/2/

If anyone could have a look and see if they could help me with the issue I would really appreciate it.

Thanks in advance

答:
The "gooey effect" seems to have been made popular through this post on css-tricks. While it describes very nicely how it works, it fails to explore the different possibilities SVG filters offer to formulate the filter. It seems that different implementations of the filter primitives and application on elements in the SVG or HTML namespace currently make differences in rendering across browsers.

Let me first explain the possibilities and then present a test case for cross-browser comparisons.

Bluring the input grafics

The filter starts with

```<code><feGaussianBlur stdDeviation="20" />
</code>```

to produce a blurred image. While it "smears" different colors, its main intent here is to produce a wide band of pixels along the border of the grafic sources where the alpha color values vary. The further you go out, the more partial transparency increases.

Raising the contrast of the alpha channel

The original idea takes advantage of the feColorMatrix primitive:

```<code><feColorMatrix mode="matrix"
               values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
               result="cutoff" />
</code>```

This has the obvious disadvantage of nobody understanding what these numbers mean. In theory, there is a mathematically identical version using the feComponentTransfer primitive:

```<code><feComponentTransfer result="cutoff">
    <feFuncA type="linear" slope="19" intercept="-9" />
</feComponentTransfer>
</code>```

They both transform the alpha value of a RGBA color with the function

```<code>(alpha) => slope * alpha + intercept
</code>```

and clamp the result to the interval [0, 1], so that

```<code>alpha < (0 - intercept) / slope => 0
alpha > (1 - intercept) / slope => 1
</code>```

There is a small range of input alphas that get transformed to partial transparency in the output. (For values 19 and -9 it is between 0.46...0.54.) The effect is of reducing the wide blurry borders to a very slim line that now "softens" all corners and has that "gooey" effect between nearby source objects.

But why leave that slim band of partial transparency in the output? It is possible to define a hard distinction between fully opaque and fully transparent:

```<code><feComponentTransfer result="cutoff">
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>
</code>```

The range of input values is halved:

```<code>alpha <  0.5 => 0
alpha >= 0.5 => 1
</code>```

This can result in visible antialiasing artefacts. There might be an advantage in a very small blurring of the result:

```<code><feComponentTransfer>
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="1" result="cutoff" />
</code>```

Superimposing the original grafics

To avoid the "smearing" of different colors inside an object you can superimpose the original on the "goo". There are several filter primitives, some with parameters that can achieve that. Basic superimposition can be formulated as

```<code><feBlend in="SourceGraphic" in2="cutoff" />
// or
<feMerge>
    <feMergeNode in="cutoff" />
    <feMergeNode in="SourceGraphic" />
</feMerge>
// or
<feComposite operator="over" in="SourceGraphic" in2="cutoff" />
</code>```

Restricting the superimposition to the "goo" area can be achieved with

```<code><feComposite operator="atop" in="SourceGraphic" in2="cutoff" />
</code>```

Rendering results

In theory, apart from that last distinction, the results should look the same. I've designed a test case where you can play around with the different filters and their setting. The filters can be applied to SVG circles and rectangles, or to HTML divs. You can compare the effect on multi-colored and monochrome objects. This should help to find a filter that has optimal cross-browser consistency.

const filters = new (function () {
    const fBlur = d3.selectAll('feGaussianBlur:first-child');
    const pBlur = d3.select('feComponentTransfer + feGaussianBlur');
    const fFunc = d3.select('feFuncA[type=linear]');
    const fMatr = d3.select('feColorMatrix');
    let fComp = d3.selectAll('feComposite');
    let active;

    const ids = {
        fcd: '#component-discrete',
        fcl: '#component-linear',
        fmx: '#colormatrix'
    };
    const xmls = new XMLSerializer();
    const pre = d3.select('pre');

    this.activate = function (a) {
        active = ids[a];
        this.showSource();
    };

    this.showSource = function () {
        const source = xmls.serializeToString(d3.select(active).node())
          .replace(/>\s*</g, '><')
          .replace(/<fe/g, '\n<fe')
          .replace(/(<\/\w+>)(<\/\w+>)/g, '$1\n$2')
          .replace(/(<feFuncA|<feMergeNode)/g, '    $1')
          .trim()
        pre.text(source);
    };

    this.blur = function (deviation) {
        fBlur.attr('stdDeviation', deviation);
        this.showSource();
    };

    this.postBlur = function (deviation) {
        pBlur.attr('stdDeviation', deviation);
        this.showSource();
    };

    this.contrast = function (slope, intercept) {
        fFunc.attr('slope', slope)
            .attr('intercept', intercept);
        fMatr.attr('values', [
            "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0",
            slope,
            intercept
        ].join(' '));
        this.showSource();
    };

    this.combinate = function (operator) {
        fComp.remove();
        switch (operator) {
        case 'none':
            return this.showSource();
        case 'merge':
            fComp = d3.selectAll('filter')
                .append('feMerge');
            fComp.append('feMergeNode')
                .attr('in', "cutoff");
            fComp.append('feMergeNode')
                .attr('in', "SourceGraphic");
            return this.showSource();
        case 'blend':
            fComp = d3.selectAll('filter')
                .append('feBlend');
            break;
        default:
            fComp = d3.selectAll('filter')
                .append('feComposite')
                .attr('operator', operator);
            break;
        }
        fComp.attr('in', "SourceGraphic")
            .attr('in2', "cutoff");
        this.showSource();
    };
})();

const tweaks = new (function () {
    this.blur = d3.select('#blur-select');
    const check = d3.select('#blur-select input');
    this.linear = d3.select('#linear-select');
    const selects = d3.selectAll('#linear-select input');
    const slope = selects.filter('#slope');
    const intercept = selects.filter('#intercept');
    const visSlope = d3.select('#visSlope');

    this.activate = function (active) {
        this.blur.classed('inactive', active !== 'fcd');
        check.property('disabled', active !== 'fcd');
        this.linear.classed('inactive', active === 'fcd');
        selects.property('disabled', active === 'fcd');
    };

    this.limit = function () {
        const min = 1 - slope.property('value');
        intercept.attr('min', min);
        if (min > intercept.property('value')) {
            intercept.property('value', min);
        }
        return [
            slope.property('value'),
            intercept.property('value')
        ];
    };

    this.visualize = function (slope, intercept) {
        visSlope.attr('x1', -intercept * 100 / slope)
            .attr('x2', (1 - intercept) * 100 / slope);
    };
})();

const primitives = d3.selectAll('.primitive');
const examples =  d3.selectAll('.example');
const goo = d3.selectAll('.goo');

d3.selectAll('input[name=variant]').on('change', function () {
    if (!this.checked) return;
    examples.classed('hide', true)
        .filter(this.id).classed('hide', false);
}).dispatch('change');

d3.select('#color').on('change', function () {
    primitives.classed('bw', this.checked);
}).dispatch('change');

d3.select('#filter-select').on('change', function () {
    goo.attr('class', 'goo ' + this.value);
    filters.activate(this.value);
    tweaks.activate(this.value);
}).dispatch('change');

d3.select('#deviation').on('input change', function () {
    d3.select('#devNum').text(this.value);
    filters.blur(this.value);
}).dispatch('change');

tweaks.blur.on('change', function () {
    filters.postBlur(this.checked ? 1 : 0);
}).dispatch('change');

tweaks.linear.on('change', function () {
    const params = tweaks.limit();
    tweaks.visualize.apply(tweaks, params);
    filters.contrast.apply(filters, params);
}).dispatch('change');

d3.select('#combine-select').on('change', function (e) {
  filters.combinate(this.value);
}).dispatch('change');

function tweenFactory (forth) {
    return function () {
        let interpolator;
        const node = this,
            from = forth ? 0 : 500,
            to   = forth ? 500 : 0;
        if (this instanceof SVGElement) {
            interpolator = d3.interpolateTransformSvg(
                'translate(0, ' + from + ')',
                'translate(0, ' + to + ')'
            );
            return function (t) {
                node.setAttribute("transform", interpolator(t));
            };
        } else {
            interpolator = d3.interpolateTransformCss(
                'translate(0px, ' + from + 'px)',
                'translate(0px, ' + to + 'px)'
            );
            return function (t) {
                node.style.transform = interpolator(t);
            };
        }
    };
}

d3.selectAll('.move').transition()
    .on('start', function repeat () {
        d3.active(this)
            .duration(2000)
            .ease(d3.easeSinInOut)
            .tween('forth', tweenFactory(true))
        .transition()
            .duration(2000)
            .ease(d3.easeSinInOut)
            .tween('back', tweenFactory(false))
        .transition()
            .on('start', repeat);
    });```
<pre class="snippet-code-css lang-css prettyprint-override"><code>body {
  font-family: sans-serif;
  line-height: 2em;
}
.inactive {
  opacity: 0.5;
}
input[type=number] {
  width: 3em;
}
#vis {
   fill:none;
   stroke:black;
   margin-left:10px;
   vertical-align: middle;
}
pre {
  padding: 10px;
  border: 1px solid black;
  min-height: 10em;
  overflow-x: auto;
  clear: both;
}
.floating {
  float: left;
  margin-right: 30px;
}
.floating.example {
   width: 250px;
   height: 400px;
}
div.goo {
   position: relative;
   width: 500px;
   height: 800px;
   transform: scale(0.5);
   transform-origin: 0% 0%;
}
div.goo div {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
}
div.goo .move {
  width: 160px;
  height: 160px;
  border-radius: 0;
}
.hide {
  display: none;
}
.bw {
  fill: black;
  background: black !important;
}
.fcd {
  filter: url(#component-discrete);
}
.fcl {
  filter: url(#component-linear);
}
.fmx {
  filter: url(#colormatrix);
}</code>```

<svg xmlns="http://www.w3.org/2000/svg" class="floating" height="0" width="0">
  <filter id="colormatrix" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="800">
    <feGaussianBlur stdDeviation="20" />
    <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="cutoff" />
    <feComposite operator="atop" in="SourceGraphic" in2="cutoff" />
  </filter>
  <filter id="component-linear" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="800">
    <feGaussianBlur stdDeviation="20" />
    <feComponentTransfer result="cutoff">
      <feFuncA type="linear" slope="19" intercept="-9" />
    </feComponentTransfer>
    <feComposite operator="atop" in="SourceG forraphic" in2="cutoff" />
  </filter>
  <filter id="component-discrete" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="800">
    <feGaussianBlur stdDeviation="20" />
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="0 1" />
    </feComponentTransfer>
    <feGaussianBlur id="post-blur" stdDeviation="1" result="cutoff" />
    <feComposite operator="atop" in="SourceGraphic" in2="cutoff" />
  </filter>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="floating example" viewBox="0 0 500 800">
  <g class="goo fcd">
    <circle class="primitive" r="100" cx="150" cy="400" fill="#ff0000" />
    <circle class="primitive" r="100" cx="350" cy="400" fill="#00ff00" />
    <rect class="primitive move" x="170" y="70" width="160" height="160" fill="#0000ff" />
  </g>
</svg>

Filtered Objects
  <input name="variant" id="svg" type="radio" checked="checked"></input>SVG primitives
  <input name="variant" id="div" type="radio"></input>HTML divs

<input id="color" type="checkbox"></input>
  Set black and white

Blur value

  <input id="deviation" type="range" min="5" max="50" step="5" value="20"></input>
  20

Cutoff Filter

  <select id="filter-select">
    <option value="fcd" selected="selected">Component/discrete</option>
    <option value="fcl">Component/linear</option>
    <option value="fmx">ColorMatrix</option>
  </select>

<input type="checkbox" checked="checked"></input>
  Post-Blur for discrete

slope <input id="slope" type="number" min="2" step="1" value="19"></input>
  intercept <input id="intercept" type="number" min="-18" max="0" step="1" value="-9"></input> for linear
  <svg id="vis" width="100" height="20">
    <rect x="0.5" y="0.5" width="99" height="19" />
    <line x1="50" y1="20" x2="50" y2="0" style="stroke:red;opacity:0.7" />
    <line id="visSlope" x1="50" y1="20" x2="50" y2="0" />
  </svg>

Combining Filter

  <select id="combine-select">
    <option value="atop" selected="selected">Composite atop</option>
    <option value="over">Composite over</option>
    <option value="blend">Blend normal</option>
    <option value="merge">Merge</option>
    <option value="none">none</option>
  </select>

```<code><feColorMatrix mode="matrix"
               values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
               result="cutoff" />
</code>```0```

The same external on Codepen.

I am so far aware of these rendering errors:

filtering HTML objects seems not to be supported in Safari, Edge and IE

ColorMatrix seems to be buggy in Chrome when applied to SVG objects

ColorMatrix and  Component/linear have been reported to be buggy in Firefox 57/Windows

I have not seen all of these errors, so feel free to add to this list or correct it.

Related post: SVG feGaussianBlur and feColorMatrix filters not working in Chrome?

Body:
I have an issue where my feGuassian blur is not working properly when using any other color than black.

On chrome it works perfectly. I have not tested on safari yet.

I have created an example on jsFiddle :

HTML:

<svg xmlns="http://www,w3.org" version='1.1'>
    <defs>
        <filter id="goo">
            <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0                                                                                0 1 0 0 0                                                                                0 0 1 0 0                                                                                0 0 0 18 -7" result="goo"/>
            <feBlend in="SourceGraphic" in2="goo" />
        </filter>
    </defs>
</svg>

        <svg xmlns="http://www,w3.org" version='1.1'>
            <defs>
                <filter id="goo2">
                    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"/>
                    <feColorMatrix in="blur" mode="matrix" values="0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 0 0
                                                                   0 0 0 18 -7" result="goo"/>
                    <feBlend in="SourceGraphic" in2="goo" />
                </filter>
            </defs>
        </svg>

SCSS:

@-webkit-keyframes rotate-logo {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate-logo {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate-logo-small {
    0% {
        -webkit-transform: rotate(0deg) scale(0.3);
        transform: rotate(0deg) scale(0.3);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.3);
        transform: rotate(360deg) scale(0.3);
    }
}

@keyframes rotate-logo-small {
    0% {
        -webkit-transform: rotate(0deg) scale(0.3);
        transform: rotate(0deg) scale(0.3);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(0.3);
        transform: rotate(360deg) scale(0.3);
    }
}

@-webkit-keyframes blob-anim-left {
    0% {
        -webkit-transform: translateX(6px) translateY(10px);
        transform: translateX(6px) translateY(10px);
    }
    100% {
        -webkit-transform: translateX(-43px) translateY(25px);
        transform: translateX(-43px) translateY(25px);
    }
}

@keyframes blob-anim-left {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(-43px) translateY(25px);
        transform: translateX(-43px) translateY(25px);
    }
}

@-webkit-keyframes blob-anim-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(59px) translateY(-61px);
        transform: translateX(59px) translateY(-61px);
    }
}

@keyframes blob-anim-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(59px) translateY(-61px);
        transform: translateX(59px) translateY(-61px);
    }
}

@-webkit-keyframes blob-anim-top-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(28px) translateY(36px);
        transform: translateX(28px) translateY(36px);
    }
}

@keyframes blob-anim-top-right {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(28px) translateY(36px);
        transform: translateX(28px) translateY(36px);
    }
}

@keyframes line-anim-con12 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        width: 0px;
    }
    100% {
        -webkit-transform: rotate(-37deg) translateX(-37px) translateY(-83px);
        transform: rotate(-37deg) translateX(-37px) translateY(-83px);
        width: 120px;
    }
}

@keyframes line-anim-con23 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        height: 1px;
    }
    100% {
        -webkit-transform: rotate(13deg) translateX(19px) translateY(-46px);
        transform: rotate(13deg) translateX(19px) translateY(-46px);
        height: 25px;
    }
}

@keyframes line-anim-con31 {
    0% {
        -webkit-transform: translateX(-30px) translateY(-24px);
        transform: translateX(-30px) translateY(-24px);
        width: 1px;
    }
    100% {
        -webkit-transform: translateX(-46px) translateY(8px) rotate(25deg);
        transform: translateX(-46px) translateY(8px) rotate(25deg);
        width: 23px;
    }
}

.bigLogo{
    position: absolute;
    width: 208.8px;
    height: 208.8px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.smallLogo{
    position: absolute;
    width: 75px;
    height: 75px;
    top: 0;
    left: 50%;
    transform: translateX(-50%);

    .blobs{
        -webkit-filter: url('#goo2') !important;
        filter: url('#goo2') !important;
        -webkit-animation: rotate-logo ease-in-out 9s infinite alternate !important;
        animation: rotate-logo ease-in-out 9s infinite alternate !important;
        .blob{
            background: #000 !important;
        }
        .part1{
            background-color: #000 !important;
        }
        .part2{
            background-color: #000 !important;
        }
        .part3{
            background-color: #000 !important;
        }
    }
}

.blobs {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 208.8px;
    height: 208.8px;
    margin: auto;
    -webkit-filter: url('#goo');
    filter: url('#goo');
    -webkit-animation: rotate-logo ease-in-out 9s infinite alternate;
    animation: rotate-logo ease-in-out 9s infinite alternate;
}

.blob {
    background: #2a4059;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 60%;
    margin-top: -50px;
    margin-left: -50px;
    border-radius: 100%;
}

.blob:nth-child(1) {
    -webkit-animation: blob-anim-left ease-in-out 2.5s infinite alternate;
    animation: blob-anim-left ease-in-out 2.5s infinite alternate;
}

.blob:nth-child(2) {
    -webkit-animation: blob-anim-right ease-in-out 2.5s infinite alternate;
    animation: blob-anim-right ease-in-out 2.5s infinite alternate;
    width: 72px;
    height: 72px;

}

.blob:nth-child(3) {
    -webkit-animation: blob-anim-top-right ease-in-out 2.5s infinite alternate;
    animation: blob-anim-top-right ease-in-out 2.5s infinite alternate;
    width: 84px;
    height: 84px;
}

.line{
    width: 150px;
    height: 10px;
    margin: 150px;
    position: relative;
    filter: url('#goo');

}

.part1{
    width: 50%;
    height: 100%;
    background: #2a4059;
    transform: perspective(70px) rotateY(50deg);
    position: absolute;
    left: 0;
}

.part2{
    width: 50%;
    height: 100%;
    right: 0;
    position: absolute;
    background: #2a4059;
    transform: perspective(70px) rotateY(-50deg);
}

.part3{
    background: #2a4059;
    width: 100%;
    height: 100%;
}

.connect12{
    height: 14px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con12 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con12 ease-in-out 2.5s infinite alternate;
    .part3{
        height: 78% !important;
        top: 50%;
        transform: translateY(-50%);
        position: absolute;
    }
}

.connect23{
    width: 11px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con23 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con23 ease-in-out 2.5s infinite alternate;
}

.connect31{
    height: 11px;
    position: absolute;
    left: 50%;
    top: 60%;
    -webkit-animation: line-anim-con31 ease-in-out 2.5s infinite alternate;
    animation: line-anim-con31 ease-in-out 2.5s infinite alternate;
}

.break{
    position: relative;
    top: 350px;
}

https://jsfiddle.net/lastgiven/kqmabvxs/2/

If anyone could have a look and see if they could help me with the issue I would really appreciate it.

Thanks in advance

Body:
The "gooey effect" seems to have been made popular through this post on css-tricks. While it describes very nicely how it works, it fails to explore the different possibilities SVG filters offer to formulate the filter. It seems that different implementations of the filter primitives and application on elements in the SVG or HTML namespace currently make differences in rendering across browsers.

Let me first explain the possibilities and then present a test case for cross-browser comparisons.

Bluring the input grafics

The filter starts with

<feGaussianBlur stdDeviation="20" />

to produce a blurred image. While it "smears" different colors, its main intent here is to produce a wide band of pixels along the border of the grafic sources where the alpha color values vary. The further you go out, the more partial transparency increases.

Raising the contrast of the alpha channel

The original idea takes advantage of the feColorMatrix primitive:

<feColorMatrix mode="matrix"
               values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
               result="cutoff" />

This has the obvious disadvantage of nobody understanding what these numbers mean. In theory, there is a mathematically identical version using the feComponentTransfer primitive:

<feComponentTransfer result="cutoff">
    <feFuncA type="linear" slope="19" intercept="-9" />
</feComponentTransfer>

They both transform the alpha value of a RGBA color with the function

(alpha) => slope * alpha + intercept

and clamp the result to the interval [0, 1], so that

alpha < (0 - intercept) / slope => 0
alpha > (1 - intercept) / slope => 1

There is a small range of input alphas that get transformed to partial transparency in the output. (For values 19 and -9 it is between 0.46...0.54.) The effect is of reducing the wide blurry borders to a very slim line that now "softens" all corners and has that "gooey" effect between nearby source objects.

But why leave that slim band of partial transparency in the output? It is possible to define a hard distinction between fully opaque and fully transparent:

<feComponentTransfer result="cutoff">
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>

The range of input values is halved:

alpha <  0.5 => 0
alpha >= 0.5 => 1

This can result in visible antialiasing artefacts. There might be an advantage in a very small blurring of the result:

<feComponentTransfer>
  <feFuncA type="discrete" tableValues="0 1" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="1" result="cutoff" />

Superimposing the original grafics

To avoid the "smearing" of different colors inside an object you can superimpose the original on the "goo". There are several filter primitives, some with parameters that can achieve that. Basic superimposition can be formulated as

<feBlend in="SourceGraphic" in2="cutoff" />
// or
<feMerge>
    <feMergeNode in="cutoff" />
    <feMergeNode in="SourceGraphic" />
</feMerge>
// or
<feComposite operator="over" in="SourceGraphic" in2="cutoff" />

Restricting the superimposition to the "goo" area can be achieved with

<feComposite operator="atop" in="SourceGraphic" in2="cutoff" />

Rendering results

In theory, apart from that last distinction, the results should look the same. I've designed a test case where you can play around with the different filters and their setting. The filters can be applied to SVG circles and rectangles, or to HTML divs. You can compare the effect on multi-colored and monochrome objects. This should help to find a filter that has optimal cross-browser consistency.

const filters = new (function () {
    const fBlur = d3.selectAll('feGaussianBlur:first-child');
    const pBlur = d3.select('feComponentTransfer + feGaussianBlur');
    const fFunc = d3.select('feFuncA[type=linear]');
    const fMatr = d3.select('feColorMatrix');
    let fComp = d3.selectAll('feComposite');
    let active;

    const ids = {
        fcd: '#component-discrete',
        fcl: '#component-linear',
        fmx: '#colormatrix'
    };
    const xmls = new XMLSerializer();
    const pre = d3.select('pre');

    this.activate = function (a) {
        active = ids[a];
        this.showSource();
    };

    this.showSource = function () {
        const source = xmls.serializeToString(d3.select(active).node())
          .replace(/>\s*</g, '><')
          .replace(/<fe/g, '\n<fe')
          .replace(/(<\/\w+>)(<\/\w+>)/g, '$1\n$2')
          .replace(/(<feFuncA|<feMergeNode)/g, '    $1')
          .trim()
        pre.text(source);
    };

    this.blur = function (deviation) {
        fBlur.attr('stdDeviation', deviation);
        this.showSource();
    };

    this.postBlur = function (deviation) {
        pBlur.attr('stdDeviation', deviation);
        this.showSource();
    };

    this.contrast = function (slope, intercept) {
        fFunc.attr('slope', slope)
            .attr('intercept', intercept);
        fMatr.attr('values', [
            "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0",
            slope,
            intercept
        ].join(' '));
        this.showSource();
    };

    this.combinate = function (operator) {
        fComp.remove();
        switch (operator) {
        case 'none':
            return this.showSource();
        case 'merge':
            fComp = d3.selectAll('filter')
                .append('feMerge');
            fComp.append('feMergeNode')
                .attr('in', "cutoff");
            fComp.append('feMergeNode')
                .attr('in', "SourceGraphic");
            return this.showSource();
        case 'blend':
            fComp = d3.selectAll('filter')
                .append('feBlend');
            break;
        default:
            fComp = d3.selectAll('filter')
                .append('feComposite')
                .attr('operator', operator);
            break;
        }
        fComp.attr('in', "SourceGraphic")
            .attr('in2', "cutoff");
        this.showSource();
    };
})();

const tweaks = new (function () {
    this.blur = d3.select('#blur-select');
    const check = d3.select('#blur-select input');
    this.linear = d3.select('#linear-select');
    const selects = d3.selectAll('#linear-select input');
    const slope = selects.filter('#slope');
    const intercept = selects.filter('#intercept');
    const visSlope = d3.select('#visSlope');

    this.activate = function (active) {
        this.blur.classed('inactive', active !== 'fcd');
        check.property('disabled', active !== 'fcd');
        this.linear.classed('inactive', active === 'fcd');
        selects.property('disabled', active === 'fcd');
    };

    this.limit = function () {
        const min = 1 - slope.property('value');
        intercept.attr('min', min);
        if (min > intercept.property('value')) {
            intercept.property('value', min);
        }
        return [
            slope.property('value'),
            intercept.property('value')
        ];
    };

    this.visualize = function (slope, intercept) {
        visSlope.attr('x1', -intercept * 100 / slope)
            .attr('x2', (1 - intercept) * 100 / slope);
    };
})();

const primitives = d3.selectAll('.primitive');
const examples =  d3.selectAll('.example');
const goo = d3.selectAll('.goo');

d3.selectAll('input[name=variant]').on('change', function () {
    if (!this.checked) return;
    examples.classed('hide', true)
        .filter(this.id).classed('hide', false);
}).dispatch('change');

d3.select('#color').on('change', function () {
    primitives.classed('bw', this.checked);
}).dispatch('change');

d3.select('#filter-select').on('change', function () {
    goo.attr('class', 'goo ' + this.value);
    filters.activate(this.value);
    tweaks.activate(this.value);
}).dispatch('change');

d3.select('#deviation').on('input change', function () {
    d3.select('#devNum').text(this.value);
    filters.blur(this.value);
}).dispatch('change');

tweaks.blur.on('change', function () {
    filters.postBlur(this.checked ? 1 : 0);
}).dispatch('change');

tweaks.linear.on('change', function () {
    const params = tweaks.limit();
    tweaks.visualize.apply(tweaks, params);
    filters.contrast.apply(filters, params);
}).dispatch('change');

d3.select('#combine-select').on('change', function (e) {
  filters.combinate(this.value);
}).dispatch('change');

function tweenFactory (forth) {
    return function () {
        let interpolator;
        const node = this,
            from = forth ? 0 : 500,
            to   = forth ? 500 : 0;
        if (this instanceof SVGElement) {
            interpolator = d3.interpolateTransformSvg(
                'translate(0, ' + from + ')',
                'translate(0, ' + to + ')'
            );
            return function (t) {
                node.setAttribute("transform", interpolator(t));
            };
        } else {
            interpolator = d3.interpolateTransformCss(
                'translate(0px, ' + from + 'px)',
                'translate(0px, ' + to + 'px)'
            );
            return function (t) {
                node.style.transform = interpolator(t);
            };
        }
    };
}

d3.selectAll('.move').transition()
    .on('start', function repeat () {
        d3.active(this)
            .duration(2000)
            .ease(d3.easeSinInOut)
            .tween('forth', tweenFactory(true))
        .transition()
            .duration(2000)
            .ease(d3.easeSinInOut)
            .tween('back', tweenFactory(false))
        .transition()
            .on('start', repeat);
    });

body {
  font-family: sans-serif;
  line-height: 2em;
}
.inactive {
  opacity: 0.5;
}
input[type=number] {
  width: 3em;
}
#vis {
   fill:none;
   stroke:black;
   margin-left:10px;
   vertical-align: middle;
}
pre {
  padding: 10px;
  border: 1px solid black;
  min-height: 10em;
  overflow-x: auto;
  clear: both;
}
.floating {
  float: left;
  margin-right: 30px;
}
.floating.example {
   width: 250px;
   height: 400px;
}
div.goo {
   position: relative;
   width: 500px;
   height: 800px;
   transform: scale(0.5);
   transform-origin: 0% 0%;
}
div.goo div {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 100%;
}
div.goo .move {
  width: 160px;
  height: 160px;
  border-radius: 0;
}
.hide {
  display: none;
}
.bw {
  fill: black;
  background: black !important;
}
.fcd {
  filter: url(#component-discrete);
}
.fcl {
  filter: url(#component-linear);
}
.fmx {
  filter: url(#colormatrix);
}

<script src="https://d3js.org/d3.v4.min.js"></script>

<svg xmlns="http://www.w3.org/2000/svg" class="floating" height="0" width="0">
  <filter id="colormatrix" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="800">
    <feGaussianBlur stdDeviation="20" />
    <feColorMatrix mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="cutoff" />
    <feComposite operator="atop" in="SourceGraphic" in2="cutoff" />
  </filter>
  <filter id="component-linear" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="800">
    <feGaussianBlur stdDeviation="20" />
    <feComponentTransfer result="cutoff">
      <feFuncA type="linear" slope="19" intercept="-9" />
    </feComponentTransfer>
    <feComposite operator="atop" in="SourceG forraphic" in2="cutoff" />
  </filter>
  <filter id="component-discrete" filterUnits="userSpaceOnUse" x="0" y="0" width="500" height="800">
    <feGaussianBlur stdDeviation="20" />
    <feComponentTransfer>
      <feFuncA type="discrete" tableValues="0 1" />
    </feComponentTransfer>
    <feGaussianBlur id="post-blur" stdDeviation="1" result="cutoff" />
    <feComposite operator="atop" in="SourceGraphic" in2="cutoff" />
  </filter>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" class="floating example" viewBox="0 0 500 800">
  <g class="goo fcd">
    <circle class="primitive" r="100" cx="150" cy="400" fill="#ff0000" />
    <circle class="primitive" r="100" cx="350" cy="400" fill="#00ff00" />
    <rect class="primitive move" x="170" y="70" width="160" height="160" fill="#0000ff" />
  </g>
</svg>

<div class="floating example hide">
<div class="goo fcd">
  <div class="primitive" style="background:#ff0000;left:50px;top:300px"></div>
  <div class="primitive" style="background:#00ff00;right:50px;top:300px"></div>
  <div class="primitive move" style="background:#0000ff;left:170px;top:70px"></div>
</div>
</div>

<div id="controls">
  <p>Filtered Objects
  <input name="variant" id="svg" type="radio" checked="checked"></input><label>SVG primitives</label>
  <input name="variant" id="div" type="radio"></input><label>HTML divs</label></p>

  <p><input id="color" type="checkbox"></input>
  <label>Set black and white</label></p>

  <p><label>Blur value</label><br/>
  <input id="deviation" type="range" min="5" max="50" step="5" value="20"></input>
  <span id="devNum">20</span></p>

  <p><label>Cutoff Filter</label><br/>
  <select id="filter-select">
    <option value="fcd" selected="selected">Component/discrete</option>
    <option value="fcl">Component/linear</option>
    <option value="fmx">ColorMatrix</option>
  </select></p>

  <p id="blur-select"><input type="checkbox" checked="checked"></input>
  <label>Post-Blur for discrete</label></p>

  <p id="linear-select"><label>slope</label> <input id="slope" type="number" min="2" step="1" value="19"></input>
  <label>intercept</label> <input id="intercept" type="number" min="-18" max="0" step="1" value="-9"></input> for linear
  <svg id="vis" width="100" height="20">
    <rect x="0.5" y="0.5" width="99" height="19" />
    <line x1="50" y1="20" x2="50" y2="0" style="stroke:red;opacity:0.7" />
    <line id="visSlope" x1="50" y1="20" x2="50" y2="0" />
  </svg></p>

  <p><label>Combining Filter</label><br/>
  <select id="combine-select">
    <option value="atop" selected="selected">Composite atop</option>
    <option value="over">Composite over</option>
    <option value="blend">Blend normal</option>
    <option value="merge">Merge</option>
    <option value="none">none</option>
  </select></p>
</div>

<pre></pre>

The same external on Codepen.

I am so far aware of these rendering errors:

filtering HTML objects seems not to be supported in Safari, Edge and IE

ColorMatrix seems to be buggy in Chrome when applied to SVG objects

ColorMatrix and  Component/linear have been reported to be buggy in Firefox 57/Windows

I have not seen all of these errors, so feel free to add to this list or correct it.

Related post: SVG feGaussianBlur and feColorMatrix filters not working in Chrome?


问:
Conversion of php multidimensional array to javascript array
I have encoded a set of multidimensional array from the php and i echo to the ajax.
Now the response looks like the following

```<code> Array
(
    [0]=>Array
         ([messagebody]=>hello
          [senderid]=>2
          [receiverid]=4
          )
   [1]=>Array
         ([messagebody]=>how are you
          [senderid]=>4
          [receiverid]=2
          )
    )
</code>```

Please how do i access this array in javascript to get the messagebody?

答:
You shouldn't be print_r() your arrays as this it produces human readable output, nothing JS can deal with easily nor out of the box. Instead you should use i.e. JSON and pass your arrays in that form to JS:

```<code>echo json_encode($my_array, JSON_UNESCAPED_UNICODE);
</code>```

Body:
I have encoded a set of multidimensional array from the php and i echo to the ajax.
Now the response looks like the following

 Array
(
    [0]=>Array
         ([messagebody]=>hello
          [senderid]=>2
          [receiverid]=4
          )
   [1]=>Array
         ([messagebody]=>how are you
          [senderid]=>4
          [receiverid]=2
          )
    )

Please how do i access this array in javascript to get the messagebody?

Body:
You shouldn't be print_r() your arrays as this it produces human readable output, nothing JS can deal with easily nor out of the box. Instead you should use i.e. JSON and pass your arrays in that form to JS:

echo json_encode($my_array, JSON_UNESCAPED_UNICODE);