Draw directly on a web page using Canvas

When you want to draw something, the browser gives several ways to display graphic. The simplest way is to use styles to create, position and transform DOM elements.

but...

when some shapes are more complicated to draw in CSS and when you want to create animation for dealing with many elements or build modern apps the bost choice in that case is Canvas.

This article will show you some simple examples how to draw on canvas.

pixels

Keep canvas in sync with react and redux.

When writing modern apps you will often need to use canvas. It's great for things like data visualisation and sometimes it's easier to use than DOM or SVG.

But how to connect canvas with React components and Redux state?

This article will show you a simple example in which you can toggle visibility of three circles, drag them around canvas and keep it all in sync with UI and app state.

JS Performance Image

JavaScript & performance? Here are 5 simple tips to making your code run waaaay faster

When someone says "make that JS code more performant/optimized", do you grin, laugh or say "Why do you care? It's takes only half a second, that's not much.". You are absolutely right! That's not right from our biased human perspective. We have quite an amount of spare seconds in our life. But why make things slow when we can save our users some of that precious time? We'll discuss some of the easiest and fastest ways to make your JS code run much faster.

CSS Grid Layout Property

There’s no doubt that web is rapid developing thing and websites or web applications become more and more complex - that’s why we are in need to figure out how to develop advanced layouts with ease, without hacky solutions that use floats and other burdensome techniques. With help comes CSS Grid Layout. In this article I will explain what it is, how to deal with this new module, show a couple of examples and compare to Flexbox.

Do you know CSS? Part 1

I have enough of interview questions (not that I'm looking for a job at the moment, VML is great;)) like “what is the difference between class and id”. If you want to hire a good programmer, not a theorist, give him real problems to solve and even let him use google to solve them. Well, that’s what we do in real live, don’t we? Just make sure the problems aren’t too easy to find.

mobile first na froncie

'Mobile First' in front-end development

What is the Mobile First?

Mainly speaking, it is an idea presented by Luke Wroblewski in 2011, which describes an approach to process of creating a webpage. The starting point is mobile view. Layout prepared for mobile devices contains the most important and useful elements. It is essence and preview of what will be developed. It could be the end of the story, but to understand the whole concept, it must be explained a little bit more of information and related approaches.