Check out "Do you speak JavaScript?" - my latest video course on advanced JavaScript.
Language APIs, Popular Concepts, Design Patterns, Advanced Techniques In the Browser

A short introduction to CSS nesting

posted in CSS3 on 2023-09-16   css nesting modern

I did use Sass and Less in the past, and one of my favorite features was the nesting. Not only me but the whole community was asking about that constantly over the years. The browser vendors heard that plea, and today, we have CSS nesting.

read more

My new and shiny tool for live demos - Demoit

posted in JavaScript on 2018-11-05   demoit resources live coding code demo tool css files tools writing don t

I had some time during the weekend and decided to work on my slides for an event at the end of the month. I reached the part where I have to do a live coding session and I was wondering what tool to use. At the end I created my own called Demoit. This is a short article explaining how it works.

read more

React and separation of concerns

posted in JavaScript on 2018-05-27   loading users return error component react function data app css

Years ago when Facebook announced their JSX syntax we had a wave of comments how this was against some of the well established good practices. The main point of most people was that it violates the separation of concerns. They said that React and its JSX are mixing HTML, CSS and JavaScript which were suppose to be separated.

In this article we will see how React and its ecosystem has quite good separation of concerns. We will prove that markup, styles and logic may live in the same JavaScript land and still be separated.

read more

NADCAST.06 with Cole Peters

posted in NADCAST on 2017-07-10   https cole css

Episode 6 of my podcast with Cole Peters. We had a nice chat about the good old days, designing for web and CSS.

read more

8 Years of blogging

posted in Must-see on 2017-01-02   javascript top year years pseudo elements css visits blog convert html string practice node js

The first article on this blog is published on 22th of August 2008. It’s about a website which I saw at FWA. Eight years later I’m still publishing stuff here and because it is the beginning of a new year I decided to give you some statistics.

read more

Let's write, not generate code. Thoughts about naming stuff.

posted in JavaScript on 2016-07-03   code data html classes naming css good tags

I’m writing code for approximately ten years now and at some point the word “writing” became more important then “code”. I found out that it is easy to generate code but it is difficult to write code. Writing means creating something meaningful. Something that other human beings will read. The code is indeed sent to machines and they do understand ugly code. Not the same for humans though. An important part of our job is to make sure that our code is clear for other teammates.

read more

CSSSteal - Chrome extension that extracts CSS

posted in CSS3 on 2015-09-17   css styles var section el small li element rules

We had to update some of our old pages adding new elements. This means mixing old and new code. Placing HTML markup and JavaScript in legacy pages is not that difficult. Yes, it brings some issues but they are easily solvable. However, the CSS is a whole new story. That’s why I did CSSSteal. It helps me extract the needed styles.

read more

My front-end performance case study

posted in Must-see on 2014-08-25   css file blog time page images performance pagespeedinsights main

I’m reading and watching a lot of interesting things regarding client-side performance. I’m interested in the browser’s processes happening before and just after the page’s load. There are tons of stuff to think about. Before a couple of days, I joined the online workshop of Vitaly Friedman. I had a great time and learned some clever facts about performance optimization.

read more

CSS variables are here for ages

posted in CSS3 on 2014-08-13   div content font size color container css width div class footer variables

Every front-end developer that starts reading about CSS preprocessors thinks “Oh, finally variables in CSS". Indeed, the ability to create and use variables in CSS makes our code much more flexible. However, I think that there is no need to use a preprocessor to create flexible stylesheets.

read more

ToDoMVC with AbsurdJS

posted in JavaScript on 2014-07-26   model function js todos app main css component absurdjs event

You've probably heard about ToDoMVC project. It's same ToDo application made with different frameworks. It's interesting how the same problem is solved by different programmers following different concepts. This article is about making the ToDoMVC application with AbsurdJS.

read more

The three rules of the good CSS architecture

posted in Must-see on 2014-07-15   css projects mess

CSS is easy? CSS is messy! And as a project grows, it only gets messier. You find yourself throwing !important at everything or fighting with long selectors just to get a style to overrule another. Projects eventually become unmanageable and you pray for the next redesign when you can burn it all down and start from scratch.

read more

Node.js application made with Express and AbsurdJS

posted in Nodejs on 2014-06-07   html js function css express content styles absurdjs app

Node.js is one of those new technologies, which are attracting more and more developers every day. Mainly, because it's JavaScript driven, a lot of people are interested working with it. In this tutorial, I'll show you how to use AbsurdJS together with Express. Express is one of the popular Node.js frameworks. However, the other instrument is really fresh one and I hope that you will find it useful.

read more

Codefront.io is around the corner

posted in Must-see on 2014-04-25   developer open io front end css javascript talk speakers interesting conference linz

There are only two weeks left before the international front-end conference in Linz - Codefront.io. It's organized by the guys from WebBox and it's scheduled for 10th of May. You still have a chance to buy a ticket and listen interesting talks about our lovely Web.

read more

Look ma, JavaScript only Off-Canvas menu

posted in JavaScript on 2014-03-25   menu content css links function html position absurdjs isopen

The off-canvas menu is pretty popular nowadays. You know, the little button in the right upper corner which opens the navigation with a slide-in effect. That's what we are going to build in this article. The interesting things is that we are not going to use CSS neither HTML, only JavaScript.

read more

Using media queries in JavaScript (AbsurdJS edition)

posted in JavaScript on 2014-03-04   media css function var width window matchmedia dom html mq absurdjs

If you believe in responsive design you probably use a lot of media queries. That's a CSS feature which gives us the power to add something like if statements. We are able to apply rules only if the current page meets certain conditions. In this article I'll show you how I use media queries in JavaScript.

read more

SASS and Gruntjs (Node.js setting up)

posted in Nodejs on 2014-01-14   grunt sass compass css add based gruntjs grunt contrib compass

I'm writing a lot of JavaScript these days. Even if the project is not Node.js based I'm using it for processing some tasks. At the moment most of my projects use GruntJS. Today I spend some time adding SASS to my workflow.

read more

To all devs out there

posted in Architecture on 2013-11-26   good code don t project make end css server start things

There are few things which I'm thinking about last few months. I summarize them here. Initially, I started writing this article for the company which I'm working for - East Interactive. The material is not meant to teach. It just contains few thoughts of main and I hope that my colleagues will find it helpful.

read more

AbsurdJS fundamentals

posted in JavaScript on 2013-11-11   css api color styles var function absurd absurdjs javascript

AbsurdJS became one of my favorite projects. I spent a good amount of time developing it and it's getting more and more interesting. I also received some positive feedback, so I think it is time to write a bit more about the module and explain how it actually works and what exactly is made for.

read more

CSS: common use cases and architecture at VarnaLab

posted in CSS3 on 2013-08-22   css common cases

Yesterday I made a talk about CSS common use cases and architecture. Floats, pseudo clases, animations, OOCSS, SMACSS, Atomic design and tons of other interesting stuff.

read more

SASS: differences between mixins, extends and placeholders

posted in CSS3 on 2013-08-05   awesome width height mixin body placeholders radius css sass extend awesome

I used LESS a lot. These days I decided to try SASS and to be honest it's a better choice for CSS preprocessor. It just gives me more functionalities and better control on my code. There are few instruments for architecting your CSS logic - @mixin, @extend and placeholders. However there are differences between them and specific use cases.

read more

CSS Challenge #1: expand and center an image

posted in CSS3 on 2013-08-01   image background wrapper width div css center background size cover 200px overflow hidden height 200px overflow

That's first of (I hope) many posts with such an idea. Problems solved with pure CSS. No JavaScript.

read more

Introduction to animations in HTML

posted in HTML5 on 2013-07-30   animation var animations css function element class add

Last few years designers use a lot of animations directly in the HTML. That's of course kinda cool, because you don't need a plugin in order to see their work. There are several ways to make animations in HTML. It's an interesting subject and I decided to make a short research and summarize the information.

read more

CSS: :before and :after pseudo elements in practice

posted in CSS3 on 2013-07-26   content css block text font element width code links height

By definition :before and :after are CSS pseudo elements. You can use them to insert something before or after the content of an element. There are some great articles giving the basics, but I wanted to write down a blog post for the real use cases. Or, at least, to show what I'm using them for.

read more

How to Design Responsively

posted in Design on 2013-06-25   design web mobile content good browser responsive design css

In this article I want to share my thoughts regarding responsive design. I made several talks on this subject and this post is some kind of summary. The article presents concepts like mobile first and design in the browser.

read more

Insert css or javascript dynamically

posted in JavaScript on 2013-06-18   var function css files

That's a super simple function for adding new css or javascript files in the current document. I didn't test it in all the browsers, because I'm using it in the chrome extension and I need only Chrome supported.

read more

Web Highlights #5

posted in HTML5 on 2013-05-30   http web design article unnecessary paints adobe device google street view code organizing javascript css paint times http www html5rocks

Everyday I'm reading or watching something which I find helpful. Normally I bookmark those things, but at the end I have dozen of folders and subfolders which I never check. So, I decided to make such blog post where I'll share valuable things in the net.

read more

Web Highlights #4

posted in HTML5 on 2013-05-15   http performance media queries behavioral breakpoints tools google css transitions great optimize things

Everyday I'm reading or watching something which I find helpful. Normally I bookmark those things, but at the end I have dozen of folders and subfolders which I never check. So, I decided to make such blog post where I'll share valuable things in the net.

read more

CSS: transition from pixels to auto

posted in CSS3 on 2013-05-14   height css problem set content column animation slided auto

As you may know I just updated my web site. There are five columns which nicely slide up and down on a lower resolution. In other words, accordion-like navigation. Initially I made this effect with JavaScript. But there was a bug and I decided to use pure CSS. I wanted to define everything in CSS classes which to add or remove. The idea wasn't bad except the fact that every column contains dynamic content and I wasn't able to set the exact height when the column is slided down.

read more

Web Highlights #3

posted in HTML5 on 2013-04-22   http answer http www html5rocks css paint times design workflow considerations web design workflow responsive web design

A bunch of cool stuff ;-)

read more

Web Highlights #2

posted in HTML5 on 2013-04-10   media queries css regions chrome web app ui adaptive web app asset downloading results query asset downloading media query asset understanding typographic hierarchy browser

Some of the cool and helpful things which I found in the net.

read more

AssetsPack - a friend of the front-end developer (pack your assets with NodeJS)

posted in Nodejs on 2013-03-16   css js file assetspack pack tests data type packing html module

AssetsPack is a NodeJS module which helps in organization, compilation and minification of assets. It's meant to be used in local environment during the development process. It was made generally for HTML/CSS/JavaScript based applications.

read more

Testing with headless browser (Zombie.js + Jasmine)

posted in Nodejs on 2012-10-14   browser function login site expect browser test testing input zombie css selectors

I was planning to post this article a few weeks ago, but today I finally finished the examples and I can't wait to share it. We all know that the testing is a big part of our daily tasks and we should use every existing tool to make our lives easier. I really like test driven development and once I found the concept of the headless browsing I started to think that we can automate every single aspect of the testing. In this post I'll show you how to use Nodejs to test a simple php site.

read more

Why we should think about our CSS

posted in Architecture on 2012-06-05   css browsers block rendering tv device ratio print tv device g print tv e g print browsers download css page browsers download white page browsers experience white page

_The evil that CSS do:- Browsers block rendering until all CSS arrives. With the worst possible experience: white page.- Browsers download CSS they don't need, e.g. print, tv, device-ratio... And most browsers block rendering because of these too- Sometimes CSS blocks the other downloads too (not just block rendering, but block images and scripts that follow) - when followed by an inline SCRIPT or when it's a CSS in conditional comment for IE_Read the full artcile by Stoyan Stefanov here.

read more

CSS: selecting a specific child

posted in Other on 2011-01-05   span css main span specific child style set

The selectors are one of the most powerful features in CSS. Sometimes they can save you a lot of additional work. In this article I'll show you how to set the style of a specific child in a list of elements.

read more

How to import images directly into the html code (base64)

posted in PHP on 2010-11-11   base64 file html css small form data fp image
read more