​​VSCode Extensions

Auto Close Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
Помогает закрывать теги

Auto Rename Tag
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
Автоматически переименовывает теги

Bracket Pair Colorizer
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer
Проще ориентироваться в блоках

CSS Peek
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
Быстрее находит нужные стили

Darkula
https://marketplace.visualstudio.com/items?itemName=alex-pex.theme-darkula
Иногда скучаю по стилистике Webstorm

EditorConfig for VS Code
https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig
Для дружбы с editorconfig

ESLint
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Поддержка ESLint

IntelliSense for CSS class names in HTML
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
Помогает с автокомплитом для CSS

open in browser
https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
Быстро открывает сайт в браузере

Path Intellisense
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
Помощь с нахождением путей

Prettier - Code formatter
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Форматирует автоматически код в красивый

Svelte
https://marketplace.visualstudio.com/items?itemName=JamesBirtles.svelte-vscode
Для любителей Svelte

Vetur
https://marketplace.visualstudio.com/items?itemName=octref.vetur
Просто необходимый extension для всех любителей Vue
vscode-icons

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons
Красивые иконки для разных типов файлов

JS Parameter Annotations
https://marketplace.visualstudio.com/items?itemName=lannonbr.vscode-js-annotations
Показывает название параметров для функций

​​Javascript: Как практиковаться?

 Кодить и еще раз кодить
Нужно просто начать писать код, желательно что-то своё. Писать свое велосипеды, слайдеры, пытаться повторить что то сложное. Кстати лучше пытаться делать что посложнее тк одновременно будете и закреплять на практике, что знаешь и нагугливать новые знания( и тут же их применять). 

Попробуйте без фреймворков, даже без джейквери на чистом JS, коряво и в одном файле. Пишите мелкие задачи, калькулятор, вывод по кнопке информацию на экран, табы, если так делать 2-3 недели, практика закрепится на ура.

​​Можно ли использовать Node.js на хостинге?

Проект будет работать только на Node.js хостинге, на php или python хостинге работать не будет. Вам нужен vps/vds, а не хостинг. Если требуется быстро запустить небольшой сайт, проще загрузить на php, если проект принципиально на node, можете просто взять CMS на Node.js и вообще отказаться от PHP.

​​Svelte.js: Еще один повод не учить react, vue

Учите более распространенные вещи — react, vue. По ним больше учебных материалов, легче найти ответы и советы, а Vue не сильно сложнее svelte. если для трудоустройства на официальную работу, то конечно надо изучать то, на что есть спрос в этих компаниях - react, vue. Если делать для своих проектов, для фриланса, то можно побаловаться и с Svelte.

Для чего Вам пригодится Svelte ?

Если Вы работаете один и Вам срочно нужно сделать MVP или небольшую админку. С большой админкой будут проблемы так как при написании нового кода Вы забудете старый или нужно обязательно писать само-документированный код, так как Svelte не «заставляет» Вас это делать.

Если Вы только начинаете учиться писать на JS и делать фронтенд Svelte даст Вам всю свободу «выстрелить в ногу», в соседа по парте или устроить массовую стрельбу по ногам. На самом деле Вам не нужно будет учить JSX или долго разбираться в конвенциях кода, Вы сразу можете сделать Ваш первый фронтенд проект и увидеть, что у Вас уже что-то получилось и что-то даже работает.

​​Нужен ли TypeScript для написания бэкенда на Node.js?

Можно ли обойтись чистым JavaScript?
Да. TypeScript лишь добавляет к JavaScript статическую типизацию в компайл-тайм. После компиляции будет все тот же JS.

Главный плюс TypeScript - скорость разработки за счет подсказок IDE и автодополнения, больше авторефакторингов. Ну и возможность ограничить использование функций/методов от нежелательного использования тоже плюс. А если еще и проектировать доменную модель на типах, то можно сразу видеть, если что-то не сходится, еще до написания логики. В самой логике код неотличим от обычного JS, но с хорошей проверкой типов.

​​Git базовые команды

git clone адрес репозитория - клонировать репозиторий на локальный компютер

git commit -m 'initial commit' комит изменений в локальный репозиторий

git push -u origin master - только первый раз отправка изменений в удаленный репозиторий

git push - все последующие разы отправка изменений в удаленный репозиторий

Откат изменений
git pull - скачивается актуальная версия удаленного репозитория и все изменения применяются к локальному репозиторию

checkout - перейти в другую ветку
discard - не отправлять в репозиторий те изменения которые нам не нравятся
revert - откатить существующие комиты
hard reset -откатить целую пачку комитов

Работа с ветками

merge - сначала подтягиваем в свою ветку из master все изменения
merge - потом тестируем и делаем слияние переходим (checkout) в master и применяем (merge) все изменения из нашей ветки

git commit -a -m 'commit all edited files' закомитить все измененные файлы безиспользования команды git add
git clone - скачивание репозитория
git status - просмотр текущих изменений
git add - добавить файл в локальный репозиторий
git commit - коммит в локальный репозиторий
git push - коммит в удаленный репозиторий

​​Что нужно знать, чтобы работать с react native?

Знание React это большой плюс, но проблема в том что есть серьезные различия Web и Native. Вам как минимум надо знать основные компоненты, например FlatList, где его применяют обязательные свойства и как с ним работать. Не обязательно знать все атрибуты. Естественно никто вам не запретит лезть в доку, но думаю на собеседовании если вы скажете обязательные свойства это будет плюсом. Еще большим плюсом будет понимание кода java и object c (это вам понадобиться рано или поздно, и в зависимости на какой уровень вас берут могут спросить)

​​Как с помощью Webpack минифицировать несколько CSS не объединяя их?

Можно создать отдельные точки и в них импортировать нужные css файлы.

main.css, codehilite.css --> style.min.css
light.css --> light.min.css
dark.css --> dark.min.css

entry: {
'bundle.js': [
path.resolve(__dirname, 'src/index.js')
],
'light.js': [
path.resolve(__dirname, 'src/light.js')
],
'dark.js': [
path.resolve(__dirname, 'src/dark.js')
],
}

​​Верстка roadmap

Если с нуля, можно попробовать еще так:

1) Элементы размещаете просто в сетку с помощью inline-block/float/flex/grid - как привычнее.
2) Родителю задаёте относительное позиционирование, в него помещаете абсолютный элемент на всю ширину/высоту с небольшим запасом, на котором будете рисовать SVG.
3) Как cделается - на js считаете ключевые точки (координаты), через которые нужно провести линии.
4) Динамически рисуете SVG по вашим ключевым точкам.
5) На ресайз окна считаете ключевые точки заново и перерисовываете SVG.
6) Опционально делайте все и добавляете сверху ещё один путь, который по скроллу будет "заполняться"

​​10 потрясающих CSS3 техник

1. Меню в размытии
Прекрасно исполненная версия меню на чистом CSS.

2. Облака на CSS3
На этом демо-сайте можно сгенерировать крайне реалистичные облака и даже поиграть с ними.

3. Логотипы на чистом CSS
Здесь собраны логотипы известных компаний: изготавливались логотипы хардкорно, только с помощью CSS.

4. Азбука на CSS
Ещё один пример творческого подхода к CSS. Каждый пост этого tumblr-журнала представляет собой анимированную букву алфавита, оживающую с помощью CSS.

5. Панель навигации от Jan Kaděra
Простая, но стильная панель навигации.

6. Google Doodle на CSS
Это CSS-версия простой Google Doodle анимации. Выполнена очень аккуратно, работает быстро, и никакого JavaScript!

7. лайдеры для изображений
Ещё один классный проект, посвящённый слайдерам для изображений.

8.Двойное кольцо
Славное анимированное колечко, выполненное с помощью одного-единственного div-элемента и менее сотни строк CSS-кода.

9. Фильтр размытия
Очередная демонстрация использования последних функций CSS3 — переходов, фильтров, 3D-трансформаций и проч.

10. Полное руководство по Flexbox
Подробная статья о новых “гибких” контейнерах (так называемых “флексбоксах” — flexbox). Флексбоксы — это новый способ вёрстки страниц в CSS.

​​Какие минусы у Vue-cli?

В контексте небольших и средних проектов у vue-cli одни плюсы - за условные 5 минут вы получаете типовой config, который можно расширить своими плагинами и получить рабочую сборку.

Большой же проект предполагает, что:
1) может потребоваться нестандартная сборка, несколько точек входа со своим конфигом и прочие веселые прелести
2) на проекте работает специалист, который знает как работает сборщик и умеет написать к нему необходимый конфиг сам с нуля

Если проект полностью подходит под стандартный конфиг vue-cli - ничего плохого в его использовании нет.

У angular cli в этом плане получше - там можно выбрать, что делать с кастомным конфигом - примешать к стандартному, или заменить им стандартный. У vue, несколько я знаю, такой возможности нет.

​​Backend-разработчику нужно знать вёрстку?

Для Backend-разработчика верстка важнее, чем для верстальщика backend

Если вы только изучаете верстку, вам будет даже проще зайти в backend, все таки фронтенд это уже другое.

Нужно знать и понимать фронт. И HTML, и современный CSS, и современный JS, включая Vue и прочие реакты. Лишним оно точно не будет.
Кроме того, работая backend-разработчиком, вам придётся общаться с фронтами. И лучше, если вы будете разговаривать на одном языке.
Да и просто лучше разбираться в том, как это всё работает вместе.

Но если вы нацелены именно на backend, достаточно будет знать frontend-технологии на базовом уровне. Глубокие знания не обязательны.

​​Как написать фронтенд плагин для JavaScript с помощью ES6, SASS и Webpack

Плагин – это независимый элемент общего назначения. При подключении его к приложению не требуется лишних усилий и конфигураций. Фронтенд плагин – это календарь, слайдер, буферклавиатуры. Фронтенд плагином может быть все, что увеличивает функциональность доступных элементов в приложении. Этот плагин может представлять собой отдельное крупное приложение – например, фотогалерею с увеличением для превью.

​​Github для верстальщика

Зачем верстальщику github?

Основные причины использования github:

- Хранение верстки(портфолио).
- Использование хостинга github для работы ваших сайтов.
- Использование github gist(публикация небольшого кода)

Если вы новичок, скорее всего думали о создании github аккаунта, это стоит сделать для структурирования ваших работ, не раз ловил себя на моменте, что хранить свои работы в папках на компьютере или на хостинге, не лучшая идея, очень не удобно.

​​Полезные плагины VS Code для вёрстки

Emmet
Помогает ускорить вёрстку. С помощью ! и tab можно создать базовую структуру кода за 1 секунду, либо быстро создать вложенные теги.

Material Theme
Приятная тема для редактора с разными акцентными цветами.

Live Server
Чтобы сразу увидеть результат работы. Нужно навести на строчку кода, нажать на правую кнопку мыши, выбрать «Open with Live Server» и в браузере отобразится страница, которая автоматически будет перезагружаться.

CSS Peek
Показывает всплывающее окошко с CSS во время работы над HTML. Это упрощает работу и позволяет не искать нужное свойство среди множества классов в большом CSS-файле.

Bracket pair colorizer
Окрашивает открывающие и закрывающие скобки в определённые цвета, что минимизирует количество ошибок и позволяет быстрее разобраться в коде.

Auto rename tag
Удобен для переименования тегов в HTML. Если тег повторяется, при замене одного с помощью плагина, все другие будут переименованы автоматически.

​​Как правильно верстать?

Сделайте 1 страницу полностью, на других страницах доделывайте все остальные, копируя разметку и классы. Обычно придерживаюсь принципу верстки независимыми блоками.

После анализа макетов, делайте одну-две-три (смотря по объему макетов) вспомогательных страниц, на которых верстаете:

1. Базовые элементы. Общая типографика, кнопки, ссылки и т.п.
2. Общие блоки. То что повторяется на нескольких страницах и/или может быть переиспользовано, какие-то виджеты, менюшки, и т.п.

Все это занимает основную часть времени работы. И к окончанию этих этапов вы имеете своего рода набор, или конструктор, из готовых блоков. Остается только написать лейауты для разных страниц и раскидать по ним имеющиеся блоки.

​​ШПАРГАЛКА REACT #1

API верхнего уровня

React.createClass({ ... })

React.isValidElement(c)

ReactDOM.render(, domnode, [callback])

ReactDOM.unmountComponentAtNode(domnode)

ReactDOMServer.renderToString()

ReactDOMServer.renderToStaticMarkup()

Шаблоны JSX

const style = { height: 10 }

return
return

Внутренний HTML

function markdownify() { return "..."; }

Списки

class TodoList extends Component {
render () {
const { items } = this.props

return
{items.map(item =>
)}

}
}

​​Как разместить Vue.js SPA, Laravel, Apace на VPS?

Ставим на сервере Apache, Nodejs, Nginx.
В апаче заводим виртуальный хост на my-site.ru:8080
Для spa поднимаем express сервер на my-site.ru:3000 (номера портов условные)
В nginx поднимаем сервер на восьмидесятом порту и распределяем запросы.
Корневые ('/') - отправляем на node.js сервер, апишные ('/api') - на апач.
Node.js express сервер запускаем с помощью pm2

​​Как разбить Component.vue на подкомпоненты?

В родительском компоненте регистрируем вложенный компонент:

import Button from './Button.vue'

components: {
'app-button': Button
}

в шаблоне этого родительского компонента:

<app-button></app-button>

Все так же, как и в инстанс добавлять локальные компоненты.

​​Как компилировать свой css файл для каждой страницы в Gulp?

Передавайте в SRC не конкретный файл, а glob-шаблон, указывающий на несколько файлов сразу.

let path = {
..
src: {
css: source_folder + "/scss/*.scss",
},
..
}

При этом, каждый файл, будет собирать отдельно и как он там изначально называется значения не имеет.

Еще вариант:

return gulp.src([
'./src/scss/style.scss',
'./src/scss/style-shop.scss'
])