Today I Learned

5 posts by krzysztofgolasik

SASS - Comments indent matters

As you might know, SASS has pretty nice nesting feature:

.selector
  color: red
  font-size: 12px

and SASS allows you to put comments, but beware of your comment indent because:

This looks completely fine in this IDE right?!

Yeah… but how does compiler see that?

… Boom!

.dark-theme
 // variables 
  @import 'base/dark-variables'

 // fonts
  @import 'fonts/dark'

Gray gradients on Safari

On Safari browsers gradients that includes transparent color might seem to be more gray(ish) than on other devices:

Typical look: Typical look

IOS mobile: Gray Safari look The mid part seems to be gray instead of light red.

So you have styles as follows:

.a {
  background-image: linear-gradient(#f00, transparent);
}

.b {
  background-image: linear-gradient(#f00, rgba(0,0,0,0));
}

.c {
  background-image: linear-gradient(#f00, #00F0);
}

.d {
  background-image: linear-gradient(#f00, #f000);
}

Which result on desktop is: Desktop elements

But on IOS mobile devices: Safari elements

As you might have already noticed, IOS cuts out the alpha part from color and use it like a mid-gradient part.

In case A and B it would be #000 (black)

In case C it would be #00F (blue)

In case D it would be #F00 (red) which is a result we expected from the beginning.

Codepen if you want to test it on your own: Link

ReactDatePicker Day off in Summer time issue

If you’re using react-datepicker, and the last time you’ve tested your date-picker was in winter time or sooner, please check if your date-picker still works properly.

Issue:

<DatePicker
  dateFormat="DD/MM/YYYY"
  onChange={val => this.setValue(input, val)}
  selected={input.value ? moment(input.value) : null}
  />

Seems pretty basic, right?

Date displayed:

React-date-picker displayed value

Real value:

Real value of date-picker

Solution:

Add

utcOffset={0}

to props in your react-date-picker.

<DatePicker
  dateFormat="DD/MM/YYYY"
  onChange={val => this.setValue(input, val)}
  selected={input.value ? moment(input.value) : null}
  utcOffset={0}
  />

You can read more about this issue Here.

Unicode special characters on IOS Mobile Safari

Issue

I’ve created custom checkbox using unicode checkmark: ✔️

Checkbox looks like this: Safari checkbox It looks the same on every browser/device except IOS mobile Safari, where it looks as following: Safari checkbox The problem is that both screens presents unchecked state, but on IOS Safari it looks more like it’s checked.

It turned out, that mobile Safari is the only one which translates ✔️ into emoji, which colors cannot be changed in any way.

Solution

To prevent Safari from translating special symbols into emoji add Variation Selector-16:

For HTML like this:

<p>✔&#fe0e;</p>

For CSS content like this:

content: '✔\fe0e'  

Where fe0e is mentioned above: Varation-selector-16. This variation code can be found Here