What will I learn today?

1. Practicing vim and git (CLI via hub)
2. Study another 5 CSS things on tympanus.net
3. Add "To top" link.
4. Add menu animation on page down.
5. Add sprites for retina.
6. Format search form to make labels more aligned with input fields.
7. Fix readme.md for the project (it contains original NTH-starter-kit text).
8. Work with styleguide.
9. Migrate all notes about web-dev progress to the blog.
10. Tweet my findings.

Done

3. Done. Just included existing block to the project and rerun gulp.

4. Done, but without smooth animations. I don't want to use JQuery animations, because of performance. Here is - https://apeatling.com/2014/01/building-smooth-sliding-mobile-menu/ - example how to handle such animation right, but I stuck in catching transitionEnd event. Tried to attach it to nav and to body, but it haven't worked.

   Finally made it with a little help from the codepen - https://codepen.io/andiio/pen/gspxJ.

5. Done. Details (how to handle icons, images and favicon) are taken from http://ivomynttinen.com/blog/a-guide-for-creating-a-better-retina-web. Exact media query for background-image should looks like http://brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/. And https://bjango.com/articles/min-device-pixel-ratio/ is a pixel ratio tester.

Spontaneous. How to deploy projects to gh-pages? https://gist.github.com/cobyism/4730490 one of the answers. But I have better one - it's already integrated into NTH-starter-kit: "gulp delpoy" and you're done.

Spontaneous. Publish with Nikola. Installation is http://brunettoziosi.eu/posts/blogging-with-nikola-ipython-github/. After it starts use CLI with:

source /Users/alstof/Documents/virtualenv/nikola/bin/activate
nikola post
nikola github-deploy

From http://louistiao.me/posts/how-i-customized-my-nikola-powered-site/. There are more about tuning nilola.

Thinking on autodeploy functionality just like gulp watch does: I create a blog post and save it and ... it's on my site. Here - http://entrproject.org/ - is utility to start moving in the direction.

Nikola engine is written with Python, so its primary text format is reStructuredText (aka .rst). Resources to taste it:

• Here is Gist - https://gist.github.com/dupuy/1855764 - with comparision.
• And Sphinx manual - http://www.sphinx-doc.org/en/stable/rest.html - with quick examples.

Spontaneous. Start a project with NTH-starter-kit:

git clone https://github.com/al1s/NTH-start-project.git technomart

What will I learn today?

1. Practicing vim and git(CLI via hub)
2. Study another 5 CSS things on tympanus.net
3. Run project in NTH starter kit.

Done

3. Done. At least I'm at the exact point I was the day before, but now I can use the power of almost fully automatic gulp tasks - sprites management, build management, block-files in BEM style.

1. Something new about Vim.

• Want to navigate between buffers in CtrlP? https://github.com/ctrlpvim/ctrlp.vim is the keys:

  • Press <c-f> and <c-b> to cycle between modes.
  • Press <c-d> to switch to filename only search instead of full path.
  • Press <c-r> to switch to regexp mode.
  • Use <c-j>, <c-k> or the arrow keys to navigate the result list.
  • Use <c-t> or <c-v>, <c-x> to open the selected entry in a new tab or in a new split.
  • Use <c-n>, <c-p> to select the next/previous string in the prompt's history.
  • Use <c-y> to create a new file and its parent directories.
  • Use <c-z> to mark/unmark multiple files and <c-o> to open them.

• Surroundings for vim from https://github.com/tpope/vim-surround works with:

  • ys[iw,w,s](something-to-wrap-into) - to wrap.
  • cs[iw,w,s](was-wraped)(should-be-wraped-into) - replace one wrapper with another.
  • ds(something-to-wrap-into) - delete wrapper.

• NerdTree cheatsheet is https://www.cheatography.com/stepk/cheat-sheets/vim-nerdtree/

  t: open in new tab
  i: open split
  s: open vsplit
  x: close parent
  p: go to parent
  u: move tree root up a dir
  

• Use quickfix window effectively:

  :copen # Open the quickfix window
  :ccl   # Close it
  :cw    # Open it if there are "errors", close it otherwise (some people prefer this)
  :cn    # Go to the next error in the window
  :cnf   # Go to the first error in the next file
  

• Want to use macligatures in Vim? What about catching errors when vim runs in cli mode? The answer is https://coderwall.com/p/yiot4q/setup-vim-powerline-and-iterm2-on-mac-os-x:

  if has("gui_running")
     let s:uname = system("uname")
     if s:uname == "Darwin\n"
        set guifont=Inconsolata\ for\ Powerline:h15
     endif
  endif
  

  Faster git. I have a bunch of aliases in my Mac OS to handle git in a lightspeed. Some of them:

  ga='git add' #usage: ga .
  gsts='git status'
  gdca='git diff --cached' #usage: gdca [FILE_NAME]
  gcmsg='git commit -m' #usage: gcmsg "Commit message"
  gp='git push'
  

Spontaneous. Show hidden files in Finder: defaults write com.apple.finder AppleShowAllFiles YES

What will I learn today?

1. Practicing vim and git(CLI via hub)
2. Study another 5 CSS things on tympanus.net
3. Continue practicing vim and git.
4. Make JQuery work in the project.
5. Make SASS work through gulp.

Done

1. Want a new repo on github?

   hub init [NAME]
   cd [NAME]
   hub create [NAME]
   

Now you've got [NAME] repo in your github.

2. all - to set all rules either to inherit or initial.

3.1. Want to rename git? - look http://stackoverflow.com/questions/2041993/how-to-rename-a-git-repository.

3.2. Vim:

• The great way to work with a project using many files is to utilize power of ag instead of bult-in grep. The receipt - https://robots.thoughtbot.com/faster-grepping-in-vim. Binded K to search for word under cursor. And there are - http://vimawesome.com/plugin/ag-vim-back-to-december - shortcuts inside quickfix window.
• In order to run macvim from CLI in Mac OS copy shell script - https://raw.githubusercontent.com/b4winckler/macvim/master/src/MacVim/mvim - to /usr/local/bin and chmod 744 on it. The receipt from http://stackoverflow.com/a/2056219.

5. Decided to try repeat the project using as the base workflow and blocks from Gromov's NTH-starter-kit project. The main question is whether to use his blocks or main.

What will I learn today?

1. Fix again map background in search-form__wrapper - strange gutter. :)
2. Study another 5 CSS things on tympanus.net
3. Add logo to the head menu in the project.
4. Make masthead fluid.
5. Continue practicing vim.
6. Find a way how to work with local images and integrate them into the gulp workflow.
7. Pass JQuery tests - http://try.jquery.com/
8. Organize images for retina with media-queries.
9. Make the main menu slide when we move further then 60vw.
10. Get rid of side slider.

Done

5. Found great explanations - http://joshldavis.com/2014/04/05/vim-tab-madness-buffers-vs-tabs/, http://stackoverflow.com/questions/102384/using-vims-tabs-like-buffers/103590#103590 - about buffers and ways to handle with files in vim in vimed way.

Spontaneous. Started to keep dotfiles in github https://github.com/al1s/dotfiles. All details about how it works are in the repo. If there is no 'config' in aliases than use alias config='/usr/bin/git --git-dir=$HOME/.cfg/ --work-tree=$HOME'

Spontaneous. Tried to make the shape in main menu for the project with pure CSS. Left it in a middle - all is - http://codepen.io/alstof/pen/oWgyNp. Inspiration from Lea Verou's - http://lea.verou.me/css3patterns/

3. Done.

What will I learn today?

1. Pass JQuery tests [here](http://try.jquery.com/)
2. Study another 5 CSS things on tympanus.net
3. Fix flex orientation in the project for media-box with icons.
4. Add logo to head menu in the project.
5. Add SVG mask to the masthead in the project.
6. Fix map background in search-form__wrapper, now it has strange upper gutter.
7. Make masthead fluid.
8. Continue practicing vim.
9. Find a way how to work with local images and integrate them into the gulp workflow.

Done

3. The main reason they are mess is css remix during build process. Yeah, that was exact the reason. And now I've made it simpler and fixed it.

5. Done. Added as png-file. There was a strange quirk - first I haven't seen images in browser at all and then I realized the root for path of images is the css folder, so I should point images folder before.

6. Fixed. Don't know how.

8. For buffers check help - :help usr_07.txt, :help tabpage and :help buffers. To store session layout: mkview [filename], to restore - lo [filename].

What will I learn today?

1. Debug js and have datepick working.
2. Study another 5 CSS things on tympanus.net
3. Build footer on the sedona project.

Done

1. Debugged it, but haven't made datepick working yet.
2. Nope.
3. The footer is done.

What will I learn today?

1. How to add many style files to project on gulp and make them dance around.
2. How to add js to my project.
3. How to add datepicker to my project.
4. Study another 5 CSS things on tympanus.net

Done

1. Start your Gulp journey here https://css-tricks.com/gulp-for-beginners/. It will make all things clear from the beginning: what is package.json, gulpfile.js. And there is a bunch https://github.com/gulpjs/gulp/tree/master/docs/recipes of receipts. I'm still curious about sass, because right now I don't use it at all. And I don't concat files.
2. Just put code into js folder and start working. Right now my gulpfile.js concatenate all js sources into one. And it doesn't have any lint inside. To add! And by the way - how to build things in order? Right now the solutions are: put files into gulp in a right order - http://stackoverflow.com/a/21961217 - by pointing specifically one by one in the gulp.src(...) and second is to use browserify - https://github.com/substack/browserify-handbook or webpack - https://github.com/vigetlabs/gulp-starter/tree/blendid. Something - https://www.viget.com/articles/gulp-browserify-starter-faq - about how to use it with gulp.

4. CSS rules and pseudo-elements:

   outline - no width unlike border, but scarce functionality and browser support for it.
   :link - for anchors with href.
   :visited - switched back to link state after a while.
   :focus - cursor with tab or mousedown on the link or input element to trigger
   :hover - mouse hover.
   :active - when user clicked the element. Main use - to give UI feedback: something happening, we didn't freeze.
   

3. Added, but it hasn't work yet. Need to debug and here is the article - https://developers.google.com/web/tools/chrome-devtools/javascript/ on basic debugging JS.

What will I learn today?

1. How to tune input in css.
2. How to combine form with inputs in Sedona project.
3. How to handle vim and git during all this activities.
4. Go through - http://tympanus.net/codrops/css_reference/

Done

3. What I need to start a new project.

   • Run in a project folder:

     npm install gulp gulp-util gulp-sass gulp-uglify gulp-rename gulp-minify-css gulp-gh-pages gulp-notify gulp-concat gulp-plumber gulp-postcss css-mqpacker autoprefixer node-neat browser-sync --save-dev
     

   • Copy gulpfile.js from previous src. (many different sources e.g. https://gist.github.com/DESIGNfromWITHIN/11383339 or https://github.com/nicothin/epic_start-kit/blob/master/gulpfile.jskk)

   • Create directory srtucture:

     mkdir scss
     mkdir js
     mkdir sass
     mkdir css
     mkdir stylesheets
     

4. Went through:

   background-clip - border-box, padding-box, content-box
   all
   initial - reset to default value and it's not a UA values;
   inherit - use it to inherit values from parent to child. Doesn't work for shorthands.
   unset - it's inherit or initial depending on wether the value is inheritable or not for the element.
   

2. Done. With additional container. So I have wrapper to carry the map background and container, which holds the for in fit.

1. Done. Easy as any other element.

What will I learn today?

1. How to setup vim to work with web dev project.
2. How to setup mac os env to work with gulp + browsersync + sass.
3. Input attributes and ways to customize inputs.

Done

1. Great article - https://benfrain.com/learning-vim-front-end-coding-month/ - about web dev experimenting with making vim his working editor. His .vimrc on the github - https://gist.github.com/benfrain/f09dd39e66fe2da9cf0a.

2. Article - https://anyscreensize.com/blog/gulp-sass-browser-sync-front-end-dev/ - that needs some additional installation:

   npm install --save-dev node-neat

What will I learn today?

1. I want to practice web projects layout with HTML and CSS.

Done

Found the Sedona project - https://github.com/brotherilia/sedona. Looks great for my purpose - a lot of different elements, a fluid design requirements, forms, Google map API.

My approach:

• Sources - https://github.com/al1s/sedona
• Result - https://al1s.github.io/sedona/