frontend

Stand Out of the Crowd with Fresh Animated Website

Stand Out of the Crowd with Fresh Animated Website
in Front-end | September 9, 2020

At a time when most businesses are selling their goods and services online, having an attractive website is a must for every company. Frontend development is a great option for building an online resource that will be both responsive and user-friendly. From a wide range of available solutions, many entrepreneurs are choosing an animated website […]

Automatic layout testing with BackstopJS

Automatic layout testing with BackstopJS
in Front-end | April 15, 2020

Hi, developer! A frequent problem of a layout designer is that he corrects styles in one place, but he sees changes in several places. And the layout designer notices it too late. In this post, I will talk about regression testing. The essence of the method is that you take screenshots of the site (not […]

Animating Elements Using the MotionPath Plugin

Animating Web Elements Using the MotionPath Plugin
in Front-end | January 21, 2020

MotionPath is one of the new animation features in GSAP 3. This plugin allows you to turn any path from SVG into the motion path of your animated element. Beginning of work: Connecting gsap Connecting MotionPathPlugin. It needs to be connected separately, since it is not part of the gsap kernel. Next we create the […]

Animation of elements when scrolling a page using GSAP

Animation of elements when scrolling a page using GSAP
in Front-end | January 14, 2020

Let’s consider creating an animation of elements when scrolling a page using a specific task as an example. What do we have The section where two blocks are placed (fig. 1). On the left there is a title and a block with icons (1), on the right there are blocks with text (2). Hereafter, the […]

Developing of WordPress theme – Main definitions

Developing of WordPress theme
in Front-end, Wordpress | January 3, 2020

Main definitions Theme WordPress theme – it’s a common design of the site that includes colour, graphics, and text. The theme – this is what is sometimes called ‘skin’ or ‘template’, but it’s neither one nor the other. ‘Skin’ and ‘template’ is a decoration of the site. WordPress theme is a place where the code meets […]

2 Javascript functions to speed up the layout creation

2 Javascript functions to speed up the layout
in Front-end | December 15, 2019

Hi, developer! Recently, our team thought that some things we do too often, and we need to optimize these processes. We have written 2 functions that help us to slice faster. To use these functions you need to connect jQuery (even if you have declaimed from it, connect it temporarily). Collect classes from the BEM […]

How we use SVG sprites

How to use svg sprites fronetnd blog
in Front-end | November 27, 2019

Hi, developer! When making a layout from PSD, icons are often inserted in SVG format, and if not, we ask them from the designer. Earlier we used icon fonts, but recently saw the advantages of sprites and decided to try to play with them to place them into the development process. We like icon fonts, […]

Creating a styleguide with SC5

Creating a styleguide with SC5 - сreate a library of blocks
in Front-end | November 16, 2019

Hi, developer! When developing large projects, it is often necessary to create a library of blocks. This allows you to make your project more modular and controllable. Such library can be created using sc5 styleguide. In this lesson, we use sass as a style preprocessor and gulp for automation. SC5 also works great with other […]

Organizing form elements with pug

Organizing form elements with Pug
in Front-end | November 12, 2019

Hi, developer! In order to layout faster and to support the project in an easier way, we have made a pug mixin for form elements. It looks like a big sausage code: However, in reality it is a very simple mixin to use. With it, we can do the following types of form elements: input(type=”text”) […]