4/26/18

Playing With Css Grid

Css Grid feature is here for already long time, but until now i had no chance to experiment with it.
And i believe that one cannot claim he understand something to do with programming until he wrote some code.
So this time i will use codepen editor as playground for my experiments.

Css Grid - Get Started

First of all the grid must have a container - the wrapper element which CSS has display property set to "grid"

display: grid

All direct child elements inside container are called grid items

Layout

For practicing - lets start with building simple layout with header content and footer.
 Note: the "content" section must catch all free space between header and footer (which is little tricky)

For implement this layout lets set following HTML structure You may say it is too simple, but when you starting - i believe you have to be simple as possible (stupid simple)

<div class="container">
  <div class="header">header</div>
  <main>main</main>
  <div class="footer">footer</div>
</div

To make the "main" part catch all available space between header and footer - i will use grid-auto-rows feature
  grid-auto-rows: 60px auto 60px;

Thas it , see the codepen here:

4/22/18

Most Important Thing When Planning Application

As a programmer i'm not feeling in my own sphere when speaking a about application planning. It is not exactly my job - to plan. Programmer`s job is to implement the plans of product manager/designer/teamleader (and so far i'm only programmer).

Anyway, since planning is tightly connected  to programing, i think i must to have my own opinion on how those very important processes should be done correctly.  So here are my own conclusions on those topics

Point number one - when starting planning application it is very important to make clear (firstly for your self) - What this application should do , what problem it suppose solve? This point better to be formulated as short as possible

It is good to have the main application`s target as one sentence, for it will help to avoid following designs:

 (Motorcycle that initially planned to be a tank)

Also - to have a clear answer 'why i making this application' will make you understand if and when your goal is achived



 

4/8/18

Using New Angular6 Ng Update Feature

Everyone who using new angular knows that it depends on lot of packages - the @angular ones, rxjs, typescript and more. With so many dependencies- it might be hard job when trying to update, since some versions of some packages will not play with certain versions of other. (I call it dependency hell)



For solving this problem angular team added

ng update

command which should upgrade all the packages at once.
(Available from Angular CLI 1.7)

Experiment

Since it is interesting to play with new features, i decided to use this command for upgrading dependencies of one of my experimental projects. Its dependencies were like:

    "@angular/animations": "6.0.0-beta.7",
    "@angular/cdk": "6.0.0-beta.4",
    "@angular/common": "6.0.0-beta.7",
    "@angular/compiler": "6.0.0-beta.7",
    "@angular/core": "6.0.0-beta.7",
    "@angular/forms": "6.0.0-beta.7",
    "@angular/http": "6.0.0-beta.7",

And i expected that they will be upgraded to current 6.0.0-rc.3 version... After running command i got following message:
I guess that means the upgrade can be made only to stable version (not rc and not beta)

Well looks like angular guys still have some work to do...

Getting started with docker

It is very simple to get started usig docker. All you need to do-is download the docker desktop for your system Once you get docker syste...