What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.
6. Style the form on impression page.

Done

3. Fixed on the May 10.

4. Fixed on the May 10. The reason was in fluid flexbox elements behavior. Chanded flex-grow to 0 - no grow on rescale for icon element.

5. Built html part of an impression/review page on the May 10.

6. There are many parts:

   • Form accessibility.

     Tried to use fieldset and legend elements for a review page but they are funny: legend positions above fieldset without any respect to indents of the last. Here is details on froms - https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/How_to_structure_an_HTML_form. Tried different display options but there is no visible effect. Kept div for grouped input elements.

     Here is a fuitful discussion why a legend element behave the way it is - http://forums.mozillazine.org/viewtopic.php?f=7&t=75083. It looks like a legend is a part of the border of a fieldset and it's a natural behavior for legend. Here is how it looks in pure - https://mdn.github.io/learning-area/html/forms/html-form-structure/fieldset-legend.html.

     A solution would be to use a fieldset for accessibility reasons and skip legend at all.

   • Style radio elements.

     Here is example of a custom radio button style - http://codepen.io/AngelaVelasquez/pen/BWXbxP.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
3. Fix a masthead height on resolution wider 640px.
4. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
5. Build additional pages - hotels, impression, blog.

Done

3. Masthead is ready. Added intermediate width breakpoints.

2. Safari is disgusting. It collapses a height when the height is not explicitly set.

4. Done. It was a flexbox with flex-basis: auto and flex-grow: 1, so the width of each of three containers wasn't evenly distibuted. Changed flex-grow to 0 and add min-width: 30%.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Dismissed: Format search form to make labels more aligned with input fields.
3. Prev: Work with styleguide.
4. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
5. Fix a masthead height on resolution wider 640px.
6. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.
7. Unify color use - I have variables for it.

Done

3. I have a styleguide where all colors and UI states are written. The step is to add all :active and :hover effects to interactible parts of the site. Besides I want make all links working - now they all point to null.

   Done for the main page of the project.

7. Done.

What will I learn today?

1. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
2. Replace logo with SVG elements.
3. Prev: Format search form to make labels more aligned with input fields.
4. Prev: Work with styleguide.
5. Add Google analitics to my blog and project pages.
6. Fix quirks in Safari: icons have became too small, everything become a mess on a wide screen.
7. Remove a shape from the teaser on anything wider 30rem.
8. Fix a masthead height on resolution wider 640px.
9. Fix an offer body text align for the gift message - now it aligns to center on resolutions less than 570.

Done

2. The logo right now is a PNG-file. It has a white halo 1 px wide. I have alternative style for it - PNG picture and larger one-color SVG background.

   Done.

2. Done.

5. Done.

7. Done.

Spontaneous. Got git push error message: this exceeds GitHub's file size limit of 100.00 MB. Resolved it with BFG -D tags (links are here - http://stackoverflow.com/a/31349737).

What will I learn today?

1. PixelPerfect desktop versions.
2. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
3. Replace logo with SVG elements.
4. Prev: Format search form to make labels more aligned with input fields.
5. Prev: Work with styleguide.

Done

Family day. Went to Alki beach - the weather was great.

What will I learn today?

1. PixelPerfect desktop versions.
2. Make menu hide only on tablet and desktop versions or add input-label to hide JS-function.
3. Replace logo with SVG elements.
4. Prev: Format search form to make labels more aligned with input fields.
5. Prev: Work with styleguide.

Done

Spontaneous. Fixed menu icon's color by building in fill color into inline-SVG.

Spontaneous. A media__text has to have bottom indent to be fluid on resize. Done!

1. Done.

What will I learn today?

1. PixelPerfect tablet and desktop versions.
2. Replace logo with SVG elements.
3. Prev: Format search form to make labels more aligned with input fields.
4. Prev: Work with styleguide.

Done

1. While fitting layout to tablet version found many funny decisions made in the beginning of the project. They all aligned to mobile version pretty well but ablolutely rigid for adapting the main page to another media-width. For example, my .media-body class was a flexbox and three elements inside of it were column directioned. But it's absolutely counterintuitive to align them to a specific vertical rhythm. I have to remove flexbox attribute from the wrapper to have a chance to adjust inner elements with a margin-top.

   Done. But now I have to go back to mobile and fix all stuff which now became broken.

What will I learn today?

1. Finish mobile menu.
2. PixelPerfect tablet and desktop versions.
3. Replace logo with SVG elements.
4. Prev: Format search form to make labels more aligned with input fields.
5. Prev: Work with styleguide.

Done

1. Done! Implemented it with additional throttling JS-plugin by Ben Alman - http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/. Here is - http://drupalmotion.com/article/debounce-and-throttle-visual-explanation - how it works explained visually. Applied the same function to hide-on-scroll menu. Some more explanations - http://unscriptable.com/2009/03/20/debouncing-javascript-methods/.

   Have to fixed color of hamburger and cross icons and decide on scrolling - what is better - to hide icon or to have it always on top? And if have it fixed, then what about its color - it disappears when white on white.

Practicing Vim. Have turned spellchecking for text files. Here is how - https://robots.thoughtbot.com/vim-spell-checking.

What will I learn today?

1. Make a dropdown menu for mobile.
2. Prev: Format search form to make labels more aligned with input fields.
3. Prev: Work with styleguide.
4. PixelPerfect tablet and desktop versions.
5. Replace logo with SVG elements.

Done

1. Done. What was interesting? I've built it with a pure CSS basing on Dudley's manual - http://thenewcode.com/599/A-Responsive-Animated-Menu-For-Single-Column-Web-Designs. I've changed trigger mechanics - instead of :hover it fires on hamburger click which is nothing else then label for a hidden input element. Took an example here - http://thenewcode.com/625/A-Visual-Database-Gallery-In-Pure-CSS. Here is another UI-rich implementation - https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css. And here - http://callmenick.com/post/animating-css-only-hamburger-menu-icons - pure CSS animation around hamburger symbol.

   Works great, but then I've found that it won't change to a large screen menu layout in case of screen resize when the mobile menu is open - it just stays as a screen-wide column of menu items. There is no CSS only solution for it, so switched to JS alternative. Found many JQuery receipts, major of them use setTimeout(), so have performance issues. There is a solution - http://marcj.github.io/css-element-queries/ - which implements an alternative logic and it says that it has no performance drawbacks, but for my current knowledge level of JS is way hard to understand. I've choosen simpler one - http://alvarotrigo.com/blog/firing-resize-event-only-once-when-resizing-is-finished/. It shouldn't freeze the page much and does what I need - toggle menu layout by toggle the checkbox input. My menu implementation is here - https://codepen.io/alstof/pen/ybMEqM. It has a little weird timeout of menu layout toggle on resize and it won't work on ongoing resize - only when resize is finished.

   Tried to implement different order for menu items depending on a screen size. It works, but due to timeout I mentioned above it behaves funny - the items' order changes before the layout. Looks terrible. Have to rework JS implementation (can't keep it as is, because order of items has to change on resize as layout too).

What will I learn today?

1. Make a dropdown menu for mobile.
2. Prev: Format search form to make labels more aligned with input fields.
3. Prev: Work with styleguide.
4. PixelPerfect tablet and desktop versions.
5. Replace logo with SVG elements.

Done

Nothing. Gone with my family to Deception Pass - https://goo.gl/maps/Nq8rvpG4N8y.