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

Smart placeholders in your markdown

posted in JavaScript on 2020-05-06   markdown placeholders template annotation marked contentful https button part content stuff p p seemore const

I ❤️ markdown. I like its simplicity and minimalistic API which is good enough to cover most of needed HTML markup. At least for textual content. At work we have a small node based microservice that delivers data from Contentful in exactly markdown format. It's all working well but we started having cases where part of the text is in Contentful and the other part is in that microservice. For example when we have a button with a catchy design. We want to content manage the label of the button but the actual markup to be on our side.

read more

From PHP to Node with Zeit's lambdas and Cypress.io

posted in JavaScript on 2019-05-23   https blog cypress content zeit html javascript article articles

The first post in this blog was published on 25th of August 2008. This place was always living on a shared PHP/MySQL hosting. It was driven by a custom made PHP CMS for over 10 years. It is time to move forward and follow my actual language of choice - JavaScript. I spent some time recently migrating it to Zeit and this article is showing my process.

read more

A story about React, Redux and server-side rendering

posted in JavaScript on 2018-06-29   server app store react js data users content div redux

Long long time ago in a kingdom far far away there was an app. The app was supported by the well known React and Redux families but there was a problem. It was damn slow. People started complaining and the app had to do something. It had to deliver its content quickly so it provides better user experience. Then the server-side rendering was born.

read more

iframe, or not, that is the question

posted in JavaScript on 2016-04-09   page widget javascript iframe div content script

One of the things that I really like at work is the fact that we spend time in research tickets. We have unknowns and we make a research to find out more information on particular topic. We then base our decisions on the results. Recently we had to decide whether to use an <iframe> for a third party widget development. I feel that the collected information may be handy to someone else so I decided to write it down here.

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

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

Testing responsiveness

posted in HTML5 on 2014-05-14   width content viewport device browser panel nav href chrome

We all know what responsive means nowadays. We, as developers, normally develop responsive applications. There is a dozen of instruments helping us achieving our goals. Some of us use extensions and even pay for them. However, I'm using one thing - Google Chrome browser. In this article, we will see what the Chrome's capabilities for testing responsiveness are.

read more

No back-end blog solution with Node.js and Markdown

posted in Nodejs on 2014-04-22   articles techy md tags article blog html page sidebar content

Before a couple of weeks I published Techy. It's a flat CMS based on Node.js and Markdown. I made it because I wanted to write my articles in Markdown format and avoid the annoying publishing workflow which I'm using now. I feel that it's not very clear how Techy works and decided to create a simple blog illustrating the processes.

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

Simple, good looking separator made with pure CSS

posted in CSS3 on 2014-02-12   jsbin translate 95px 12px transform translate 95px line small link top solid 1px border top solid block border top display block border content display block

I'm currently working on the official site of AbsurdJS. There are a lot of code samples out there and I wanted to present them in JSBins.

read more

Send message from web page to chrome extension\'s background script

posted in JavaScript on 2013-08-22   script event web page document function message content script background script send

I just answer on that question in StackOverflow. I think that this is a common quetion so it worths writing about it.

read more

SASS mixins covering media queries

posted in CSS3 on 2013-08-15   point media content media query min width break points media queries means sass mixins

These days I'm working on this little thing. It's a CSS micro framework following atomic concept. My preprocessor of choice is SASS. That's why I wrote several articles on this subject. Today's post is about media queries mixin.

read more

SASS: @content directive is a wonderful thing

posted in CSS3 on 2013-08-06   button font size 20px color mixin content border font size 30px 20px text decoration size 20px text block font size display block font

I just started using SASS and I love it. A bunch of cool features, which will help me to improve my CSS coding. @content directive is one of them.

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

Chrome Extension: run JavaScript in the context of the current page

posted in JavaScript on 2013-06-14   script code document content run current page tab id code executescript tab id tabs executescript tab

I'm currently working on a Google Chrome extension and I need to run a JavaScript in the context of the current page. The obvious choice for such a logic is the content script. However it is not so easy, because the content script has an access only to the DOM of the current page. It can't run global functions or use global objects.

read more

Convert HTML string to DOM element

posted in JavaScript on 2013-06-11   var markup output el link html frame contentdocument document createelement dom element

Checkout Revealing the magic: How to properly convert HTML string to a DOM element article.

I'm working on a chrome extension which accepts user text, work with it and output the result in a div. I used jQuery in the beginning, for several tasks, but later I decided to remove it and deal with pure javascript/DOM manipulations. The output div was filled by using innerHTML property and everything was ok. But, at some point, I sent few buttons to the user and he has to interact with them. However, once I update the div's content the event listeners are detached and the buttons became non-functional.

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

Dependency Injection in PHP. Create your own DI container.

posted in PHP on 2012-05-12   class key view show arguments array content navigation title skills

By my opinion one of the biggest problems in programming are dependencies. If you want to have a good well written application you should avoid dependencies between your modules/classes. There is a design pattern which could help and it's called Dependency Injection (DI). It allows you to inject objects into a class, instead of creating them there.

read more

\"This page contains both secure and non secure items\" message

posted in PHP on 2011-05-26   content problem http page featureloader js php https protocol

When you are opening a site via https protocol and there are items loaded with absolute addresses started with http some browsers, like IE, throw a message This page contains both secure and non-secure items. It is really annoying and if the user decides to can prevent these items of showing and he can brake the whole layout or some functionality.

read more

PHP: export data to XLS file

posted in PHP on 2010-12-01   xlswritelabel echo pack 0x0 function content type application header content type download header content row col 0x0 echo pack ssssss

Sometimes it is necessary to present your data in format which is popular and easy to work with. In most cases the CSV format will fit perfectly you and your clients, but sometimes you have to export the information in XLS file. These several functions will help you to do that.

read more