Css on OP blog

Flexbox Guides and Demo

Mon, 02 Oct 2017 07:47:10 +0300

Vocabulary of useful material regarding flexbox model.

React app with Express in production

Sat, 24 Jun 2017 20:46:01 +0300

Password randomizer app which was done with: REST API on Express.js, Client app on React.js, Build with npm, Deploy on Heroku.

Front End Handbook 2017

Sun, 23 Apr 2017 19:11:25 +0300

This is a guide that anyone could use to learn about the practice of front-end development. It broadly outlines and discusses the practice of front-end engineering: how to learn it and what tools are used when practicing it in 2017

A static site with a dynamic search function

Sun, 09 Apr 2017 12:09:08 +0300

A static site with a dynamic search function? Yes. Alternatively to embeddable scripts from Google or other search engines you can provide your visitors a custom search by indexing your content files directly.

JS 30

Tue, 04 Apr 2017 14:51:54 +0300

To fresh memory with 30 day vanilla js coding challenge. Build 30 things in 30 days with 30 tutorials. No Frameworks, No Compilers, No Libraries, No Boilerplate!

Front End Interview Questions

Sun, 14 Aug 2016 11:39:13 +0000

To rock the interview to achieve what you deserve and to improve your concepts about front end technologies, I have consolidated a list of questions and answers. It’s a one stop solution for front end interview process.

Units of measurement: "px", "em", "rem" and other

Wed, 11 Nov 2015 20:17:58 +0000

I will try not only to write about variety of units, but also build a full picture - what and when better to choose.

TOP 10 mistakes when you develop on AngularJS

Wed, 23 Sep 2015 18:40:03 +0000

The top 10 mistakes when beginners start to develop on AngularJS.

Centering in CSS

Mon, 08 Sep 2014 22:54:09 +0000

A fast guide to help centering everything with CSS.

Medium-Style Page Transition

Mon, 01 Sep 2014 22:50:51 +0000

An article on how to achieve Medium’s next page transition effect—an effect that can be seen by clicking anywhere on the “Read Next” footer at the bottom of the page. This effect is characterized by the lower article easing upward as the current article fades up and out.

Article Intro Effects Examples

Tue, 19 Aug 2014 12:46:59 +0000

Most of the effects we tried are highly experimental; animating large images can become a bit sluggish, also because a couple of transitions happening at the same time. The effect gets triggered when scrolling begins or when the button is clicked.

Canvas-off icon navigation with an animated border effect

Mon, 11 Aug 2014 21:11:48 +0000

CSS Transforms

Sun, 03 Aug 2014 22:13:20 +0000

So what are transforms and transitions? At their most basic level, transforms move or change the appearance of an element, while transitions make the element smoothly and gradually change from one state to another.

Bootstrap 3: Components

Sat, 02 Aug 2014 16:59:51 +0000

Set of standard components from popular library.

Bootstrap 3: CSS

Thu, 17 Jul 2014 20:10:04 +0000

A detailed look for implementation of UI popular library.

Class manipulation in Javascript, jQuery and AngularJS

Wed, 02 Jul 2014 23:24:37 +0000

In this article, I would like to create short reference for how add/remove/toogle class in pure Javascript and with framework.

Fluid three column layout with positioning, floats, tables and flexbox

Fri, 18 Apr 2014 11:09:46 +0000

In Web world, fluid layout with 3 column is the most flexible and customizable layout. Mixing percentages and pixels for specify width of column allows create different layouts, for different task.

Original effects with CSS transition

Tue, 01 Apr 2014 14:48:05 +0000

The power of CSS3 is enormous and in this post I create appearing effect of “Sign In Form” using differn style in each example.

Fluid two-column layout with float and flexbox

Mon, 31 Mar 2014 20:49:09 +0000

Two-column layout allows effective use browser space. Layout doesn’t require hard work and it can used with combining column in pixels or percentage.

Data URIs

Tue, 11 Feb 2014 12:48:12 +0000

Did you know that you don’t have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs.

Prevent CSS Caching in Wordpress

Thu, 02 Jan 2014 19:50:42 +0000

If you update your WordPress theme’s style.css, you may have noticed that you have to “force-reload” your site in your browser to see the changes. This is because your browser keeps a copy of the CSS cached on your hard drive.