9UZ4E2rgQQ6z9bJfdr8g yarn package manager an improvement over npm.png

NPM vs Yarn

Almost every day a new software, framework or library appear on the market of programming. Their creators hope to reach the hearts and change the habits of existing users.

Just a few months ago, I could not imagine development of a new project without the support of NPM, which is known and used by nearly all developers. For a long time, NPM was the best and had no real competition on the market.

Nevertheless, a new solution appeared on the market a while ago. A new name, new file format and almost the same purpose, namely Yarn. It is a new JavaScript package manager created by Facebook, Google, Exponent and Tilde.

Progressive map loading in canvas and react

We want to build a strategic game, where player can move around on big flat map. It is based on hexagon tiles. Entire world is 2000 tiles wide and high.

But what player see on the screen is 10x10 tiles sized map. We don't need to redraw all of 2000^2 tiles each frame.

This is the mechanism that can help to achieve this.

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.