DEV Community: Natalia

[Boost]

Natalia — Wed, 25 Feb 2026 12:01:29 +0000

Abdelrahman Ismail

Feb 24

Once Upon a Time, Writing Code Was Fun

#ai #programming #development

131

Comments 51

4 min read

box-decoration-break property

Natalia — Mon, 20 Jan 2020 23:31:40 +0000

Intro, motto, greeting or tagline. A brief paragraph is the first thing you can see on most of the websites when you enter them. Most of them are multi-lined but also boring and plain. While breaking the text into multiple pieces you can create interesting effects that can convince the recipient to stay longer on the page. By adding just one parameter to the CSS you can make it way more interesting. Let's see how we can achieve it.

The box-decoration-break property specifies how an element will be rendered across multiple lines, columns and pages. It is really important to wrap your text in span tag instead of div to make this attribute work properly. Depending on what value it will get - it may break the element into fragments with new borders and space or let it stay as a continuous box at a line break. The property takes five values - initial, inherit, unset, slice and clone. For us two most important are:

Slice - default value - keeps the break very visible as it doesn't copy the decorations at the edges. They are applied to the element as a whole and break at the edges of its fragments. Additional properties like border, padding or box-shadow are not inserted at a break.
Clone - copies the decorations and applies them to the element as if they were individual parts. Each box fragment is rendered with specified properties wrapping each of it independently.

Both described values have a meaningful impact on the appearance of other properties. Different behaviour will have background, border, box-shadow, margin and padding attributes. As playing with spacing may be pretty easy to imagine the rest of them are more difficult to visualise without examples. To make it more clear let's talk about the difference between each property separately.

Let's start with the background property first. While using slice value the whole text is treated as one line and cut it into sections without multiplying the colour effect. An interesting thing you can observe in this example are the spaces between the words. The spacing on the breaks behaves exactly the same as background - the paddings are not applied to the edges. On the other hand, the clone value clips the background to the shape of in each line and applies it across all the lined of the text. For a better comparison of the effect, I decided to use a gradient instead of a solid colour. See the example below:

border is next really useful property that changes depending on box-decoration-break value. With clone the border is cropped in the edges. With slice the shape is copied across the broken lines along with padding and margin. Additional customisation which you can add to this attribute is border-image. By using it with image or gradient it will behave in the same way as colours in the previous example.

As we've seen in the above examples box-decorations-break property opens up a lot of possibilities in creating taglines and intros for websites. It lets us control how the box decorations will be drawn across the edges of the sliced element. Thanks to that we can create interesting designs across the lines of the text. It's really important to remember that despite using the -webkit prefix - the property still lacks any support in Internet Explorer and Edge. For more information please head over to the official documentation in MDN.

September’s CodePen challenges

Natalia — Mon, 07 Oct 2019 21:39:38 +0000

September’s CodePen.io challenges brought us new fun opportunities to improve our programming skills. The theme was really unique – each week we had to follow a different type of a limitation. I’ll show you what I’ve designed with a short description. So sit comfortably and let’s embrace the limitations together!

The first week of the challenges was called “Think small”. Its limitation was a specific size within which we had to design – 100 x 50 pixels. To avoid creating something simple like a button I started looking for inspiration. The theme reminded me about old retro games and pixel arts which had this type of restrictions. As a huge fan of PacMan – the choice was easy. My main idea was to create a loader where a character just appears on the left side and disappears on the right side. The difficulty I had to embrace was to find all the colours from the first edition of the game. With established colour palette I’ve created the basic animation of Pacman. But it wasn’t enough. After adding small bits like border on the top and the bottom I’ve decided to add running away ghosts and this was a nightmare. I’ve never expected that creating these creatures would be so difficult! But at the end of the day, I am satisfied with the result.

Week 2 was focused around number 5. Participants had to create anything but the limitation was to use at most five lines of code for each language. “5 lines of HTML, 5 lines of CSS, 5 lines of JavaScript”. Of course, a line is a really subjective thing as you can minify your code – but there is no fun in bending the rules.

The most challenging part this week was to come up with an idea. Each design I tried to create wouldn’t fit in 5 lines of code. Finally, I’ve decided to create an animated loader. Each dot had been created as SVG and looped in Slim. To use SCSS effectively I wrote only keyframes of the animation sequence. Styling elements was the last bit I struggled with. In order to do that I’ve created an array with colours in JavaScript and assigned each of them using loop function. Thanks to that I could also attach the delayed animation to every element.

The 3rd week was the most difficult one so far. The visual output had to be reached by using black and white colours along with the letter “A”. My main idea was to use different types of font to create a landscape. In the beginning, I wanted to create a beach where Turret Road would be used to create houses and Monoton to form waves. Unfortunately, I couldn’t find enough free to use fonts to create everything I needed. I’ve decided to create a flower with animated butterflies after scrolling through Google Fonts for a long time. And here it is!🙂

The last week’s challenge came up looser as the only restriction was to use arrows as a brush. And as you know there are a lot of types of arrows – twisty ones, long ones, short ones, etc. I started to look for inspiration in wallpapers (!) and I found a blue Japanese pattern which I really liked. I decided to achieve it by rotating different colours of squares nested one inside the other. In the end, I’ve switched colours to greenish palette and add a small box-shadow below each arrow to create depth.

It was my first participation in CodePen’s monthly challenge. I’m really surprised how much it allowed me to explore my imagination. I had always wanted to create a unique loader and finally, I had an opportunity and idea to do that. What’s more, I fell in love with patterns and I definitely will create more of them from now on. Today a new theme for October’s challenges has just been announced and I’m already thrilled with what’s coming next!

backdrop-filter property

Natalia — Tue, 10 Sep 2019 17:33:37 +0000

“Frosted glass” effect kicked around the Internet more than 10 years ago and it’s still popular. You can create a faded background effect and other complex design effects with just a single line of CSS!

The backdrop-filter is an animatable CSS property which allows applying various graphical effects to the area behind an element. Thanks to this property you can achieve different effects such as blurring, colour shifting or frosted glass. The “backdrop” basically describes everything of the drawn content that lies behind the specified item. While using it in SVG it applies an effect to a container but excludes the defs tags. Element or its background needs to be at least partially transparent to see them because they are applied to everything that is behind.

While using the backdrop-filter property you can choose from many filter values:

blur() – applies a distance measurement within which pixels are scattered. It makes the element less clear. Strength is indicated by the number you use. The higher the value, the less distinct item will be.

blur effect

brightness() – adjusts the brightness of the element’s colour. If you set the value below 1 the result will be darkened and numbers above 1 will lighten it. The filter accepts percentage or any number from 0 to infinity.
contrast() – defines the element’s contrast by increasing the already light areas and decreasing the darker ones. It takes every pixel of the item and adjusts the difference between the light and dark values.
grayscale() – changes the amount of light of the element while intensifying its colours between black and white. When you set the value to 1 or 100% the element will be completely grayscaled.

grayscale effect

invert() – generates the opposite colour of the element.
hue-rotate() – specifies an angle around the colour circle that the element will be adjusted by. You can provide value from 0 to 360 in either degrees or radians. Each degree has its own colour – 0 is red, 120 is green and 240 is blue. That means if you have green pixel in your element and set the value to 240 your red pixel will be blue.
none – doesn’t apply any filter to the backdrop.
opacity() – applies transparency to the element’s colour.
saturate() – changes the intensity of the element’s colour making it appear more or less vivid. Setting the value to 2 (or 200%) will double the saturation. Decreasing the value will make the item look more greyish and blend.

saturate effect

sepia() – applies a sepia tinge to the element what gives a warmer and more antique feeling.

Check out an example of all of them below:

Please note that this property is not compatible with Edge and Internet Explorer. For more information, you should check the official documentation.

What do you wish to know about JavaScript when you were in university?

Natalia — Thu, 05 Sep 2019 19:56:27 +0000

Hey guys!

I was asked if I would like to make a couple of lectures at the university about plain JavaScript (basics). And I would love to but I'm not sure where to start.

So here we are. Some of us are years after school/uni and some of us are still there. What do you wish to know about JavaScript when you were in university? And what would you like to say to students right now?

Any tips, help, ideas or even articles are welcome! 😁

"Waiting times" at work.

Natalia — Mon, 19 Aug 2019 15:01:41 +0000

Hey guys. We all know that this happens - waiting for a new project, a new task... Sometimes it happens for days or weeks. What do you do then?
Normally I read about my technology stack, do some challenges, look for inspirations on Dribbble or CodePen. But what do you do? Can you recommend something creative?

background-blend-mode property

Natalia — Mon, 12 Aug 2019 08:52:54 +0000

Some people think that stunning image effects can be achieved only in graphic editors – nothing could be further from the truth. Adobe’s Photoshop did not invent blend modes and you can use them to style your image dynamically with CSS.

In my new blog post I described CSS background-blend-mode property with examples: background-blend-mode property

And small CodePen preview of all properties:

Enjoy and let me know what you think :)

You music playlists for productivity?

Natalia — Fri, 09 Aug 2019 09:23:07 +0000

Some people like to listen to classical/ambient music while working, others to rock or dubstep. What is your type?
Please share some playlists or artists! I'm looking for something fresh! :)

What type of developer are you - light theme or dark theme?

Natalia — Sat, 03 Aug 2019 14:54:40 +0000

A lot of people say frontend developers use dark themes for their code editors and light one are used by backend developers. Do you agree with that statement? And why do you like light/dark themes you are using?

What do you hate the most in CSS and why?

Natalia — Wed, 31 Jul 2019 20:28:19 +0000

A lot of people hate CSS and styling. Like it's a rule that CSS is bad and unlearnable for them. And I'm not one of them. I love it (sorry not sorry for being weirdo :P ). But I want to know what you hate in CSS? And why? What is your point of view?

Connecting Redux Form with React Redux

Natalia — Sun, 28 Jul 2019 11:27:58 +0000

Dealing with forms in React can be troublesome sometimes. You need to take care of proper state management, smooth user experience, simple form declarations, reusable components, etc. But the reason I moved to Redux Form was validation. I wanted to make the implementation of forms easier and quicker without adding a lot of code to my page's components. But I hit the wall when I tried to connect Redux Form with React Redux.

It wasn't the first time I was doing this so I did not expect any difficulties. I was wrong. With up to date dependencies I tried many different approaches while connecting reduxForm and connect() function. From putting one inside the other to connecting exported component with each function separately. Nothing was working properly. Regardless of what I tried, I ended up with this error message:

Uncaught Invariant Violation:
You must pass a component to the function returned by connect.
Instead received {"displayName":"ReduxForm",
"defaultProps": {destroyOnUnmount":true, "form":"loginForm", etc.}}

I decided to look for help on the Internet. There was no straight answer helping me with what am I missing or how should I do it properly. And apparently, people still struggle with this problem. Checking StackOverflow and other forums resulted in finding only outdated working versions. Even official example from redux-form documentation wasn't working! I've decided to try baby steps method by connecting each part separately in different files. I ended up with an additional file container.tsx where I connected the component at a higher level. Let's see what happened.

First, let's connect a form component I created earlier with Redux Form:

import React from 'react'; 
import { Field, InjectedFormProps, reduxForm } from 'redux-form';

export interface IDispatchProps {
  //...
}

const LoginComponent = (props:IDispatchProps) => (
  <form>...</form>
);

export const LoginForm = reduxForm({
  form: 'loginForm',
})(LoginComponent);

Next, let’s see how we can implement a container for that component:

import * as React from 'react';
import { connect } from 'react-redux';

import { LoginForm, IProps } from './LoginForm';
import actions from './actions';
import selector from './selector';

const LoginContainer = (props:IProps) =>
  <LoginForm {...props} />;

export default connect(selector, actions)(LoginContainer);

What we are doing is we take the created LoginComponent function and wrap it with reduxForm. In container.tsx file LoginContainer function will pass our props to the imported component. In the end, we use connect() to create communication between our container and store props. The most tricky part starts if we want to add TypeScript to our form and do not use any at all! Leaving basic component's props will throw the error saying our props do not exist in this component. But we just passed it, right?

TS2559: Type '{ loginAction: () => any; }' has no properties in common with type
'IntrinsicAttributes & IntrinsicClassAttributes<FormInstance<{},
Partial<ConfigProps<{}, {}, string>>, string>> & Readonly
<Partial<ConfigProps<{}, {}, string>>> & Readonly<...>'.

It took me at least an hour to figure it out and answer "why?". I decided to reach for help to the Internet again but the only answers I found weren't clear what was happening and where I should put my props. After a couple of tries, I finally found a solution which was sensible and I was happy with. First of all, in LoginForm.tsx file we need to create an interface IFormProps with the names of the fields that are in our form. Next we need to import type definition of InjectedFormProps from redux-form library and combine it with our props interface. InjectedFormProps accepts two parameters: FormProps = {} and P={}. The first one represents form data which will be put in the form and the second one is our component's props. Theoretically, you can leave both objects empty. But that's not why we are using TypeScript, right?

import React from 'react'; 
import { Field, InjectedFormProps, reduxForm } from 'redux-form';

interface IFormProps {
  username:string;
  password:string;
}

export interface IDispatchProps {
  //...
}

const LoginComponent =
(props:IDispatchProps & InjectedFormProps<IFormProps, IDispatchProps>) => (
  <form>
    <Field
      name="username"
      component={Input}
      type="text"
      label="Enter username"
    />
    <Field
      name="password"
      component={Input}
      type="password"
      label="Enter password"
    />
  </form>
);

export const LoginForm = reduxForm<IFormProps, IDispatchProps>({
  form: 'loginForm',
})(LoginComponent);

To sum up, if you want to connect Redux Form with React Redux do yourself a favour and create another file which will be a bridge between those two libraries. And don't forget about InjectedFormProps to combine it with TypeScript. And if you want to see an example check out my working implementation: Redux Form with TypeScript. Good luck and see you next time! 👍🏻

Nerdy-Girl / Redux-Forms-with-TypeScript

Connecting Redux Form with React Redux Example

CodeMeNatalie

Redux Forms with TypeScript

This project is an example of working implementation of Redux Forms and TypeScript. Whole process is described in my article Connecting Redux Form and Connect.

Website ◦ Blog

Quick start

Clone the repo: git clone https://github.com/CodeMeNatalie/Redux-Form-with-TypeScript.git
Install dependencies
Run the app npm start
Open http://localhost:3000 to view project in the browser.

Enjoy 💻

View on GitHub

Important notice:
Article and example above were created with redux-form 8.2.2 and react-redux 6.0.1.