​​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'
])

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

Только начинаю верстать - 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.