author: Krasimir Tsonev

Hi there, I'm . Senior front-end engineer with over 13 years of experience. I write, speak and occasionally code stuff.

css

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

A couple of months ago I received an interesting task - to create a small html application for iPhone. To be honest, for me that meant creating a small site with a specific size. Of course I was wrong. Together with couple of small bugs I had to deal with one other requirement - everything had to be in one html file. It was clear how to add the javascript and the css, but what about the images.The solution was to use base64 encoding. I wrote a small php script that accepts an image and shows me the equivalent in base64 string.
<?php      $base64 = "";    $css = "";    $tag = "";      if(isset($_FILES['f']['name'])){        $file = rand(0, 10000000).$_FILES['f']['name'];        if (move_uploaded_file($_FILES['f']['tmp_name'], $file)) {            if($fp = fopen($file,"rb", 0))            {               $picture = fread($fp,filesize($file));               fclose($fp);               // base64 encode the binary data, then break it               // into chunks according to RFC 2045 semantics               $base64 = base64_encode($picture);               $tag = '';               $css = 'url(data:image/jpg;base64,'.str_replace("\\n", "", $base64).'); ';            }        }    }      ?><html><head><title>Base64 img convert</title></head><body>    <form action="./index.php" method="post" enctype="multipart/form-data">        <input type="file" name="f">        <input type="submit">    </form>      The CSS code:      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $css; ?></textarea>        The HTML code:      <textarea style="width:800px;height:100px;font-size:10px;"><?php echo $tag; ?></textarea>        <?php echo $tag; ?></body></html>
Just browse your image and click "Submit Query".P.S.base64 doesn't work in IE

...read more

CSS: selecting a specific child

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

Why we should think about our CSS

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 IERead the full artcile by Stoyan Stefanov here.

...read more

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

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

CSS: transition from pixels to 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

Insert css or javascript dynamically

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

How to Design Responsively

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

CSS: :before and :after pseudo elements in practice

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

Introduction to animations in HTML

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 Challenge #1: expand and center an image

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

...read more

SASS: differences between mixins, extends and placeholders

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

AbsurdJS fundamentals

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

To all devs out there

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

SASS and Gruntjs (Node.js setting up)

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

Using media queries in JavaScript (AbsurdJS edition)

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

Look ma, JavaScript only Off-Canvas menu

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

Codefront.io is around the corner

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

Node.js application made with Express and AbsurdJS

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

The three rules of the good CSS architecture

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

ToDoMVC with AbsurdJS

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

CSS variables are here for ages

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

My front-end performance case study

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

CSSSteal - Chrome extension that extracts CSS

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

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

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

8 Years of blogging

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

NADCAST.06 with Cole Peters

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

React and separation of concerns

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