DEV Community: Andrei Navumau

ELI5: how to contribute to a project?

Andrei Navumau — Tue, 12 Dec 2017 05:32:30 +0000

Hi there,

I'm thinking about contributing into an open project. I'm trying to get an idea, how to work in a team, even remotely, from home. To learn from more experienced peers, how they organize their code, how they add comments, what approaches do they use in problem solving, what are best practices and algorithms.

I know basics of git, but I haven't contributed to any project yet. My languages are pretty basic: PHP, C#, ASP, SQL, JavaScript, though I believe, I can solve more complicated tasks. All at a beginner or intermediate level. To tell the truth, it is hard for me to measure my level, because I spent many years of learning how to code. It was my hobby or a "side-effect" of my job responsibilities, where I had to research how to fix some features at my websites. My primary occupation was always events management.

And yes, I myself despise this way of thinking - "I wish I could..." or "Tell me how to do this..." I always do my best to find solution myself. I'm a stop-dreaming-start-doing guy. So, yes, I did some research/googled "how to participate in a project". But every time I end up with looking at a list of files in a github folder confused with where and how to start, who to contact, are they accepting contributors, you know )))

I'll really appreciate any guidance from you. Explain, please, like I'm 5.

Example of complex SQL query to get as much data as possible from Database.

Andrei Navumau — Thu, 07 Dec 2017 04:42:26 +0000

I'd like to share an example of a complex SQL query, which will return all possible data from Database.

DB Schema looks like this:

The task was "to displays all employees and their related info even if some info is missing. Get as much information as you can about the employees".

My final SQL query was like this:

SELECT
  e.employee_id AS "Employee #"
  , e.first_name || ' ' || e.last_name AS "Name"
  , e.email AS "Email"
  , e.phone_number AS "Phone"
  , TO_CHAR(e.hire_date, 'MM/DD/YYYY') AS "Hire Date"
  , TO_CHAR(e.salary, 'L99G999D99', 'NLS_NUMERIC_CHARACTERS = ''.,'' NLS_CURRENCY = ''$''') AS "Salary"
  , e.commission_pct AS "Comission %"
  , 'works as ' || j.job_title || ' in ' || d.department_name || ' department (manager: '
    || dm.first_name || ' ' || dm.last_name || ') and immediate supervisor: ' || m.first_name || ' ' || m.last_name AS "Current Job"
  , TO_CHAR(j.min_salary, 'L99G999D99', 'NLS_NUMERIC_CHARACTERS = ''.,'' NLS_CURRENCY = ''$''') || ' - ' ||
      TO_CHAR(j.max_salary, 'L99G999D99', 'NLS_NUMERIC_CHARACTERS = ''.,'' NLS_CURRENCY = ''$''') AS "Current Salary"
  , l.street_address || ', ' || l.postal_code || ', ' || l.city || ', ' || l.state_province || ', '
    || c.country_name || ' (' || r.region_name || ')' AS "Location"
  , jh.job_id AS "History Job ID"
  , 'worked from ' || TO_CHAR(jh.start_date, 'MM/DD/YYYY') || ' to ' || TO_CHAR(jh.end_date, 'MM/DD/YYYY') ||
    ' as ' || jj.job_title || ' in ' || dd.department_name || ' department' AS "History Job Title"
  
FROM employees e
-- to get title of current job_id
  JOIN jobs j 
    ON e.job_id = j.job_id
-- to get name of current manager_id
  LEFT JOIN employees m 
    ON e.manager_id = m.employee_id
-- to get name of current department_id
  LEFT JOIN departments d 
    ON d.department_id = e.department_id
-- to get name of manager of current department
-- (not equal to current manager and can be equal to the employee itself)
  LEFT JOIN employees dm 
    ON d.manager_id = dm.employee_id
-- to get name of location
  LEFT JOIN locations l
    ON d.location_id = l.location_id
  LEFT JOIN countries c
    ON l.country_id = c.country_id
  LEFT JOIN regions r
    ON c.region_id = r.region_id
-- to get job history of employee
  LEFT JOIN job_history jh
    ON e.employee_id = jh.employee_id
-- to get title of job history job_id
  LEFT JOIN jobs jj
    ON jj.job_id = jh.job_id
-- to get namee of department from job history
  LEFT JOIN departments dd
    ON dd.department_id = jh.department_id

ORDER BY e.employee_id;

Let's go through it step by step:

Before creating our final Select statement, let's see which tables require LEFT joins and which do not. We need this check because LEFT JOINS are slower than INNER JOINS, so for efficiency we will be using (INNER) JOINS were possible.

To check that every employee has a job_id. If there are results (id's of employees), so we need LEFT JOIN, because there are employees who do not have (IS NULL == true) job_id. Otherwise (IS NULL == false) we use only JOIN:

SELECT employee_id FROM employees WHERE job_id IS NULL;

Result: empty. Conclusion: we use JOIN for 'jobs' table.

The same check as above, this time checking department_id:

SELECT employee_id FROM employees WHERE department_id IS NULL;

Result: 178. Conclusion: we use LEFT JOIN for 'departments' table.

Because there is one employee without department_id, the whole chain of future joins (departments-loations-countries-regions) should be also LEFT Joined, despite the fact that these tables can be INNER joined between each other in a separate query.

The same check as above, this time checking manager_id:

SELECT employee_id FROM employees WHERE manager_id IS NULL;

Result: 100. Conclusion: we use LEFT JOIN (self join) for 'employees' table. It means, that one employee doesn't have a manager.

And some general comments on this final query:

AS

we use it to define alias, column names in the result table look more human-readable.
```
||
```
we use this to concatenate strings
```
'text'
```
we enclose any text into single quotes
```
TO_CHAR(e.hire_date, 'MM/DD/YYYY')
```

in this way we can set format of the date

TO_CHAR(e.salary, 'L99G999D99', 'NLS_NUMERIC_CHARACTERS = ''.,'' NLS_CURRENCY = ''$''')

in this way we can output currency with separators. My detailed post about it can be found here.
```
JOIN jobs j ...
```
this 'j' means alias to a table name. The same table can be joined to itself (self join) and for this reason this table alias for the same table can and should be different.

The query returned 110 results, though there are only 107 employees. Because out of 107 employees, 3 have two job history entries. The first couple of rows of the result look like this:

We could definitely go further and get all information about departments, where according to job history entries a couple of employees were working, but I decided that it would be too much.

Originally posted on my website.

I hope this example will be useful for newbies. And to those of you, who are experienced, I'd like to address some questions:

Is it really important which JOIN to apply: LEFT or INNER? I mean is there any real gain in productivity?
Is it a good practice to pack all possible information into one query? Or to split it into small queries is a better approach?
What mistakes were made in this query, if any?

Take care!

Using calc() in CSS responsive design

Andrei Navumau — Sun, 26 Nov 2017 00:52:22 +0000

How to use calc() in css styling

Last time I made a post about my struggle with responsive design and adding multiple breakpoints and doing a lot of math in excel. The post can be found here. Thanks to ArcCosine's comment, I learned about calc() function in CSS. I applied it in my css file and it worked like a charm!

Here is the html code:


div id=A

    div id=B
        img
        img
        img
        img
        img
    /div

/div

In browser this looks like this:

To keep it short: I have 5 images of social icons, 51px fixed width each. The width of their container (div id=B) is 480px. I would like to calculate margin between icons responsive to screen size. So my css calculation is like this:


#B img {
    margin-right: calc((100% - 255px) / 4);
}

#B img:last-child {
    margin-right:0
}

Just a tiny explanation:

We take 100% of the width of the icon's container. It's 480px.
Then we deduct the width of all icons, which is 5*51px = 255px.
This gives us the remaining spacing in the container. We need to divide it by 4. Because we have 4 gaps between 5 images.
So we have the length of our margin-right. Last icon's margin we set to zero.

Now, if we resize the screen, container's width will be, for instance, 460px and margin-right will be recalculated based on the new container's width.

That short, that simple. Thank you ArcCosine, once again.

CSS and media queries

Andrei Navumau — Fri, 24 Nov 2017 05:51:09 +0000

Strategy to add additional breakpoints to responsive CSS

I'm studying CSS, so I'm sure that those who are experienced front-end developers will smile on this post. So will I in a couple of years from now. Nevertheless, I'll try to write down what I found, just to remember it better.

I have this chunk of code:


div id=A

    div id=B
        img
        img
        img
        img
        img
    /div

/div

In browser this looks like this:

I'm trying to keep these icons centered on the page with fixed paddings to the left and to the right. And equal space between icons.

In my CSS I have like this:


#A {
    width: 56%;
    margin: 0 auto;
}

Icons are of the same width 51px. To make them look nicely placed, I put padding-right for images and padding-right:0 for the last image. The task was to make this page responsive starting with the screen width of 768px.

I ended up with a table of calculations, like this:


A = current width of screen/container, div id=A
B = div wrapper for icons = 0.56*A, div id=B
I = icon image width = 51
P = padding-right = (B-5*I)/4
% = (P/B)*100 rounded down
rounded means that if I had 3.99%, it would be rounded down to 3.

The next step was to see, at what breakpoint do I need to change padding percentage. Because if I set 'padding-right:10%' for example, it worked only for width screen between 768px and 758px.

Actually, this can be checked mathematically:

Let's say we have width of our screen 768px. In this case we have:

A = 768
B = 0.56*768 = 430.08
I = 51
P = (430.08 - 5*51)/4 = 43.77
% = (43.77/430.08)/100 = 10.1771
rounddown(10.1771) = 10

So we have proved, that with screen width of 768px, padding should be 10%.

Now, let's assume that we set padding to be 10% (of container width) and resized our screen to 757px. The last icon image will jump to the next line like this:

Why it happened? It seems that everything was correct, we are using percentage and it should never come out of the limits of container, images should not jump below. The practice showed, that this assumption was wrong.

So I decided to add breakpoints with @media query into my CSS. My calculations of the possible breakpoints were:

I created excel document, inserted my formulas of calculations (see above) and applied this formulas to every possible value of screen sizes, i.e for 768px, 767px, 766px ... 475px.

And I noticed, that from 768px to 759px value of padding between images was 10% of the container (div id=B, see above). But with the screen size of 758px, the padding turned to be 9%. And it was so until screen size was 712px. At screen size 711px the padding was 8% and so on. So with this imperical values I found all the segments:

width between 758px and 768px, padding 10%
width between 711px and 758px, padding 9%
width between 669px and 711px, padding 8%
width between 632px and 669px, padding 7%
width between 599px and 632px, padding 6%
width between 569px and 599px, padding 5%
width between 542px and 569px, padding 4%
width between 517px and 542px, padding 3%
width between 494px and 517px, padding 2%
width between 475px and 494px, padding 1%

If width was below 475px, padding was 0%. That indicates, that I shall narrow left and right paddings of parent container, because 5 icons were not able to fit inside their div id=B when screen was less than 475px.

Based on this I added media queries to my CSS as follows:


@media all and (min-width:758px) and (max-width:768px) {
    #social img {
        padding-right: 10%;
    }
}

@media all and (min-width:711px) and (max-width:758px) {
    #social img {
        padding-right: 9%;
    }
}

...

@media all and (min-width:475px) and (max-width:494px) {
    #social img {
        padding-right: 1%;
    }
}

My only concern was: what will happen, if screen size was exactly at the breakpoint edge - i.e. 758px?

Will the padding be 10% (because min-width == 758px and is TRUE) or it will be, as necessary, 9% (because max-width == 758px and is TRUE)?

In this case the cascading rule of css - that the instruction, which is later in css file will override the same instruction above it - answered my question. Because the instruction 'max-width:758px' is after the instruction 'min-width:758px', padding will be 9%.

Thank you for reading this boring post. I guess, there are more elegant ways to make your page responsive, instead of creating 10 media queries and spending all the evening calculating the segments ))) Take care!

How to style footer semantically correct?

Andrei Navumau — Fri, 17 Nov 2017 07:40:18 +0000

I'm concerned how should I style my footer so that it is included into semantic outline of my page.

Let's assume, that my page is like this (don't know how to post html tags, that's why removed '<' & '>'):

body

    header.../header
    main.../main

    footer
        h2 Main footer of the page /h2
        section
          h3 About this site /h3
        /section
        section
          h3 Contact form /h3
        /section
        nav
          h3 Footer navigation /h3
        /nav
    /footer

/body

If I outline this code (here), I see:


1. Header
2. Main content of the page
2.1. Main footer of the page
2.2. About this site
2.3. Contact form
2.4. Footer navigation

This is not what I intended to have. In the above outline, 'footer' is a subsection of 'main' section and footer's subsections are also just subsections of the 'main' section on the same level with 'footer'.

I would like have 'footer' on the same level as 'main' section and footer's subsections as its subsections. To see in the outline something like this:


1. Header
2. Main content of the page
3. Main footer of the page
3.1. About this site
3.2. Contact form
3.3. Footer navigation

Then I read, that " 'header' and 'footer' are not sectioning content like 'section', rather, they exist to semantically mark up parts of a section.". That gave me a hint, that everything inside of my 'footer' tag is not considered a separate section in terms of outlining. So, I wrapped my 'footer' into 'section', which did the trick and my outline improved:

body

    header.../header
    main.../main
    
    section
        footer
            h2 Main footer of the page /h2
            section
              h3 About this site /h3
            /section
            section
              h3 Contact form /h3
            /section
            nav
              h3 Footer navigation /h3
            /nav
          /footer
    /section

/body

Which led to this outline:


1. Header
2. Main content of the page
3. Main footer of the page
3.1. About this site
3.2. Contact form
3.3. Footer navigation

My question is still the same: is this approach correct - to wrap 'footer' into meaningless 'section'? Please share your opinions or experience.

3 years of experience for entry-level Web Dev positions in Toronto.

Andrei Navumau — Thu, 16 Nov 2017 05:45:20 +0000

I was intrigued by an article by Eric Westcott in LinkedIn (Source) and would like you to share your opinion on this issue.

To keep it short: Companies advertise entry-level positions in web development, but still require 3 years of experience. What is the option for recent college graduates in this case?

The author is concerned that if you are applying to an entry-level position, you are not supposed to have any experience. On the other hand, if you have 3 years under your belt, you would not apply to an entry-level, but to a junior position. So, there seems to be an endless loop for those, who just graduated from, say, a college and are looking for an entry-level job (obviously, they can't secure a 3-years experience requirement). I'm concerned, because in a close future, I'll be facing this problem in the 'real world'.

My first reaction and reply to this article was like this:

When I see such a requirement (3 years of experience), I tend to think that employer is focusing not on coding experience itself, but in any relevant experience (communication, meeting deadlines, handling emails, working under pressure or being able to be part of a team). I mean, by this 3-years experience, company is trying to convey, that they do not hire a recent graduate, but they need a person with a working conditions experience.

Am I wrong? What do you think?

Section or article to use in HTML semantics markup?

Andrei Navumau — Thu, 16 Nov 2017 05:16:27 +0000

If you are wondering, which section element - SECTION or ARTICLE - to use while creating your html markup, just keep in mind this useful and concise definition of both of them and in what way they are different.

Section is to be used, when we talk about something, which is a part of something else. For instance, a chapter in the book. Because, the chapter is part of the book along with other chapters.

Article should be used, when we mean something, which exists on its own. For instance, a tweet, comment, blog post, newspaper ad. Because, comment is not part of the article, which it refers to, the comment lives by itself.

Source.

Default 4px spacing between inline elements

Andrei Navumau — Sat, 21 Oct 2017 22:38:53 +0000

Problem stating

If you try to create a navigation element ('nav') with menu created via not ordered list items, you will find yourself facing a problem of approximately 4px spacing between 'li' elements.

It's not a margin. HTML code looks like this:

Cause

Let me start by saying that the cause of this issue lies in html markup. Every time when we insert new 'li' element on a separate line in code editor, we are inserting a line break at the end of previous 'li' element. This line break is interpreted as a white-space by our agent (browser). The default behavior of the browser to render a white-space - is to generate space of 4px. Actually, it's not 4px exactly. It depends on font-family (serif, sans-serif), font-size and scale. But these are minor issues and could be omitted. We'll assume, that this spacing is always 4px. Which is true in most cases.

Solutions

There are several ways to avoid annoying 4px spacing. Each one has its cons and pros. It's up to you to decide, which one to use. They can be grouped by 'HTML' and 'CSS' methods.

All the below will produce the same result like:

All the below will have basically the same pro/con:

Pro: No hassle with css.

Con: Not regular html markup, which is usually hard to read.

1) [HTML method] Write all li elements in one line without line breaks

2) [HTML method] No line breaks between closing and opening 'li' tags. The rest of code can sit on separate lines.

3) [HTML method] Insert html comment instead of line breaks.

4) [HTML method] Break closing 'li' tag btween lines.

5) [HTML method] Skip closing 'li' tag, its HTML5 valid.

6) [CSS method] Assign negative margin for contents of 'li' elements.

Though, in my case, 4px were not enough to kill the spacing. See a screen:

So I should set margin-right for -5px.

7) [CSS method] Set font-size to zero for parent element and set correct font-size for 'li' elements.

Though, in this case, you can't use 'em' or '%' font-size for child elements. All children of this parent will have font-size zero, so only 'rem' or 'px' font-sizes can be used.

8) [CSS method] Set float 'left' for 'li' elements.

But in this case, extra positioning is needed.

9) [CSS method] Set letter-spacing to '-1em' for parent and to 'normal' for 'li' elements.

10) [CSS method] Display as 'table' for parent and as 'table-cell' for 'li' elements.

11) [CSS method] Display as 'flex' for parent.

Thank you, Cris Coyier post and Kyle stackoverflow answer, I got my inspiration from your knowledge.

Conditional SQL JOIN

Andrei Navumau — Mon, 25 Sep 2017 03:34:05 +0000

I would like to share my experience in SQL joins.

The problem: I have 3 tables: 'vendors', 'invoices', 'terms'. I outer joined 'vendors' and 'invoices', now I'd like to join 'terms' table, but ON clause is conditional. If invoices.term_id is not null, than I join 'terms' table based on invoices.term_id, else I join 'terms' table based on vendors.default_terms_id. How can I use if in ON clause?

Solution:
I found it at Jef's SQL Server Blog, thanks him a lot.

Do not use conditions in ON clause.

Create two LEFT OUTER JOINs, based on each condition, i.e.

LEFT OUTER JOIN terms t ON invoices.term_id = t.term_id
LEFT OUTER JOIN terms t ON vendors.default_term_id = t.term_id

In SELECT statement with the help of COALESCE() function choose only that field, which is not null:
```
SELECT COALESCE(invoices.term_id, vendors.default_term_id)
```
Into COALESCE() we put first that field, which is likely to be not null. But if it is null, than we use a default value, which is always not null.

Full query looks like this (there are additional constraints, but you'll get an idea):

SELECT v.vendor_id AS "Vendor #",
    vendor_name AS "Vendor Name",
    vendor_contact_first_name AS "Contact First Name",
    vendor_contact_last_name AS "Contact Last Name",
    invoice_id AS "Invoice #",
    invoice_date AS "Invoice Date",
    COALESCE(t.terms_description, t_default.terms_description) AS "Description of Terms"
FROM vendors v
    LEFT JOIN invoices i
        ON v.vendor_id = i.vendor_id
    LEFT JOIN terms t
        ON t.terms_id = i.terms_id 
    LEFT JOIN terms t_default
        ON t_default.terms_id = v.default_terms_id
WHERE v.vendor_contact_last_name LIKE 'Z%'
  OR (v.vendor_contact_last_name > 'V' AND v.vendor_contact_last_name < 'Y')
ORDER BY vendor_contact_last_name DESC;

Cheers!