Jekyll2023-08-02T11:57:18+00:00https://ymatuhin.ru/feed.xmlЮрий МатюхинФронтенд разработчик, веду блог, интересуюсь архитектурой приложений, дизайном и текстом. Хочу работать на себя
ymatuhinКод. Плейсхолдер для [contenteditable]2017-11-24T00:00:00+00:002017-11-24T00:00:00+00:00https://ymatuhin.ru/front-end/contenteditable-placeholder<figure>
<img src="/assets/img/contenteditable.jpg" alt="" width="1200" height="400" />
</figure>
<p>Я уже сильно привык к аттрибуту <code class="language-plaintext highlighter-rouge">placeholder</code>, и немного грустил зная что <code class="language-plaintext highlighter-rouge"><pre contenteditable></pre></code> не работает с <code class="language-plaintext highlighter-rouge">placeholder</code>. Но чутка погуглив я нашел инетресное решение, которым хочу поделиться с вами.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">[</span><span class="nx">contenteditable</span><span class="p">]:</span><span class="nx">empty</span><span class="p">:</span><span class="nx">before</span> <span class="p">{</span>
<span class="nl">display</span><span class="p">:</span> <span class="nx">block</span><span class="p">;</span>
<span class="nl">color</span><span class="p">:</span> <span class="err">#</span><span class="mi">999</span><span class="p">;</span>
<span class="nl">content</span><span class="p">:</span> <span class="nx">attr</span><span class="p">(</span><span class="nx">placeholder</span><span class="p">);</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="пример">Пример</h2>
<p><script async="" src="//jsfiddle.net/414ced8v/3/embed/html,css,result/"></script></p>
<p>На случай если вы не видите примера выше — <a href="http://jsfiddle.net/414ced8v/3/">ссылка на JS Fiddle</a>.</p>
<p>Будьте осторожны с <code class="language-plaintext highlighter-rouge">contenteditable</code>, его поведение разнится в браузерах. В сафари если удалить весь текст в поле все равно остается <code class="language-plaintext highlighter-rouge"><br></code> и <code class="language-plaintext highlighter-rouge">:empty</code> не страбатывает.</p>ymatuhinКак называть переменные2017-08-07T00:00:00+00:002017-08-07T00:00:00+00:00https://ymatuhin.ru/front-end/how-to-name-variables<figure>
<img src="/assets/img/variables/variables.jpg" alt="" width="800" height="400" />
</figure>
<p>Для меня основной критерий хорошего когда — его <strong>читаемость</strong>. Поэтому важно чтобы переменные, функции и методы легко читались и понимались. Далее я расскажу как я называю переменные и что мне в этом помогает.</p>
<h2 id="строки">Строки</h2>
<p>Традиционно название строковой переменной — <strong>существительное</strong>. Как и везде, мы должны понимать что находится в переменной по её названию. Со строкой сложно напортачить, используйте существительные и давайте более осмысленные имена, например:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">serverMessage</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">hello from server</span><span class="dl">'</span>
<span class="kd">const</span> <span class="nx">componentHtml</span> <span class="o">=</span> <span class="dl">'</span><span class="s1"><h1>Hello</h1></span><span class="dl">'</span>
<span class="kd">const</span> <span class="nx">login</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">username</span><span class="dl">'</span>
<span class="kd">const</span> <span class="nx">password</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">qwerty</span><span class="dl">'</span>
<span class="kd">const</span> <span class="nx">ACCESS_TOKEN</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">xxxxx</span><span class="dl">'</span>
</code></pre></div></div>
<h2 id="числа">Числа</h2>
<p>С числами уже интереснее, можно встретить общие практики которые есть почти в каждом проекте:</p>
<ul>
<li>код чего-либо (code)</li>
<li>размер (size, length)</li>
<li>номер (number)</li>
<li>количество (count)</li>
</ul>
<p>Использование этих слов привычно и не вызывает дополнительных вопросов:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">keyCode</span> <span class="o">=</span> <span class="mi">17</span>
<span class="kd">const</span> <span class="nx">numberFromEnd</span> <span class="o">=</span> <span class="mi">10</span>
<span class="kd">const</span> <span class="nx">maxWindowSize</span> <span class="o">=</span> <span class="mi">800</span>
<span class="kd">const</span> <span class="nx">minCharacterLength</span> <span class="o">=</span> <span class="mi">10</span>
<span class="kd">const</span> <span class="nx">newMessageCount</span> <span class="o">=</span> <span class="mi">2</span>
</code></pre></div></div>
<h2 id="булевое-значение">Булевое значение</h2>
<p>Лучшее название для булевой переменной — вопрос с ответом да-нет. Так-же часто встречаются в виде префиксов и суфиксов слова:</p>
<ul>
<li>это (is)</li>
<li>содержит (has/contain)</li>
<li>может (can)</li>
<li>должен (shoud)</li>
<li>возможность (able)</li>
</ul>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">isPopupOpen</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">hasUpperLetters</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">containsObject</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">shouldUpdate</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
</code></pre></div></div>
<h2 id="массивы">Массивы</h2>
<p>Массивы это существительные во множественном числе. Оканчиваются на суффиксы <strong>s</strong> и <strong>es</strong>.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">users</span> <span class="o">=</span> <span class="p">[{</span> <span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">Yury</span><span class="dl">'</span><span class="p">}];</span>
<span class="kd">const</span> <span class="nx">letters</span> <span class="o">=</span> <span class="p">[</span><span class="dl">'</span><span class="s1">A</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">B</span><span class="dl">'</span><span class="p">,</span> <span class="dl">'</span><span class="s1">C</span><span class="dl">'</span><span class="p">];</span>
<span class="kd">const</span> <span class="nx">codes</span> <span class="o">=</span> <span class="p">[</span><span class="mi">21</span><span class="p">,</span> <span class="mi">37</span><span class="p">];</span>
</code></pre></div></div>
<h2 id="объекты">Объекты</h2>
<p>Так-же как и строки. Мне это не очень нравится, т.к. нельзя сразу-же отличить строку от объекта. Можно добавлять суффикс <strong>obj</strong>, но это мне кажется уже лишним.</p>
<p>Важное правило, не дублируйте название объекта в названии свойства или метода:</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">// Плохо</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">userName</span><span class="p">:</span> <span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">,</span>
<span class="nx">getUsername</span><span class="p">()</span> <span class="p">{},</span>
<span class="p">};</span>
<span class="c1">// Хорошо</span>
<span class="kd">const</span> <span class="nx">user</span> <span class="o">=</span> <span class="p">{</span>
<span class="na">name</span><span class="p">:</span> <span class="dl">'</span><span class="s1">test</span><span class="dl">'</span><span class="p">,</span>
<span class="nx">getName</span><span class="p">()</span> <span class="p">{},</span>
<span class="p">};</span>
</code></pre></div></div>
<h2 id="функции-иметоды">Функции и методы</h2>
<p>Для функций первое слово глагол:</p>
<ul>
<li>init/initialize</li>
<li>compute</li>
<li>find</li>
<li>create (object, array…)</li>
<li>to (string, array…)</li>
<li>filter</li>
</ul>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">const</span> <span class="nx">initApp</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">computeMaxHeight</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">findClosestElement</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">toString</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{};</span>
<span class="kd">const</span> <span class="nx">filterUsers</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=></span> <span class="p">{};</span>
</code></pre></div></div>
<h3 id="симметричные-пары">Симметричные пары</h3>
<p><strong>Общие</strong>:</p>
<ul>
<li>old/new</li>
<li>begin/end</li>
<li>first/last</li>
<li>up/down</li>
<li>min/max</li>
<li>next/previous</li>
</ul>
<p><strong>Для функций</strong>:</p>
<ul>
<li>get/set</li>
<li>add/remove</li>
<li>create/destroy</li>
<li>start/stop</li>
<li>insert/delete</li>
<li>increment/decrement</li>
<li>open/close</li>
<li>show/hide</li>
<li>suspend/resume</li>
</ul>
<p>Если вы новичек в программировании, или плохо знакомы с английским языком, то вот вам лайфхак:</p>
<ol>
<li>Хорошо подумайте и назовите переменную <strong>на русском языке</strong></li>
<li>Переведите её через Google Translate</li>
</ol>
<p>Это все что я хотел сказать о переменных. Для дополнительного чтения советую статью <a href="https://habrahabr.ru/post/172091/">90 рекомендаций по стилю написания программ на C++</a>.</p>
<p>Я что-то забыл или где-то ошибся, напишите об этом в комментариях. Спасибо.</p>ymatuhinПлавный, нативный скрол2017-08-05T00:00:00+00:002017-08-05T00:00:00+00:00https://ymatuhin.ru/front-end/smooth-native-scroll<figure>
<img src="/assets/img/scroll/scrollbar-windows.jpg" alt="Полосы прокрутки семейства Windows" width="506" height="389" />
<figcaption>Полосы прокрутки семейства Windows</figcaption>
</figure>
<p>Плавная прокрутка до определенного места на странице — очень распространенная фича, особенно в лендингах. Еще один классический случай — плавный переход по хэшу для навигации по странице.</p>
<p>Для решения этих проблем уже написано много решений. В начале карьеры я и сам такое писал сначала на <code class="language-plaintext highlighter-rouge">jQuery</code>, а потом на <code class="language-plaintext highlighter-rouge">requestAnimationFrame</code>. К счастью о таких костылях можно забыть, потому что теперь можно передать дополнительный параметр в метод <code class="language-plaintext highlighter-rouge">window.scroll</code>, в котором можно указать что прокручивать нужно с анимацией.</p>
<h2 id="покажи-нам-код">Покажи нам код</h2>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">scroll</span><span class="p">({</span>
<span class="na">top</span><span class="p">:</span> <span class="mi">2500</span><span class="p">,</span>
<span class="na">left</span><span class="p">:</span> <span class="mi">0</span><span class="p">,</span>
<span class="na">behavior</span><span class="p">:</span> <span class="dl">'</span><span class="s1">smooth</span><span class="dl">'</span>
<span class="p">});</span>
</code></pre></div></div>
<p><a href="http://iamdustan.com/smoothscroll/" class="bigger">Демки</a></p>
<p>Без полифила работает только в Firefox, в Chrome под экспериментальным флагом. Можно добавить <a href="http://iamdustan.com/smoothscroll/">полифил</a> и заработает везде. Поэтому я советую использовать именно этот метод для прокрутки на странице и отказаться от сторонних библиотек. А через пару лет можно будет и полифил выкинуть.</p>
<p>Работает для методов <code class="language-plaintext highlighter-rouge">scroll</code>, <code class="language-plaintext highlighter-rouge">scrollTo</code>, <code class="language-plaintext highlighter-rouge">scrollBy</code>, <code class="language-plaintext highlighter-rouge">scrollIntoView</code>.</p>
<h3 id="ссылки">Ссылки</h3>
<ol>
<li><a href="https://github.com/iamdustan/smoothscroll">Github полифила</a></li>
<li><a href="https://drafts.csswg.org/cssom-view/#extensions-to-the-window-interface">Черновик спецификации</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior">Документация на MDN</a></li>
</ol>ymatuhinПолосы прокрутки семейства WindowsАдекватное подчеркивание ссылок2017-07-15T00:00:00+00:002017-07-15T00:00:00+00:00https://ymatuhin.ru/front-end/text-decoration-skip<figure>
<img src="/assets/img/text-decoration/preview.png" alt="" width="1280" height="722" />
</figure>
<p>Стандартное подчеркивание — ад перфекциониста. Оно нагло перекрывает висячие символы в тексте, его становится сложнее читать, и это режет глаза.</p>
<p>Для решения этой проблемы есть разные способы: SASS-миксины и JS-библиотеки. Эти методы не лишины недостатков, для миксинов нужен был однородный фон, а для библиотеки сами по себе большие и неудобные.</p>
<p>Благо ребята из w3с стандартизировали свойство <a href="https://www.w3.org/TR/css-text-decor-3/#text-decoration-skip">text-decoration-skip</a>, указав которое, можно заставить подчеркивание прерываться на висячих символах. Всего пара строчек, и моментально ваш сайт станет чуточку удобнее и лучше.</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nt">a</span> <span class="p">{</span>
<span class="nl">-webkit-text-decoration-skip</span><span class="p">:</span> <span class="n">ink</span><span class="p">;</span>
<span class="nl">text-decoration-skip</span><span class="p">:</span> <span class="n">ink</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div></div>
<p><a href="https://codepen.io/ymatuhin/pen/rwRvQr?editors=1100" class="bigger">Демка</a> и поддержка бразузерами.</p>
<figure>
<img src="/assets/img/text-decoration/support.png" alt="Данные о свойстве text-decoration-skip c сайта caniuse.com" width="1236" height="365" />
<figcaption>Данные о свойстве text-decoration-skip c сайта caniuse.com</figcaption>
</figure>
<h3 id="примечания">Примечания</h3>
<ul>
<li>В сафари на macOS подчеркивание выглядит хорошо и без text-decoration-skip</li>
<li>В хроме можно установить расширение <a href="https://chrome.google.com/webstore/detail/user-javascript-and-css/nbhcbdghjpllgmfilhnhkllmkecfmpld">User JavaScript and CSS</a> и добавить туда:
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <span class="nt">a</span> <span class="p">{</span>
<span class="nl">-webkit-text-decoration-skip</span><span class="p">:</span> <span class="n">ink</span><span class="p">;</span>
<span class="nl">text-decoration-skip</span><span class="p">:</span> <span class="n">ink</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div> </div>
<p>Это исправит подчеркивание на всех сайтах.</p>
</li>
</ul>ymatuhinСвязывание текстового редактора с Git2017-04-19T00:00:00+00:002017-04-19T00:00:00+00:00https://ymatuhin.ru/tools/git-default-editor<p>При редактировании сообщений комита Git по умолчанию открывает Vim. Для тех кто с ним не знаком, это может стать серьезной проблемой. Хорошо что это поведение легко изменить выполнив одну команду в терминале.</p>
<h2 id="visual-studio-code">Visual Studio Code</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "code --wait"
</code></pre></div></div>
<h2 id="atom">Atom</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "atom --wait"
</code></pre></div></div>
<h2 id="textmate">TextMate</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "mate -w"
</code></pre></div></div>
<h2 id="nano">nano</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "nano -w"
</code></pre></div></div>
<h2 id="text-wrangler-mac">Text Wrangler (Mac)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "edit -w"
</code></pre></div></div>
<h2 id="sublime-text-mac">Sublime Text (Mac)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "subl -n -w"
</code></pre></div></div>
<h2 id="sublime-text-win-x32">Sublime Text (Win, x32)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "'c:/program files (x86)/sublime text 3/sublime_text.exe' -w"
</code></pre></div></div>
<h2 id="sublime-text-win-x64">Sublime Text (Win, x64)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "'c:/program files/sublime text 3/sublime_text.exe' -w"
</code></pre></div></div>
<h2 id="notepad-win-x32">Notepad++ (Win, x32)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "'c:/program files (x86)/Notepad++/notepad++.exe' -multiInst -notabbar -nosession -noPlugin"
</code></pre></div></div>
<h2 id="notepad-win-x64">Notepad++ (Win, x64)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "'c:/program files/Notepad++/notepad++.exe' -multiInst -notabbar -nosession -noPlugin"
</code></pre></div></div>
<h2 id="kate-linux">Kate (Linux)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "kate"
</code></pre></div></div>
<h2 id="gedit-linux">Gedit (Linux)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "gedit --wait --new-window"
</code></pre></div></div>
<h2 id="scratch-linux">Scratch (Linux)</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "scratch-text-editor"
</code></pre></div></div>
<h2 id="emacs">emacs</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "emacs"
</code></pre></div></div>
<h2 id="vim">vim</h2>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>git config --global core.editor "vim"
</code></pre></div></div>
<p>Я привязал VSCode к гиту. Пригождается когда нужно изменить сообщение комита <code class="language-plaintext highlighter-rouge">git commit --amend</code>.</p>ymatuhinПри редактировании сообщений комита Git по умолчанию открывает Vim. Для тех кто с ним не знаком, это может стать серьезной проблемой. Хорошо что это поведение легко изменить выполнив одну команду в терминале.Миграция на Visual Studio Code2017-03-15T00:00:00+00:002017-03-15T00:00:00+00:00https://ymatuhin.ru/tools/migrate-to-vs-studio-code<figure>
<img src="/assets/img/vscode/icon-dribbble.png" alt="Альтернативная версия иконки для VS Code, автор <a href='https://dribbble.com/shots/2436746-Visual-Studio-Code-replacement-icon'>James Gilyead</a>" width="800" height="480" />
<figcaption>Альтернативная версия иконки для VS Code, автор <a href="https://dribbble.com/shots/2436746-Visual-Studio-Code-replacement-icon">James Gilyead</a></figcaption>
</figure>
<p>Уже 2 недели я использую <a href="https://code.visualstudio.com/">Visual Studio Code</a> для работы. Он пришел на замену, моему любимому, атому. В этой статье я расскажу почему так произошло и поделюсь впечатлениями.</p>
<h2 id="почему-захотелось-перейти">Почему захотелось перейти</h2>
<p>Основная причина перейти на другой текстовый редактор — <em>ужасная тормознутость</em> Atom. Случайно откроешь не тот файл, который чуть больше половины мегабайта и снова приходится открывать диспетчер задач.</p>
<p>Вторая же причина — у VS Code встроенный IntelliSense. Т.е. он могет как крутая IDE оставаясь таким же легковесным как Sublime Text.</p>
<h3 id="что-мешало-миграции">Что мешало миграции</h3>
<p>Самая большая проблема — нужно привыкать к новым горячим клавишам (хоткеям). Именно это мне помешало перейти на VS Code пол года назад. В этот раз я основательно подготовился и нашел плагины, которые делают VS Code похожим на Atom:</p>
<ol>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings">Atom keymap</a> — переносит привычные сочетания из Atom в VS Code. Автор плагина — Microsoft. Как же я рад что они сделали это.</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=wmaurer.join-lines">Join lines</a> — фиксит не работающее сочетание <code class="language-plaintext highlighter-rouge">CMD + J</code></li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark">Atom One Dark Theme</a> — привычная тема из Atom</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme">Material Icon Theme</a> — иконки для файлов</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate">Duplicate action</a> — дублирование файла/директории через контекстное меню в боковой панели (спасибо <em>c01nd01r</em>)</li>
</ol>
<p>После этого, большинство проблема отпали сами собой.</p>
<h3 id="мои-расширения-под-vs-code">Мои расширения под VS Code</h3>
<p>Помимо описанных выше, я так-же установил:</p>
<ol>
<li><a href="https://marketplace.visualstudio.com/items?itemName=dzannotti.vscode-babel-coloring">Babel ES6/ES7</a> — подсветка es6/es7</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify">Beautify</a> — форматирование документа, взято исключительно из-за параметра <code class="language-plaintext highlighter-rouge">wrap_attributes</code>, который переносит html аттрибуты на новую строчку</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=robinbentley.sass-indented">Sass</a> — думаю тут все понятно</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense">Path Intellisense</a> — автодополнение для путей к файлам</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode">Prettier — JavaScript formatter</a> — форматирование при сохранении, временно требуется для NodeJS курсов</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager">Project Manager</a> — менеджер проектов, такой-же как в Atom</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize">Colorize</a> — подсветка цветов</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css">Custom CSS and JS Loader</a> — подгрузка своего CSS и JS для изменений внутри VS Code</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=medzhidov.hex-rgba-converter">Hex-rgba converter</a> — конвертер цветов</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint">ESLint</a> — линтер</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css">HTML CSS Support</a> — автодополнение классов в HTML</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig">EditorConfig for VS Code</a> — поддержка EditorConfig</li>
</ol>
<h3 id="размышления-в-конце">Размышления в конце</h3>
<p>Редактором VS Code я доволен. Думаю что всем кому не подошел Atom, подойдет VS Code. Который исправил все проблемы, которые были в атоме и доказал что проблема не в лагучем Electron (читай JavaScript).</p>
<p>Если у вас есть чем дополнить статью или вы хотите поделиться вашим опытом использования этого редактора — милости прошу в комментарии.</p>
<p>Спасибо за внимание.</p>
<h4 id="из-комментариев">Из комментариев</h4>
<ol>
<li><a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate">Duplicate action</a> — дублирование файла/директории через контекстное меню в боковой панели (спасибо <em>c01nd01r</em>)</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-scss">SCSS IntelliSense</a> — автодополнение для переменных в SCSS (спасибо <em>c01nd01r</em>)</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Compulim.vscode-express">Express</a> — управление экспресс сервером (спасибо <em>Владиславу Алтынцеву</em>)</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync">Settings Sync</a> — синхронизация настроек (спасибо <em>LeusMaximus</em>)</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=ilich8086.Untabify">Untabify</a> — замена табов на пробелы и наоборот (спасибо <em>Виталию Юрьеву</em>)</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=wmaurer.vscode-jumpy">Jumpy</a> — прыгает по коду (спасибо <em>Виталию Юрьеву</em>)</li>
<li><a href="https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame">Git blame</a> — показыет кто и когда редактировал текующу строку (спасибо <em>Виталию Юрьеву</em>)</li>
</ol>ymatuhinАльтернативная версия иконки для VS Code, автор James GilyeadЧелендж JavaScript302016-12-10T00:00:00+00:002016-12-10T00:00:00+00:00https://ymatuhin.ru/front-end/javascript-30<figure>
<img src="/assets/img/js30/js30.jpg" alt="" width="1200" height="480" />
</figure>
<p>Вы закончили пару курсов и прочитали пару книг о JavaScript, но еще не чувствуете себя уверенно? Не знаете что с этим делать?</p>
<p>Wes Bos советует делать проекты и не останавливаться. Чтобы вам не пришлось искать идеи для проектов и не возиться с TODO, он запустил обучающий курс <a href="https://javascript30.com/">JavaScript30</a>.</p>
<p>В этом курсе вы вместе с ним напишите 30 небольших проектов. Вам не придется возиться с версткой, системами сборки и сборщиками модулей. Только обычные страницы и тег <code class="language-plaintext highlighter-rouge">script</code>.</p>
<p>Это бесплатно. Советую вам перейти на <a href="https://javascript30.com/">главную страницу</a> курса и посмотреть вводное видео, в котором автор рассказывает о способах прохождения курса. Выбирайте один из них и вперед.</p>
<p>Я выполнил первое задание. После разбора я узнал о событии <code class="language-plaintext highlighter-rouge">transitionend</code>. Само задание было веселым, поиграть на барабанах и покодить одновременно — мечта.</p>
<p>Продолжу выполнять по одному заданию в день. Мой прогресс на <a href="https://github.com/ymatuhin/JavaScript30/">GitHub</a>.</p>
<p>Вы уже попробовали? Чем понравилось? Чем нет?</p>ymatuhinОпределяем язык страницы в CSS2016-12-08T00:00:00+00:002016-12-08T00:00:00+00:00https://ymatuhin.ru/front-end/detect-page-lang-in-css<p>Для многоязычных сайтов, часто нужно переопределить стили блоков для определенной локали. Раньше я добавлял класс с названием языка тегу <code class="language-plaintext highlighter-rouge">body</code> или определял язык через <code class="language-plaintext highlighter-rouge">[lang=en]</code>.</p>
<p>Сегодня наткнулся на способ получше — псевдокласс <code class="language-plaintext highlighter-rouge">:lang</code>. Так если на странице у тега <code class="language-plaintext highlighter-rouge">html</code> установлен атрибут <code class="language-plaintext highlighter-rouge">lang=ru</code>, то стили для блока <code class="language-plaintext highlighter-rouge">.example</code> переопределит код:</p>
<div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nc">.example</span><span class="nd">:lang</span><span class="o">(</span><span class="nt">ru</span><span class="o">)</span> <span class="p">{</span>
<span class="c">/* стили для русской локали */</span>
<span class="p">}</span>
</code></pre></div></div>
<p>Поддержка IE7+, подробнее на <a href="http://caniuse.com/#search=%3Alang">caniuse</a></p>ymatuhinДля многоязычных сайтов, часто нужно переопределить стили блоков для определенной локали. Раньше я добавлял класс с названием языка тегу body или определял язык через [lang=en].Код. Удаляем дубликаты из массива2016-11-30T00:00:00+00:002016-11-30T00:00:00+00:00https://ymatuhin.ru/front-end/remove-duplicates-from-array<figure>
<img src="/assets/img/tips/array_uniq.jpg" alt="" width="1440" height="480" />
</figure>
<h2 id="es5">ES5</h2>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">uniqueArray</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">arrArg</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">arrArg</span><span class="p">.</span><span class="nx">filter</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">elem</span><span class="p">,</span> <span class="nx">pos</span><span class="p">,</span><span class="nx">arr</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">arr</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">elem</span><span class="p">)</span> <span class="o">==</span> <span class="nx">pos</span>
<span class="p">})</span>
<span class="p">}</span>
</code></pre></div></div>
<h2 id="es6-es2015">ES6 (ES2015)</h2>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">uniqEs6</span> <span class="o">=</span> <span class="p">(</span><span class="nx">arrArg</span><span class="p">)</span> <span class="o">=></span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">arrArg</span><span class="p">.</span><span class="nx">filter</span><span class="p">((</span><span class="nx">elem</span><span class="p">,</span> <span class="nx">pos</span><span class="p">,</span> <span class="nx">arr</span><span class="p">)</span> <span class="o">=></span> <span class="nx">arr</span><span class="p">.</span><span class="nx">indexOf</span><span class="p">(</span><span class="nx">elem</span><span class="p">)</span> <span class="o">==</span> <span class="nx">pos</span><span class="p">)</span>
<span class="p">}</span>
<span class="c1">// или</span>
<span class="kd">const</span> <span class="nx">uniqEs6</span> <span class="o">=</span> <span class="p">(</span><span class="nx">array</span><span class="p">)</span> <span class="o">=></span> <span class="p">[</span> <span class="p">...</span><span class="k">new</span> <span class="nb">Set</span><span class="p">(</span><span class="nx">array</span><span class="p">)</span> <span class="p">]</span>
</code></pre></div></div>
<p>Поддержка транспайлерами и браузерами <code class="language-plaintext highlighter-rouge">Set</code> — <a href="http://kangax.github.io/compat-table/es6/#test-Set">http://kangax.github.io/compat-table/es6/#test-Set</a></p>
<p>А чем пользуетесь вы?</p>ymatuhinjQuery.width() без округления2016-11-29T00:00:00+00:002016-11-29T00:00:00+00:00https://ymatuhin.ru/front-end/jquery-width<figure>
<img src="/assets/img/jquery/jquery.jpg" alt="" width="1440" height="770" />
</figure>
<p>Я обнаружил что <code class="language-plaintext highlighter-rouge">jQuery.width()</code> округляет значения. Так-же, как и <code class="language-plaintext highlighter-rouge">.height()</code>. Из-за этого у меня была проблема в <code class="language-plaintext highlighter-rouge">1px</code> при некоторых разрешениях.</p>
<p>Если нужен размер «как есть», то используйте нативный метод <code class="language-plaintext highlighter-rouge">getBoundingClientRect</code>.</p>
<h2 id="пример">Пример</h2>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">.element</span><span class="dl">"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">getBoundingClientRect</span><span class="p">().</span><span class="nx">width</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">.element</span><span class="dl">"</span><span class="p">)[</span><span class="mi">0</span><span class="p">].</span><span class="nx">getBoundingClientRect</span><span class="p">().</span><span class="nx">height</span>
<span class="c1">// или</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">.element</span><span class="dl">"</span><span class="p">).</span><span class="kd">get</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">().</span><span class="nx">width</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">.element</span><span class="dl">"</span><span class="p">).</span><span class="kd">get</span><span class="p">(</span><span class="mi">0</span><span class="p">).</span><span class="nx">getBoundingClientRect</span><span class="p">().</span><span class="nx">height</span>
</code></pre></div></div>
<h3 id="совместимость">Совместимость</h3>
<p>Методу в обед сто лет, а узнал только вчера о нем.</p>
<figure>
<img src="/assets/img/jquery/support.png" alt="Поддержка метода getBoundingClientRect" width="1280" height="440" />
</figure>
<p>Полезная информация этого поста влезает в твит, но твиты уходят в небытие и больше их никто не прочитает. Поэтому я публикую это в блоге.</p>ymatuhin