​​Полезные плагины 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'
])

Какой уровень в вебе?

Только начинаю верстать - 116
👍👍👍👍👍👍👍 32%
Пишу интерфейсы на Vue/React/Angular - 47
👍👍👍👍 13%
Работаю верстальщиком в студии - 27
👍👍 7%
Frontend-разработчик - 49
👍👍👍👍 13%
Знаю HTML/CSS/JavaScript - 128
👍👍👍👍👍👍👍👍 35%
👥 367 человек уже проголосовало.

​​Опыт Angular поможет в React?

Опыт технологий никогда не будет лишним. Если думать о переходе с Angular на React из-за востребованности - это просто гадание на кофейной гуще и смысла не имеет. Это как бегать из одной очереди в другую в супермаркете, пытаясь угадать, какая быстрее подойдет. Итог обычно таков, что быстрее подходит как раз та, из которой вы дернулись.

Все востребовано. Просто делайте что вам нравится. В этом отличие сеньора от джуна - он спокоен, не дергается и уверен в себе.

​​Зачем unit-тесты JavaScript?

Юнит-тесты во фронтенде наиболее полезны для "фундамента" приложения. Например, вы пишите какую-то либу, которая отвечает за логику и обработку данных. Ее будет очень полезно покрыть тестами, чтобы в дальнейшем сосредоточиться на интерфейсе и быть хоть немного уверенным, что если появился баг, то его причины не лежат глубоко.

Функционал же (события, изменения DOM) стоит тестировать только для того, чтобы в дальнейшем при расширении приложения, было легко убедиться, что базовый функционал не поломался. Естественно все варианты взаимодействия пользователя во всех средах протестировать не реально. Только базу.

Стоит ли использовать Preact вместо React?

Сам Preact не предназначен для повторной реализации React. Есть отличия. Многие из этих различий тривиальны или могут быть полностью устранены с помощью preact-compat , который представляет собой тонкий слой над Preact, который пытается достичь 100% совместимости с React.

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

Сейчас есть несколько тонких различий между Preact и React:

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

​​Превосходство TypeScript

Как бы это странно не звучало, но одно из главных преимуществ TypeScript - это ускорение разработки в несколько раз. 

Система типов у TypeScript по возможностям превосходит JSDOC. Много инструментов для автоматической проверки типов. JSDOC поменьше. JSDoc в плане типов не умеет и 10% того, что умеет TypeScript. Кроме того, никто в здравом уме не пишет JSDoc на приватную логику, а значит проверки типов там не будет.

​​Front-end и конкуренция

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

За 4 месяца изучения front-end, точно не получится зайти в разработку, стоит метить на уровень middle, изучать дополнительные технологии:

- JavaScript
- React
- Redux
- Git
- NodeJS
- Docker
- MongoDB
- Express

​​Как быстро выучить верстку?

Точно следует посмотреть часовой туториал по верстке, с разбором основных моментов html, css. Для быстрого старта стоит покопаться в bootstrap, запомнить нужные классы, как они работают:

- container
- col
- g-3
- row
- row-cols-1

В верстке часто используется:

- div
- section
- header
- footer
- p
- span

​​Тестирование React приложения

При тестах нужно учитывать, что веб-приложение — это не только React, а ещё store, асинхронная логика и все такое. Тестировать точно нужно, глазами протестировать не получится, это не todo-приложения. Для тестирования подойдет jest + enzyme. Что еще нужно учитывать, tdd плохо подходит именно для unit-тестов. Для end-to-end гораздо лучше.

​​Привязка к событиям в Svelte.js

Svelte - это бесплатный интерфейсный компилятор с открытым исходным кодом. Приложения Svelte не содержат ссылок на фреймворки. Рассмотрим небольшой пример кода, добавления нескольких кнопок, чтобы мы могли увеличивать или уменьшать счетчик:

<script>
let count = 0;

function increment() {
count += 1;
}

function decrement() {
count -= 1;
}
</script>

<div>Текущее количество: {count}</div>

<button on:click={increment}>Увеличение</button>
<button on:click={decrement}>Уменьшение</button>

Вы можете связать события, используя синтаксис on:eventname

Затем передать ссылку на функцию, определенную в вашей логике JavaScript.

​​Как проверить код на кроссбраузерность?

1. На BrowserStack в бесплатном режиме можно вживую потестить

2. Вариант на по-быстрому: поставить https://www.falkon.org/download/ - он работает на webkit как и safari, а потому 90% багов совпадают.)

3. Единственный прикладной вариант - поставить макось в виртуалку. Это, правда, не так просто. Скачать VirtualBox, установить OS (потребуется образ macOS), перекинуть проект и протестировать. Профит
Пример гайда по установке: гайд

​​Директивы Vue.js

- v-text
Управляет текстовым содержимым элемента (textContent).

- v-html
Управляет HTML-содержимым элемента (innerHTML). 

- v-show
Переключает CSS-свойство display элемента, в зависимости от того, истинно ли указанное выражение.

- v-if
Осуществляет отрисовку элемента, только если передаваемое выражение истинно.

- v-else
Ограничение: предыдущий элемент должен иметь директиву v-if или v-else-if.

- v-else-if
Ограничение: предшествующий элемент должен иметь v-if или v-else-if.

- v-for
Многократно отрисовывает элемент или блок шаблона, основываясь на переданных данных.

- v-on
Прикрепляет к элементу подписчик события. Тип события указывается в параметре. Выражение может быть именем метода, inline-выражением или вовсе отсутствовать, если указан один или несколько модификаторов.

- v-bind
Динамически связывает атрибуты тега или входной параметр компонента с выражением.

- v-model
Двусторонним образом связывает элемент ввода данных или компонент с переменной.

- v-slot
Указывает именованные слоты или слоты с входными параметрами.

- v-pre
Пропустить компиляцию для этого элемента и всех его потомков. Вы можете использовать это для отображения необработанных тегов {{}}.

- v-cloak
Эта директива останется на элементе до тех пор, пока связанный с ним экземпляр Vue не закончит компиляцию.

- v-once
Однократно отрисовывает элемент или компонент.