To start with, I mentioned privately with everybody to discover a answer. We agreed on one thing, BUT the angle of the creator was inappropriate and disrespectful. Because of this, I’ve determined to share this publicly to denounce this type of habits and let the group decide if there’s plagiarism or not.
The Quick story
Somebody copied part of my CSS Methods article to submit their article on Smashing Journal.
For this brief model, I’ll merely share two demos to spotlight the plagiarism
My demo: https://codepen.io/t_afif/pen/ZEeYzNy
Her demo: https://codepen.io/smashingmag/pen/mdXRzRW
The creator claimed that “she did not plagiarize my article” and “she did not see my article earlier than writing her article”.
Sorry however my mind can not settle for this once I evaluate each demos. What do you suppose? Perhaps somebody can persuade me that each aren’t the identical. 👇
The Lengthy Story
You could have observed that I’ve shared an archive hyperlink of the SM article as a result of the article is offline (and can stay offline). When the article went stay, I commented on Twitter and the SM workforce instantly eliminated it to research the difficulty.
The @smashingmag is publishing an article which is 80% a replica of one in every of my earlier article: css-tricks.com/advanced-css-a…I’m actually upset to see such a factor from an internet site I respect😢
I hope one thing will likely be accomplished to rectify this. twitter.com/smashingmag/st…
12:21 PM – 18 Could 2022
🎢 Questioning how the cubic-bezier operate truly works and the way to stack a number of easy animations to create a posh one in CSS? @yosracodes explains the way to create a rollercoaster path {that a} ball follows utilizing cubic beziers and CSS transitions:
https://t.co/5GdL5bd26T https://t.co/k26kxkGQ3U
After that, I had a protracted and personal dialogue with SM the place I gave clear proof of the plagiarism by highlighting all of the related proofs. They have been affected person, took me significantly, and so they have been looking for an answer.
I might have stored every thing personal if the creator assumed her mistake BUT, till the top, she was claiming that she did nothing unsuitable and she or he by no means copied something!
A few of her messages (I can present the total electronic mail historical past if anybody need to confirm)
“I did not plagiarize and simply because there are similarities in two articles that specify the identical matter doesn’t suggest it is plagiarised. [… ] I nonetheless stand by my phrase that the article will not be plagiarised.”
“[…] I did not even see his article earlier than to omit something.”
“All of the maths of the cubic-bezier that I added was taken from my notes […]”
Properly, I can not settle for this. However wait, possibly I’m unsuitable. Because of this, I made a decision to share the content material publicly to let the group decide. If she did nothing then I would be the unhealthy man on this story. In any other case, she needed to assume what she did in entrance of the group.
I invite you to learn each articles (particularly the “parabolic curve” half) and I’m going to offer all of the proof of the plagiarism.
It is going to be very detailed so be affected person!
Proof #0
Let’s begin with the titles. She used virtually the identical as mine
mine: “Superior CSS Animation Utilizing cubic-bezier()”
her: “Superior Animations Utilizing CSS”
She additionally used the identical title for the copied half “PARABOLIC CURVE”
We might imagine this can be a coincidence however with what’s going to come subsequent you’ll discover that it is not.
Proof #1
She began her half with the identical Intro utilizing completely different phrases.
mine:
My aim is to regulate P1 and P2 so as to create the next curves:
Chances are you’ll suppose that is inconceivable to attain as a result of, as acknowledged within the definition, P0 and P3 are mounted at (0,0) and (1,1) that means they can’t be on the identical axis. That’s true, and we are going to use some math methods to “approximate” them.
her:
From the definition of the parabolic curve, you could discover that making an ideal parabolic curve appears inconceivable as a result of P0 should be at (0, 0) and P3 should be at (1, 1) whereas parabolic curves begin and finish on the similar horizontal axis, so we’ll want P3 to be at (1, 0).
It’s true that we will’t make an ideal parabola. Nonetheless, we will create one thing near it.
If you’re following me, you should know me for all of the hacky stuff I’m doing with CSS. This text is one in every of them. I’ve developed a “hacky” approximation to create curves which might be inconceivable to attain utilizing cubic-bezier.
What are the possibilities that another person had the identical thought as mine? And determined to create the identical curve as mine?
Proof #2
Like me, she determined to make use of a “ball” for all their demos. Okay, a ball is one thing frequent however with the identical CSS, it’s kind of suspicious.
my CSS:
i {
place:mounted;
width:50px;
peak:50px;
border-radius:50%;
background:radial-gradient(at 30% 30%,#0000,#000a) purple;
left:20px;
prime:200px;
}
her CSS:
.ball {
background-color: burlywood;
peak: 50px;
width: 50px;
border: 1px stable black;
border-radius: 50px;
place: mounted;
left: 10px;
prime: 300px;
}
Most likely not sufficient to name this plagiarism however you will note once we will evaluate the total demo later.
Proof #3
She determined to dig into the mathematics like I did and she or he adopted the identical steps as me.
In my article it begins from:
Digging into the mathematics
In her from:
THE MATHS BEHIND THE cubic-bezier FUNCTION
In my article, there’s a Quadratic operate and to keep away from making the mathematics half prolonged, I gave the answer with out element.
Y'(t) = 0 is a quadratic equation. I’ll skip the boring half and offers you the outcome, which is t = V – sqrt(V² – V).
She additionally did the identical. Since she copied every thing from me, she stored the identical construction by omitting what I’ve omitted.
Proof #4
Nonetheless on the mathematics, she additionally did the identical approximation as me:
Me:
Additionally, Y(0.5) will give us (1 + 6V)/8 and this can permit us to search out the max worth based mostly on V. And since we are going to at all times use an enormous worth for V, we will simplify to 6V/8 = 0.75V.
her:
Substituting t=0.5 at Y(0.5) #
Y(0.5) = (1 + 6X)/8
For the sake of simplicity, we are going to use Y(0.5)=0.75X.
One other coincidence she had the identical thought to simplify the components? Mathematically talking, we must always hold the precise components to get correct outcomes however I’m a lazy individual so I simplified the components to have a neater one that also offers the identical outcome as a result of in CSS we do not care about precision. 1px or .5px would not make a visible distinction.
Proof #5
One other proof associated to the mathematics half and this one is just too apparent. I even need to say, it is my favourite proof!
Me:
We used V = 500 within the final instance, so the max worth there would come out to 375 (or 37500%) and we get the next:
Preliminary state (0): prime: 200px
Remaining state (1): prime: 199.5pxThere’s a distinction of -0.5px between 0 and 1. Let’s name it the increment. For 375 (or 37500%) we now have an equation of 375*-0.5px = -187.5px. Our animated factor is reaching prime: 12.5px (200px – 187.5px) and offers us the next animation:
Her:
In our final instance, we used X=500, so the max worth is 375px.
Our cubic-bezier operate within the x-axis interprets as follows:
x = 0 →prime: 300px
x = 1 →prime: 299.5pxThere’s a distinction of -0.5 between 0 and 1.
The max worth that’s 375px is utilized when the distinction is 1, since right here our distinction is -0.5, then our max distinction is 375*-0.5 = -187.5px.
Subsequently, to get the max prime worth the factor will attain:
How on earth two folks can select the identical random values?? 500 is meant to be an enormous random worth and 0.5px a small random worth. It may be something: 999 and 0.1, 800 and 0.4, 1000 and 0.01, and many others.
Even the construction of that half is identical. Plagiarism or coincidence?
Proof #6
Sure, I nonetheless have extra proofs
Me:
Let’s do the alternative logic. What worth of V ought to we use to make our factor attain prime: 0px? The animation will likely be 200px → 0px → 199.5px, so we’d like -200px to succeed in 0px. Our increment is at all times equal to -0.5px. The max worth will likely be equal to 200/0.5 = 400, so 0.75V = 400 which implies V = 533.33.
Her:
To get the X worth that may make the factor attain the highest worth we would like, we will do the alternative logic.
Let’s assume we need to get the worth of X that makes our animation attain prime: 0px. We are going to want -300px to succeed in 0px.
We all know that the distinction between the preliminary and remaining worth is 0.5 so the max worth Y(t) = -300/-0.5 = 600
by substituting into the equation Y(t)=0.75X we get:
She additionally obtained the identical thought to do the “reverse logic”? This instance can also be a random one which I’ve used to show the components. It is not necessary to elucidate the article or for the subsequent demos. One other coincidence?
Proof #7
She concluded that half the identical method I did:
Me:
Our factor is touching the highest!
Here’s a determine that sums up that math we simply did:
Her:
Discover that the ball is touching the highest!
To sum up, to get X once you need to attain a sure max peak, right here is the equation:
After I first wrote the article, I did not make that half however I used to be advised so as to add a small abstract to make it simple to memorize. Did she get the identical thought as me?
Proof #8
I talked about the identical CSS however listed here are the total demos used within the articles so you’ll be able to evaluate:
mine: https://codepen.io/t_afif/pen/ZEeYzNy
her: https://codepen.io/smashingmag/pen/mdXRzRW
Every little thing is identical: The JS is, the animations, the length, the worth of cubic-bezier, the “d” factor, and guess what? She even copied the small remark which you could see above “d” within the CSS code!
I even need to say that it is a “silly” copy/paste!
While you copy another person code, do an effort to alter many values and variable names and likewise take away ineffective stuff 😑
Did you bear in mind what she stated?? Let me remind you:
“[…] I did not even see his article earlier than to omit something.”
“All of the maths of the cubic-bezier that I added was taken from my notes […]”
I believe I’ve sufficient proof to explicitly name this plagiarism. The article is saved within the web archive so nobody can fake I’ve modified it. For the demos, you’ll be able to confirm the date. Mine is created/up to date on “Could 6, 2021” and her on “Could 16, 2022”
What do you suppose? 👇
Further notes
Let’s not overlook that we’re speaking a few huge web site which is Smashing Journal so why would I “battle” with such an enormous firm if I’m not 100% certain. I’m taking an enormous danger by doing this and making it public however I’m not nervous as a result of the plagiarism is greater than apparent.
I additionally determined to not publish something on Smashing Journal if the creator will write yet another time for that website. The SM workforce gave her one other probability to re-write the article. If she does, I can not settle for being listed on the identical web site as her.
The construction of her article is complicated and that is one other proof of plagiarism.
At the start, she stated:
Our aim for the cubic-bezier is to create the sliding parabola firstly of the required animation. However so as to get there, we’ll begin small and discover ways to create a parabolic curve utilizing cubic-bezier.
So the intention is to elucidate a curve that she’s going to use within the remaining animation however later she did one thing that has nothing to do with the primary half.
Within the remaining part, she used cubic-bezier(0.55, 0, 0.2, -800) and it has nothing to do with the “parabolic curve” and all the mathematics she defined (copied from me) would not apply.
She additionally stated:
On this case I discovered that 0.55 matches greatest
Y needs to be an enormous worth. On this case, I selected Y=800
Based mostly on what logic did she decide these values? Why did not she use any math to search out that these are the perfect values?
She merely picked random values with no specific logic.
This explains that she copied the primary a part of my article to make her article look complicated and prolonged. For me, this makes the article seems to be unhealthy since you are losing my time with complicated math to say on the finish that “I’ll decide this worth as a result of it seems to be good”. It would not make sense.
One other statement will be made: If we omit the primary half speaking in regards to the “parabolic curve” the remainder of the article is one thing very fundamental. She is constructing an animation by chaining easy animations and one in every of them is utilizing cubic-bezier.
She first begins with one thing complicated with math, equations, and exact values then on the finish we now have one thing very fundamental. That is fairly suspicious and confirms that she copied that first half to “improve” her article and have an opportunity that Smashing Journal settle for it.
I additionally problem anybody to search out one article the place cubic-bezier is used with huge values. You will see that nothing as a result of such utilization will not be frequent and what I did is a “hacky” approximation that requires particular values that comply with particular guidelines to make it work with out situation. My mind can not settle for {that a} coincidence permits one other individual to have the identical thought as mine with the identical values and the identical construction.
I simply need to remind you that Smashing Journal has nothing to do right here. They’re additionally a sufferer of such habits and so they determined to rectify this however we stumbled upon an creator who wished to assert her innocence till the top with no actual proof.
