Events

ReactNL 2016: How it was

Posted on by Olena Sovyn / 0 Comment
ReactNL review
Reading Time: 3 minutes

On the mid of this October, I was on a great conference dedicated to the React.js in the Amsterdam – ReactNL. You can check the program of the conference here http://reactnl.org/#program. As there were a few streams I was not on all the speeches, but I will try to do my best to share what I have heard (and yes, I think there would be a video from all the speeches). Originally I have created this small talk review for my teammates that were not at the conference, so they were able to get what there was.

1) “Styling React.js application”. Really good talk about how the styling is currently done in the react components. Max had compared all existed technologies (one of the slides from his speech https://pbs.twimg.com/media/CupKNldWIAA39zp.jpg) and presented new one that he + open source community are currently developing – styles-components https://github.com/styled-components/styled-components. It’s great! )) Still raw, but it is great do not have to make state changes just for handling hover state for the button. I have tried it on the small project on weekend and it’s interesting to play with and very suitable to use.
Continue reading →

Books

currentColor as a first variable available in the pure CSS. Almost :)

Posted on by Olena Sovyn / 1 Comment
support of the currentColor keyword
Reading Time: 2 minutes

Finally, I have found time to read book CSS Secrets (Lea Verou). I have heard different feedbacks about this book but decide to obtain my own impression. I am currently in the middle of the reading, but as I read I have found pieces of some interesting information, that I never heard from anywhere before.

One piece of such information is about currentColor. Accordingly to the W3C information currentColor keyword hold the value of the color property. This keyword can be used to assign the color, that the font in the element currently has, for any other property, that expects to obtain the color value (for example, background, border-color etc.).

For better understanding I have created an example, where the element has the box-shadow with the same color as the font inside it is.

If to check CanIUse, we would see that this keyword is widely supported in all modern browsers. As we see exception is only IE8: Continue reading →

JavaScript

How to debug JavaScript unit tests

Posted on by Olena Sovyn / 0 Comment
Reading Time: 3 minutes

Recently we have a little bit more free time on the project, so we decided to dedicate it to improving our skills in writing unit tests. And after some time, we came up with the situation, that our tests were very unstable. It is not easy to understand why your test fails when it fails every time when you run Karma. Even more complicated thing is to understand why your tests are failing from time to time, and from time to time they all passed, even if you did not change anything in your code.

I did not have a prepared solution for such type of the situation with unit tests, but I had big desire to make our unit test more stable. Here are the steps that I have done.

Checked the log. The complexity of my situation was that the error was not in our custom code. The log showed that the mistake came from the core jQuery code. The error text said something like the “undefined is not an object (evaluating c.nodeType)”. And there also was the source of the error and the line number on which error happened. Continue reading →

Tricks

How to convert CSS3 animation in *.gif

Posted on by Olena Sovyn / 3 Comments
Reading Time: 3 minutes

In last few years, it is trendy to provide better user experience by adding small changes in the interface using css3 animation. Currently, experiments with this feature take us far away from simple effects. If you have a good imagination and tech skills, you can even create the solar system in the pure CSS.

See the Pen Solar System animation – Pure CSS by Malik Dellidj (@kowlor) on CodePen.

However, in production, we still use css3 animation for more pragmatic tasks, for example for creating pure CSS spinners. There are a lot of solution for beautiful spinners in open-source.

See the Pen Sit ‘n Spin by esjay (@esjay) on CodePen.

They are compatible with most modern browsers, but sometimes for some reasons, the need to have the same spinner in gif format can arise. For example, if the same spinner must be used in the third-party services, that are included in your solution in the iframe. Or if you need compatibility with very old browsers. The first idea that comes to mind is to search some solution, where you can load your page with the spinner and obtain gif at the end. Here I need to disappoint you. There are no such services. The reason for it is the fact that CSS3 animation and GIF are very different technologies.Continue reading →

Email markup

How to make background image visible in the emails in the Outlook

Posted on by Olena Sovyn / 2 Comments
Reading Time: 2 minutes

Even if you think about yourself as front-end developer from time to time you would be doing some a little bit strange tasks. For me last week this task is creation markups for emails. One of the hardest in this task is to primary test emails markups, that were developed. If you haven’t account at Litmus or at any other systems that emulate mail client you would need just send test emails. If you ever work on the creation markups for the email you know that most of the problems and bugs will come from the testing markup view in the Outlook.Continue reading →