Rotate CSS Property - Learn CSS Transforms by Building a Penguin - Step 84

[alfonsusac]

Describe the Issue

Individual Transform is recently added to the specification module level 2 and allows developer to use rotate: 90deg as opposed to transform: rotate(90deg). Most browsers has adopted this feature and I can see it simplifies the coding experience as it is easier to remember.

Obviously it is new and might be a concern in backward-compatibility, however it would be weird to create a website that uses the rotate transform to support old browser in general.

Affected Page

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-transforms-by-building-a-penguin/step-84

Your code

.foot.left {
  left: 25%;
  rotate: 80deg;
  /* transform: rotate(80deg); */
}

.foot.right {
  right: 25%;
  rotate: -80deg;
  /* transform: rotate(-80deg); */
}

Expected behavior

It should be accepted

Screenshots

System

• Device: PC
• OS: Windows 10
• Browser: Brave
• Version: Latest

Additional context

Correct me if I'm wrong, I am still new in using GitHub with other people :)

[Sboonny]

There are multiple steps that require, using transform: , I have listed them below.

I think the test should accept the values, because they are rendered correctly and consider a correct syntax.

Should the description be changed?

The files

• step 16: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md
• step 23: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md
• stop 84: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md
• step 90: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md
• step 91: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md
• step 92: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
• step 97: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md
• step 98: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
• step 99: https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md
• step 101:
  https://github.com/freeCodeCamp/freeCodeCamp/blob/ccc4a82016c6bb86b46f10a18e8b40fe756ffef7/curriculum/challenges/english/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md

[DylanDevelops]

@Sboonny could you describe exactly what I need to change so I can go through all of these and update them accordingly :) I'm just very new so I might need a handhold through this process but I still would love to make these changes!

[Sboonny]

@Sboonny could you describe exactly what I need to change so I can go through all of these and update them accordingly :) I'm just very new so I might need a handhold through this process but I still would love to make these changes!

We are using chaijs to test the code campers input, they are true and false statements.

If the value decided in assert function argument exist: example assert.function(value) //true, the camper will pass the tests.

So the tests like these assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform); need to be changed to account for the possibility of a camper not typing transform, as well.

You can use logical operation or change the code entirely, up to you

[DylanDevelops]

What do you think is the best solution? This will be my first time having a pull request that actually changes coding

[Sboonny]

@DylanDevelops, I have no idea if people want to change it or people want it to be changed. And I am too sick to think of something

here is an example of logical example, I haven't tested it, in Gitpod, so use with cautious.

const transformCheck= new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform
const skewCheck= new __helpers.CSSHelp(document).getStyle('.left-mountain')?.skew
assert.notEmpty(transformCheck || skewCheck);

If you think more is needed, please head to our discord or the forum, our moderators there could give guidance, or tag me there.

[DylanDevelops]

I'll tag you cause I might need more help. Feel better!

[bbsmooth]

it would be weird to create a website that uses the rotate transform to support old browser in general.

I'm going to disagree just a little here.

Can I Use: CSS property: rotate

Firefox has had this for a while now but Chrome/Edge have only had it for the last few new versions. People from all over the world use this site. Not all of them have the latest versions of things. If the rotation was crucial for my website then I would not use the rotate property if I wanted everyone to see it.

I guess it depends if we are OK with some people not passing this step and the only solution is to upgrade their browser and they might not be able to.

[moT01]

I think transform is still the norm, so I feel like I would prefer the lessons stick with teaching that. Although, perhaps we need a deeper conversation on it - what should we teach in a step when a newer property/syntax/whatever is only partially supported or fully supported, but only on newer browsers. Many people use older browsers and a site should try to accommodate as many browsers (users) as possible - so I think they would lean towards using something a little older, but with more support until the property is more supported.

I would vote to leave the lessons to use transform, but if we want to allow either syntax to pass - I'm would be fine with it in most cases. There may be some lessons where we don't want to - I would have to look through them all.