ReactNL 2016: How it was

ReactNL review

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 →

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

support of the currentColor keyword

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 →

How to debug JavaScript unit tests

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 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 →

How to convert CSS3 animation in *.gif

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 →

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

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.

On of the most well-known bug from that category is the fact that background images are not displayed in the Outlook if they are added to the markup through styles or/and background tags. After some googling it is possible to find the hack – use VML to display an image. Here you can find the good working code generator for this purpose – Bulletproof background images. Most oftenly you code snippet for this part of the email would be looking like this:

 This code works fine. The problem comes when you need to place some text over this image. If you just add the text between two <div>, in all email clients in spite Outlook you will see text where you have placed it using css rules on the <td> (valign, vertical-align, text-align etc.). In the Outlook your text will appear in the top left corner over the background image. So, how to be in this case? Let’s imagine, that you need to place the text in the vertical and horizontal center of the background image. To align your text in the horizontal center surround your text or your piece of code by the vml tags <center></center>. Align content vertically is a little bit harder. For this, you need to wrap your text or a piece of code in the <table>  tag. Pay attention for adding height to the <td> tag inside this table. The final solution would be looked like this:  

Notice that I have removed color tag from the <v:fill> tag. For some reasons if you are inserted some peace of code (with <div> with styles for example) the fallback color is shown in spite of background image in the Outlook. The image become available only after user clicked on the area where the background picture must be.

If you have your own hacks how to work better with email template creation – share in the comments!