Plan and done for Apr-28-2017

What will I learn today?

  1. Practice vim and git (CLI via hub)
  2. Make the marker on the map clickable.
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.
  5. PixelPerfect tablet and desktop versions.
  6. Make a dropdown menu for mobile.
  7. Replace logo with SVG elements.

Done

  1. Done. Made an error in marker variable name when assign listener to event. Google Map API is handy. It's interesting to implement something like multiple markers on the map with infoWindows for each of them, something like Booking.com or other geolocated projects do. Here - https://www.w3schools.com/graphics/google_maps_events.asp - is an example.
  1. Plan for a dropdown menu:
    • Make checkbox input control and hide it;
    • Link label to this checkbox and make a hamburger as a background image for it.
    • Change display property of the <nav> depending on the :checked state of the input.
    • Set flex-direction for nav in mobile layout to column.

Plan and done for Apr-27-2017

What will I learn today?

  1. Change background height to align the photo with original.
  2. Make the map live.
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.
  5. PixelPerfect tablet and desktop versions.
  6. Make a dropdown menu for mobile.
  7. Replace logo with SVG elements.

Done

  1. Blurry edges in the background shape. The reason - background-size: cover; so it makes the shape scaling.

    Done! The picture finally matched with original by scaling explicitly with background-size and then setting exact background-position. It started scaling enormously on screens larger than 320px, but I gonna fix it with media-queries.

    Another challenge was scaling of italic text SVG in masthead. The reason was the use of relative height bigger then needed for elements being aligned - I use it more as positioning tool, but it's totally unnatural for a height to be a positioning tool of the element. Fixed it with the use of correct (smaller) height and margin-top.

  2. Basic Google map tutorial - https://www.w3schools.com/graphics/google_maps_basic.asp - provides with all needed functionality. In addition to the JS code I need coordinates of the place I wanna show on the map and Google API key to work with map engine with my own credentials. In order to get coordinates (taken from - https://www.lifewire.com/latitude-longitude-coordinates-google-maps-1683398):

    • Open Google maps, locate the place.
    • Right-click (Control-click on a Mac) the location.
    • Click on "What's here?" in the menu that pops up.
    • Click on coordinates.

    Almost done - the map is on the page, it's zoomable, it has a marker. What left is an event handler. It doesn't work with error - Cannot read property 'click' of undefined. Looks like google api handler conflicts with JQuery.

  1. A dropdown menu receipt is here - https://scotch.io/tutorials/building-a-morphing-hamburger-menu-with-css - and living example is in the playground - https://codepen.io/lmgonzalves/pen/KaWaJO.

Plan and done for Apr-26-2017

What will I learn today?

  1. Practice vim and git (CLI via hub)
  2. Implement the masthead slogan of the project (as SVGs from sprite).
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.
  5. PixelPerfect tablet and desktop versions.

Done

  1. Chris is the source of knowledge - https://css-tricks.com/lodge/svg/. Essentially:

    • no. 15 - where to put your icon system inside the html-body file and the practical ways to do this and what is limitation for this (Safari wants our inline-SVG before <use>, so it means just after <body> tag). And here is a text version - https://css-tricks.com/svg-sprites-use-better-icon-fonts/.
    • no. 16 - using SVG-file as external resource (our SVG-file has to be on the same domain, protocol, port as our html-file).
    • no. 18-19 - how to automate icon system building process with grunt or gulp.

    Here is some gotchas with SVG - https://css-tricks.com/gotchas-on-getting-svg-into-production/ and first is about using svg4everybody if we need IE support - https://css-tricks.com/gotchas-on-getting-svg-into-production/#article-header-id-2. The main point - we can't style or swap icons on hover polyfill SVG images in IE, instead we should use some additional techniques.

    And finally - done! Somewhat unsteady yet, but it lives.

    Here are two alternatives on automated building tools for Gulp:

    The first has a built-in data transform engine and generates a preview as http://www.grumpicon.com/ does. The second is in my boilerplate project. Both can generate png fallback images.

Spontaneous. Encountered the error in autoprefixer already mentioned as an issue - https://github.com/postcss/autoprefixer/issues/655 - it doesn't add prefixes for flexbox in Safari. Added explicitly in a browser list Safari >= 8. Now the project looks the same in all browsers.

Spontaneous. Another gotchas - calc and CSS-variables don't work in Safari 8 and since I used them to center logo, went to find another solution for centering fixed div with position: fixed. Found it on stackoverflow - http://stackoverflow.com/a/2006008 (but its origin is Chris again - https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/)- set left and right to 0 and side margins to auto. Works great.

Plan and done for Apr-25-2017

What will I learn today?

  1. Practice vim and git (CLI via hub)
  2. Implement the masthead of the project.
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.
  5. PixelPerfect tablet and desktop versions.

Done

  1. Is there any way to change the color of svg if I use it as background image? No - because as a background img, it isn't part of the DOM and you can't manipulate it (from here - http://stackoverflow.com/a/13367916).

    There is a bunch of solutions, starting from svg embedded into stylesheet (https://css-tricks.com/cascading-svg-fill-color/), encode it in the url in base64 way (https://css-tricks.com/probably-dont-base64-svg/). Here is demo for different alternatives - http://codepen.io/noahblon/post/coloring-svgs-in-css-background-images. It looks like I should change svg manually, create different color versions of it, glue it into a sprite and then use it as bg-image. Gulp provides me with svg, bunched into a sprite, but with ability to work with original pictures like they are embedded (). Ok, but now - how to scale them to the right size easily?

    Found less mixin for replacing colors and work with svg as bg-image here - https://zslabs.com/articles/svg-background-fill/, converted it into scss (http://www.rubydoc.info/gems/less2sass/1.2.0) and here is explanation about conversion - http://mstrutt.co.uk/blog/2013/08/converting-from-less-to-sass/. And here I've found replace function for SASS - https://www.sassmeister.com/gist/1b4f2da5527830088e4d.

    Haven't made it work. Tried with a codepen playground - doesn't work at all - funny.

Plan and done for Apr-24-2017

What will I learn today?

  1. Prev: Align the project's main page with the design layout via PixelPerfect.
  2. Prev: Format search form to make labels more aligned with input fields.
  3. Prev: Work with styleguide.
  4. Practice vim and git (CLI via hub)

Done

  1. Change windows split from vertical to horizontal (from here - http://stackoverflow.com/questions/1269603/to-switch-from-vertical-split-to-horizontal-split-fast-in-vim):
Ctrl-w t Ctrl-w K

Horizontally to vertically:

Ctrl-w t Ctrl-w H

Explanations:

Ctrl-w t makes the first (topleft) window current Ctrl-w K moves the current window to full-width at the very top Ctrl-w H moves the current window to full-height at far left.

  1. Background images took about three hours to clicked. Finally I've found many tutorials (calculation method, but it haven't worked for me yet - http://www.browniesblog.com/A55CBC/blog.nsf/dx/responsive-css-sprites.html, ), but end up on the Sprite Cow - http://www.spritecow.com/, which is great to calculate relative size and position of a specific picture inside a sprite (here is my playground - http://codepen.io/alstof/pen/NpVKeo). I've used background-size and background-position as relative percantages of pictures, then scale them with width and fit with height.

    My another concerns are too much padding and margin inside a stylesheet and code reusage. First is about using primarily an indentation to align blocks without a block height at all. Second - I have two blocks, which looks similar, with small differences in indents. Should I create another block or there is a way to reuse already created?

Plan and done for Apr-23-2017

What will I learn today?

  1. Practice vim and git(CLI via hub)
  2. Prev: Align the project's main page with the design layout via PixelPerfect.
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.

Done

  1. Built it with a stand-alone <div> and a separate menu list. Menu is a flexbox with elements evenly spaced along the string (at least I expect it to run this way). The logo is background image positioned absolutely with calculated position to be fluid.

    Everything is ok till my menu items is a one word long - the logo is centered and items are evenly spaced. It's not my case. I want items to be longer - two, three words long, but then all evenness goes away - the logo is still centered, menu items start to float uncontollably.

    A simple solution is to add explicit width value, that will ensure even spaced items. Here is example - http://jsfiddle.net/alstof/9fbvL900/6/

Plan and done for Apr-21-2017

What will I learn today?

  1. Practice vim and git(CLI via hub)
  2. Prev: Format search form to make labels more aligned with input fields.
  3. Prev: Work with styleguide.
  4. Align the project's main page with the design layout via PixelPerfect.

Done

  1. Started from the footer of the project - don't know why. A lot of work, but I like the meditation it brings.

Plan and done for Apr-20-2017

What will I learn today?

  1. Practice vim and git(CLI via hub)
  2. Make sprites for retina smaller - now they look double-sized.
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.
  5. Align the project's main page to the design layout via PixelPerfect.

Done

  1. Done. What is the problem? I have a sprite where all my icons are kept. There are both normal and retina icons. I manage how they are presented to user by @media-queries. They look great on normal pixel density, but for retina they become doubled in size. The reason - how my gulp pipe build css for them - it provides width and height for retina with doubled values exactly as they look in a sprite. But I don't want them bigger, I want them to be double density.

    But hard way - using additional wrapper and changing original positioning of an image inside a sprite. Hard coded shifts, hard coded background-size scaling. The better way is to use svg-images instead of bitmap image. More on the topic: * Using compass - https://gist.github.com/thulstrup/2140082#gistcomment-1234980. * Hard code - http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/.

  1. Working through the project. Started with mobile version.

Plan and done for Apr-19-2017

What will I learn today?

  1. Practice vim and git(CLI via hub)
  2. Resolve JQuery datepick plugin error.
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.
  5. Align the project's main page to the design layout via PixelPerfect.

Done

  1. Deep dive into Vim - http://learnvimscriptthehardway.stevelosh.com/.

  2. Done. The reason of datepick didn't work was unnecessary class usage - is-datepick. This class is internal for plugin and connects to an element by JS. I included it manually, because it shows in example page for plugin. I shouldn't.

    To find it I fired up blank project (it's easy with boilerplates like NTH or something from - ) setup minimal configuration with only plugin scripts and basic html. Then I started to play with different versions of html and finally found unnecessary class.

Plan and done for Apr-18-2017

What will I learn today?

  1. Practice vim and git(CLI via hub)
  2. Resolve JQuery datepick plugin error.
  3. Prev: Format search form to make labels more aligned with input fields.
  4. Prev: Work with styleguide.

Done

  1. Powerful practical advices on using Vim - https://medium.com/@schtoeffel/you-don-t-need-more-than-one-cursor-in-vim-2c44117d51db.

  2. Stuck. Everything looks like on original page - http://keith-wood.name/datepick.html, but it doesn't work.

    Found JQuery debugger browser plugin which shows event handlers binded to html (DOM) elements right in Chrome DevTools.