Category Archives: development

kostia_lev30.05.2023

hey, Let’s say you have image tag and src link appears to be incorrect one: image does not exist for that address. We can use onError img attribute to add handler for this situation. Below I will add React code as example. In the snippet, we added fallback in case our src is not available.

kostia_lev02.12.2022

Safari ships with conservative cross domain cookie policy. It means that if website on safari calls other api on other domain and this api returns set-cookie header, it will not work on Safari, cookie will not be set eventually. Having this issue in my recent project I had to come up with a workaround. Proxy […]

kostia_lev19.06.2020

Sometimes you need to do something like this: The issue here is, that most probably makes hard for your fellow developer to read and understand that code because he/she does not expect array type to contain any custom fields. But still you might have reasons to do that, for example, ‘someArray’ is created in other […]

kostia_lev04.05.2020

Let’s create Javascript class and object with this new class: class Rectangle { constructor(height, width) { this.height = height; this.width = width; } getHeight() { return this.height } state = ‘some state’ } const rect = new Rectangle(1, 2); rect._proto_.state undefined rect._proto_.getHeight ƒ getHeight() { return this.height } rect.state ‘some state’ As you see, methods […]

kostia_lev01.04.2020

Today I would like to discuss two methods of sharing state between components. Say, we have record detail page, which is page for viewing record data. It has summary component inside. 1) Container – component design pattern. Here Container deals with data fetching and passes the data to subcomponent. After closing page fetched data gets […]

kostia_lev07.03.2020

Why do you need to unsubscribe of observables in OnDestroy hook? Observable can emit multiple values, so if you want to stop evaluating logic after destroying (closing) component you would need to call unsubscribe If component is closed and request is still pending the unneeded logic could evaluate after component is closed And sometimes it […]

kostia_lev02.02.2019

There is no shallow testing in our loved Angular. So, to test only your component without rendering children, you would need to use stub components in your TestBed. If you are bored to create stub components manually, this article is for you. We will use Angular/Schematics for this. [updated] Please install schematics-cli beforehand and make […]

kostia_lev26.05.2018

Often we have to use libraries that make development easier. For example Angular Material. But currently it does not support extending/overriding of modules. Say you want to insert some html inside tabs component, between header and body. I would like to share my way of solving the issue. If you have any other ideas on […]

kostia_lev03.02.2018

I would like to share here a method, which I use for children passing to ‘slots’. Say, for example, you need to develop menu with different backgrounds for menu items: <div class=”my-menu-parent”> <div class=”my-menu-item-red”> <a href=”#”><img src=”http://fullhdwall.com/wp-content/uploads/2016/09/Best-World.jpg” /></a> </div> <div class=”my-menu-item-yellow”> <span>My second menu item</span> </div> <div class=”my-menu-item-blue”> <span>My Blue menu item</span> </div> </div To […]

kostia_lev18.09.2017

CSS: creating responsive element with a padding-bottom: % trick

<style> #rubber { padding-bottom: 100%; width: 100%; position: relative; } #inner { position: absolute; height: 20px; width: 20px; top: 50%; left: 50%; margin: -10px 0 0 -10px; } </style> <div id=’rubber’><div id=’inner’></div></div> CSS: padding-bottom in percents is calculated based on width of the parent. Thus we get container(div#rubber), which height will depend on width of […]